/**
 * Megamenü mit Vorschaubild
 *
 * Alle Regeln hängen unter body.wf-mm. Diese Klasse setzt inc/megamenu.php nur,
 * wenn das Modul aktiv ist (WF_MM_LIVE oder Vorschau-Schalter ?wf_mm=1).
 *
 * Aufbau
 *   1. Variablen
 *   2. Zusatzelemente: Grundzustand
 *   3. Hauptmenü im Desktop-Header: Fokus, offener Punkt, einzeilige Menüzeile
 *   4. Panel im Desktop-Header (ab 769px)
 *   5. Abdunkelung der Seite, Header bleibt bei offenem Panel stehen
 *   6. Mobil-Overlay (bis 768px)
 *   7. Reduzierte Bewegung
 *   8. Erzwungene Farben (Kontrastmodus)
 *
 * !important steht nur dort, wo eine Bestandsregel aus style.css mit
 * !important überschrieben werden muss. Die Stellen sind kommentiert.
 */

/* ------------------------------------------------------------------
   1. Variablen
   ------------------------------------------------------------------ */

body.wf-mm {
    --wf-mm-line: #e7e0d4;                 /* Haarlinie, warm passend zu Creme */
    --wf-mm-dim: rgba(26, 14, 17, 0.36);   /* Abdunkelung hinter dem Panel */
    --wf-mm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --wf-mm-fast: 0.22s;                   /* Dauern als Variablen, Abschnitt 7 setzt sie bei reduzierter Bewegung auf fast null */
    --wf-mm-slow: 0.3s;
    --wf-mm-fade: 0.26s;                   /* Überblendung der Vorschaubilder */
    --wf-mm-max: 1680px;                   /* Inhaltsbreite des Headers */
    --wf-mm-side: 20px;                    /* Seitenrand des Headers */
}

/* ------------------------------------------------------------------
   2. Zusatzelemente: Grundzustand
   Intro, Vorschau und kleine Bilder sind nur dort sichtbar, wo sie weiter
   unten ausdrücklich eingeschaltet werden.
   ------------------------------------------------------------------ */

body.wf-mm .wf-mm-intro,
body.wf-mm .wf-mm-preview,
body.wf-mm .wf-mm-thumb {
    display: none;
}

/* ------------------------------------------------------------------
   3. Hauptmenü im Desktop-Header
   ------------------------------------------------------------------ */

/* Fokus: kein Rahmen nach Mausklick, klarer Rahmen bei Tastaturbedienung.
   Das Parent-Theme zeichnet sonst bei jedem Fokus einen Rahmen. */
body.wf-mm .site-header .wp-block-navigation :focus:not(:focus-visible) {
    outline: none;
}

/* Der Rahmen gilt nur für die Elemente des Navigationsblocks selbst. Sie tragen
   alle eine Klasse mit wp-block-navigation (Links, Untermenü-Schalter, Öffnen und
   Schließen des Overlays). Fremde Elemente in einem Navigationsblock des Headers,
   etwa der KI-Hinweis, behalten ihren eigenen Fokusrahmen samt Eckenradius.
   :where() lässt die Spezifität bei 0,4,1, für die Menüelemente ändert sich nichts. */
body.wf-mm .site-header .wp-block-navigation :where([class*="wp-block-navigation"]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 2px;
}

@media (min-width: 769px) {

    /* Menüpunkt mit Untermenü: Hover wie bei den Links, offener Zustand klar erkennbar */
    body.wf-mm .site-header .nur-desktop .wp-block-navigation-submenu__toggle {
        transition: color var(--wf-mm-slow);
    }

    /* Unterstreichung statt Rahmen, damit sich an der Geometrie der Menüzeile nichts ändert */
    body.wf-mm .site-header .nur-desktop .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label {
        text-decoration: underline 2px transparent;
        text-underline-offset: 7px;
        transition: text-decoration-color var(--wf-mm-slow);
    }

    body.wf-mm .site-header .nur-desktop .wp-block-navigation-submenu__toggle:hover,
    body.wf-mm .site-header .nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"],
    body.wf-mm .site-header .nur-desktop .wp-block-navigation-submenu__toggle:hover + .wp-block-navigation__submenu-icon,
    body.wf-mm .site-header .nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon {
        color: var(--color-primary);
    }

    body.wf-mm .site-header .nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation-item__label {
        text-decoration-color: var(--color-primary);
    }

    /* Der Pfeil dreht sich schon im Core, hier kommt nur die weiche Bewegung dazu */
    body.wf-mm .site-header .nur-desktop .wp-block-navigation__submenu-icon svg {
        transition: transform var(--wf-mm-slow) var(--wf-mm-ease);
    }
}

