/*
 * Sand-Glas über dem Foto und die Ebenen, die darüber fahren.
 *
 * Gemeinsam: das ist das Menü selbst.
 * Die Zahl im Namen ist die Ladereihenfolge — bei CSS zählt sie.
 */

/*
 * Bis Alpine gelaufen ist, bleibt verborgen, was es erst danach ein- und
 * ausblendet.
 *
 * Stand bis hierher nur im Editor-Stylesheet — dabei nutzen die gemeinsamen
 * Partials x-cloak: Tabs.html für die Fläche jedes Tabs, AccordionItem.html
 * für den aufgeklappten Text. Im Frontend fehlte die Regel also, und beim
 * ersten Bild stünden alle Tabs übereinander, bis Alpine sie sortiert.
 * Aufgefallen ist das nicht, weil das Frontend noch nichts rendert.
 */
[x-cloak] {
    display: none !important;
}

/*
 * Die Seite steht still, solange eine Ebene offen ist (menuOverlay,
 * lockScroll). Das Menü liegt fest über ihr; ohne diese Regel rollt das Rad
 * über der Ebene die Seite darunter.
 *
 * Der Innenabstand ersetzt die Bildlaufleiste, die `hidden` wegnimmt — sonst
 * ruckte die Seite beim Öffnen um deren Breite nach rechts. Den Wert misst das
 * JavaScript und schreibt ihn an das Wurzelelement; ohne sichtbare Leiste ist
 * er null. Das feste Menü rechnet nicht mit, es steht am Fenster.
 *
 * Der Innenabstand hält aber nur den Fluss der Seite still, nicht ihre festen
 * Teile. Gemessen mit Windows-Edge an einer Seite mit festem Kopf, Leiste 15px:
 * der Inhalt des Kopfes sprang beim Öffnen um 7,5px nach rechts, weil ein
 * `position: fixed` am Fenster hängt und das ohne Leiste breiter ist — kein
 * Innenabstand an der Wurzel erreicht ihn. Genau dieser halbe Leistensprung ist
 * das Ruckeln, das beim Öffnen zu sehen war.
 */
.spo-scroll-locked {
    overflow: hidden;
    padding-right: var(--spo-scrollbar-width, 0);
}

/*
 * Deshalb, wo der Browser es kann: die Rinne der Leiste bleibt reserviert,
 * statt ihre Breite an anderer Stelle zu ersetzen. Dann verliert das Fenster
 * beim Sperren gar keine Breite — dieselbe Messung ergibt 0px, für den festen
 * Kopf wie für den zentrierten Inhalt.
 *
 * Die zweite Klasse setzt das JavaScript nur, wenn vorher wirklich eine Leiste
 * da war. Auf einer Seite, die von sich aus nicht rollt, wäre die Rinne neu und
 * der Sprung derselbe, nur andersherum: dieselbe Messung ohne Leiste ergibt
 * -7,5px.
 *
 * `@supports`, weil es die Rinne noch nicht überall gibt (Safari kennt sie erst
 * seit 18.2). Wo sie fehlt, bleibt der Innenabstand — er hält wenigstens den
 * Fluss der Seite ruhig.
 */
@supports (scrollbar-gutter: stable) {
    .spo-scroll-locked--gutter {
        scrollbar-gutter: stable;
        padding-right: 0;
    }
}

/*
 * Die Hülle im Frontend.
 *
 * Glas, Ebenen und Leiste sind absolut gesetzt. Im Editor ist die Bühne ihr
 * Bezugsrahmen — sie baut die Umgebung nach, in der das Menü liegt. Im
 * Frontend gibt es keine Bühne: dort ist das Fenster der Rahmen, und ohne
 * diese Regel läge alles am Dokument und rutschte beim Blättern mit.
 *
 * `pointer-events: none`, damit die Seite darunter bedienbar bleibt, solange
 * nichts offen ist. Glas, Ebene und Leiste schalten sich schon heute selbst
 * wieder scharf — das ist keine neue Zusage, sondern dieselbe, die im Editor
 * die Bühne durchlässig hält.
 */
