/* ============================================================================
   sdb-bausteine.css - Klassen der sdb-Bausteine
   Begonnen in WP-02 (Befunde UX-06, UX-07, UX-15, UX-22). Fortschreibung durch
   die Folgepakete; Dokumentation in docs/redesign/bausteine.md.

   REGELN FUER DIESE DATEI
   * Geladen NACH sdb-tokens.css und VOR dem Inline-<style>-Block von
     app.blade.php. Damit gilt: Tokens stehen bereit, und die CD-!important-
     Schicht im Inline-Block gewinnt jeden Spezifitaets-Gleichstand gegen diese
     Datei - so, wie es sein muss (das CD des Landkreises ist nicht verhandelbar).
   * JEDER Selektor beginnt mit einer Klasse mit dem Praefix `sdb-`. Keine
     Element- und keine Bestandsselektoren, keine Aenderung an bestehenden
     Regeln. Diese Datei darf nichts umfaerben, was sie nicht selbst erzeugt hat.
     Pseudoklassen (`:hover`, `:disabled`) und Attributselektoren
     (`[aria-disabled="true"]`) sind erlaubt, solange sie an eine
     `sdb-`Klasse am SELBEN Element gebunden sind - dann koennen sie nichts
     Fremdes treffen (Pruefhinweis H-1 der WP-02-Pruefung).
   * Alle Farben, Abstaende, Hoehen und Zeiten kommen aus Tokens, und jedes
     var() auf ein TOKEN hat einen Rueckfallwert (Befund B-02 der
     WP-01-Pruefung: faellt sdb-tokens.css einmal aus, muss die Schicht
     trotzdem tragen). Ausnahme sind die komponenteneigenen Properties
     --sdb-button-hoehe und --sdb-button-polster: die setzt die Basisklasse in
     DIESER Datei, sie koennen also nicht fehlen.
   * KEIN `dark:`-Praefix und keine zweite Farbregel fuer den Dunkelmodus: die
     Tokenwerte wechseln mit der Klasse `dark` auf <html>.
   ========================================================================= */


/* ============================================================================
   sdb-button
   Varianten: primaer | sekundaer | gefahr | text | icon
   Groessen:  s (36 px) | m (40 px) | l (44 px), mobil/Touch immer >= 44 px

   WARUM EIGENE KLASSEN UND NICHT TAILWIND-UTILITIES
   Das Komponenten-Template liegt in /js/sdb/sdb-button.js. Das Tailwind-Play-CDN
   scannt aber nur das DOKUMENT nach Klassennamen - Klassen, die ausschliesslich
   in einer JS-Datei stehen, werden NICHT erzeugt. Eine Utility-Kette im Template
   waere also teilweise wirkungslos (und genau das faellt erst im Browser auf).
   Deshalb: eigene Klassen in dieser Datei.

   WIE DIE GROESSE GERECHNET WIRD
   Jede Groessenklasse setzt zwei lokale Properties: --sdb-button-hoehe und
   --sdb-button-polster. Die Basisklasse liest sie. Die Icon-Variante nimmt die
   Hoehe zusaetzlich als Breite (quadratisch), und die Touch-Regel muss deshalb
   nur diese beiden Properties neu setzen.
   ========================================================================= */

.sdb-button {
    /* Rueckfall, falls jemand die Groessenklasse vergisst: Standardgroesse m. */
    --sdb-button-hoehe:   var(--sdb-hoehe-control-m, 40px);
    --sdb-button-polster: var(--sdb-abstand-4, 16px);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sdb-abstand-2, 8px);

    /* Hoehe ist eine MINDEST-Hoehe: ein umbrechendes Label darf wachsen,
       statt den Text abzuschneiden (Reflow bei 200 % Zoom, WCAG 1.4.10). */
    min-height: var(--sdb-button-hoehe);
    padding: var(--sdb-abstand-1, 4px) var(--sdb-button-polster);
    box-sizing: border-box;

    font-family: inherit;
    font-size: var(--sdb-schrift-basis, 16px);
    font-weight: 500;
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    text-align: center;
    text-decoration: none;

    /* 1 px Rahmen immer vorhanden (bei Flaechenvarianten transparent), damit
       keine Variante um 2 px springt, wenn sie einen Rahmen bekommt. */
    border: 1px solid transparent;
    border-radius: var(--sdb-radius-m, 2px);

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;

    transition: background-color var(--sdb-motion-kurz, 0.15s) var(--sdb-motion-kurve, ease),
                border-color     var(--sdb-motion-kurz, 0.15s) var(--sdb-motion-kurve, ease),
                color            var(--sdb-motion-kurz, 0.15s) var(--sdb-motion-kurve, ease);
}

/* Bewegung reduzieren: auch der Zustandswechsel wird sofort statt weich.
   0,01 ms statt `none`, aus demselben Grund wie in sdb-tokens.css. */
@media (prefers-reduced-motion: reduce) {
    .sdb-button {
        transition-duration: 0.01ms;
    }
}

/* ---- Groessen -----------------------------------------------------------
   s nutzt die kleine Schriftstufe (14 px); m und l die Basisschrift (16 px).
   Analyse Abschn. 10: Basis 16 px, Hilfetexte 14 px.                       */

.sdb-button--s {
    --sdb-button-hoehe:   var(--sdb-hoehe-control-s, 36px);
    --sdb-button-polster: var(--sdb-abstand-3, 12px);
    font-size: var(--sdb-schrift-klein, 14px);
}

.sdb-button--m {
    --sdb-button-hoehe:   var(--sdb-hoehe-control-m, 40px);
    --sdb-button-polster: var(--sdb-abstand-4, 16px);
}

.sdb-button--l {
    --sdb-button-hoehe:   var(--sdb-hoehe-control-l, 44px);
    --sdb-button-polster: var(--sdb-abstand-4, 16px);
}

/* ---- Touch-/Mobilregel: Zielgroesse 44 px -------------------------------
   ZWEI Bedingungen, bewusst mit ODER verknuepft:

   (pointer: coarse)
       Das ist die FACHLICH richtige Frage: nicht "ist der Bildschirm klein?",
       sondern "wird mit dem Finger gezeigt?". Ein Tablet im Querformat
       (1024 px breit, Touch) bekommt so 44 px, ein schmales Desktopfenster
       bleibt bei 36/40 px - dort ist die Maus genau.

   (max-width: 639.98px)
       Ergaenzt den Fall, in dem der Browser keinen groben Zeiger meldet,
       obwohl das Geraet so benutzt wird: iPhones in "Desktop-Website"-Sicht,
       Android-Browser mit Maus-Emulation, und vor allem die Viewport-
       Emulation in Playwright/DevTools (ohne hasTouch meldet Chromium
       `pointer: fine`). Ohne diese Zeile waere die Abnahmepruefung bei
       320/360/390 px nicht aussagekraeftig, weil sie etwas anderes messen
       wuerde als das echte Telefon. 639.98px = unterhalb von Tailwinds
       sm-Breakpoint (640 px), auf den die Anwendung durchgehend aufbaut.      */

@media (pointer: coarse), (max-width: 639.98px) {
    .sdb-button {
        --sdb-button-hoehe: var(--sdb-hoehe-control-l, 44px);
    }
}

/* Reihenfolge ist hier tragend: der Block steht NACH den Groessenklassen.
   `.sdb-button` und `.sdb-button--s` haben dieselbe Spezifitaet (0,1,0), also
   entscheidet die Quelltextreihenfolge - stuende der Block oben, wuerde
   `.sdb-button--s` die 44 px wieder auf 36 px zuruecksetzen. */

/* ---- Variante: primaer (CD-Gelb, schwarze Schrift) ----------------------
   Der Fond kommt aus dem Token, NICHT aus `bg-primary-600`. Deshalb greift die
   CD-Regel `.bg-primary-500…900 { color: #000 !important }` hier nicht, und die
   schwarze Schrift muss selbst gesetzt werden (--sdb-text-auf-akzent = #000).
   Damit entfaellt auch das `text-white`, das im Bestand an diesen Buttons steht
   und nur deshalb nicht schadet, weil die CD-Regel es ueberschreibt
   (offener Punkt O-2 aus WP-01). Kontrast: 13,88:1 in Ruhe, 9,58:1 bei Hover.

   DER RAHMEN (Pruefbefund B-01 der WP-02-Pruefung, Entscheidung des Orchestrators)
   CD-Gelb erreicht gegen Weiss nur 1,51:1. Ohne eigenen Umriss haengt die
   Erkennbarkeit der Hauptaktion allein an ihrer Beschriftung - und genau die
   fehlt an der Pilotstelle unterhalb 640 px (dort traegt nur das Plus-Icon).
   Deshalb bekommt die Flaeche eine Begrenzung aus --sdb-akzent-rahmen:
   #8C8200 im Hellmodus (3,96:1 gegen flaeche/flaeche-erhoben, 3,79:1 gegen
   flaeche-grund, also WCAG 1.4.11), im Dunkelmodus faellt der Rahmen mit der
   Flaeche zusammen - dort traegt das Gelb selbst (6,81-11,73:1).
   Der Rahmen bleibt in Hover und Aktiv unveraendert: seine Aufgabe ist die
   Abgrenzung zum SEITENGRUND, nicht zur eigenen Flaeche. Das ist eine bewusste,
   dem Menschen gemeldete CD-Entscheidung - kein Nebeneffekt. */

