/*
 * app/public/css/blue-ice.css – Blue Ice für EventDB
 * Version:  2.8-ev44
 * Geändert: 2026-10-27
 * Änderung: 2.8-ev44: Deploy #67: .index-marke gleich breit (min-width 6,5em, zentriert).
 *           Bisher 2.8-ev43: Deploy #65: .zeilennummer („#“-Spalte der Listen), Menüleiste einklappbar (.nav-einklappen, .menue-schmal), Schloss in der Marke der Login-Sperre (.badge svg).
 *           Bisher 2.8-ev42: Regeln .tabellenmenue .fx und .m-link entfallen (die Platzhalter f(x) und „Bedingte Formatierung“ im Spaltenmenü sind entfernt).
 *           Bisher 2.8-ev41: S1 Scroll-Sperre: html:has(.modal-overlay.open) sperrt die Seite hinter offenen Fenstern (mit scrollbar-gutter), overscroll-behavior: contain an .modal-overlay und .modal-inhalt.
 *           Bisher 2.8-ev40: D4/B1 Sofort-Speichern: .feld-status (Statuszeile unter dem Feld: speichert, gespeichert, fehler, konflikt; Wort und Symbol, Kontrast ≥ 4,5:1 hell und dunkel) und .fehler-feld (ungültiger Wert bleibt rot stehen); nur bestehende Variablen.
 *           Bisher 2.8-ev39: D2: .index-marke (B6, ganze Marke in der Indexfarbe gefüllt, Redlist kräftiger rot), .liste-je-oben (B5), .scroll-block/.scroll-leiste/.scroll-spur/.scroll-daumen (B9, Scrollleiste am Fensterrand).
 *           Bisher 2.8-ev38: .zug-protokoll (Ablauffeld zur Fehlersuche) wieder entfernt.
 *           Bisher 2.8-ev37: B8 (Rückmeldung Deploy #57): .zieh-kasten (eingefärbte Kopie der angefassten Spaltenüberschrift, folgt Maus und Finger) und .zug-protokoll (Ablauffeld zur Fehlersuche, nur mit ?zugprotokoll=1).
 *           Bisher 2.8-ev36: V30 (Mockup V30 1.2): .fortschritt, .fortschritt-text, .erklaer, .app-vorschlag, .schluessel-kasten, .gesperrt-bereich, .zeit-zeile, .zwei-spalten (geführte Ersteinrichtung), Abstand zwischen mehreren Einrichtungsformularen (.anmelde-karte form + form); statt Inline-Stilen (CSP style-src 'self').
 *           Bisher 2.8-ev35: V13 Paket B / Teil B2b (Mockup M5b v2.1): .fakt-name, Abstände im Dialog „Bitte bestätige dich noch einmal“, Knöpfe im Hinweisstreifen, Links als Knöpfe ohne Unterstreichung.
 *           Bisher 2.8-ev34: Sichtprüfung B2: .meldungen-karte (Hinweisstreifen der Seite Zweiter Faktor auf Kartenbreite, max. 900 px wie .formular-spalte).
 *           Bisher 2.8-ev33: V13 Paket B / Teil B2 (Mockups M2 und M5, freigegeben 12.10.2026): .qr-box (QR-Code der Authenticator-App), .geheimnis, .wh-liste (Wiederherstellungscodes),
 *           .aktionen-zeile, .wh-haken, .wh-weiter, .btn-gesperrt; nur bestehende Variablen. Beim Drucken nur die Codes (Kopf, Knöpfe und Hinweise entfallen).
 *           Bisher 2.8-ev32: V27 Nachtrag 3: Knopf der LinkedIn-Suche als .icon-btn.ext-suche-knopf (Höhe 28 px, Breite nach Inhalt, Optik wie ‹ ›). Das Menü behält den Schatten
 *           --schatten-schwebend wie Spaltenmenü (.tabellenmenue), Spaltenwahl (.spaltenwahl) und Gespeicherte Suchen (.suchen-pop).
 *           Bisher 2.8-ev31: V27 Knopf mit Menü im Personen-Fenster (.ext-suche*), nur bestehende Variablen.
 *           Bisher 2.8-ev30: V13 Zwei-Faktor-Anmeldung: .checkliste (Voraussetzungen der Modulkarte), .modul-feld, .schritt-liste; nur bestehende Variablen.
 *           Bisher 2.8-ev29: Bearbeitungshinweis ganz rot (Variante 3 aus mockups/mockup-bearbeitungshinweis-v2.html): --danger, --danger-bg, --danger-border.
 *           Bisher 2.8-ev28: „Was ist neu“ (V26): .modal-neu, .neu-*, .seiten-fuss (Modal nach der Anmeldung, Seite, Fußzeile), nur bestehende Variablen.
 *           Bisher 2.8-ev27: Rückfrage „Änderungen nicht gespeichert“ (.modal-ganz-oben, .modal-frage), nur bestehende Variablen.
 *           Bisher 2.8-ev26: V16 Bearbeitungshinweis (.bearbeitung-hinweis, Streifen unter dem Modal-Kopf, nur bestehende Variablen).
 *           Bisher 2.8-ev25: Konflikt-Rahmen auch an Knopfgruppen (fieldset.konflikt-feld, Teilnahme „Anmeldung“).
 *           Bisher 2.8-ev24: #17 Konfliktanzeige beim Speichern (.konflikt-feld, .konflikt-kasten, .konflikt-erledigt, .konflikt-marke),
 *           nur bestehende Variablen (warning/success), gilt in allen Themes und im Dunkelmodus.
 *           Bisher 2.8-ev23: TODO #14 – Schalter kurz „≈ Ähnlich“ in einer Zeile (zweizeilige Beschriftung zurückgenommen);
 *           Suchfeld bei 1280 px 166 statt 141 px, Zeilenhöhe mit und ohne Modul weiter gleich.
 *           2.8-ev22: Review Module (Mittel M1): Suchgruppe mit Schalter mit derselben Grundbreite wie ohne Modul (gleicher
 *           Umbruch, z. B. bei 1280 px sprangen „Suchen“/„Zurücksetzen“ in eine zweite Zeile); Beschriftung „Ähnliche /
 *           Schreibweisen“ zweizeilig (niedriger als das Suchfeld), damit das Feld breit genug bleibt.
 *           2.8-ev21: Personenliste – Schalter „Ähnliche Schreibweisen“ rechts neben dem Suchfeld (.such-mit-schalter),
 *           Zeilenhöhe unverändert; Seite „Module“ (.module-liste).
 *           2.8-ev20: Unscharfe Suche – Kennzeichen .badge-aehnlich, Schalter .aehnlich-schalter (Personenliste), Knopf
 *           .m-aehnlich im Spaltenmenü (aria-pressed = an).
 *           2.8-ev19: Gespeicherte Suchen nach docs/mockups/mockup-gespeicherte-suchen-v1.html – Auswahl (.suchen .wahl,
 *           .dd mit Anzahl), Leiste der aktiven Suche (.ansichtleiste, .art, .meta, .aktionen, Geändert-Pille/-Punkt),
 *           Hinweis und Chips „keine Berechtigung“, Popover (.suchen-pop, Listen mit Namenssuche, Verwalten-Menü;
 *           Bottom-Sheet bis 560 px), Dialog (.suchen-overlay/.suchen-dialog mit „Sichtbar für“ und „Wird gespeichert“),
 *           Toast; Knopf „Spalten (n)“ mit Ankreuzliste (.spaltenwahl). Farben über Blue-Ice-Variablen (warning, danger,
 *           abdunklung, schatten-schwebend), Formen wie im Mockup.
 *           Bisher 2.8-ev18: Spaltenkopf ohne touch-action: pan-y – Ziehen nur noch mit Maus/Stift, waagerechtes Wischen am
 *           Kopf scrollt die Tabelle wieder (Nacharbeit 3).
 *           Bisher 2.8-ev17: Spalten verschieben (docs/plan-tabellenansicht.md Abschnitt 14): Einfügemarke (.einfuegemarke,
 *           Akzentfarbe), gezogene Spalte halbtransparent (th.gezogen), Spaltenkopf ohne Textauswahl und mit
 *           touch-action: pan-y (waagerecht ziehen), deaktivierte Leisten-Schaltflächen („Nach links/rechts“ am Rand),
 *           .nur-vorlesen für die aria-live-Ansage.
 *           Bisher 2.8-ev16: Spaltenmenü der Erweiterten Suche mit Schatten und Eckenradius 10px wie im Mockup (.menue in
 *           docs/mockups/mockup-tabellenansicht-v3.html); Variablen --schatten-schwebend / --schatten-schwebend-oben
 *           (hell in :root, dunkel in body.dark-mode, gilt für alle drei Themes); am Handy (Bottom-Sheet) Schatten nach
 *           oben. Rahmen bleibt.
 *           Bisher 2.8-ev15: Seite „Erweiterte Suche“ nach docs/mockups/mockup-tabellenansicht-v3.html: Titelzeile, Kriterien-Chips,
 *           Tabellenrahmen mit fester Kopfzeile und Kopfzellen-Schaltflächen, Spaltenmenü (.tabellenmenue) mit Kopf, Filter,
 *           Schaltflächenleisten, Fuß, abgedunkelten Stufe-2–4-Schaltflächen (.folgt), Bottom-Sheet bis 560 px. Farben über
 *           Blue-Ice-Variablen; Blue-Ice-Formen (--radius-*) und Rahmen statt Schatten. [hidden] gewinnt gegen grid/flex.
 *           Der Block aus 2.8-ev14 (Spaltenmenü in der Personenliste) ist ersetzt.
 *           Bisher 2.8-ev14: Tabellenansicht Stufe 1 (docs/plan-tabellenansicht.md 1.1): Spaltenkopf als Menü-Auslöser
 *           (.spaltenkopf, Sortierpfeil mit Stufe, Filtermarke), Spaltenmenü (.spaltenmenue im Stil des Benutzermenüs:
 *           Abschnitte, Ankreuzliste, deaktivierte Einträge für Stufe 2–4), Chips (.tabelle-chips/.chip),
 *           Seitengröße (.tabelle-je). Nur bestehende Variablen, keine neuen Farben.
 *           Bisher 2.8-ev13: Ice On Fire Kontraste: Textverlauf hell beginnt mit #b45309 statt #d97706 (Karte ≥ 5,0:1,
 *           Seite ≥ 4,36:1 für große Titel), Akzent #b04f08 statt #b45309 (Seite 4,59:1). Vorlage nachgezogen.
 *           Bisher 2.8-ev12: Drittes Farbschema „Ice On Fire“ (:root.theme-feuer), Werte unverändert aus
 *           mockups/mockup-ice-on-fire-v3.html (Grundtöne, Glutlinie, Verläufe, Knöpfe im Logo-Verlauf mit #1a0d05).
 *           Statusfarben und Listenfarben unverändert. Testsystem-Rot bleibt auch in diesem Theme.
 *           Bisher 2.8-ev11: Dashboard-Kacheln über die volle Breite (auto-fill, mindestens 260 px; Blue Ice begrenzt
 *           .mandanten-raster auf 860 px – hier nur für .v-kacheln aufgehoben), Kopfzeile volle Breite; Änderungsverlauf.
 *           Bisher 2.8-ev10 (Klicktest 1): Veranstaltungskacheln im Dashboard (auf .mandant-kachel), Newsletteranrede mit
 *           Vorschlagsauswahl, Dublettenhinweis, Listenpflege; Klassen der früheren „Nächsten Veranstaltung“ entfernt.
 *           Bisher 2.8-ev9 (E9): Benutzer-Modal, Audit-Tabelle mit aufklappbaren Details.
 *           Bisher 2.8-ev8 (E8): Live-Suche des Dashboards, Karte „Nächste Veranstaltung“, Trefferzeilen der Suche.
 *           Bisher 2.8-ev7 (E7): Veranstaltungs-Modal, Teilnehmerliste mit Auswahl und Aktionsmenü,
 *           Hinzufügen-Dialog mit nachladender Personenliste.
 *           Bisher 2.8-ev6 (E6): Personen-Modal (feste Höhe, Reiter, Foto, Schalter, Ankreuzlisten),
 *           Teilnahme-Modal darüber, Anmeldung als Knopfgruppe (.status-knopf als Radio).
 *           Bisher 2.8-ev5 (E5): .filter-formular als Flex-Zeile – die Rasterregel aus Blue Ice 2.8
 *           (repeat(auto-fit, …) + auto) ist ungültiges CSS und wird vom Browser verworfen.
 *           Bisher 2.8-ev4 (E5): Sortierköpfe in Tabellen, Segment-Marken, Listenfuß mit Seitenwechsel.
 *           Bisher 2.8-ev3 (E4): deaktivierte Symbolknöpfe sichtbar abgeblendet (wie Classic orte.php:197).
 *           Bisher 2.8-ev2 (E4): Modal mit Höhenbegrenzung und Scrollbereich, Ansichtshinweis.
 *           Bisher 2.8-ev1: Erstanlage (E3). Unveränderte Kopie von referenz/blue-ice.css 2.8 (BI 12.1, Kopf unten);
 *           EventDB-Ergänzungen nur im letzten Abschnitt „EventDB“ (Testsystem-Kennzeichnung).
 *           Neue Bausteine ausschließlich dort ergänzen, mit Versionsvermerk (BI 12.7).
 */
