/*
 * Die feste Navigation am unteren Bildschirmrand.
 *
 * Gilt unterhalb von 992px - demselben Umbruch, an dem navbar-expand-lg die
 * Kopfzeile umschaltet. Darueber gibt es sie nicht; die Desktopnavigation
 * bleibt unberuehrt, und diese Datei setzt oberhalb des Umbruchs keine
 * einzige Regel.
 *
 * Geladen nach main.css und nach header-nav.css. Was hier gegen das Theme
 * arbeitet - der Innenabstand am Koerper, die Lage der Cookie-Karte, die
 * Hoehe des offenen Menues - traegt dafuer die Klasse .has-awnav und damit
 * eine hoehere Spezifitaet als die Regel des Themes. So haengt nichts daran,
 * in welcher Reihenfolge die Stilblaetter ankommen.
 *
 * Kein Gold, kein zweites Violett: dasselbe Indigo, das die Kopfzeilen-
 * knoepfe seit 5.4 tragen (siehe header-nav.css).
 */

:root {
    /* Hoehe der Leiste ohne den sicheren Bereich. Steht an einer Stelle,
       weil vier Regeln sie brauchen: die Leiste selbst, der Innenabstand am
       Koerper, die Cookie-Karte und die Hoehe des offenen Menues. */
    --awnav-h: 60px;

    /*
     * Der sichere Bereich am unteren Rand.
     *
     * Ohne viewport-fit=cover liefert env() hier 0, und das ist richtig so:
     * ohne cover ist das Ansichtsfenster bereits um den sicheren Bereich
     * eingerueckt, eine Leiste an bottom:0 sitzt also ohnehin oberhalb des
     * Home-Indikators. Die Angabe steht trotzdem da, damit die Rechnung auch
     * dann stimmt, wenn cover einmal gesetzt wird - das ist eine eigene
     * Entscheidung, weil es die Querformatansicht der ganzen Seite betrifft.
     */
    --awnav-safe: env(safe-area-inset-bottom, 0px);

    --awnav-brand: #452eb8;
    --awnav-brand-dark: #32218c;
    --awnav-ink: #23283a;
    --awnav-muted: #6c6c7a;
    --awnav-line: #e9e9ef;
    --awnav-badge: #d32f2f;
}

/* Am Desktop ist sie nicht da. Das Markup steht trotzdem in jeder Seite -
   der Umbruch wird im CSS entschieden, damit ein gezogenes Fenster nicht
   erst neu geladen werden muss. */
.awnav {
    display: none;
}