.spo-menu {
    position: fixed;
    /*
     * Oben, links, rechts am Fenster — und unten so weit, wie das Fenster
     * *sichtbar* ist.
     *
     * Hier stand `inset: 0`. Damit ist die Hülle so hoch wie das gedachte
     * Fenster (Layout-Viewport), und auf einem Telefon ist das die Höhe *ohne*
     * die Adressleiste des Browsers. Solange die Leiste da ist, liegt die
     * Unterkante der Hülle also hinter ihr — und mit ihr die Aktionsleiste, die
     * dort klebt. Beim Blättern verschwindet die Adressleiste, die Hülle
     * bekommt ihren Platz, und die Leiste rutscht ins Bild. Gemeldet als
     * "spo-actionbar-wrap no Mobile quando faco scroll para cima ... a barra
     * movimenta-se e volta ao lugar que devia".
     *
     * `--spo-frame-height` ist genau das Maß, das dagegen hilft: 100dvh, wo es
     * die Einheit gibt (der Block darunter), sonst 100vh. Es steht schon da,
     * weil die Navigations-Karte sich daran begrenzt — die Hülle selbst hielt
     * sich nur nicht daran.
     */
    top: 0;
    left: 0;
    right: 0;
    height: var(--spo-frame-height);
    z-index: 1000;
    pointer-events: none;
    font-family: var(--spo-font);
    color: var(--spo-blue-dark);
    /*
     * Die Höhe des Rahmens, in dem das Menü liegt — im Frontend das Fenster.
     * Sie steht als Custom Property da, weil eine Karte im Inneren wissen muss,
     * wie viel Platz überhaupt ist: das Accordion begrenzt sich daran und rollt
     * in sich, statt die Ebene zu verlängern (63-accordion.css). Im Editor ist
     * der Rahmen die Bühne, dort steht derselbe Name mit ihrem Wert
     * (editor/10-stage.css).
     *
     * `dvh` und nicht `vh`: auf einem Telefon zählt `vh` die Leiste des
     * Browsers mit, die beim Blättern verschwindet — das Menü liegt fest am
     * sichtbaren Bereich und nicht am gedachten. Der Vorrat davor ist für
     * Browser ohne `dvh` da; `@supports` fragt die Einheit ab, weil eine
     * Custom Property jeden Wert annimmt und der Fehler sonst erst in der
     * `calc()` auffällt, die sie benutzt.
     */
    --spo-frame-height: 100vh;
    /*
     * Wo das Logo in der Ecke hängt.
     *
     * Dieselbe Zahl brauchen zwei, die nichts voneinander erben: das Bild setzt
     * seinen Abstand daraus, und die Ebene rechnet daraus, wie viel sie oben
     * freihalten muss (--spo-logo-clearance an .spo-sheet). Geschwister sehen
     * einander nicht, also steht sie hier an der Hülle über beiden — derselbe
     * Grund, aus dem schon die Höhe hier steht (MenuLogo::getRootCss).
     *
     * Im Editor trägt die Bühne denselben Namen mit ihrem Wert
     * (editor/10-stage.css), wie bei --spo-frame-height darüber.
     */
    --spo-logo-top: 26px;
}

@supports (height: 100dvh) {
    .spo-menu {
        --spo-frame-height: 100dvh;
    }
}

/*
 * Die Schrift des Menüs, gegen die der Website.
 *
 * `font-family` an der Hülle war eine Vererbung und damit ein Angebot: sie
 * kommt nur dort an, wo niemand anderes etwas sagt. Im Seitentemplate einer
 * Website sagt aber ständig jemand etwas — `nav a`, `button`, `.menu li`,
 * `body h2` —, und jede dieser Regeln ist spezifischer als das Erbe von
 * .spo-menu. Eine Zeile des Accordions stand dann in der Hausschrift der Site,
 * die daneben in Outfit, und im Bild war es dieselbe Karte in zwei Schriften.
 *
 * Deshalb steht sie hier an jedem Element und mit `!important`: dieselbe Sperre
 * wie bei Farbe, Rahmen und Innenabstand (63-accordion.css, 65-button.css) und
 * aus demselben Anlass. Die Kette selbst steht weiter nur an einer Stelle
 * (--spo-font in tokens.css): Outfit, dann die Schrift des Systems.
 *
 * Die Bühne des Editors ist mit dabei, weil sie im Backend dieselbe Rolle hat
 * (dort ist es Bootstrap, das mitredet) — genau wie beim Fokus-Ring in
 * 95-a11y.css, der aus demselben Grund beide Hüllen nennt.
 *
 * Ohne `::before` und `::after`: die erben die Schrift ihres Elements schon, und
 * ein Zeichen, das eine Website über ein Pseudoelement einfügt, kommt in seiner
 * eigenen Icon-Schrift — die wäre unter dieser Sperre ein Kästchen.
 *
 * Die einzige Ausnahme ist der Claim auf der Bühne: er steht im Design in
 * Caveat. Seine Regel in editor/10-stage.css ist deshalb spezifischer als diese
 * hier und trägt selbst ein `!important`.
 */
