/*
 * Kleinere Fenster: das Menü bleibt mittig und vollständig sichtbar.
 *
 * Gemeinsam. Die Bühnen-Anpassungen stehen in editor/90-responsive.css — dieselben @media-Blöcke, aber andere Selektoren.
 * Die Zahl im Namen ist die Ladereihenfolge — bei CSS zählt sie.
 *
 * Geändert werden nur die Custom Properties der Fläche und nicht ihr `padding`:
 * aus denselben Werten rechnet das Accordion seinen freien Platz
 * (63-accordion.css). Stünde hier eine Kurzschreibweise, wäre die Höhe der
 * Karte in kleinen Fenstern die des großen — und die Karte reichte unter die
 * Aktionsleiste.
 */

/*
 * Der Spaltenabstand geht stufenweise herunter, nicht in einem Sprung.
 *
 * Er kommt als `--spo-row-gap` von der Reihe (ColumnsGap), und die Redaktion
 * wählt aus 0, 10, 20 und 38px. Die 38px sind das Maß der Hauptaufteilung des
 * Desktop-Designs (dort 34–38px zwischen den Schnellzugriffen); im Mobile-Design
 * ist der größte Abstand 13px, die Kachelraster stehen auf 10px, die
 * Schnellzugriffe und die Live-Zeilen auf 8px. Zwischen 1070px und 400px liegt
 * also der ganze Weg von 38 nach 8 — und der gehört auf Stufen: auf einer
 * 328px breiten Reihe wären drei Abstände von 38px 114px Leere, und von vier
 * Spalten bliebe je 53px.
 *
 * Jede Stufe deckelt mit `min()` und setzt keinen festen Wert. Damit bleibt die
 * Wahl der Redaktion erhalten, solange der Platz sie hergibt: "Kein Abstand"
 * bleibt überall 0, "Klein" bleibt 10px bis hinunter auf 400px, und nur was
 * größer ist als die Stufe, kommt auf sie herunter. Der Weg der 38px:
 *
 *   > 1180px   38px   das Maß des Designs
 *   ≤ 1180px   28px
 *   ≤ 980px    20px
 *   ≤ 760px    10px   der Kachelabstand des Mobile-Designs
 *   ≤ 400px     8px   sein Abstand in den Zeilen
 *
 * Gemessen wird das Fenster und nicht die Reihe. Genauer wäre eine Container
 * Query — eine Reihe in der Spalte einer anderen ist schmaler als eine, die die
 * ganze Fläche hat. Dafür bräuchte es im Frontend eine Hülle je Zelle, und dort
 * ist der Baustein selbst die Zelle (MenuElements/Column).
 */
@media (max-width: 1180px) {
    .spo-grid {
        gap: min(var(--spo-row-gap, 10px), 28px);
    }
}

@media (max-width: 980px) {
    .spo-grid {
        gap: min(var(--spo-row-gap, 10px), 20px);
    }
}

@media (max-height: 820px) {
    .spo-sheet {
        --spo-sheet-pad-top: 24px;
        --spo-sheet-pad-inline: 24px;
        --spo-sheet-pad-bottom: 112px;
    }
}

@media (max-height: 640px) {
    .spo-sheet {
        --spo-sheet-pad-top: 12px;
        --spo-sheet-pad-inline: 16px;
        --spo-sheet-pad-bottom: 96px;
    }

    .spo-actionbar-wrap {
        bottom: 20px;
    }
}

/*
 * Das Telefon. Die Werte stehen im Mobile-Design
 * (SPO Menü Paket_04_final/FINAL_SPO Menü Neu_04_1/SPO-Mobile-Menu.html) und
 * weichen von denen des Schreibtischs an genau diesen Stellen ab — alles
 * übrige ist in beiden Vorlagen dasselbe: Hauptmenü mit Kopf- und Linkzeilen,
 * Sprachumschalter, die Angebotszeilen der Buchen-Ebene, der Persona-Umschalter
 * und die Maße des Störers bis auf Höhe und Gewicht der Notiz.
 *
 * Was hier steht, sind Sprünge: Abstände, Größen von Icons, ein Verlauf. Die
 * Schriftgrößen stehen nicht mehr darunter — sechs Rollen wandern zwischen den
 * beiden Vorlagen, und die laufen jetzt stetig mit der Fensterbreite
 * (--spo-text-* in tokens.css) statt an dieser Schwelle zu springen.
 *
 * Dieser Block steht bewusst hinter den Höhen-Blöcken: er setzt dieselben
 * Custom Properties, und bei gleicher Spezifität gewinnt der spätere. Ein
 * Fenster, das schmal *und* niedrig ist, ist ein Telefon — dann sollen dessen
 * Werte gelten. Der einzige Unterschied dabei sind 2px oben (14 statt 12).
 *
 * Innenabstände gehen über die Custom Properties der Bausteine und nicht als
 * `padding`: Kachel, Leiste, Meldung, Störer und Persona holen ihr Padding im
 * Zeiger- und Fokus-Zustand mit `!important` von dort zurück — die Sperre
 * gegen das Stylesheet der Website. Ein `padding` hier wäre beim ersten
 * Antippen wieder das des Schreibtischs.
 */
