/*
 * Accordion und seine Unterpunkte — im Design die Hauptnavigation in der
 * rechten Spalte des Menüs.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 *
 * Die Werte stehen hier 1:1 aus SPO-Desktop-Menu.html. Vorher waren sie
 * geraten (2px Abstände, durchsichtiger Hintergrund, 11px Innenabstand) —
 * gerendert wurde das Accordion nie, und was nicht zu sehen ist, fällt auch
 * nicht auf. Genutzt wird es von zwei Seiten: vom Elementtyp `accordion`, den
 * ein Redakteur füllt, und vom Hauptmenü aus dem Seitenbaum. Das Design kennt
 * genau ein Accordion, also gibt es hier genau einen Satz Regeln.
 */

/*
 * Die Karte. Im Design eine eigene Fläche mit Rand und Schatten, nicht bloß
 * eine Liste: sie liegt neben dem Kachelraster und muss sich dagegen halten.
 *
 * Sie ist zugleich ihr eigener Bildlaufbereich, und das ist die Ansage des
 * Designs: dort steht an der Navigations-Karte `overflow-x:hidden;
 * overflow-y:auto`, während die Menü-Fläche um sie herum `overflow: hidden`
 * trägt. Zu lang wird also nicht das Menü, sondern die Karte — die Kacheln
 * daneben bleiben stehen, wo sie sind. Vorher stand hier `overflow: hidden`
 * ohne Grenze: eine Karte mit vielen Seiten wuchs, bis die Ebene rollte, und
 * mit ihr das ganze Bild.
 *
 * Die Grenze rechnet das Design in JavaScript aus (`maxHeight = leftBottom -
 * navTop`, also bis zur Unterkante der linken Spalte). Hier steht sie in CSS:
 * die Höhe des Rahmens minus dem, was die Fläche oben und unten freihält
 * (--spo-frame-height an .spo-menu bzw. .spo-stage, die Abstände an .spo-sheet).
 * Unten sind das die 128px der Aktionsleiste — dieselbe Kante, an der im Design
 * die linke Spalte endet. Ohne JavaScript, weil eine Messung dieselbe Zahl
 * ergibt und bei jeder Änderung neu laufen müsste.
 *
 * Eine am Element eingestellte Höhe geht vor: sie kommt als Inline-CSS
 * (ElementPresenter::heightCss) und schlägt jede Regel hier.
 *
 * `overflow` steht mit `!important` da, und zwar im Grundzustand: dass die Karte
 * in sich rollt, ist eine Zusage und keine Voreinstellung. Das Menü liegt im
 * Seitentemplate einer Website, und eine Regel wie `nav div { overflow: visible }`
 * nähme ihr den Bildlauf — der Inhalt stünde dann wieder über die Ebene hinaus.
 * `overscroll-behavior: contain` hält das Rad in der Karte, sobald sie am Ende
 * ist, statt die Ebene hinter ihr weiterzuschieben.
 *
 * Rund bleiben die Ecken auch so: `auto` schneidet ebenso ab wie `hidden`.
 */
.spo-accordion {
    border-radius: 8px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    max-height: calc(var(--spo-frame-height, 100vh)
        - var(--spo-sheet-pad-top, 40px) - var(--spo-sheet-pad-bottom, 128px));
    background: var(--spo-sand-strong);
    border: 1px solid rgba(120, 98, 55, .2);
    box-shadow: 0 6px 18px rgba(60, 45, 15, .1);
    /*
     * Die Leiste des Systems ist hier weg, weil sie sich nicht so einstellen
     * lässt, dass sie überall gleich aussieht. Gemessen mit Edge 151 und
     * Firefox 153:
     *
     *   - `scrollbar-width` nimmt nur `auto`, `thin` und `none`. Ein Wert in
     *     Pixeln wird vom Parser verworfen, in beiden Browsern.
     *   - Sobald `scrollbar-width` dasteht, lässt Chromium die
     *     `::-webkit-scrollbar`-Regeln fallen: aus 8px mit runder Kappe wurden
     *     10px in der Form des Systems.
     *   - `@supports not selector(::-webkit-scrollbar)`, um beide Wege zu
     *     trennen, hilft nicht — Firefox meldet den Selektor als unterstützt,
     *     obwohl er ihn nicht umsetzt.
     *
     * Gezeichnet wird sie deshalb selbst (MenuElements/ScrollBar, Maße von
     * menuAccordion.measureScroll). Gerollt wird weiter vom Browser: Rad,
     * Tastatur, Wischen und `scrollIntoView` bleiben, wie sie waren — nur die
     * Anzeige ist unsere.
     *
     * Beide Schreibweisen zum Ausblenden, weil beide Familien gebraucht werden:
     * `scrollbar-width: none` für Firefox und neues Chromium, das
     * Pseudoelement für Chromium vor 121 und Safari vor 18.2.
     */
    scrollbar-width: none;
}