.spo-menu,
.spo-menu *,
.spo-stage,
.spo-stage * {
    font-family: var(--spo-font) !important;
}

/*
 * Und dieselbe Sperre für das Kastenmodell.
 *
 * Jede Fläche des Menüs rechnet mit `border-box`: die Kachel ist 100 % ihrer
 * Zelle *einschließlich* ihrer 14px Innenabstand, der Störer 100 % einschließlich
 * seiner 62px rechts. Auf der Bühne des Editors steht das seit immer
 * (editor/10-stage.css); im Frontend kam es bis hierher vom Stylesheet der
 * Website — also von jemandem, der es auch anders haben kann. Mit
 * `content-box` legt sich der Innenabstand *neben* die 100 %, und jede Zelle
 * läuft um ihn zu breit: eine Reihe 1:1:2 steht dann über ihre Fläche hinaus,
 * und gesucht wird der Fehler im Raster.
 *
 * Damit gilt für Breite und Höhe des Menüs eine Rechnung und nicht die des
 * Gastgebers — für jede Angabe in Prozent und für jedes Maß, das eine Reihe
 * ihren Zellen vorgibt.
 */
.spo-menu,
.spo-menu *,
.spo-stage,
.spo-stage * {
    box-sizing: border-box !important;
}

/*
 * Sand-Glas: im Design eine eigene Ebene über dem Foto (inset:0), nicht das
 * Menü-Panel selbst. Werte aus dem Export: blur(16px) saturate(1.08) über
 * einem Sand-Gradienten.
 */
.spo-glass {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, var(--spo-sand-top), var(--spo-sand-bottom));
    backdrop-filter: blur(var(--spo-glass-blur)) saturate(var(--spo-glass-saturate));
    -webkit-backdrop-filter: blur(var(--spo-glass-blur)) saturate(var(--spo-glass-saturate));
    /* Ein- und Ausblenden setzt Alpine als Inline-Animation (fadeAnim) */
}

/*
 * Fläche, in der das Menü liegt – das Panel selbst ist transparent.
 * Waagerecht mittig, senkrecht unten direkt über der Aktionsleiste; das
 * untere Padding hält deren Platz frei (Design: 128px).
 */
/*
 * Der Innenabstand steht in Custom Properties, weil zwei Seiten ihn brauchen:
 * die Fläche selbst und jede Karte darin, die sich auf den freien Platz
 * begrenzt (63-accordion.css rechnet Rahmenhöhe minus oben minus unten). Die
 * kleineren Fenster ändern deshalb nur noch die Werte und nicht die
 * Kurzschreibweise (90-responsive.css) — sonst stünde die Höhe an zwei Stellen
 * und liefe beim nächsten Wert auseinander.
 */
/*
 * Das Logo in der Ecke (MenuLogo).
 *
 * Die Zahlen sind die des Entwurfs: 60px hoch, `width: auto`, ein weicher
 * Schatten, 26px von oben und 40px von der Seite (SPO-Desktop-Menu.html, der
 * Kopf des geschlossenen Zustands). Die Höhe steht hier als Rückfall — die
 * eingestellte kommt inline vom Presenter und geht ihr vor.
 *
 * Die Klasse trägt nur das Aussehen. Wo das Logo liegt, sagt die Umgebung: im
 * Frontend die Regel darunter, im Editor der Kopf der Bühne
 * (editor/10-stage.css), der dieselben Abstände schon hatte.
 */