.sdb-button--primaer {
    background-color: var(--sdb-akzent, #E6D500);
    color: var(--sdb-text-auf-akzent, #000000);
    border-color: var(--sdb-akzent-rahmen, #8C8200);
}
.sdb-button--primaer:hover {
    background-color: var(--sdb-akzent-hover, #BFB200);
}
.sdb-button--primaer:active {
    background-color: var(--sdb-akzent-hover, #BFB200);
}

/* ---- Variante: sekundaer (Flaeche mit Rahmen) ---------------------------
   Der Rahmen ist hier bedeutungstragend - er ist das Einzige, was den Button
   von der Flaeche abgrenzt. Deshalb --sdb-rahmen-stark (4,83:1 hell /
   5,78:1 dunkel) und nicht --sdb-rahmen-feld (1,47:1), das WCAG 1.4.11 nicht
   erreicht. Das ist der Unterschied zum Eingabefeld, dessen Entscheidung in
   WP-04 fiel/faellt.                                                        */

.sdb-button--sekundaer {
    background-color: var(--sdb-flaeche, #FFFFFF);
    color: var(--sdb-text-primaer, #111827);
    border-color: var(--sdb-rahmen-stark, #6B7280);
}
.sdb-button--sekundaer:hover,
.sdb-button--sekundaer:active {
    background-color: var(--sdb-flaeche-leise, #F3F4F6);
}

/* ---- Variante: gefahr (rot, weisse Schrift) -----------------------------
   4,83:1 in Ruhe, 6,47:1 bei Hover - beides ueber 4,5:1. Die Bedeutung kommt
   NICHT aus der Farbe allein: diese Variante bekommt immer eine Beschriftung
   (und ueblicherweise das Icon `loeschen`) - Analyse Abschn. 10, "Farbe nie
   allein".                                                                  */

.sdb-button--gefahr {
    background-color: var(--sdb-gefahr, #DC2626);
    color: var(--sdb-text-auf-gefahr, #FFFFFF);
    border-color: var(--sdb-gefahr, #DC2626);
}
.sdb-button--gefahr:hover,
.sdb-button--gefahr:active {
    background-color: var(--sdb-gefahr-hover, #B91C1C);
    border-color: var(--sdb-gefahr-hover, #B91C1C);
}

/* ---- Variante: text (nur Text, Link-Stil) -------------------------------
   Farbe ist der Akzenttext: schwarz im Hellmodus, CD-Gelb im Dunkelmodus
   (18,88:1 / 12,14:1). Unterstreichung erst bei Hover und Fokus, damit eine
   Toolbar mit mehreren Textaktionen nicht wie ein Absatz voller Links
   aussieht; die Flaeche bleibt bis dahin frei.                              */

.sdb-button--text {
    background-color: transparent;
    color: var(--sdb-akzent-text, #111111);
    border-color: transparent;
    /* Ein Textbutton steht oft in einer Zeile mit Text - das seitliche
       Polster darf dort schmaler sein. Die Hoehe bleibt, damit die
       Trefferflaeche stimmt. */
    padding-left: var(--sdb-abstand-2, 8px);
    padding-right: var(--sdb-abstand-2, 8px);
}
.sdb-button--text:hover,
.sdb-button--text:active {
    background-color: var(--sdb-flaeche-hover, rgba(255, 237, 0, 0.12));
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sdb-button--text:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Variante: icon (nur Icon, quadratisch) -----------------------------
   Ersetzt die Emoji-Aktionen des Bestands (✏️/🗑️ mit 27x22 px bzw. 4 px
   Polster um ein Zeichen, Befund UX-07). Quadratisch, weil ein einzelnes Icon
   keine Textbreite hat - die Flaeche kommt aus der Hoehe.
   Die Beschriftung ist Pflicht und wandert nach aria-label + title
   (siehe sdb-button.js); sichtbar ist sie nicht.                            */

.sdb-button--icon {
    width: var(--sdb-button-hoehe);
    min-width: var(--sdb-button-hoehe);
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
    color: var(--sdb-text-sekundaer-kontrast, #374151);
    border-color: transparent;
}
.sdb-button--icon:hover,
.sdb-button--icon:active {
    background-color: var(--sdb-flaeche-hover, rgba(255, 237, 0, 0.12));
    color: var(--sdb-text-primaer, #111827);
}

/* ---- Label, das erst ab einer Breite sichtbar wird ----------------------
   Fuer den Fall "mobil Icon, ab sm Icon plus Text" (Befund UX-06). Unterhalb
   der Grenze verschwindet der Text und der Button wird quadratisch; der
   zugaengliche Name kommt dann aus aria-label + title, die sdb-button.js in
   diesem Fall IMMER setzt - der Name geht also nie verloren, auch nicht in dem
   Moment, in dem der Text nicht zu sehen ist.
   Die Grenze ist Tailwinds sm-Breakpoint (640 px), damit sich der Baustein so
   verhaelt wie das `hidden sm:inline` ringsherum.                            */

@media (max-width: 639.98px) {
    .sdb-button__label--ab-sm {
        display: none;
    }
    .sdb-button--label-ab-sm {
        width: var(--sdb-button-hoehe);
        min-width: var(--sdb-button-hoehe);
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }
}

/* ---- Zustand: deaktiviert und ladend -----------------------------------
   KEIN `opacity`. Zwei Gruende: erstens laesst sich ein durchscheinender
   Button nicht nachrechnen (der Kontrast haengt dann davon ab, was dahinter
   liegt), zweitens kippt er auf gemusterten Flaechen unter jedes Ziel.
   Stattdessen feste Tokenfarben - damit sind die Werte belegbar:
     Flaechenvarianten  text-tertiaer auf flaeche-leise   5,18:1 / 4,98:1
     Text-/Icon-Variante text-tertiaer auf flaeche        5,70:1 / 7,09:1
   Beide ueber den 3:1, die fuer deaktivierte Bedienelemente als Zielwert
   vereinbart sind (WCAG 1.4.3 nimmt sie ausdruecklich aus; wir wollen sie
   trotzdem lesbar).
   Die Deaktivierung wird nicht nur farblich vermittelt: dazu kommen das
   disabled-Attribut (bzw. aria-disabled am Link), der Cursor und im
   Ladezustand das rotierende Icon plus aria-busy.                            */

.sdb-button:disabled,
.sdb-button[aria-disabled="true"] {
    cursor: not-allowed;
    background-color: var(--sdb-flaeche-leise, #F3F4F6);
    color: var(--sdb-text-tertiaer, #5F6775);
    border-color: var(--sdb-rahmen, #E9EBEE);
    text-decoration: none;
}
.sdb-button--text:disabled,
.sdb-button--text[aria-disabled="true"],
.sdb-button--icon:disabled,
.sdb-button--icon[aria-disabled="true"] {
    background-color: transparent;
    border-color: transparent;
    color: var(--sdb-text-tertiaer, #5F6775);
}

/* ---- Spinner des Ladezustands ------------------------------------------
   Das Icon `aktualisieren` dreht sich. Bei `prefers-reduced-motion: reduce`
   steht es still - dann tragen die Deaktivierungsfarben, aria-busy="true" und
   das disabled-Attribut den Zustand. Ein stehendes Icon ist kein Verlust an
   Information, weil der Zustand nie NUR ueber die Bewegung lief.             */

@keyframes sdb-dreh {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.sdb-button__spinner {
    animation: sdb-dreh 0.9s linear infinite;
    transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
    .sdb-button__spinner {
        animation: none;
    }
}

/* ---- Beschriftung ------------------------------------------------------
   Eigener Kasten um den Text, damit `gap` zwischen Icon und Text wirkt und
   der Text bei Bedarf umbrechen kann, ohne das Icon zu stauchen.             */

.sdb-button__label {
    min-width: 0;
}


/* ============================================================================
   sdb-dialog   (WP-03, Befunde UX-02 P0, UX-03, UX-22)
   Groessen: s (28rem) | m (42rem) | l (56rem) | xl (72rem) - Hoechstbreite
   Aufbau:   .sdb-dialog (Backdrop, zusammen mit der Bestandsklasse
             .modal-backdrop) > .sdb-dialog__panel > __kopf | __inhalt | __fuss
             (+ __rueckfrage als Ueberlagerung bei ungespeicherten Aenderungen)

   DIE DREI REGELN, DIE UX-02 BEHEBEN
   1. Das Panel ist hoechstens so hoch wie der Viewport abzueglich Rand
      (100dvh, Rueckfall 100vh fuer Browser ohne dvh).
   2. Kopf und Fuss schrumpfen nicht (flex: none), NUR der Inhalt scrollt
      (flex: 1 1 auto + min-height: 0 + overflow-y: auto). Ohne min-height: 0
      waere die Mindesthoehe eines Flex-Kinds sein Inhalt - dann wuerde wieder
      das Panel wachsen statt der Inhalt scrollen.
   3. Zentriert wird ueber margin: auto am Panel, NICHT ueber
      align-items: center am Backdrop. Bei align-items verteilt der Browser
      einen Ueberhang symmetrisch nach oben und unten - genau so sind Titel und
      "Speichern" bei 360 x 640 aus dem Bild gewandert. margin: auto zentriert,
      solange Platz ist, und faellt sonst auf 0 zurueck (Analyse 5.3: "Titel und
      Aktion duerfen nicht durch vertikale Zentrierung aus dem sichtbaren
      Bereich wandern"). Der Backdrop scrollt als letzte Sicherung selbst.

   FLAECHEN (Regel O-W02-1 aus WP-02)
   Panel und Kopf: --sdb-flaeche-erhoben. Der FUSS nimmt --sdb-flaeche: dort
   sitzen die Aktionen, und --sdb-gefahr erreicht gegen --sdb-flaeche im
   Dunkelmodus 3,04:1, gegen --sdb-flaeche-erhoben nur 2,13:1. Ebenso hebt sich
   ein deaktivierter Flaechenbutton (--sdb-flaeche-leise) nur von
   --sdb-flaeche ab - im Dunkelmodus sind leise und erhoben derselbe Wert.

   Tailwind-Utilities sind im Komponenten-Template wirkungslos (das Play-CDN
   scannt keine JS-Dateien), deshalb eigene Klassen - wie bei sdb-button.
   ========================================================================= */

.sdb-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--sdb-z-dialog, 50);
    display: flex;
    padding: var(--sdb-abstand-4, 16px);
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Waehrend ein sdb-dialog offen ist, scrollt die Seite dahinter nicht. */
.sdb-dialog-gesperrt {
    overflow: hidden;
}

.sdb-dialog__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: 42rem;
    margin: auto;
    max-height: calc(100vh - 2 * var(--sdb-abstand-4, 16px));
    max-height: calc(100dvh - 2 * var(--sdb-abstand-4, 16px));
    overflow: hidden;

    background: var(--sdb-flaeche-erhoben, #FFFFFF);
    color: var(--sdb-text-primaer, #111827);
    border-radius: var(--sdb-radius-l, 2px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    font-family: inherit;
    text-align: left;
}
/* Der Fokus liegt nur dann auf dem Panel, wenn nichts darin fokussierbar ist
   oder nach einem Klick auf freie Flaeche. Das Panel ist kein Bedienelement;
   ein Ring um den ganzen Dialog waere Rauschen. Bedienelemente darin tragen
   ihren eigenen Ring (.sdb-fokus). */
.sdb-dialog__panel:focus {
    outline: none;
}

.sdb-dialog__panel--s  { max-width: 28rem; }
.sdb-dialog__panel--m  { max-width: 42rem; }
.sdb-dialog__panel--l  { max-width: 56rem; }
.sdb-dialog__panel--xl { max-width: 72rem; }

/* Kopf: Titel, optionales Icon, Schliessen. Fest. */
.sdb-dialog__kopf {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: var(--sdb-abstand-3, 12px);
    padding: var(--sdb-abstand-4, 16px) var(--sdb-abstand-4, 16px)
             var(--sdb-abstand-3, 12px) var(--sdb-abstand-6, 24px);
    border-bottom: 1px solid var(--sdb-rahmen, #E9EBEE);
    background: var(--sdb-flaeche-erhoben, #FFFFFF);
}
.sdb-dialog__kopf-icon {
    flex: none;
    margin-top: var(--sdb-abstand-2, 8px);
    color: var(--sdb-text-sekundaer-kontrast, #374151);
}
.sdb-dialog__titelblock {
    flex: 1 1 auto;
    min-width: 0;
    /* Titel auf die Mitte des 40-px-Schliessen-Buttons ausrichten. */
    padding-top: var(--sdb-abstand-2, 8px);
}
.sdb-dialog__titel {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    color: var(--sdb-text-primaer, #111827);
    overflow-wrap: anywhere;
}
.sdb-dialog__beschreibung {
    margin: var(--sdb-abstand-1, 4px) 0 0;
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe, 1.5);
    color: var(--sdb-text-sekundaer, #4B5563);
}
.sdb-dialog__schliessen {
    flex: none;
}

/* Kritisch (Bestaetigung mit Folgen): Gefahr-Linie oben und Warnicon in der
   Gefahr-Textfarbe. --sdb-gefahr-text statt --sdb-gefahr, weil das gesaettigte
   Rot im Dunkelmodus gegen --sdb-flaeche-erhoben nur 2,13:1 erreicht; die
   Textfarbe liegt in beiden Modi deutlich ueber 3:1 (Tabelle in bausteine.md).
   Die Bedeutung kommt nicht aus der Farbe allein: Icon, Titel und
   role="alertdialog" tragen sie mit. */
.sdb-dialog__panel--kritisch {
    border-top: 4px solid var(--sdb-gefahr-text, #991B1B);
}
.sdb-dialog__panel--kritisch .sdb-dialog__kopf-icon {
    color: var(--sdb-gefahr-text, #991B1B);
}

/* Inhalt: der einzige scrollende Bereich. */
.sdb-dialog__inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--sdb-abstand-4, 16px) var(--sdb-abstand-6, 24px);
}

/* Fuss: Aktionen. Fest, eigene Flaeche (O-W02-1). */
.sdb-dialog__fuss {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sdb-abstand-3, 12px);
    padding: var(--sdb-abstand-3, 12px) var(--sdb-abstand-6, 24px);
    border-top: 1px solid var(--sdb-rahmen, #E9EBEE);
    background: var(--sdb-flaeche, #FFFFFF);
}

/* Rueckfrage bei ungespeicherten Aenderungen: liegt UEBER dem Panelinhalt,
   der darunter per inert gesperrt ist. */
.sdb-dialog__rueckfrage {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    padding: var(--sdb-abstand-4, 16px);
    overflow-y: auto;
    background: var(--sdb-overlay, rgba(15, 23, 42, 0.7));
}
.sdb-dialog__rueckfrage-karte {
    margin: auto;
    width: 100%;
    max-width: 26rem;
    box-sizing: border-box;
    padding: var(--sdb-abstand-6, 24px);
    background: var(--sdb-flaeche, #FFFFFF);
    color: var(--sdb-text-primaer, #111827);
    border-top: 4px solid var(--sdb-warnung-text, #92400E);
    border-radius: var(--sdb-radius-l, 2px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.sdb-dialog__rueckfrage-kopf {
    display: flex;
    align-items: center;
    gap: var(--sdb-abstand-3, 12px);
}
.sdb-dialog__rueckfrage-icon {
    flex: none;
    color: var(--sdb-warnung-text, #92400E);
}
.sdb-dialog__rueckfrage-titel {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
}
.sdb-dialog__rueckfrage-text {
    margin: var(--sdb-abstand-3, 12px) 0 0;
    font-size: var(--sdb-schrift-basis, 16px);
    line-height: var(--sdb-zeilenhoehe, 1.5);
    color: var(--sdb-text-sekundaer-kontrast, #374151);
}
.sdb-dialog__rueckfrage-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sdb-abstand-3, 12px);
    margin-top: var(--sdb-abstand-6, 24px);
}

/* Mobil (< 640 px): Vollbild innerhalb 100dvh, Safe Areas beruecksichtigt.
   Dieselbe Grenze wie die Touch-Regel von sdb-button (639.98px, knapp unter
   Tailwinds sm). env() liefert nur dann Werte > 0, wenn das viewport-Meta
   viewport-fit=cover traegt - heute nicht (offener Punkt in bausteine.md);
   der Rueckfall 0px macht die Regel bis dahin wirkungsneutral. */
@media (max-width: 639.98px) {
    .sdb-dialog {
        padding: 0;
    }
    .sdb-dialog__panel,
    .sdb-dialog__panel--s,
    .sdb-dialog__panel--m,
    .sdb-dialog__panel--l,
    .sdb-dialog__panel--xl {
        max-width: none;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .sdb-dialog__kopf {
        padding: calc(var(--sdb-abstand-2, 8px) + env(safe-area-inset-top, 0px))
                 var(--sdb-abstand-2, 8px) var(--sdb-abstand-2, 8px) var(--sdb-abstand-4, 16px);
    }
    .sdb-dialog__inhalt {
        padding: var(--sdb-abstand-4, 16px);
    }
    .sdb-dialog__inhalt:last-child,
    .sdb-dialog__fuss {
        padding-bottom: calc(var(--sdb-abstand-3, 12px) + env(safe-area-inset-bottom, 0px));
    }
    .sdb-dialog__fuss {
        padding-left: var(--sdb-abstand-4, 16px);
        padding-right: var(--sdb-abstand-4, 16px);
    }
}


/* ============================================================================
   sdb-feld, sdb-fehlerliste   (WP-04, Befunde UX-04, UX-22)
   Aufbau: .sdb-feld > __label | __steuer (input/textarea/such-auswahl-Button)
           | __fehler | __hilfe;  checkbox/radio: __zeile mit __haken/__radio.

   RAHMEN: --sdb-rahmen-stark, NICHT --sdb-rahmen-feld. Der Bestandsrahmen
   (gray-300/600) erreicht gegen die Flaeche nur 1,47:1 bzw. 1,94:1; WCAG
   1.4.11 verlangt 3:1 fuer die Begrenzung eines Eingabefelds. rahmen-stark
   liegt bei 4,83:1 hell und 5,78:1 dunkel gegen --sdb-flaeche (Entscheidung
   des Orchestrators zu O-1, Tabelle in bausteine.md).

   FLAECHE: --sdb-flaeche. Hell weiss wie bisher; dunkel #1F2937 und damit
   eine Stufe tiefer als der Dialog (--sdb-flaeche-erhoben) - das Feld liest
   sich als Eingabeflaeche, nicht als Panel.

   FEHLER: Rahmen und Text in --sdb-gefahr-text (nicht --sdb-gefahr: das
   gesaettigte Rot faellt im Dunkelmodus unter 3:1), plus Icon und Text -
   Farbe ist nie allein Bedeutungstraeger.

   FOKUS: ausschliesslich .sdb-fokus (sdb-tokens.css). Hier steht weder
   outline noch box-shadow fuer :focus - mit einer Ausnahme: die Verdickung
   des Fehlerrahmens per inset-Schatten; waehrend des Fokus ueberschreibt
   .sdb-fokus (!important) sie, der Ring ist dann ohnehin das staerkere Signal.
   ========================================================================= */

.sdb-feld {
    display: flex;
    flex-direction: column;
    gap: var(--sdb-abstand-1, 4px);
    min-width: 0;
}

.sdb-feld__label {
    display: block;
    font-size: var(--sdb-schrift-klein, 14px);
    font-weight: 500;
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    color: var(--sdb-text-sekundaer-kontrast, #374151);
}
.sdb-feld__label--inline {
    font-weight: 400;
    color: var(--sdb-text-primaer, #111827);
    cursor: pointer;
}
/* Visuell verborgen, fuer Hilfstechnik vorhanden (wie Tailwinds sr-only). */
.sdb-feld__label--versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sdb-feld__pflicht {
    margin-left: 2px;
    color: var(--sdb-gefahr-text, #991B1B);
}

.sdb-feld__steuer {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--sdb-hoehe-control-m, 40px);
    padding: var(--sdb-abstand-2, 8px) var(--sdb-abstand-3, 12px);
    font-family: inherit;
    /* 16 px: kleiner zoomt iOS Safari beim Fokussieren die Seite. */
    font-size: var(--sdb-schrift-basis, 16px);
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    color: var(--sdb-text-primaer, #111827);
    background: var(--sdb-flaeche, #FFFFFF);
    border: 1px solid var(--sdb-rahmen-stark, #6B7280);
    border-radius: var(--sdb-radius-m, 2px);
}
.sdb-feld__steuer::placeholder {
    color: var(--sdb-text-sekundaer, #4B5563);
    opacity: 1;
}
.sdb-feld__steuer:disabled {
    cursor: not-allowed;
    color: var(--sdb-text-tertiaer, #5F6775);
    background: var(--sdb-flaeche-leise, #F3F4F6);
}
.sdb-feld__steuer--textarea {
    min-height: 5rem;
    resize: vertical;
}
/* Button von such-auswahl im Feldstil: gleiche Flaeche, Inhalt wie Bestand. */
.sdb-feld__auswahl-knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdb-abstand-2, 8px);
    text-align: left;
    cursor: pointer;
}

.sdb-feld--fehler .sdb-feld__steuer {
    border-color: var(--sdb-gefahr-text, #991B1B);
    box-shadow: inset 0 0 0 1px var(--sdb-gefahr-text, #991B1B);
}

.sdb-feld__zeile {
    display: flex;
    align-items: center;
    gap: var(--sdb-abstand-2, 8px);
    min-height: var(--sdb-hoehe-control-s, 36px);
}
.sdb-feld__haken,
.sdb-feld__radio {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sdb-akzent-text, #111111);
    cursor: pointer;
}
.sdb-feld__gruppe {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.sdb-feld__gruppe > .sdb-feld__label {
    margin-bottom: var(--sdb-abstand-1, 4px);
    padding: 0;
}
.sdb-feld--fehler .sdb-feld__gruppe,
.sdb-feld--checkbox.sdb-feld--fehler .sdb-feld__zeile {
    border-left: 3px solid var(--sdb-gefahr-text, #991B1B);
    padding-left: var(--sdb-abstand-2, 8px);
}

.sdb-feld__fehler {
    display: flex;
    align-items: flex-start;
    gap: var(--sdb-abstand-1, 4px);
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe, 1.5);
    font-weight: 500;
    color: var(--sdb-gefahr-text, #991B1B);
}
.sdb-feld__fehler-icon {
    flex: none;
    margin-top: 2px;
}
.sdb-feld__fehler-zeile {
    display: block;
}
.sdb-feld__hilfe {
    margin: 0;
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe, 1.5);
    color: var(--sdb-text-sekundaer, #4B5563);
}

/* Mobil / grober Zeiger: Zielgroesse 44 px wie sdb-button. */
@media (pointer: coarse), (max-width: 639.98px) {
    .sdb-feld__steuer {
        min-height: var(--sdb-hoehe-control-l, 44px);
    }
    .sdb-feld__zeile {
        min-height: var(--sdb-hoehe-control-l, 44px);
    }
}

/* Hinweis "Felder mit * muessen ausgefuellt werden" ueber einem Formular. */
.sdb-feld-pflichthinweis {
    margin: 0;
    font-size: var(--sdb-schrift-klein, 14px);
    color: var(--sdb-text-sekundaer, #4B5563);
}
.sdb-feld-pflichthinweis .sdb-feld__pflicht {
    margin: 0 1px;
}

/* ---- sdb-fehlerliste ---------------------------------------------------- */
.sdb-fehlerliste {
    padding: var(--sdb-abstand-3, 12px) var(--sdb-abstand-4, 16px);
    color: var(--sdb-gefahr-text, #991B1B);
    background: var(--sdb-gefahr-flaeche, #FEF2F2);
    border: 1px solid var(--sdb-gefahr-rahmen, #FECACA);
    border-left: 4px solid var(--sdb-gefahr-text, #991B1B);
    border-radius: var(--sdb-radius-m, 2px);
}
/* Fokus kommt programmatisch (tabindex=-1): sichtbar machen, damit Sehende
   sehen, wohin er gesprungen ist. Gleiche Farben wie .sdb-fokus. */
.sdb-fehlerliste:focus {
    outline: var(--sdb-fokus-breite, 3px) solid var(--sdb-fokus-ring, #111827);
    outline-offset: var(--sdb-fokus-abstand, 2px);
}
.sdb-fehlerliste__titel {
    display: flex;
    align-items: center;
    gap: var(--sdb-abstand-2, 8px);
    margin: 0 0 var(--sdb-abstand-2, 8px);
    font-size: var(--sdb-schrift-klein, 14px);
    font-weight: 600;
}
.sdb-fehlerliste__icon {
    flex: none;
}
.sdb-fehlerliste__liste {
    margin: 0;
    padding-left: var(--sdb-abstand-6, 24px);
    list-style: disc;
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe, 1.5);
}
.sdb-fehlerliste__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sdb-fehlerliste__link:hover {
    text-decoration-thickness: 2px;
}


/* ============================================================================
   sdb-leerzustand (WP-05, Befunde UX-19, UX-20)
   Fuenf Zustaende: laden, leer, keine-treffer, fehler, keine-berechtigung.
   Neutral, ohne Flaechenfarbe: der Baustein sitzt auf der Arbeitsflaeche und
   erbt deren Grund. Text: titel = text-primaer, text = text-sekundaer; beide
   erreichen auf allen vier Flaechen in beiden Modi >= 4,5:1 (Tokenleiter,
   bausteine.md "Die Stufenleiter der Textfarben"). Das Icon ist dekorativ
   (aria-hidden), die Aussage steht im Text.
   ========================================================================= */

.sdb-leerzustand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sdb-abstand-2, 8px);
    padding: var(--sdb-abstand-8, 32px) var(--sdb-abstand-4, 16px);
    text-align: center;
    color: var(--sdb-text-sekundaer, #4B5563);
    min-width: 0;
}
.sdb-leerzustand--kompakt {
    gap: var(--sdb-abstand-1, 4px);
    padding: var(--sdb-abstand-3, 12px) var(--sdb-abstand-2, 8px);
}
.sdb-leerzustand__icon {
    flex: none;
    color: var(--sdb-text-sekundaer, #4B5563);
}
.sdb-leerzustand--fehler .sdb-leerzustand__icon {
    color: var(--sdb-gefahr-text, #991B1B);
}
.sdb-leerzustand__spinner {
    animation: sdb-dreh 0.9s linear infinite;
    transform-origin: 50% 50%;
}
.sdb-leerzustand__titel {
    margin: 0;
    max-width: 36rem;
    font-size: var(--sdb-schrift-basis, 16px);
    font-weight: 600;
    line-height: var(--sdb-zeilenhoehe, 1.5);
    color: var(--sdb-text-primaer, #111827);
    overflow-wrap: break-word;
}
.sdb-leerzustand__text {
    margin: 0;
    max-width: 36rem;
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe, 1.5);
    color: var(--sdb-text-sekundaer, #4B5563);
    overflow-wrap: break-word;
}
.sdb-leerzustand__aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sdb-abstand-2, 8px);
    margin-top: var(--sdb-abstand-2, 8px);
}
@media (prefers-reduced-motion: reduce) {
    .sdb-leerzustand__spinner {
        animation: none;
    }
}


/* ============================================================================
   sdb-toolbar und sdb-menue (WP-05, Befund UX-15)
   Toolbar: Titel (bricht um, nie `truncate`), Geltungsbadge, erklaerender
   Satz, Aktionen rechts. Unter 640 px stehen die Aktionen in einer zweiten
   Zeile; nichts wird versteckt, die Hauptaktion bleibt erreichbar.
   Badge-Farben ueber Statustokens (Text + Rahmen + Flaeche), Text >= 4,5:1,
   dazu immer Icon + Satz: Farbe allein traegt die Information nicht.
   ========================================================================= */

.sdb-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--sdb-abstand-3, 12px);
    min-width: 0;
}
.sdb-toolbar__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sdb-abstand-3, 12px) var(--sdb-abstand-4, 16px);
}
.sdb-toolbar__kopf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sdb-abstand-1, 4px);
    flex: 1 1 16rem;
    min-width: 0;
}
/* WP-09: Titel und Geltungs-Chip in einer Zeile (umbrechend). */
.sdb-toolbar__titelzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sdb-abstand-1, 4px) var(--sdb-abstand-2, 8px);
    min-width: 0;
    max-width: 100%;
}
.sdb-toolbar__titel {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    color: var(--sdb-text-primaer, #111827);
    overflow-wrap: break-word;
    max-width: 100%;
}
.sdb-toolbar__untertitel {
    margin: 0;
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe, 1.5);
    color: var(--sdb-text-sekundaer, #4B5563);
}
.sdb-toolbar__geltung {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sdb-abstand-1, 4px);
    margin: 0;
    padding: var(--sdb-abstand-1, 4px) var(--sdb-abstand-2, 8px);
    max-width: 100%;
    border: 1px solid transparent;
    border-radius: var(--sdb-radius-s, 2px);
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    overflow-wrap: break-word;
}
.sdb-toolbar__geltung > span {
    min-width: 0;
}
.sdb-toolbar__geltung-icon {
    flex: none;
    margin-top: 1px;
}
.sdb-toolbar__geltung--standort {
    background-color: var(--sdb-akzent-leise, #FFFDE6);
    border-color: var(--sdb-akzent-rahmen, #8C8200);
    color: var(--sdb-text-primaer, #111827);
}
.sdb-toolbar__geltung--global {
    background-color: var(--sdb-info-flaeche, #EFF6FF);
    border-color: var(--sdb-info-rahmen, #BFDBFE);
    color: var(--sdb-info-text, #1E40AF);
}
.sdb-toolbar__geltung--gesamt {
    background-color: var(--sdb-warnung-flaeche, #FFFBEB);
    border-color: var(--sdb-warnung-rahmen, #FDE68A);
    color: var(--sdb-warnung-text, #92400E);
}
/* WP-09 (Pruefbefund B-2 aus WP-05b): Mit Kurzform (`geltung-kurz`) steht der
   Bereich als Chip neben dem Titel; der volle Satz steht als Fliesstext im
   Untertitel-Absatz (Klasse `--satz` hebt Rahmen/Flaeche des Badges auf).
   Chip: eckig (CD 2 px), Text >= 4,5:1 auf der Chipflaeche, Rahmen >= 3:1
   gegen die Kartenflaeche (`flaeche`): standort `akzent-rahmen`, global und
   gesamt `currentColor` (die hellen `*-rahmen`-Tokens erreichen 3:1 nicht). */
.sdb-toolbar__geltung.sdb-toolbar__geltung--satz {
    display: inline;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.sdb-toolbar__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sdb-abstand-1, 4px);
    max-width: 100%;
    padding: 2px var(--sdb-abstand-2, 8px);
    border: 1px solid currentColor;
    border-radius: var(--sdb-radius-s, 2px);
    font-size: var(--sdb-schrift-klein, 14px);
    font-weight: 500;
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    overflow-wrap: anywhere;
}
.sdb-toolbar__chip-icon {
    flex: none;
}
.sdb-toolbar__chip--standort {
    background-color: var(--sdb-akzent-leise, #FFFDE6);
    border-color: var(--sdb-akzent-rahmen, #8C8200);
    color: var(--sdb-text-primaer, #111827);
}
.sdb-toolbar__chip--global {
    background-color: var(--sdb-info-flaeche, #EFF6FF);
    color: var(--sdb-info-text, #1E40AF);
}
.sdb-toolbar__chip--gesamt {
    background-color: var(--sdb-warnung-flaeche, #FFFBEB);
    color: var(--sdb-warnung-text, #92400E);
}

/* Aktionen: ab 640 px rechts neben dem Titel. Unter 640 px siehe unten. */
.sdb-toolbar__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sdb-abstand-2, 8px);
    flex: 1 1 100%;
    min-width: 0;
    position: relative;
}
/* Huelle um den Slot `hauptaktion`: nur Haken fuer die mobile Anordnung,
   selbst ohne Kasten (die Hauptaktion ist direktes Flex-Element). */
.sdb-toolbar__haupt {
    display: contents;
}
/* WP-09: Huelle um die Slots `aktionen` + `menue` (sekundaere Aktionen,
   Hinweis, Exportmenue); Bezugsrahmen fuer das Menue unter 640 px. */
.sdb-toolbar__sekundaer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sdb-abstand-2, 8px);
    min-width: 0;
}
.sdb-toolbar__hinweis {
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    color: var(--sdb-warnung-text, #92400E);
}
.sdb-toolbar__suche {
    min-width: 0;
}
@media (min-width: 640px) {
    .sdb-toolbar__aktionen {
        flex: 0 1 auto;
        justify-content: flex-end;
        position: static;
    }
}
/* Unter 640 px (WP-09, ersetzt die order-Anordnung aus WP-05b): der Kopf
   steht als Spalte in DOM-Reihenfolge, nichts wird umsortiert:
     1  Titel + Geltungs-Chip (eine Zeile, bei Platzmangel umbrechend)
     2  Untertitel-Absatz: Geltungssatz + Erklaersatz (Fliesstext)
     3  Aktionszeile, linksbuendig: sekundaere Aktionen + Menue (nur Icon,
        `label-ab="sm"`), dann die Hauptaktion (mit Text; bricht bei
        Platzmangel in eine eigene Zeile um). Ein Readonly-Hinweis steht
        in voller Breite ueber dem Menue.
   DOM-Reihenfolge = Tab-Reihenfolge = sichtbare Reihenfolge. */
@media (max-width: 639.98px) {
    .sdb-toolbar__zeile {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sdb-abstand-2, 8px);
    }
    .sdb-toolbar__kopf {
        flex: none;
    }
    .sdb-toolbar__aktionen {
        flex: none;
        justify-content: flex-start;
    }
    .sdb-toolbar__sekundaer {
        position: relative;
    }
    .sdb-toolbar__sekundaer > .sdb-toolbar__hinweis {
        flex: 1 1 100%;
    }
}

/* WP-09b (Pruefbefund B-1): "Was ist das?" klappt unter 640 px den Erklaersatz
   auf (sdb-toolbar.js). Die Schaltflaeche steht im Fliesstext hinter dem
   Geltungssatz. Trefferflaeche bleibt 44 px hoch (Touch-Regel von sdb-button);
   die negativen Blockraender halten nur die ZEILE niedrig (Zeilenkasten ca.
   28 px statt 44 px), die Flaeche ragt je 8 px in den Zeilenabstand bzw. in
   den Abstand zur Titelzeile/Aktionszeile (beide >= 4 px, nichts Bedienbares
   ueberlappt sich). Der Pfeil dreht sich im geoeffneten Zustand. */
.sdb-toolbar__erklaer-knopf {
    margin-block: -8px;
    vertical-align: baseline;
    font-weight: 500;
}
.sdb-toolbar__erklaer-knopf[aria-expanded="true"] > .sdb-icon:last-child {
    transform: rotate(180deg);
}
/* WP-09b: unter 360 px kompakte Aktionszeile, damit die Hauptaktion neben dem
   Exportsymbol bleibt: Abstand 8 -> 4 px, seitliches Polster der Hauptaktion
   16 -> 8 px, Abstand Icon/Text 8 -> 4 px (zusammen 24 px; dazu das um 4 px
   je Seite kleinere Polster des Kopfes in kopf.blade.php). Hoehe 44 px bleibt
   (Touch-Regel). Bricht die Zeile trotzdem um, steht die Hauptaktion darunter
   wie bisher (flex-wrap). */
@media (max-width: 359.98px) {
    .sdb-toolbar__aktionen {
        gap: var(--sdb-abstand-1, 4px);
    }
    .sdb-toolbar__haupt > .sdb-button {
        --sdb-button-polster: var(--sdb-abstand-2, 8px);
        gap: var(--sdb-abstand-1, 4px);
    }
}

/* WP-09c: Hauptaktion mit Kurztext. Das Markup traegt zwei Spans: den ganzen
   Namen (`__haupt-lang`) und die Kurzform (`__haupt-kurz`, aria-hidden); der
   zugaengliche Name steht per aria-label am Button und bleibt der ganze Name.
   Ab 400 px ist der ganze Name sichtbar, darunter nur die Kurzform (sichtbarer
   Text ist Teil des Namens, WCAG 2.5.3). Schwelle gemessen: "Stammschule
   hinzufuegen" (242 px) + Import + Export + 2 x 8 px Abstand = 346 px passen
   erst ab 394 px Viewport (Kopfpolster 12 px je Seite) in eine Zeile. */
.sdb-toolbar__haupt-kurz {
    display: none;
}
@media (max-width: 399.98px) {
    .sdb-toolbar__haupt-lang {
        display: none;
    }
    .sdb-toolbar__haupt-kurz {
        display: inline;
    }
}

/* Brotkrumen */
.sdb-toolbar__krumenliste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sdb-abstand-1, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--sdb-schrift-klein, 14px);
    color: var(--sdb-text-sekundaer, #4B5563);
}
.sdb-toolbar__krume {
    display: inline-flex;
    align-items: center;
    gap: var(--sdb-abstand-1, 4px);
}
.sdb-toolbar__krume > [aria-current="page"] {
    color: var(--sdb-text-primaer, #111827);
    font-weight: 600;
}
.sdb-toolbar__krumenlink {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.sdb-toolbar__krumenlink:hover {
    text-decoration-thickness: 2px;
}
.sdb-toolbar__krumentrenner {
    flex: none;
}

/* Menue */
.sdb-menue {
    position: relative;
    display: inline-flex;
}
.sdb-menue__liste {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--sdb-z-kopf, 40);
    margin-top: var(--sdb-abstand-1, 4px);
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: 100%;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: var(--sdb-abstand-1, 4px) 0;
    background-color: var(--sdb-flaeche-erhoben, #FFFFFF);
    color: var(--sdb-text-primaer, #111827);
    border: 1px solid var(--sdb-rahmen-stark, #6B7280);
    border-radius: var(--sdb-radius-m, 2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.sdb-menue__eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--sdb-abstand-2, 8px);
    width: 100%;
    min-height: var(--sdb-hoehe-control-l, 44px);
    padding: var(--sdb-abstand-2, 8px) var(--sdb-abstand-3, 12px);
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--sdb-schrift-klein, 14px);
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.sdb-menue__eintrag:hover {
    background-color: var(--sdb-flaeche-leise, #F3F4F6);
}
.sdb-menue__eintrag:disabled {
    cursor: not-allowed;
    color: var(--sdb-text-tertiaer, #5F6775);
}
.sdb-menue__icon {
    flex: none;
    margin-top: 1px;
}
.sdb-menue__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sdb-menue__label {
    font-weight: 600;
}
.sdb-menue__hinweis {
    font-size: var(--sdb-schrift-mini, 12px);
    color: var(--sdb-text-sekundaer, #4B5563);
}
@media (max-width: 639.98px) {
    /* Schmal, in der Toolbar (WP-09; vorher WP-05b rechtsbuendig): Die
       sekundaeren Aktionen stehen links in der Aktionszeile. Das Menue
       oeffnet deshalb an der Huelle `.sdb-toolbar__sekundaer` (Bezugsrahmen,
       `.sdb-menue` dort `static`) linksbuendig direkt unter dem Ausloeser
       (der immer das letzte Element der Huelle ist); die Breite ist auf den
       Viewport minus Rand begrenzt (3rem = Seitenrand + Kartenrand/-polster
       beider Seiten) und laeuft nicht aus dem Bild. Der umgebende
       Admin-Bereich beschneidet unter 1024 px nicht (kein overflow-hidden,
       B-3), eine lange Liste verlaengert den scrollbaren Bereich. */
    .sdb-toolbar__sekundaer .sdb-menue {
        position: static;
    }
    .sdb-toolbar__sekundaer .sdb-menue__liste {
        left: 0;
        right: auto;
        width: max-content;
        max-width: min(22rem, calc(100vw - 3rem));
    }
}
/* WP-09: oeffnet nach oben, wenn unter dem Ausloeser kein Platz ist (sdb-menue misst). */
.sdb-menue__liste.sdb-menue__liste--oben {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--sdb-abstand-1, 4px);
}
@media (min-width: 640px) {
    .sdb-menue__liste--rechts {
        left: auto;
        right: 0;
    }
}


/* ============================================================================
   sdb-tabelle (WP-06, Befunde UX-05, UX-07, UX-09, UX-13, UX-20)
   Kopf: Suche + Filter + Trefferzahl. Tabelle ab 640 px, darunter Karten
   (Umschaltung per matchMedia in sdb-tabelle.js, nicht per doppeltem DOM).
   Zeilen mindestens 48 px (--sdb-hoehe-tabellenzeile), Kopf auf
   --sdb-flaeche-leise mit --sdb-text-sekundaer-kontrast (9,37 / 6,94:1),
   "Nicht hinterlegt" in --sdb-text-sekundaer (7,56 / 9,89:1 auf flaeche),
   Hover --sdb-flaeche-hover (CD-Gelb-Tint). Kein Zebra: Zeilen trennt eine
   dezente Linie. Sie nimmt --sdb-rahmen-feld (1,47 / 1,94:1), nicht
   --sdb-rahmen: der faellt im Dunkelmodus mit der Flaeche zusammen (1,00:1),
   Zeilen und Karten waeren dort nicht mehr abgegrenzt (im Browser gesehen).
   Bedeutung traegt die Linie nicht.
   FOKUS: nur .sdb-fokus. Der Rahmen um die Tabelle (overflow-x: auto fuer
   sehr schmale Desktopfenster) hat 6 px Innenabstand, damit der 3-px-Ring mit
   2 px Abstand an den Randzellen nicht abgeschnitten wird.
   WP-10: Datenzellen brechen notfalls auch innerhalb langer Woerter
   (overflow-wrap: anywhere, Silbentrennung per lang="de"), damit die
   Mindestbreite der Tabelle nicht ueber den Rahmen waechst - bei 768/1024 px
   scrollte die Stammschulen-Tabelle sonst 23 px seitlich und schnitt die
   Aktionen an (Pruefbefund WP-05b B-5). Kopf- und Aktionszellen bleiben
   nowrap. Unter 640 px: Filter hinter dem Schalter "Filter (n aktiv)"
   (B-2); Kartentitel mit 44-px-Trefferflaeche per ::after statt
   Polster/Negativrand, damit der Fokusring den Untertitel nicht ueberdeckt (B-4).
   ========================================================================= */

.sdb-tabelle {
    display: flex;
    flex-direction: column;
    gap: var(--sdb-abstand-3, 12px);
    min-width: 0;
    color: var(--sdb-text-primaer, #111827);
}

/* ---- Kopf: Suche, Filter, Trefferzahl ---------------------------------- */
.sdb-tabelle__kopf {
    display: flex;
    flex-direction: column;
    gap: var(--sdb-abstand-2, 8px);
    min-width: 0;
}
.sdb-tabelle__steuerung {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sdb-abstand-3, 12px);
    min-width: 0;
}
.sdb-tabelle__suche {
    position: relative;
    flex: 1 1 18rem;
    min-width: 0;
}
.sdb-tabelle__suchicon {
    position: absolute;
    left: var(--sdb-abstand-3, 12px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--sdb-text-sekundaer, #4B5563);
    pointer-events: none;
    z-index: 1;
}
.sdb-tabelle__suche .sdb-feld__steuer {
    padding-left: 40px;
    padding-right: 44px;
}
/* Eigener Leeren-Button statt des Browser-X (sonst zwei X im Feld). */
/* Ohne Eingabe gibt es keinen Leeren-Button: der Platzhalter bekommt die Breite. */
.sdb-tabelle__suche .sdb-feld__steuer:placeholder-shown {
    padding-right: var(--sdb-abstand-3, 12px);
}
.sdb-tabelle__suche .sdb-feld__steuer::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.sdb-tabelle__suchleeren {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
}
.sdb-tabelle__filter {
    flex: 1 1 12rem;
    min-width: 0;
}
.sdb-tabelle__bilanz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdb-abstand-2, 8px);
    min-height: var(--sdb-hoehe-control-m, 40px);
}
.sdb-tabelle__bilanzaktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sdb-abstand-2, 8px);
    margin-left: auto;
}
/* Mobile Filter (< 640 px, nur gerendert, wenn der Baustein schmal ist):
   zweispaltig, sobald zwei Felder mit je 9 rem passen, sonst untereinander. */
.sdb-tabelle__filterbereich {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    align-items: end;
    gap: var(--sdb-abstand-2, 8px) var(--sdb-abstand-3, 12px);
    min-width: 0;
}
.sdb-tabelle__filterbereich[hidden] {
    display: none;
}
.sdb-tabelle__treffer {
    margin: 0;
    font-size: var(--sdb-schrift-klein, 14px);
    font-weight: 600;
    color: var(--sdb-text-sekundaer-kontrast, #374151);
}

/* ---- Tabelle ----------------------------------------------------------- */
.sdb-tabelle__rahmen {
    overflow-x: auto;
    padding: 0 6px 6px;
    margin: 0 -6px;
}
.sdb-tabelle__tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sdb-schrift-klein, 14px);
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
}
/* Zugaenglicher Name der Tabelle, visuell verborgen (wie sr-only). */
.sdb-tabelle__titel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sdb-tabelle__kopfzelle {
    height: var(--sdb-hoehe-control-m, 40px);
    padding: 0 var(--sdb-abstand-3, 12px);
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sdb-text-sekundaer-kontrast, #374151);
    background-color: var(--sdb-flaeche-leise, #F3F4F6);
    border-bottom: 1px solid var(--sdb-rahmen-feld, #D1D5DB);
}
.sdb-tabelle__sortknopf {
    display: inline-flex;
    align-items: center;
    gap: var(--sdb-abstand-1, 4px);
    min-height: 32px;
    margin: 0 calc(-1 * var(--sdb-abstand-2, 8px));
    padding: 0 var(--sdb-abstand-2, 8px);
    border: 0;
    border-radius: var(--sdb-radius-m, 2px);
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}
.sdb-tabelle__sortknopf:hover {
    background-color: var(--sdb-flaeche-hover, rgba(255, 237, 0, 0.12));
    color: var(--sdb-text-primaer, #111827);
}
.sdb-tabelle__sorticon {
    flex: none;
    color: var(--sdb-text-sekundaer, #4B5563);
}
.sdb-tabelle__sorticon--aktiv {
    color: var(--sdb-text-primaer, #111827);
}
.sdb-tabelle__zelle {
    height: var(--sdb-hoehe-tabellenzeile, 48px);
    padding: var(--sdb-abstand-1, 4px) var(--sdb-abstand-3, 12px);
    text-align: left;
    vertical-align: middle;
    font-weight: 400;
    color: var(--sdb-text-primaer, #111827);
    border-bottom: 1px solid var(--sdb-rahmen-feld, #D1D5DB);
    overflow-wrap: anywhere;
    hyphens: auto;
}
.sdb-tabelle__zelle--rechts {
    text-align: right;
}
.sdb-tabelle__zelle--mitte {
    text-align: center;
}
.sdb-tabelle__titelzelle {
    font-weight: 600;
}
.sdb-tabelle__zeile:hover > .sdb-tabelle__zelle {
    background-color: var(--sdb-flaeche-hover, rgba(255, 237, 0, 0.12));
}
.sdb-tabelle__aktionszelle {
    width: 1%;
    white-space: nowrap;
}
.sdb-tabelle__aktionen {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sdb-abstand-1, 4px);
}
.sdb-tabelle__gruppentitel {
    margin: 0;
    padding: var(--sdb-abstand-2, 8px) var(--sdb-abstand-3, 12px);
    text-align: left;
    font-size: var(--sdb-schrift-klein, 14px);
    font-weight: 600;
    color: var(--sdb-text-primaer, #111827);
    background-color: var(--sdb-flaeche-leise, #F3F4F6);
}

/* Name als echter Link/Button (UX-09) - sieht aus wie Text mit Unterstreichung. */
.sdb-tabelle__link {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--sdb-text-primaer, #111827);
    text-decoration: underline;
    text-decoration-color: var(--sdb-rahmen-stark, #6B7280);
    text-underline-offset: 3px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.sdb-tabelle__link:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

/* Leere Werte: "Nicht hinterlegt", dezent, aber >= 4,5:1. */
.sdb-tabelle__leer {
    font-weight: 400;
    font-style: italic;
    color: var(--sdb-text-sekundaer, #4B5563);
}

/* ---- Karten (< 640 px) -------------------------------------------------- */
.sdb-tabelle__karten {
    display: flex;
    flex-direction: column;
    gap: var(--sdb-abstand-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sdb-tabelle__karte {
    display: flex;
    align-items: flex-start;
    gap: var(--sdb-abstand-2, 8px);
    padding: var(--sdb-abstand-3, 12px);
    background-color: var(--sdb-flaeche, #FFFFFF);
    border: 1px solid var(--sdb-rahmen-feld, #D1D5DB);
    border-radius: var(--sdb-radius-m, 2px);
    min-width: 0;
}
.sdb-tabelle__kartengruppe {
    list-style: none;
}
.sdb-tabelle__karteninhalt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sdb-abstand-1, 4px);
}
.sdb-tabelle__kartentitel {
    margin: 0;
    font-size: var(--sdb-schrift-basis, 16px);
    font-weight: 600;
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    overflow-wrap: anywhere;
}
.sdb-tabelle__kartentitel .sdb-tabelle__link {
    position: relative;
    display: inline-block;
}
/* Trefferflaeche mindestens 44 px hoch, ohne die Box (und damit den
   Fokusring) zu vergroessern: der Ring liegt eng um den Titel. */
.sdb-tabelle__kartentitel .sdb-tabelle__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(100%, var(--sdb-hoehe-control-l, 44px));
    transform: translateY(-50%);
}
.sdb-tabelle__untertitel {
    margin: 0;
    font-size: var(--sdb-schrift-klein, 14px);
    color: var(--sdb-text-sekundaer-kontrast, #374151);
    overflow-wrap: anywhere;
}
.sdb-tabelle__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sdb-abstand-4, 16px);
    margin: 0;
    font-size: var(--sdb-schrift-klein, 14px);
}
.sdb-tabelle__metapaar {
    display: flex;
    gap: var(--sdb-abstand-1, 4px);
    min-width: 0;
}
.sdb-tabelle__metalabel {
    color: var(--sdb-text-sekundaer, #4B5563);
}
.sdb-tabelle__metalabel::after {
    content: ":";
}
.sdb-tabelle__metawert {
    margin: 0;
    color: var(--sdb-text-primaer, #111827);
    overflow-wrap: anywhere;
}
.sdb-tabelle__kartenaktionen {
    flex: none;
    display: flex;
    gap: var(--sdb-abstand-1, 4px);
}

/* ---- Seitennavigation (WP-16, UX-08, Entscheidung 28) -------------------
   <nav> unter Tabelle bzw. Karten. Aktive Seite: aria-current="page" und
   zusaetzlich sichtbar ueber Flaeche --sdb-akzent-leise + 2-px-Rahmen
   --sdb-text-primaer (Farbe nie allein). Knoepfe 40 px, unter 640 px bzw.
   grobem Zeiger 44 px (Touch-Regel). "Zurueck"/"Weiter" am Rand bleiben
   fokussierbar (aria-disabled statt disabled), damit der Fokus beim
   Blaettern nicht verloren geht. Zeile bricht um, nie Seiten-Scroll. */
.sdb-tabelle__seiten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sdb-abstand-2, 8px) var(--sdb-abstand-3, 12px);
}
.sdb-tabelle__seitenbereich {
    margin: 0;
    font-size: var(--sdb-schrift-klein, 14px);
    color: var(--sdb-text-sekundaer-kontrast, #374151);
}
.sdb-tabelle__seitenliste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sdb-abstand-1, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sdb-tabelle__seitenknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sdb-abstand-1, 4px);
    min-width: var(--sdb-hoehe-control-m, 40px);
    min-height: var(--sdb-hoehe-control-m, 40px);
    padding: 0 var(--sdb-abstand-2, 8px);
    border: 1px solid var(--sdb-rahmen-stark, #6B7280);
    border-radius: var(--sdb-radius-m, 2px);
    background-color: var(--sdb-flaeche, #FFFFFF);
    font: inherit;
    font-size: var(--sdb-schrift-klein, 14px);
    font-weight: 600;
    color: var(--sdb-text-primaer, #111827);
    cursor: pointer;
}
.sdb-tabelle__seitenknopf:hover {
    background-color: var(--sdb-flaeche-hover, rgba(255, 237, 0, 0.12));
}
.sdb-tabelle__seitenknopf[aria-current="page"] {
    background-color: var(--sdb-akzent-leise, #FFFDE6);
    border: 2px solid var(--sdb-text-primaer, #111827);
}
.sdb-tabelle__seitenknopf[aria-disabled="true"] {
    color: var(--sdb-text-tertiaer, #5F6775);
    background-color: var(--sdb-flaeche-leise, #F3F4F6);
    border-color: var(--sdb-rahmen-feld, #D1D5DB);
    cursor: default;
}
.sdb-tabelle__seitenluecke {
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
    color: var(--sdb-text-sekundaer, #4B5563);
}
@media (max-width: 639.98px), (pointer: coarse) {
    .sdb-tabelle__seitenknopf {
        min-width: var(--sdb-hoehe-control-l, 44px);
        min-height: var(--sdb-hoehe-control-l, 44px);
    }
}


/* ============================================================================
   Header und Hauptnavigation (WP-07, Befunde UX-01, UX-08)
   Dokumentation: docs/redesign/bausteine.md, Abschnitt "Header/Navigation".

   Ursache von UX-01 war eine nicht umbrechende Flex-Zeile (h-16, justify-
   between) ohne schrumpfendes Kind; der Ueberhang wurde von overflow:hidden
   der App-Shell verschluckt. Jetzt ein Grid mit zwei Anordnungen:
     < 1024 px   Zeile 1: Menue-Button | Titel (schrumpft) | Aktionen
                 Zeile 2: Standort (Label + Auswahl, volle Breite)
     >= 1024 px  eine Zeile: Titel | Standort | (frei) | Aktionen
   Die DOM-Reihenfolge (Menue, Titel, Standort, Aktionen) ist die
   Lesereihenfolge des Desktops. Nichts wird mit overflow:hidden kaschiert:
   jedes Kind darf schrumpfen (min-width:0) und der Titel bricht notfalls um.
   ========================================================================= */

.sdb-header {
    position: relative;
    z-index: var(--sdb-z-kopf, 40);
    background-color: var(--sdb-flaeche, #FFFFFF);
    color: var(--sdb-text-primaer, #111827);
    border-bottom: 1px solid var(--sdb-rahmen, #E9EBEE);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.sdb-header__innen {
    box-sizing: border-box;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: var(--sdb-abstand-2, 8px) var(--sdb-abstand-3, 12px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "menue titel aktionen"
        "standort standort standort";
    align-items: center;
    gap: var(--sdb-abstand-2, 8px) var(--sdb-abstand-1, 4px);
}
.sdb-header__menue {
    grid-area: menue;
}
.sdb-header__titel {
    grid-area: titel;
    min-width: 0;
    margin: 0;
    font-size: var(--sdb-schrift-basis, 16px);
    font-weight: 600;
    line-height: var(--sdb-zeilenhoehe-eng, 1.3);
    color: var(--sdb-text-primaer, #111827);
    cursor: pointer;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.sdb-header__standort {
    grid-area: standort;
    display: flex;
    align-items: center;
    gap: var(--sdb-abstand-2, 8px);
    min-width: 0;
}
.sdb-header__standort-label {
    flex: none;
    font-size: var(--sdb-schrift-klein, 14px);
    font-weight: 600;
    color: var(--sdb-text-sekundaer, #4B5563);
}
.sdb-header__standort-auswahl {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 28rem;
}
.sdb-header__aktionen {
    grid-area: aktionen;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sdb-abstand-1, 4px);
    min-width: 0;
}
/* Kontomenue: die Liste haengt rechtsbuendig am Ausloeser - in jeder Breite,
   sonst liefe sie am rechten Bildrand hinaus. */
.sdb-header__konto .sdb-menue__liste {
    left: auto;
    right: 0;
}
/* Kopfzeile des Kontomenues (deaktivierter Eintrag): Information, keine
   Aktion - deshalb kein Sperr-Cursor und Primaertext statt Tertiaertext. */
.sdb-header__konto .sdb-menue__eintrag:disabled {
    cursor: default;
    color: var(--sdb-text-primaer, #111827);
}
/* Wort-Bild-Marke: immer auf Weiss (CD), nachrangig - erst ab 640 px. */
.sdb-header__marke {
    display: none;
}
.sdb-header__marke-flaeche {
    background-color: #FFFFFF;
    padding: var(--sdb-abstand-1, 4px) var(--sdb-abstand-2, 8px);
}
.sdb-header__logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 10rem;
}

/* Unter 640 px: Konto nur als Icon (Name bleibt fuer Hilfstechnik im
   visuell verborgenen Label - kein aria-label, das den Namen ersetzt),
   Auswahl des Standorts mit 44 px Zielhoehe. */
@media (max-width: 639.98px) {
    .sdb-header__konto .sdb-button__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .sdb-header__konto .sdb-button__label ~ svg {
        display: none;
    }
    .sdb-header__konto .sdb-button {
        width: var(--sdb-button-hoehe);
        min-width: var(--sdb-button-hoehe);
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }
}
@media (pointer: coarse), (max-width: 639.98px) {
    .sdb-header__standort-auswahl > button {
        min-height: var(--sdb-hoehe-control-l, 44px);
    }
}
/* Fokusring des Standortwaehlers (WP-07b, Pruefbefund WP-07 B-2): Die Bestandsklasse
   `focus:ring-2 focus:ring-primary-500` der such-auswahl malt Gelb auf die weisse
   Kopfflaeche (rund 1,2:1). Hier dasselbe Muster wie `.sdb-fokus`: 3 px Ring in
   --sdb-fokus-ring plus Gegenring im Abstand. Bewusst auf :focus (nicht nur
   :focus-visible): nach Mausklick und Fokusrueckgabe aus der Liste soll nie der gelbe
   Tailwind-Ring allein stehen. Nur Kopf-Kontext; such-auswahl bleibt unveraendert. */
.sdb-header__standort-auswahl > button:focus {
    outline: var(--sdb-fokus-breite, 3px) solid var(--sdb-fokus-ring, #111827) !important;
    outline-offset: var(--sdb-fokus-abstand, 2px) !important;
    box-shadow: 0 0 0 var(--sdb-fokus-abstand, 2px) var(--sdb-fokus-ring-kontrast, #FFFFFF) !important;
}
@media (min-width: 640px) {
    .sdb-header__innen {
        padding-left: var(--sdb-abstand-6, 24px);
        padding-right: var(--sdb-abstand-6, 24px);
        column-gap: var(--sdb-abstand-2, 8px);
    }
    .sdb-header__titel {
        font-size: 18px;
    }
    .sdb-header__marke {
        display: block;
        margin-left: var(--sdb-abstand-1, 4px);
        padding-left: var(--sdb-abstand-3, 12px);
        border-left: 1px solid var(--sdb-rahmen, #E9EBEE);
    }
}
/* WP-23 (WP-05b B-6): Querformat am kleinen Handy (z. B. 568 x 320; ab 640 px Breite bleibt der Kopf zweizeilig, dort fehlt der Platz). Der Standortwaehler rueckt in die erste Zeile,
   der Kopf wird einzeilig statt 116 px hoch; der Arbeitsbereich gewinnt rund 55 px. */
@media (orientation: landscape) and (max-height: 430px) and (max-width: 639.98px) {
    .sdb-header__innen {
        grid-template-columns: auto minmax(0, 1fr) minmax(7rem, 14rem) auto;
        grid-template-areas: "menue titel standort aktionen";
        padding-top: var(--sdb-abstand-1, 4px);
        padding-bottom: var(--sdb-abstand-1, 4px);
    }
}
@media (min-width: 1024px) {
    .sdb-header__innen {
        min-height: 64px;
        padding-left: var(--sdb-abstand-8, 32px);
        padding-right: var(--sdb-abstand-8, 32px);
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas: "titel standort . aktionen";
        column-gap: var(--sdb-abstand-4, 16px);
    }
    .sdb-header__menue {
        display: none;
    }
    .sdb-header__standort-auswahl {
        flex: none;
        width: 14rem;
    }
}

/* ---- Hauptnavigation --------------------------------------------------------
   >= 1024 px: Reiterleiste wie bisher (Flaeche, Rahmen, aktiver Reiter CD-Gelb).
   <  1024 px: Panel unter dem Header, nur sichtbar mit .sdb-nav--offen; der
   Menue-Button (#sdb-nav-schalter) steuert es (aria-expanded/aria-controls).
   Aktiv = aria-current="page": Gelb PLUS Rahmen PLUS Schriftstaerke, weil die
   gelbe Flaeche gegen Weiss nur 1,51:1 erreicht (Farbe nie allein).          */

.sdb-nav {
    display: none;
    flex-shrink: 0;
    margin-bottom: var(--sdb-abstand-4, 16px);
    padding: var(--sdb-abstand-1, 4px);
    background-color: var(--sdb-flaeche, #FFFFFF);
    border: 1px solid var(--sdb-rahmen, #E9EBEE);
    border-radius: var(--sdb-radius-m, 2px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.sdb-nav--offen {
    display: block;
}
.sdb-nav__liste {
    display: flex;
    flex-direction: column;
    gap: var(--sdb-abstand-1, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.sdb-nav__eintrag {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--sdb-abstand-2, 8px);
    width: 100%;
    min-height: var(--sdb-hoehe-control-l, 44px);
    padding: 0 var(--sdb-abstand-4, 16px);
    border: 1px solid transparent;
    border-radius: var(--sdb-radius-m, 2px);
    background-color: transparent;
    color: var(--sdb-text-sekundaer, #4B5563);
    font: inherit;
    font-size: var(--sdb-schrift-klein, 14px);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sdb-motion-kurz, 0.15s) var(--sdb-motion-kurve, ease),
                color var(--sdb-motion-kurz, 0.15s) var(--sdb-motion-kurve, ease);
}
.sdb-nav__eintrag:hover {
    background-color: var(--sdb-flaeche-leise, #F3F4F6);
    color: var(--sdb-text-primaer, #111827);
}
.sdb-nav__eintrag[aria-current="page"] {
    background-color: var(--sdb-akzent, #E6D500);
    border-color: var(--sdb-akzent-rahmen, #8C8200);
    color: var(--sdb-text-auf-akzent, #000000);
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .sdb-nav__eintrag {
        transition-duration: 0.01ms;
    }
}
@media (min-width: 1024px) {
    .sdb-nav,
    .sdb-nav--offen {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin-bottom: var(--sdb-abstand-6, 24px);
    }
    .sdb-nav__liste {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .sdb-nav__eintrag {
        width: auto;
        min-height: var(--sdb-hoehe-control-m, 40px);
    }
}
@media (pointer: coarse) and (min-width: 1024px) {
    .sdb-nav__eintrag {
        min-height: var(--sdb-hoehe-control-l, 44px);
    }
}


/* ============================================================================
   sdb-hinweis (WP-12, Befund UX-17)
   Zustandshinweis ueber einer Liste (role="status"), Token-Farben der Warnung.
   ========================================================================= */
.sdb-hinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--sdb-warnung-rahmen);
    border-radius: 0.375rem;
    background: var(--sdb-warnung-flaeche);
    color: var(--sdb-warnung-text);
    font-size: 0.875rem;
    line-height: 1.4;
}
.sdb-hinweis__aktion {
    min-height: var(--sdb-hoehe-control-m, 40px);
    padding: 0 0.5rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.sdb-hinweis__aktion:hover { text-decoration-thickness: 2px; }
.sdb-hinweis__aktion:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* ============================================================================
   sdb-ankuendigung (Ankündigungen-Banner unter dem Kopf)
   Info-Token-Farben, Text umbrechend, Touchfläche 44 px.
   ========================================================================= */
.sdb-ankuendigungen { flex-shrink: 0; max-height: 40dvh; overflow-y: auto; }
.sdb-ankuendigung {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--sdb-info-rahmen);
    background: var(--sdb-info-flaeche);
    color: var(--sdb-info-text);
    font-size: 0.875rem;
    line-height: 1.4;
}
.sdb-ankuendigung__inhalt { flex: 1 1 16rem; min-width: 0; padding-block: 0.5rem; }
.sdb-ankuendigung__titel { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.sdb-ankuendigung__text { margin: 0.125rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.sdb-ankuendigung__text--gekuerzt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sdb-ankuendigung__mehr {
    display: inline-block;
    min-height: 44px;
    margin-top: 0.125rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}
.sdb-ankuendigung__mehr:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sdb-ankuendigung__schliessen {
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.75rem;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.sdb-ankuendigung__schliessen:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.sdb-ankuendigung__schliessen:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* WP-18: Schülerliste (Tabellenkopf, Karten, Chips) */
.sdb-schuelerliste__scroll { scroll-padding-top: 48px; }
@media (min-width: 1024px) {
    .sdb-schuelerliste__kopf { position: sticky; top: 0; z-index: 2; background-color: var(--sdb-flaeche-leise, #F3F4F6); }
}
.sdb-schuelerliste__karten-bereich { padding: var(--sdb-abstand-3, 12px); display: flex; flex-direction: column; gap: var(--sdb-abstand-3, 12px); }
.sdb-schuelerliste__mobilsortierung { display: flex; gap: var(--sdb-abstand-2, 8px); align-items: center; }
.sdb-schuelerliste__richtung { min-height: 44px; padding: 0 var(--sdb-abstand-3, 12px); border: 1px solid var(--sdb-rahmen-stark, #6B7280); border-radius: var(--sdb-radius-m, 2px); background: var(--sdb-flaeche, #fff); font: inherit; font-weight: 600; white-space: nowrap; color: var(--sdb-text-primaer, #111827); }
.sdb-schuelerliste__haken { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px 0 -10px -10px; }
.sdb-schuelerliste__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 12px; border: 1px solid var(--sdb-rahmen-stark, #6B7280); border-radius: 999px; background: var(--sdb-flaeche, #fff); font-size: var(--sdb-schrift-klein, 14px); color: var(--sdb-text-primaer, #111827); }
.sdb-schuelerliste__chipentfernen { min-width: 32px; min-height: 32px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; color: inherit; }
.sdb-schuelerliste__chipalle { min-height: 32px; border: 0; background: transparent; text-decoration: underline; font: inherit; font-size: var(--sdb-schrift-klein, 14px); font-weight: 600; cursor: pointer; color: var(--sdb-text-primaer, #111827); }
.sdb-schuelerliste__scroll .sdb-tabelle__link { overflow-wrap: normal; word-break: normal; }

/* WP-23: Visuell verborgen, fuer Hilfstechnik vorhanden (dauerhafte Live-Region der Tabelle u. a.). */
.sdb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* WP-23: Seitentitel als Link zur Schuelerliste, sieht aus wie bisher die Ueberschrift. */
.sdb-header__titel-link {
    color: inherit;
    text-decoration: none;
}
.sdb-header__titel-link:hover {
    text-decoration: underline;
}