/* Kopfzeile der Marke Moin.Moments. Eigene Datei, weil jede oeffentliche Seite
   denselben Kopf traegt, die Landingpage-Regeln aus moin-landing.css aber nur
   auf der Startseite gebraucht werden. Setzt auf moin.css auf. */

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

/* style.css bringt aus der alten Marke eine 280 px breite Schublade von rechts
   mit, dazu einen Schleier aus 50 Prozent Schwarz. Auf der hellen Marke sah das
   geoeffnete Menue dadurch aus wie abgeschaltet, und die Schublade sass nur auf
   einem Teil der Breite. Beides hier zurechtgerueckt, nur fuer die Moin-Seiten. */
body.mm .nav-menu {
    width: auto;
    height: auto;
    right: 0;
}

body.mm .nav-overlay {
    background: rgba(11, 22, 41, .28);
    /* Unter dem sticky Header (40), damit Menue und Schliessen bedienbar bleiben. */
    z-index: 39;
}
.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; }
}