/*
 * css/blue-ice.css – Design-System „Blue Ice“ der Konsole
 * Version:  2.8
 * Geändert: 2026-10-03
 * Änderung: Seitenhintergrund hell minimal dunkler: --bg #f2f4f7 → #eaedf2 (HSL-Helligkeit
 *           95,9 % → 93,3 %, Farbton/Sättigung gleich), ebenso der feste Wert am html-Element.
 *           Gilt für Blau und Grün (beide nutzen --bg aus :root); Dunkelmodus unverändert.
 *           Bisher (2.7.1): Code-Feld als .form-input.code-feld – .form-input (weiter unten) überschrieb sonst
 *           Schriftgröße, Mono-Schrift und Innenabstand.
 *           Bisher (2.7): Etappe 5 – Bausteine für Anmeldung, MFA-Einrichtung und Mandantenauswahl
 *           (anmelde-*, methode-knopf, schritt, qr-rahmen, code-zeile, mandant-kachel/-kuerzel,
 *           mandant-neu) nach docs/mockups/login-mockup.html.
 *           Bisher (2.6): .datei-art (Dateiart als Text in Dateilisten).
 *           Bisher (2.5): .karte-kopf h2.text-sm – kleine Kartenköpfe wirklich in 13 px (vorher von .karte-kopf h2 überstimmt).
 *           Bisher (2.4): zeile-neu, badge-neu, zaehler (Briefings).
 *           Bisher (2.3): form-schmal, checkbox-zeile, gruppen-titel, empfaenger-zeile (Einstellungen).
 *           Bisher (2.2): raster-2, schnell-link, status-zaehler, hinweis-ecke, a.listen-zeile,
 *           treffer-markierung (Suche).
 *           Bisher (2.1): ansicht-umschalter, kopf-aktionen, kachel-raster, code-vorschau, form-input.mono,
 *           formular-spalte; .code-block ohne Fläche (E16).
 *           Bisher (2.0): tabelle-kopf (Überschrift über einer Tabelle in der tabelle-karte).
 *           Bisher (1.9): stamm-raster (Liste | Formular), formular-knoepfe.
 *           Bisher (1.8): Etappe 2 – allgemeine Bausteine: seiten-hinweis, abschnitt-titel, leer-karte,
 *           filter-formular, listen-karte/-zeile, aktionen-zelle.
 *           Bisher (1.7): Warnzeilen in Tabellen ohne rote Fläche, stattdessen roter 3-px-Balken links (E16).
 *           Bisher (1.6): Kommentar zum Seitenraster aktualisiert (newsletter.php nutzt app-layout).
 *           Bisher (1.5): Etappe 1 – Filter-Tafel (E12), „Status ändern“ (E13), Tabellen-Liste, Brotkrumen,
 *           Titelzeile, Detail-Raster 2:1, Kartenkopf, Felder, Quelltext, Nachrichten;
 *           .data-table-Kopf ohne Fläche (E16) und mit Abständen aus dem To-Do-Mockup.
 *           Bisher (1.4): Status-Pillen Variante D (E10) mit eigenständigen Statusfarben --status-* (hell/dunkel
 *           exakt aus dem To-Do-Mockup), .badge/.badge-* im selben Stil, .status-wahl;
 *           eckige Formen (E11): Radien 2 px/4 px, nur .avatar bleibt rund.
 *           Bisher (1.3): Farbwahl Blau/Grün im Benutzermenü (.farbwahl, .farbmuster).
 *           Bisher (1.2): Zwei feste Themes statt Mandantenfarbe – Blau (Standard, :root) und Grün
 *           (:root.theme-gruen), Kopf und Akzent hell exakt aus den Mockups; Akzent dunkel
 *           unverändert für beide.
 *           Bisher (1.1): Schmale Bildschirme – Text der Restzeit bei Warnung nicht mehr ausblenden
 *           („Abgelaufen“ blieb sonst unsichtbar).
 *           Bisher (1.0): Erstanlage – Tokens hell/dunkel aus dem Doku-Tool (app.css), Kopfleiste,
 *           linke Navigation, Raster, Grundbausteine der bisherigen Konsole
 *           (Klassennamen aus includes/head.php 2.11 bleiben erhalten).
 * © Carsten Boehlke IT Consulting
 *
 * Grundsatz (docs/blue-ice-plan.md, E3): keine Transitions, keine Animationen, keine
 * Schatten, keine halbtransparenten Flächen. Einzige Ausnahme: --abdunklung hinter Modals.
 * Abgeleitete Töne werden deckend mit color-mix() gemischt.
 *
 * Kopf- und Akzentfarbe kommen nur aus dem Theme (Blau/Grün), nicht mehr vom Mandanten.
 */

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }
img { max-width: 100%; }