@media (max-width: 760px) {
    .spo-sheet {
        --spo-sheet-pad-top: 14px;
        --spo-sheet-pad-inline: 16px;
        --spo-sheet-pad-bottom: 96px;
    }

    /* Die dritte Stufe des Spaltenabstands: der Kachelabstand des Designs. */
    .spo-grid {
        gap: min(var(--spo-row-gap, 10px), 10px);
    }

    /*
     * Dasselbe für eine Reihe, die umbrechen darf: dort ist die Höhe die
     * Untergrenze *einer Zelle* und steht an den Kindern (50-grid.css). Der
     * Selektor ist derselbe, damit er nicht schwächer ist als der dort.
     */
    .spo-grid.spo-grid--wrap > * {
        min-height: var(--spo-row-min-height-mobile, var(--spo-row-min-height));
    }

    /*
     * Die Leiste sitzt 8px über dem Rand — plus dem, was das Gerät für seinen
     * Gestenbalken verlangt. Ohne `env()` liegt sie auf einem iPhone darunter.
     *
     * Der Abstand steht als `padding` an der Hülle und nicht als `bottom`, weil
     * er im Mobile-Design zugleich die Fläche des Schleiers ist: unter der
     * weißen Leiste läuft ein dunkler Verlauf aus, damit sie sich auch von einem
     * hellen Foto abhebt. Als `bottom` wäre dort nichts, was ihn tragen könnte.
     *
     * Der Schleier fängt keine Berührung: die Hülle ist `pointer-events: none`,
     * nur die Leiste selbst nimmt sie an.
     */
    .spo-actionbar-wrap {
        bottom: 0;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(20, 12, 4, 0), rgba(20, 12, 4, .22));
    }

    /* Der Seitenabstand kommt jetzt von der Hülle — sonst stünde er zweimal da. */
    .spo-actionbar {
        margin: 0;
    }

    .spo-action {
        width: 84px;
        --spo-action-padding: 6px 6px;
    }

    /*
     * Die Buchen-Fläche der Leiste trägt auf dem Telefon einen Verlauf statt des
     * flachen Orange. Er geht über die Custom Property und nicht als
     * `background`, damit die Sperre gegen das Stylesheet der Website ihn beim
     * Antippen wieder von dort holt (30-actionbar.css).
     */
    .spo-action--cta {
        --spo-action-padding: 0 12px;
        --spo-action-bg: var(--spo-orange-gradient);
    }

    /*
     * Die Icons der Leiste sind auf dem Telefon 1px kleiner: 20px statt 21px,
     * im CTA 18px statt 19px. Die Größe steht als Attribut am SVG (die Partials
     * Icon/Waves, /Hamburger, /Close) — ein Präsentationsattribut, das jede
     * CSS-Regel überstimmt, deshalb reicht das hier.
     */
    .spo-action svg {
        width: 20px;
        height: 20px;
    }

    .spo-action--cta svg {
        width: 18px;
        height: 18px;
    }

    /*
     * Die Kachel des Designs ist im Frontend der blaue Button und nicht
     * `.spo-tile` — letzteres trägt nur die Platzhalter der Plugins und die
     * CTA-Fläche. Deshalb steht sie hier noch einmal.
     *
     * Gerechnet auf eine quadratische Kachel von 85px, wie sie das Mobile-Design
     * in einer Reihe von vier Spalten zeigt: das Design füllt sie mit
     * 8 + 26 + 8 + 15 + 8 = 65px, die Maße des Schreibtischs kommen auf
     * 14 + 24 + 10 + 17 + 14 = 79px. Das ist der Unterschied zwischen Kachel und
     * Gedränge.
     *
     * `:not(.spo-button--horizontal)`, weil dieselbe Variante auch die Zeile mit
     * Icon neben dem Text ist — im Design der Warenkorb-Knopf, und der behält
     * auf dem Telefon seine 14px.
     */
    .spo-button--blue:not(.spo-button--horizontal),
    .spo-button--orange-tile:not(.spo-button--horizontal) {
        gap: 8px;
        --spo-button-padding: 8px;
    }

    /*
     * Die orange Handlungsfläche: Icon 22px statt 28. Ihre Aufschrift und die
     * zweite Zeile stehen nicht hier — die laufen mit der Fensterbreite
     * (--spo-text-cta, --spo-text-cta-note in tokens.css).
     */
    .spo-button--orange {
        --spo-icon-size: 22px;
    }

    /*
     * Die helle Schnellzugriff-Karte. Auf dem Schreibtisch steht sie in einem
     * festen Seitenverhältnis (87/71); auf dem Telefon gibt das Design ihr die
     * Höhe ihres Inhalts und rückt alles zusammen: 9px 6px innen, 5px zwischen
     * Icon und Wort.
     *
     * Das Icon ist dort 22px. Eine Ausnahme lässt sich nicht abbilden: das
     * Wellen-Icon der Gezeiten trägt im Design 28px, aber welches Icon in der
     * Karte steckt, entscheidet die Redaktion.
     */
    .spo-button--white {
        aspect-ratio: auto;
        gap: 5px;
        --spo-button-padding: 9px 6px;
        --spo-icon-size: 22px;
    }

    /* Der Titel der Meldung steht auf dem Telefon halbfett statt fett. */
    .spo-notice-title {
        font-weight: 600;
    }

    /*
     * Der Störer hat auf dem Telefon keine Mindesthöhe: im Design bestimmt sein
     * Inhalt sie (15 + 17 + 7 + 47 + 15 ≈ 101px). Die 123px sind das Maß des
     * Schreibtischs und hätten hier eine leere Fläche unter dem Text gelassen.
     */
    .spo-box {
        min-height: 0;
    }

    .spo-box-note {
        font-weight: 500;
    }

    /*
     * Der Menükasten steht auf dem Telefon 16px unter dem, was über ihm liegt —
     * auf dem Schreibtisch 12px. Er ist dort der Fuß einer langen Fläche und
     * braucht die Luft.
     */
    .spo-accordion:not(:first-child) {
        margin-top: 16px;
    }
}