.spo-accordion::-webkit-scrollbar {
    display: none;
}

/*
 * Der Halter der Leiste: klebt oben am Bildlaufbereich und ist 0 hoch, damit er
 * keine Zeile belegt — dieselbe Bauweise wie beim Pfeil weiter unten. Ohne
 * `sticky` wäre der Bezug des Balkens die ganze Karte samt verborgenem Teil, und
 * er wanderte beim Rollen aus dem Bild.
 */
.spo-accordion-bar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 7;
    height: 0;
}

/*
 * Der Balken. 5px breit mit runder Kappe, 3px von der Kante — die Maße, die die
 * Website ihrer eigenen Leiste gibt (`::-webkit-scrollbar { width: 5px }`), in
 * der Sandfarbe der Trennlinien. Höhe und Lage kommen als Inline-Stil.
 *
 * `touch-action: none`, damit das Ziehen auf dem Telefon nicht gleichzeitig die
 * Seite rollt. Beim Überfahren wird er etwas kräftiger — das ist der einzige
 * Zustand, den er hat.
 */
.spo-accordion-bar-thumb {
    display: block;
    position: absolute;
    top: 0;
    right: 3px;
    width: 5px;
    border-radius: 5px;
    background: rgba(120, 98, 55, .45);
    cursor: default;
    touch-action: none;
}

.spo-accordion-bar-thumb:hover {
    background: rgba(120, 98, 55, .7);
}

/*
 * „Hier geht es weiter": der Pfeil aus dem Design, unten mittig in der Karte,
 * solange etwas kommt (MenuElements/ScrollHint, menuAccordion.scrollHint).
 *
 * Zwei Elemente für eine Sache, und beide haben ihren Grund. Der Halter klebt
 * mit `position: sticky` an der Unterkante des Bildlaufbereichs — ein absolut
 * gesetzter Pfeil in der Karte scrollte mit dem Inhalt weg, weil der Bezug die
 * Karte samt ihrem verborgenen Teil ist. Und er ist 0 hoch: als Kind mit Höhe
 * stünde am Ende der Liste eine leere Zeile, die es im Design nicht gibt.
 *
 * Der Pfeil selbst liegt darin absolut, mit den Werten des Entwurfs: 40px
 * Kreis, 12px über der Kante, dunkles Braun-Grau mit Weichzeichner, weißer
 * Strich, dazu spoArrow — der Keyframe steht seit dem Design-Export in
 * tokens.css und wird hier zum ersten Mal benutzt. Das `translate(-50%, 0)` der
 * Bewegung ist zugleich seine waagerechte Mitte; deshalb `left: 50%` ohne
 * eigenes `transform`, das die Animation sonst überschriebe.
 *
 * `pointer-events: none`: der Pfeil sagt etwas, er tut nichts — ein Klick
 * gehört der Zeile, über der er liegt.
 */
.spo-accordion-hint {
    position: sticky;
    bottom: 0;
    z-index: 6;
    height: 0;
    pointer-events: none;
}

.spo-accordion-hint-arrow {
    position: absolute;
    left: 50%;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(28, 22, 12, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    color: #fff;
    animation: spoArrow 1.5s ease-in-out infinite;
}

/*
 * Die 12px aus dem Design trennen zwei Karten – oben trennen sie nichts. Als
 * margin-top an jeder Karte schob die erste alles nach unten weg, und in einer
 * Spalte, die an der Unterkante ausrichtet, stand das Accordion damit tiefer
 * als seine Nachbarn.
 */
.spo-accordion:not(:first-child) {
    margin-top: 12px;
}

/*
 * Die Kopfzeile eines Eintrags: Beschriftung links, Winkel rechts. Der
 * Innenabstand von 16px gibt der Karte ihre Höhe; die Trennlinie steht an der
 * Kopfzeile und nicht am Eintrag, damit sie auch unter dem geöffneten Bereich
 * bleibt.
 */
.spo-accordion-head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    --spo-row-padding: 16px;
    --spo-row-border-top: 0;
    --spo-row-border-bottom: 1px solid rgba(120, 98, 55, .16);
    padding: var(--spo-row-padding);
    border-top: var(--spo-row-border-top);
    border-bottom: var(--spo-row-border-bottom);
    background: transparent;
    color: var(--spo-blue-dark);
    font: inherit;
    font-size: calc(16px - var(--spo-text-shrink));
    font-weight: 500;
    letter-spacing: -.01em;
    text-align: left;
    cursor: pointer;
}

