/*
Teamplan, V0.1 - 2026
(c) 2026 copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz; fs@csskoeln.de
$Id: fsv-basis.css 1 17.10.2026 @fs$
Aus der FSV (fsv/assets/css/basis.css) unveraendert uebernommen (Entscheidung 17.10.2026: Oberflaeche strikt wie FSV).
Aenderungen nur in teamplan.css.
*/
/*
FSV - Fahrschulverwaltung, V0.4 - 2026
(c) 2026 copyright by Frank Schwarz
$Id: basis.css 1 12.10.2026 @fs$
Gemeinsame Grundlage des Bereichs fsv: Farben, Schriften und die einheitlichen Formularbausteine.
ERZEUGT von werkzeuge/web-verteilen.php aus kern/web/css/basis/ - hier nicht ändern, die Teile dort ändern.
Teile: 01-schrift-regular, 02-schrift-kursiv, 03-schrift-medium, 04-schrift-fett, 05-schrift-titel, 10-grund, 20-eingaben, 30-meldungen, 31-pillen, 32-kopf-filter, 40-knoepfe, 41-formulare, 42-bestaetigung, 50-fussleiste, 51-vorleser, 60-tabellen, 61-zeilenlisten, 62-tabellen-zeilen, 63-knoepfe-zusatz, 64-tabellen-haken, 65-hinweisbox, 66-pflicht, 67-tabellen-spalten, 68-kaestchen-feld, 69-vorlagentext, 70-formular-inline, 71-kopf-rechts, 72-knoepfe-schmal, 73-tabellen-karten, 74-tabellen-karten-breit, 80-listenwerkzeuge, 81-speichern, 82-formulare-abstand, 83-tabellen-pfad, 84-eingabefehler, 85-dialog
*/

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2'), url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic.woff2') format('woff2'), url('../fonts/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2'), url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2'), url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-Bold.woff2') format('woff2'), url('../fonts/RobotoSlab-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --haupt: #000E70;
    --haupt-hover: #000A52;
    --haupt-hell: #E9EBF7;
    --menue-flaeche: #001A64;
    --menue-dunkel: #001650;
    --menue-text: #FFFFFF;
    --menue-text-hell: #FFFFFF;
    --menue-aktiv: #174192;
    /* Kopfleiste im neuen Layout (Profil > Darstellung); Farbe: Einstellungen > Fahrschule > Logo & Darstellung > Kopfleiste. */
    --kopfleiste: #000000;
    --kopfleiste-text: #FFFFFF;
    /* Hauptknöpfe (Speichern usw.): das dunkle Blau des Menüs, beim Darüberfahren das hellere */
    --knopf: var(--menue-flaeche);
    --knopf-hover: var(--menue-aktiv);
    /* Abstand zwischen Knöpfen in jeder Knopfreihe, überall derselbe (Vorgabe 06.10.2026) */
    --knopf-abstand: 12px;
    --hintergrund: #F6F7FB;
    --flaeche: #FFFFFF;
    --linie: #E1E3EA;
    --linie-stark: #D1D1D1;
    --linie-zeile: #EEF0F4;
    --tabellenkopf: #FAFBFD;
    --rahmen-eingabe: #C9CCD8;
    --text: #333333;
    --text-gedaempft: #4A5060;
    --warnung: #8A4600;
    --warnung-flaeche: #FFF1E0;
    --fehler: #9E1F17;
    --fehler-flaeche: #FDE8E7;
    --erfolg: #1F6B45;
    --erfolg-flaeche: #E6F4EC;
    --box-abstand: 8px;
    --box-rundung: 12px;
    /* EINE Hoehe fuer Eingabefelder, Auswahlen und Knoepfe - nichts springt. */
    --feld-hoehe: 36px;
    /* Kompakte Variante nur fuer Leisten und Tabellenzeilen. */
    --feld-hoehe-klein: 28px;
    --schrift-text: 'Montserrat', system-ui, sans-serif;
    --schrift-titel: 'Roboto Slab', Georgia, serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift-text);
    background: var(--hintergrund);
    color: var(--text);
    /* Eine Schriftgröße für allen Text (Vorgabe 06.10.2026): 14 px; nur Beschriftungen und Pillen sind 12 px */
    font-size: 14px;
    line-height: 1.5;
}

/* Titel in der Titelschrift und in der Hauptfarbe - wie im Altprojekt. */
h1, h2, h3 {
    font-family: var(--schrift-titel);
    font-weight: 700;
    margin: 0 0 .5em;
    color: var(--haupt);
}

