/* BusDesk-Design-System C „Warm & menschlich“ (Max-Entscheidung 03.11.2026, AUFTRAG-2026-11-03-DESIGN-C) – gemeinsam für Leitstelle,
   Fahrer-App, Werkstatt, Monitor, Einfach-Ansicht. Wirkt nur mit html.bd (Schalter „designNeu“ je Kunde, Konsole; Standard AUS → wie bisher).
   Farben der Firma kommen aus dem Kunden-Aussehen (marke: --g Hauptfarbe, --gd Farbe dunkel; Demo = JS-Cyan/Navy, RDG = Grün) – nie fest hier.
   Dunkel: warme dunkle Töne (kein Schwarz) bei html.bd.lsd (Leitstelle), html.bd.dark (App) oder html.bd.bd-dunkel (übrige Seiten, nach System).
   Bausteine: .bd-btn · .bd-feld/.bd-label · .bd-karte · .bd-liste/.bd-zeile · .bd-reiter · .bd-marke · .bd-tabelle · .bd-raster/.bd-gruppe ·
   .bd-kachel (Kennzahl) · .bd-leer (Leerzustand) · .bd-grafik (Balken/Linie/Ring aus BD.balken/BD.linie/BD.ring) · .bd-i (Symbol, BD.icon) ·
   Fenster-Rahmen .modal.fzn (fenster-neu.js). Gruppenfarben --bd-blau/-gruen/-pfirsich/-flieder (+ -weich, -text). */

