/* Moin.Moments Landingpage. Mobil zuerst, Breakpoints nur nach oben.
   Setzt auf der Markenebene moin.css auf. */

/* ---------------------------------------------------------------- Grundlage */

.mm { background: var(--papier); }

/* Defer layout/paint of the long booking form until it approaches the viewport. */
#buchung { content-visibility: auto; contain-intrinsic-size: auto 1500px; }

.mm-bahn {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 20px;
}
@media (min-width: 768px) { .mm-bahn { padding-inline: 40px; } }

.mm-abschnitt { padding-block: 56px 60px; }
@media (min-width: 768px) { .mm-abschnitt { padding-block: 88px 96px; } }
@media (min-width: 1024px) { .mm-abschnitt { padding-block: 116px 124px; } }

.mm-h2 {
    font-family: var(--schrift-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 5.2vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--mark-navy);
    margin: 0 0 .75rem;
    max-width: 22ch;
}

.mm-lauf {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 60ch;
    margin: 0;
}

.mm-hell { background: #fff; }

/* Einblenden beim Scrollen. Zweck: Reihenfolge sichtbar machen, nicht Zierde.
   Ohne JS oder bei reduzierter Bewegung ist alles sofort da. */
.mm-auf { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    html.js .mm-auf {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    }
    html.js .mm-auf.ist-da { opacity: 1; transform: none; }
    html.js #hero .mm-auf { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------- Knöpfe */

.mm-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: 0 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: var(--schrift-text);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .12s;
}
.mm-knopf-voll {
    background: var(--mark-navy);
    border-color: var(--mark-navy);
    color: #fff;
}
.mm-knopf-voll:hover { background: #021728; border-color: #021728; color: #fff; }
.mm-knopf-leer {
    background: transparent;
    border-color: #c8d3db;
    color: var(--mark-navy);
}
.mm-knopf-leer:hover { border-color: var(--mark-navy); color: var(--mark-navy); }
.mm-knopf:active { transform: translateY(1px); }

/* Die Kopfzeile steht in moin-kopf.css, weil sie auf allen Moin-Seiten
   gebraucht wird und nicht nur auf der Startseite. */

/* -------------------------------------------------------------------- Bühne */

.mm-buehne {
    background: var(--papier);
    padding-block: 40px 56px;
}
@media (min-width: 1024px) {
    .mm-buehne { padding-block: 72px 104px; }
}

.mm-buehne-raster { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
    .mm-buehne-raster {
        grid-template-columns: 1.12fr .88fr;
        align-items: center;
        gap: 3.75rem;
    }
}

.mm-h1 {
    font-family: var(--schrift-display);
    font-weight: 500;
    font-size: clamp(2.1rem, 7.4vw, 3.45rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--mark-navy);
    margin: 0 0 1.1rem;
}
.mm-h1 em {
    font-style: italic;
    color: var(--gold-text);
    /* Unterlaengen bei kursiv brauchen Luft, sonst schneidet die Zeile ab */
    line-height: 1.12;
    padding-bottom: .06em;
}

.mm-buehne-text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 34ch;
    margin: 0 0 2rem;
}

.mm-buehne-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
.mm-buehne-knoepfe .mm-knopf { flex: 1 1 auto; min-width: 160px; }
@media (min-width: 480px) { .mm-buehne-knoepfe .mm-knopf { flex: 0 0 auto; } }

.mm-buehne-bild {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--navy-weich);
    box-shadow: var(--shadow-lg);
}
.mm-buehne-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
@media (min-width: 1024px) {
    .mm-buehne-bild img { aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------- Die beiden Erlebnisse */

.mm-duo { display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
    /* bewusst ungleich, damit es kein Baukasten-Raster wird */
    .mm-duo { grid-template-columns: 1.15fr .85fr; gap: 1.75rem; align-items: stretch; }
}

.mm-karte {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mm-karte-bild { background: var(--navy-weich); }
.mm-karte-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
@media (min-width: 900px) {
    /* Die Spalten sind bewusst ungleich breit. Ohne feste Hoehe waeren die
       Bilder deshalb unterschiedlich hoch und die Ueberschriften versetzt. */
    .mm-karte-bild img { aspect-ratio: auto; height: 300px; }
}
.mm-karte-inhalt {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem 1.375rem 1.625rem;
}
@media (min-width: 768px) { .mm-karte-inhalt { padding: 2rem 1.875rem 2.125rem; } }

.mm-karte h3 {
    font-family: var(--schrift-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 .5rem;
    color: var(--mark-navy);
}
.mm-karte p { margin: 0 0 1.125rem; color: var(--text-secondary); line-height: 1.6; }

.mm-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.mm-liste li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .5rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.mm-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 9px;
    height: 2px;
    background: var(--mark-gold);
}
.mm-karte-fuss { margin-top: auto; }

.mm-karte-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}
.mm-karte-knoepfe .mm-knopf { flex: 1 1 9rem; padding-inline: 1rem; }


.mm-preis {
    font-family: var(--schrift-display);
    font-size: 1.125rem;
    color: var(--mark-navy);
    margin: 0 0 1rem;
}

/* --------------------------------------------------------------- Pakete */

.mm-pakete { display: grid; gap: 1.25rem; }
@media (min-width: 860px) {
    .mm-pakete { grid-template-columns: 1fr 1.1fr; gap: 1.5rem; align-items: stretch; }
}

.mm-paket {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.875rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
@media (min-width: 768px) { .mm-paket { padding: 2.25rem 2rem 2.375rem; } }

.mm-paket-hervor {
    background: var(--mark-navy);
    border-color: var(--mark-navy);
    color: #fff;
}
.mm-paket-hervor h3,
.mm-paket-hervor .mm-paket-preis { color: #fff; }
.mm-paket-hervor .mm-liste li { color: rgba(255,255,255,.86); }
.mm-paket-hervor .mm-liste li::before { background: var(--mark-gold); }
.mm-paket-hervor .mm-knopf-leer { border-color: rgba(255,255,255,.42); color: #fff; }
.mm-paket-hervor .mm-knopf-leer:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Requisitenbild oben in der Paketkarte, buendig mit den Kanten. Ohne Bild
   bleibt die Karte wie bisher, das Skript blendet den Platz mit Inhalt ein. */
.mm-paket.hat-bild { padding-top: 0; }
.mm-paket-bild {
    margin: 0 -1.5rem 1.5rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}
@media (min-width: 768px) { .mm-paket-bild { margin-inline: -2rem; } }
.mm-paket-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.mm-paket header { margin-bottom: 1.25rem; }
.mm-paket h3 {
    font-family: var(--schrift-display);
    font-size: 1.375rem;
    font-weight: 500;
    margin: 0 0 .25rem;
    color: var(--mark-navy);
}
.mm-paket-preis {
    font-family: var(--schrift-display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--mark-navy);
    margin: 0;
}
.mm-paket .mm-liste { margin-bottom: 1.75rem; }
.mm-paket-fuss { margin-top: auto; }
.mm-paket-fuss .mm-knopf { width: 100%; }

/* ------------------------------------------------------------- Anlässe */

.mm-anlaesse { display: grid; gap: 1rem; }
@media (min-width: 720px) { .mm-anlaesse { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.mm-anlass {
    padding: 1.5rem 1.375rem 1.625rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}
.mm-anlass:nth-child(1) { background: var(--navy-weich); border-color: #dbe3ea; }
.mm-anlass:nth-child(2) { background: var(--mark-navy); }
.mm-anlass:nth-child(3) { background: var(--gold-weich); border-color: var(--gold-linie); }

.mm-anlass h3 {
    font-family: var(--schrift-display);
    font-size: 1.3125rem;
    font-weight: 500;
    margin: 0 0 .5rem;
    color: var(--mark-navy);
}
.mm-anlass p { margin: 0; line-height: 1.6; color: var(--text-secondary); }
.mm-anlass:nth-child(2) h3 { color: #fff; }
.mm-anlass:nth-child(2) p { color: rgba(255,255,255,.84); }

/* Bild oben in der Anlass-Karte. Ohne Bild bleibt die Karte wie bisher, der
   Platz ist hidden und das Skript blendet ihn erst mit Inhalt ein. Die Karte
   verliert dann ihr oberes Polster, das Bild uebernimmt den Rand. */
.mm-anlass.hat-bild { padding-top: 0; }
.mm-anlass-bild {
    margin: 0 -1.375rem 1.25rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}
.mm-anlass-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* ------------------------------------------------------------ Merkmale */

/* Ohne Skript ein Raster mit allen Kacheln. js/moin-merkmale.js setzt
   .ist-spur auf das Fenster, dann liegen die Kacheln in einer Zeile und nur
   ein Ausschnitt ist zu sehen: zwei Kacheln schmal, drei mittel, sechs breit.
   Die Kacheln bleiben im DOM, das Fenster schneidet nur ab. */
.mm-merkmale-fenster {
    --je-spur: 2;
    --spur-luecke: 1rem;
}
@media (min-width: 640px) { .mm-merkmale-fenster { --je-spur: 3; } }
@media (min-width: 1024px) { .mm-merkmale-fenster { --je-spur: 6; --spur-luecke: 1.25rem; } }
.mm-merkmale-fenster.ist-spur { overflow: hidden; }

.mm-merkmale {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
@media (min-width: 640px) { .mm-merkmale { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mm-merkmale { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.ist-spur .mm-merkmale {
    display: flex;
    gap: var(--spur-luecke);
    transition: transform .65s cubic-bezier(.16,1,.3,1);
    will-change: transform;
}
.ist-spur .mm-merkmale.ohne-uebergang { transition: none; }
.ist-spur .mm-merkmal {
    box-sizing: border-box;   /* sonst kommen Rand und Polster auf die Spurbreite obendrauf */
    flex: 0 0 calc((100% - (var(--je-spur) - 1) * var(--spur-luecke)) / var(--je-spur));
    /* Flex-Kinder weichen sonst vor langen Woertern wie Thermosublimationsdruck aus */
    min-width: 0;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.mm-merkmal {
    padding: 1.375rem 1.375rem 1.5rem;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--border);
}
.mm-merkmal-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: .875rem;
    border-radius: 50%;
    background: var(--gold-weich);
    color: var(--mark-navy);
}
.mm-merkmal-zeichen svg { display: block; }
.mm-merkmal-kopf {
    display: block;
    font-family: var(--schrift-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--mark-navy);
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--gold-linie);
}
.mm-merkmal p { margin: 0; line-height: 1.6; color: var(--text-secondary); }

/* Sechs nebeneinander sind schmal, deshalb in der Spur kleinere Schrift */
@media (min-width: 1024px) {
    .ist-spur .mm-merkmal { padding: 1.125rem 1rem 1.25rem; }
    .ist-spur .mm-merkmal-zeichen { width: 36px; height: 36px; margin-bottom: .75rem; }
    .ist-spur .mm-merkmal-kopf { font-size: 1.0625rem; }
    .ist-spur .mm-merkmal p { font-size: .875rem; line-height: 1.5; }
}

.mm-merkmale-knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}
.mm-merkmale-knoepfe[hidden] { display: none; }
.mm-merkmale-knopf {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 40px;
    padding: 0 .875rem;
    border-radius: 999px;
    border: 1px solid #c8d3db;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--schrift-text);
    font-size: .875rem;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.mm-merkmale-knopf:hover { color: var(--mark-navy); border-color: var(--mark-navy); }
/* Ohne Bewegung sind die Knoepfe der einzige Weg zu den weiteren Kacheln */
@media (prefers-reduced-motion: reduce) {
    .mm-merkmale-knoepfe { justify-content: center; margin-top: 1.25rem; }
    .mm-merkmale-knopf { min-height: 44px; color: var(--mark-navy); border-color: var(--mark-navy); }
}

.mm-alle-merkmale {
    margin-top: 2rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.mm-alle-merkmale summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--schrift-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--mark-navy);
}
.mm-alle-merkmale summary::-webkit-details-marker { display: none; }
.mm-alle-merkmale summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-right: 2px solid var(--mark-gold);
    border-bottom: 2px solid var(--mark-gold);
    transform: rotate(45deg);
    transition: transform .2s;
}
.mm-alle-merkmale[open] summary::after { transform: rotate(-135deg); }
.mm-alle-merkmale-raster {
    display: grid;
    gap: 1.5rem 2rem;
    padding-bottom: 1.75rem;
}
@media (min-width: 640px) { .mm-alle-merkmale-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mm-alle-merkmale-raster { grid-template-columns: repeat(3, 1fr); } }
.mm-alle-merkmale h3 {
    font-family: var(--schrift-text);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 .625rem;
}
.mm-alle-merkmale ul { list-style: none; margin: 0; padding: 0; }
.mm-alle-merkmale li {
    position: relative;
    padding-left: 1.125rem;
    margin-bottom: .35rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.mm-alle-merkmale li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 2px;
    background: var(--mark-gold);
}

/* ------------------------------------------- Galerie und Design */

/* Bild und Text nebeneinander, sobald ein Bild da ist. Ohne Bild bleibt der
   Text allein in einer Spalte, damit keine leere Flaeche entsteht. */
.mm-zweispalt { display: grid; gap: 2rem; align-items: center; }
.mm-zweispalt-text { max-width: 60ch; }
@media (min-width: 900px) {
    .mm-zweispalt.hat-bild { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
    .mm-zweispalt-rechts.hat-bild .mm-zweispalt-bild { order: 2; }
}
.mm-zweispalt-bild {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--navy-weich);
    box-shadow: var(--shadow-md);
}
.mm-zweispalt-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 5;
    object-fit: cover;
}
.mm-zweispalt-text .mm-lauf { margin-bottom: 1.25rem; }
.mm-zweispalt-text .mm-liste { margin-bottom: 1.5rem; }
.mm-hinweis {
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--gold-weich);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--mark-navy);
}
.mm-verweis {
    color: var(--mark-navy);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mm-verweis[hidden] { display: none; }

/* Dritte Karte Gaeste-Galerie. Das Raster wird zu gleichen Spalten, sobald
   sie da ist; auto-fit zaehlt nur sichtbare Karten, also passt es auch, wenn
   das Telefon gerade nicht angeboten wird. */
.mm-karte[hidden] { display: none; }
@media (min-width: 900px) {
    .mm-duo.hat-galerie { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
#productCardGallery .mm-karte-bild img { object-fit: contain; background: #faf7f1; }
.mm-karte-galerie { border-top: 4px solid var(--mark-gold); }
.mm-karte-galerie .mm-karte-inhalt { padding-top: 1.75rem; }

/* -------------------------------------------------------------- Ablauf */

.mm-ablauf-bild {
    margin: 0 0 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.mm-ablauf-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mm-ablauf { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.mm-ablauf li {
    counter-increment: schritt;
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding-block: 1.5rem;
    border-top: 1px solid var(--border);
}
.mm-ablauf li:last-child { border-bottom: 1px solid var(--border); }
.mm-ablauf li::before {
    content: counter(schritt, decimal-leading-zero);
    font-family: var(--schrift-display);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--mark-gold);
}
.mm-ablauf h3 {
    font-family: var(--schrift-display);
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 .25rem;
    color: var(--mark-navy);
}
.mm-ablauf p { margin: 0; line-height: 1.6; color: var(--text-secondary); }
@media (min-width: 768px) {
    .mm-ablauf li { grid-template-columns: 5rem 1fr; gap: 1.75rem; padding-block: 2rem; }
    .mm-ablauf li::before { font-size: 2.5rem; }
}

/* -------------------------------------------------------- Abschluss-Ruf */

.mm-ruf {
    text-align: center;
    padding: 2.5rem 1.5rem 2.75rem;
    background: var(--mark-navy);
    border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .mm-ruf { padding: 4rem 2.5rem 4.25rem; } }
.mm-ruf h2 { color: #fff; margin-inline: auto; }
.mm-ruf p { color: rgba(255,255,255,.82); margin: 0 auto 1.75rem; max-width: 46ch; }
.mm-ruf .mm-knopf-voll { background: #fff; border-color: #fff; color: var(--mark-navy); }
.mm-ruf .mm-knopf-voll:hover { background: var(--gold-weich); border-color: var(--gold-weich); color: var(--mark-navy); }

/* ------------------------------------------------------------- Fußzeile */

.mm-fuss {
    background: #fff;
    border-top: 1px solid var(--border);
    padding-block: 3rem 2.5rem;
}
.mm-fuss-raster { display: grid; gap: 2rem; }
@media (min-width: 768px) {
    .mm-fuss-raster { grid-template-columns: auto 1fr; gap: 3.5rem; align-items: start; }
}
.mm-fuss-signet { width: 168px; height: auto; }
.mm-fuss-spalten { display: grid; gap: 1.75rem; }
@media (min-width: 560px) { .mm-fuss-spalten { grid-template-columns: repeat(3, 1fr); } }
.mm-fuss h2, .mm-fuss h4 {
    font-family: var(--schrift-text);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 .75rem;
}
.mm-fuss ul { list-style: none; margin: 0; padding: 0; }
.mm-fuss li { margin-bottom: .5rem; }
.mm-fuss a { color: var(--text-secondary); text-decoration: none; }
.mm-fuss a:hover { color: var(--mark-navy); text-decoration: underline; }
.mm-fuss-schluss {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: .875rem;
    color: var(--text-secondary);
}
.mm-fuss-schluss a { text-decoration: underline; text-underline-offset: .15em; }

/* --------------------------------------------------- Bestand einpassen */

/* Die Buchungsstrecke kommt unveraendert aus dem Bestand und traegt
   ihre eigenen Klassen. Hier nur der Rahmen drumherum. */
#buchung { background: var(--papier); }
#buchung.section { padding-block: 56px 60px; }
@media (min-width: 1024px) { #buchung.section { padding-block: 104px 116px; } }


/* ------------------------------------------------------------ Blaettern */

/* Ein Platz mit mehreren Bildern. Die Bilder liegen uebereinander, das erste
   steht im Fluss und gibt die Hoehe vor, die anderen decken es ab. Die Masse
   je Platz (aspect-ratio am img) gelten damit weiter. Pfeile halbdurchsichtig
   weiss auf dem Bild, Punkte in einer Leiste darunter auf dem Grund des
   Platzes. Wischen und Pfeiltasten regelt js/moin-bilder.js. */
.mm-blaetter {
    position: relative;
    outline: none;
}
.mm-blaetter:focus-visible { box-shadow: 0 0 0 3px var(--mark-gold); }
.mm-blaetter-bilder { position: relative; }
.mm-blaetter-bild {
    transition: opacity .3s ease;
}
.mm-blaetter-bild:not(:first-child) {
    position: absolute;
    inset: 0;
}
.mm-blaetter-bild:not(:first-child) img {
    height: 100%;
    aspect-ratio: auto;
}
.mm-blaetter-bild:not(.ist-aktiv) { opacity: 0; pointer-events: none; }
.mm-blaetter.ohne-uebergang .mm-blaetter-bild { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .mm-blaetter-bild { transition: none; }
}

.mm-blaetter-pfeil {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -1.375rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    color: var(--mark-navy);
    box-shadow: 0 2px 10px rgba(5, 35, 61, .18);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.mm-blaetter-pfeil::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .7rem;
    height: .7rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.mm-blaetter-zurueck { left: .75rem; }
.mm-blaetter-zurueck::before { transform: translate(-30%, -50%) rotate(-135deg); }
.mm-blaetter-vor { right: .75rem; }
.mm-blaetter-vor::before { transform: translate(-70%, -50%) rotate(45deg); }
.mm-blaetter-pfeil:hover { background: #fff; transform: scale(1.06); }
.mm-blaetter-pfeil:focus-visible { outline: 3px solid var(--mark-gold); outline-offset: 2px; }

.mm-blaetter-punkte {
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 0 .65rem;
    background: var(--navy-weich);
}
.mm-blaetter-punkt {
    width: .625rem;
    height: .625rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 35, 61, .28);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.mm-blaetter-punkt:hover { background: rgba(5, 35, 61, .5); }
.mm-blaetter-punkt[aria-current="true"] { background: var(--mark-gold); transform: scale(1.25); }
.mm-blaetter-punkt:focus-visible { outline: 2px solid var(--mark-gold); outline-offset: 2px; }

/* Auf dunklem Kartengrund waere die helle Leiste ein Fremdkoerper */
.mm-paket-hervor .mm-blaetter-punkte,
.mm-anlass:nth-child(2) .mm-blaetter-punkte { background: transparent; }
.mm-paket-hervor .mm-blaetter-punkt,
.mm-anlass:nth-child(2) .mm-blaetter-punkt { background: rgba(255, 255, 255, .38); }
@media (prefers-reduced-motion: reduce) {
    .mm-blaetter-pfeil, .mm-blaetter-punkt { transition: none; }
}

/* ---------------------------------------------------------- Eventbilder */

.mm-eventbilder {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}
@media (min-width: 720px) {
    .mm-eventbilder { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 1024px) {
    .mm-eventbilder { grid-template-columns: repeat(4, 1fr); }
}
.mm-eventbild {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--navy-weich);
}
.mm-eventbild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .35s ease;
}
.mm-eventbild:hover img { transform: scale(1.03); }
.mm-eventbeispiel { grid-column: 1 / -1; display: grid; align-items: center; }
.mm-eventbeispiel picture { display: block; }
.mm-eventbeispiel figcaption { padding: 1.5rem; }
.mm-eventbeispiel h3 { font-family: var(--schrift-display); font-size: 1.8rem; line-height: 1.2; margin: .5rem 0 1rem; }
.mm-eventbeispiel p { line-height: 1.6; margin: 0 0 1rem; }
.mm-eventbeispiel-label { font-size: .85rem; font-weight: 600; }
@media (min-width: 720px) { .mm-eventbeispiel { grid-template-columns: 1.2fr 1fr; } .mm-eventbeispiel figcaption { padding: 2rem; } }