/* ── Farben: hell (Vorgabe) ──────────────────────────────────────────────── */
/* Theme „Blau“ (Standard): Kopf und Akzent exakt aus docs/mockups/…Newsletter-Liste (blau).html */
:root {
    --kopf:           #1b4f72;
    --auf-kopf:       #ffffff;

    --accent:         #1b6fa8;
    --accent-light:   color-mix(in srgb, var(--accent) 8%,  #ffffff);
    --accent-muted:   color-mix(in srgb, var(--accent) 16%, #ffffff);
    --accent-hover:   color-mix(in srgb, var(--accent) 85%, #000000);
    --auf-akzent:     #ffffff;           /* Schrift auf Akzentflächen */

    --bg:             #eaedf2;
    --surface:        #ffffff;
    --surface-2:      #f7f8fa;
    --ink:            #1f2733;
    --ink-2:          #3d4857;
    --muted:          #6b7686;
    --border:         #e3e7ed;
    --border-2:       #cfd6df;

    --success: #1a7a5a; --success-bg: #e8f5f0; --success-border: #b8ddd0;
    --warning: #9a4a05; --warning-bg: #fef3e2; --warning-border: #f0d090;
    --danger:  #b3261e; --danger-bg:  #fdf0f0; --danger-border:  #ecc4c1;
    --info:    #1a4a8a; --info-bg:    #eaf0fb; --info-border:    #b8cef0;

    --abdunklung:     rgba(16, 20, 28, 0.45);   /* einzige Transparenz: hinter Modals */

    /* Statusfarben (E10): eigenständig, wechseln nicht mit dem Theme.
       Werte exakt aus dem Mockup „To-Do Mockup Blue Ice“ (Claude-Artefakt). */
    --status-grund:       #f0f2f5;
    --status-entwurf:     #566172;
    --status-material:    #b9501c;
    --status-arbeit:      #2563c9;
    --status-warten:      #a8640a;
    --status-freigabe:    #1f7a44;
    --status-ausgefallen: #c0392b;
    --status-gelaufen:    #0f766e;

    /* Eckige Formen (E11): 2 px Bedienelemente, Felder, Pillen; 4 px Karten, Tabellen */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 4px;
    /* Schwebende Ebenen (Spaltenmenü der Erweiterten Suche), Werte aus docs/mockups/mockup-tabellenansicht-v3.html */
    --schatten-schwebend:      0 10px 30px rgba(13, 21, 32, 0.14), 0 2px 6px rgba(13, 21, 32, 0.08);
    --schatten-schwebend-oben: 0 -8px 24px rgba(13, 21, 32, 0.14), 0 -2px 6px rgba(13, 21, 32, 0.08);

    --schrift: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    --schrift-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

    --kopf-hoehe:   56px;
    --spalte-links: 236px;
}

/* Theme „Grün“: Klasse theme-gruen am html-Element (wie dark-mode, gesetzt in head.php).
   Werte exakt aus docs/mockups/…Newsletter-Liste (grün).html. Die abgeleiteten Töne
   (--accent-light, --accent-muted, --accent-hover) rechnen am selben Element mit. */
:root.theme-gruen {
    --kopf:           #24533a;
    --accent:         #1f7a4d;
}

/* ── Farben: dunkel ──────────────────────────────────────────────────────── */
/* Akzent dunkel vorerst für beide Themes gleich (bisheriger Standard), bis es dunkle
   Mockup-Werte gibt. Die Kopfleiste behält die Theme-Farbe (Frage D). */
/* Abgeleitete Töne neu berechnen: Variablen werden am :root aufgelöst und vererbt */
body.dark-mode {
    --schatten-schwebend:      0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --schatten-schwebend-oben: 0 -8px 24px rgba(0, 0, 0, 0.5), 0 -2px 6px rgba(0, 0, 0, 0.3);
    --accent:         #4aa8e0;
    --accent-light:   color-mix(in srgb, var(--accent) 12%, #21242b);
    --accent-muted:   color-mix(in srgb, var(--accent) 24%, #21242b);
    --accent-hover:   color-mix(in srgb, var(--accent) 85%, #ffffff);
    --auf-akzent:     #0b1015;

    --bg:             #16181d;
    --surface:        #21242b;
    --surface-2:      #2a2e36;
    --ink:            #e6e8ec;
    --ink-2:          #bcc2cc;
    --muted:          #8d95a3;
    --border:         #30353e;
    --border-2:       #3d434e;

    --success: #2aad7a; --success-bg: #0e2a1e; --success-border: #1a4a32;
    --warning: #e0942a; --warning-bg: #2a1e08; --warning-border: #4a3010;
    --danger:  #f0645a; --danger-bg:  #2e1212; --danger-border:  #512020;
    --info:    #5a9ae4; --info-bg:    #0e1a2a; --info-border:    #1a3050;

    --abdunklung:     rgba(0, 0, 0, 0.6);

    /* Statusfarben dunkel, exakt aus dem Mockup „To-Do Mockup Blue Ice“ */
    --status-grund:       #222b36;
    --status-entwurf:     #9aa6b4;
    --status-material:    #eb8a57;
    --status-arbeit:      #6ea6f2;
    --status-warten:      #e0a24a;
    --status-freigabe:    #5cc488;
    --status-ausgefallen: #ef7468;
    --status-gelaufen:    #4cc4b8;
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
/* Hintergrund am html: verhindert helles Aufblitzen beim Seitenwechsel (feste Werte,
   weil --bg erst unter body.dark-mode umgestellt wird) */
html { background: #eaedf2; }
html.dark-mode { background: #16181d; }
body {
    font-family: var(--schrift); font-size: 15px; line-height: 1.55;
    color: var(--ink); background: var(--bg);
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
.symbol { flex-shrink: 0; vertical-align: -0.15em; }
.visuell-versteckt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Seitenraster: Kopfleiste | links | Inhalt ───────────────────────────── */
/* Die Seiten liefern <div class="app-layout"> nav <main class="main-content">.
   .nl-wrap bleibt nur als Rückfall für ältere Seiten (newsletter.php nutzt seit 3.0 app-layout).
   „body >“ erhöht die Spezifität über die eigenen <style>-Blöcke der Seiten. */
body > .app-layout,
body > .nl-wrap {
    display: grid;
    grid-template-columns: var(--spalte-links) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "kopf kopf" "links mitte";
    column-gap: 28px;
    align-items: start;
    min-height: 100vh;
}
body > .app-layout > main,
body > .nl-wrap > main { grid-area: mitte; min-width: 0; }
.main-content { padding: 24px 28px 48px 0; min-width: 0; max-width: 100%; }

/* ── Kopfleiste ──────────────────────────────────────────────────────────── */
.kopfleiste {
    grid-area: kopf;
    position: sticky; top: 0; z-index: 100;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
    height: var(--kopf-hoehe); padding: 0 24px;
    background: var(--kopf); color: var(--auf-kopf);
    /* deckende Mischtöne aus Kopf- und Schriftfarbe */
    --kopf-feld:       color-mix(in srgb, var(--kopf) 86%, var(--auf-kopf));
    --kopf-feld-fokus: color-mix(in srgb, var(--kopf) 76%, var(--auf-kopf));
    --kopf-rand:       color-mix(in srgb, var(--kopf) 60%, var(--auf-kopf));
    --kopf-leise:      color-mix(in srgb, var(--kopf) 28%, var(--auf-kopf));
}
.kopfleiste a:focus-visible, .kopfleiste button:focus-visible,
.kopfleiste input:focus-visible, .kopfleiste select:focus-visible {
    outline: 2px solid var(--auf-kopf); outline-offset: 1px;
}
.kopf-logo {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--auf-kopf); text-decoration: none; font-size: 18px; font-weight: 600; white-space: nowrap;
}

/* Suche */
.kopf-suche { justify-self: center; width: 100%; max-width: 520px; position: relative; }
.kopf-suche .symbol {
    position: absolute; left: 12px; top: 50%; margin-top: -7px;
    color: var(--kopf-leise); pointer-events: none;
}
.kopf-suche input {
    width: 100%; height: 36px; padding: 0 14px 0 36px;
    border: 1px solid var(--kopf-feld); border-radius: var(--radius-sm);
    background: var(--kopf-feld); color: var(--auf-kopf);
    font-family: inherit; font-size: 14px;
}
.kopf-suche input::placeholder { color: var(--kopf-leise); opacity: 1; }
.kopf-suche input:focus { background: var(--kopf-feld-fokus); border-color: var(--kopf-rand); }
.kopf-suche input::-webkit-search-cancel-button { filter: grayscale(1); }

.kopf-rechts { display: flex; align-items: center; gap: 12px; }

/* Restzeit der Sitzung */
.kopf-timer {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 4px;
    font-size: 13px; color: var(--kopf-leise); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kopf-timer.warnung {
    padding: 0 4px 0 10px; border-radius: var(--radius-sm);
    background: var(--warning-bg); color: var(--warning); font-weight: 500;
}
.kopf-timer button {
    padding: 2px 10px; border: 1px solid var(--warning-border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--warning);
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* Mandantenumschalter */
.kopf-mandant { display: flex; align-items: center; gap: 6px; }
.kopf-mandant select, .kopf-mandant-name {
    max-width: 220px; height: 32px; padding: 0 8px;
    border: 1px solid var(--kopf-rand); border-radius: var(--radius-md);
    background: var(--kopf-feld); color: var(--auf-kopf);
    font-family: inherit; font-size: 14px; font-weight: 500; text-overflow: ellipsis; cursor: pointer;
}
.kopf-mandant-name { display: inline-flex; align-items: center; cursor: default; overflow: hidden; white-space: nowrap; }
.kopf-mandant select option { color: #1f2733; background: #ffffff; }
.kopf-knopf {
    height: 32px; padding: 0 10px;
    border: 1px solid var(--kopf-rand); border-radius: var(--radius-md);
    background: transparent; color: var(--auf-kopf);
    font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.kopf-knopf:hover { background: var(--kopf-feld); }

/* Benutzermenü */
.benutzermenue { position: relative; }
.benutzermenue-knopf {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--auf-kopf);
    font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.benutzermenue-knopf:hover, .benutzermenue-knopf[aria-expanded="true"] { background: var(--kopf-feld); }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--auf-kopf); color: var(--kopf); font-size: 13px; font-weight: 700;
}
.benutzermenue-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benutzermenue-liste {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 110;
    min-width: 240px; padding: 6px; list-style: none;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border-2); border-radius: var(--radius-lg);
}
.benutzermenue-info { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.benutzermenue-info strong { display: block; font-size: 14px; }
.benutzermenue-info span { color: var(--muted); }
.benutzermenue-liste form { margin: 0; }
.menue-eintrag {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent;
    color: var(--ink-2); font-family: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.menue-eintrag:hover { background: var(--accent-light); color: var(--accent); }
.menue-eintrag:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menue-eintrag.gefahr:hover { background: var(--danger-bg); color: var(--danger); }
.menue-trenner { height: 1px; margin: 4px 0; background: var(--border); }
/* Knopf mit Menü im Fensterkopf des Personen-Fensters (V27, js/linkedin.js) */
.ext-suche { position: relative; }
.icon-btn.ext-suche-knopf { width: auto; padding: 0 8px; gap: 5px; font-family: inherit; font-size: 13px; line-height: 1; color: var(--ink-2); }
.icon-btn.ext-suche-knopf:hover, .icon-btn.ext-suche-knopf[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.ext-suche-menue {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 290px; padding: 6px; background: var(--surface); color: var(--ink);
    border: 1px solid var(--border-2); border-radius: var(--radius-lg); box-shadow: var(--schatten-schwebend);
}
.ext-suche-menue[hidden] { display: none; }
.ext-suche-eintrag { align-items: flex-start; }
.ext-suche-text { display: grid; gap: 2px; }
.ext-suche-unter { font-size: 12px; color: var(--muted); }
.ext-suche-eintrag.ist-aus { color: var(--muted); cursor: not-allowed; opacity: 0.6; }
.ext-suche-eintrag.ist-aus:hover { background: transparent; color: var(--muted); }
.ext-suche-hinweis { margin: 4px 0 2px; padding: 8px 10px 4px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.45; color: var(--muted); }
/* Farbwahl Blau/Grün; Muster in den Kopffarben der Themes (s. :root / :root.theme-gruen) */
.farbwahl { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.farbwahl-titel { flex: 1; font-size: 14px; color: var(--ink-2); }
.farbwahl-knopf {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border: 1px solid var(--border-2); border-radius: var(--radius-md); background: var(--surface);
    color: var(--ink-2); font-family: inherit; font-size: 13px; cursor: pointer;
}
.farbwahl-knopf:hover { background: var(--surface-2); }
.farbwahl-knopf[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.farbmuster { width: 12px; height: 12px; border-radius: var(--radius-sm); flex-shrink: 0; }
.farbmuster.blau  { background: #1b4f72; }
.farbmuster.gruen { background: #24533a; }
.schalter {
    position: relative; flex-shrink: 0; width: 32px; height: 18px; margin-left: auto;
    border-radius: var(--radius-sm); background: var(--border-2);
}
.schalter::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 1px;
    background: #ffffff;
}
[aria-checked="true"] > .schalter { background: var(--accent); }
[aria-checked="true"] > .schalter::after { left: 16px; }

/* ── Linke Navigation ────────────────────────────────────────────────────── */
.nav-spalte {
    grid-area: links; min-width: 0;
    position: sticky; top: var(--kopf-hoehe);
    max-height: calc(100vh - var(--kopf-hoehe)); overflow-y: auto;
    padding: 20px 0 32px 20px;
}
.nav-menue > summary { display: none; }   /* nur auf schmalen Bildschirmen sichtbar */
.nav-abschnitt + .nav-abschnitt { margin-top: 18px; }
.nav-titel {
    margin: 0 0 6px 11px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.nav-liste { list-style: none; }
.nav-liste li + li { margin-top: 1px; }
.nav-liste form { margin: 0; }
.nav-link {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 6px 8px; border: 0; border-left: 3px solid transparent;
    border-radius: 0 var(--radius-md) var(--radius-md) 0; background: transparent;
    color: var(--ink-2); font-family: inherit; font-size: 14px; line-height: 1.35;
    text-align: left; text-decoration: none; cursor: pointer;
}
.nav-link .symbol { color: var(--muted); }
.nav-link:hover { background: var(--surface); color: var(--accent); }
.nav-link:hover .symbol { color: var(--accent); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-link.ist-aktiv { background: var(--surface); color: var(--accent); font-weight: 500; border-left-color: var(--accent); }
.nav-link.ist-aktiv .symbol { color: var(--accent); }
.nav-link.gefahr:hover { background: var(--danger-bg); color: var(--danger); }
.nav-link.gefahr:hover .symbol { color: var(--danger); }
.nav-zaehler {
    margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-sm);
    background: var(--danger); color: var(--auf-akzent);
    font-size: 11px; font-weight: 600; line-height: 1.5; text-align: center;
}

/* ── Seitenkopf ──────────────────────────────────────────────────────────── */
.page-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.page-title, .page-header h1 {
    font-size: 24px; font-weight: 500; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em;
}
.page-subtitle, .page-header h1 + p { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ── Karten ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px 24px; margin-bottom: 16px; overflow: hidden;
}
.card:has(> .card-header),
.card:has(> .card-body) { padding: 0; }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.card-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.card-body  { padding: 16px; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--radius-md);
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4;
    border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary       { background: var(--accent); color: var(--auf-akzent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary       { background: var(--surface); color: var(--ink-2); border-color: var(--border-2); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost       { background: transparent; color: var(--ink-2); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger       { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger); color: var(--auf-akzent); border-color: var(--danger); }
.btn:disabled, .btn:disabled:hover {
    background: var(--surface-2); color: var(--muted); border-color: var(--border); cursor: not-allowed;
}
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-lg { padding: 10px 20px; font-size: 15px; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn.danger { color: var(--danger); border-color: var(--danger-border); }
.icon-btn.danger:hover { background: var(--danger-bg); }

/* ── Status-Pillen, Variante D (E10) ─────────────────────────────────────── */
/* Neutraler Grund, Statusfarbe im Text und als 3-px-Balken links, alle gleich breit.
   Newsletter-Status über includes/status.php (nl_status_pille). */
.status-pille {
    display: inline-flex; align-items: center; min-width: 168px;
    padding: 5px 12px; font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
    background: var(--status-grund); color: var(--c, var(--status-entwurf));
    border-left: 3px solid var(--c, var(--status-entwurf)); border-radius: var(--radius-sm);
}
.st-entwurf     { --c: var(--status-entwurf); }
.st-material    { --c: var(--status-material); }
.st-arbeit      { --c: var(--status-arbeit); }
.st-warten      { --c: var(--status-warten); }
.st-freigabe    { --c: var(--status-freigabe); }
.st-ausgefallen { --c: var(--status-ausgefallen); }
.st-gelaufen    { --c: var(--status-gelaufen); }

/* Bisherige Marken (.badge, .badge-*) im selben Stil, Farben nur aus --status-*.
   Ohne Mindestbreite, weil .badge auch für Kürzel und kurze Hinweise dient. */
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
    background: var(--status-grund); color: var(--c, var(--status-entwurf));
    border-left: 3px solid var(--c, var(--status-entwurf));
}
.badge-entwurf, .badge-angekuendigt, .badge-inaktiv   { --c: var(--status-entwurf); }
.badge-material, .badge-material_geliefert            { --c: var(--status-material); }
.badge-in-arbeit, .badge-in_arbeit, .badge-info        { --c: var(--status-arbeit); }
.badge-warten, .badge-warten_auf_freigabe, .badge-warning { --c: var(--status-warten); }
.badge-freigabe, .badge-aktiv                          { --c: var(--status-freigabe); }
.badge-ausgefallen                                     { --c: var(--status-ausgefallen); }
.badge-gelaufen                                        { --c: var(--status-gelaufen); }
/* Unscharfe Suche: Kennzeichen „ähnlich“ neben dem Wert (docs/plan-unscharfe-suche.md 5) */
.badge-aehnlich { --c: var(--status-arbeit); padding: 0 6px; font-size: 11px; font-weight: 500; vertical-align: 1px; }
/* Seite „Module“ (2.8-ev21) */
.module-liste .karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modul-zustand { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.modul-zustand label { display: flex; align-items: center; gap: 6px; }
.modul-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filter-formular .form-group.breit.mit-schalter { flex-grow: 3; }   /* Platz für den Schalter; Grundbreite wie ohne Modul (gleicher Umbruch) */
.such-mit-schalter { display: flex; align-items: center; gap: 12px; }
.such-mit-schalter .form-input { flex: 1 1 auto; min-width: 0; }
.aehnlich-schalter { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; margin: 0; cursor: help; }
.aehnlich-schalter input { margin: 0; }
/* Marken mit eigener Grundklasse (z. B. .cdn-badge in cdn.php) erhalten die Farben ebenso */
:is(.badge-entwurf, .badge-angekuendigt, .badge-inaktiv, .badge-material, .badge-material_geliefert,
    .badge-in-arbeit, .badge-in_arbeit, .badge-info, .badge-warten, .badge-warten_auf_freigabe,
    .badge-warning, .badge-freigabe, .badge-aktiv, .badge-ausgefallen, .badge-gelaufen):not(.badge) {
    background: var(--status-grund); color: var(--c); border-left: 3px solid var(--c);
}

/* Status-Auswahl im Formular (nl-neu.php): Farbe des gewählten Status, sonst neutral */
.status-wahl { border-left: 3px solid var(--c, var(--border-2)); color: var(--c, var(--ink)); font-weight: 600; }
.status-wahl option { color: var(--ink); font-weight: 400; }

/* ── Filter-Tafel (E12) ──────────────────────────────────────────────────── */
/* Ein Knopf pro Status mit Anzahl, immer zwei übereinander, Spalten laufen nach rechts;
   aktiv vollflächig in der Theme-Farbe. Vorlage: docs/mockups/todo-mockup-d.html */
.filter-titel {
    margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
}
.filter-tafel {
    display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 1fr); gap: 8px;
    max-width: 760px; overflow-x: auto; margin: 0 0 20px; padding-bottom: 2px;
}
.filter-knopf {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.filter-knopf:hover { border-color: var(--accent); }
.filter-knopf .anzahl { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.filter-knopf[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--auf-akzent); }
.filter-knopf[aria-pressed="true"] .anzahl { color: var(--auf-akzent); }
.filter-knopf.zuruecksetzen { border-style: dashed; color: var(--muted); font-weight: 500; }

/* Suche/Kunde über einer Liste */
.liste-werkzeuge {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px;
    align-items: end; margin-bottom: 18px;
}
.liste-werkzeuge .form-group { margin-bottom: 0; }
.liste-werkzeuge-knoepfe { display: flex; gap: 8px; }

/* ── Tabellen-Liste (Newsletter, To-Do) ──────────────────────────────────── */
.tabelle-karte {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow-x: auto; margin-bottom: 16px;
}
.tabelle-karte .data-table { min-width: 720px; }
.tabelle-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.tabelle-kopf h2 { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.zeile-titel { font-weight: 600; color: var(--ink); text-decoration: none; }
a.zeile-titel:hover { color: var(--accent); }
.zeile-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.zeile-warnung .zeile-titel, .zeile-warnung .zeile-sub { color: var(--danger); }
/* Neue Einträge (z. B. Briefings): Balken links in der Theme-Farbe, Marke „Neu“, Zähler */
.data-table tbody tr.zeile-neu td:first-child { border-left: 3px solid var(--accent); }
.badge-neu { --c: var(--accent); }
.zaehler {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: var(--radius-sm); background: var(--accent); color: var(--auf-akzent);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Warnzeile ohne Fläche (E16): roter 3-px-Balken links, ⚠ und rote Schrift im Titel */
.data-table tbody tr.zeile-warnung td:first-child { border-left: 3px solid var(--danger); }
.data-table tbody tr.leer-zeile:hover { background: transparent; cursor: default; }
.leer-zeile td { padding: 28px 16px; text-align: center; color: var(--muted); }
.nl-vorschaubild {
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    width: 48px; height: 48px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--muted); font-size: 16px;
}
.nl-vorschaubild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.symbol-link { display: inline-flex; color: var(--muted); text-decoration: none; }
.symbol-link:hover { color: var(--accent); }
.seitenwahl { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 20px; }

/* ── Detailseite: Brotkrumen, Titelzeile, Raster 2:1, Karten ──────────────── */
.brotkrumen {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    margin-bottom: 14px; font-size: 14px; color: var(--muted);
}
.brotkrumen a { color: var(--accent); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen-aktuell { color: var(--ink); }
.titelzeile {
    display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
    gap: 16px; margin-bottom: 20px;
}
.titelzeile h1 { margin: 0 0 6px; font-size: 26px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.titel-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.titel-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.titel-aktionen form { margin: 0; }
.btn-gefahr-text { background: transparent; color: var(--danger); border-color: transparent; }
.btn-gefahr-text:hover { background: var(--danger-bg); border-color: var(--danger-border); }

.detail-raster {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start;
}
.detail-spalte { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.detail-spalte > .card { margin-bottom: 0; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.karte-kopf h2 { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.karte-kopf h2.text-sm { font-size: 13px; }   /* kleine Kartenköpfe (Kacheln, Hinweis-Ecke) */
.karte-zusatz { font-size: 13px; font-weight: 400; color: var(--muted); }
.karte-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.karte-fuss { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.feld-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.feld-label { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.feld-wert  { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.feld-hervorgehoben .feld-label, .feld-hervorgehoben .feld-wert { color: var(--danger); font-weight: 600; }
.feld-block + .feld-block { margin-top: 12px; }
.quelltext {
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: transparent; color: var(--ink);
    font-family: var(--schrift-mono); font-size: 12.5px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-all;
}
.quelltext.lang { max-height: 500px; overflow-y: auto; margin-top: 8px; }
.quelltext-mehr { color: var(--muted); }
.meta-liste { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.meta-liste strong { color: var(--ink); font-weight: 500; }

/* Nachrichten im Detail: keine Flächen (E16), Unterscheidung über Rand und Ausrichtung */
.nachrichten-liste { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; margin-bottom: 14px; }
.nachricht-zeile { display: flex; flex-direction: column; align-items: flex-start; }
.nachricht-zeile.intern { align-items: flex-end; }
.nachricht {
    max-width: 85%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: transparent; color: var(--ink); font-size: 14px; line-height: 1.45;
}
.nachricht-zeile.intern .nachricht { border-color: var(--accent); }
.nachricht-info { margin-top: 3px; padding: 0 4px; font-size: 12px; color: var(--muted); }

/* ── Status ändern (E13): aktueller Status vollflächig in der Theme-Farbe ──── */
.status-liste { display: flex; flex-direction: column; gap: 8px; }
.status-knopf {
    padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.status-knopf:hover { border-color: var(--accent); }
.status-knopf[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--auf-akzent); }

/* ── Allgemeine Seitenbausteine (Etappe 2) ───────────────────────────────── */
.seiten-hinweis { margin: -8px 0 16px; max-width: 80ch; font-size: 13px; color: var(--muted); }
.abschnitt-titel {
    margin: 24px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
}
.abschnitt-titel:first-child { margin-top: 0; }
.leer-karte { padding: 40px 16px; text-align: center; color: var(--muted); }
mark.treffer-markierung { background: var(--accent-muted); color: inherit; border-radius: var(--radius-sm); padding: 0 1px; }
.text-dringend { color: var(--danger); font-weight: 500; }
.aktionen-zelle { text-align: right; white-space: nowrap; }
.aktionen-zelle form { display: inline-block; margin: 0; }
.aktionen-zelle > * + * { margin-left: 6px; }

/* Ansichtsumschalter (z. B. Kachel | Liste): aktiv vollflächig in der Theme-Farbe */
.ansicht-umschalter { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; }
.ansicht-umschalter a {
    display: inline-flex; align-items: center; padding: 5px 10px; font-size: 13px;
    color: var(--muted); background: var(--surface); text-decoration: none;
}
.ansicht-umschalter a + a { border-left: 1px solid var(--border-2); }
.ansicht-umschalter a[aria-current="page"] { background: var(--accent); color: var(--auf-akzent); }
.kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Kachelraster (Snippets) */
.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kachel-raster > .card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }
.code-vorschau {
    max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--schrift-mono); font-size: 12px; color: var(--muted);
}
.form-schmal { max-width: 120px; }
.checkbox-zeile { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.gruppen-titel {
    margin: 0 0 6px; padding: 6px 0; border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.empfaenger-zeile { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.empfaenger-mail { font-size: 14px; }
.empfaenger-zeile.inaktiv .empfaenger-mail { color: var(--muted); text-decoration: line-through; }
/* Dateiart als Text statt Emoji (Dateilisten in nl-detail/nl-neu) */
.datei-art { flex-shrink: 0; min-width: 3.2em; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.form-input.mono, .form-control.mono { font-family: var(--schrift-mono); font-size: 13px; line-height: 1.55; }
.formular-spalte { display: grid; gap: 20px; max-width: 900px; }
.formular-spalte > .card { margin-bottom: 0; }

/* Dashboard: zwei gleiche Spalten, Schnellaktionen, Hinweis unten rechts */
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.raster-2 > .card, .raster-2 > .listen-karte { margin-bottom: 0; }
@media (max-width: 1000px) { .raster-2 { grid-template-columns: minmax(0, 1fr); } }
a.listen-zeile { color: inherit; text-decoration: none; }
a.listen-zeile:hover { background: var(--accent-light); }
.schnell-liste { display: grid; gap: 6px; }
.schnell-link {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); color: inherit; text-decoration: none;
}
.schnell-link:hover { border-color: var(--accent); background: var(--accent-light); }
.schnell-symbol {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-2);
}
.schnell-titel { font-size: 13px; font-weight: 500; }
.schnell-text  { font-size: 12px; color: var(--muted); }
.status-zaehler { display: flex; flex-wrap: wrap; gap: 8px; }
.status-zaehler > div { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.hinweis-ecke {
    position: fixed; right: 24px; bottom: 24px; z-index: 1000; max-width: 300px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
}

/* Zwei Spalten: Liste links, Formular rechts (Stammdaten) */
.stamm-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.stamm-raster > .card, .stamm-raster > .tabelle-karte { margin-bottom: 0; }
.formular-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media (max-width: 1100px) { .stamm-raster { grid-template-columns: minmax(0, 1fr); } }

/* Filterformular über Listen (GET): Felder nebeneinander, Knöpfe rechts */
.filter-formular {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) auto; gap: 12px;
    align-items: end; margin-bottom: 18px;
}
.filter-formular .form-group { margin-bottom: 0; }
.filter-formular-knoepfe { display: flex; gap: 8px; }

/* Listenkarte: Karte ohne Innenabstand mit Zeilen, getrennt durch 1-px-Linien */
.listen-karte {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    margin-bottom: 16px; overflow: hidden;
}
.listen-zeile { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.listen-zeile + .listen-zeile { border-top: 1px solid var(--border); }
.listen-zeile.klein { padding: 11px 18px; font-size: 13px; }
.listen-zeile.dringend { border-left: 3px solid var(--danger); padding-left: 15px; }
.listen-zeile.warnung  { border-left: 3px solid var(--status-warten); padding-left: 15px; }
.listen-zeile.inaktiv  { color: var(--muted); }
.listen-inhalt { flex: 1; min-width: 0; }
.listen-titel { font-size: 14px; font-weight: 600; color: var(--ink); }
.listen-zeile.inaktiv .listen-titel { color: var(--muted); }
.listen-meta  { margin-top: 3px; font-size: 13px; color: var(--muted); }
.listen-zitat { margin-top: 5px; font-size: 13px; color: var(--muted); font-style: italic; }
.listen-aktionen { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.listen-aktionen form { margin: 0; }

/* ── Anmeldung, MFA-Einrichtung, Mandantenauswahl (Etappe 5) ─────────────── */
/* Seiten ohne Navigation: Kopfleiste in der Theme-Farbe, darunter eine schlichte Karte */
.anmelde-seite { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.anmelde-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: var(--kopf-hoehe); padding: 0 24px; background: var(--kopf); color: var(--auf-kopf);
    --kopf-feld: color-mix(in srgb, var(--kopf) 86%, var(--auf-kopf));
    --kopf-rand: color-mix(in srgb, var(--kopf) 60%, var(--auf-kopf));
}
.anmelde-kopf a:focus-visible, .anmelde-kopf button:focus-visible { outline: 2px solid var(--auf-kopf); outline-offset: 1px; }
.anmelde-kopf-rechts { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.anmelde-kopf-rechts form { margin: 0; }
.anmelde-mitte { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 64px 16px 48px; }
.anmelde-karte {
    width: 100%; max-width: 400px; padding: 28px 28px 24px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.anmelde-karte.breit { max-width: 480px; }
.anmelde-titel { font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--ink); margin: 0 0 4px; }
.anmelde-unter { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.anmelde-karte .btn-primary.breit { width: 100%; justify-content: center; padding: 10px 14px; }
.form-input.code-feld { text-align: center; font-family: var(--schrift-mono); font-size: 26px; letter-spacing: 0.3em; padding: 10px; }
.text-knopf {
    display: block; width: 100%; margin-top: 6px; padding: 6px; border: 0; background: none;
    font-family: inherit; font-size: 13px; color: var(--muted); text-align: center; cursor: pointer;
}
.text-knopf:hover { color: var(--accent); }
.text-knopf.links { text-align: left; padding-left: 0; color: var(--accent); }
.knopf-trenner { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--border); }
.knopf-trenner form { margin: 0; }
/* Methode wählen: Rand, beim Überfahren Akzent (wie „Status ändern“) */
.methode { display: grid; gap: 10px; }
.methode-knopf {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
    border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface);
    color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.methode-knopf:hover { border-color: var(--accent); }
.methode-knopf .symbol { color: var(--accent); }
.methode-knopf small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
/* MFA-Einrichtung: Schritte mit eckiger Nummer ohne Fläche (E16) */
.schritt { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.schritt-nr {
    flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent); font-size: 13px; font-weight: 600;
}
.schritt-titel { font-size: 14px; font-weight: 600; color: var(--ink); }
.schritt-text { font-size: 13px; color: var(--muted); }
/* QR-Code braucht hellen Rand zum Scannen: Fläche bewusst weiß, auch im Dunkelmodus */
.qr-rahmen { display: inline-block; margin-top: 10px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #ffffff; }
.qr-rahmen img { display: block; max-width: 180px; }
.code-zeile { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.code-zeile code { flex: 1; min-width: 0; font-family: var(--schrift-mono); font-size: 12.5px; word-break: break-all; color: var(--ink); }
/* Mandantenauswahl: neutrale Kacheln, Kürzel in der Akzentfarbe */
.mandanten-kopf { width: 100%; max-width: 860px; margin-bottom: 20px; }
.mandanten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; width: 100%; max-width: 860px; }
.mandanten-raster form { margin: 0; display: flex; }
.mandant-kachel {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    font-family: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.mandant-kachel:hover { border-color: var(--accent); }
.mandant-kuerzel {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px;
    margin-bottom: 8px; border: 1px solid var(--accent); border-radius: var(--radius-sm);
    color: var(--accent); font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
}
.mandant-name { font-size: 15px; font-weight: 600; }
.mandant-meta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); width: 100%; font-size: 12.5px; color: var(--muted); }
.mandant-neu {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px;
    border: 2px dashed var(--border-2); border-radius: var(--radius-lg); color: var(--muted); text-decoration: none; font-size: 14px;
}
.mandant-neu:hover { border-color: var(--accent); color: var(--accent); }
.anmelde-fuss { padding: 16px; text-align: center; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
    .anmelde-mitte { padding-top: 32px; }
    .anmelde-kopf { padding: 0 14px; }
}

/* ── Formulare ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
    display: block; margin-bottom: 5px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2);
}
.form-input, .form-control {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--border-2); border-radius: var(--radius-md);
    font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
}
.form-input:focus, .form-control:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.form-input::placeholder, .form-control::placeholder { color: var(--muted); opacity: 1; }
.form-input[readonly], .form-control[readonly] { background: var(--surface-2); color: var(--muted); }
textarea.form-input, textarea.form-control { min-height: 90px; resize: vertical; line-height: 1.5; }
select.form-input, select.form-control { cursor: pointer; }
.form-hint  { font-size: 12px; color: var(--muted); margin-top: 4px; }
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ── Meldungen ───────────────────────────────────────────────────────────── */
.flash, .flash-success, .flash-error, .flash-warning, .flash-info {
    padding: 10px 14px; margin-bottom: 16px; border-radius: var(--radius-md);
    border: 1px solid var(--border); font-size: 14px; line-height: 1.5;
}
.flash-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.flash-error   { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.flash-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.flash-info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }

/* ── Tabellen ────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
    padding: 12px 16px; text-align: left; white-space: nowrap;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
    border-bottom: 1px solid var(--border); background: transparent;
}
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--accent-light); cursor: pointer; }
.data-table tbody tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: var(--abdunklung);
    align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
/* S1: Solange irgendein Fenster oder Dialog offen ist, bewegt sich die Seite dahinter nicht (kein Scroll-Chaining; Classic: bodyLock()).
   Die Seite scrollt am Dokument (kein innerer Bereich mit overflow); :has() erfasst alle Overlays, auch verschachtelte und später erzeugte.
   scrollbar-gutter hält den Platz der Leiste frei, damit die Seite beim Öffnen nicht springt. */
html:has(.modal-overlay.open), html:has(.modal-overlay.open) body { overflow: hidden; }
html:has(.modal-overlay.open) { scrollbar-gutter: stable; }
.modal-overlay { overscroll-behavior: contain; }
.modal-box {
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border-2); border-radius: var(--radius-lg);
    padding: 24px; max-width: 560px; width: calc(100% - 2rem);
}
.modal-box-lg { max-width: 760px; }
.modal-header {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.modal-untertitel { font-size: 13px; color: var(--muted); margin-top: 2px; }
.modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 20px; padding: 4px; line-height: 1;
}
.modal-close:hover { color: var(--ink); }
.modal-fuss {
    display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
    margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* Rückfrage „Änderungen nicht gespeichert“ (js/ungespeichert.js): über allen Fenstern, auch über dem Teilnahme-Fenster */
.modal-overlay.modal-ganz-oben { z-index: 1200; }
.modal-box.modal-frage { max-width: 440px; }
.modal-box.modal-frage p { margin: 0; color: var(--ink-2); line-height: 1.5; }

/* „Was ist neu“ (V26): Modal nach der Anmeldung (layout/neuerungen.php), Seite und Fußzeile */
.neu-kopf-version { margin-left: 8px; vertical-align: 2px; }
.neu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.neu-eintrag { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.neu-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-muted); }
.neu-titel { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--ink); }
.neu-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.modal-neu .modal-header { align-items: flex-start; }
.modal-neu .modal-inhalt-neu { overflow-y: auto; display: grid; gap: 16px; }
.modal-neu .modal-fuss { align-items: center; justify-content: space-between; }
.modal-neu .checkbox-zeile { font-size: 13.5px; color: var(--ink-2); }
.neu-version-titel { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.neu-version-titel .datum, .neu-version h2 .datum { font-weight: 400; color: var(--muted); }
.neu-version { margin-bottom: 18px; }
.neu-version h2 { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.neu-version h2 .datum { font-size: 13px; }
.neu-leer { margin: 0; color: var(--muted); font-size: 13.5px; }
.seiten-fuss { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.seiten-fuss a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--border-2); }
.seiten-fuss a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Hinweis auf neue Portal-Aktivität (includes/head.php) */
.portal-hinweis { z-index: 9999; }
.portal-hinweis .modal-box { max-width: 460px; }
.portal-hinweis-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; color: var(--ink); }
.portal-hinweis-zeile .symbol { color: var(--accent); }

/* ── Fortschrittsbalken ──────────────────────────────────────────────────── */
.progress-header { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.progress-bar    { height: 6px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.progress-fill   { height: 100%; background: var(--accent); border-radius: var(--radius-sm); }
.progress-fill.voll { background: var(--success); }

/* ── KPI-Kacheln ─────────────────────────────────────────────────────────── */
.kpi-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi-card  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; }
.kpi-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.kpi-value { font-size: 22px; font-weight: 500; color: var(--accent); line-height: 1.1; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.kpi-sub   { font-size: 12px; color: var(--muted); }

/* ── Seitenwechsel ───────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 16px; }
.page-btn {
    padding: 5px 10px; border-radius: var(--radius-md);
    border: 1px solid var(--border-2); background: var(--surface);
    color: var(--ink-2); font-family: inherit; font-size: 14px; cursor: pointer; text-decoration: none;
}
.page-btn:hover  { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.page-btn.active { background: var(--accent); color: var(--auf-akzent); border-color: var(--accent); }
.page-btn:disabled, .page-btn:disabled:hover {
    background: var(--surface-2); color: var(--muted); border-color: var(--border); cursor: not-allowed;
}

/* ── Ablagefläche für Dateien ────────────────────────────────────────────── */
.drop-zone {
    padding: 32px; text-align: center; cursor: pointer;
    border: 2px dashed var(--border-2); border-radius: var(--radius-lg);
    background: transparent; color: var(--muted); font-size: 14px;   /* E16: Rand statt Fläche */
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); color: var(--accent); }

/* ── Code ────────────────────────────────────────────────────────────────── */
.code-block {
    background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md);   /* E16 */
    padding: 10px 12px; overflow-x: auto;
    font-family: var(--schrift-mono); font-size: 13px; line-height: 1.6; color: var(--ink);
}

/* ── Hilfsklassen ────────────────────────────────────────────────────────── */
.text-muted   { color: var(--muted); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-sm { font-size: 13px; } .text-xs { font-size: 12px; }
.fw-500  { font-weight: 500; } .fw-600  { font-weight: 600; }
.d-flex  { display: flex; } .align-center { align-items: center; }
.gap-8   { gap: 8px; }  .gap-12 { gap: 12px; }
.mt-8    { margin-top: 8px; }   .mt-16 { margin-top: 16px; }
.mb-0    { margin-bottom: 0; }  .mb-8  { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ── Schmale Bildschirme ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
    body > .app-layout,
    body > .nl-wrap {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "kopf" "links" "mitte";
    }
    .kopfleiste {
        position: static; height: auto;
        grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo rechts" "suche suche";
        padding: 8px 14px; gap: 8px 12px;
    }
    .kopf-logo   { grid-area: logo; }
    .kopf-suche  { grid-area: suche; max-width: none; }
    .kopf-rechts { grid-area: rechts; gap: 8px; }
    .benutzermenue-name { display: none; }
    .kopf-mandant select, .kopf-mandant-name { max-width: 150px; }

    /* Navigation als aufklappbares Menü über dem Inhalt */
    .nav-spalte { position: static; max-height: none; overflow: visible; padding: 12px 14px 0; }
    .nav-menue > summary {
        display: flex; align-items: center; gap: 8px; padding: 8px 12px; list-style: none; cursor: pointer;
        border: 1px solid var(--border-2); border-radius: var(--radius-md);
        background: var(--surface); color: var(--ink-2); font-size: 14px; font-weight: 500;
    }
    .nav-menue > summary::-webkit-details-marker { display: none; }
    .nav-menue[open] > summary { margin-bottom: 14px; }
    .main-content { padding: 16px 14px 32px; }

    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .liste-werkzeuge { grid-template-columns: 1fr; }
    .feld-raster { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; }
}
@media (max-width: 1000px) {
    .detail-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .filter-tafel { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
}
@media (max-width: 640px) {
    .kopf-timer:not(.warnung) { display: none; }   /* Warnung mit Restzeit/„Abgelaufen“ bleibt sichtbar */
    .kopf-knopf { padding: 0 8px; }
}

/* ── Druck ───────────────────────────────────────────────────────────────── */
@media print {
    .kopfleiste, .nav-spalte { display: none; }
    body > .app-layout, body > .nl-wrap { display: block; }
    .main-content { padding: 0; }
}

/* ══ EventDB ═══════════════════════════════════════════════════════════════
 * 2.8-ev1 (E3): Testsystem-Kennzeichnung (BI 9, 12; BK 12) – nur bei APP_UMGEBUNG=test setzt
 * layout/kopf.php die Klasse testsystem am body. Kopf in Testsystemrot, beide Themes und dunkel.
 * Werte aus BI 2.1: Kopf #A8354A (weiße Schrift 6,42:1).
 */
body.testsystem { --kopf: #A8354A; }
.testsystem-etikett {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
    border: 1px solid var(--auf-kopf); border-radius: var(--radius-sm);
    color: var(--auf-kopf); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
}
/* Kopf der Anmeldeseite: Logo und Etikett nebeneinander */
.anmelde-kopf .kopf-logo { gap: 12px; }

/* 2.8-ev2 (E4): Modals – Kopf und Fuß stehen, nur der Inhalt scrollt (SU 3.4); Ansichtshinweis */
.modal-box { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.modal-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-hinweis { margin: -8px 0 14px; font-size: 13px; color: var(--muted); }
.modal-fuss .links { margin-right: auto; }

/* 2.8-ev3 (E4): deaktivierte Symbolknöpfe – deckend abgeblendet statt Transparenz (BI 1) */
.icon-btn:disabled, .icon-btn:disabled:hover {
    background: var(--surface-2); color: var(--border-2); border-color: var(--border); cursor: not-allowed;
}

/* 2.8-ev4 (E5): Sortierbare Spaltenköpfe, Segment-Marken unter dem Namen, Listenfuß */
.data-table th a { color: inherit; text-decoration: none; }
.data-table th a:hover, .data-table th[aria-sort] a { color: var(--accent); }
.segmente { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.segmente .badge { padding: 0 6px; font-size: 11px; }
.liste-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.liste-fuss .pagination { margin-top: 0; }
.kopf-aktionen form { margin: 0; }

/* 2.8-ev5 (E5): Filterformular nebeneinander. Blue Ice 2.8 (referenz/blue-ice.css:674) kombiniert
   repeat(auto-fit, …) mit einer auto-Spur – laut CSS-Grid nicht erlaubt, die Deklaration ist ungültig
   und das Formular fiel auf eine Spalte zurück. */
.filter-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filter-formular .form-group { flex: 1 1 160px; min-width: 0; }
.filter-formular .form-group.breit { flex-grow: 2; flex-basis: 240px; }
.filter-formular-knoepfe { flex: 0 0 auto; }

/* 2.8-ev6 (E6): Personen-Modal – feste Höhe, Kopf/Reiter/Fuß stehen, nur der Inhalt scrollt (SU 3.4) */
.modal-box.modal-fest { height: min(880px, calc(100vh - 2rem)); }
.modal-box.modal-person { max-width: 920px; }
.modal-overlay.modal-oben { z-index: 1100; }
.modal-header .modal-title .badge { margin-left: 8px; vertical-align: 2px; }
.modal-kopf-text { min-width: 0; }
.modal-kopf-knoepfe { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.person-meldung { margin: 0 0 12px; }
.modal-inhalt > form > .reiter-tafel > .card, .modal-inhalt > form > .reiter-tafel > .raster-2 { margin-bottom: 12px; }
.modal-inhalt .card { padding: 14px 16px; }
.modal-inhalt .raster-2 > .card { margin-bottom: 0; }

/* Reiter: aktiver Reiter vollflächig in der Theme-Farbe (BI 1, E12/E13) */
.reiter-leiste { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.reiter {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface);
    color: var(--ink-2); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.reiter:hover { border-color: var(--accent); color: var(--accent); }
.reiter[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--auf-akzent); }
.zaehler-marke { min-width: 20px; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--radius-sm); font-size: 12px; text-align: center; }

/* #17 Konflikt beim feldweisen Speichern: Feld, Kasten darunter, erledigte Zeile, Reiter-Marke */
.form-input.konflikt-feld, .konflikt-feld:not(.form-input) { border-color: var(--warning); background: var(--warning-bg); }
.ankreuz-raster.konflikt-feld, .checkbox-zeile .konflikt-feld, fieldset.konflikt-feld { outline: 2px solid var(--warning); outline-offset: 1px; }
.konflikt-kasten {
    margin-top: 6px; padding: 10px 12px; background: var(--warning-bg); color: var(--ink);
    border: 1px solid var(--warning-border); border-radius: var(--radius-md); font-size: 13px; line-height: 1.5;
}
.konflikt-titel { margin: 0 0 6px; font-weight: 600; color: var(--warning); }
.konflikt-werte { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0 0 8px; }
.konflikt-werte dt { color: var(--muted); }
.konflikt-werte dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.konflikt-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.konflikt-kasten.konflikt-erledigt { background: transparent; border-color: transparent; padding: 4px 0; }
.konflikt-erledigt-text { margin: 0; color: var(--success); }
.konflikt-aendern { border: 0; background: transparent; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.konflikt-aendern:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zaehler-marke.konflikt-marke { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }

/* D4/B1 Sofort-Speichern: Statuszeile am Feld (js/sofort.js). Kontrast hell 4,60–6,54:1, dunkel 4,94–6,24:1 (Mockup B1 1.0, gemessen). */
.feld-status { min-height: 18px; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.feld-status svg { flex: none; }
.feld-status.speichert { color: var(--muted); }
.feld-status.gespeichert { color: var(--success); }
.feld-status.fehler { color: var(--danger); }
.feld-status.konflikt { color: var(--warning); }
.feld-status button { border: 0; background: transparent; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.form-input.fehler-feld { border-color: var(--danger); background: var(--danger-bg); }

/* V16 Bearbeitungshinweis: Streifen unter dem Modal-Kopf, ganz rot in der Fehlerfarbe (kein Warngelb, das bleibt dem Konfliktkasten).
   Kontrast: hell 5,88:1 (#b3261e auf #fdf0f0), dunkel 5,51:1 (#f0645a auf #2e1212) */
.bearbeitung-hinweis {
    display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 14px; padding: 9px 12px;
    background: var(--danger-bg); color: var(--danger); font-size: 14px; line-height: 1.4;
    border: 1px solid var(--danger-border); border-left: 3px solid var(--danger); border-radius: var(--radius-md);
}
.bearbeitung-hinweis .symbol, .bearbeitung-hinweis svg { flex: none; margin-top: 2px; color: var(--danger); }
.bearbeitung-haupt { display: block; font-weight: 600; color: var(--danger); }
.bearbeitung-neben { display: block; margin-top: 2px; font-size: 12px; color: var(--danger); }

/* Stammdaten mit Foto */
.stammdaten-raster { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 12px; }
.foto-rahmen {
    display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2);
}
.foto-rahmen img { width: 100%; height: 100%; object-fit: cover; }
.foto-ersatz { font-size: 28px; font-weight: 600; color: var(--muted); }
.foto-rahmen.foto-ersatz { color: var(--muted); }
.foto-knoepfe { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.foto-knoepfe label.btn { position: relative; }
.foto-knoepfe label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Raster für Adresse */
.raster-strasse { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.raster-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.raster-4 .form-group, .raster-strasse .form-group, .form-grid .form-group, .form-grid-3 .form-group { margin-bottom: 0; }
.form-grid + .form-group, .form-grid-3 + .form-group, .stammdaten-raster + .form-group { margin-top: 14px; }
.abstand-oben { margin-top: 14px; }

/* Schalter (Segmente, DSGVO) und Ankreuzlisten */
.schalter-liste { list-style: none; }
.schalter-liste li + li { border-top: 1px solid var(--border); }
.schalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
label.schalter-zeile { justify-content: flex-start; }
.schalter-text { display: flex; flex-direction: column; flex: 1; }
.schalter-titel { font-size: 14px; font-weight: 600; color: var(--ink); }
.schalter-unter { font-size: 12px; color: var(--muted); }
.ankreuz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.marken-liste { display: flex; flex-wrap: wrap; gap: 6px; }

/* Teilnahmen als Liste mit Knöpfen */
button.listen-zeile.listen-knopf {
    width: 100%; border: 0; background: transparent; font-family: inherit; font-size: inherit;
    color: inherit; text-align: left; cursor: pointer;
}
button.listen-zeile.listen-knopf + .listen-zeile, .listen-zeile + button.listen-zeile.listen-knopf { border-top: 1px solid var(--border); }
button.listen-zeile.listen-knopf:hover { background: var(--accent-light); }
.listen-meta { display: block; }

/* Teilnahme: Anmeldung als Knopfgruppe (Radio), aktueller Wert vollflächig (BI .status-knopf) */
.feld-gruppe { border: 0; margin: 0 0 16px; padding: 0; }
.status-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.status-knopf.status-radio { display: inline-flex; align-items: center; }
.status-knopf.status-radio:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--auf-akzent); }
.status-knopf.status-radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-knopf.status-radio:has(input:disabled) { cursor: default; }
.modal-teilnahme .form-grid-3 { margin-bottom: 14px; }

/* 2.8-ev7 (E7): Veranstaltungs-Modal, Teilnehmer mit Sammelaktionen, Hinzufügen */
.modal-box.modal-veranstaltung { max-width: 1000px; }
.reiter-tafel > .modal-hinweis { margin-top: 0; }   /* im Scrollbereich: ohne negativen Abstand aus ev2 */
.feld-wert.agenda { white-space: normal; }
.teilnehmer-bereich .tabelle-karte { margin-bottom: 0; }
.teilnehmer-tabelle td, .teilnehmer-tabelle th { padding: 9px 12px; }
.teilnehmer-tabelle .auswahl-zelle { width: 36px; padding-right: 0; }
.teilnehmer-tabelle tbody tr.ist-ausgewaehlt { background: var(--accent-light); }
.teilnehmer-tabelle input[type="checkbox"], .sammel-alle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.link-knopf {
    padding: 0; border: 0; background: transparent; font-family: inherit; font-size: inherit;
    text-align: left; cursor: pointer;
}
.link-knopf:hover { color: var(--accent); }
.sammel-leiste {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2);
}
.sammel-alle { font-weight: 600; color: var(--accent); }
.sammel-menue { position: relative; }
.aktionen-liste {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
    min-width: 250px; padding: 6px; list-style: none;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border-2); border-radius: var(--radius-lg);
}
.menue-gruppe {
    padding: 6px 10px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted);
}
.menue-eintrag.gefahr { color: var(--danger); }
.teilnehmer-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.modal-box.modal-hinzufuegen { max-width: 620px; height: min(720px, calc(100vh - 2rem)); }
.such-liste { list-style: none; }
.such-liste > li + li { border-top: 1px solid var(--border); }
.such-liste .listen-zeile + .listen-zeile, .such-liste button.listen-zeile.listen-knopf + .listen-zeile { border-top: 0; }
.such-liste button.listen-zeile.listen-knopf svg { flex-shrink: 0; color: var(--accent); }
.such-liste .listen-inhalt { flex: 1; min-width: 0; }
.listen-zeile.ist-bereits { opacity: 0.55; }
.such-mehr { padding: 10px; text-align: center; }

/* 2.8-ev8 (E8): Live-Suche (Dashboard), nächste Veranstaltung, Suchergebnisse */
.live-suche { position: relative; display: flex; align-items: center; margin-bottom: 20px; }
.live-suche > .symbol { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.live-suche .live-feld { height: 46px; padding-left: 40px; padding-right: 80px; font-size: 15px; }
.live-kbd {
    position: absolute; right: 12px; padding: 2px 6px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 600;
}
.live-treffer {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; padding: 6px;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
}
.live-gruppe {
    margin: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.live-eintrag {
    display: flex; flex-direction: column; padding: 7px 10px; border-radius: var(--radius-md);
    color: var(--ink); text-decoration: none;
}
.live-eintrag:hover, .live-eintrag:focus { background: var(--accent-light); color: var(--accent); outline: none; }
.live-titel { font-size: 14px; font-weight: 500; }
.live-unter { font-size: 12px; color: var(--muted); }
.live-leer { margin: 8px 10px; font-size: 13px; color: var(--muted); }
.abschnitt-titel .symbol { vertical-align: -2px; }
.abschnitt-titel .zaehler-marke { margin-left: 4px; font-weight: 600; letter-spacing: 0; }
.abschnitt-titel .karte-zusatz { text-transform: none; letter-spacing: 0; }
a.listen-zeile.such-treffer > .symbol:last-child { flex-shrink: 0; color: var(--border-2); }
.such-symbol {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px;
    border-radius: 50%; background: var(--accent-light); color: var(--accent);
}
.listen-zeile .listen-titel, .listen-zeile .listen-meta { display: block; }

/* 2.8-ev9 (E9): Benutzerverwaltung, Audit-Log */
.modal-box.modal-konto { max-width: 720px; }
.zeile-titel + .badge { margin-left: 6px; }
.nowrap { white-space: nowrap; }
.audit-tabelle td { vertical-align: top; }
.audit-tabelle tbody tr:hover { cursor: default; }
.audit-details summary { color: var(--accent); cursor: pointer; }
.audit-details .quelltext { max-width: 460px; max-height: 260px; margin-top: 6px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* 2.8-ev10 (Klicktest 1): Dashboard-Kacheln, Newsletteranrede, Dubletten, Listenpflege */
.dash-veranstaltungen { margin-top: 8px; }
.mandanten-raster.v-kacheln {   /* volle Breite statt max. 860 px (Blue Ice), Spalten automatisch */
    max-width: none; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 12px;
}
.mandant-kachel.v-kachel { text-decoration: none; }
.mandant-kachel.v-kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v-datum { font-size: 15px; }
.v-datum.vergangen { border-color: var(--border-2); color: var(--muted); }
.v-kachel-ort { font-size: 13px; color: var(--muted); }
.mandant-meta .zahl-zusage { color: var(--status-freigabe); font-weight: 600; }
.mandant-meta .zahl-offen { color: var(--status-warten); font-weight: 600; }
.mandant-meta .zahl-absage { color: var(--status-ausgefallen); font-weight: 600; }
.mandant-meta .zahl-teilgenommen { color: var(--status-gelaufen); font-weight: 600; }
.raster-anrede { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.raster-anrede .form-group { margin-bottom: 0; }
.dubletten-hinweis {
    margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--status-warten);
    border-radius: var(--radius-md); background: var(--surface); font-size: 13px;
}
.dubletten-titel { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.dubletten-hinweis ul { margin: 0; padding-left: 18px; }
.inline-form { display: inline-block; margin: 0; }
.umbenennen-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.umbenennen-form .form-input { max-width: 260px; }

/* 2.8-ev11: Änderungsverlauf je Person */
.verlauf-eintrag { padding: 10px 0; }
.verlauf-eintrag + .verlauf-eintrag { border-top: 1px solid var(--border); }
.verlauf-eintrag p { margin: 0; }
.verlauf-kopf { font-size: 12px; color: var(--muted); }
.verlauf-feld { font-size: 14px; font-weight: 600; color: var(--ink); }
.verlauf-werte { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.verlauf-alt { color: var(--muted); text-decoration: line-through; }
.verlauf-seiten { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

/* 2.8-ev12: Farbschema „Ice On Fire“ – Klasse theme-feuer am html (wie theme-gruen), Werte aus
   mockups/mockup-ice-on-fire-v3.html (Block „Ice On Fire“, Varianten 2 und 3). Nur Farben/Verläufe. */
.kopf-logo .flamme { display: none; }
.farbmuster.feuer { background: linear-gradient(135deg, #fbbf24, #f97316, #dc2626); }
.farbwahl { flex-wrap: wrap; }                 /* drei Knöpfe: umbrechen statt Beschriftung zu teilen */
.farbwahl-titel { flex-basis: 100%; }
.farbwahl-knopf { white-space: nowrap; }
:root.theme-feuer {
    --kopf: #3b1408;            /* Glut: tiefes Rostrot */
    --accent: #b04f08;          /* Bernstein, auf der Seite #f3eee9 4,59:1 */
    --auf-akzent: #ffffff;
    --glut-1: #fbbf24; --glut-2: #f97316; --glut-3: #dc2626;   /* Gelb – Orange – Rot */
    --bg: #f3eee9; --surface: #ffffff; --surface-2: #faf6f2;
    --border: #ebe2d9; --border-2: #dcccbd;
    --ink: #2a1a12; --ink-2: #4a3428; --muted: #7c6656;
    --feuer: linear-gradient(90deg, #b45309, #c2410c 50%, #b91c1c);            /* Textverlauf hell: Karte ≥ 5,0:1, Seite ≥ 4,36:1 */
    --feuer-senkrecht: linear-gradient(180deg, #fbbf24, #f97316, #dc2626);
    --feuer-logo: linear-gradient(90deg, #fbbf24, #f97316, #fb7185);
    --feuer-logo-hover: linear-gradient(90deg, #f59e0b, #ea580c, #f43f5e);
    --auf-feuer: #1a0d05;
    background: #f3eee9;
}
:root.theme-feuer.dark-mode { background: #140c09; }
:root.theme-feuer body.dark-mode {
    --kopf: #2a0d05; --accent: #f59e0b; --auf-akzent: #1a0d05;
    --accent-light: color-mix(in srgb, var(--accent) 12%, #211814);
    --accent-muted: color-mix(in srgb, var(--accent) 24%, #211814);
    --accent-hover: color-mix(in srgb, var(--accent) 85%, #ffffff);
    --bg: #140c09; --surface: #211814; --surface-2: #2a1f1a;
    --border: #3a2c25; --border-2: #4a3930;
    --ink: #f3e9e1; --ink-2: #d6c4b6; --muted: #a08a7a;
    --feuer: linear-gradient(90deg, #fbbf24, #f97316 50%, #ef4444);            /* Textverlauf dunkel */
}
:root.theme-feuer body.testsystem, :root.theme-feuer body.testsystem.dark-mode { --kopf: #A8354A; }   /* BI 12 bleibt */
/* Glutlinie 3 px unter der Kopfleiste */
:root.theme-feuer .kopfleiste { border-bottom: 0; }
:root.theme-feuer .kopfleiste::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: linear-gradient(90deg, var(--glut-1), var(--glut-2) 45%, var(--glut-3));
}
/* Logo: Flammensymbol und Schrift im Logo-Verlauf */
:root.theme-feuer .kopf-logo .flamme { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; }
:root.theme-feuer .kopf-logo .logo-name {
    background: var(--feuer-logo); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}
/* Testsystem: roter Kopf (BI 12) – Logo-Verlauf hätte dort nur 2,3:1, daher Schrift weiß wie in Blau/Grün */
:root.theme-feuer body.testsystem .kopf-logo .logo-name { background: none; color: var(--auf-kopf); }
/* Seitentitel und KPI-Werte im Verlauf (inline-block, damit der Verlauf über dem Text liegt) */
:root.theme-feuer .page-title, :root.theme-feuer .kpi-value {
    display: inline-block; background: var(--feuer); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root.theme-feuer .page-title { font-weight: 600; }
/* Aktiver Menüpunkt: senkrechte Glutleiste */
:root.theme-feuer .nav-link.ist-aktiv { border-left: 3px solid transparent; border-image: var(--feuer-senkrecht) 1; }
/* Knöpfe, aktiver Umschalter, Avatar im Logo-Verlauf mit dunkler Schrift */
:root.theme-feuer .btn-primary,
:root.theme-feuer .ansicht-umschalter a[aria-current="page"],
:root.theme-feuer .avatar {
    background: var(--feuer-logo); color: var(--auf-feuer); border-color: #f97316; font-weight: 600;
}
:root.theme-feuer .btn-primary:hover { background: var(--feuer-logo-hover); color: var(--auf-feuer); border-color: #f97316; }
:root.theme-feuer .btn-secondary:hover { border-color: #f97316; }
/* Dashboard: Datumskästen mit Verlaufsrahmen, nächste Veranstaltung mit glühender Oberkante */
:root.theme-feuer .mandant-kachel:hover { border-color: var(--glut-2); }
:root.theme-feuer .v-datum:not(.vergangen) {
    border: 2px solid transparent; border-image: var(--feuer) 1;
    background: var(--feuer); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root.theme-feuer .mandant-kachel.heiss { position: relative; }
:root.theme-feuer .mandant-kachel.heiss::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--feuer);
}

@media (max-width: 860px) {
    .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root.theme-feuer .kopfleiste { position: relative; }
    .raster-anrede { grid-template-columns: minmax(0, 1fr); }
    .stammdaten-raster { grid-template-columns: minmax(0, 1fr); }
    .modal-kopf-knoepfe .text-muted { display: none; }
}

/* ── Tabellenansicht „Erweiterte Suche“ (2.8-ev15, Vorlage docs/mockups/mockup-tabellenansicht-v3.html) ─────────── */
/* hidden muss gegen display:grid/flex gewinnen – sonst bleibt das Menü sichtbar */
[hidden] { display: none !important; }

.tabellenansicht { display: grid; gap: 14px; }
.tabellenansicht .titelzeile { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin: 0; }
.tabellenansicht .titelzeile h2 { margin: 0; font-size: 20px; font-weight: 700; }
.tabellenansicht .ta-zaehler { color: var(--muted); font-variant-numeric: tabular-nums; }
.reiter-leiste a.reiter { text-decoration: none; }
.tabellenansicht .ansicht { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.kriterien { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 30px; }
.kriterien .leer { color: var(--muted); font-size: 14px; }
.kriterien .chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; font-size: 13px;
    background: var(--accent-light); border: 1px solid var(--accent-muted); border-radius: var(--radius-md); color: var(--ink);
}
.kriterien .chip b { font-weight: 600; }
.kriterien .chip .art { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; }
.kriterien .chip-weg {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: var(--radius-md); color: var(--muted); text-decoration: none; line-height: 1;
}
.kriterien .chip-weg:hover { background: var(--accent-muted); color: var(--ink); }
.kriterien .alle-weg { color: var(--accent); font-size: 13px; text-decoration: underline; padding: 2px 6px; }

.tabellenrahmen { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; }
.ta-tabelle { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.ta-tabelle th, .ta-tabelle td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ta-tabelle thead th {
    position: sticky; top: 0; z-index: 1; padding: 0;
    background: var(--surface-2); font-weight: 600; font-size: 13px; color: var(--ink-2);
}
.ta-tabelle .kopfzelle {
    display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px;
    color: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    user-select: none; -webkit-user-select: none;   /* Ziehen nur mit Maus/Stift; Touch wischt und scrollt (2.8-ev18) */
}
.ta-tabelle th.gezogen { opacity: 0.45; }
/* Index-Marke (2.8-ev39, D2/B6): ganze Marke in der Indexfarbe gefüllt, dunkle Schrift; Blacklist dunkle Fläche mit heller Schrift. Feste, deckende Farben in allen Farbschemata
   (Kontrast mindestens 4,5:1, geprüft in tests/browser/index_marke_browser.mjs). Redlist kräftiger rot (Wunsch Carsten 18.10.2026). */
:root { --index-gruen: #3ec06f; --index-gelb: #f5c518; --index-blau: #5b9bf0; --index-rot: #e8453a; --index-dunkel: #14284b; --index-sonst: #b8c2d0;
        --index-schrift: #0b1220; --index-schrift-hell: #ffffff; }
/* Alle Marken gleich breit (Wunsch Carsten 26.10.2026, Deploy #67): Mindestbreite = längster Begriff („Yellowlist“: Text 4,56 em + 2 × 10 px Innenabstand = 74,7 px) mit etwas Luft
   (6,5 em = 78 px einschließlich Innenabstand, border-box), Text zentriert; eigene, längere Werte der Listenpflege wachsen darüber hinaus (nur min-width). */
.index-marke { display: inline-flex; align-items: center; justify-content: center; min-width: 6.5em; text-align: center; padding: 2px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
               background: var(--index-sonst); color: var(--index-schrift); }
.index-marke.index-gruen { background: var(--index-gruen); }
.index-marke.index-gelb { background: var(--index-gelb); }
.index-marke.index-blau { background: var(--index-blau); }
.index-marke.index-rot { background: var(--index-rot); }
.index-marke.index-dunkel { background: var(--index-dunkel); color: var(--index-schrift-hell); }
/* Scrollleiste am unteren Fensterrand (2.8-ev39, D2/B9, js/scrollleiste.js): haftet, solange die Tabelle im Bild steht; die eingebaute Leiste des Rahmens entfällt dann */
.scroll-block { position: relative; min-width: 0; }   /* min-width 0: als Rasterelement darf der Block nicht auf die Tabellenbreite wachsen */
.mit-leiste { scrollbar-width: none; }
.mit-leiste::-webkit-scrollbar { display: none; }
.scroll-leiste { position: sticky; bottom: 0; z-index: 50; height: 22px; display: flex; align-items: center; padding: 0 4px; background: var(--surface-2); border: 1px solid var(--border-2); }
.scroll-leiste[hidden] { display: none; }
.scroll-spur { position: relative; flex: 1; height: 14px; background: var(--border); border-radius: 7px; cursor: pointer; }
.scroll-daumen { position: absolute; top: 0; height: 14px; min-width: 40px; background: var(--muted); border-radius: 7px; cursor: grab; touch-action: none; }
.scroll-daumen:hover, .scroll-daumen.zieht { background: var(--accent); cursor: grabbing; }
/* Auswahl „Pro Seite“ oben über der Tabelle, mittig (2.8-ev39, D2/B5) */
.liste-je-oben { display: flex; justify-content: center; margin: 0 0 8px; }
/* Zieh-Kasten (2.8-ev37): Kopie der angefassten Überschrift, deutlich eingefärbt, folgt Maus bzw. Finger */
.zieh-kasten {
    position: absolute; z-index: 97; box-sizing: border-box; display: flex; align-items: center; padding: 0 12px; overflow: hidden; white-space: nowrap;
    background: var(--accent); color: #ffffff; font-size: 13px; font-weight: 700; border: 2px solid var(--accent-hover); border-radius: var(--radius-sm); pointer-events: none;
}
.einfuegemarke { position: absolute; z-index: 95; width: 3px; background: var(--accent); pointer-events: none; }
.nur-vorlesen {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ta-tabelle .kopfzelle:hover { background: var(--accent-light); }
.ta-tabelle .kopfzelle.offen { background: var(--accent-muted); }
.ta-tabelle .kopfzelle .marke { display: inline-flex; gap: 3px; margin-left: auto; color: var(--accent); font-size: 12px; }
.ta-tabelle .kopfzelle .marke i {
    font-style: normal; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 3px; border-radius: var(--radius-md); background: var(--accent-muted); font-variant-numeric: tabular-nums;
}
.ta-tabelle td.zahl, .ta-tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.ta-tabelle th.zahl .kopfzelle { justify-content: flex-end; }
.ta-tabelle td.datum { font-variant-numeric: tabular-nums; }
.ta-tabelle tbody tr { cursor: pointer; }
.ta-tabelle tbody tr:hover td { background: var(--accent-light); }
.ta-tabelle tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ta-tabelle td.leer-wert { color: var(--muted); }
.ta-tabelle .keine-treffer { padding: 28px 16px; text-align: center; color: var(--muted); white-space: normal; cursor: default; }

.tabelle-je { display: inline-flex; align-items: center; gap: 4px; }
.je-link { padding: 1px 6px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; }
.je-link:hover { color: var(--accent); }
.je-link.aktiv { background: var(--accent); color: var(--auf-akzent); }

/* Spaltenmenü */
.tabellenmenue {
    position: absolute; z-index: 90; width: 340px; max-width: calc(100vw - 32px); overflow-y: auto; display: grid;
    background: var(--surface); color: var(--ink); border: 1px solid var(--border-2); border-radius: 10px;
    box-shadow: var(--schatten-schwebend);
}
.tabellenmenue section { padding: 14px; display: grid; gap: 10px; }
.tabellenmenue section + section { border-top: 1px solid var(--border); }
.tabellenmenue button { font: inherit; color: inherit; }
.tabellenmenue .m-kopf { display: flex; gap: 10px; align-items: center; }
.tabellenmenue .m-feld {
    flex: 1; min-width: 0; padding: 8px 12px; font-weight: 600;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.tabellenmenue .m-typ { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; margin-left: 6px; }
.tabellenmenue .m-zu {
    width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--border-2); border-radius: var(--radius-md);
    background: var(--surface); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.tabellenmenue .m-zu:hover { color: var(--ink); border-color: var(--ink-2); }
.tabellenmenue .m-filter {
    width: 100%; padding: 8px 12px; font: inherit; color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-md);
}
.tabellenmenue .m-syntax { font-size: 12px; color: var(--muted); line-height: 1.45; }
.tabellenmenue .m-syntax code {
    font-family: var(--schrift-mono); font-size: 11.5px; padding: 0 4px;
    background: var(--surface-2); border-radius: var(--radius-sm); color: var(--ink-2);
}
.tabellenmenue .m-auswahl { display: grid; gap: 4px; max-height: 200px; overflow-y: auto; }
.tabellenmenue .m-auswahl label { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: var(--radius-md); cursor: pointer; }
.tabellenmenue .m-auswahl label:hover { background: var(--accent-light); }
.tabellenmenue .m-auswahl .n { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tabellenmenue .m-aehnlich { align-self: flex-start; border: 1px solid var(--border); background: var(--surface-2); padding: 5px 10px;
    font-size: 13px; border-radius: var(--radius-md); cursor: pointer; color: var(--ink); }
.tabellenmenue .m-aehnlich:hover { background: var(--accent-light); }
.tabellenmenue .m-aehnlich[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--auf-akzent); }
.tabellenmenue .leiste { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.tabellenmenue .leiste button { border: 0; background: var(--surface-2); padding: 8px 9px; font-size: 13px; cursor: pointer; border-radius: 0; color: var(--ink); }
.tabellenmenue .leiste button:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.tabellenmenue .leiste button:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.tabellenmenue .leiste button:hover { background: var(--accent-light); }
.tabellenmenue .leiste button.an { background: var(--accent); color: var(--auf-akzent); }
.tabellenmenue .leiste button:disabled { opacity: 0.45; cursor: not-allowed; }
.tabellenmenue .leiste button:disabled:hover { background: var(--surface-2); }
.tabellenmenue .m-tipp { font-size: 12px; color: var(--muted); text-align: center; }
.tabellenmenue .m-fuss { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.tabellenmenue .knopf {
    flex: 1; padding: 9px 12px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--radius-md);
}
.tabellenmenue .knopf.rand { color: var(--accent); border-color: var(--accent); }
.tabellenmenue .knopf.primaer { background: var(--accent); border-color: var(--accent); color: var(--auf-akzent); }
.tabellenmenue .knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.tabellenmenue .einblenden-liste { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.tabellenmenue .einblenden-liste button {
    text-align: left; padding: 6px 10px; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-md);
}
.tabellenmenue .einblenden-liste button:hover { border-color: var(--accent); }
/* Stufe 2–4: sieht aus wie eine Schaltfläche, nur abgedunkelt; Tooltip „folgt“ */
.tabellenmenue .folgt, .tabellenmenue .folgt:hover { opacity: 0.45; cursor: not-allowed; text-decoration: none; }
.tabellenmenue .leiste .folgt:hover { background: var(--surface-2); }
.tabellenmenue button:focus-visible, .tabellenmenue input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
    .tabellenmenue {
        position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; z-index: 1050;
        width: 100%; max-width: 100%; max-height: 80vh !important; border-radius: 10px 10px 0 0;
        box-shadow: var(--schatten-schwebend-oben);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .tabellenansicht .ansicht { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .tabellenmenue { animation: tabellenmenue-auf 120ms ease-out; }
    @keyframes tabellenmenue-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ── Gespeicherte Suchen (2.8-ev19, Vorlage docs/mockups/mockup-gespeicherte-suchen-v1.html) ──────────────────── */
.suchen { display: grid; gap: 10px; margin-bottom: 12px; }
.suchen svg.ic, .suchen-pop svg.ic, .suchen-dialog svg.ic {
    width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.suchen button, .suchen-pop button, .suchen-dialog button, .suchen-pop input, .suchen-dialog input { font: inherit; color: inherit; }
.suchen button:focus-visible, .suchen-pop button:focus-visible, .suchen-pop input:focus-visible,
.suchen-dialog button:focus-visible, .suchen-dialog input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.suchen .knopf, .suchen-pop .knopf, .suchen-dialog .knopf {
    border: 1px solid var(--border-2); background: var(--surface); border-radius: 6px; padding: 6px 12px;
    cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.suchen .knopf:hover, .suchen-dialog .knopf:hover { border-color: var(--accent); color: var(--accent); }
.suchen .knopf.primaer, .suchen-dialog .knopf.primaer { background: var(--accent); border-color: var(--accent); color: var(--auf-akzent); font-weight: 600; }
.suchen .knopf.primaer:hover, .suchen-dialog .knopf.primaer:hover { background: var(--accent-hover); color: var(--auf-akzent); }
.suchen .knopf.still, .suchen-dialog .knopf.still { border-color: transparent; background: transparent; color: var(--muted); }
.suchen .knopf.still:hover, .suchen-dialog .knopf.still:hover { color: var(--ink); }
.suchen .knopf.klein { padding: 3px 8px; font-size: 13px; gap: 4px; }
.suchen-dialog .knopf.gefahr { color: var(--danger); border-color: var(--danger); }
.suchen-dialog .knopf.gefahr.voll { background: var(--danger); color: var(--surface); }
.suchen-dialog .knopf:disabled { opacity: 0.6; cursor: wait; }

.suchen .wahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.suchen .trenner-v { width: 1px; align-self: stretch; background: var(--border-2); margin-inline: 4px; }
.suchen .wahl .rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.suchen .dd {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-2); background: var(--surface);
    border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600; color: var(--ink);
}
.suchen .dd:hover, .suchen .dd.offen { border-color: var(--accent); }
.suchen .dd.drin { border-color: var(--accent); background: var(--accent-light); }
.suchen .dd .ic-gem { color: var(--accent); }
.suchen .dd .ic-ich { color: var(--muted); }
.suchen .dd .anz {
    font-weight: 500; font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 999px;
    padding: 0 8px; font-variant-numeric: tabular-nums;
}

.suchen .ansichtleiste {
    display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; background: var(--surface);
    border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px;
}
.suchen .aktuell { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.suchen .aktuell-name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.suchen .art {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; border-radius: 999px; padding: 3px 10px;
}
.suchen .art.gem { background: var(--accent-muted); color: var(--accent); }
.suchen .art.ich { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border-2); }
.suchen .art.std { background: var(--surface-2); color: var(--muted); }
.suchen .meta { font-size: 13.5px; color: var(--muted); min-width: 0; }
.suchen .meta b { color: var(--ink-2); font-weight: 600; }
.suchen .aktionen { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.suchen .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); display: inline-block; }
.suchen .pille-geaendert {
    display: inline-flex; align-items: center; gap: 6px; background: var(--warning-bg); color: var(--warning);
    font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px;
}
.suchen .suchen-hinweis {
    flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--warning); background: var(--warning-bg);
    border: 1px solid var(--warning-border); border-radius: 6px; padding: 6px 10px;
}
.suchen .suchen-gesperrt { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.suchen .chip.recht {
    display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border-2);
    color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 13px;
}

.suchen-pop {
    position: absolute; z-index: 90; width: 300px; max-width: calc(100vw - 32px); background: var(--surface);
    border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--schatten-schwebend); display: grid; color: var(--ink);
}
.suchen-pop.dd-pop { width: 360px; }
.suchen-pop section { padding: 12px; display: grid; gap: 8px; }
.suchen-pop section + section { border-top: 1px solid var(--border); }
.suchen-pop .dd-mitte { padding-block: 6px; }
.suchen-pop .feld { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; padding: 7px 10px; }
.suchen-pop .dd-liste { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.suchen-pop .dd-eintrag {
    display: grid; grid-template-columns: 18px 1fr; gap: 0 8px; width: 100%; border: 0; background: transparent;
    text-align: left; padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.suchen-pop .dd-eintrag:hover, .suchen-pop .dd-eintrag:focus-visible { background: var(--accent-light); }
.suchen-pop .dd-eintrag.akt { background: var(--accent-muted); }
.suchen-pop .dd-eintrag .haken { color: var(--accent); font-weight: 700; grid-row: span 2; }
.suchen-pop .dd-eintrag .n { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.suchen-pop .dd-eintrag .m { grid-column: 2; font-size: 12px; color: var(--muted); }
.suchen-pop .dd-leer { margin: 0; padding: 8px; font-size: 13.5px; color: var(--muted); }
.suchen-pop .eintrag {
    display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 7px 8px;
    border-radius: 6px; cursor: pointer; text-align: left;
}
.suchen-pop .eintrag:hover { background: var(--accent-light); }
.suchen-pop .eintrag.gefahr { color: var(--danger); }
.suchen-pop .eintrag.gefahr:hover { background: var(--danger-bg); }
.suchen-pop .eintrag:disabled { opacity: 0.45; cursor: not-allowed; background: transparent; }
.suchen-pop .info, .suchen-dialog .info { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.suchen-overlay { position: fixed; inset: 0; background: var(--abdunklung); z-index: 1060; display: grid; place-items: center; padding: 16px; }
.suchen-dialog {
    width: 460px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--schatten-schwebend); display: grid; color: var(--ink);
}
.suchen-dialog > * { padding: 16px 20px; }
.suchen-dialog > * + * { border-top: 1px solid var(--border); }
.suchen-dialog h2 { margin: 0; font-size: 18px; font-weight: 700; }
.suchen-dialog .inhalt { display: grid; gap: 14px; }
.suchen-dialog label.titel { font-size: 13px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 4px; }
.suchen-dialog input[type=text] { width: 100%; border: 1px solid var(--border-2); background: var(--surface-2); border-radius: 6px; padding: 8px 12px; }
.suchen-dialog input[type=text][aria-invalid=true] { border-color: var(--danger); }
.suchen-dialog .fehler { color: var(--danger); font-size: 13px; margin-top: 4px; }
.suchen-dialog .sicht { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.suchen-dialog .sicht legend { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; padding: 0; }
.suchen-dialog .sicht label {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px; cursor: pointer;
}
.suchen-dialog .sicht label:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.suchen-dialog .sicht label:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.suchen-dialog .sicht input { margin-top: 4px; }
.suchen-dialog .sicht .t { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.suchen-dialog .sicht .b { grid-column: 2; font-size: 13px; color: var(--muted); }
.suchen-dialog .umfang { font-size: 13px; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; display: grid; gap: 3px; }
.suchen-dialog .umfang b { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.suchen-dialog .fuss { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.suchen-dialog p { margin: 0; color: var(--ink-2); }

.suchen-toast {
    position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    background: var(--ink); color: var(--surface); padding: 9px 16px; border-radius: 8px; font-size: 14px;
    box-shadow: var(--schatten-schwebend); z-index: 1070; max-width: calc(100vw - 32px);
}

/* Spalten (n): Ankreuzliste im Stil des Spaltenmenüs (F15-1) */
.tabellenansicht .spalten-knopf { margin-left: auto; }
.tabellenansicht .titelzeile .spalten-knopf + form.ansicht { margin-left: 0; }
.spaltenwahl {
    position: absolute; z-index: 90; width: 280px; max-width: calc(100vw - 32px); display: grid; color: var(--ink);
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; box-shadow: var(--schatten-schwebend);
}
.spaltenwahl section { padding: 14px; display: grid; gap: 10px; }
.spaltenwahl .m-tipp { margin: 0; font-size: 12px; color: var(--muted); }
.spaltenwahl .m-titel { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; }
.spaltenwahl .spaltenwahl-liste { display: grid; gap: 1px; max-height: 360px; overflow-y: auto; }
.spaltenwahl label.check { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 5px; cursor: pointer; }
.spaltenwahl label.check:hover { background: var(--accent-light); }

@media (max-width: 560px) {
    .suchen .aktionen, .suchen .wahl .rechts { margin-left: 0; }
    .suchen-pop {
        position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-width: 100%;
        border-radius: 14px 14px 0 0; max-height: 80vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: var(--schatten-schwebend-oben); z-index: 1050;
    }
    .suchen-pop.dd-pop { width: 100%; }
    .spaltenwahl {
        position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; z-index: 1050; width: 100%;
        max-width: 100%; max-height: 80vh; overflow-y: auto; border-radius: 10px 10px 0 0; box-shadow: var(--schatten-schwebend-oben);
    }
}
@media (prefers-reduced-motion: no-preference) {
    .suchen-pop, .suchen-dialog { animation: tabellenmenue-auf 120ms ease-out; }
}

/* 2.8-ev30: V13 Zwei-Faktor-Anmeldung (Modulkarte, Seite „Zweiter Faktor“) */
.checkliste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.checkliste li { display: flex; gap: 8px; align-items: baseline; }
.checkliste .ok { color: var(--success); font-weight: 600; }
.checkliste .nein { color: var(--danger); font-weight: 600; }
.modul-feld { min-width: 230px; }
.schritt-liste { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
/* V13 Paket B / Teil B2: Authenticator-App (QR-Code) und Wiederherstellungscodes */
.qr-box { display: grid; place-items: center; width: 168px; height: 168px; margin: 0 auto 10px; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.qr-box img { width: 100%; height: 100%; display: block; }
code.geheimnis { display: block; letter-spacing: 0.08em; text-align: center; user-select: all; }
.geheimnis-zeile { margin: 0 0 16px; }
.meldungen-karte { max-width: 900px; }   /* Hinweisstreifen auf Kartenbreite (Seite Zweiter Faktor, wie .formular-spalte) */
.wh-liste { list-style: none; margin: 0 0 12px; padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--schrift-mono); font-size: 14px; letter-spacing: .04em; color: var(--ink); }
.wh-liste li.benutzt { color: var(--muted); text-decoration: line-through; }
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wh-haken { margin-top: 14px; }
.wh-weiter { margin-top: 14px; text-decoration: none; }
.formular-spalte .card form + form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }   /* mehrere Methoden untereinander */
.anmelde-karte .text-muted.text-sm + form { margin-top: 14px; }   /* Formular unter der Zeile „Passwort geprüft für …“ */
.anmelde-karte a.btn.wh-weiter { display: flex; width: 100%; justify-content: center; margin-top: 14px; padding: 10px 14px; text-decoration: none; box-sizing: border-box; }
.btn-gesperrt { opacity: 0.5; cursor: not-allowed; }
/* V13 Paket B / Teil B2b (Mockup M5b v2.1): Faktorliste mit Aktionen, Abstände in Dialog und Hinweisstreifen */
.fakt-name { display: flex; align-items: center; gap: 8px; }
.fakt-name .symbol { color: var(--accent); }
.modal-inhalt > p + .flash-error, .modal-inhalt > p + form, .modal-inhalt > .flash-error + form,
.modal-inhalt > .flash-info + p, .modal-inhalt > p + .flash-info, .modal-inhalt > .flash-info + .flash-error { margin-top: 12px; }
.flash-warning .aktionen-zeile { margin-top: 10px; }
.formular-spalte a.btn, .modal-fuss a.btn, .flash-warning a.btn { text-decoration: none; }
/* V30 (Mockup V30 1.2): geführte Ersteinrichtung – Fortschrittsanzeige, Erklärkarten, App-Vorschläge, Schlüsselkasten, gesperrter Bereich */
.fortschritt { display: flex; gap: 6px; margin: 0 0 6px; }
.fortschritt span { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.fortschritt span.fertig, .fortschritt span.aktuell { background: var(--accent); }
.fortschritt span.aktuell { opacity: .55; }
.fortschritt-text { margin: 0 0 14px; font-size: 13px; color: var(--muted); font-weight: 600; }
.erklaer { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.erklaer h2 { margin: 0 0 4px; font-size: 14px; color: var(--ink); }
.erklaer p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.erklaer summary { cursor: pointer; color: var(--ink); }
.app-vorschlag { display: grid; gap: 8px; margin: 0 0 14px; }
.app-vorschlag > div { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14px; color: var(--ink); }
.app-vorschlag small { display: block; color: var(--muted); font-size: 12.5px; }
.schluessel-kasten { margin: 0 0 14px; padding: 12px 14px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.schluessel-kasten h2 { margin: 0 0 4px; font-size: 14px; color: var(--ink); }
.schluessel-kasten p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.gesperrt-bereich { opacity: .45; pointer-events: none; margin-top: 14px; }
.erklaer .schritt-liste { margin-top: 10px; }
.anmelde-karte form + form { margin-top: 18px; }
.zeit-zeile { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.zwei-spalten { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; }
@media (max-width: 560px) { .zwei-spalten { grid-template-columns: 1fr; } }
@media print {
    .wh-liste { border: 1px solid #000; color: #000; background: #fff; }
    .anmelde-kopf, .anmelde-fuss, .aktionen-zeile, .wh-haken, .wh-weiter, .flash-warning { display: none; }
}

/* Deploy #65 (2.8-ev43): Zeilennummer „#“, linke Menüleiste einklappbar, Schloss in der Marke der Login-Sperre */
.zeilennummer { width: 1%; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.data-table th.zeilennummer, .data-table td.zeilennummer { padding-left: 12px; padding-right: 8px; }
.ta-tabelle thead th.zeilennummer { padding: 9px 12px; }
.ta-tabelle td.zeilennummer { padding-right: 12px; }
.badge svg { vertical-align: -2px; margin-right: 2px; }
/* Personenliste mit der Tabellentechnik der Erweiterten Suche (Deploy #65): sieht aus wie die bisherige Liste, Spaltenmenü am Kopf */
.liste-leiste { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.personen-bereich .kriterien { margin: 0 0 8px; }
.liste-engine th .kopfzelle { cursor: pointer; user-select: none; -webkit-user-select: none; }
.liste-engine th .kopfzelle .marke { margin-left: 6px; color: var(--accent); font-size: 12px; }
.liste-engine th .kopfzelle .marke i { font-style: normal; margin-left: 3px; }
.liste-engine th.gezogen { opacity: 0.45; }
.liste-engine .zeile-titel + .badge { margin-left: 6px; }
.nav-einklappen {
    display: flex; align-items: center; gap: 8px; margin: 14px 0 0 11px; padding: 6px 10px;
    border: 1px solid var(--border-2); border-radius: var(--radius-md); background: var(--surface);
    color: var(--ink-2); font-family: inherit; font-size: 13px; line-height: 1.35; cursor: pointer;
}
.nav-einklappen:hover { background: var(--accent-light); }
.nav-einklappen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 860px) { .nav-einklappen { display: none; }   /* schmal ist das Menü ohnehin aufklappbar */ }
@media (min-width: 861px) {
    body > .app-layout.menue-schmal { --spalte-links: 64px; column-gap: 20px; }
    .menue-schmal .nav-spalte { padding-left: 8px; }
    .menue-schmal .nav-titel { display: none; }
    .menue-schmal .nav-abschnitt + .nav-abschnitt { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
    .menue-schmal .nav-link { justify-content: center; align-items: center; padding: 9px 0; min-height: 40px; }   /* mindestens 40 Pixel: antippbar am Tablet */
    .menue-schmal .nav-text, .menue-schmal .nav-einklappen-text {   /* nur das Symbol sichtbar, der Name bleibt für Bildschirmleser */
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .menue-schmal .nav-einklappen { justify-content: center; margin-left: 4px; padding: 6px 0; width: 44px; }
}