.spo-menu-logo {
    height: 60px;
    width: auto;
    display: block;
    /*
     * Der Schein hinter dem Logo, damit es auf jedem Untergrund steht.
     *
     * Hier stand eine dunkle Sombra — sie gehörte zum weißen Logo des Pakets.
     * Mit einem blauen Logo half sie nichts: hinter der Ecke liegt das
     * Sand-Glas, und dessen Deckkraft ist einstellbar (MenuAppearance) — steht
     * sie niedrig, kommt das Foto der Seite durch, und Blau auf Dunkel ist weg.
     *
     * `drop-shadow` und kein `box-shadow`: es folgt dem Alphakanal des Bildes
     * und legt den Schein um die Buchstaben, nicht um ein Rechteck.
     *
     * Zwei übereinander und nicht einer: ein einzelner Schein mit niedrigem
     * Alpha ist gegen ein dunkles Foto zu dünn. Der erste (2px) schließt die
     * Kontur, der zweite (8px) trägt den Hof.
     *
     * Die dunkle Sombra kann nicht daneben stehenbleiben: `filter` verkettet,
     * jeder `drop-shadow` wirft den Schatten des *Ergebnisses* des vorherigen.
     * Weiß-dann-dunkel gäbe einen dunklen Ring um den weißen Hof,
     * dunkel-dann-weiß einen weißen Hof um einen dunklen Fleck. Und sie fehlt
     * nicht: auf hellem Grund trägt sich ein blaues Logo selbst.
     */
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, .95))
        drop-shadow(0 0 8px rgba(255, 255, 255, .75));
}

/*
 * Über dem Glas und unter der Aktionsleiste: z-index 12 liegt über den Ebenen
 * (9) und dem Schleier, aber unter der Leiste (30, 30-actionbar.css) — die
 * bleibt das Bedienelement, das nie verdeckt wird.
 *
 * `pointer-events` bleibt aus. Die Hülle des Menüs fängt keine Klicks
 * (`.spo-menu`), und ein Logo, das sie fängt, läge unsichtbar über der Seite
 * darunter und schluckte dort jeden Klick.
 */
.spo-menu > .spo-menu-logo,
.spo-menu > .spo-menu-logo-link {
    position: absolute;
    top: var(--spo-logo-top);
    left: 40px;
    z-index: 12;
    pointer-events: none;
    /*
     * Es blendet ein, und bis hierher tat es das nicht.
     *
     * Der Grund dagegen steht in Frontend/Menu.html und war: eine zweite
     * Animation neben dem auffahrenden Glas wäre Unruhe in derselben Ecke. Was
     * dort nicht bedacht war: das Logo der Website bleibt beim Öffnen liegen,
     * es wird nur vom Glas überdeckt und unscharf. Daneben erscheint dieses
     * hier hart — auf dem Telefon 16px weiter rechts, weil die Website ihres
     * dort ohne Einzug an den Rand setzt und das Menü seines um 16px einrückt.
     * Gemeldet als "the website logo visually shifts to the right when the menu
     * opens".
     *
     * Dieselbe Blende wie das Glas: `.42s ease-in-out`, wörtlich der Wert aus
     * dem Design-Export (menu-overlay.js, ANIM.glassIn). Hier standen zuerst
     * 150ms ease-out — schneller als alles daneben (Glas .42s, Ebene .58s,
     * Menü .78s), und damit fiel das Logo aus der Bewegung heraus statt in ihr
     * zu liegen. Gemeldet als "mais smooth".
     *
     * Zwei Animationen, aber dieselbe: das Glas deckt das Logo der Website zu,
     * während dieses hier aufblendet — im selben Takt gelesen als ein Vorgang
     * und nicht als zwei.
     *
     * Der Wert steht hier und in der ANIM-Tabelle. Ein `:style` wie beim Glas
     * ginge nicht: das Attribut trägt schon die Höhe vom Presenter, und Alpine
     * schriebe es ganz neu.
     *
     * Nur beim Kommen. Beim Gehen ist es schon weg, bevor das Zufahren
     * anfängt (`!closing` am x-show), und das bleibt so: die Ecke gehört dann
     * wieder der Website.
     *
     * `prefers-reduced-motion` hebt es mit allem anderen im Menü auf
     * (95-a11y.css).
     */
    animation: spoFade .42s ease-in-out;
}

/*
 * Nur das verlinkte Logo faengt Klicks: ohne Ziel bleibt die Ecke
 * durchlaessig, wie in der Regel darueber beschrieben. `line-height: 0`,
 * damit der Kasten des Links genau das Bild ist und keine Zeile darunter.
 */