/* Einzeilige Menüzeile zwischen 1280px und 1536px.
   Ab 1536px passt das Menü mit dem Standardabstand von 2rem, dort bleibt alles
   wie bisher. Darunter schrumpft zuerst der Abstand, unter rund 1424px auch
   die Schrift (bis 0.875rem bei 1280px). Unter 1280px bricht die Zeile wie
   bisher um.
   Die Werte sind für dieses Menü gemessen: 8 Punkte, zusammen rund 987px breit
   bei 1rem Schrift, dazu Logo 243px, Seitenränder 40px, Spaltenabstand 19px,
   Rollbalken 17px und 6px Reserve. Bei deutlich anderem Menüinhalt neu messen.
   Breiten in em und rem, damit die Regel mit der Schriftgröße des Browsers mitgeht.
   Obergrenze 95.99em: Dort erreicht die Formel für den Abstand genau 2rem. Endete
   die Regel früher, fehlte zwischen 1530 und 1535px die Reserve von 6px.
   Deckel bei --wf-mm-max: Jede Formel steht ein zweites Mal mit der Inhaltsbreite
   des Headers statt 100vw, der kleinere Wert gilt. Breiter wird der Inhalt des
   Headers nicht, bei größerer Standardschrift (Regel reicht dann über 1680px
   hinaus) wüchsen Abstand und Schrift sonst ohne Platz weiter. Bei 16px
   Standardschrift greift der Deckel nie, die Werte bleiben dort unverändert. */
@media (min-width: 80em) and (max-width: 95.99em) {

    body.wf-mm .site-header .nur-desktop .wp-block-navigation:has(.wf-mm-panel) {
        column-gap: min(
            2rem,
            max(calc(0.8125rem + (100vw - 80rem) * 0.0208), calc((100vw - 81.99rem) / 7)),
            max(calc(0.8125rem + (var(--wf-mm-max) - 80rem) * 0.0208), calc((var(--wf-mm-max) - 81.99rem) / 7))
        );
    }

    body.wf-mm .site-header .nur-desktop .wp-block-navigation:has(.wf-mm-panel) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
    body.wf-mm .site-header .nur-desktop .wp-block-navigation:has(.wf-mm-panel) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
        font-size: min(
            1rem,
            calc(0.875rem + (100vw - 80rem) * 0.0139),
            calc(0.875rem + (var(--wf-mm-max) - 80rem) * 0.0139)
        );
    }
}

/* ------------------------------------------------------------------
   4. Panel im Desktop-Header
   Gilt nur für Untermenüs der ersten Ebene, die das Modul erweitert hat
   (Klasse wf-mm-panel). Alles andere behält das Dropdown des Themes.
   ------------------------------------------------------------------ */