@media screen and (max-width: 991.98px) {

    /* ---------------------------------------------------------- Die Leiste */

    .awnav {
        display: block;
        position: fixed;
        inset-inline: 0;
        bottom: 0;

        /*
         * 35: ueber dem Inhalt, unter dem Kopf.
         *
         * Die Kopfzeile traegt 40 (header-nav.css) und nimmt ihr
         * aufgeklapptes Menue mit; der dunkle Schleier des Themes liegt auf
         * 2. Dazwischen ist der Platz fuer die Leiste - so bleibt sie bei
         * offenem Menue sichtbar und bedienbar, statt mit abgedunkelt zu
         * werden. Die Konto-Schublade (1021) und die Bildergalerie (1042)
         * decken sie zu; beides sind Vollbildflaechen, und dort hat eine
         * Navigationsleiste nichts verloren.
         *
         * HIER STAND 18, UND DAS WAR ZU WENIG. Die Sortiersteuerung der
         * Startseite - der Knopf "New" - traegt
         * `.home-filter-dropdown { z-index: 30 }` aus main.css und liegt im
         * selben Stapelkontext wie die Leiste: zwischen beiden und der
         * Wurzel macht keiner einen eigenen auf. Also entschied allein die
         * Zahl, 30 gewann gegen 18, und das aufgeklappte Menue legte sich
         * ueber die Leiste. Gemessen am 21.09.2026 bei 375x812:
         * 60px Ueberdeckung, und elementFromPoint mitten auf der Leiste
         * lieferte einen Eintrag des Dropdowns statt eines Navigationsziels.
         *
         * Dieselbe 30 stand schon im Kommentar zu `header.header-primary`
         * in header-nav.css - dort war sie der Grund, den Kopf auf 40 zu
         * heben. Beim Bauen der Leiste habe ich an den Kopf gedacht und an
         * den Schleier, aber nicht an das Dropdown dazwischen.
         */
        z-index: 35;

        background: #fff;

        /*
         * Die Trennlinie liegt INNEN.
         *
         * Als border-top kaeme sie zur Hoehe hinzu: gemessen war die Leiste
         * dann 61px hoch, waehrend der Innenabstand am Koerper mit 60
         * rechnete - eine Pixelzeile Inhalt verschwand darunter. Ein
         * innerer Schatten zeichnet dieselbe Linie und nimmt keinen Platz.
         */
        box-shadow: inset 0 1px 0 var(--awnav-line), 0 -1px 8px rgba(19, 19, 24, .06);

        /* Der sichere Bereich gehoert in die Leiste, nicht unter sie: so
           faerbt ihre Flaeche bis zur Geraetekante durch, und kein Ziel
           liegt im nicht bedienbaren Streifen. */
        padding-bottom: var(--awnav-safe);
    }

    .awnav__list {
        display: flex;
        margin: 0 auto;
        padding: 0;
        max-width: 520px;
        list-style: none;
    }

    /* Gleich breit, ohne Luecke: die Zelle ist die Trefferflaeche. Bei 320px
       sind das 64 x 60px je Zelle, bei drei Zellen rund 106 x 60 - in beiden
       Faellen deutlich ueber den 44 x 44, die sich verlaesslich treffen
       lassen. */
    .awnav__item {
        flex: 1 1 0;
        min-width: 0;
    }

    .awnav__link {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        block-size: var(--awnav-h);
        padding: 4px 2px 0;

        color: var(--awnav-muted);
        text-decoration: none;
        text-align: center;

        transition: color .18s ease, background-color .18s ease;
    }

    .awnav__link:hover {
        color: var(--awnav-brand);
        text-decoration: none;
    }

    /* ---------------------------------------------------------- Das Symbol */

    .awnav__icon {
        position: relative;
        display: grid;
        place-items: center;
        inline-size: 36px;
        block-size: 36px;
        flex: 0 0 36px;
        font-size: 22px;
        line-height: 1;
    }

    .awnav__icon > i {
        display: block;
        line-height: 1;
    }

    /* ------------------------------------------------------ Die Hauptaktion */

    /*
     * Die einzige gefuellte Flaeche der ganzen Leiste. Sie fuehrt, ohne
     * lauter zu sein: ein Kreis in Zellenmitte, nichts ragt ueber die Leiste
     * hinaus.
     *
     * Und kein aria-current im Markup, kein is-current hier: Erstellen ist
     * eine Handlung, kein Ort. Sie sieht auf der Uploadseite genauso aus wie
     * ueberall sonst.
     */
    .awnav__link--lead {
        color: var(--awnav-brand);
    }

    .awnav__link--lead .awnav__icon {
        border-radius: 50%;
        background: var(--awnav-brand);
        color: #fff;
        font-size: 18px;
    }

    .awnav__link--lead:hover .awnav__icon,
    .awnav__link--lead:active .awnav__icon {
        background: var(--awnav-brand-dark);
    }

    /* ----------------------------------------------------- Die Beschriftung */

    .awnav__text {
        display: block;
        margin-top: 2px;
        max-inline-size: 100%;

        font-family: var(--heading-font, Inter, sans-serif);
        font-size: 11px;
        font-weight: 500;
        line-height: 13px;
        letter-spacing: -.01em;
        white-space: nowrap;
    }

    /* ------------------------------------------------------- Aktuelle Seite */

    .awnav__link.is-current {
        color: var(--awnav-brand);
    }

    /* Der Strich an der Oberkante. Er sitzt in der Zelle, nicht daneben -
       eine Marke, die ueber den Rand liefe, waere bei 64px Zellenbreite
       sofort die Marke der Nachbarzelle. */
    .awnav__link.is-current::before {
        content: '';
        position: absolute;
        top: 0;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        inline-size: 24px;
        block-size: 3px;
        border-end-start-radius: 2px;
        border-end-end-radius: 2px;
        background: var(--awnav-brand);
    }

    /* --------------------------------------------------------- Gedrueckt */

    .awnav__link:active {
        background: rgba(69, 46, 184, .08);
    }

    .awnav__link:active .awnav__icon {
        transform: scale(.94);
    }

    /* ------------------------------------------------------- Tastaturfokus */

    /*
     * Der Ring liegt nach innen. focus-visible.css setzt fuer die ganze
     * Seite outline-offset: 2px !important - an einer Zelle, die bis an die
     * Zellengrenze und an den Bildschirmrand reicht, wuerde der Ring dort
     * abgeschnitten. Gleiches !important, hoehere Spezifitaet.
     */
    .awnav .awnav__link:focus-visible {
        outline-offset: -3px !important;
        background: rgba(69, 46, 184, .08);
        color: var(--awnav-brand);
    }

    /* ------------------------------------------------------------ Die Zahl */

    .awnav__badge {
        position: absolute;
        top: -2px;
        inset-inline-end: -8px;
        z-index: 1;

        min-inline-size: 18px;
        block-size: 18px;
        padding: 0 4px;
        border: 2px solid #fff;
        border-radius: 9px;

        background: var(--awnav-badge);
        color: #fff;

        font-family: var(--heading-font, Inter, sans-serif);
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        text-align: center;

        /* Die Ziffern laufen auch im arabischen Satz von links nach rechts,
           und "99+" bleibt "99+". */
        font-variant-numeric: tabular-nums;
        direction: ltr;
        unicode-bidi: isolate;
    }

    /* ------------------------------------------------------ Schmale Geraete */

    /* Bei 320px hat eine Fuenftelzelle 64px. Die Schrift gibt nach, die
       Trefferflaeche nicht. */
    @media screen and (max-width: 359.98px) {
        .awnav__text {
            font-size: 10px;
            line-height: 12px;
            letter-spacing: -.02em;
        }
    }

    /* Arabisch braucht etwas mehr Hoehe, sonst sitzen Unter- und
       Oberlaengen aufeinander. Die Woerter selbst sind dort kuerzer. */
    [dir="rtl"] .awnav__text {
        font-size: 12px;
        line-height: 15px;
        letter-spacing: normal;
    }

    /* -------------------------------------------------- Nur noch Symbole --- */

    /*
     * Zwei Lagen, in denen die Beschriftung nicht mehr gutgeht:
     *
     *   Querformat. Unter 480px Hoehe bleiben fuer den Inhalt kaum 300px, und
     *   eine 60px hohe Leiste nimmt davon ein Fuenftel.
     *
     *   Grosse Schrift. Wer die Seite auf 150% zieht, sieht ein Fenster von
     *   rund 250 Punkten. Gemessen: die Fuenftelzelle misst dann 50px, die
     *   Woerter brauchen 48 bis 55 - vier von fuenf liefen ineinander,
     *   "Nachrichten" und "Reaktionen" sichtbar uebereinander.
     *
     * Statt zu kuerzen oder zu quetschen faellt die Leiste auf das zurueck,
     * was auch ohne Wort eindeutig bleibt: Symbol, Farbe, Marke, Zahl. Der
     * Text verschwindet nur fuer das Auge - er bleibt im Markup und damit
     * der zugaengliche Name der Zelle. Mit display:none waere sie fuer eine
     * Sprachausgabe namenlos.
     *
     * 300px als Grenze: fuenf Zellen zu 59px sind 295, und 59 ist knapp das,
     * was das laengste Wort ("Nachrichten", 55px bei 10px Schrift) samt
     * Innenabstand braucht.
     */
    @media screen and (max-height: 480px), screen and (max-width: 299.98px) {
        .awnav__text {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .awnav__link {
            justify-content: center;
            padding: 0;
        }

        .awnav__icon {
            inline-size: 32px;
            block-size: 32px;
            flex-basis: 32px;
            font-size: 20px;
        }

        .awnav__link--lead .awnav__icon {
            font-size: 17px;
        }
    }

    /* Im Querformat wird die Leiste zusaetzlich flacher - dort ist die Hoehe
       knapp, bei grosser Schrift nur die Breite. */
    @media screen and (max-height: 480px) {
        :root {
            --awnav-h: 48px;
        }
    }

    /* ========================================================================
       Was die Leiste von der Seite verlangt
       ======================================================================== */

    /*
     * Platz am Ende des Inhalts.
     *
     * Die Klasse steht am Koerper und nur dort, wo die Leiste wirklich
     * gerendert wird (App\Support\MobileNav). Auf der Uploadseite mit ihrer
     * eigenen Veroeffentlichen-Leiste gibt es weder das eine noch das andere.
     */
    body.has-awnav {
        padding-bottom: calc(var(--awnav-h) + var(--awnav-safe));
    }

    /*
     * Die Cookie-Karte und der Nach-oben-Knopf haengen mit position: fixed am
     * Fenster; ein Innenabstand am Koerper erreicht sie nicht. Sie ruecken
     * um die Leiste nach oben - sonst liegt die Karte darueber (sie traegt
     * z-index 999999) und deckt drei Zellen zu.
     */
    body.has-awnav .cookies-card {
        bottom: calc(var(--awnav-h) + var(--awnav-safe));
    }

    body.has-awnav .back-to-top {
        bottom: calc(var(--awnav-h) + var(--awnav-safe) + 15px);
    }

    /*
     * Kein Weg zweimal.
     *
     * Hochladen, Reaktionen und Chat stehen im aufgeklappten Menue - dort
     * sind sie zugleich die Desktopzeile, dasselbe Markup fuer beides. Wo
     * die Leiste sie ohnehin zeigt, waeren sie im Menue eine zweite
     * Navigation fuer dieselben drei Ziele.
     *
     * Deshalb an .has-awnav gebunden und nicht an die Fensterbreite allein:
     * auf der Uploadseite gibt es keine Leiste, und dort bleiben sie die
     * einzigen Wege zu Chat und Reaktionen. Sie verschwinden genau dann,
     * wenn es sie zweimal gibt.
     *
     * !important, weil zwei der drei Bootstraps d-flex tragen - eine
     * Utility-Klasse, die ihr display selbst mit !important setzt.
     */
    body.has-awnav .awnav-doppelt {
        display: none !important;
    }

    /*
     * Und umgekehrt: wo es keine Leiste gibt, muss der Weg im Menue stehen.
     *
     * Das Theme blendet den Uploadknopf im eingeklappten Menue unterhalb von
     * 768px aus (.navupload_mobilen in main.css). Das war richtig, solange
     * die Kopfzeile den Uploadpfeil trug - es gab den Weg ja zweimal. Seit
     * 5.7 traegt ihn die Leiste, und auf den zwei Seiten ohne Leiste gab es
     * ihn damit gar nicht mehr: gemessen auf /image/upload/commercial bei
     * 375px stand weder ein Pfeil in der Kopfzeile noch ein Eintrag im
     * Menue.
     *
     * list-item, weil es ein <li> ist. !important gegen das !important des
     * Themes.
     */
    body:not(.has-awnav) .awnav-doppelt.navupload_mobilen {
        display: list-item !important;
    }

    /*
     * Das offene Menue endet ueber der Leiste, nicht hinter ihr.
     *
     * header-nav.css deckelt es auf 100vh minus 70px Kopfzeile. Mit der
     * Leiste darunter bleiben davon noch einmal 60px plus sicherer Bereich
     * abzuziehen, sonst laufen die letzten Eintraege unter eine Flaeche, die
     * sie verdeckt. Die Liste rollt ohnehin in sich.
     */
    body.has-awnav .navbar-collapse.show {
        max-height: calc(100vh - 70px - var(--awnav-h) - var(--awnav-safe));
    }

    /*
     * Und dasselbe fuer die Sortiersteuerung.
     *
     * Seit die Leiste ueber ihr liegt, waere der unterste Streifen des
     * aufgeklappten Menues nicht mehr antippbar. Deshalb wird es nie hoeher
     * als das sichtbare Band zwischen Kopfzeile und Leiste: was dann noch
     * nicht hineinpasst, erreicht man durch Rollen IN der Liste, und nichts
     * bleibt dauerhaft unter der Leiste liegen.
     *
     * 5rem deckt die klebende Kopfzeile ab. Die 100vh-Zeile steht als
     * Rueckfall fuer Browser ohne dvh; wo dvh gilt, gewinnt die zweite.
     */
    body.has-awnav .bt-dropdown__menu {
        max-height: calc(100vh - var(--awnav-h) - var(--awnav-safe) - 5rem);
        max-height: calc(100dvh - var(--awnav-h) - var(--awnav-safe) - 5rem);
    }

    /*
     * Ist unter dem Knopf kein Platz, klappt die Liste nach oben auf.
     *
     * Die Grundregel in main.css haengt sie mit `top: calc(100% + 4px)` und
     * `margin-top: 50px` unter den Knopf; nach oben ist es dasselbe
     * gespiegelt. Gesetzt wird die Klasse von mobile-nav.js, weil erst beim
     * Oeffnen feststeht, wo der Knopf gerade steht.
     */
    body.has-awnav .bt-dropdown__menu.awnav-oben {
        top: auto;
        bottom: calc(100% + 4px);
        margin-top: 0;
        margin-bottom: 50px;
    }

    /* ========================================================================
       Bildschirmtastatur
       ======================================================================== */

    /*
     * Waehrend die Tastatur offen ist, gibt es keine Leiste.
     *
     * Gesetzt wird die Klasse von assets/js/mobile-nav.js, und zwar aus dem
     * einzigen Signal, das die Tastatur wirklich meldet: das sichtbare
     * Ansichtsfenster schrumpft. Ein Fokus allein genuegt nicht als Grund -
     * an einem Rechner mit Tastatur wuerde die Leiste dann bei jedem
     * Formularfeld verschwinden und waere mit der Tabulatortaste nicht mehr
     * erreichbar.
     *
     * Der Innenabstand faellt mit weg; sonst stuende am Seitenende ein
     * leerer Streifen, wo die Leiste war.
     */
    html.awnav-keyboard .awnav {
        display: none;
    }

    html.awnav-keyboard body.has-awnav {
        padding-bottom: 0;
    }

    html.awnav-keyboard body.has-awnav .cookies-card {
        bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .awnav__link,
    .awnav__link:active .awnav__icon {
        transition: none;
        transform: none;
    }
}