/* ==========================================================================
   13 · DIE SEITENLEISTE
   --------------------------------------------------------------------------
   Der Rahmen der Anwendung seit dem 06.09.2026: Leiste links, Spur rechts.
   Davor war es eine waagerechte Knopfreihe (die Regeln dazu standen in
   01-basis.css und sind mit ihr gegangen).

   WAS SICH GEGENÜBER DER KOPFLEISTE GEÄNDERT HAT und was nicht:
   – Die Farbfamilien bleiben. Angefasst wird in Leuchtblau (--btn-leucht),
     berichtet in Blaugrau, die Marke ist Zinnober.
   – Neu ist der 3px-Balken an der linken Kante des aktiven Wegs. In einer
     Knopfreihe genügt die Tönung, weil das Auge die ganze Zeile überstreicht;
     in einer Liste von zwanzig Zeilen ist der Balken das, was den Punkt im
     Augenwinkel findbar macht.
   – Die Zahl steht rechts IN der Zeile statt an der Ecke eines Knopfes:
     Untereinander bilden alle Zahlen eine Spalte, und man sieht mit einem
     Blick, wo etwas wartet.

   ZWEI BREITEN, EIN ZUSTAND: 244px mit Wörtern, 60px mit Zeichen. Welche
   gilt, sagt ein Cookie, das der Server liest (includes/header.php) – nichts
   springt beim Laden. Unter 900px wird die Leiste zur Schublade.
   ========================================================================== */

:root {
    --sl-breit: 244px;   /* Wortbreite: „Terminanfragen" mit Zeichen und Zahl */
    --sl-schmal: 60px;   /* eingefahren: 34px Zeichen plus Luft */
    --sl-kopf: 52px;     /* die schmale Kopfzeile, erst unter 900px */
}

/* --------------------------------------------------------------------------
   Der Zweispalter
   -------------------------------------------------------------------------- */
body.hat-leiste {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

body.hat-leiste > .site-spur {
    flex: 1 1 auto;
    min-width: 0;   /* ohne das sprengt eine breite Tabelle die Spalte */
    display: flex;
    flex-direction: column;
}

/* OHNE LEISTE IST DIE SPUR NUR EINE KLAMMER IM HTML und darf im Layout nicht
   vorkommen: Die öffentlichen Seiten (Landingpages, Terminbuchung,
   Formularbogen, Rechtstexte) laufen mit $hideNav und bauen ihre Höhe selbst.
   `display: contents` reicht ihre Kinder an den Körper durch, als stünde sie
   gar nicht da. */
body:not(.hat-leiste) > .site-spur { display: contents; }

/* Die Leiste steht, während die Spur rollt. */
.site-leiste {
    flex: 0 0 var(--sl-breit);
    width: var(--sl-breit);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    background: var(--brand-surface);
    border-inline-end: 1px solid var(--brand-border);
    transition: width var(--t-slow) var(--ease-in-out),
                flex-basis var(--t-slow) var(--ease-in-out);
}

.site-leiste.ist-schmal {
    flex-basis: var(--sl-schmal);
    width: var(--sl-schmal);
}

/* Der Abstand über dem Inhalt. Ihn brachte früher die Kopfleiste mit
   (margin-bottom: --sp-7); ohne etwas darüber begänne die Seite jetzt an der
   Fensterkante. */
body.hat-leiste .site-spur > main { padding-top: var(--sp-5); }

/* DIE SPUR NEBEN DER LEISTE IST BREITER UND STEHT LINKS.
   Bootstraps `.container` zentriert den Inhalt in einer 1140/1320px-Bahn –
   sinnvoll, solange die Seite die ganze Fensterbreite hatte. Mit der Leiste
   daneben driftete der Inhalt auf großen Schirmen von ihr weg: links die
   Leiste, dann eine Lücke, dann erst die Seite.

   Jetzt beginnt der Inhalt direkt neben der Leiste und darf 1520px breit
   werden. Das ist mehr als vorher – und genau daran hängt die Kachelreihe der
   Startseite: Bei 1140px standen dort mit der Leiste nur noch vier Kacheln je
   Zeile (vorher fünf), also drei Zeilen statt zwei. Die Reihe rechnet ihre
   Spaltenzahl selbst aus (assets/js/kachelreihe.js); sie braucht nur die
   Breite. */
body.hat-leiste .site-spur > main.container {
    max-width: 1520px;
    margin-inline: 0 auto;
    padding-inline: var(--sp-6);
}

/* --------------------------------------------------------------------------
   Die Marke
   -------------------------------------------------------------------------- */
/* Die Kopfzone: Marke und darunter die Auskünfte, abgeschlossen mit einer
   Haarlinie. Sie ist das, was von der alten Kopfleiste übrig ist – dieselbe
   weiße Fläche, dasselbe Plättchen, nur senkrecht statt waagerecht. */
.sl-kopf {
    flex: 0 0 auto;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: var(--sp-4);
}

.sl-marke {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    min-height: 58px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--r-ctl);
    transition: background-color var(--t-fast) var(--ease-out);
}