.spo-menu > .spo-menu-logo-link {
    pointer-events: auto;
    line-height: 0;
}

.spo-sheet {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /*
     * Der Platz, den das Logo in der Ecke einnimmt: sein Abstand von oben, seine
     * Höhe, dazu 10px Luft. Beide Zahlen kommen von der Hülle — der Abstand als
     * --spo-logo-top, die Höhe inline vom Presenter (MenuLogo::getRootCss). Die
     * Rückfälle sind die des Designs und gelten dort, wo die Ebene nicht in der
     * Hülle liegt: auf der Bühne des Editors.
     */
    --spo-logo-clearance: calc(var(--spo-logo-top, 26px) + var(--spo-logo-height, 60px) + 10px);
    /*
     * Oben nie weniger, als das Logo verdeckt.
     *
     * Die erste Zahl ist der Wert des Designs, das `max()` der Boden darunter.
     * Solange die Ebene kürzer ist als ihre Fläche, ändert er nichts: sie klebt
     * unten über der Aktionsleiste (`align-items: flex-end`), die Ecke bleibt
     * leer. Er greift erst, wenn der Inhalt bis oben reicht — und genau dann lag
     * das Logo bisher auf der ersten Zeile.
     *
     * Bis hierher stand diese Rechnung nur im Telefon-Block
     * (90-responsive.css). Sie fehlte damit in jedem Fenster, das breiter als
     * 800px, aber niedrig ist: die Höhen-Blöcke setzen dort 24px und 12px, das
     * Logo reicht aber bis 86px hinunter. Zweimal gemeldet — "o logo esta
     * sobrepondo o menu deveria ter um espacamento" (Telefon, damals behoben)
     * und mit einem Screenshot bei 940x525, wo dieselbe Überdeckung wieder zu
     * sehen war.
     *
     * Der Boden gehört in die Custom Property und nicht in das `padding`
     * darunter: das Accordion rechnet seinen freien Platz aus derselben Zahl
     * (63-accordion.css) und begrenzte sich sonst um genau diese Differenz zu
     * großzügig — es läge wieder unter dem Logo.
     */
    --spo-sheet-pad-top: max(40px, var(--spo-logo-clearance));
    --spo-sheet-pad-inline: 40px;
    --spo-sheet-pad-bottom: 128px;
    padding: var(--spo-sheet-pad-top) var(--spo-sheet-pad-inline) var(--spo-sheet-pad-bottom);
    pointer-events: none;
}

/*
 * Eine Ebene, in der eine Reihe die volle Höhe will, nimmt die ganze Fläche.
 *
 * Ohne diese Regel wäre „volle Höhe" oben in einer Ebene wirkungslos: das Sheet
 * richtet seinen Inhalt unten aus (`align-items: flex-end`, oben), die Ebene ist
 * also so hoch wie ihr Inhalt — und 100 % davon ist genau der Inhalt. Die Wahl
 * täte nichts, und das wäre schlimmer als gar keine Wahl.
 *
 * `:has()` und keine Klasse: welche Ebene es trifft, weiß der Stapel darin
 * (GroupElement::holdsFullHeightRow), und an das Sheet reicht kein Presenter —
 * es gehört der Vorlage der Ebene und nicht dem Baustein.
 *
 * Nur mit dieser Reihe, nie allgemein: das Menü des Designs klebt unten über der
 * Aktionsleiste, und eine Ebene, die immer die ganze Höhe nähme, wäre ein
 * anderes Design.
 */
.spo-sheet-inner:has(> .spo-group--fills) {
    height: 100%;
}