/*
 * Im Design sind es zwei Icons — Winkel nach unten, Winkel nach oben. Hier ist
 * es eines, gedreht: dieselbe Form, und die Drehung lässt sich animieren,
 * während ein Austausch springt.
 */
.spo-accordion-chevron {
    flex-shrink: 0;
    transition: transform .28s ease;
}

.spo-accordion-head.is-expanded .spo-accordion-chevron {
    transform: rotate(180deg);
}

/*
 * Ein hervorgehobener Eintrag.
 *
 * Das Design kennt Hervorhebung genau einmal: den Einstieg ins Buchen unter den
 * Unterpunkten (.spo-link--booking) — orange Linien, leicht getönter Grund,
 * blaue Schrift. Der hervorgehobene Eintrag trägt dieselbe Sprache; zwei
 * Zeichen für dasselbe im selben Menü wären eines zu viel.
 *
 * Nur oben eine Linie: unten hat die Kopfzeile schon ihre eigene, und zwei
 * übereinander wären ein Strich in zwei Farben.
 */
.spo-accordion-head--highlighted {
    --spo-row-border-top: 1.5px solid var(--spo-orange);
    --spo-row-border-bottom: 1.5px solid var(--spo-orange);
    background: rgba(255, 157, 46, .08);
    font-weight: 600;
}

/*
 * Der erste Eintrag hat keine Kante über sich — die Karte schneidet dort ihre
 * Ecken rund, und die Linie liefe quer durch die Rundung.
 */
.spo-accordion-item:first-of-type .spo-accordion-head--highlighted {
    --spo-row-border-top: 1.5px solid transparent;
}

/*
 * Der geöffnete Bereich ist heller als die Karte — das trennt Ebene 1 von
 * Ebene 2 ohne Einrückung der Kopfzeilen.
 *
 * Das Einblenden ist nicht aus dem Design; dort erscheint der Bereich
 * unvermittelt, weil React neu zeichnet. Die .28s sind dieselben wie beim
 * Winkel, damit beides zusammen läuft.
 */
.spo-accordion-body {
    background: var(--spo-sand-card);
    animation: spoFade .28s ease;
}

/*
 * Unterpunkte. Die Einrückung links (30px statt 16px) ist im Design die ganze
 * Zuordnung zur Kopfzeile darüber.
 */
.spo-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    --spo-row-padding: 12px 16px 12px 30px;
    --spo-row-border-top: 0;
    --spo-row-border-bottom: 1px solid rgba(120, 98, 55, .1);
    padding: var(--spo-row-padding);
    border-top: var(--spo-row-border-top);
    border-bottom: var(--spo-row-border-bottom);
    color: var(--spo-blue-dark);
    font-size: calc(14.5px - var(--spo-text-shrink));
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

/*
 * Nur was wirklich etwas tut, reagiert: im Frontend der Link und der Knopf, der
 * eine Ebene öffnet (MenuElements/Link), dazu die beiden Zeilen des Hauptmenüs,
 * die selbst ein Link sind (MenuElements/Dynamic/MainMenu) — im Editor ist
 * derselbe Eintrag ein <span> und tut nichts. Die Erscheinung, die der Browser
 * einem <button> mitgibt, nimmt 95-a11y.css zurück.
 *
 * Der Zeiger nimmt der Zeile ein Zehntel Deckkraft, mehr nicht. Vorher stand
 * hier ein weißer Grund von 45 % — der zeichnete eine zweite Fläche in eine
 * Karte, die ihre Ebenen schon über zwei Sandtöne trennt, und traf die
 * ausgezeichneten Zeilen (--booking, --highlighted) am härtesten: deren
 * orangener Grund verblasste unter dem Weiß. Die Deckkraft nimmt jede Zeile so,
 * wie sie ist.
 */
a.spo-link:hover,
a.spo-link:focus-visible,
button.spo-link:hover,
button.spo-link:focus-visible,
a.spo-accordion-label:hover,
a.spo-accordion-label:focus-visible,
a.spo-accordion-head--plain:hover,
a.spo-accordion-head--plain:focus-visible {
    opacity: .9;
}

