/* ==============================================================================
   WERKSTATTBUCH · style.css (Gestaltung der Oberfläche; wird von index.html geladen)
   Suche nach dem Kürzel (z. B. "CSS-04"), um direkt zum Abschnitt zu springen.

  CSS-01  Farben und Themes (Light/Dark): alle Farbvariablen
  CSS-02  Grundgerüst: Seite, Kopfzeile, Navigation, Reiter, Eingabefelder, Buttons
  CSS-03  Tabellen und Status-Chips
  CSS-04  Dialoge (Fenster) und Formularraster
  CSS-05  Auswahllisten: Kunde/Maschine/Stellplatz, Select-Pfeil, eigene Dropdown-Liste
  CSS-06  Texteditor (Rich-Text), Hover- und Fokuszustände, Notiz-Zellen
  CSS-07  Login-Seite und Fehlerrahmen
  CSS-08  Auftragsliste (breite Tabelle), Ansicht, Mehrfach-Zuweisung, Hinweise
  CSS-09  Verwaltung-Boxen und -Listen, Suchfeld, Geräteauswahl, Mitarbeiter-Verlauf
  CSS-10  Animationen und Rückmeldungen (Fortschrittsbalken, Hinweismeldungen)
  CSS-11  Formularbausteine: Häkchen, Zusatzfelder, Drag & Drop der Listen
  CSS-12  Arbeitsschein-Fenster
  CSS-13  Einstellungsmenü (Zahnrad oben rechts)
  CSS-14  Touch-Geräte (Handy/Tablet)
  CSS-15  Schmale Bildschirme: Tabellen werden zu Karten
  CSS-16  Sonstiges, Scrollbalken, reduzierte Bewegung
  CSS-17  Designvarianten a–d (Einstellungen → Design)
  CSS-18  Design-Auswahlfenster mit Vorschaubildern
  CSS-19  Statusfarben (frei wählbare Farbpalette)
  CSS-20  Verwaltung: Tabellen, Kennzahlen, Status-Editor, Änderungsverlauf, Pflichtfelder
  CSS-21  Handbuch
   Hinweis: Nach Änderungen die Versionsnummer hinter style.css? in index.html erhöhen,
   damit die Browser die neue Datei laden (Cache).
   ============================================================================== */
/* ==============================================================================
   CSS-01 · Farben und Themes (Light/Dark): alle Farbvariablen
   ============================================================================== */
