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

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

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

.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; }
}

/* ------------------------------------------------------------------- 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); }

/* ---------------------------------------------------------------- Kopfzeile */

.nav.mm-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(245, 247, 248, .88);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: background-color .25s, border-color .25s;
}
.nav.mm-nav.scrolled {
    background: rgba(255, 255, 255, .94);
    border-bottom-color: var(--border);
}
@media (prefers-reduced-transparency: reduce) {
    .nav.mm-nav, .nav.mm-nav.scrolled { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.mm-nav .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 64px;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 20px;
}
@media (min-width: 1024px) {
    .mm-nav .nav-container { height: 76px; padding-inline: 40px; }
}

.mm-marke { display: flex; align-items: center; text-decoration: none; }
.mm-marke svg, .mm-marke img { display: block; height: 26px; width: auto; }
@media (min-width: 1024px) { .mm-marke svg, .mm-marke img { height: 30px; } }

/* Menü: mobil ausgeklappte Schublade, ab lg eine Zeile */
.mm-nav .nav-menu {
    position: fixed;
    inset: 64px 0 auto 0;
    display: none;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 20px 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.mm-nav .nav-menu.active { display: flex; }
.mm-nav .nav-link {
    padding: .85rem .25rem;
    font-size: 1.0625rem;
    color: var(--mark-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.mm-nav .nav-link:last-child { border-bottom: 0; }
.mm-nav .nav-link-cta {
    margin-top: .75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--mark-navy);
    color: #fff;
    text-align: center;
    padding: .95rem 1.25rem;
}

.mm-nav .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.mm-nav .nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--mark-navy);
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
}

@media (min-width: 1024px) {
    .mm-nav .nav-menu {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.75rem;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .mm-nav .nav-link {
        padding: 0;
        font-size: .9375rem;
        border: 0;
        color: var(--text-secondary);
        transition: color .2s;
    }
    .mm-nav .nav-link:hover { color: var(--mark-navy); }
    .mm-nav .nav-link-cta {
        margin: 0;
        padding: .7rem 1.15rem;
        font-size: .9375rem;
        color: #fff;
    }
    .mm-nav .nav-toggle { display: none; }
}

/* -------------------------------------------------------------------- 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(--mark-gold);
    /* 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-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); }

.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); }

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

.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 h4 {
    font-family: var(--schrift-text);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    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-tertiary);
}

/* --------------------------------------------------- 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; } }