@media (min-width: 769px) {

    body.wf-mm .site-header .nur-desktop .wp-block-navigation__container > .wp-block-navigation-submenu > .wf-mm-panel {
        --wf-mm-edge: max(var(--wf-mm-side), calc((100% - var(--wf-mm-max)) / 2 + var(--wf-mm-side)));
        --wf-mm-gap: clamp(24px, 3vw, 64px);

        /* Volle Breite direkt unter dem Header. Der Header ist fixiert und hat ein
           transform, er ist damit Bezugsrahmen für fixierte Nachfahren: top 100 %
           ist die Header-Unterkante, egal ob das Menü ein- oder zweizeilig ist.
           !important, weil style.css (Abschnitt 5, .nur-desktop ... submenu-container)
           position, top, left und right mit !important setzt. */
        position: fixed !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 3;
        margin: 0;

        /* Drei Zonen: Intro, Links in zwei Spalten, Vorschau.
           Die Links füllen spaltenweise. Die letzte Zeile nimmt die Resthöhe auf,
           damit die Linkzeilen nicht mit der Bildhöhe wachsen. */
        display: grid;
        grid-template-columns: minmax(0, 22fr) minmax(0, 22fr) minmax(0, 22fr) minmax(0, 34fr);
        grid-template-rows: repeat(var(--wf-mm-rows, 5), auto) minmax(0, 1fr);
        grid-auto-flow: column;
        column-gap: var(--wf-mm-gap);
        row-gap: 0;
        align-items: start;

        /* Höchstens so hoch wie der sichtbare Bereich unter dem Header, sonst intern scrollen */
        max-height: calc(100vh - 100%);
        max-height: calc(100dvh - 100%);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        padding: clamp(36px, 3.4vw, 56px) var(--wf-mm-edge) clamp(40px, 3.8vw, 60px);
        background-color: #fff;
        border: 0;
        border-top: 1px solid var(--wf-mm-line);
        box-shadow: 0 30px 50px -30px rgba(26, 14, 17, 0.3);
        color: var(--color-text);
        text-align: left;

        transform: translateY(-8px);
        transition: opacity var(--wf-mm-fast) ease, transform var(--wf-mm-slow) var(--wf-mm-ease);
    }

    body.wf-mm .site-header .nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wf-mm-panel {
        transform: none;
    }

    /* Belegt die Restzeile unter den beiden Linkspalten, damit dort kein Link landet */
    body.wf-mm .site-header .nur-desktop .wp-block-navigation__container > .wp-block-navigation-submenu > .wf-mm-panel::after {
        content: "";
        grid-column: 2 / 4;
        grid-row: -2 / -1;
    }

    /* Zone 1: Intro */
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wf-mm-intro {
        display: block;
        grid-column: 1;
        grid-row: 1 / -1;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-intro__kicker {
        display: block;
        margin-bottom: 14px;
        font-family: var(--font-body);
        font-size: 0.6875rem;
        font-weight: 400; /* Schnitt des Fließtexts, damit das geschlossene Panel keine weitere Schriftdatei anfordert */
        line-height: 1.4;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--color-primary);
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-intro__title {
        display: block;
        font-family: var(--font-heading);
        font-size: clamp(2.25rem, 1.45rem + 1.1vw, 2.75rem);
        font-weight: 500;
        line-height: 1.05;
        letter-spacing: 0.005em;
        text-transform: none;
        color: var(--color-text);
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Kurze Linie wie unter den Überschriften der Seiten (section-divider-line) */
    body.wf-mm .site-header .nur-desktop .wf-mm-intro__title::after {
        content: "";
        display: block;
        width: 48px;
        height: 2px;
        margin-top: 22px;
        background-color: var(--color-primary);
    }

    /* Zone 2: Links */
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item {
        display: block;
        margin: 0;
        border-bottom: 1px solid var(--wf-mm-line);
        box-shadow: 0 -1px 0 var(--wf-mm-line);
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 15px 2px 14px 0;
        font-family: var(--font-heading);
        font-size: clamp(1rem, 0.78rem + 0.3vw, 1.0625rem);
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: normal;
        color: var(--color-text);
        background-color: transparent;
        transition: color var(--wf-mm-fast) ease;
    }

    /* Silbentrennung statt Bruch mitten im Wort, wenn ein langes Wort nicht in die Spalte
       passt (html trägt lang="de"). Getrennt werden nur Wörter ab 12 Zeichen: Kürzere
       brechen wie bisher am Leerzeichen um, sonst zöge die Trennung bei zwei Wörtern
       einen Wortteil in die erste Zeile (Rainer Trauten-bach).
       Die Trennung steht in @supports: Browser, die hyphens: auto kennen, die Zeichengrenze
       aber nicht, trennten sonst auch kurze Wörter. Dort bleibt es beim Umbruch wie bisher.
       position, left und transition gehören zum Einzug bei Hover und Fokus. */
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content > .wp-block-navigation-item__label {
        position: relative;
        left: 0;
        flex: 1 1 auto;
        min-width: 0;
        transition: left var(--wf-mm-slow) var(--wf-mm-ease);
    }

    @supports (hyphenate-limit-chars: 12) {
        body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content > .wp-block-navigation-item__label {
            hyphens: auto;
            hyphenate-limit-chars: 12;
        }
    }

    /* Kleiner Pfeil am Zeilenende, erscheint bei Hover und Fokus */
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
        content: "";
        flex: 0 0 18px;
        height: 9px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9'%3E%3Cpath d='M0 4.5h16.5M13 1l3.5 3.5L13 8' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9'%3E%3Cpath d='M0 4.5h16.5M13 1l3.5 3.5L13 8' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity var(--wf-mm-fast) ease, transform var(--wf-mm-slow) var(--wf-mm-ease);
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
        color: var(--color-primary);
        background-color: transparent;
    }

    /* Einzug um 6px. Verschoben wird die Bezeichnung selbst (position relative, left) statt
       per padding-left am Link: So bleibt ihre Breite gleich und eine knapp passende Zeile
       bricht beim Überfahren nicht um. Die Linie vor der aktuellen Seite wandert wie bisher mit.
       left statt transform: WebKit beginnt eine transform-Transition an der Bezeichnung
       immer wieder neu, solange am Link die Farbe überblendet. Der Einzug dauerte dort
       gemessen rund 0.45s statt 0.3s. */
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:hover > .wp-block-navigation-item__label,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible > .wp-block-navigation-item__label,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:hover::before,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:focus-visible::before {
        left: 6px;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after {
        opacity: 1;
        transform: none;
    }

    /* Der Fokusrahmen liegt innen, damit ihn der scrollbare Bereich nicht abschneidet */
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
        outline-offset: -2px;
    }

    /* Aktuelle Seite: Bordeaux und eine kurze Linie vor der Beschriftung */
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
        color: var(--color-primary);
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::before {
        content: "";
        position: relative;
        left: 0;
        flex: 0 0 14px;
        height: 1px;
        background-color: currentColor;
        transition: left var(--wf-mm-slow) var(--wf-mm-ease);
    }

    /* Zone 3: Vorschau. Erst sichtbar, wenn das Skript läuft, sonst bleibt die Liste allein stehen. */
    html.wf-mm-js body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wf-mm-preview {
        display: block;
        grid-column: 4;
        grid-row: 1 / -1;
        justify-self: end;
        width: 100%;
        max-width: 480px;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-preview__frame {
        position: relative;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        border-radius: var(--border-radius, 4px);
        background-color: var(--color-secondary);
    }

    /* Zwei Bildebenen: Die neue blendet über der alten ein, die alte verschwindet erst danach */
    body.wf-mm .site-header .nur-desktop .wf-mm-preview__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0s linear var(--wf-mm-fade);
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-preview__img.is-active {
        z-index: 1;
        opacity: 1;
        transition: opacity var(--wf-mm-fade) ease;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-preview__img:not([src]) {
        visibility: hidden;
    }

    /* Links ohne Bild: Fläche in Creme mit der Bezeichnung des Links und der kurzen Linie.
       Sie liegt über den Bildebenen und blendet ein, sobald das Skript is-leer setzt. */
    body.wf-mm .site-header .nur-desktop .wf-mm-preview__tile {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8% 10%;
        background-color: var(--color-secondary);
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--wf-mm-fade) ease, visibility 0s linear var(--wf-mm-fade);
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-preview__frame.is-leer .wf-mm-preview__tile {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-preview__tile-label {
        display: block;
        max-width: 100%;
        font-family: var(--font-heading);
        font-size: clamp(1.625rem, 0.9rem + 1.5vw, 2.5rem);
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.005em;
        text-transform: none;
        color: var(--color-primary);
        overflow-wrap: break-word;
        hyphens: auto;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-preview__tile-label::after {
        content: "";
        display: block;
        width: 48px;
        height: 2px;
        margin: 20px auto 0;
        background-color: var(--color-primary);
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-preview__caption {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 1.4em;
        margin-top: 16px;
        font-family: var(--font-body);
        font-size: 0.6875rem;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-text-light);
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-preview__caption::before {
        content: "";
        flex: 0 0 24px;
        height: 1px;
        background-color: var(--color-primary);
    }
}

/* Schmaler Desktop-Header (769px bis 1199px): Intro entfällt, Links bleiben zweispaltig */
@media (min-width: 769px) and (max-width: 1199px) {

    body.wf-mm .site-header .nur-desktop .wp-block-navigation__container > .wp-block-navigation-submenu > .wf-mm-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    }

    body.wf-mm .site-header .nur-desktop .wp-block-navigation__container > .wp-block-navigation-submenu > .wf-mm-panel::after {
        grid-column: 1 / 3;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wf-mm-intro {
        display: none;
    }

    html.wf-mm-js body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wf-mm-preview {
        grid-column: 3;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding-top: 13px;
        padding-bottom: 12px;
        letter-spacing: 0.04em;
    }
}

/* ------------------------------------------------------------------
   5. Abdunkelung und Header
   ------------------------------------------------------------------ */

@media (min-width: 769px) {

    /* Fläche unter dem Header. Ein Klick darauf nimmt dem Menü den Fokus, der Core schließt es dann. */
    body.wf-mm .site-header::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100vh;
        background-color: var(--wf-mm-dim);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--wf-mm-slow) ease, visibility 0s linear var(--wf-mm-slow);
    }

    body.wf-mm .site-header:has(.nur-desktop .wf-mm-panel):has(.nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"])::after {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    /* Solange ein Panel offen ist, schiebt sich der Header beim Scrollen nicht weg.
       translateY(0) statt none, damit der Header Bezugsrahmen für das Panel bleibt. */
    body.wf-mm .site-header.header-hidden:has(.nur-desktop .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
        transform: translateY(0);
    }
}

/* ------------------------------------------------------------------
   6. Mobil-Overlay (bis 768px)
   Das Akkordeon und seine Schrift bleiben. Neu ist das kleine Bild je Link.
   Das Aufklappen steuert weiter mobile-nav.js über display, deshalb setzt
   diese Datei display am Container nicht.
   ------------------------------------------------------------------ */

@media (max-width: 768px) {

    /* Hauptliste im Overlay: eine Spalte, deshalb ausdrücklich ohne Umbruch.
       Der Core stellt die Liste im Overlay auf flex-direction: column, lässt aber
       flex-wrap: wrap aus der Menüzeile stehen. WebKit 27.2 zieht in einer Liste
       mit column und wrap das Layout der Punkte nicht mehr nach, sobald ein Punkt
       ein Bild enthält (die kleinen Bilder der Untermenüs, Emoji-Ersatzbilder des
       Core): Das angetippte Untermenü bekommt display: flex, bleibt aber 0 x 0.
       Ohne Umbruch tritt das nicht auf. An der Darstellung ändert sich nichts,
       die Liste hat keine feste Höhe und bricht auch mit wrap nie in eine zweite
       Spalte um. Kann entfallen, wenn WebKit den Fehler behoben hat. */
    body.wf-mm .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        flex-wrap: nowrap;
    }

    /* Eine durchgehende feine Linie am Container ersetzt die Linie an jedem einzelnen Link */
    body.wf-mm .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wf-mm-panel {
        gap: 0;
        margin: 6px 0 14px 8px;
        padding: 2px 0 2px 18px;
        border-left: 1px solid rgba(122, 27, 45, 0.3);
    }

    body.wf-mm .site-header .wp-block-navigation__responsive-container.is-menu-open .wf-mm-panel > .wp-block-navigation-item {
        width: 100%;
    }

    body.wf-mm .site-header .wp-block-navigation__responsive-container.is-menu-open .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 56px;
        margin-left: 0;
        padding: 4px 0;
        border-left: 0;
        white-space: normal;
    }

    body.wf-mm .site-header .wp-block-navigation__responsive-container.is-menu-open .wf-mm-panel .wf-mm-thumb {
        display: block;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        max-width: none;
        border-radius: var(--border-radius, 4px);
        object-fit: cover;
        background-color: var(--color-secondary);
    }

    /* Links ohne Bild: Anfangsbuchstabe der Bezeichnung als Monogramm, gleich groß wie die Bilder */
    body.wf-mm .site-header .wp-block-navigation__responsive-container.is-menu-open .wf-mm-panel .wf-mm-thumb--leer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-heading);
        font-size: 1.625rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0;
        text-transform: uppercase;
        color: var(--color-primary);
    }

    body.wf-mm .site-header .wp-block-navigation__responsive-container.is-menu-open .wf-mm-panel .wf-mm-thumb--leer::before {
        content: attr(data-wf-mm-initial);
    }
}

/* ------------------------------------------------------------------
   7. Reduzierte Bewegung
   Alle Dauern laufen über die Variablen aus Abschnitt 1. Hier fallen
   zusätzlich die Bewegungen weg: Einfahren des Panels, Einzug der Zeile,
   Wandern des Pfeils.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    body.wf-mm {
        --wf-mm-fast: 0.01s;
        --wf-mm-slow: 0.01s;
        --wf-mm-fade: 0.01s;
    }

    body.wf-mm .site-header .nur-desktop .wp-block-navigation__container > .wp-block-navigation-submenu > .wf-mm-panel {
        transform: none;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:hover > .wp-block-navigation-item__label,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible > .wp-block-navigation-item__label,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:hover::before,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:focus-visible::before {
        left: 0;
    }

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
        transform: none;
    }
}

/* ------------------------------------------------------------------
   8. Erzwungene Farben (Kontrastmodus)
   Browser auf Chromium-Basis ersetzen dort jede Hintergrundfarbe durch die
   Farbe der Fläche. Die Linie vor der aktuellen Seite und der Pfeil am
   Zeilenende sind gefüllte Flächen und wären unsichtbar. Sie bekommen
   deshalb die Textfarbe des Systems. Im Normalbetrieb greift dieser Block nicht.
   ------------------------------------------------------------------ */

@media (forced-colors: active) {

    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
    body.wf-mm .site-header .nur-desktop .wf-mm-panel > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::before {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
}


/* ------------------------------------------------------------------
   Ersatzschrift für den Header
   Solange Cormorant Garamond noch lädt, zeigt der Browser Georgia. Georgia
   läuft rund 8.5 % breiter, damit brach die Menüzeile zwischen 1280 und
   1535px kurz zweizeilig um und der Seiteninhalt sprang beim Schriftwechsel
   um rund 50px. Georgia auf 91 % ist minimal schmaler als Cormorant, die
   Zeile bleibt einzeilig. Greift, wo Georgia installiert ist und der
   Browser size-adjust kennt, sonst bleibt alles wie zuvor.
   ------------------------------------------------------------------ */

@font-face {
    font-family: 'WF Cormorant Ersatz';
    src: local('Georgia');
    size-adjust: 91%;
}

body.wf-mm .site-header {
    --wp--preset--font-family--heading: 'Cormorant Garamond', 'WF Cormorant Ersatz', Georgia, serif;
}

/* Firefox beginnt mit einer weiteren @font-face-Familie aus der Schriftliste erst,
   wenn keine frühere mehr lädt. Solange Cormorant lädt, blieb die Ersatzschrift
   dort ungeladen, die Menüzeile stand in unveränderter Georgia und brach um.
   Dieses eine unsichtbare Zeichen verlangt die Ersatzschrift für sich allein.
   Sie ist lokal und damit sofort da, bevor der Header gesetzt wird. Das Element
   liegt außerhalb des Flusses, hat keine Fläche und ist für Vorleseprogramme
   nicht vorhanden. body::before nutzt sonst keine Datei der Website (geprüft
   am 11.11.2026: Theme, Parent-Theme, Plugins, KI-Hinweis, Inline-Stile). */
body.wf-mm::before {
    content: "\00a0";
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-family: 'WF Cormorant Ersatz';
    pointer-events: none;
}