.spo-sheet-inner {
    width: 100%;
    /*
     * Gelesen wird von oben, also fängt der Bildlauf oben an.
     *
     * Hier stand `column-reverse`, und das legte den Anfang des Bildlaufs an den
     * unteren Rand. Der Gedanke war der Stapel, der nach oben wächst; die Folge
     * war, dass ein Menü, das nicht in die Höhe passt, unten aufging und man
     * nach oben rollen musste, um seinen Anfang zu sehen — die Schnellzugriffe,
     * die Überschrift, die erste Reihe. Gemeldet als "quando ele abre o menu abre
     * no fundo e tenho de fazer scroll para cima nao faz sentido".
     *
     * Wo das Menü klebt, ändert das nicht: es steht weiter unten über der
     * Aktionsleiste (.spo-sheet: align-items: flex-end), und solange der Inhalt
     * passt, sieht man keinen Unterschied. Passt er nicht, ist jetzt der Kopf zu
     * sehen und man rollt nach unten.
     *
     * Was `column-reverse` daneben leistete, war eine Sache des Editors: die
     * zuletzt angelegte Reihe samt ihrem "+" lag im Bild. Das erledigt jetzt der
     * Editor selbst — er rollt die Auswahl ins Bild (menu-editor.js), so wie es
     * der Baum schon tat. Eine Frage des Bearbeitens gehört nicht in eine Regel,
     * die auch für Besucher:innen gilt.
     */
    display: flex;
    flex-direction: column;
    /*
     * Arbeitsfläche jeder Ebene: im Design hat der Container max-width 1150px
     * bei 40px seitlichem Innenabstand. Das Padding steuert .spo-sheet, hier
     * bleibt die Inhaltsbreite 1150 - 2 * 40 = 1070px. Wie breit eine Section
     * darin wirklich ist, entscheidet SectionWidth.
     */
    max-width: 1070px;
    max-height: 100%;
    /*
     * Passt der Inhalt nicht in die Höhe, wird gerollt — überall.
     *
     * Bis hierher stand das nur im Telefon-Block (90-responsive.css) und auf
     * der Bühne des Editors, und auf dem Schreibtisch stand ein zu hohes Menü
     * ausdrücklich über seine Fläche hinaus. Das war eine Entscheidung, hier
     * notiert als "die Folge dieser Wahl und kein Versehen", und sie ist
     * zurückgenommen: die Fläche endet über der Aktionsleiste, und was darüber
     * hinausragte, lag auf den drei Knöpfen, die als einzige immer sichtbar
     * sind. Gemeldet als "a base do menu nunca podera sobrepor o menu ... o
     * menu fica scrollable mas nunca vai para debaixo ou para cima dos 3
     * butoes principais".
     *
     * Begrenzt ist die Fläche schon: `max-height: 100%` darüber ist der Raum
     * zwischen den beiden Innenabständen des Sheets, und die halten oben das
     * Logo und unten die Leiste frei. Ohne das Rollen war diese Grenze aber nur
     * eine Zeichnung — der Inhalt stand einfach darüber hinaus.
     *
     * *Über* die Leiste kommt ohnehin nichts: sie liegt auf z-index 30, die
     * Ebene auf 9 (30-actionbar.css). Die Zusage nach unten hält der
     * Innenabstand, die nach oben liegt an dieser Zeile.
     *
     * Was es kostet, stand schon vorher hier und steht unten in Luft: ein
     * Bildlaufbereich schneidet an seiner Kante ab, deshalb die 6px für den
     * Fokus-Ring. Und die Ebene ist damit der Bildlauf-Container für jedes
     * `scrollIntoView` darin — im Editor ist genau das erwünscht (menu-editor.js
     * rollt die Auswahl ins Bild, und die Bühne ist `overflow: hidden`), im
     * Frontend rollt nur das Accordion, und das rollt in sich selbst
     * (63-accordion.css).
     */
    overflow: auto;
    /*
     * Die 6px links und rechts sind Luft für den Fokus-Ring.
     *
     * Ein Bildlaufbereich schneidet an seiner Kante ab, und zwar an beiden.
     * Hier stand `overflow-y`, und waagerecht schnitt er trotzdem: steht eine
     * der beiden Achsen nicht auf `visible`, rechnet die andere auf `auto` —
     * die Kurzschreibweise sagt jetzt, was ohnehin galt. Der Ring des
     * äußersten Elements einer Reihe (3px Strich, 2px Abstand) lag damit zur
     * Hälfte dahinter. Der
     * Abstand bleibt deshalb überall stehen, auch wo nicht gerollt wird: er
     * ist Teil der Inhaltsbreite, und ohne ihn sprängen die Reihen zwischen
     * Telefon und Schreibtisch um 12px.
     */
    padding: 0 6px;
    background: transparent;
    color: var(--spo-blue-dark);
    pointer-events: auto;
    /* Auf- und Zufahren setzt Alpine als Inline-Animation (menuAnim) */
}