/* ---------- Theme-Variablen: hell ---------- */
html.bd{
  --bd-primaer:var(--g,#16A34A); --bd-primaer-dunkel:var(--gd,#0E3B22); --bd-auf-primaer:#fff;
  --bd-primaer-weich:color-mix(in srgb,var(--bd-primaer) 14%,#FFFDF9); --bd-primaer-rand:color-mix(in srgb,var(--bd-primaer) 38%,#FFFDF9);
  --bd-grund:#FAF6F0; --bd-flaeche:#FFFDF9; --bd-flaeche-2:#F5EFE6; --bd-flaeche-3:#EFE7DC; --bd-linie:#EFE7DC; --bd-linie-stark:#E0D5C6;
  --bd-text:#1F2430; --bd-text-2:#5E6472; --bd-text-3:#959AA4;
  --bd-gefahr:#C8433F; --bd-gefahr-weich:#FCE4E2; --bd-warn:#B26014; --bd-warn-weich:#FDEBD8; --bd-ok:#1E7A50; --bd-ok-weich:#E3F3EA; --bd-info:#2E5FB0; --bd-info-weich:#E6EEFB;
  /* Gruppenfarben (C): sanfte Flächen, wiedererkennbar in allen Teilen – Kacheln, Formular-Gruppen, Symbole */
  --bd-blau:#167A9E; --bd-blau-weich:#E3F2F8; --bd-gruen:#2F8F62; --bd-gruen-weich:#E6F3EA; --bd-pfirsich:#B5562C; --bd-pfirsich-weich:#FDE8E1;
  --bd-flieder:#6A45B8; --bd-flieder-weich:#F1EAFB; --bd-sand:#8A6A3B; --bd-sand-weich:#FFF3DF;
  --bd-schrift:Figtree,Inter,system-ui,'Segoe UI',sans-serif; --bd-schrift-titel:var(--bd-schrift); --bd-mono:var(--bd-schrift);
  --bd-t-s:13.5px; --bd-t:15.5px; --bd-t-l:17.5px; --bd-t-titel:22px; --bd-t-gross:34px; --bd-t-zahl:36px;
  --bd-r-s:12px; --bd-r:16px; --bd-r-l:26px; --bd-r-rund:999px;
  --bd-a1:4px; --bd-a2:8px; --bd-a3:12px; --bd-a4:16px; --bd-a5:22px; --bd-a6:32px;
  --bd-sch-1:0 1px 2px rgba(60,40,10,.05); --bd-sch-2:0 10px 30px rgba(60,40,10,.10); --bd-sch-3:0 30px 80px rgba(31,36,48,.25);
  --bd-fokus:0 0 0 3px color-mix(in srgb,var(--bd-primaer) 32%,transparent);
  --bd-hoehe:42px; --bd-hoehe-s:34px; --bd-hoehe-l:50px;
  --bd-schleier:rgba(31,36,48,.38);
}
/* Kunden-Schrift: marke schrift „js“ (Demo/JS) → Sora (Titel) + Source Sans 3, Klasse bd-sj von bd-design.js; sonst Figtree (falls installiert) bzw. Inter */
html.bd.bd-sj{--bd-schrift:'Source Sans 3',system-ui,sans-serif; --bd-schrift-titel:'Sora','Source Sans 3',sans-serif}
/* ---------- dunkel: warm, nie schwarz ---------- */
html.bd.lsd,html.bd.dark,html.bd.bd-dunkel{
  --bd-grund:#1E1B18; --bd-flaeche:#28241F; --bd-flaeche-2:#302B25; --bd-flaeche-3:#39332C; --bd-linie:#3A342D; --bd-linie-stark:#4A433A;
  --bd-text:#F3EEE6; --bd-text-2:#C9C0B3; --bd-text-3:#968D80;
  --bd-primaer-weich:color-mix(in srgb,var(--bd-primaer) 24%,#28241F); --bd-primaer-rand:color-mix(in srgb,var(--bd-primaer) 50%,#28241F);
  --bd-gefahr:#F08A84; --bd-gefahr-weich:#4A2826; --bd-warn:#F0B26A; --bd-warn-weich:#4A3420; --bd-ok:#7FD3A6; --bd-ok-weich:#22392C; --bd-info:#9DBBF2; --bd-info-weich:#26324A;
  --bd-blau:#86CBE6; --bd-blau-weich:#21343D; --bd-gruen:#8FD3AC; --bd-gruen-weich:#22362A; --bd-pfirsich:#F2A88A; --bd-pfirsich-weich:#43291F;
  --bd-flieder:#C4AEF0; --bd-flieder-weich:#322A42; --bd-sand:#E5C48F; --bd-sand-weich:#3B3122;
  --bd-sch-1:none; --bd-sch-2:0 10px 30px rgba(0,0,0,.35); --bd-sch-3:0 30px 80px rgba(0,0,0,.55); --bd-schleier:rgba(10,8,6,.6);
}
/* alte Seiten-Variablen (base.css, ls.css, app.css, dark.css, ansicht.css) auf C umlenken → alle bestehenden Seiten werden warm, ohne Umbau */
html.bd,html.bd.lsd,html.bd.dark,html.bd.bd-dunkel{--bg:var(--bd-grund);--tx:var(--bd-text);--mu:var(--bd-text-2);--ln:var(--bd-linie);--card:var(--bd-flaeche);--card2:var(--bd-flaeche-2);--edge:var(--bd-linie-stark);
  --rl:var(--bd-gefahr-weich);--am:var(--bd-warn-weich);--amd:var(--bd-warn);--gt:var(--bd-primaer-weich)}
html.bd.lsd,html.bd.dark,html.bd.bd-dunkel{color-scheme:dark;--gtx:var(--bd-text)}
html.bd body{font-family:var(--bd-schrift);color:var(--bd-text);background:var(--bd-grund)}
html.bd h1,html.bd h2,html.bd h3{font-family:var(--bd-schrift-titel)}

/* ---------- Knöpfe ---------- */
html.bd .bd-btn,html.bd .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--bd-a2);min-height:var(--bd-hoehe);padding:0 var(--bd-a5);border:1.5px solid transparent;border-radius:var(--bd-r);
  background:var(--bd-primaer);color:var(--bd-auf-primaer);font:600 var(--bd-t) var(--bd-schrift);line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:none;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
html.bd .bd-btn:hover,html.bd .btn:hover{background:color-mix(in srgb,var(--bd-primaer) 88%,#000)}
html.bd .bd-btn:active,html.bd .btn:active{transform:scale(.98)}
html.bd .bd-btn:focus-visible,html.bd .btn:focus-visible{outline:none;box-shadow:var(--bd-fokus)}
html.bd .bd-btn:disabled,html.bd .btn:disabled{opacity:.45;cursor:default;transform:none}
html.bd .bd-btn.neben,html.bd .btn.gh{background:var(--bd-flaeche);color:var(--bd-text);border-color:var(--bd-linie-stark)}
html.bd .bd-btn.neben:hover,html.bd .btn.gh:hover{background:var(--bd-flaeche-2);border-color:var(--bd-primaer-rand)}
html.bd.dark .btn.gh,html.bd.lsd .btn.gh,html.bd.bd-dunkel .btn.gh,html.bd.dark .bd-btn.neben,html.bd.lsd .bd-btn.neben{color:var(--bd-text)!important;background:var(--bd-flaeche-2)}
html.bd .bd-btn.leise{background:transparent;color:var(--bd-primaer);border-color:transparent}
html.bd.lsd .bd-btn.leise,html.bd.dark .bd-btn.leise,html.bd.bd-dunkel .bd-btn.leise{color:color-mix(in srgb,var(--bd-primaer) 70%,#fff)}
html.bd .bd-btn.leise:hover{background:var(--bd-primaer-weich)}
html.bd .bd-btn.gefahr,html.bd .btn.red{background:var(--bd-gefahr);color:#fff}
html.bd.lsd .bd-btn.gefahr,html.bd.dark .bd-btn.gefahr,html.bd.lsd .btn.red,html.bd.dark .btn.red{color:#2A1513}
html.bd .bd-btn.klein,html.bd .btn.sm{min-height:var(--bd-hoehe-s);padding:0 var(--bd-a3);font-size:var(--bd-t-s);border-radius:var(--bd-r-s)}
html.bd .bd-btn.gross{min-height:var(--bd-hoehe-l);padding:0 26px;font-size:var(--bd-t-l);border-radius:18px}
html.bd .bd-btn.voll{width:100%}
html.bd .bd-btn .bd-i,html.bd .btn .bd-i{width:18px;height:18px}

/* ---------- Felder ---------- */
html.bd .bd-label,html.bd label.l{display:block;font:600 var(--bd-t-s) var(--bd-schrift);color:var(--bd-text-2);margin:var(--bd-a3) 0 6px}
html.bd .bd-feld,html.bd input.f,html.bd select.f,html.bd textarea.f{width:100%;box-sizing:border-box;min-height:var(--bd-hoehe);padding:10px 14px;border:1.5px solid var(--bd-linie-stark);border-radius:var(--bd-r-s);
  background:var(--bd-flaeche);color:var(--bd-text);font:400 var(--bd-t) var(--bd-schrift);transition:border-color .15s,box-shadow .15s;margin:0}
html.bd.lsd .bd-feld,html.bd.lsd .f,html.bd.dark .bd-feld,html.bd.bd-dunkel .bd-feld{background:var(--bd-flaeche-2)}
html.bd textarea.f,html.bd textarea.bd-feld{min-height:88px;resize:vertical;line-height:1.45}
html.bd .bd-feld:hover,html.bd .f:hover{border-color:var(--bd-text-3)}
html.bd .bd-feld:focus,html.bd .f:focus{outline:none;border-color:var(--bd-primaer);box-shadow:var(--bd-fokus)}
html.bd .bd-feld::placeholder,html.bd .f::placeholder{color:var(--bd-text-3)}
html.bd .bd-hilfe{font-size:var(--bd-t-s);color:var(--bd-text-3);margin-top:var(--bd-a1)}
html.bd .bd-schalter{display:flex;align-items:center;gap:10px;min-height:var(--bd-hoehe);font-size:var(--bd-t)}
html.bd input[type=checkbox],html.bd input[type=radio]{accent-color:var(--bd-primaer);width:19px;height:19px}

/* ---------- Karten, Kacheln, Listen, Reiter, Marken, Tabellen ---------- */
html.bd .bd-karte,html.bd .card{background:var(--bd-flaeche);border:1px solid var(--bd-linie);border-radius:var(--bd-r-l);box-shadow:none;padding:var(--bd-a5) 26px}
html.bd .bd-karte-kopf{display:flex;align-items:center;gap:var(--bd-a3);margin-bottom:var(--bd-a4)}
html.bd .bd-karte-kopf h2,html.bd .bd-karte-kopf h3,html.bd .bd-titel{margin:0;font:700 20px var(--bd-schrift-titel)}
html.bd .bd-karte-kopf .bd-marke{margin-left:var(--bd-a1)}html.bd .bd-karte-kopf>a,html.bd .bd-karte-kopf>.rechts{margin-left:auto;color:var(--bd-primaer);font-weight:700;text-decoration:none}
html.bd .bd-kachel{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border-radius:var(--bd-r-l);padding:20px 22px;background:var(--bd-blau-weich);color:var(--bd-text);border:0;text-align:left;font:inherit;cursor:default}
html.bd button.bd-kachel{cursor:pointer}html.bd button.bd-kachel:hover{filter:brightness(.98)}
html.bd .bd-kachel .bd-kachel-i{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:15px;background:var(--bd-flaeche);color:var(--bd-blau);margin-bottom:10px}
html.bd .bd-kachel .bd-kachel-t{font-weight:600;color:var(--bd-text-2)}html.bd .bd-kachel b{font:700 var(--bd-t-zahl)/1.05 var(--bd-schrift-titel)}html.bd .bd-kachel small{font-size:var(--bd-t);color:var(--bd-text-2)}
html.bd .bd-kachel.gruen{background:var(--bd-gruen-weich)}html.bd .bd-kachel.gruen .bd-kachel-i{color:var(--bd-gruen)}
html.bd .bd-kachel.pfirsich{background:var(--bd-pfirsich-weich)}html.bd .bd-kachel.pfirsich .bd-kachel-i{color:var(--bd-pfirsich)}
html.bd .bd-kachel.flieder{background:var(--bd-flieder-weich)}html.bd .bd-kachel.flieder .bd-kachel-i{color:var(--bd-flieder)}
html.bd .bd-kachel.sand{background:var(--bd-sand-weich)}html.bd .bd-kachel.sand .bd-kachel-i{color:var(--bd-sand)}
html.bd .bd-kachel.dringend b{color:var(--bd-gefahr)}
html.bd .bd-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
html.bd .bd-liste{display:flex;flex-direction:column;gap:8px}
html.bd .bd-zeile{display:flex;align-items:center;gap:var(--bd-a3);min-height:56px;padding:12px 16px;border-radius:20px;background:var(--bd-flaeche-2);color:inherit;text-decoration:none;border:0;font:inherit;text-align:left;width:100%;box-sizing:border-box}
html.bd button.bd-zeile,html.bd a.bd-zeile{cursor:pointer}html.bd button.bd-zeile:hover,html.bd a.bd-zeile:hover{background:var(--bd-flaeche-3)}
html.bd .bd-zeile .bd-zeile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}html.bd .bd-zeile small{color:var(--bd-text-2);font-size:var(--bd-t-s)}
html.bd .bd-zeile .bd-zeile-i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;background:var(--bd-flaeche);color:var(--bd-text-2);flex:none}
html.bd .bd-zeile.dringend{background:var(--bd-gefahr-weich)}html.bd .bd-zeile.dringend .bd-zeile-i{color:var(--bd-gefahr)}
html.bd .bd-zeile.warn{background:var(--bd-sand-weich)}html.bd .bd-zeile.warn .bd-zeile-i{color:var(--bd-warn)}
html.bd .bd-reiter,html.bd .tabs{display:inline-flex;gap:6px;padding:0;background:transparent;border:0;max-width:100%;overflow-x:auto}
html.bd .bd-reiter>button,html.bd .tabs>button{border:0;background:transparent;color:var(--bd-text-2);font:600 var(--bd-t) var(--bd-schrift);padding:0 16px;min-height:38px;border-radius:var(--bd-r-rund);cursor:pointer;white-space:nowrap}
html.bd .bd-reiter>button:hover,html.bd .tabs>button:hover{background:var(--bd-flaeche-2);color:var(--bd-text)}
html.bd .bd-reiter>button.on,html.bd .tabs>button.on{background:var(--bd-primaer-dunkel);color:#fff;box-shadow:none}
html.bd.lsd .bd-reiter>button.on,html.bd.lsd .tabs>button.on,html.bd.dark .tabs>button.on{background:var(--bd-primaer);color:var(--bd-auf-primaer)}
html.bd .bd-marke,html.bd .chip{display:inline-flex;align-items:center;gap:var(--bd-a1);padding:4px 12px;border-radius:var(--bd-r-rund);font:600 13px var(--bd-schrift);background:var(--bd-flaeche-3);color:var(--bd-text-2);border:0;white-space:nowrap}
html.bd .bd-marke.primaer{background:var(--bd-primaer-weich);color:var(--bd-primaer-dunkel)}
html.bd.lsd .bd-marke.primaer,html.bd.dark .bd-marke.primaer,html.bd.bd-dunkel .bd-marke.primaer{color:var(--bd-text)}
html.bd .bd-marke.ok{background:var(--bd-ok-weich);color:var(--bd-ok)}html.bd .bd-marke.warn{background:var(--bd-warn-weich);color:var(--bd-warn)}
html.bd .bd-marke.gefahr{background:var(--bd-gefahr-weich);color:var(--bd-gefahr)}html.bd .bd-marke.info{background:var(--bd-info-weich);color:var(--bd-info)}
html.bd .bd-marke.blau{background:var(--bd-blau-weich);color:var(--bd-blau)}html.bd .bd-marke.gruen{background:var(--bd-gruen-weich);color:var(--bd-gruen)}
html.bd .bd-marke.pfirsich{background:var(--bd-pfirsich-weich);color:var(--bd-pfirsich)}html.bd .bd-marke.flieder{background:var(--bd-flieder-weich);color:var(--bd-flieder)}
html.bd .bd-tabelle{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--bd-t)}
html.bd .bd-tabelle th{text-align:left;font:600 var(--bd-t-s) var(--bd-schrift);color:var(--bd-text-2);padding:10px 14px;border-bottom:1.5px solid var(--bd-linie-stark)}
html.bd .bd-tabelle td{padding:12px 14px;border-bottom:1px dashed var(--bd-linie)}html.bd .bd-tabelle tr:hover td{background:var(--bd-flaeche-2)}
html.bd .bd-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--bd-a2) var(--bd-a4)}
html.bd .bd-raster>.breit{grid-column:span 2}html.bd .bd-raster>.ganz{grid-column:1/-1}
html.bd .bd-gruppe{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:var(--bd-a4) 0 var(--bd-a1);font:700 17px var(--bd-schrift-titel);color:var(--bd-text)}
html.bd .bd-gruppe .bd-i{width:34px;height:34px;padding:7px;border-radius:12px;background:var(--bd-blau-weich);color:var(--bd-blau);box-sizing:border-box}
html.bd .bd-i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* ---------- Leerzustand: sagt, was gefiltert ist und was man tun kann ---------- */
html.bd .bd-leer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 20px;border-radius:var(--bd-r-l);background:var(--bd-flaeche-2);color:var(--bd-text-2)}
html.bd .bd-leer .bd-leer-i{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:var(--bd-flaeche);color:var(--bd-text-3)}
html.bd .bd-leer .bd-leer-i .bd-i{width:26px;height:26px}html.bd .bd-leer b{color:var(--bd-text);font-size:var(--bd-t-l)}html.bd .bd-leer small{font-size:var(--bd-t-s);color:var(--bd-text-3)}

/* ---------- Grafik-Bausteine (SVG aus BD.balken / BD.linie / BD.ring) ---------- */
html.bd .bd-grafik{display:block;width:100%;height:auto;overflow:visible;font-family:var(--bd-schrift)}
html.bd .bd-grafik .achse{stroke:var(--bd-linie-stark);stroke-width:1}html.bd .bd-grafik .gitter{stroke:var(--bd-linie);stroke-width:1;stroke-dasharray:3 4}
html.bd .bd-grafik text{fill:var(--bd-text-3);font-size:12px}html.bd .bd-grafik .wert{fill:var(--bd-text-2);font-weight:700}
html.bd .bd-grafik .f1{fill:var(--bd-primaer)}html.bd .bd-grafik .f2{fill:var(--bd-pfirsich)}html.bd .bd-grafik .f3{fill:var(--bd-flieder)}html.bd .bd-grafik .f4{fill:var(--bd-gruen)}
html.bd .bd-grafik .s1{stroke:var(--bd-primaer)}html.bd .bd-grafik .s2{stroke:var(--bd-pfirsich)}html.bd .bd-grafik .s3{stroke:var(--bd-flieder)}html.bd .bd-grafik .s4{stroke:var(--bd-gruen)}
html.bd .bd-grafik .flaeche{opacity:.16}html.bd .bd-grafik .ring-grund{stroke:var(--bd-flaeche-3)}html.bd .bd-grafik .ring-text{fill:var(--bd-text);font:700 26px var(--bd-schrift-titel)}
html.bd .bd-legende{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--bd-t-s);color:var(--bd-text-2)}html.bd .bd-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* ---------- Fenster-Rahmen C (ein Muster für alle Fenster; LS.modal/WZ.modal + fenster-neu.js) ---------- */
.modal.fzn{padding:2vh 2vw;background:var(--bd-schleier,rgba(31,36,48,.38))}
.modal.fzn>div{display:flex;flex-direction:column;padding:0;width:min(640px,96vw);max-height:96vh;border-radius:30px;overflow:auto;background:var(--bd-grund,#FAF6F0);color:var(--bd-text,#1F2430);box-shadow:var(--bd-sch-3)}
.modal.fzn.fzn-mittel>div{width:min(900px,96vw)}
.modal.fzn.fzn-breit>div{width:min(1480px,96vw)}
.modal.fzn .fzn-kopf{position:sticky;top:0;z-index:30;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:22px 30px 12px;background:var(--bd-grund,#FAF6F0)}
.modal.fzn .fzn-kopf>.fz-bar{position:static;margin:0;padding:0;background:none;border-radius:0}
.modal.fzn .fzn-kopf>.fz-bar .fz-zur{min-height:40px;height:40px;font-size:14.5px;border-radius:14px;background:var(--bd-flaeche);color:var(--bd-text);border:1.5px solid var(--bd-linie-stark)}
.modal.fzn .fzn-kopf>h2,.modal.fzn .fzn-kopf>.row{flex:1;min-width:220px;margin:0!important}
.modal.fzn .fzn-kopf h2{font:700 26px/1.2 var(--bd-schrift-titel,inherit)}
.modal.fzn .fzn-kopf>div:not(.fz-bar):not(.row){flex-basis:100%;margin:0!important;color:var(--bd-text-2);font-size:15px}
.modal.fzn>div>:not(.fzn-kopf):not(.fzn-fuss){margin-left:30px;margin-right:30px}
.modal.fzn>div>:not(.fzn-kopf):not(.fzn-fuss):nth-child(2){margin-top:8px}
.modal.fzn .fzn-fuss{position:sticky;bottom:0;z-index:30;isolation:isolate;margin-top:auto;padding:16px 30px 22px;background:var(--bd-grund,#FAF6F0);box-shadow:0 -1px 0 var(--bd-linie,#EFE7DC),0 -14px 18px -10px var(--bd-grund,#FAF6F0)}
.modal.fzn>div>:not(.fzn-kopf):not(.fzn-fuss){position:relative;z-index:1}
.modal.fzn .fzn-fuss>.row{margin:0!important;justify-content:flex-end;gap:12px}
.modal.fzn .fzn-fuss>.row>.btn{flex:0 0 auto!important;min-width:150px}
.modal.fzn .fzn-fuss .err:empty{display:none}
/* Formular: Felder liegen auf hellen Gruppen-Flächen (C), Raster 2–4 Spalten */
.modal.fzn .formgrid,.modal.fzn .fzn-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 20px;align-items:start;background:var(--bd-flaeche,#FFFDF9);border:1px solid var(--bd-linie,#EFE7DC);border-radius:24px;padding:10px 22px 20px}
.modal.fzn .formgrid>div:has(>textarea.f),.modal.fzn .fzn-raster>.fzn-feld.breit{grid-column:span 2!important}
.modal.fzn .formgrid label.l,.modal.fzn .fzn-feld label.l{margin-top:12px}
.modal.fzn .fzn-gruppe{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:14px 0 2px;font:700 17px var(--bd-schrift-titel,inherit);color:var(--bd-text)}
.modal.fzn .fzn-gruppe .bd-i{width:34px;height:34px;padding:7px;border-radius:12px;background:var(--bd-blau-weich);color:var(--bd-blau);box-sizing:border-box}
.modal.fzn .fzn-gruppe.g2 .bd-i{background:var(--bd-gruen-weich);color:var(--bd-gruen)}.modal.fzn .fzn-gruppe.g3 .bd-i{background:var(--bd-pfirsich-weich);color:var(--bd-pfirsich)}.modal.fzn .fzn-gruppe.g4 .bd-i{background:var(--bd-flieder-weich);color:var(--bd-flieder)}
@media (max-width:800px){
  .modal.fzn{padding:0;align-items:stretch}
  .modal.fzn>div,.modal.fzn.fzn-mittel>div,.modal.fzn.fzn-breit>div{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .modal.fzn .fzn-kopf{padding:14px 16px 10px}.modal.fzn .fzn-kopf h2{font-size:22px}.modal.fzn>div>:not(.fzn-kopf):not(.fzn-fuss){margin-left:14px;margin-right:14px}
  .modal.fzn .fzn-fuss{padding:12px 16px 16px}.modal.fzn .fzn-fuss>.row>.btn{flex:1 1 0!important;min-width:0}
  .modal.fzn .formgrid,.modal.fzn .fzn-raster{grid-template-columns:minmax(0,1fr);padding:6px 16px 16px}.modal.fzn .formgrid>div:has(>textarea.f),.modal.fzn .fzn-raster>.fzn-feld.breit{grid-column:auto!important}
}

/* ---------- Seitenrahmen Liste + Inhalt (Regel 11: Stammdaten/große Editoren als eigene Seite wie ein Windows-Programm) ----------
   <div class="bd-md">                                   ← füllt den Hauptbereich (Höhe bis Fensterunterkante, kein Seiten-Scroll)
     <aside class="bd-md-liste">  .bd-md-suche (input.bd-feld + Filter-Knöpfe) · .bd-md-eintraege > button.bd-md-eintrag(.on) > b + small · .bd-md-neu
     <section class="bd-md-inhalt"> .bd-md-kopf (h2, .bd-marke, Reiter .bd-reiter) · .bd-md-abschnitte (Karten nebeneinander, scrollt innen)
                                    · .bd-md-leiste (fest unten: Hinweis links, Knöpfe rechts: Speichern …)
   Handy (<900px): Liste und Inhalt wechseln sich ab – .bd-md.zeigt-inhalt blendet die Liste aus (BD.md(el) hilft, Zurück schließt). */
html.bd .bd-md{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:20px;height:calc(100dvh - var(--bd-md-oben,96px));min-height:420px}
html.bd .bd-md-liste,html.bd .bd-md-inhalt{display:flex;flex-direction:column;min-height:0;background:var(--bd-flaeche);border:1px solid var(--bd-linie);border-radius:var(--bd-r-l);overflow:hidden}
html.bd .bd-md-suche{display:flex;flex-direction:column;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--bd-linie)}
html.bd .bd-md-filter{display:flex;flex-wrap:wrap;gap:6px}html.bd .bd-md-filter>button{border:0;border-radius:var(--bd-r-rund);padding:5px 12px;background:var(--bd-flaeche-2);color:var(--bd-text-2);font:600 13px var(--bd-schrift);cursor:pointer}
html.bd .bd-md-filter>button.on{background:var(--bd-primaer-dunkel);color:#fff}html.bd.lsd .bd-md-filter>button.on,html.bd.dark .bd-md-filter>button.on{background:var(--bd-primaer);color:var(--bd-auf-primaer)}
html.bd .bd-md-eintraege{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
html.bd .bd-md-eintrag{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--bd-text);font:inherit;padding:10px 12px;border-radius:16px;cursor:pointer}
html.bd .bd-md-eintrag>span{flex:1;min-width:0;display:flex;flex-direction:column}html.bd .bd-md-eintrag b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html.bd .bd-md-eintrag small{color:var(--bd-text-3);font-size:var(--bd-t-s)}
html.bd .bd-md-eintrag:hover{background:var(--bd-flaeche-2)}html.bd .bd-md-eintrag.on{background:var(--bd-primaer-weich);box-shadow:inset 3px 0 0 var(--bd-primaer)}
html.bd .bd-md-neu{margin:8px 16px 16px}
html.bd .bd-md-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:18px 24px 12px;border-bottom:1px solid var(--bd-linie)}
html.bd .bd-md-kopf h2{margin:0;font:700 24px var(--bd-schrift-titel);flex:0 1 auto}html.bd .bd-md-kopf .bd-reiter{flex-basis:100%}
html.bd .bd-md-kopf .bd-md-zurueck{display:none}
html.bd .bd-md-abschnitte{flex:1;min-height:0;overflow:auto;padding:18px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-content:start}
html.bd .bd-md-abschnitte>.bd-karte{padding:16px 20px;background:var(--bd-flaeche-2);border:0}html.bd .bd-md-abschnitte>.ganz{grid-column:1/-1}
html.bd .bd-md-leiste{display:flex;align-items:center;gap:12px;padding:14px 24px;border-top:1px solid var(--bd-linie);background:var(--bd-flaeche)}
html.bd .bd-md-leiste .bd-md-hinweis{flex:1;color:var(--bd-text-3);font-size:var(--bd-t-s)}html.bd .bd-md-leiste .bd-md-hinweis.geaendert{color:var(--bd-warn);font-weight:600}
html.bd .bd-md-leer{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
@media (max-width:900px){
  html.bd .bd-md{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  html.bd .bd-md.zeigt-inhalt>.bd-md-liste,html.bd .bd-md:not(.zeigt-inhalt)>.bd-md-inhalt{display:none}
  html.bd .bd-md-inhalt{min-height:calc(100dvh - var(--bd-md-oben,96px))}html.bd .bd-md-kopf{padding:12px 14px}html.bd .bd-md-kopf .bd-md-zurueck{display:inline-flex}
  html.bd .bd-md-abschnitte{padding:12px 14px;grid-template-columns:minmax(0,1fr)}html.bd .bd-md-leiste{position:sticky;bottom:0;padding:12px 14px}html.bd .bd-md-leiste .bd-btn{flex:1}
}