/* 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 (auch html.bdo = nur Menüleiste oben, .bd-insel = Bausteine ohne designNeu) ---------- */
html.bd,html.bdo,.bd-insel{
  --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:#636877;
  --bd-gefahr:#AE2F2B; --bd-gefahr-weich:#FCE4E2; --bd-warn:#8F4A0C; --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,html.bdo.lsd,html.lsd .bd-insel,html.dark .bd-insel{
  --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:#ACA396;
  --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);--rd:var(--bd-gefahr)}
/* ---------- Thema JS Digital Systems (Demo/JS, marke schrift „js“ → html.bd-sj; Max 03.11.2026): Farben der JS-Webseite statt warm-cremig.
   Navy für aktive Pillen/Überschriften, Teal (Hauptfarbe der Marke) für Knöpfe/Links/Fokus, kühle Gruppenfarben. RDG unverändert. ---------- */
html.bd.bd-sj{
  --bd-primaer-dunkel:#1B3A63; --bd-primaer-weich:color-mix(in srgb,var(--bd-primaer) 13%,#fff); --bd-primaer-rand:color-mix(in srgb,var(--bd-primaer) 40%,#fff);
  --bd-grund:#F2F7FA; --bd-flaeche:#FFFFFF; --bd-flaeche-2:#F2F6FA; --bd-flaeche-3:#E4ECF2; --bd-linie:#DBE6EE; --bd-linie-stark:#C5D4E0;
  --bd-text:#1D2733; --bd-text-2:#5B6B7A; --bd-text-3:#5D6D7F;
  --bd-blau:#13739A; --bd-blau-weich:#E2F1F8; --bd-gruen:#16806A; --bd-gruen-weich:#E0F3EE; --bd-pfirsich:#B94A33; --bd-pfirsich-weich:#FCE9E4;
  --bd-flieder:#5A4FB5; --bd-flieder-weich:#ECEAFA; --bd-sand:#46607A; --bd-sand-weich:#E6EEF5;
  --bd-sch-1:0 1px 2px rgba(16,40,70,.06); --bd-sch-2:0 10px 30px rgba(16,40,70,.10); --bd-sch-3:0 30px 80px rgba(14,26,43,.28); --bd-schleier:rgba(14,26,43,.4);
}
html.bd.bd-sj.lsd,html.bd.bd-sj.dark,html.bd.bd-sj.bd-dunkel{
  --bd-primaer-dunkel:#CFE3F5; --bd-primaer-weich:color-mix(in srgb,var(--bd-primaer) 22%,#13233A); --bd-primaer-rand:color-mix(in srgb,var(--bd-primaer) 50%,#13233A);
  --bd-grund:#0E1A2B; --bd-flaeche:#13233A; --bd-flaeche-2:#182B45; --bd-flaeche-3:#1F3554; --bd-linie:#243A55; --bd-linie-stark:#30496A;
  --bd-text:#E8EEF5; --bd-text-2:#9DB0C3; --bd-text-3:#94A7BC;
  --bd-blau:#8CCDE6; --bd-blau-weich:#15334A; --bd-gruen:#86D3BE; --bd-gruen-weich:#133A35; --bd-pfirsich:#F2A08C; --bd-pfirsich-weich:#3A2329;
  --bd-flieder:#BDB3F2; --bd-flieder-weich:#272C50; --bd-sand:#A9BFD4; --bd-sand-weich:#1C2F45;
  --bd-sch-1:none; --bd-sch-2:0 10px 30px rgba(0,0,0,.4); --bd-sch-3:0 30px 80px rgba(0,0,0,.6); --bd-schleier:rgba(4,10,20,.65);
}
/* aktive Pille im Dunkeln: Navy-hell mit dunkler Schrift (statt Teal) */
html.bd.bd-sj.lsd .bd-reiter>button.on,html.bd.bd-sj.lsd .tabs>button.on,html.bd.bd-sj.lsd #tabbar .tabs button.on,html.bd.bd-sj.dark .tabs>button.on,html.bd.bd-sj.lsd.dt-oben #dtTop .dt-tb>button.on,html.bd.bd-sj.lsd .bd-md-filter>button.on{background:#CFE3F5;color:#0E1A2B}
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 ---------- */
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-btn:hover,html.bd .btn:hover{background:color-mix(in srgb,var(--bd-primaer) 88%,#000)}
:is(html.bd,.bd-insel) .bd-btn:active,html.bd .btn:active{transform:scale(.98)}
:is(html.bd,.bd-insel) .bd-btn:focus-visible,html.bd .btn:focus-visible{outline:none;box-shadow:var(--bd-fokus)}
:is(html.bd,.bd-insel) .bd-btn:disabled,html.bd .btn:disabled{opacity:.45;cursor:default;transform:none}
:is(html.bd,.bd-insel) .bd-btn.neben,html.bd .btn.gh,html.bd .btn.ghost{background:var(--bd-flaeche);color:var(--bd-text);border-color:var(--bd-linie-stark)}
:is(html.bd,.bd-insel) .bd-btn.neben:hover,html.bd .btn.gh:hover,html.bd .btn.ghost:hover{background:var(--bd-flaeche-2);border-color:var(--bd-primaer-rand)}
html.bd.dark .btn.gh,html.bd.lsd .btn.gh,html.bd.dark .btn.ghost,html.bd.lsd .btn.ghost,html.bd.bd-dunkel .btn.gh,:is(html.bd.dark,html.dark .bd-insel) .bd-btn.neben,:is(html.bd.lsd,html.lsd .bd-insel) .bd-btn.neben{color:var(--bd-text)!important;background:var(--bd-flaeche-2)}
:is(html.bd,.bd-insel) .bd-btn.leise{background:transparent;color:var(--bd-primaer);border-color:transparent}
:is(html.bd.lsd,html.lsd .bd-insel) .bd-btn.leise,:is(html.bd.dark,html.dark .bd-insel) .bd-btn.leise,:is(html.bd.bd-dunkel,html.bd-dunkel .bd-insel) .bd-btn.leise{color:color-mix(in srgb,var(--bd-primaer) 70%,#fff)}
:is(html.bd,.bd-insel) .bd-btn.leise:hover{background:var(--bd-primaer-weich)}
:is(html.bd,.bd-insel) .bd-btn.gefahr,html.bd .btn.red{background:var(--bd-gefahr);color:#fff}
:is(html.bd.lsd,html.lsd .bd-insel) .bd-btn.gefahr,:is(html.bd.dark,html.dark .bd-insel) .bd-btn.gefahr,html.bd.lsd .btn.red,html.bd.dark .btn.red{color:#2A1513}
:is(html.bd,.bd-insel) .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)}
:is(html.bd,.bd-insel) .bd-btn.gross{min-height:var(--bd-hoehe-l);padding:0 26px;font-size:var(--bd-t-l);border-radius:18px}
:is(html.bd,.bd-insel) .bd-btn.voll{width:100%}
:is(html.bd,.bd-insel) .bd-btn .bd-i,html.bd .btn .bd-i{width:18px;height:18px}

/* ---------- Felder ---------- */
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .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}
:is(html.bd.lsd,html.lsd .bd-insel) .bd-feld,html.bd.lsd .f,:is(html.bd.dark,html.dark .bd-insel) .bd-feld,:is(html.bd.bd-dunkel,html.bd-dunkel .bd-insel) .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}
:is(html.bd,.bd-insel) .bd-feld:hover,html.bd .f:hover{border-color:var(--bd-text-3)}
:is(html.bd,.bd-insel) .bd-feld:focus,html.bd .f:focus{outline:none;border-color:var(--bd-primaer);box-shadow:var(--bd-fokus)}
:is(html.bd,.bd-insel) .bd-feld::placeholder,html.bd .f::placeholder{color:var(--bd-text-3)}
:is(html.bd,.bd-insel) .bd-hilfe{font-size:var(--bd-t-s);color:var(--bd-text-3);margin-top:var(--bd-a1)}
:is(html.bd,.bd-insel) .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 ---------- */
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-karte-kopf{display:flex;align-items:center;gap:var(--bd-a3);margin-bottom:var(--bd-a4)}
:is(html.bd,.bd-insel) .bd-karte-kopf h2,:is(html.bd,.bd-insel) .bd-karte-kopf h3,:is(html.bd,.bd-insel) .bd-titel{margin:0;font:700 20px var(--bd-schrift-titel)}
:is(html.bd,.bd-insel) .bd-karte-kopf .bd-marke{margin-left:var(--bd-a1)}:is(html.bd,.bd-insel) .bd-karte-kopf>a,:is(html.bd,.bd-insel) .bd-karte-kopf>.rechts{margin-left:auto;color:var(--bd-primaer);font-weight:700;text-decoration:none}
:is(html.bd,.bd-insel) .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)}
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-kachel .bd-kachel-t{font-weight:600;color:var(--bd-text-2)}:is(html.bd,.bd-insel) .bd-kachel b{font:700 var(--bd-t-zahl)/1.05 var(--bd-schrift-titel)}:is(html.bd,.bd-insel) .bd-kachel small{font-size:var(--bd-t);color:var(--bd-text-2)}
:is(html.bd,.bd-insel) .bd-kachel.gruen{background:var(--bd-gruen-weich)}:is(html.bd,.bd-insel) .bd-kachel.gruen .bd-kachel-i{color:var(--bd-gruen)}
:is(html.bd,.bd-insel) .bd-kachel.pfirsich{background:var(--bd-pfirsich-weich)}:is(html.bd,.bd-insel) .bd-kachel.pfirsich .bd-kachel-i{color:var(--bd-pfirsich)}
:is(html.bd,.bd-insel) .bd-kachel.flieder{background:var(--bd-flieder-weich)}:is(html.bd,.bd-insel) .bd-kachel.flieder .bd-kachel-i{color:var(--bd-flieder)}
:is(html.bd,.bd-insel) .bd-kachel.sand{background:var(--bd-sand-weich)}:is(html.bd,.bd-insel) .bd-kachel.sand .bd-kachel-i{color:var(--bd-sand)}
:is(html.bd,.bd-insel) .bd-kachel.dringend b{color:var(--bd-gefahr)}
:is(html.bd,.bd-insel) .bd-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
:is(html.bd,.bd-insel) .bd-liste{display:flex;flex-direction:column;gap:8px}
:is(html.bd,.bd-insel) .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)}
:is(html.bd,.bd-insel) .bd-zeile .bd-zeile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}:is(html.bd,.bd-insel) .bd-zeile small{color:var(--bd-text-2);font-size:var(--bd-t-s)}
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-zeile.dringend{background:var(--bd-gefahr-weich)}:is(html.bd,.bd-insel) .bd-zeile.dringend .bd-zeile-i{color:var(--bd-gefahr)}
:is(html.bd,.bd-insel) .bd-zeile.warn{background:var(--bd-sand-weich)}:is(html.bd,.bd-insel) .bd-zeile.warn .bd-zeile-i{color:var(--bd-warn)}
:is(html.bd,.bd-insel) .bd-reiter,html.bd .tabs{display:inline-flex;gap:6px;padding:0;background:transparent;border:0;max-width:100%;overflow-x:auto}
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-reiter>button:hover,html.bd .tabs>button:hover{background:var(--bd-flaeche-2);color:var(--bd-text)}
:is(html.bd,.bd-insel) .bd-reiter>button.on,html.bd .tabs>button.on{background:var(--bd-primaer-dunkel);color:#fff;box-shadow:none}
:is(html.bd.lsd,html.lsd .bd-insel) .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)}
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-marke.primaer{background:var(--bd-primaer-weich);color:var(--bd-primaer-dunkel)}
:is(html.bd.lsd,html.lsd .bd-insel) .bd-marke.primaer,:is(html.bd.dark,html.dark .bd-insel) .bd-marke.primaer,:is(html.bd.bd-dunkel,html.bd-dunkel .bd-insel) .bd-marke.primaer{color:var(--bd-text)}
:is(html.bd,.bd-insel) .bd-marke.ok{background:var(--bd-ok-weich);color:var(--bd-ok)}:is(html.bd,.bd-insel) .bd-marke.warn{background:var(--bd-warn-weich);color:var(--bd-warn)}
:is(html.bd,.bd-insel) .bd-marke.gefahr{background:var(--bd-gefahr-weich);color:var(--bd-gefahr)}:is(html.bd,.bd-insel) .bd-marke.info{background:var(--bd-info-weich);color:var(--bd-info)}
:is(html.bd,.bd-insel) .bd-marke.blau{background:var(--bd-blau-weich);color:var(--bd-blau)}:is(html.bd,.bd-insel) .bd-marke.gruen{background:var(--bd-gruen-weich);color:var(--bd-gruen)}
:is(html.bd,.bd-insel) .bd-marke.pfirsich{background:var(--bd-pfirsich-weich);color:var(--bd-pfirsich)}:is(html.bd,.bd-insel) .bd-marke.flieder{background:var(--bd-flieder-weich);color:var(--bd-flieder)}
:is(html.bd,.bd-insel) .bd-tabelle{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--bd-t)}
:is(html.bd,.bd-insel) .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)}
:is(html.bd,.bd-insel) .bd-tabelle td{padding:12px 14px;border-bottom:1px dashed var(--bd-linie)}:is(html.bd,.bd-insel) .bd-tabelle tr:hover td{background:var(--bd-flaeche-2)}
:is(html.bd,.bd-insel) .bd-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--bd-a2) var(--bd-a4)}
:is(html.bd,.bd-insel) .bd-raster>.breit{grid-column:span 2}:is(html.bd,.bd-insel) .bd-raster>.ganz{grid-column:1/-1}
:is(html.bd,.bd-insel) .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)}
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .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 ---------- */
:is(html.bd,.bd-insel) .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)}
:is(html.bd,.bd-insel) .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)}
:is(html.bd,.bd-insel) .bd-leer .bd-leer-i .bd-i{width:26px;height:26px}:is(html.bd,.bd-insel) .bd-leer b{color:var(--bd-text);font-size:var(--bd-t-l)}:is(html.bd,.bd-insel) .bd-leer small{font-size:var(--bd-t-s);color:var(--bd-text-3)}