/*
 * Einstieg ins Buchen: im Design orange umrandet, oben und unten, mit leicht
 * getöntem Grund. Die Schrift bleibt blau — orange ist der Rahmen, nicht der
 * Text.
 *
 * Dieselbe Auszeichnung trägt ein hervorgehobener Unterpunkt des Hauptmenüs.
 * Zwei Namen, eine Regel: `--booking` sagt, was der Eintrag ist,
 * `--highlighted`, dass jemand ihn ausgezeichnet hat — im Design ist es
 * dieselbe Zeile, und zwei Sätze Werte liefen auseinander.
 */
.spo-link--booking,
.spo-link--highlighted {
    --spo-row-border-top: 1.5px solid var(--spo-orange);
    --spo-row-border-bottom: 1.5px solid var(--spo-orange);
    background: rgba(255, 157, 46, .08);
    font-weight: 600;
}

/*
 * Und sie ändern auch Schrift und Farbe nicht.
 *
 * Die Zeilen des Accordions sind <a> und <button>, sie liegen im Seitentemplate
 * einer Website, und deren `a:hover { text-decoration: underline }` und
 * `a:hover { color: #000 }` treffen sie mit. Beides ist im Menü falsch: die
 * Unterstreichung zieht einen Strich quer durch eine Zeile, die ihre Trennlinie
 * schon hat, und Schwarz nimmt der Navigation die einzige Farbe, die sie trägt.
 * Der Zeiger-Zustand ist die Deckkraft weiter oben und sonst nichts.
 *
 * `!important`, weil eine Regel der Website beliebig spezifisch sein darf — wie
 * bei den Buttons (65-button.css) ist die Zusage ohne das eine Wette auf deren
 * Selektoren.
 *
 * Zwei Blöcke, weil die Farbe zweierlei ist: die Kopfzeile und der Unterpunkt
 * tragen das Blau selbst, Beschriftung und Aufklapper der geteilten Zeile erben
 * es von ihr (67-navigation.css) — und in der ausgezeichneten Zeile wäre ein
 * hingeschriebenes Blau die falsche Hälfte der Wahrheit.
 */
.spo-accordion-head:hover,
.spo-accordion-head:focus,
.spo-link:hover,
.spo-link:focus {
    color: var(--spo-blue-dark) !important;
    text-decoration: none !important;
}

.spo-accordion-label:hover,
.spo-accordion-label:focus,
.spo-accordion-toggle:hover,
.spo-accordion-toggle:focus {
    color: inherit !important;
    text-decoration: none !important;
}

/*
 * Fokus und Zeiger ändern die Geometrie einer Zeile nicht — auch dann nicht,
 * wenn die Website es sagt.
 *
 * In der Zielumgebung steht:
 *
 *     a:focus { outline: none; padding: 0; border: 2px solid #003C6E;
 *               white-space: nowrap; }
 *
 * Drei Dinge gehen damit im Accordion kaputt, sobald jemand mit der Tastatur
 * hineinläuft: der Innenabstand der Zeile fällt weg (16px an der Kopfzeile,
 * 12/30px am Unterpunkt), sie bekommt einen Rahmen auf allen vier Seiten statt
 * ihrer Trennlinie, und `nowrap` schiebt eine lange Beschriftung aus der Karte
 * heraus. Die ganze Karte springt, und zwar bei jedem Tabulatorschritt.
 *
 * Zurückgeholt wird, was die Zeile selbst trägt — aus ihren Custom Properties
 * und nicht als „padding: 0", was dasselbe Springen andersherum wäre.
 *
 * `!important`, weil `a:focus` der Website spezifischer ist als eine
 * Klassenregel von uns. Grund und Fokus-Ring bleiben unangetastet: der Ring
 * steht in 95-a11y.css auf `:focus-visible` und schlägt das `outline: none` der
 * Website schon durch seine Spezifität.
 */
.spo-accordion-head:hover,
.spo-accordion-head:focus,
.spo-accordion-label:hover,
.spo-accordion-label:focus,
.spo-accordion-toggle:hover,
.spo-accordion-toggle:focus,
.spo-link:hover,
.spo-link:focus {
    padding: var(--spo-row-padding) !important;
    border-top: var(--spo-row-border-top) !important;
    border-bottom: var(--spo-row-border-bottom) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    white-space: normal !important;
}