:root{--sb1:#fde3e3;--sc1:#b42318;--sb2:#d4efc9;--sc2:#2b6a14;--sb3:#cdf3e6;--sc3:#0a6b57;--sb4:#dbe6fb;--sc4:#2c4fa8;--sb5:#d9f0fb;--sc5:#0b6a94;--sep:#dde1e8;--septx:#2f3744;--bg:#f4f5f7;--sf:#fff;--tx:#1d2330;--mu:#667085;--bd:#dfe3ea;--hv:#f0f4fa;--ac:#0f6cbd;--acx:#fff;--wn:#fff4d6;--wnb:#e0b43c;--wnt:#6b4e00;--c1:#9a5b00;--b1:#fdebd0;--c2:#0f6cbd;--b2:#e3effb;--c3:#1e7a46;--b3:#e1f4e8;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sb1:#4a1f22;--sc1:#ff9a95;--sb2:#22381a;--sc2:#9fd67e;--sb3:#123a30;--sc3:#6fe0bf;--sb4:#1f2c4f;--sc4:#8fb0f5;--sb5:#14354a;--sc5:#7fcdf0;--sep:#3a414d;--septx:#e8ebf0;--bg:#14171c;--sf:#1d2128;--tx:#e8ebf0;--mu:#98a2b3;--bd:#323944;--hv:#262c35;--ac:#4a9ae8;--acx:#0b1420;--wn:#3a3012;--wnb:#8a6d1a;--wnt:#f3d98a;--c1:#f0b560;--b1:#3d2e14;--c2:#7db8f2;--b2:#1c2e43;--c3:#6fd093;--b3:#17332380;color-scheme:dark}}
:root[data-theme="dark"]{--sb1:#4a1f22;--sc1:#ff9a95;--sb2:#22381a;--sc2:#9fd67e;--sb3:#123a30;--sc3:#6fe0bf;--sb4:#1f2c4f;--sc4:#8fb0f5;--sb5:#14354a;--sc5:#7fcdf0;--sep:#3a414d;--septx:#e8ebf0;--bg:#14171c;--sf:#1d2128;--tx:#e8ebf0;--mu:#98a2b3;--bd:#323944;--hv:#262c35;--ac:#4a9ae8;--acx:#0b1420;--wn:#3a3012;--wnb:#8a6d1a;--wnt:#f3d98a;--c1:#f0b560;--b1:#3d2e14;--c2:#7db8f2;--b2:#1c2e43;--c3:#6fd093;--b3:#17332380;color-scheme:dark}
/* ==============================================================================
   CSS-02 · Grundgerüst: Seite, Kopfzeile, Navigation, Reiter, Eingabefelder, Buttons
   ============================================================================== */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
header{background:var(--sf);border-bottom:1px solid var(--bd);padding:10px 16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
h1{font-size:17px;margin:0}
nav{display:flex;gap:4px}
nav button{background:none;border:0;padding:8px 12px;border-bottom:2px solid transparent;color:var(--mu);font:inherit;cursor:pointer}
nav button.on{color:var(--ac);border-color:var(--ac);font-weight:600}
.atn{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin-bottom:14px;flex-wrap:wrap}
.atb{background:none;border:0;padding:8px 14px;border-bottom:2px solid transparent;color:var(--mu);font:inherit;cursor:pointer;margin-bottom:-1px}
.atb:hover{background:var(--hv);color:var(--ac)}
.atb.on{color:var(--ac);border-color:var(--ac);font-weight:600}
main{padding:14px 16px;max-width:none}
.bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
input,select,textarea{font:inherit;color:var(--tx);background:var(--sf);border:1px solid var(--bd);border-radius:4px;padding:7px 9px;width:100%}
.bar input{width:260px;max-width:100%}.bar select{width:auto}
button.p,button.s,button.d{font:inherit;border-radius:4px;padding:7px 14px;cursor:pointer;border:1px solid var(--bd);background:var(--sf);color:var(--tx)}
button.p{background:var(--ac);border-color:var(--ac);color:var(--acx);font-weight:600}
button.d{color:#c4314b;border-color:#c4314b66}
.sp{flex:1}
/* ==============================================================================
   CSS-03 · Tabellen und Status-Chips
   ============================================================================== */
.wrap{background:var(--sf);border:1px solid var(--bd);border-radius:6px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:720px}
th{text-align:left;font-weight:600;color:var(--mu);padding:9px 12px;border-bottom:1px solid var(--bd);white-space:nowrap;font-size:13px}
td{padding:9px 12px;border-bottom:1px solid var(--bd);vertical-align:top}
tr.sps td{background:var(--sep);color:var(--septx);font-weight:600;font-size:13px;padding:5px 10px;border-bottom:0;border-top:1px solid var(--bd)}
tr.sps:hover{background:var(--sep)}
tr.sps.nolb td{padding:0 10px;line-height:8px;font-size:1px}
tr.sps td.spa{padding:2px 8px;line-height:normal}
.spa{white-space:nowrap;text-align:right;width:1%}
.spa .ic{padding:1px 7px!important;font-size:13px;margin-left:3px}
.spa .ic:disabled{opacity:.35;cursor:default}
tbody tr{cursor:pointer}.ro tbody tr{cursor:default}tbody tr:hover{background:var(--hv)}tbody tr:last-child td{border-bottom:0}
.chip{display:inline-block;padding:1px 9px;border-radius:10px;font-size:12px;white-space:nowrap}
.s1{background:var(--sb1);color:var(--sc1)}.s2{background:var(--sb2);color:var(--sc2)}.s3{background:var(--sb3);color:var(--sc3)}.s4{background:var(--sb4);color:var(--sc4)}.s5{background:var(--sb5);color:var(--sc5)}
.mu{color:var(--mu)}.warn{color:var(--wnt)}
.empty{padding:28px;text-align:center;color:var(--mu)}
/* ==============================================================================
   CSS-04 · Dialoge (Fenster) und Formularraster
   ============================================================================== */
dialog{border:1px solid var(--bd);border-radius:8px;background:var(--sf);color:var(--tx);padding:0;width:min(640px,94vw);max-height:92vh;max-height:92dvh}
dialog::backdrop{background:#0007}
.dh{padding:14px 18px;border-bottom:1px solid var(--bd);font-weight:600;font-size:16px;position:sticky;top:0;z-index:3;background:var(--sf)}
.db{padding:14px 18px;display:grid;gap:12px;grid-template-columns:1fr 1fr}
.db .f{grid-column:span 2}.db .h{grid-column:span 1}
label{display:block;font-size:12px;color:var(--mu);margin-bottom:3px}
textarea{min-height:70px;resize:vertical}
.df{padding:12px 18px;border-top:1px solid var(--bd);display:flex;gap:8px;align-items:center;position:sticky;bottom:0;z-index:3;background:var(--sf)}
/* ==============================================================================
   CSS-05 · Auswahllisten: Kunde/Maschine/Stellplatz, Select-Pfeil, eigene Dropdown-Liste
   ============================================================================== */
.cb{position:relative}.cb input{padding-right:36px}
.cbb{position:absolute;right:1px;top:1px;bottom:1px;width:34px;border:0;background:none;color:var(--mu);cursor:pointer;font-size:16px}
.cbl{position:absolute;left:0;right:0;top:100%;margin-top:2px;z-index:5;background:var(--sf);border:1px solid var(--bd);border-radius:4px;max-height:254px;overflow-y:auto;box-shadow:0 6px 18px #0003}
.cbl div{height:36px;line-height:20px;padding:8px 10px;box-sizing:border-box;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbl div:hover{background:var(--hv)}
select:not(.qs):not(.sw):not(.cmb>select){-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--mu) 50%),linear-gradient(135deg,var(--mu) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:not(.qs):not(.sw):not(.cmb>select):hover,select:not(.qs):not(.sw):not(.cmb>select):focus{background-image:linear-gradient(45deg,transparent 50%,var(--ac) 50%),linear-gradient(135deg,var(--ac) 50%,transparent 50%)}
.cbl.sdl{position:fixed;right:auto;margin:0;z-index:2000;min-width:120px;max-height:254px}
.cbl.sdl div.on{background:var(--hv);color:var(--ac);font-weight:600}
/* ==============================================================================
   CSS-06 · Texteditor (Rich-Text), Hover- und Fokuszustände, Notiz-Zellen
   ============================================================================== */
.bar button.s{padding:6px 11px;font-size:16px}
.rtb{display:flex;gap:4px;margin-bottom:4px}
.rtb button.s{padding:2px 10px;min-width:32px;font-size:14px}
.rte{min-height:90px;max-height:240px;overflow-y:auto;border:1px solid var(--bd);border-radius:4px;padding:7px 9px;background:var(--sf);color:var(--tx)}
.rte:focus{outline:2px solid var(--ac);outline-offset:-1px}
.rte:empty:before{content:attr(data-ph);color:var(--mu)}
.rte ul,.rte ol{margin:4px 0;padding-left:22px}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:default}
button.p:hover{filter:brightness(1.12)}
button.s:hover{background:var(--hv);border-color:var(--ac)}
button.d:hover{background:#c4314b;color:#fff}
nav button:hover{background:var(--hv);color:var(--ac)}
.cbb:hover{color:var(--ac);background:var(--hv)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
select:hover,input:hover{border-color:var(--ac)}
.rtb button.s.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}
.rtb button.s.on:hover{filter:brightness(1.12);background:var(--ac)}
.nt{min-width:200px;max-width:340px;white-space:normal;overflow-wrap:anywhere}
.nt ul,.nt ol{margin:0;padding-left:18px}
.nt div,.nt p{margin:0}
/* ==============================================================================
   CSS-07 · Login-Seite und Fehlerrahmen
   ============================================================================== */
#login,#setup{min-height:100vh;align-items:center;justify-content:center;padding:20px}
#login:not([hidden]),#setup:not([hidden]){display:flex}
.lb{background:var(--sf);border:1px solid var(--bd);border-radius:8px;padding:24px;width:min(360px,100%);display:grid;gap:12px}
.lb h2{margin:0 0 4px;font-size:18px}
#who{color:var(--mu);font-size:13px}
.err{border-color:#d13438!important;box-shadow:0 0 0 1px #d13438}

/* ==============================================================================
   CSS-08 · Auftragsliste (breite Tabelle), Ansicht, Mehrfach-Zuweisung, Hinweise
   ============================================================================== */
.wide{table-layout:fixed;width:100%;min-width:1600px}
.rtb input[type=color]{width:36px;height:30px;padding:2px;cursor:pointer}
.dhf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ic{padding:2px 9px!important;font-size:16px}
.vv{padding:7px 9px;border:1px solid var(--bd);border-radius:4px;background:var(--hv);min-height:34px;overflow-wrap:anywhere}
.vv.notes{min-height:90px}
.vv ul,.vv ol{margin:4px 0;padding-left:22px}
.qs{width:100%;border:0;border-radius:10px;padding:3px 2px;font-size:10.5px;font-weight:600;cursor:pointer}
.wide td,.wide th{padding:8px 6px;font-size:13px;overflow-wrap:anywhere}
.wide th{white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;font-size:12px}
.wide td:last-child{white-space:nowrap}
@media (min-width:761px){.wide th:nth-child(2),.wide td:nth-child(2),.wide th:nth-child(4),.wide td:nth-child(4),.wide th:nth-child(5),.wide td:nth-child(5),.wide th:nth-child(6),.wide td:nth-child(6),.wide th:nth-child(7),.wide td:nth-child(7),.wide th:nth-child(8),.wide td:nth-child(8){text-align:center}}
.wide .nt{min-width:0;max-width:none}
.mx{display:inline-block;margin-top:3px;font-size:11px;color:var(--mu);white-space:nowrap}
.mids{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mids[hidden],.mad[hidden]{display:none}
.mc{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border:1px solid var(--bd);border-radius:999px;background:var(--hv);font-size:13px}
.mc button{border:0;background:none;cursor:pointer;color:var(--mu);font-size:16px;line-height:1;padding:0 6px;border-radius:50%}
.mc button:hover{color:var(--tx)}
.mad{margin-top:6px}
.hint{background:var(--wn);border:1px solid var(--wnb);color:var(--wnt);border-radius:6px;padding:9px 12px;white-space:pre-wrap}
.hist{font-size:13px}.hist table{min-width:0}.hist td,.hist th{padding:6px 8px}
.msg{color:#c4314b;font-size:13px}
.note{margin:12px 0 0;font-size:12px;color:var(--mu)}
@media(max-width:520px){.db{grid-template-columns:1fr}.db .f,.db .h{grid-column:span 1}}
/* ==============================================================================
   CSS-09 · Verwaltung-Boxen und -Listen, Suchfeld, Geräteauswahl, Mitarbeiter-Verlauf
   ============================================================================== */
.gr{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-bottom:6px;align-items:center}
.adg{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.adb .dh{border-bottom:1px solid var(--bd)}
.ao{display:flex;gap:12px;align-items:center;padding:8px 18px;border-bottom:1px solid var(--bd)}
.ao span:first-of-type{flex:1;overflow-wrap:anywhere}
.ao button.d{padding:3px 10px;font-size:13px}
.adw .ao{gap:8px;padding:8px 12px}.adw .ao button{padding-left:9px;padding-right:9px;flex:none}.adw .ao .mu{flex:0 1 100px;min-width:0}
.adf{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px}
.adf input{flex:1 1 150px;min-width:0}
.dv div{padding:1px 0}
.pwx{position:relative;display:block}.pwx:has(>input[hidden]){display:none}.pwx input{padding-right:40px;display:block}
.pwe{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:34px;height:30px;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;font-size:16px;line-height:1;opacity:.65;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pwe:hover,.pwe.on{opacity:1}.pwx input:disabled~.pwe{display:none}
.sx{position:relative;display:inline-block;max-width:100%}
.sx input{padding-right:30px}
.sxb{position:absolute;right:1px;top:1px;bottom:1px;width:28px;border:0;background:none;color:var(--mu);cursor:pointer;font-size:14px;border-radius:0 4px 4px 0}
.sxb:hover{color:var(--ac);background:var(--hv)}
.dvi{padding:3px 6px;border-radius:4px;cursor:pointer}
.dvi:hover{outline:1px solid var(--ac)}
.dvi.on{background:var(--ac);color:var(--acx)}
.ao input{flex:1;min-width:0}
.qm{width:100%;font-size:12px;padding:3px 4px}
.mhh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.mhh .mu{flex:1}
.mht{display:flex;gap:4px}
.mht button.s{padding:3px 10px;font-size:13px}
.mht button.s.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}
.mht button.s.on:hover{filter:brightness(1.12);background:var(--ac)}
.mhs{display:block;margin-bottom:6px}
.hscroll{max-height:232px;overflow-y:auto;border:1px solid var(--bd);border-radius:4px}
.hz{white-space:pre-wrap;overflow-wrap:anywhere;min-width:200px;max-width:420px}
/* ==============================================================================
   CSS-10 · Animationen und Rückmeldungen (Fortschrittsbalken, Hinweismeldungen)
   ============================================================================== */
button{transition:background-color .12s,border-color .12s,filter .12s,transform .08s}
button:active:not(:disabled){transform:scale(.97)}
dialog[open]{animation:dlg .16s ease-out}
dialog[open]::backdrop{animation:fadein .16s ease-out}
@keyframes dlg{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes fl{from{background:var(--b3)}to{background:transparent}}
@keyframes pbm{from{background-position:-40% 0}to{background-position:140% 0}}
.lb{animation:rise .35s ease-out}
.lb.shake{animation:shake .35s}
.appin{animation:fadein .35s ease-out}
.msg:not(:empty){animation:fadein .25s ease-out}
#rf.spin{animation:rot .8s linear infinite}
tr.fl td{animation:fl 1.2s ease-out}
#pb{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;pointer-events:none;opacity:0;transition:opacity .2s;background:linear-gradient(90deg,transparent,var(--ac),transparent);background-size:40% 100%;background-repeat:no-repeat}
#pb.on{opacity:1;animation:pbm 1s linear infinite}
#toasts{position:fixed;top:auto;right:auto;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;padding:0;border:0;background:transparent;overflow:visible;width:max-content;max-width:92vw;height:auto;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:1000}
.toast{background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-left:4px solid var(--c3);border-radius:6px;padding:8px 14px;box-shadow:0 6px 18px #0003;font-size:13px;animation:tin .22s ease-out}
.toast.err{border-left-color:#c4314b}
.toast.out{opacity:0;transform:translateY(6px);transition:opacity .28s,transform .28s}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ==============================================================================
   CSS-11 · Formularbausteine: Häkchen, Zusatzfelder, Drag & Drop der Listen
   ============================================================================== */
.ck{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx);margin-top:6px;cursor:pointer}
.ck input{width:auto;margin:0}
.adf select{width:auto;flex:none}
#c_dev .gp{display:none}
#c_dev.uni .gp{display:block}
#c_dev.uni .gr{grid-template-columns:1fr 1fr 1fr auto}
.ao[draggable=true]{cursor:grab}
.ao .hd{font-style:normal;color:var(--mu);cursor:grab;user-select:none;margin-right:-4px;letter-spacing:-2px}
.ao.dg{opacity:.45}
.ao.dgb{box-shadow:inset 0 2px 0 var(--ac)}
.ao.dga{box-shadow:inset 0 -2px 0 var(--ac)}
.xe .rte{min-height:64px;max-height:200px}
input[type=checkbox],.ck input[type=checkbox]{-webkit-appearance:none;appearance:none;width:16px;height:16px;min-width:16px;padding:0;margin:0;border:1.5px solid var(--mu);border-radius:4px;background:var(--sf);display:inline-grid;place-content:center;cursor:pointer;flex:none}
input[type=checkbox]::after{content:"";width:9px;height:5px;margin-top:-1px;border:solid var(--acx);border-width:0 0 2px 2px;transform:rotate(-45deg);opacity:0}
input[type=checkbox]:checked{background:var(--ac);border-color:var(--ac)}
input[type=checkbox]:checked::after{opacity:1}
input[type=checkbox]:hover{border-color:var(--ac)}
/* ==============================================================================
   CSS-12 · Arbeitsschein-Fenster
   ============================================================================== */
.dhb{display:flex;gap:10px;align-items:center;flex:none}
.dx{line-height:1;padding:2px 9px!important}
.asb{display:block}
.asg{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:16px;align-items:start}
.asp{position:sticky;top:0}
.asp iframe{width:100%;height:calc(92dvh - 190px);min-height:420px;border:1px solid var(--bd);border-radius:6px;background:#fff}
.ass{border:1px solid var(--bd);border-radius:8px;margin:0 0 10px;background:var(--sf)}
.ass>summary{cursor:pointer;padding:9px 12px;font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px}
.ass>summary::-webkit-details-marker{display:none}
.ass>summary::before{content:"▸";color:var(--mu);transition:transform .15s}
.ass[open]>summary::before{transform:rotate(90deg)}
.ass .sp{flex:1}
.asi{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 12px 12px}
.asi .w{grid-column:1/-1}
.cmb{position:relative}.cmb input{padding-right:32px}.cmb select{position:absolute;right:0;top:0;width:32px;height:100%;opacity:0;cursor:pointer;padding:0}.cmb::after{content:'▾';position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--mu)}
.asi .ckl{display:flex;gap:8px;align-items:center;color:var(--tx);font-size:14px;margin:0}
.sgc{width:100%;aspect-ratio:7/2;background:#fff;border:1px dashed var(--mu);border-radius:6px;touch-action:none;cursor:crosshair;display:block}
@media(max-width:900px){.asg{grid-template-columns:1fr}.asp{position:static}.asp iframe{height:60dvh}}
/* ==============================================================================
   CSS-13 · Einstellungsmenü (Zahnrad oben rechts)
   ============================================================================== */
.stg{position:static}
header{position:relative}
.stm{position:absolute;right:12px;top:calc(100% - 2px);max-width:calc(100vw - 24px);z-index:60;min-width:240px;background:var(--sf);border:1px solid var(--bd);border-radius:8px;box-shadow:0 8px 24px #0004;padding:6px;animation:dlg .14s ease-out}
.stm[hidden]{display:none}
.stm .sth{padding:6px 10px 8px;color:var(--mu);font-size:12px;border-bottom:1px solid var(--bd);margin-bottom:4px;overflow-wrap:anywhere}
.stm .sth:empty{display:none}
.stm hr{border:0;border-top:1px solid var(--bd);margin:4px 0}
.stm .mi{display:block;width:100%;text-align:left;background:none;border:0;border-radius:5px;padding:9px 10px;font:inherit;color:var(--tx);cursor:pointer}
.stm .mi:hover,.stm .mi:focus-visible{background:var(--hv)}
/* ==============================================================================
   CSS-14 · Touch-Geräte (Handy/Tablet)
   ============================================================================== */
.mvb{display:none;gap:4px;font-style:normal}
.mvb button{padding:2px 9px;font-size:13px}
.mvb button:disabled{opacity:.35}
button,a,select,input,textarea,label{touch-action:manipulation}
@media (hover:none),(pointer:coarse){
  .mvb{display:inline-flex}.ao .hd{display:none}
  button.p,button.s,button.d{min-height:42px}
  nav button{min-height:44px}
  input:not([type=checkbox]):not([type=color]),select,textarea{font-size:16px;min-height:44px}
  input[type=checkbox],.ck input[type=checkbox]{width:24px;height:24px;min-width:24px}
  input[type=checkbox]::after{width:11px;height:6px}
  .ck{min-height:40px;font-size:15px}
  input[type=color]{min-height:40px;min-width:48px}
  .rtb button.s{min-height:40px;min-width:40px}
  .cbl div{height:44px;line-height:28px}
  .cbl{max-height:312px}
  .qs,.qm{font-size:14px;min-height:40px;padding:6px 8px}
  .dvi{padding:10px 8px}
  .dx,.ic{min-width:42px}
  .mhh .mht button.s,.ao button.d,.ao button.s,.ao button.p{min-height:40px}
  .stm .mi{padding:13px 12px}
  tbody tr{-webkit-tap-highlight-color:rgba(15,108,189,.12)}
}
/* ==============================================================================
   CSS-15 · Schmale Bildschirme: Tabellen werden zu Karten
   ============================================================================== */
@media (max-width:760px){
  header{gap:8px 12px;padding:8px 12px}
  main{padding:10px 10px}
  #who{display:none}
  nav{flex-wrap:wrap}
  .wrap table,.wrap tbody,.wide{display:block;min-width:0!important;width:100%;table-layout:auto}
  .wrap colgroup,.wrap thead{display:none}
  .wrap tbody tr{display:block;padding:10px 12px;border-bottom:1px solid var(--bd)}
  .wrap tbody td{display:block;border:0;padding:3px 0;min-width:0!important;max-width:none!important;width:auto;font-size:14px}
  .wrap tbody td::before{content:attr(data-l);display:block;font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.3px}
  .wrap tbody td:empty{display:none}
  .wrap tbody td.spa{display:flex!important;justify-content:flex-end;gap:6px}.wrap tbody td.spa::before{content:none}.wrap tbody td.spa:empty{display:none!important}
  .wrap tbody tr.sps{padding:0;background:var(--sep)}.wrap tbody tr.sps td{padding:6px 12px}.wrap tbody tr.sps.nolb td:first-child{padding:2px 12px}
  .wrap tbody td.empty::before{content:none}
  .wrap tbody td>select{width:100%}
  .bar input,.bar .sx{width:100%}
  .bar .sx input{width:100%}
  .bar .sp{display:none}
  .adg{grid-template-columns:1fr}
  .ao{flex-wrap:wrap;padding:8px 12px}
  .hist table{min-width:0}
  dialog{width:100vw;max-width:100vw;max-height:100dvh;height:auto;margin:0;border-radius:0;top:0;left:0}
  dialog:not([open]){display:none}
  .db{padding:12px 12px}
  .dh,.df{padding-left:12px;padding-right:12px}
  .df{flex-wrap:wrap}
}
/* ==============================================================================
   CSS-16 · Sonstiges, Scrollbalken, reduzierte Bewegung
   ============================================================================== */
.gh{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.gh .ck{font-size:13px;color:var(--tx);margin:0}
.clx{margin:0;max-height:62vh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.5 ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;background:var(--hv);border:1px solid var(--bd);border-radius:6px;padding:12px 14px}
:root{--sb:#c3cad6;--sbh:#98a3b6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sb:#444c5a;--sbh:#66718a}}
:root[data-theme="dark"]{--sb:#444c5a;--sbh:#66718a}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--sb);border:3px solid transparent;border-radius:8px;background-clip:content-box;min-height:36px;min-width:36px}
*::-webkit-scrollbar-thumb:hover{background:var(--sbh);background-clip:content-box}
*::-webkit-scrollbar-thumb:active{background:var(--ac);background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}
.hscroll::-webkit-scrollbar,.rte::-webkit-scrollbar,.cbl::-webkit-scrollbar{width:10px;height:10px}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* ==============================================================================
   CSS-17 · Designvarianten a–d (Einstellungen → Design)
   ============================================================================== */
:root[data-design="a"] header{border-top:3px solid var(--ac)}
:root[data-design="a"] nav button.on{background:color-mix(in srgb,var(--ac) 11%,transparent);border-radius:6px 6px 0 0}
:root[data-design="a"] .wrap{border-top:2px solid var(--ac)}
:root[data-design="a"] thead th{background:color-mix(in srgb,var(--ac) 7%,var(--sf))!important;border-bottom:2px solid color-mix(in srgb,var(--ac) 38%,var(--bd))!important}
:root[data-design="a"] tbody tr:hover{background:color-mix(in srgb,var(--ac) 9%,var(--sf));box-shadow:inset 3px 0 0 var(--ac)}
:root[data-design="a"] dialog .dh{border-top:3px solid var(--ac)}
:root[data-design="a"] input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
:root[data-design="b"]{--ac2:#0e9f94}
@media (prefers-color-scheme:dark){:root[data-design="b"]:not([data-theme="light"]){--ac2:#3fc9bb}}
:root[data-design="b"][data-theme="dark"]{--ac2:#3fc9bb}
:root[data-design="b"] header{background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 8%,var(--sf)),var(--sf));border-bottom:2px solid var(--ac)}
:root[data-design="b"] nav button.on{background:var(--ac);color:var(--acx);border-radius:999px;border-color:transparent}
:root[data-design="b"] nav button{border-radius:999px}
:root[data-design="b"] button.p{background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 65%,var(--ac2)));border-color:transparent}
:root[data-design="b"] .wrap{border-left:3px solid var(--ac2)}
:root[data-design="b"] thead th{color:var(--ac)!important;border-bottom:2px solid var(--ac2)!important}
:root[data-design="b"] tbody tr:nth-child(even){background:color-mix(in srgb,var(--ac) 4%,var(--sf))}
:root[data-design="b"] tbody tr:hover{background:color-mix(in srgb,var(--ac2) 12%,var(--sf))}
:root[data-design="b"] dialog .dh{background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 13%,var(--sf)),var(--sf));border-left:4px solid var(--ac2)}
:root[data-design="b"] input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac2);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac2) 25%,transparent)}
:root[data-design="c"]{--g1:#eef0f3;--g2:#d3d8df;--g3:#6b7482}
@media (prefers-color-scheme:dark){:root[data-design="c"]:not([data-theme="light"]){--g1:#262b33;--g2:#3c434e;--g3:#9aa3b1}}
:root[data-design="c"][data-theme="dark"]{--g1:#262b33;--g2:#3c434e;--g3:#9aa3b1}
:root[data-design="c"] header{background:var(--g1);border-bottom:1px solid var(--g2)}
:root[data-design="c"] nav button.on{background:var(--sf);box-shadow:inset 0 -3px 0 var(--g3);border-radius:6px 6px 0 0}
:root[data-design="c"] .wrap{border:1px solid var(--g2);border-top:3px solid var(--g3)}
:root[data-design="c"] thead th{background:var(--g1)!important;border-bottom:2px solid var(--g2)!important}
:root[data-design="c"] tbody tr:hover{background:var(--g1);box-shadow:inset 3px 0 0 var(--g3)}
:root[data-design="c"] dialog .dh{background:var(--g1);border-top:3px solid var(--g3)}
:root[data-design="c"] input:focus,select:focus,textarea:focus{outline:0;border-color:var(--g3);box-shadow:0 0 0 3px color-mix(in srgb,var(--g3) 28%,transparent)}
:root[data-design="d"]{--g1:#e9ecf0;--g2:#c9cfd8;--g3:#4b5563;--g4:#f6f7f9;--hb:#4b5563;--ht:#fff}
@media (prefers-color-scheme:dark){:root[data-design="d"]:not([data-theme="light"]){--g1:#2b313a;--g2:#444c58;--g3:#b4bcc9;--g4:#1c2026;--hb:#39414d;--ht:#e8ebf0}}
:root[data-design="d"][data-theme="dark"]{--g1:#2b313a;--g2:#444c58;--g3:#b4bcc9;--g4:#1c2026;--hb:#39414d;--ht:#e8ebf0}
:root[data-design="d"] header{background:var(--hb);border-bottom:0}
:root[data-design="d"] header nav button,header .mu,header span,header div{color:var(--ht)!important}
:root[data-design="d"] header button{color:var(--tx)!important}
:root[data-design="d"] header nav button.on{background:var(--sf);color:var(--tx)!important;border-radius:6px 6px 0 0}
:root[data-design="d"] thead th{background:var(--hb)!important;color:var(--ht)!important}
:root[data-design="d"] tbody tr:nth-child(even){background:var(--g4)}
:root[data-design="d"] tbody tr:hover{background:var(--g1)}
:root[data-design="d"] .wrap{border:1px solid var(--g2);border-left:4px solid var(--g3)}
:root[data-design="d"] dialog .dh{background:var(--hb);color:var(--ht)}
:root[data-design="d"] dialog .dh button{color:var(--tx)}
:root[data-design="d"] input:focus,select:focus,textarea:focus{outline:0;border-color:var(--g3);box-shadow:0 0 0 3px color-mix(in srgb,var(--g3) 28%,transparent)}
/* ==============================================================================
   CSS-18 · Design-Auswahlfenster mit Vorschaubildern
   ============================================================================== */
.dsg{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.dso{display:block;text-align:left;background:var(--sf);color:var(--tx);border:2px solid var(--bd);border-radius:8px;padding:8px;cursor:pointer;font:inherit}
.dso:hover{background:var(--hv)}
.dso[aria-pressed="true"]{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 30%,transparent)}
.dso img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--bd);background:var(--bg);min-height:60px}
.dso b{display:block;margin:7px 2px 1px}.dso span{display:block;margin:0 2px;color:var(--mu);font-size:12px}
#dsd{width:min(860px,96vw)}
/* ==============================================================================
   CSS-19 · Statusfarben (frei wählbare Farbpalette)
   ============================================================================== */
:root{--pb-red:#fde3e3;--pf-red:#b42318;--pb-green:#d4efc9;--pf-green:#2b6a14;--pb-mint:#cdf3e6;--pf-mint:#0a6b57;--pb-blue:#dbe6fb;--pf-blue:#2c4fa8;--pb-sky:#d9f0fb;--pf-sky:#0b6a94;--pb-yellow:#fff2c2;--pf-yellow:#8a6100;--pb-orange:#ffe6cc;--pf-orange:#9a4a00;--pb-violet:#ebe0fb;--pf-violet:#5b2d9e;--pb-pink:#fbe0ee;--pf-pink:#a3225f;--pb-gray:#e6e9ee;--pf-gray:#4b5563;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pb-red:#4a1f22;--pf-red:#ff9a95;--pb-green:#22381a;--pf-green:#9fd67e;--pb-mint:#123a30;--pf-mint:#6fe0bf;--pb-blue:#1f2c4f;--pf-blue:#8fb0f5;--pb-sky:#14354a;--pf-sky:#7fcdf0;--pb-yellow:#3d3412;--pf-yellow:#f3d98a;--pb-orange:#46290f;--pf-orange:#ffb26b;--pb-violet:#2f2150;--pf-violet:#c3a3f5;--pb-pink:#4a1b34;--pf-pink:#f59cc6;--pb-gray:#2d333c;--pf-gray:#b4bcc9;}}
:root[data-theme="dark"]{--pb-red:#4a1f22;--pf-red:#ff9a95;--pb-green:#22381a;--pf-green:#9fd67e;--pb-mint:#123a30;--pf-mint:#6fe0bf;--pb-blue:#1f2c4f;--pf-blue:#8fb0f5;--pb-sky:#14354a;--pf-sky:#7fcdf0;--pb-yellow:#3d3412;--pf-yellow:#f3d98a;--pb-orange:#46290f;--pf-orange:#ffb26b;--pb-violet:#2f2150;--pf-violet:#c3a3f5;--pb-pink:#4a1b34;--pf-pink:#f59cc6;--pb-gray:#2d333c;--pf-gray:#b4bcc9;}
.pc-red{background:var(--pb-red);color:var(--pf-red)}.pc-green{background:var(--pb-green);color:var(--pf-green)}.pc-mint{background:var(--pb-mint);color:var(--pf-mint)}.pc-blue{background:var(--pb-blue);color:var(--pf-blue)}.pc-sky{background:var(--pb-sky);color:var(--pf-sky)}.pc-yellow{background:var(--pb-yellow);color:var(--pf-yellow)}.pc-orange{background:var(--pb-orange);color:var(--pf-orange)}.pc-violet{background:var(--pb-violet);color:var(--pf-violet)}.pc-pink{background:var(--pb-pink);color:var(--pf-pink)}.pc-gray{background:var(--pb-gray);color:var(--pf-gray)}
/* ==============================================================================
   CSS-20 · Verwaltung: Tabellen, Kennzahlen, Status-Editor, Änderungsverlauf, Pflichtfelder
   ============================================================================== */
.adt{width:100%;border-collapse:collapse}.adt th,.adt td{padding:7px 10px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:middle;font-size:13px}.adt th{color:var(--mu);font-weight:600;font-size:12px}
.adt tr.cl{cursor:pointer}.adt tr.cl:hover{background:var(--hv)}.adt .ac{white-space:nowrap}.adt .ac button{margin-right:4px;padding:4px 9px;font-size:12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--sf);border:1px solid var(--bd);border-radius:8px;padding:12px 14px}.tile b{display:block;font-size:24px;line-height:1.2}.tile span{color:var(--mu);font-size:12px}
.tile.w b{color:#c2410c}
.sr{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:5px 12px;border-bottom:1px solid var(--bd)}
.sr input[type=text]{min-width:0}.sr .sw{width:120px;height:28px;padding:1px 4px;font-size:12px;border-radius:6px;border:1px solid var(--bd)}
.sr label{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--mu);margin:0;white-space:nowrap}
.sr .mvb{display:inline-flex;gap:2px}.sr .mvb button{padding:2px 6px}.sr input[type=text]{padding:4px 8px}
.clv{max-width:820px;margin:0 auto;text-align:center}.clh{font-size:20px;font-weight:700;margin:6px 0 8px}
.cls{color:var(--mu);font-size:12.5px;margin:0 auto 18px;max-width:640px;line-height:1.5}.cls b{display:block;color:var(--tx);margin-bottom:2px}
details.clr{background:var(--sf);border:1px solid var(--bd);border-radius:8px;margin-bottom:8px;text-align:left}
details.clr summary{cursor:pointer;padding:11px 16px;font-weight:600;list-style:none;text-align:center}
details.clr summary::-webkit-details-marker{display:none}
details.clr summary::before{content:'▸';display:inline-block;margin-right:8px;color:var(--mu);transition:transform .15s}
details.clr[open] summary::before{transform:rotate(90deg)}
details.clr summary:hover{background:var(--hv);border-radius:8px}
details.clr[open] summary{border-bottom:1px solid var(--bd);border-radius:8px 8px 0 0}
.clb{padding:8px 20px 12px 20px;font-size:13.5px;line-height:1.5}.clb ul{margin:0;padding-left:18px}.clb li{margin:5px 0}
.adc{display:flex;flex-direction:column;gap:14px;min-width:0}
.pal{display:flex;gap:4px;flex-wrap:wrap}.pal button{width:22px;height:22px;border-radius:50%;padding:0;border:2px solid transparent;cursor:pointer}.pal button.on{border-color:var(--tx)}
.lg{font-size:12px;line-height:1.7}.lg div{padding:3px 0;border-bottom:1px dotted var(--bd)}.lg div:last-child{border:0}
.rq{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 14px;padding:10px 18px}
.ckr{display:flex;gap:8px;align-items:center;margin:0;color:var(--tx);font-size:14px}
.cfm{padding:10px 18px 14px}.cfm .f,.cfm .h{margin-bottom:10px}
.lgo{max-height:48px;max-width:160px;display:block;margin:4px 0}
h1 #hlogo img{height:26px;width:auto;vertical-align:middle;display:inline-block}
.ao>span:not(.mu){flex:1 1 70px;min-width:70px}.ao>span.mu{flex:none;max-width:9em}
.dsr{text-align:right;margin-top:10px;font-size:12px}
/* ==============================================================================
   CSS-21 · Handbuch (Fragezeichen-Symbol oben rechts, Suche; Inhalt aus handbuch.html)
   ============================================================================== */
.hb{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start;max-width:1100px}
.hbn{position:sticky;top:10px;display:grid;gap:2px;background:var(--sf);border:1px solid var(--bd);border-radius:6px;padding:10px 6px}
.hbn b{padding:2px 10px 6px;color:var(--mu);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.hbn a{padding:6px 10px;border-radius:4px;color:var(--tx);text-decoration:none}
.hbn a:hover{background:var(--hv);color:var(--ac)}
.hbc{background:var(--sf);border:1px solid var(--bd);border-radius:6px;padding:8px 26px 22px;line-height:1.55;min-width:0}
.hbc h1{font-size:22px;margin:16px 0 6px}
.hbc h2{font-size:18px;margin:28px 0 8px;padding-top:6px;border-top:1px solid var(--bd);scroll-margin-top:12px}
.hbc h3{font-size:15px;margin:18px 0 4px}
.hbc p{margin:6px 0}.hbc ul,.hbc ol{margin:6px 0;padding-left:22px}.hbc li{margin:3px 0}
.hbc .hbl{color:var(--mu);font-size:15px}
.hbc code{background:var(--hv);border-radius:3px;padding:1px 5px;font-size:12.5px}
.hbt{overflow-x:auto;margin:10px 0}
.hbc table{min-width:0;width:100%;font-size:13px}
.hbc th,.hbc td{vertical-align:top}
.hbc tbody tr{cursor:default}
@media (max-width:820px){.hb{grid-template-columns:1fr}.hbn{position:static}.hbn #hbt{grid-template-columns:1fr 1fr}.hbn #hbt b{grid-column:1/-1}.hbc{padding:6px 14px 18px}}
.hbi{width:34px;height:34px;padding:0!important;border-radius:50%!important;font-weight:700;font-size:16px;line-height:1;display:inline-grid;place-content:center;color:var(--ac)}
.hbi.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}
.hbn input[type=search]{margin:0 4px 6px;width:calc(100% - 8px)}
.hbr{padding:0 10px 6px;font-size:12px}
.hbn #hbt{display:grid;gap:2px}
.hbn a[hidden]{display:none}
mark.hbm{background:#ffe08a;color:#1d2330;border-radius:2px;padding:0 1px}
.hbs[hidden]{display:none}
/* Handbuch bearbeiten (nur Administrator) */
.hbb{padding:0 4px 8px}.hbb .s{width:100%}
.hbed{outline:2px solid var(--ac);outline-offset:-2px;min-height:60vh;cursor:text}
.hbed [data-for]{outline:1px dashed var(--mu);outline-offset:3px;margin-top:14px;position:relative}
.hbed [data-for]::before{display:block;font-size:11px;color:var(--mu);font-weight:600;margin-bottom:2px}
.hbed [data-for=mgr]::before{content:"Sichtbar für: Superuser + Administrator"}
.hbed [data-for=adm]::before{content:"Sichtbar für: nur Administrator"}
.hbed table td,.hbed table th{outline:1px dotted var(--bd);min-width:60px}
.hbtb{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:var(--sf);border:1px solid var(--bd);border-radius:6px;padding:6px;margin-bottom:6px}
.hbtb .s{padding:4px 8px;font-size:13px}
.hbvl{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mu)}
.hbvl select{width:auto;padding:3px 6px}
.hbsv{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.hbcol{min-width:0}