a { color: var(--haupt); }
a:hover { color: var(--haupt-hover); }

button, input, select, textarea { font-family: inherit; font-size: 14px; }

/* Alles, was wie eine Tabelle aufgebaut ist, steht oben ausgerichtet - und zwar nach der ersten Zeile: baseline richtet die Zellen einer Reihe an
   der Grundlinie ihrer ersten Zeile aus. So stehen Text, Pillen, Haken und Knöpfe einer Tabellenzeile auf EINER Linie, auch wenn ein Knopf
   (28 px) die Zeile höher macht als der Text (Linien-Audit 08.10.2026, docs/new2027/68). */
:where(th, td) { vertical-align: baseline; }

/* Einheitliche Eingaben ueberall: gleiche Hoehe, Rahmen, Rundung und Schrift. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="image"]), select) {
    height: var(--feld-hoehe);
    padding: 0 10px;
    margin: 0;
    border: 1px solid var(--rahmen-eingabe);
    border-radius: 8px;
    background-color: var(--flaeche);
    color: var(--text);
    font: 400 14px/1.2 var(--schrift-text);
    vertical-align: middle;
    min-width: 0;
}
:where(select) { padding-right: 30px; }
:where(input[type="color"]) {
    height: var(--feld-hoehe);
    padding: 2px;
    margin: 0;
    border: 1px solid var(--rahmen-eingabe);
    border-radius: 8px;
    background-color: var(--flaeche);
    vertical-align: middle;
}
:where(input[type="file"]) {
    min-height: var(--feld-hoehe);
    padding: 6px 10px;
    border: 1px solid var(--rahmen-eingabe);
    border-radius: 8px;
    background: var(--flaeche);
    max-width: 100%;
}
:where(textarea) {
    min-height: 96px;
    padding: 8px 10px;
    margin: 0;
    border: 1px solid var(--rahmen-eingabe);
    border-radius: 8px;
    background: var(--flaeche);
    color: var(--text);
    font: 400 14px/1.5 var(--schrift-text);
    resize: vertical;
    max-width: 100%;
}
:where(input, select, textarea):focus {
    border-color: var(--haupt);
    outline: 2px solid var(--haupt-hell);
    outline-offset: 0;
}
:where(input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly]) {
    background-color: #F1F2F5;
    color: var(--text-gedaempft);
}
/* In Tabellen fuellt die Eingabe die Zelle. */
:where(td > input:not([type="checkbox"], [type="radio"]), td > select) { width: 100%; }
:where(input[type="checkbox"], input[type="radio"]) {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--haupt);
    vertical-align: middle;
}

/* Meldungen: eigene Box mit farbigem Rand, so breit wie der Inhaltsbereich. */
.meldung {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--box-rundung);
    padding: 12px 16px;
    margin: 0 0 var(--box-abstand);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
/* Symbol vor dem Text wie im Altprojekt: Fehler, Erfolg und Hinweis sind
   auch ohne Farbwahrnehmung unterscheidbar. */