/* ---------- Grafik-Bausteine (SVG aus BD.balken / BD.linie / BD.ring) ---------- */
:is(html.bd,.bd-insel) .bd-grafik{display:block;width:100%;height:auto;overflow:visible;font-family:var(--bd-schrift)}
:is(html.bd,.bd-insel) .bd-grafik .achse{stroke:var(--bd-linie-stark);stroke-width:1}:is(html.bd,.bd-insel) .bd-grafik .gitter{stroke:var(--bd-linie);stroke-width:1;stroke-dasharray:3 4}
:is(html.bd,.bd-insel) .bd-grafik text{fill:var(--bd-text-3);font-size:12px}:is(html.bd,.bd-insel) .bd-grafik .wert{fill:var(--bd-text-2);font-weight:700}
:is(html.bd,.bd-insel) .bd-grafik .f1{fill:var(--bd-primaer)}:is(html.bd,.bd-insel) .bd-grafik .f2{fill:var(--bd-pfirsich)}:is(html.bd,.bd-insel) .bd-grafik .f3{fill:var(--bd-flieder)}:is(html.bd,.bd-insel) .bd-grafik .f4{fill:var(--bd-gruen)}
:is(html.bd,.bd-insel) .bd-grafik .s1{stroke:var(--bd-primaer)}:is(html.bd,.bd-insel) .bd-grafik .s2{stroke:var(--bd-pfirsich)}:is(html.bd,.bd-insel) .bd-grafik .s3{stroke:var(--bd-flieder)}:is(html.bd,.bd-insel) .bd-grafik .s4{stroke:var(--bd-gruen)}
:is(html.bd,.bd-insel) .bd-grafik .flaeche{opacity:.16}:is(html.bd,.bd-insel) .bd-grafik .ring-grund{stroke:var(--bd-flaeche-3)}:is(html.bd,.bd-insel) .bd-grafik .ring-text{fill:var(--bd-text);font:700 26px var(--bd-schrift-titel)}
:is(html.bd,.bd-insel) .bd-legende{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--bd-t-s);color:var(--bd-text-2)}:is(html.bd,.bd-insel) .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). */
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-md-liste,:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-md-suche{display:flex;flex-direction:column;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--bd-linie)}
:is(html.bd,.bd-insel) .bd-md-filter{display:flex;flex-wrap:wrap;gap:6px}:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-md-filter>button.on{background:var(--bd-primaer-dunkel);color:#fff}:is(html.bd.lsd,html.lsd .bd-insel) .bd-md-filter>button.on,:is(html.bd.dark,html.dark .bd-insel) .bd-md-filter>button.on{background:var(--bd-primaer);color:var(--bd-auf-primaer)}
:is(html.bd,.bd-insel) .bd-md-eintraege{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-md-eintrag>span{flex:1;min-width:0;display:flex;flex-direction:column}:is(html.bd,.bd-insel) .bd-md-eintrag b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(html.bd,.bd-insel) .bd-md-eintrag small{color:var(--bd-text-3);font-size:var(--bd-t-s)}
:is(html.bd,.bd-insel) .bd-md-eintrag:hover{background:var(--bd-flaeche-2)}:is(html.bd,.bd-insel) .bd-md-eintrag.on{background:var(--bd-primaer-weich);box-shadow:inset 3px 0 0 var(--bd-primaer)}
:is(html.bd,.bd-insel) .bd-md-neu{margin:8px 16px 16px}
:is(html.bd,.bd-insel) .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)}
:is(html.bd,.bd-insel) .bd-md-kopf h2{margin:0;font:700 24px var(--bd-schrift-titel);flex:0 1 auto}:is(html.bd,.bd-insel) .bd-md-kopf .bd-reiter{flex-basis:100%}
:is(html.bd,.bd-insel) .bd-md-kopf .bd-md-zurueck{display:none}
:is(html.bd,.bd-insel) .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}
:is(html.bd,.bd-insel) .bd-md-abschnitte>.bd-karte{padding:16px 20px;background:var(--bd-flaeche-2);border:0}:is(html.bd,.bd-insel) .bd-md-abschnitte>.ganz{grid-column:1/-1}
:is(html.bd,.bd-insel) .bd-md-leiste{display:flex;align-items:center;gap:12px;padding:14px 24px;border-top:1px solid var(--bd-linie);background:var(--bd-flaeche)}
:is(html.bd,.bd-insel) .bd-md-leiste .bd-md-hinweis{flex:1;color:var(--bd-text-3);font-size:var(--bd-t-s)}:is(html.bd,.bd-insel) .bd-md-leiste .bd-md-hinweis.geaendert{color:var(--bd-warn);font-weight:600}
:is(html.bd,.bd-insel) .bd-md-leer{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
@media (max-width:900px){
  :is(html.bd,.bd-insel) .bd-md{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  :is(html.bd,.bd-insel) .bd-md.zeigt-inhalt>.bd-md-liste,:is(html.bd,.bd-insel) .bd-md:not(.zeigt-inhalt)>.bd-md-inhalt{display:none}
  :is(html.bd,.bd-insel) .bd-md-inhalt{min-height:calc(100dvh - var(--bd-md-oben,96px))}:is(html.bd,.bd-insel) .bd-md-kopf{padding:12px 14px}:is(html.bd,.bd-insel) .bd-md-kopf .bd-md-zurueck{display:inline-flex}
  :is(html.bd,.bd-insel) .bd-md-abschnitte{padding:12px 14px;grid-template-columns:minmax(0,1fr)}:is(html.bd,.bd-insel) .bd-md-leiste{position:sticky;bottom:0;padding:12px 14px}:is(html.bd,.bd-insel) .bd-md-leiste .bd-btn{flex:1}
}
/* Auswahlfelder (select) überall gleich – hell und dunkel; schlägt ältere Einzelregeln (ansicht.css, Seiten-CSS) – Fund BD7 03.11.2026 */
html.bd select.f,html.bd select.bd-feld,html.bd.bd-auswahl select:not([multiple]):not([size]){background-color:var(--bd-flaeche)!important;color:var(--bd-text)!important;border-color:var(--bd-linie-stark)}
html.bd.lsd select.f,html.bd.lsd select.bd-feld,html.bd.lsd.bd-auswahl select:not([multiple]):not([size]),html.bd.dark select.f,html.bd.dark.bd-auswahl select:not([multiple]):not([size]),html.bd.bd-dunkel select{background-color:var(--bd-flaeche-2)!important;color:var(--bd-text)!important;border-color:var(--bd-linie-stark);color-scheme:dark}
html.bd select option{background:var(--bd-flaeche);color:var(--bd-text)}
/* ---------- Menüleiste oben (C) – Rahmen der Leitstelle (Design-Test „Menü oben“, Standard bei designNeu) ---------- */
html.bd.dt-oben #dtTop{height:68px;padding:0 24px;gap:6px;background:var(--bd-grund);color:var(--bd-text);border-bottom:1px solid var(--bd-linie)}
html.bd.dt-oben #dtTop .dt-brand{font:700 18px var(--bd-schrift-titel);color:var(--bd-text);margin-right:18px}
html.bd.dt-oben #dtTop .dt-logo{background:transparent;color:var(--bd-primaer-dunkel)}
html.bd.dt-oben #dtTop .dt-tb{display:flex;gap:4px;margin:0 auto;overflow-x:auto}
html.bd.dt-oben #dtTop .dt-tb>button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:var(--bd-r-rund);background:transparent;color:var(--bd-text-2);font:600 15px var(--bd-schrift);cursor:pointer;white-space:nowrap}
html.bd.dt-oben #dtTop .dt-tb>button:hover{background:var(--bd-flaeche-2);color:var(--bd-text)}
html.bd.dt-oben #dtTop .dt-tb>button.on{background:var(--bd-primaer-dunkel);color:#fff}
html.bd.dt-oben.lsd #dtTop .dt-tb>button.on{background:var(--bd-primaer);color:var(--bd-auf-primaer)}
html.bd.dt-oben #dtTop .dt-tb>button svg{width:18px;height:18px}
@media (max-width:1500px){html.bd.dt-oben #dtTop .dt-tb>button svg{display:none}}
html.bd.dt-oben #dtSub{gap:6px;padding:10px 24px;background:var(--bd-grund);border-bottom:0}
html.bd.dt-oben #dtSub .dt-pill{border:0;border-radius:var(--bd-r-rund);background:var(--bd-flaeche-2);color:var(--bd-text-2);font:600 14px var(--bd-schrift);padding:7px 14px}
html.bd.dt-oben #dtSub .dt-pill.on{background:var(--bd-primaer-weich);color:var(--bd-text);box-shadow:inset 0 0 0 1.5px var(--bd-primaer-rand)}
html.bd.dt-oben #dtSub .dt-n,html.bd.dt-oben #dtTop .dt-n{background:var(--bd-pfirsich-weich);color:var(--bd-pfirsich);border-radius:var(--bd-r-rund);padding:0 7px;font-size:12px}
html.bd.dt-oben .top{background:var(--bd-grund);border-bottom:0}
html.bd:not(.dt-geraet) #dtFab{display:none!important}
/* Kopfzeile allgemein (ls.css .top fest #fff) und C-Kopf mit Unterpunkten in einer Zeile */
html.bd .main>.top,html.bd #topbar{background:var(--bd-grund);border-color:var(--bd-linie);color:var(--bd-text)} /* nur Kopfleiste Leitstelle/Werkstatt, nicht der App-Kopf (#hero .top) – Fund BD3 */
html.bd.dt-c2 #topbar{height:64px;gap:10px;padding:0 24px}
html.bd.dt-c2 #topbar #ttl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html.bd.dt-c2 #topbar #dtSub{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding:0;background:none;border:0;scrollbar-width:none}
html.bd.dt-c2 #topbar #dtSub .dt-pill{white-space:nowrap}
@media (max-width:1700px){html.bd.dt-c2 #dtSuche>span,html.bd.dt-c2 #dtSuche>kbd{display:none}}
/* Design-Test-Farben (design-test.css --dt*) auf C */
html.bd.dt,html.bd.dt.lsd{--dtbg:var(--bd-grund);--dtc:var(--bd-flaeche);--dtl:var(--bd-linie);--dttx:var(--bd-text);--dtmu:var(--bd-text-2);--dts:var(--bd-primaer-weich);--dtr:var(--bd-gefahr)}
html.bd.dt-c2 #dtSuche{flex:0 0 auto;width:auto;max-width:none;height:40px;padding:0 12px;border-radius:var(--bd-r-rund);background:var(--bd-flaeche);border:1px solid var(--bd-linie)}
html.bd.dt-c2 #topbar #dtSub{flex:0 1 auto}
/* aktive Reiter/Pillen: hell dunkle Pille (C), dunkel Hauptfarbe – auch für ältere Reiterleisten (#tabbar, .dt-pill, .dt-seg, .tpl, .kebar) */
html.bd.lsd #tabbar .tabs button.on,html.bd.lsd .dt-seg button.on,html.bd.lsd .tpl button.on,html.bd.lsd .kebar .btn.on,html.bd.dark .tpl button.on{background:var(--bd-primaer);border-color:var(--bd-primaer);color:var(--bd-auf-primaer)}
html.bd #tabbar .tabs button{border-radius:var(--bd-r-rund)}
/* Handy: ☰ des Rahmens zeigen (ansicht.css blendet am Handy alle .tbtn außer bIn/lsDunkel aus) */
@media (max-width:800px){html.dt.ls-handy .top #dtBurger{display:inline-flex!important}}
/* Sprechfunk-Feld (sprechfunk.js, Inline-Stil weiß) */
:is(html.bd,html.bdo) #sfPanel{background:var(--bd-flaeche)!important;color:var(--bd-text);border:1px solid var(--bd-linie);border-radius:var(--bd-r-l)!important;box-shadow:var(--bd-sch-2)!important}
@media (max-width:800px){:is(html.bd,html.bdo) #sfPanel{width:200px!important;padding:8px!important;font-size:12px!important}}
/* Tagesband (Übersicht) am Handy: nur jede zweite Stunde beschriften */
@media (max-width:800px){html.dt .dt-ax .dt-bb span:nth-child(even){visibility:hidden}}
/* Übersicht (Design-Test-Seite „Übersicht“) in C: Begrüßung, farbige Kennzahl-Kacheln mit Symbol */
html.bd .dt-gruss{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:4px 0 16px}
html.bd .dt-gruss h2{margin:0;font:700 30px/1.15 var(--bd-schrift-titel);color:var(--bd-text)}
html.bd .dt-gruss span{color:var(--bd-text-2);font-size:var(--bd-t)}
html.bd .dt-ks{gap:18px}
html.bd .dt-k{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:0!important;border-radius:var(--bd-r-l);padding:18px 22px;background:var(--bd-blau-weich);color:var(--bd-text)}
html.bd .dt-k:nth-child(2){background:var(--bd-gruen-weich)}html.bd .dt-k:nth-child(3){background:var(--bd-pfirsich-weich)}html.bd .dt-k:nth-child(4){background:var(--bd-flieder-weich)}
html.bd .dt-k .dt-ki{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;background:var(--bd-flaeche);color:var(--bd-blau);margin-bottom:8px;font-style:normal}
html.bd .dt-k:nth-child(2) .dt-ki{color:var(--bd-gruen)}html.bd .dt-k:nth-child(3) .dt-ki{color:var(--bd-pfirsich)}html.bd .dt-k:nth-child(4) .dt-ki{color:var(--bd-flieder)}
html.bd .dt-k span{font-weight:600;color:var(--bd-text-2)}
html.bd .dt-k b{font:700 34px/1.1 var(--bd-schrift-titel);color:var(--bd-text)}
html.bd .dt-k.rot b{color:var(--bd-gefahr)}
html.bd .dt-k small{color:var(--bd-text-2)}
@media (max-width:800px){html.bd .dt-gruss h2{font-size:22px}html.bd .dt-k{padding:14px 16px}html.bd .dt-k b{font-size:26px}html.bd .dt-k .dt-ki{width:34px;height:34px;margin-bottom:4px}}
/* ---------- Funk oben (Design C): Knopf in der Kopfleiste, Ausklapp-Feld darunter, schmale Sprecher-Leiste oben ---------- */
:is(html.bd.bd-funk,html.bdo.bd-funk) #sfPanel{display:none!important}
:is(html.bd.bd-funk,html.bdo.bd-funk) #sfPanel.bd-offen{display:block!important;left:auto!important;bottom:auto!important;top:var(--sf-top,72px)!important;right:var(--sf-right,12px)!important;width:290px!important;max-width:calc(100vw - 16px);padding:14px!important;font-size:14px!important;z-index:9750!important;animation:bdSfAuf .16s ease-out}
:is(html.bd.bd-funk,html.bdo.bd-funk) #sfPanel .btn{min-height:var(--bd-hoehe-s)}
:is(html.bd,html.bdo) #sfKnopf{display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:var(--bd-r-rund);background:var(--bd-flaeche-2);color:var(--bd-text);border:1px solid var(--bd-linie);font:600 13px var(--bd-schrift);white-space:nowrap}
:is(html.bd,html.bdo) #sfKnopf .bd-i{width:18px;height:18px}
:is(html.bd,html.bdo) #sfKnopf.aktiv{background:var(--bd-gefahr);border-color:var(--bd-gefahr);color:#fff;animation:bdSfPuls 1.2s ease-in-out infinite}
:is(html.bd.lsd,html.bdo.lsd) #sfKnopf.aktiv{color:#2A1513}
@media (max-width:1500px){:is(html.bd,html.bdo) #sfKnopf span{display:none}:is(html.bd,html.bdo) #sfKnopf{padding:0 10px}}
@media (max-width:800px){html.ls-handy .top #sfKnopf{display:inline-flex!important}}
:is(html.bd,html.bdo) #sfLive{left:50%!important;top:0!important;transform:translateX(-50%)!important;display:flex;align-items:center;gap:12px;border-radius:0 0 16px 16px!important;padding:7px 20px!important;max-width:calc(100vw - 24px);background:var(--bd-primaer-dunkel)!important;color:#fff!important;font:600 14px var(--bd-schrift)!important;box-shadow:var(--bd-sch-2)!important;animation:bdSfRein .25s ease-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(html.bd.lsd,html.bdo.lsd) #sfLive{background:var(--bd-primaer)!important;color:var(--bd-auf-primaer)!important}
:is(html.bd,html.bdo) #sfLive b{display:inline-flex;align-items:center;gap:6px;font-weight:700}:is(html.bd,html.bdo) #sfLive b .bd-i{width:16px;height:16px}
:is(html.bd,html.bdo) #sfLive span{opacity:.9}
:is(html.bd,html.bdo) #sfLive.du{background:var(--bd-gefahr)!important;color:#fff!important}
@keyframes bdSfRein{from{transform:translate(-50%,-110%)}to{transform:translate(-50%,0)}}
@keyframes bdSfAuf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes bdSfPuls{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--bd-gefahr) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){:is(html.bd,html.bdo) #sfLive,:is(html.bd.bd-funk,html.bdo.bd-funk) #sfPanel.bd-offen,:is(html.bd,html.bdo) #sfKnopf.aktiv{animation:none}}
/* ---------- Menüleiste oben ohne Design C (Schalter menueOben, html.bdo – menue-oben.js): nur bisherige Farben (--gd/--g/--card/--ln/--tx/--mu),
   damit RDG wie heute aussieht; nur am PC (ab 801 px), am Handy bleibt das ☰-Menü ---------- */
@media (min-width:801px){
  html.bdo .app,html.bdo .app.schmal{grid-template-columns:minmax(0,1fr)!important}
  html.bdo .app>.side,html.bdo #railPin{display:none!important}
  html.bdo #lsMenu{display:none!important}
}
html.bdo #bdoTop{display:flex;align-items:center;gap:10px;height:56px;padding:0 18px;background:var(--gd);color:#fff;flex:none;overflow:hidden}
html.bdo .bdo-brand{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;font:inherit;font-weight:800;font-size:16px;cursor:pointer;padding:0 8px 0 0;flex:none}
html.bdo .bdo-brand img{height:32px;width:auto;border-radius:6px;background:#fff;padding:2px}
html.bdo .bdo-b{display:flex;gap:4px;margin:0 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
html.bdo .bdo-b>button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.88);font:inherit;font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap}
html.bdo .bdo-b>button:hover{background:rgba(255,255,255,.12);color:#fff}
html.bdo .bdo-b>button.on{background:#fff;color:var(--gd)}
html.bdo .bdo-b>button .bd-i{width:17px;height:17px}
html.bdo .bdo-b i,html.bdo #bdoSub i{font-style:normal;font-size:11.5px;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.25);color:#fff;box-sizing:border-box}
html.bdo .bdo-b i.rot,html.bdo #bdoSub i.rot{background:var(--r,#E3262E);color:#fff}
html.bdo #bdoSub{display:flex;gap:6px;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;margin-left:6px}
html.bdo #bdoSub>button,html.bdo #bdoSub>a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid var(--ln);border-radius:999px;background:var(--card,#fff);color:var(--tx);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;text-decoration:none}
html.bdo #bdoSub>button:hover,html.bdo #bdoSub>a:hover{border-color:var(--g)}
html.bdo #bdoSub>button.on{background:var(--gd);border-color:var(--gd);color:#fff}
html.bdo #bdoSub>button:not(.on) i{background:var(--mu,#6B7A71)}
html.bdo #bdoSub>a span{opacity:.6}
html.bdo #topbar #ttl{flex:0 0 auto}
@media (max-width:1300px){html.bdo .bdo-b>button .bd-i{display:none}html.bdo .bdo-b>button{padding:0 11px}}
@media (max-width:800px){html.bdo #bdoTop,html.bdo #bdoSub{display:none!important}}
/* Menüleiste oben ohne C: Symbole (BD.icon) als Linien; Kopfleisten-Beschriftungen bis 1800 px nur als Symbol, damit die Unterpunkte Platz haben (Fund BD5) */
html.bdo .bd-i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
html.bdo #topbar .tbtn .tx{display:none}

/* ---------- Kopf aufgeräumt (html.bd-kopf, BD.kopfOrdnen): Zeile 1 rechts Symbolgruppe + Profil + Uhr, Zeile 2 Unterpunkte/Suche/Bereitschaft/Notruf ungekürzt ---------- */
html.bd-kopf #appw .main{position:relative}
html.bd-kopf #bdKopfR{position:absolute;top:0;right:18px;z-index:5;display:flex;align-items:center;gap:10px;color:inherit}
html.bdo.bd-kopf #bdKopfR{color:#fff}html.bd.bd-kopf #bdKopfR{color:var(--bd-text)}
html.bd-kopf .bd-kopf-sym{display:flex;align-items:center;gap:4px;padding-right:8px;border-right:1px solid rgba(127,127,127,.3)}
html.bd-kopf #bdKopfR .tbtn{display:inline-flex!important;align-items:center;justify-content:center;gap:4px;min-width:36px;width:auto;height:36px;padding:0 8px;margin:0;border:0!important;border-radius:999px;background:transparent!important;color:inherit!important;font-size:16px;box-shadow:none!important;position:relative;opacity:.92}
html.bd-kopf #bdKopfR .tbtn:hover{background:rgba(127,127,127,.16)!important;opacity:1}
html.bd-kopf #bdKopfR .tbtn svg,html.bd-kopf #bdKopfR .tbtn .bd-i{width:19px;height:19px}
html.bd-kopf #bdKopfR .tbtn .tx,html.bd-kopf #bdKopfR #sfKnopf span{display:none!important}
html.bd-kopf #bdKopfR #bKrit b{font-size:12px}
html.bd-kopf #bdKopfR #sfKnopf.aktiv{background:var(--r,#E3262E)!important;color:#fff!important}
html.bd-kopf #bdKopfR #bdIch{width:38px;height:38px;padding:0;font-weight:800;font-size:13px;background:rgba(127,127,127,.18)!important;opacity:1}
html.bd-kopf #bdKopfR .clock{display:flex;align-items:center;margin:0!important;font-weight:800;font-size:16px;white-space:nowrap;color:inherit}
@media (max-width:1500px){html.bd-kopf #bdKopfR .clock #clkd,html.bd-kopf #bdKopfR .clock .bd-uhr-p{display:none}}
html.bdo.bd-kopf #bdoTop{color:#fff}html.bdo.bd-kopf .bd-kopf-sym{border-color:rgba(255,255,255,.25)}html.bdo.bd-kopf #bdKopfR #bdIch{background:#fff!important;color:var(--gd)!important}
html.bd.bd-kopf #dtTop{color:var(--bd-text)}html.bd.bd-kopf #dtTop .dt-tb{margin:0 0 0 12px}html.bd.bd-kopf #dtWer{display:none!important}
html.bd.bd-kopf #bdKopfR #bdIch{background:var(--bd-primaer-weich)!important;color:var(--bd-text)!important}
@media (max-width:1440px){html.bd-kopf .bdo-brand b,html.bd-kopf #dtTop .dt-brand b{display:none}html.bd-kopf .bdo-b>button,html.bd-kopf #dtTop .dt-tb>button{padding:0 10px;font-size:14px}}
@media (max-width:1300px){html.bd-kopf #dtTop .dt-tb>button svg{display:none}}
#bdIchFeld{display:none}
html.bd-kopf #bdIchFeld.auf{display:block;position:fixed;z-index:9750;width:290px;max-width:calc(100vw - 16px);padding:12px;border-radius:16px;background:var(--gd,#0E3B22);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25)}
html.bd.bd-kopf #bdIchFeld.auf{background:var(--bd-flaeche);color:var(--bd-text);border:1px solid var(--bd-linie)}
html.bd-kopf #bdIchFeld #whoBox{display:block!important;margin:0;position:static}
html.bd-kopf #bdIchFeld #updchip{display:inline-flex!important;margin-top:10px;background:transparent!important;border:1px solid rgba(127,127,127,.35)!important;color:inherit!important;border-radius:999px;font-size:12px}
/* Zeile 2: nichts kürzen */
html.bd-kopf #topbar #dtSub,html.bd-kopf #topbar #bdoSub{flex:0 0 auto!important;max-width:none!important;overflow:visible!important}
html.bd-kopf #topbar #ttl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html.bd-kopf #topbar #bereit,html.bd-kopf #topbar #notruf{display:inline-flex!important;flex:0 0 auto;max-width:none!important;white-space:nowrap;overflow:visible!important;font-size:13px}
html.bd-kopf #topbar #notruf:empty{display:none!important}
html.bd-kopf #topbar #bereit{margin-left:auto;font-weight:600}
/* ---------- Formular-Ordnung (Regel 13): Labels einzeilig (zu lang → gekürzt, ganzer Text als Hinweis über title), Felder einer Reihe gleich hoch,
   Hilfetexte darunter. Gilt im Fenster-Rahmen (.formgrid/.fzn-raster) und im Raster .bd-raster ---------- */
.modal.fzn .formgrid label.l,.modal.fzn .fzn-raster label.l,:is(html.bd,.bd-insel) .bd-raster .bd-label,:is(html.bd,.bd-insel) .bd-raster label.l{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.modal.fzn .formgrid :is(input.f,select.f),.modal.fzn .fzn-raster :is(input.f,select.f),:is(html.bd,.bd-insel) .bd-raster :is(input.bd-feld,select.bd-feld,input.f,select.f){height:var(--bd-hoehe,42px);min-height:var(--bd-hoehe,42px);box-sizing:border-box}
.modal.fzn .formgrid>div,.modal.fzn .fzn-raster>.fzn-feld,:is(html.bd,.bd-insel) .bd-raster>div{min-width:0;display:flex;flex-direction:column}
.modal.fzn .formgrid .hint,.modal.fzn .fzn-raster .hint,:is(html.bd,.bd-insel) .bd-raster .bd-hilfe{order:9;margin-top:4px;font-size:var(--bd-t-s,13px);color:var(--bd-text-3,#8797A6);white-space:normal}
/* Kontrast (Prüfung BD3, JS-Farben dunkel): Etiketten der Übersicht */
html.bd.lsd .dt-tag.rot{background:var(--bd-gefahr-weich);color:var(--bd-gefahr)}
html.bd.lsd .dt-bp.spaet{color:var(--bd-pfirsich)}
:is(html.bd,.bd-insel) .dt-ch a,html.bd .dt-mc a{color:var(--bd-primaer-dunkel)}
/* ---------- Übersicht volle Breite (Max 03.11.2026): 5 Kacheln, Tagesband + Meldungen + dritte Spalte (Bereitschaft/Notruf, Als Nächstes, Schnell) ---------- */
html.bd .dt-ue{max-width:none}
html.bd .dt-ue.dt-c3 .dt-ks{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
html.bd .dt-ue.dt-c3 .dt-g{grid-template-columns:minmax(0,1fr) minmax(300px,360px) minmax(260px,300px)}
@media (max-width:1599px){html.bd .dt-ue.dt-c3 .dt-g{grid-template-columns:minmax(0,1fr) minmax(280px,340px)}html.bd .dt-ue.dt-c3 .dt-seite{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (max-width:1100px){html.bd .dt-ue.dt-c3 .dt-g{grid-template-columns:minmax(0,1fr)}html.bd .dt-ue.dt-c3 .dt-seite{grid-template-columns:minmax(0,1fr)}}
html.bd .dt-seite{display:flex;flex-direction:column;gap:16px;min-width:0}
html.bd .dt-sk{padding:18px 20px!important}
html.bd .dt-bereit{display:flex;flex-direction:column;gap:2px;background:var(--bd-blau-weich)!important;border:0!important}
html.bd .dt-bereit small{color:var(--bd-text-2);font-weight:600;margin-top:6px}html.bd .dt-bereit small:first-child{margin-top:0}
html.bd .dt-bereit b{font:700 20px/1.25 var(--bd-schrift-titel);color:var(--bd-text);overflow-wrap:anywhere}
html.bd .dt-bereit .dt-nr{font-size:18px;letter-spacing:.01em}
html.bd .dt-nx{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:10px;padding:8px 0;border-top:1px solid var(--bd-linie)}
html.bd .dt-nx span{grid-row:span 2;font-weight:800;color:var(--bd-primaer-dunkel)}html.bd.lsd .dt-nx span{color:var(--bd-primaer)}
html.bd .dt-nx b{font-weight:700}html.bd .dt-nx small{color:var(--bd-text-2)}
html.bd .dt-schnell{display:flex;flex-wrap:wrap;gap:8px}html.bd .dt-schnell .bd-btn{flex:1 1 calc(50% - 8px);justify-content:flex-start}
/* Reiter der Seite in der Unterpunkt-Zeile (statt zweiter Reiterzeile) */
@media (min-width:801px){html.bd.dt-oben #tabbar{display:none}}
html.bd #dtSub .dt-sep{width:1px;align-self:stretch;margin:4px 4px;background:var(--bd-linie-stark)}
html.bd #dtSub .dt-pill.dt-reit{background:transparent;border:1px solid var(--bd-linie)}
html.bd #dtSub .dt-pill.dt-reit.on{background:var(--bd-primaer-dunkel);border-color:var(--bd-primaer-dunkel);color:#fff;box-shadow:none}
html.bd.bd-sj.lsd #dtSub .dt-pill.dt-reit.on{background:#CFE3F5;color:#0E1A2B}
/* Zeile 2 bricht bei Platzmangel um, statt etwas zu kürzen (Fund BD1: Notruf bei 1280) */
html.bd-kopf #topbar{flex-wrap:wrap;height:auto!important;min-height:60px;row-gap:6px;padding-top:10px!important;padding-bottom:10px!important}
html.bd-kopf #topbar #bereit{margin-left:auto}

/* Zeile 1 bei 1280–1440: Bereiche mit Kurznamen („Fahrzeuge & Werkstatt“ → „Fahrzeuge“); Zeile 2: Unterpunkte + Reiter brechen um statt abzuschneiden */
html.bd #dtTop .dt-tb .dt-kurz{display:none}
@media (max-width:1500px){html.bd.bd-kopf #dtTop .dt-tb .dt-lang{display:none}html.bd.bd-kopf #dtTop .dt-tb .dt-kurz{display:inline}html.bd.bd-kopf #dtTop .dt-tb>button{padding:0 11px}}
html.bd-kopf #topbar #dtSub,html.bd-kopf #topbar #bdoSub{flex-wrap:wrap!important;row-gap:6px;flex:1 1 auto!important;min-width:0}

/* Kontrast ≥ 4,5 (Prüfung BD5/BD3): Knöpfe und aktive Pillen auf der Hauptfarbe mit --bd-primaer-knopf (bd-design.js dunkelt die Kundenfarbe nur ab,
   wenn weder weiße noch dunkle Schrift 4,5 erreicht – z. B. RDG-Grün), Nebentext in Listen, versteckter Seitentitel ganz aus */
html.bd .bd-btn:not(.neben):not(.leise):not(.gefahr),html.bd .btn:not(.gh):not(.red):not(.ghost){background:var(--bd-primaer-knopf,var(--bd-primaer))}
html.bd.lsd .bd-reiter>button.on,html.bd.lsd .tabs>button.on,html.bd.lsd .bd-md-filter>button.on,html.bd.dark .tabs>button.on{background:var(--bd-primaer-knopf,var(--bd-primaer))}
:is(html.bd,.bd-insel) .bd-md-eintrag small{color:var(--bd-text-2)}
html.bd-kopf #topbar #ttl{display:none!important}
/* Kontrast: leise Knöpfe hell in der dunklen Hauptfarbe (Teal/Grün 2,9 → Navy/Dunkelgrün), Fristen-Knopf in Warnfarbe */
html.bd:not(.lsd):not(.dark):not(.bd-dunkel) .bd-btn.leise{color:var(--bd-primaer-dunkel)}
html.bd #bKrit,html.bd #bKrit .tx{color:var(--bd-warn)!important}
/* Ordnung (Regel 13, Fundliste BD7 – Einstellungen/Rollen): Haken vor dem Text statt am rechten Rand; Felder einer Einstellungsreihe gleich breit;
   Rollenname am Handy nicht zusammengedrückt */
html.bd label.kv2{justify-content:flex-start;gap:12px}
html.bd label.kv2>input[type=checkbox]{order:-1;flex:none;margin:0}
html.bd label.kv2>span{flex:1;min-width:0}
html.bd :is([id^="tgc_"],[id^="blc_"],#anA,#anT).f{width:170px!important;max-width:100%}
html.bd :is(.akT,.akB).f{width:220px!important;max-width:100%}
html.bd #rN.f{flex:1 1 200px;min-width:180px}
/* Handy (≤ 560 px): Seitentitel in der Kopfzeile ungekürzt – Uhr ausblenden (das Handy zeigt die Zeit selbst) (Fund BD7) */
@media (max-width:560px){html.bd .top .clock{display:none!important}html.bd .top #ttl{overflow:visible;text-overflow:clip}}
/* ---------- Einstellungen in C (Regel 11/13/14, einst-neu.js): Liste links + Inhalt rechts als Karten in voller Höhe, nur innen scrollen,
   Speicher-Leiste immer unten sichtbar, Linien-Symbole statt Emojis, Schalter in voller Größe ---------- */
html.bd .einn{grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:stretch;height:var(--einn-h,calc(100dvh - 260px));min-height:420px}
html.bd .einn .el{position:static;display:flex;flex-direction:column;min-height:0;background:var(--bd-flaeche);border:1px solid var(--bd-linie);border-radius:var(--bd-r-l);padding:14px;overflow:hidden}
html.bd .einn .el .es{margin:0 0 10px}
html.bd .einn #einL{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px}
html.bd .einn .el .it{border-radius:14px;padding:9px 12px;font-weight:600;color:var(--bd-text)}
html.bd .einn .el .it:hover{background:var(--bd-flaeche-2)}
html.bd .einn .el .it.on{background:var(--bd-primaer-weich);color:var(--bd-text);box-shadow:inset 3px 0 0 var(--bd-primaer)}
html.bd .einn .el .it>span:first-child{display:inline-flex;width:20px;justify-content:center;color:var(--bd-text-2)}
html.bd .einn .el .it small{color:var(--bd-text-3)}
html.bd .einn .el .it.sep{border-top:1px solid var(--bd-linie);border-radius:0 0 14px 14px}
html.bd .einn .er{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 .einn .er>.eh{margin:0;padding:20px 24px 2px;font:700 24px var(--bd-schrift-titel)}
html.bd .einn .er>.eh+div{padding:0 24px 8px;color:var(--bd-text-2)!important}
html.bd .einn .ek{flex:1;min-height:0;overflow:auto;margin:0;padding:12px 24px 20px;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;align-content:start}
html.bd .einn .ek>.card{background:var(--bd-flaeche-2);border:0;border-radius:20px;padding:14px 18px}
html.bd .einn .ek>.card.etech{background:transparent;border:1px dashed var(--bd-linie-stark)}
html.bd .einn .kv2{border-color:var(--bd-linie);justify-content:space-between}
html.bd .einn .kv2>input[type=checkbox]{order:0}
html.bd .einn input[type=checkbox]{width:40px!important;height:23px!important;background:var(--bd-linie-stark)}
html.bd .einn input[type=checkbox]:checked{background:var(--bd-primaer-knopf,var(--bd-primaer))}
html.bd .einn .ei{border-color:var(--bd-linie-stark);color:var(--bd-text-2)}
html.bd .einn .edirty{outline-color:var(--bd-warn)}
html.bd #einBar{position:static;margin-top:12px}
html.bd #einBar:empty::before{content:'✓  Alle Einstellungen gespeichert';display:flex;align-items:center;min-height:52px;padding:0 20px;border-radius:var(--bd-r-l);background:var(--bd-flaeche);border:1px solid var(--bd-linie);color:var(--bd-text-2);font-weight:600}
html.bd #einBar .ebar{margin:0;min-height:52px;padding:8px 12px 8px 20px;border-radius:var(--bd-r-l);background:var(--bd-flaeche);border:1.5px solid var(--bd-warn);color:var(--bd-text);box-shadow:var(--bd-sch-2)}
html.bd #einBar .ebar b{color:var(--bd-warn)}
@media (max-width:820px){html.bd .einn{height:auto}html.bd .einn .ek{grid-template-columns:minmax(0,1fr)}}
@media (min-width:821px){html.bd .einn .er>.ezu{display:none!important}}
html.bd .einn .ek{align-items:start}
html.bd .einn .er>:not(.eh):not(.ek):not(.ezu){padding:0 24px}
html.bd .einn .er>div:last-child:not(.ek){padding:8px 24px 12px;color:var(--bd-text-3);font-size:var(--bd-t-s)}