/*
 * Das kleine Telefon (iPhone SE, 375px). Letzte Stufe des Spaltenabstands: 8px
 * ist im Mobile-Design der Abstand seiner Zeilen — Schnellzugriffe, Live-Karten,
 * die blauen Dreierkacheln. Hier landet auch "Klein": das Design rechnet mit
 * 402px, ein Gerät darunter hat die 10px nicht mehr übrig.
 *
 * Der Block steht hinter dem Telefon-Block, weil beide dieselbe Regel setzen
 * und bei gleicher Spezifität der spätere gewinnt.
 */
@media (max-width: 400px) {
    /*
     * Und ein Pixel weniger auf jeder Aufschrift des Menüs.
     *
     * Der Anlass waren zwei ("over all the text as to shrink about 2 points
     * under 400px"), und zwei standen hier auch. Am Gerät war das eine Stufe zu
     * viel: die kleinste Aufschrift kam damit auf 8px. Jetzt ein Pixel, und die
     * kleinste Aufschrift — das Kennzeichen im Störer ("AKTUELL"), im Design
     * 10px — steht auf 9px. Alles andere bleibt bei 10px und darüber.
     *
     * Hier steht die ganze Regel: jede Größe rechnet ihren eigenen Wert minus
     * diesen Abzug (--spo-text-shrink, tokens.css), acht davon als Token und
     * siebzehn bei ihrer Fläche. Ein zweiter Satz Größen an dieser Stelle hätte
     * alle siebzehn Selektoren wiederholt.
     *
     * Ein Sprung und keine Gerade, anders als zwischen 402px und 1440px: dort
     * laufen zwei Werte der Vorlagen ineinander, hier gibt es keinen zweiten
     * Wert, den man ablesen könnte — 402px ist die schmalste Fläche, für die das
     * Design gezeichnet ist. Der Abzug ist unsere Wahl, deshalb ist er eine Zahl
     * und keine Interpolation.
     */
    :root {
        --spo-text-shrink: 1px;
    }

    .spo-grid {
        gap: min(var(--spo-row-gap, 10px), 8px);
    }
}