.meldung::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 16px;
    line-height: 1.3;
    flex: none;
}
.meldung-fehler { background: var(--fehler-flaeche); border-color: #F3B8B4; border-left-color: var(--fehler); color: var(--fehler); }
.meldung-fehler::before { content: "\f06a"; }
.meldung-erfolg { background: var(--erfolg-flaeche); border-color: #B5DEC6; border-left-color: var(--erfolg); color: var(--erfolg); }
.meldung-erfolg::before { content: "\f058"; }
.meldung-hinweis { background: var(--warnung-flaeche); border-color: #F5CFA0; border-left-color: var(--warnung); color: var(--warnung); }
.meldung-hinweis::before { content: "\f071"; }

/* Information: neutral blau, fuer Erklaerungen, die keine Warnung sind. */
.meldung-info { background: var(--haupt-hell); border-color: #C5CAE8; border-left-color: var(--haupt); color: var(--haupt); font-weight: 500; }
.meldung-info::before { content: "\f05a"; }

/* Statusmarken in Listen: immer mit Text, nie nur Farbe. */
.pille {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
/* Ohne Art: neutral (z. B. "nein"). */
.pille { background: var(--tabellenkopf); border-color: var(--linie-stark); color: var(--text-gedaempft); }
.pille-gut { background: var(--erfolg-flaeche); border-color: #B5DEC6; color: var(--erfolg); }
.pille-warn { background: var(--warnung-flaeche); border-color: #F5CFA0; color: var(--warnung); }
.pille-fehler { background: var(--fehler-flaeche); border-color: #F3B8B4; color: var(--fehler); }

/* Filter im Kopf einer Box: rechts neben dem Titel, Feld und Knopf auf einer Linie. */
.kopf-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.kopf-filter input { width: 240px; max-width: 100%; }

/* Knoepfe */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--feld-hoehe);
    padding: 0 16px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid var(--rahmen-eingabe);
    line-height: 1;
    vertical-align: middle;
    background: var(--flaeche);
    color: var(--haupt);
    font: 600 14px var(--schrift-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
/* Der weisse Knopf bleibt beim Zeigen weiss; nur Rahmen und Text treten
   hervor. Das grau hinterlegte Verhalten war die beanstandete Abweichung. */
.knopf:hover { background: var(--flaeche); border-color: var(--haupt); color: var(--haupt); }
.knopf-primaer { background: var(--knopf); border-color: var(--knopf); color: #fff; }
.knopf-primaer:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); color: #fff; }
.knopf:disabled, .knopf[disabled] { opacity: .5; cursor: not-allowed; }

/* Formulare */
.formular { display: flex; flex-direction: column; gap: 16px; }
.feld { display: flex; flex-direction: column; gap: 4px; }
.feld label { font-size: 12px; color: var(--text); font-weight: 600; }
:where(.feld) > :where(input:not([type="checkbox"], [type="radio"]), select, textarea) { width: 100%; }
.feld-zeile { display: flex; gap: 16px; flex-wrap: wrap; }
.feld-zeile > .feld { flex: 1 1 200px; }
.feld-hinweis { font-size: 14px; line-height: 1.4; color: var(--text-gedaempft); }
.feld > .feld-hinweis { margin-top: 6px; }
.kaestchen { display: flex; align-items: center; gap: 8px; font-size: 14px; }
/* Ein Haken als einziges Bedienelement eines Feldes steht auf Feldhöhe: er sitzt damit auf der Linie der Felder neben ihm. */
.feld > .kaestchen { min-height: var(--feld-hoehe); }
/* Haken in einer Feldzeile: die erste Textzeile und der Haken stehen auf der Mitte eines Eingabefelds (36 px = 7,5 px + Zeile 21 px + 7,5 px), auch wenn die
   Beschriftung auf zwei Zeilen umbricht. */
:is(.feld > .kaestchen, .karten-zeile .kaestchen-feld .kaestchen, .stamm-raster .kaestchen-feld .kaestchen) { align-items: flex-start; padding-top: 7.5px; }
:is(.feld > .kaestchen, .karten-zeile .kaestchen-feld .kaestchen, .stamm-raster .kaestchen-feld .kaestchen) > input[type="checkbox"] { margin-top: 1.5px; }
.aktionen { display: flex; justify-content: flex-end; gap: var(--knopf-abstand); margin-top: 8px; flex-wrap: wrap; }

/* Bestätigung einer endgültigen Aktion: ein Haken in einer roten Fehlerbox (kern/includes/funk-bestaetigung.php), Text in der Farbe der Box. */
/* Tippfläche mindestens 44 px: die ganze Beschriftung ist anklickbar und mindestens so hoch, der Haken ist 22 px gross. */
.bestaetigung-box::before { margin-top: 11px; }
.bestaetigung-box .kaestchen { align-items: flex-start; gap: 10px; }
.bestaetigung-box .kaestchen label { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 11px 0; box-sizing: border-box; color: inherit; font-weight: 600; line-height: 1.45; cursor: pointer; }
.bestaetigung-box .kaestchen input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 11px; }

/* Fusszeile: auf jeder Seite gleich. "FSV <Release>" und darunter das
   Copyright mit dem aktuellen Jahr (Vorgabe 21). */
.fussleiste {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 8px;
    font: 400 12px/1.5 'Montserrat', system-ui, sans-serif;
    color: var(--text-gedaempft);
    text-align: right;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Nur fuer Vorleseprogramme */
.fuer-vorleser {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Listen: feste gemeinsame Darstellung statt Browser-Standardtabellen. */
.tabelle-rahmen { width: 100%; min-width: 0; border: 1px solid var(--linie); border-radius: 8px; margin-top: 12px; }
.tabelle { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 14px; color: var(--text); }
.tabelle th { background: var(--tabellenkopf); color: var(--haupt); font-weight: 600; text-align: left; white-space: normal; }
.tabelle th, .tabelle td { padding: 7px 10px; vertical-align: baseline; overflow-wrap: break-word; word-break: normal; white-space: normal; }
.tabelle td code { overflow-wrap: anywhere; }
.tabelle th, .tabelle td { hyphens: auto; }
/* Kopfzellen: gleicher Abstand oben wie der Sortierknopf (9,5 px + Zeile 21 px = 40 px Höhe), damit sortierbare und einfache Köpfe auf einer Linie stehen. */
.tabelle th { padding-top: 9.5px; padding-bottom: 9.5px; }
/* Spaltenköpfe werden nie getrennt ("verwal-ten"): ein Wort bleibt ganz, die Spalte wird so breit wie das Wort. */
.tabelle th { hyphens: manual; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:nth-child(even) { background: var(--linie-zeile); }
.tabelle thead th { border-bottom: 1px solid var(--linie); }

/* Zeilenlisten (Paket L, 10.10.2026): wie Tabellen gestreift ohne Trennlinie; erste Zeile weiss, jede zweite var(--linie-zeile). */
:is(.karten-wert, .master-zeile, .wert-zeile, .dok-zeile, .dokliste-zeile, .konto-zeile, .termin-zeile, .dr-termin, .dr-kontakt-zeile, .dr-daten-zeile, .ab-daten-zeile, .ab-abw, .ab-geraet, .ab-teilnehmer, .vm-zus-zeile):nth-child(even of :is(.karten-wert, .master-zeile, .wert-zeile, .dok-zeile, .dokliste-zeile, .konto-zeile, .termin-zeile, .dr-termin, .dr-kontakt-zeile, .dr-daten-zeile, .ab-daten-zeile, .ab-abw, .ab-geraet, .ab-teilnehmer, .vm-zus-zeile)),
:is(.start-liste-zeilen, .th-warten-liste) > li:nth-child(even) { background: var(--linie-zeile); }
/* "even of": nur die Zeilen zaehlen, nicht der Kopf oder Hinweis davor; sonst beginnt der Streifen in einer Box mit Titel schon mit der ersten Zeile grau. */
.ab-kurz li:nth-child(even) > a { background: var(--linie-zeile); }
.ab-kurz li:nth-child(even) > a:hover { background: var(--haupt-hell); }

.tabelle tbody tr:hover { background: var(--haupt-hell); }
.tabelle td .aktionen { justify-content: flex-start; flex-wrap: nowrap; align-items: center; gap: var(--knopf-abstand); margin: 0; }
.tabelle td .aktionen form { display: inline-flex; flex-wrap: nowrap; gap: var(--knopf-abstand); align-items: center; }
.tabelle-leer { text-align: center; color: var(--text-gedaempft); }
.tabelle th.spalte-aktionen, .tabelle td.spalte-aktionen { width: 1%; white-space: nowrap; }
.tabelle td.spalte-aktionen .knopf { margin: 0 4px 0 0; }

.knopf-klein, .tabelle .knopf { height: var(--feld-hoehe-klein); padding: 0 10px; font-size: 13px; }
/* Stiller Symbolknopf fuer Leisten und Tabellenzeilen (Altprojekt). */
.knopf.still { height: var(--feld-hoehe-klein); padding: 0 8px; color: var(--text-gedaempft); }
.knopf.still:hover { color: var(--haupt); border-color: var(--haupt); }
/* Steht in einer Tabellenzelle ein Eingabefeld oder eine Auswahl, haben die Knöpfe daneben Feldhöhe: eine Höhe je Reihe (Linien-Audit). */
.tabelle td:has(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select) .knopf { height: var(--feld-hoehe); min-height: var(--feld-hoehe); padding-top: 0; padding-bottom: 0; }
.knopf-warnung { color: var(--fehler); border-color: var(--fehler); background: var(--flaeche); }
.knopf-warnung:hover { color: #FFFFFF; background: var(--fehler); border-color: var(--fehler); }
.knopf:focus-visible, a:focus-visible { outline: 2px solid var(--haupt); outline-offset: 3px; }
.knopf:active { background: var(--haupt-hell); color: var(--haupt); }
.knopf-primaer:active { background: var(--knopf-hover); color: #FFFFFF; }
.knopf-warnung:active { background: var(--fehler); color: #FFFFFF; }

.kaestchen input[type="checkbox"], .tabelle input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; }
.kaestchen label { margin: 0; font-size: 14px; color: var(--text); cursor: pointer; }
.tabelle input[type="checkbox"] { display: inline-block; vertical-align: middle; }
/* Ein Haken mit Beschriftung in einer Tabellenzelle: als Inline-Element, sonst bestimmt der Haken die Grundlinie der Zelle und steht über dem Text der Nachbarzellen. */
.tabelle td .kaestchen { display: inline-flex; vertical-align: middle; }
/* Zeilen mit einem Textfeld: alles in der Reihe steht auf der Mittellinie (die Grundlinie eines Textfelds ist sein unterer Rand). */
.tabelle tr:has(textarea) > :is(td, th) { vertical-align: middle; }

/* Listen passen sich dem verfügbaren Raum an, statt seitlich zu scrollen. */
.tabelle .knopf { max-width: 100%; white-space: nowrap; height: auto; min-height: var(--feld-hoehe-klein); padding: 4px 10px; line-height: 1.25; }
.tabelle details, .tabelle form, .tabelle input, .tabelle select { min-width: 0; max-width: 100%; }
@media (max-width: 1100px) {
    .tabelle { font-size: 14px; }
    .tabelle th, .tabelle td { padding: 8px 6px; }
    .tabelle th { padding-top: 9.5px; padding-bottom: 9.5px; }
    .tabelle .knopf { padding: 4px 8px; font-size: 12px; }
    .tabelle td.spalte-aktionen .knopf { margin-right: 2px; }
}
@media (max-width: 760px) {
    .tabelle td.spalte-aktionen { white-space: normal; }
}

/* Erklaerender Text in einer Box: blau hinterlegt wie im Altprojekt (status-box),
   mit Symbol, damit er auch ohne Farbwahrnehmung als Hinweis erkennbar ist. */
.box-hinweis {
    position: relative;
    display: block;
    border: 1px solid #C5CAE8;
    border-left: 4px solid var(--haupt);
    border-radius: var(--box-rundung);
    background: var(--haupt-hell);
    color: var(--haupt);
    padding: 12px 16px 12px 44px;
    margin: 0 0 var(--box-abstand);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}
/* Das Symbol steht fest links; der Text darf <strong> und <code> enthalten, ohne in Spalten zu zerfallen. */
.box-hinweis::before {
    content: "\f05a";
    position: absolute;
    left: 14px;
    top: 12px;
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 16px;
    line-height: 1.3;
}

/* Der Hinweis "* Pflichtfeld": je Seite einmal, vor der Knopfzeile (pflicht_hinweis_html() in kern/fsv/includes/funk.php). */
.pflicht-hinweis { margin: 8px 0 0; color: var(--text); font-size: 14px; }

/* Spalten und Zeilen in Listen mit Schaltern */
.spalte-schalter { width: 90px; min-width: max-content; text-align: center; white-space: nowrap; hyphens: manual; }
.spalte-quelle { font-size: 12px; color: var(--text-gedaempft); }
.tabelle .zeile-fest td { color: var(--text-gedaempft); }
.tabelle tbody tr.zeile-gewaehlt, .tabelle tbody tr.zeile-gewaehlt:hover { background: var(--haupt-hell); }

/* Ein einzelnes Haekchen mit Beschriftung steht auf Feldhoehe, nicht im Beschriftungsstil. */
.feld.kaestchen-feld { justify-content: center; min-height: var(--feld-hoehe); }

/* Vorgegebener Text (Vorlagen, Vorschau): feste Breite, bricht um, kein Scrollbalken. */
.vorlagentext {
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--tabellenkopf);
    color: var(--text);
    font: 400 13px/1.5 ui-monospace, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Ein Formular, das nur aus Knoepfen besteht, steht in der Zeile. */
.formular-inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.knopf.knopf-standort { height: var(--feld-hoehe-klein); padding: 0 10px; }

/* Rechte Seite im Kopf einer Box: Status, Schalter und Knoepfe auf einer Linie. */
.kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

@media (max-width: 840px) {
    /* Lange Knopfbeschriftungen brechen um, statt die Seite zu verbreitern. */
    .knopf { white-space: normal; height: auto; min-height: var(--feld-hoehe); padding: 8px 14px; line-height: 1.25; text-align: center; max-width: 100%; }
}

/*
 * Tabellen auf Smartphone und kleinem Tablet (bis 840 px): jede Zeile wird zur Karte, vor jedem Wert steht
 * seine Spaltenueberschrift (assets/js/tabellen.js setzt data-label und die
 * Klasse "karten"). Kein waagrechter Scrollbalken, nichts wird abgeschnitten.
 */
@media (max-width: 840px) {
    .tabelle.karten, .tabelle.karten tbody, .tabelle.karten tr, .tabelle.karten td { display: block; width: 100%; }
    .tabelle.karten thead { display: none; }
    .tabelle.karten tr { padding: 8px 0; }
    .tabelle.karten tbody tr:last-child { border-bottom: 0; }
    .tabelle.karten td { display: flex; align-items: baseline; gap: 10px; border: 0; padding: 3px 12px; overflow-wrap: anywhere; min-width: 0; }
    .tabelle.karten td::before { content: attr(data-label); flex: 0 0 34%; font-size: 12px; font-weight: 600; color: var(--haupt); }
    .tabelle.karten td:not([data-label])::before { display: none; }
    .tabelle.karten td.tabelle-leer { display: block; text-align: center; }
    .tabelle th.spalte-aktionen, .tabelle td.spalte-aktionen, .tabelle.karten td.spalte-aktionen { width: 100%; white-space: normal; }
    .tabelle.karten td.spalte-aktionen { flex-wrap: wrap; padding-top: 6px; }
    .tabelle.karten td.spalte-aktionen::before { display: none; }
    .tabelle.karten td.spalte-aktionen .knopf { margin: 2px 6px 2px 0; }
}

/* Tabellen mit sieben und mehr Spalten werden schon unter 1200 px zu Karten. */
@media (max-width: 1200px) {
    .tabelle.karten.breit, .tabelle.karten.breit tbody, .tabelle.karten.breit tr, .tabelle.karten.breit td { display: block; width: 100%; }
    .tabelle.karten.breit thead { display: none; }
    .tabelle.karten.breit tr { padding: 8px 0; }
    .tabelle.karten.breit tbody tr:last-child { border-bottom: 0; }
    .tabelle.karten.breit td { display: flex; align-items: baseline; gap: 10px; border: 0; padding: 3px 12px; overflow-wrap: anywhere; min-width: 0; }
    .tabelle.karten.breit td::before { content: attr(data-label); flex: 0 0 34%; font-size: 12px; font-weight: 600; color: var(--haupt); }
    .tabelle.karten.breit td:not([data-label])::before { display: none; }
    .tabelle.karten.breit td.tabelle-leer { display: block; text-align: center; }
    .tabelle.karten.breit td.zahl { text-align: left; }
    .tabelle.karten.breit td.spalte-aktionen { width: 100%; white-space: normal; }
    .tabelle.karten.breit td.spalte-aktionen { flex-wrap: wrap; padding-top: 6px; }
    .tabelle.karten.breit td.spalte-aktionen::before { display: none; }
    .tabelle.karten.breit td.spalte-aktionen .knopf { margin: 2px 6px 2px 0; }
}
/* Passt eine Tabelle bei breitem Fenster nicht in ihre Box, setzt assets/js/tabellen.js die Klasse "eng": dieselben Karten, ohne Fensterbreite. */
.tabelle.karten.eng, .tabelle.karten.eng tbody, .tabelle.karten.eng tr, .tabelle.karten.eng td { display: block; width: 100%; }
.tabelle.karten.eng thead { display: none; }
.tabelle.karten.eng tr { padding: 8px 0; }
.tabelle.karten.eng tbody tr:last-child { border-bottom: 0; }
.tabelle.karten.eng td { display: flex; align-items: baseline; gap: 10px; border: 0; padding: 3px 12px; overflow-wrap: anywhere; min-width: 0; }
.tabelle.karten.eng td::before { content: attr(data-label); flex: 0 0 34%; font-size: 12px; font-weight: 600; color: var(--haupt); }
.tabelle.karten.eng td:not([data-label])::before { display: none; }
.tabelle.karten.eng td.tabelle-leer { display: block; text-align: center; }
.tabelle.karten.eng td.zahl { text-align: left; }
.tabelle.karten.eng td.spalte-aktionen { width: 100%; white-space: normal; }
.tabelle.karten.eng td.spalte-aktionen { flex-wrap: wrap; padding-top: 6px; }
.tabelle.karten.eng td.spalte-aktionen::before { display: none; }
.tabelle.karten.eng td.spalte-aktionen .knopf { margin: 2px 6px 2px 0; }

/* ------------------------------------------------------------ Listenwerkzeuge (assets/js/listen.js) */

/* Filter: rechts im Kopf der Box, vor dem Knopf "Neu" (Vorgabe: Filter und Suche stehen rechtsbuendig). */
.box-kopf { align-items: center; }
.liste-werkzeuge { display: flex; align-items: center; margin: 0; }
.liste-filter { width: 260px; max-width: 100%; }
.box > .liste-werkzeuge { justify-content: flex-end; margin-top: 12px; }

/* Blaetterleiste: eigene Box unter der Liste wie im Altprojekt. */
.blaettern {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    margin: 0; padding: 6px 12px; background: var(--flaeche);
    border: 1px solid var(--linie); border-radius: var(--box-rundung);
    font-size: 14px; color: var(--text-gedaempft);
}
.blatt-seiten { display: flex; gap: 4px; align-items: center; }
.blatt-zahlen { display: inline-flex; gap: 4px; align-items: center; }
.blatt-seiten .knopf { height: 32px; min-height: 32px; padding: 0 10px; }
.blatt-seiten .knopf.aus { opacity: .4; pointer-events: none; }
.blatt-hier { background: var(--haupt); color: #fff; border-radius: 8px; padding: 6px 10px; font-weight: 700; line-height: 1.2; }
.blatt-luecke { padding: 0 6px; }
.blatt-groesse { display: inline-flex; align-items: center; gap: 8px; }
.blatt-groesse select { height: 32px; padding: 0 28px 0 8px; width: auto; }
.fein { color: var(--text-gedaempft); font-size: 14px; }

.tabelle tr[hidden] { display: none !important; }
/* Beim Festhalten der Spaltenbreiten (listen.js): jede Zelle einzeilig, damit die Breite des längsten Werts gemessen wird. */
.tabelle.breiten-messen th, .tabelle.breiten-messen td { white-space: nowrap !important; }
/* Mit Blaettern und Filter zaehlt das Zebramuster nur die sichtbaren Zeilen (Klasse zeile-grau). */
.tabelle.liste-aktiv tbody tr:nth-child(even) { background: transparent; }
.tabelle.liste-aktiv tbody tr.zeile-grau { background: var(--linie-zeile); }
.tabelle.liste-aktiv tbody tr:hover { background: var(--haupt-hell); }

/* Sortieren: der Spaltenname ist ein Knopf mit rundem Pfeil (Variante 5). vertical-align -1px setzt die Mitte des Pfeils genau auf die Mitte
   der Textzeile (Montserrat 14 px; mit middle lag er 1,2 px zu tief). Der Pfeil nimmt im Fluss keine Breite ein
   und rutscht nie allein in eine neue Zeile; die Kopfzeile bleibt mindestens 40 px hoch. */
.tabelle th.sortierbar { padding: 0; }
.sortier-knopf {
    display: block; width: 100%; margin: 0; padding: 9.5px 30px 9.5px 10px;
    border: 0; border-radius: 0; background: none; color: inherit; font: inherit; line-height: inherit;
    text-align: inherit; cursor: pointer; overflow-wrap: break-word;
}
.sortier-pfeil {
    display: inline-block; box-sizing: border-box; width: 24px; height: 24px; margin: -6px -30px -6px 6px;
    border-radius: 50%; vertical-align: -1px; white-space: nowrap; line-height: 0;
    background: #F1F2F6; color: #6B7180;
}
.sortier-pfeil svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
th.sortiert .sortier-pfeil { background: var(--haupt-hell); color: var(--haupt); }
th.sortiert .sortier-pfeil svg { stroke-width: 2; }
.sortier-knopf:hover, th.sortiert .sortier-knopf { color: var(--haupt); }
.sortier-knopf:hover .sortier-pfeil, .sortier-knopf:focus-visible .sortier-pfeil { background: #DDE0EA; color: var(--haupt); }
th.sortiert .sortier-knopf:hover .sortier-pfeil, th.sortiert .sortier-knopf:focus-visible .sortier-pfeil { background: #D3D8EE; }
.sortier-knopf:focus-visible { outline: 2px solid var(--haupt); outline-offset: -2px; border-radius: 4px; }
@media (max-width: 1100px) {
    .sortier-knopf { padding: 9.5px 28px 9.5px 6px; }
}
@media (max-width: 840px) {
    .liste-filter { width: 100%; }
    .liste-werkzeuge { flex: 1 1 100%; }
    .blaettern { justify-content: center; }
}
a.sortier-knopf { text-decoration: none; }

/* ------------------------------------------------------------ Speichern ohne Neuladen (assets/js/speichern.js) */
/* Rueckmeldung neben der Ueberschrift der Box: gruen "Gespeichert" (verschwindet), rot ein Fehler. */
.speicher-status { margin-left: 8px; font-family: var(--schrift-text); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: opacity .4s; }
/* Steht die Rückmeldung im Titel einer Box, steht der Titel als Zeile mit ihr: beide mittig auf einer Linie (nicht auf der Grundlinie). */
:is(.box-titel, .gruppe-titel):has(> .speicher-status) { display: flex; align-items: center; flex-wrap: wrap; }
.speicher-status.ok { color: var(--erfolg); }
.speicher-status.fehler { color: var(--fehler); }
.speicher-status.weg { opacity: 0; }
.speicher-status.laeuft { color: var(--text-gedaempft); }
.speicher-status.hinweis { color: var(--warnung); }
/* Automatisch speichern (docs/new2027/69): der Platz fuer die Rueckmeldung ist von Anfang an reserviert, damit nichts springt;
   der Speichern-Knopf ist nur mit JavaScript weg (die Klasse setzt speichern.js). */
.speicher-status.platz { min-width: 9.5em; min-height: 20px; line-height: 20px; vertical-align: middle; }
.auto-weg { display: none !important; }
/* Zeile einer Tabelle mit eigenem Formular: eine Zeile Platz fuer die Rueckmeldung, damit die Zeile nie springt. */
.zeilen-status { display: block; margin: 0; min-height: 24px; }
.zeilen-status .speicher-status { margin-left: 0; line-height: 24px; }
/* In der Reiterleiste steht die Rueckmeldung rechts, mittig zur Leiste. */
.reiter-leiste > .speicher-status { margin-left: auto; align-self: center; padding: 0 4px; }

/* Knopfzeile nach Feldern in einem Formular: Abstand zum letzten Feld (nie direkt darunter kleben). */
.formular > .aktionen, .karten-formular > .aktionen { margin-top: 16px; }
.box > form + form, .box > form + .aktionen { margin-top: 12px; }

/* Pfade und andere lange Werte ohne Leerzeichen dürfen in der Zelle an jeder Stelle umbrechen (keine Scrollbalken) */
.tabelle td.spalte-pfad { word-break: break-all; }

/* ------------------------------------------------------------ Eingaben bleiben bei Fehlern erhalten (assets/js/eingaben.js) */
/* Das fehlerhafte Feld ist markiert (rot umrandet) und hat den Fokus; die Markierung verschwindet beim nächsten Tippen. */
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 2px var(--fehler-flaeche); }
:where(input, select, textarea)[aria-invalid="true"]:focus { border-color: var(--fehler); box-shadow: 0 0 0 3px var(--fehler-flaeche); }
.eingabe-hinweis { margin: 4px 0 0; }

dialog.dialog {
    position: fixed;
    inset: 0;
    margin: auto !important; /* gewinnt gegen Abstandsregeln der Seite (z. B. ".reiter-feld > * + *"), sonst sitzt der Dialog oben */
    width: min(580px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: fit-content;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--linie-stark);
    border-radius: var(--box-rundung);
    background: var(--flaeche);
    color: var(--text);
    box-shadow: 0 16px 48px rgba(0, 14, 112, .30);
    overflow: hidden;
}
dialog.dialog[open] {
    display: flex;
    flex-direction: column;
}
dialog.dialog::backdrop { background: rgba(0, 14, 112, .45); }
dialog.dialog:focus { outline: none; }

/* Das Formular füllt das Fenster und scrollt für sich; Titel oben und Knöpfe unten bleiben stehen (sticky). */
dialog.dialog > form,
dialog.dialog > .dialog-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
dialog.dialog > form > :not(.dialog-titel):not(.aktionen):not([type="hidden"]) { margin-top: 12px; }
dialog.dialog > form > .dialog-titel + :not(.aktionen) { margin-top: 16px; }

dialog.dialog .dialog-titel {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -24px;
    padding: 12px 16px 12px 24px;
    min-height: 56px;
    background: var(--haupt-hell);
    border-bottom: 1px solid var(--linie);
    color: var(--haupt);
    font-size: 18px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.dialog-zu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--haupt);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.dialog-zu:hover { background: var(--flaeche); }
.dialog-zu:focus-visible { outline: 2px solid var(--haupt); outline-offset: 0; }

dialog.dialog > form > .aktionen {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 20px -24px 0;
    padding: 12px 24px;
    background: var(--hintergrund);
    border-top: 1px solid var(--linie);
}
dialog.dialog > form > :last-child:not(.aktionen) { margin-bottom: 20px; }

/* Solange ein Dialog offen ist, scrollt die Seite dahinter nicht. */
html:has(dialog.dialog[open]) { overflow: hidden; }

@media (max-width: 520px) {
    dialog.dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
    dialog.dialog > form,
    dialog.dialog > .dialog-inhalt { padding: 0 16px; }
    dialog.dialog .dialog-titel { margin: 0 -16px; padding: 10px 8px 10px 16px; font-size: 17px; }
    dialog.dialog > form > .aktionen { margin: 16px -16px 0; padding: 10px 16px; }
    dialog.dialog > form > .aktionen .knopf { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}