.sl-marke:hover { background: var(--blau-hauch); }

.sl-marke-zeichen {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--brand-chip-bg);
    color: var(--brand-accent);
    overflow: hidden;
}

.sl-marke-zeichen svg { width: 19px; height: 19px; }
.sl-marke-zeichen img { width: 100%; height: 100%; object-fit: contain; }

.sl-marke-text { min-width: 0; line-height: 1.2; }

.sl-marke-name {
    display: block;
    font-size: var(--fs-6);
    font-weight: 700;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-marke-sub {
    display: block;
    font-size: var(--fs-3);
    color: var(--brand-quiet);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Uhr und Wetter (includes/uhr.php, includes/wetter.php). Eine Auskunft, kein
   Weg – deshalb über den Gruppen und nicht in ihnen. */
.sl-auskunft {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4) var(--sp-2);
    min-width: 0;
    font-size: var(--fs-4);
    color: var(--brand-quiet);
    white-space: nowrap;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Die Wege
   -------------------------------------------------------------------------- */
.sl-wege {
    flex: 1 1 auto;
    /* OHNE DIESE ZEILE GIBT ES DEN GANZEN BAU NICHT: Ein Flex-Kind ist von
       Haus aus mindestens so hoch wie sein Inhalt (min-height: auto). Eine
       lange Wegeliste schob damit Werkzeuge, Namen und Griff aus der Leiste
       heraus, statt selbst zu rollen. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 var(--sp-3) var(--sp-4);
    /* Dünn und in der Farbe der Linien – eine graue Systemleiste mitten in der
       weißen Fläche ist das Lauteste, was eine ruhige Spalte haben kann. */
    scrollbar-width: thin;
    scrollbar-color: var(--brand-line-strong) transparent;
    overscroll-behavior: contain;
}

.sl-gruppe + .sl-gruppe { margin-top: var(--sp-6); }

/* DIE ÜBERSCHRIFT IST DER GRIFF (06.09.2026). Jede Gruppe ist ein <details>,
   die Überschrift ihr <summary> – damit klappt sie auch ohne JavaScript auf
   und zu, ist mit der Tastatur erreichbar und sagt Vorlesegeräten von selbst,
   in welchem Zustand sie steht. Das Skript merkt sich nur, was zu ist
   (Cookie sl_zu, gelesen in includes/header.php). */
.sl-gruppe-titel {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: 22px;
    padding: 0 var(--sp-3);
    margin-bottom: var(--sp-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-3);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    /* --brand-quiet und nicht --brand-faint: Das Tertiärgrau liegt auf Weiß
       bei 3,3 : 1, und das ist für 11px in Versalien zu wenig. Nachgerechnet
       ergibt --brand-quiet 4,7 : 1, ohne dass die Überschrift lauter wirkt. */
    color: var(--brand-quiet);
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    transition: height var(--t-slow) var(--ease-in-out),
                margin var(--t-slow) var(--ease-in-out),
                color var(--t-fast) var(--ease-out),
                background var(--t-slow) var(--ease-in-out);
}

.sl-gruppe-titel::-webkit-details-marker { display: none; }
.sl-gruppe-titel::marker { content: ""; }

.sl-gruppe-titel:hover { background: var(--blau-hauch); color: var(--btn-leucht-tief); }
.sl-gruppe-titel:focus-visible { outline: 2px solid var(--focus-col); outline-offset: -2px; }

.sl-gruppe-wort {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der Pfeil zeigt nach unten, solange die Gruppe offen steht, und nach rechts,
   wenn sie zu ist – dieselbe Richtung, in die sich der Inhalt bewegen wird. */
.sl-gruppe-pfeil {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    stroke-width: 2.2;
    opacity: .75;
    transform: rotate(-90deg);
    transition: transform var(--t-fast) var(--ease-out);
}
.sl-gruppe[open] > .sl-gruppe-titel > .sl-gruppe-pfeil { transform: rotate(0deg); }

/* Was in einer zugeklappten Gruppe wartet, steht an ihrer Überschrift. Offen
   wäre die Zahl eine zweite Meinung zu den Zahlen darunter.

   ZWEI KLASSEN IM SELEKTOR, weil die Grundregel .sl-zahl weiter unten im
   Blatt steht: Bei gleicher Spezifität gewinnt die spätere, und die Zahl
   stand dann auch an offenen Gruppen. */
.sl-gruppe-titel > .sl-zahl.sl-gruppe-zahl { display: none; }
.sl-gruppe:not([open]) > .sl-gruppe-titel > .sl-zahl.sl-gruppe-zahl { display: inline-flex; }

/* Eingefahren wird aus der Überschrift eine Trennlinie: Das Wort passt nicht
   mehr, die Gliederung soll aber bleiben. Anfassen lässt sie sich dort nicht –
   siehe includes/header.php, dort stehen dann alle Gruppen offen. */
.ist-schmal .sl-gruppe-titel {
    height: 1px;
    padding: 0;
    margin: var(--sp-4) var(--sp-3);
    background: var(--brand-border);
    color: transparent;
    cursor: default;
    pointer-events: none;
    overflow: hidden;
}
.ist-schmal .sl-gruppe-pfeil,
.ist-schmal .sl-gruppe-zahl { display: none; }

.sl-weg {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--h-ctl);
    padding: 0 var(--sp-3);
    border-radius: var(--r-ctl);
    text-decoration: none;
    color: var(--brand-text);
    font-size: var(--fs-6);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.sl-weg + .sl-weg { margin-top: 1px; }

.sl-weg > svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    /* Eine Spur feiner als die Vorgabe von icon() (2). Achtzehn Zeichen
       untereinander sind eine Fläche; mit voller Strichstärke wirkt die Spalte
       gestrichelt statt ruhig. */
    stroke-width: 1.75;
    color: var(--brand-quiet);
    transition: color var(--t-fast) var(--ease-out);
}

.sl-weg-wort {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* HOVER IST BLAU, NICHT GRAU. Look B kennt dafür eine Regel: Was angefasst
   wird, trägt Leuchtblau – und ein Weg im Menü wird angefasst. Der Hauch
   (--blau-hauch) ist die leiseste Stufe dieser Familie; die ausgewählte Zeile
   steht eine Stufe darüber (--blau-hell) und trägt zusätzlich den Balken, die
   beiden sind also weiter auseinander als vorher Grau und Blau. */
.sl-weg:hover {
    background: var(--blau-hauch);
    color: var(--btn-leucht-tief);
}
/* Zeichen und Schrift im selben Ton: --btn-leucht-dark steht in beiden
   Fassungen fest, --btn-leucht-tief rechnet farbschema.php um. Auf dem
   dunklen Hauch lag das feste Blau bei 3,8 : 1 – für ein Zeichen tragbar,
   aber es wäre die eine Hälfte eines Paares, die sich nicht mitbewegt. */
.sl-weg:hover > svg { color: var(--btn-leucht-tief); }
.sl-weg:active { transform: scale(0.985); }
.sl-weg:focus-visible { outline: 2px solid var(--focus-col); outline-offset: -2px; }

/* Der aktive Weg: Tönung wie früher der aktive Knopf, dazu der Balken. Er
   sitzt IM Eintrag und nicht an der Leistenkante – an der Kante liefe er
   sonst durch das Polster der Liste. */
.sl-weg.ist-hier {
    background: var(--blau-hell);
    color: var(--btn-leucht-tief);
    font-weight: 600;
}
.sl-weg.ist-hier > svg { color: var(--btn-leucht-tief); }
.sl-weg.ist-hier::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: var(--r-pill);
    background: var(--btn-leucht);
}

/* Nicht lizenziert: Der gestrichelte Rand ist die ganze Aussage (der
   Strichel-Stil steht in 06-verwaltung.css, .nav-gesperrt). */
.sl-weg.nav-gesperrt {
    color: var(--brand-faint);
    border: 1px dashed var(--brand-line-strong);
    padding: 0 calc(var(--sp-3) - 1px);
}
.sl-weg.nav-gesperrt > svg { color: var(--brand-faint); }

/* --------------------------------------------------------------------------
   Die Zahlen
   --------------------------------------------------------------------------
   Drei Töne, fest verdrahtet und in beiden Fassungen richtig – dieselben wie
   die alten Zählblasen der Kopfleiste, und aus demselben Grund (siehe
   includes/farbschema.php). is-alert fordert etwas, is-info berichtet nur,
   is-online sind Menschen.
   -------------------------------------------------------------------------- */
.sl-zahl {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--fs-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sl-zahl.is-alert { background: #f5d3cf; color: #8f2318; }
.sl-zahl.is-info { background: #cfdce3; color: #41586a; }
.sl-zahl.is-online { background: #cbe8d5; color: #1c5233; }

/* --------------------------------------------------------------------------
   Eingefahren
   --------------------------------------------------------------------------
   Die Wörter fahren MIT ein, sie verschwinden nicht: `display: none` ließ die
   Beschriftung eine Achtelsekunde vor der Leiste verschwinden, und das sah
   aus, als sei etwas kaputtgegangen.
   -------------------------------------------------------------------------- */
.sl-weg-wort,
.sl-marke-text,
.sl-ich-text,
.sl-griff-wort {
    transition: opacity var(--t-fast) var(--ease-out);
}

.ist-schmal .sl-weg-wort,
.ist-schmal .sl-marke-text,
.ist-schmal .sl-ich-text,
.ist-schmal .sl-griff-wort {
    opacity: 0;
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.ist-schmal .sl-weg { justify-content: center; padding: 0; }
.ist-schmal .sl-marke,
.ist-schmal .sl-ich,
.ist-schmal .sl-griff { justify-content: center; padding-inline: 0; }
.ist-schmal .sl-auskunft { display: none; }
.ist-schmal .sl-werkzeuge { flex-wrap: wrap; }

/* Aus der Zahl wird ein Punkt an der Schulter des Zeichens. Die Ziffer wäre
   auf 60px entweder unlesbar oder stünde über dem Zeichen. Der Rand trägt die
   Schriftfarbe der Blase: Ein Punkt ohne Ziffer hat allein durch seine Fläche
   zu wenig Kontrast (#f5d3cf auf Weiß sind 1,2 : 1). */
.ist-schmal .sl-zahl {
    position: absolute;
    top: 5px;
    inset-inline-start: calc(50% + 3px);
    inset-inline-end: auto;
    min-width: 9px;
    width: 9px;
    height: 9px;
    padding: 0;
    font-size: 0;
    color: transparent;
    border: 1px solid transparent;
    box-sizing: content-box;
}

.ist-schmal .sl-zahl.is-alert { border-color: #8f2318; }
.ist-schmal .sl-zahl.is-info { border-color: #41586a; }
.ist-schmal .sl-zahl.is-online { border-color: #1c5233; }

/* --------------------------------------------------------------------------
   Der Fuß: Werkzeuge, der eigene Name, der Griff
   -------------------------------------------------------------------------- */
/* Der Fuß ist eine eigene Zone: Haarlinie darüber, damit die Wegeliste oben
   endet und nicht in die Werkzeuge ausläuft. */
.sl-werkzeuge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-top: 1px solid var(--brand-border);
}

.sl-werkzeug {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--h-ctl-sm);
    height: var(--h-ctl-sm);
    padding: 0;
    border: 1px solid var(--btn-gray-border);
    border-radius: var(--r-ctl);
    background: var(--btn-gray-bg);
    color: var(--brand-quiet);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.sl-werkzeug > svg { width: 16px; height: 16px; }
/* Auch hier: angefasst wird in Blau. Die Werkzeuge liegen im Ruhezustand im
   Hausgrau, unter dem Zeiger tragen sie den Hauch der Familie. */
.sl-werkzeug:hover {
    background: var(--blau-hauch);
    border-color: var(--blau-rand);
    color: var(--btn-leucht-tief);
}
.sl-werkzeug:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 1px; }

/* Die beiden Aufklappmenüs (Darstellung, Branchenansicht) öffnen nach OBEN:
   Unten an der Leiste wäre unter dem Knopf kein Platz. Und nach rechts, weil
   sie in der eingefahrenen Leiste sonst über den Rand hinausstünden. */
.sl-werkzeuge .fs-menu {
    top: auto;
    bottom: calc(100% + var(--sp-2));
    right: auto;
    left: 0;
}

/* Der Melder trägt seinen Zustand als Tönung, nicht als zweites Zeichen. */
.sl-werkzeug.melder-knopf.is-an {
    background: var(--blau-hell);
    border-color: var(--blau-rand);
    color: var(--btn-leucht-tief);
}

/* Der eigene Name – er führt ins Profil (oder zur Authenticator-Seite). */
.sl-ich {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 var(--sp-3) var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-ctl);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--t-fast) var(--ease-out);
}

.sl-ich:hover { background: var(--blau-hauch); }
.sl-ich:focus-visible { outline: 2px solid var(--focus-col); outline-offset: -2px; }

/* Das eigene Bild – oder, solange keines hinterlegt ist, die ersten beiden
   Buchstaben. Rund und 30px: Ein Foto ist hier ein Mensch und keine Kachel,
   und rund unterscheidet es auf den ersten Blick vom eckigen Plättchen der
   Marke ganz oben. */
.sl-ich-zeichen {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--btn-blue-bg-light);
    border: 1px solid var(--btn-blue-border-light);
    color: var(--btn-blue-dark);
    font-size: var(--fs-3);
    font-weight: 700;
}

/* Mit Bild fällt die Tönung darunter weg: Ein farbiger Ring um ein Foto sähe
   aus wie ein Zustand („online", „ausgewählt"), und das ist es nicht. */
.sl-ich-zeichen.hat-bild {
    background: var(--brand-row);
    border-color: var(--brand-border);
}

.sl-ich-zeichen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.sl-ich-text { min-width: 0; line-height: 1.2; }
.sl-ich-name {
    display: block;
    font-size: var(--fs-5);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sl-ich-rolle {
    display: block;
    font-size: var(--fs-3);
    color: var(--brand-quiet);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-griff-form { margin: 0; }

/* Der Griff steht UNTEN und gehört zur Leiste selbst: Wer die Breite ändert,
   tut das einmal am Tag – oben säße der Knopf lebenslang neben dem Namen des
   Hauses und würde bei jedem Blick mitgelesen. */
.sl-griff {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 32px;
    padding: 0 var(--sp-4);
    border: 0;
    border-top: 1px solid var(--brand-border);
    background: var(--brand-surface);
    /* --brand-quiet (4,7 : 1) und nicht das Tertiärgrau: Der Griff trägt
       0,75rem Schrift, und 3,3 : 1 sind dafür zu wenig. */
    color: var(--brand-quiet);
    font: inherit;
    font-size: var(--fs-4);
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.sl-griff:hover { background: var(--blau-hauch); color: var(--btn-leucht-tief); }
.sl-griff:focus-visible { outline: 2px solid var(--focus-col); outline-offset: -2px; }

/* Nowrap, sonst bricht das Wort während des Ein- und Ausfahrens in zwei
   Zeilen und schiebt den Griff auseinander, während die Leiste noch unterwegs
   ist. */
.sl-griff-wort { white-space: nowrap; overflow: hidden; }

.sl-griff > svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    /* Das Zeichen ist der Pfeil nach unten (icon('chevron-down')); gedreht
       zeigt er in die Richtung, in die sich die Leiste bewegen wird. */
    transform: rotate(90deg);
    transition: transform var(--t-slow) var(--ease-in-out);
}

.ist-schmal .sl-griff > svg { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   Der Kurzhinweis
   --------------------------------------------------------------------------
   Eingefahren steht in der Leiste nur ein Zeichen – wer es nicht kennt, soll
   nicht raten müssen. Der eingebaute title des Browsers sagt es zwar, aber
   erst nach gut einer Sekunde, in der Systemschrift und irgendwo neben dem
   Mauszeiger. Also ein eigener Hinweis: RECHTS neben dem Zeichen (in der
   alten Knopfreihe stand er darunter – hier wäre das die nächste Zeile des
   Menüs) und nur dort, wo das Wort fehlt.
   -------------------------------------------------------------------------- */
.site-leiste [data-tip] { position: relative; }

.site-leiste.ist-schmal [data-tip]::after,
.sl-werkzeuge [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    inset-inline-start: calc(100% + var(--sp-3));
    top: 50%;
    translate: 0 -50%;
    z-index: 1050;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--tip-bg);
    color: var(--tip-ink);
    font-size: var(--fs-4);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out);
}

.site-leiste.ist-schmal [data-tip][data-tip-info]::after {
    content: attr(data-tip) " · " attr(data-tip-info);
}

@media (hover: hover) and (pointer: fine) {
    .site-leiste.ist-schmal [data-tip]:hover::after,
    .sl-werkzeuge [data-tip]:hover::after { opacity: 1; }
}

.site-leiste.ist-schmal [data-tip]:focus-visible::after,
.sl-werkzeuge [data-tip]:focus-visible::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Die schmale Kopfzeile und die Schublade (unter 900px)
   -------------------------------------------------------------------------- */
.site-kopfzeile { display: none; }
.site-schleier { display: none; }

@media (max-width: 899.98px) {
    body.hat-leiste { display: block; }

    .site-kopfzeile {
        position: sticky;
        top: 0;
        z-index: 1020;
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        height: var(--sl-kopf);
        padding: 0 var(--sp-5);
        background: var(--brand-surface);
        border-bottom: 1px solid var(--brand-line-strong);
        box-shadow: var(--sh-1);
    }

    .site-kopfzeile-marke {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-width: 0;
        font-size: var(--fs-6);
        font-weight: 700;
        letter-spacing: -0.015em;
        text-decoration: none;
        color: var(--brand-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-kopfzeile-marke > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sl-hamburger {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--h-ctl);
        height: var(--h-ctl);
        border: 1px solid var(--btn-gray-border);
        border-radius: var(--r-ctl);
        background: var(--btn-gray-bg);
        color: var(--brand-text);
        cursor: pointer;
    }

    /* Aus der Leiste wird eine Schublade: Sie fährt über die Seite, statt
       neben ihr zu stehen. Die gemerkte Breite gilt hier nicht – ein
       eingefahrener Streifen neben 375px Fläche wäre der schlechteste von
       beiden Zuständen. */
    .site-leiste {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        height: 100vh;
        height: 100dvh;
        width: var(--sl-breit);
        flex-basis: var(--sl-breit);
        transform: translateX(-100%);
        box-shadow: var(--shadow-pop);
        transition: transform var(--t-base) var(--ease-out);
    }

    .site-leiste.ist-auf { transform: translateX(0); }
    .site-leiste.ist-schmal { width: var(--sl-breit); flex-basis: var(--sl-breit); }

    .ist-schmal .sl-weg { justify-content: flex-start; padding: 0 var(--sp-3); }
    .ist-schmal .sl-marke,
    .ist-schmal .sl-ich { justify-content: flex-start; padding-inline: var(--sp-4); }
    .ist-schmal .sl-auskunft { display: flex; }
    .ist-schmal .sl-weg-wort,
    .ist-schmal .sl-marke-text,
    .ist-schmal .sl-ich-text {
        opacity: 1;
        flex: 1 1 auto;
        width: auto;
    }
    .ist-schmal .sl-zahl {
        position: static;
        min-width: 18px;
        width: auto;
        height: 18px;
        padding: 0 5px;
        font-size: var(--fs-2);
        border: 0;
    }
    .ist-schmal .sl-zahl.is-alert { background: #f5d3cf; color: #8f2318; }
    .ist-schmal .sl-zahl.is-info { background: #cfdce3; color: #41586a; }
    .ist-schmal .sl-zahl.is-online { background: #cbe8d5; color: #1c5233; }
    /* Der Griff hat hier nichts zu tun – es gibt nur auf oder zu. */
    .sl-griff-form { display: none; }

    /* Der Schleier gehört zur Schublade: Er sagt, dass die Fläche dahinter
       gerade nicht bedient wird, und nimmt den Klick entgegen, mit dem man
       das Menü wieder zumacht. */
    .site-schleier {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1025;
        background: rgba(13, 26, 36, .38);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--t-base) var(--ease-out);
    }
    body.leiste-auf .site-schleier { opacity: 1; pointer-events: auto; }
    /* Solange die Schublade offen steht, rollt die Seite dahinter nicht mit. */
    body.leiste-auf { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .site-leiste,
    .sl-weg,
    .sl-gruppe-titel,
    .sl-griff > svg { transition: none; }
}

/* --------------------------------------------------------------------------
   Papier
   --------------------------------------------------------------------------
   Ein Menü gehört nicht auf einen Ausdruck: Es ist der Weg zur Seite, nicht
   die Seite. Die Spur bekommt beim Drucken die ganze Breite zurück.
   -------------------------------------------------------------------------- */
@media print {
    .site-leiste,
    .site-kopfzeile,
    .site-schleier { display: none !important; }

    body.hat-leiste { display: block; }
    .site-spur { display: block; }
}