*{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#E5342B;--red2:#C92E26;--red-bg:#FCE4E2;
  --bg:#EDF0F3;--white:#fff;--card:#FFFFFF;
  --border:#D7DCE3;--border2:#E6E9ED;
  --text:#11151C;--muted:#5B6573;
  --row-hover:#F6F7F9;
  --sidebar:#16181E;--s-text:#9AA3B2;
  --green:#16A34A;--green-bg:#DCFCE7;--green-text:#15803D;
  --amber:#D97706;--amber-bg:#FCEFC7;--amber-text:#B45309;
  --blue:#1D4ED8;--blue-bg:#DBE8FE;--blue-text:#1D4ED8;
  --gray-bg:#ECEEF1;--gray-text:#5B6573;
  --radius:6px;
  --sh:0 1px 3px rgba(16,21,28,.06),0 1px 2px rgba(16,21,28,.04);
  --sh2:0 16px 48px rgba(16,21,28,.22);
  /* Alias-Variablen: in Komponenten/Inline-Styles benutzte Namen, die früher
     nicht definiert waren (→ unsichtbarer/transparenter Render). Verweisen auf
     die echten Theme-Vars und folgen damit automatisch dem Dark-Mode. */
  --bg2:var(--row-hover); --bg-alt:var(--row-hover); --bg-soft:var(--row-hover);
  --bg-sub:var(--row-hover); --bg-card:var(--card); --bg1:var(--card); --hover:var(--row-hover);
  --bdr:var(--border); --tx:var(--text); --tx1:var(--text); --muted-3:var(--muted);
  --accent:var(--red); --pri:var(--red); --prim:var(--red); --red-text:var(--red);
  --orange:var(--amber); --amber-d:var(--amber-text); --amber-fg:var(--amber-text);
  --green-l:var(--green-bg); --code-bg:var(--gray-bg); --bb:var(--border);
  --bd:var(--border); --bg3:var(--gray-bg); --err:var(--red); --ok:var(--green);
  --warn:var(--amber); --tx2:var(--muted); --tx3:var(--muted);
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
body{font-family:'Inter','Segoe UI',Roboto,system-ui,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}

/* ── Demo-Mode-Banner ── */
.demo-banner{
  position:fixed;
  top:0;left:0;right:0;
  z-index:9999;
  height:32px;
  background:repeating-linear-gradient(
    45deg,
    #ffcc00 0 12px,
    #ff8800 12px 24px
  );
  color:#000;
  font-size:13px;
  font-weight:600;
  text-align:center;
  line-height:32px;
  letter-spacing:0.4px;
  display:none;  /* per default versteckt, JS setzt .visible bei demo_mode */
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
  pointer-events:none;  /* nicht klickbar, blockt nichts */
}
.demo-banner.visible{display:block}
body.demo-mode{padding-top:32px}
/* env-banner darf nicht mit Demo-Banner kollidieren */
body.demo-mode #env-banner { top: 32px !important; }

/* ── App shell ── */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:230px;min-width:230px;background:var(--sidebar);display:flex;flex-direction:column;overflow:hidden;transition:width .2s}
/* Menü scrollbar mit SICHTBARER Leiste ──────────────────────────────────
   Vorgabe Markus (2026-07-23): „damit auch ohne Rad-Maus gescrollt werden
   kann". Die Sidebar selbst behält `overflow:hidden` (sonst scrollt der
   Kopfbereich mit Logo mit); gescrollt wird nur die Navigationsliste.
   Die Leiste ist bewusst dauerhaft sichtbar und breit genug zum Greifen —
   die schmalen Overlay-Leisten moderner Browser erscheinen erst beim
   Scrollen und helfen genau dann nicht, wenn kein Mausrad da ist. */
@media(min-width:651px){
.sidebar nav{flex:1 1 auto;overflow-y:scroll;overflow-x:hidden;
  scrollbar-width:auto;scrollbar-color:var(--muted,#8794A8) transparent}
}
.sidebar nav::-webkit-scrollbar{width:12px}
.sidebar nav::-webkit-scrollbar-track{background:rgba(0,0,0,.14);border-radius:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:var(--muted,#8794A8);
  border-radius:6px;border:2px solid transparent;background-clip:content-box}
.sidebar nav::-webkit-scrollbar-thumb:hover{background:#fff;background-clip:content-box}
.logo{padding:14px 15px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}
.logo-icon{width:32px;height:32px;background:var(--red);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.logo-txt{color:#fff;font-size:13px;font-weight:600;line-height:1.3}
.logo-sub{color:var(--s-text);font-size:11px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
/* Org-Name darf auf zwei Zeilen umbrechen (statt abschneiden) */
#sw-name{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2;max-width:160px}
nav{flex:1;overflow-y:auto;padding:5px 0}
nav::-webkit-scrollbar{width:3px}nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08)}
.ns{padding:7px 13px 2px 10px;font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.07em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;transition:color .1s;border-radius:4px;margin:2px 4px 0}
.ns:hover{color:rgba(255,255,255,.6);background:rgba(255,255,255,.04)}
.ns .ns-arrow{font-size:9px;transition:transform .2s;opacity:.5}
.ns.collapsed .ns-arrow{transform:rotate(-90deg)}
.ng{overflow:hidden;transition:max-height .25s ease,opacity .25s;max-height:999px;opacity:1}
.ng.collapsed{max-height:0;opacity:0}
.ni-locked{opacity:.35;pointer-events:none;cursor:not-allowed}
.ni-locked::after{content:'🔒';margin-left:auto;font-size:10px}
.ni{display:flex;align-items:center;gap:8px;padding:7px 13px 7px 16px;cursor:pointer;color:var(--s-text);font-size:13px;user-select:none;transition:background .1s,color .1s;border-radius:0}
/* ── Menü-Edit-Modus: Drag&Drop ── */
#sidebar-nav.menu-edit .ni{cursor:grab;background:rgba(255,255,255,.03);border-left:2px dashed rgba(255,255,255,.15);padding-left:14px}
#sidebar-nav.menu-edit .ni::before{content:"⠿";opacity:.5;margin-right:4px;font-size:12px}
#sidebar-nav.menu-edit .ni.dragging{opacity:.4;cursor:grabbing}
#sidebar-nav.menu-edit .ni.drag-over-top{border-top:2px solid var(--red)}
#sidebar-nav.menu-edit .ni.drag-over-bottom{border-bottom:2px solid var(--red)}
#sidebar-menu-edit-toggle.active{color:var(--red)!important;background:var(--red-bg)}
.ni:hover{background:rgba(255,255,255,.07);color:#fff}
.ni.active{background:rgba(255,255,255,.10);color:#fff;border-left:3px solid var(--red);padding-left:13px}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:52px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;position:relative;z-index:100}
.topbar-title{font-size:15px;font-weight:700;flex:1}
.content{flex:1;overflow-y:auto;padding:16px}

/* ── Sections ── */
.sec{display:none}.sec.active{display:block}
/* ═══ Zentraler Kalender ═══ */
.kal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-bottom:0;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.kal-head>div{background:var(--bg);padding:8px 10px;text-align:center}
.kal-head-we{background:var(--bg2)!important;color:var(--red)}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.kal-zelle{background:#fff;min-height:100px;padding:4px 5px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.kal-zelle.kal-empty{background:var(--bg2);opacity:.4}
.kal-zelle.kal-we{background:var(--bg2)}
.kal-zelle.kal-heute{background:#fff7ed;box-shadow:inset 0 0 0 2px var(--red)}
.kal-zelle.kal-feiertag{
  background:
    repeating-linear-gradient(
      135deg,
      rgba(220,38,38,0.18) 0,
      rgba(220,38,38,0.18) 6px,
      rgba(220,38,38,0.05) 6px,
      rgba(220,38,38,0.05) 12px
    ),
    #fff;
  box-shadow:inset 0 0 0 1px rgba(220,38,38,0.55);
}
.kal-zelle.kal-feiertag.kal-heute{
  /* Heute + Feiertag: stärkerer Border */
  box-shadow:inset 0 0 0 2px var(--red);
}
.kal-zelle.kal-feiertag .kal-tag{color:var(--red);font-weight:800}
.kal-feiertag-name{font-size:10px;font-weight:700;color:var(--red);
  text-transform:uppercase;letter-spacing:.3px;
  background:rgba(255,255,255,0.85);padding:1px 4px;border-radius:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;border:1px solid rgba(220,38,38,0.35)}
.kal-tag{font-size:12px;font-weight:600;color:#333}
.kal-tag-heute{color:var(--red);font-weight:800}
.kal-events{display:flex;flex-direction:column;gap:2px}
.kal-evt{font-size:10.5px;padding:2px 5px;border-radius:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:filter .1s}
.kal-evt:hover{filter:brightness(0.92);text-decoration:underline}

/* ── Cards ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:6px;margin-bottom:13px;box-shadow:var(--sh)}
.ch{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:13px;gap:8px}
.cb{padding:13px}

/* ── Stat grid ── */
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-bottom:13px}
.st{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:11px;box-shadow:var(--sh)}
.sl{font-size:10px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.sv{font-size:22px;font-weight:700}
.ss{font-size:11px;color:var(--muted);margin-top:2px}

/* ── Badges ── */
.mailfeld{position:relative;display:block;width:100%}
.mailfeld>input{padding-right:30px}
.mailfeld-knopf{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  border:0;background:none;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;
  color:var(--muted);border-radius:4px}
.mailfeld-knopf:hover{color:var(--blue);background:var(--bg2)}
a.maillink{color:var(--blue);text-decoration:none;border-bottom:1px dotted currentColor}
a.maillink:hover{text-decoration:none;border-bottom-style:solid}
.b{display:inline-block;font-size:11px;padding:2px 7px;border-radius:20px;font-weight:500;white-space:nowrap}
.bg{background:var(--green-bg);color:var(--green-text)}
.br{background:var(--red-bg);color:var(--red2)}
.ba{background:var(--amber-bg);color:var(--amber-text)}
.bb{background:var(--blue-bg);color:var(--blue-text)}
.bx{background:var(--gray-bg);color:var(--gray-text)}

/* ── Buttons ── */
.btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--white);cursor:pointer;font-size:13px;color:var(--text);font-family:inherit;transition:background .1s;white-space:nowrap}
.btn:hover{background:var(--row-hover)}
.btn-p{background:var(--red);color:#fff;border-color:var(--red)}.btn-p:hover{background:var(--red2)}
.btn-s{padding:4px 9px;font-size:12px}
.btn-detail{padding:4px 9px;font-size:12px;background:var(--blue-bg,#D6EAF8);color:#1a5276;border-color:#90c0e0}
.btn-edit  {padding:4px 9px;font-size:12px;background:rgba(255,255,255,.06);color:var(--text)}
.btn-del   {padding:4px 9px;font-size:12px;background:var(--red-bg);color:var(--red);border-color:rgba(229,52,43,.3)}

/* ── Tables ── */
.tw{overflow:visible}  /* CI-Standard: .content ist der Scroll-Container → Sticky-Header funktioniert. (vorher overflow-x:auto, das blockierte position:sticky am thead) */
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:8px 10px;text-align:left;background:var(--row-hover,#FAFAF7);color:var(--muted);font-weight:700;font-size:11px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--border2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--row-hover,#FAFAF7);color:var(--text,inherit)}
/* ──────────────────────────────────────────────────────────────────────
   CI-STANDARD (Pflicht für ALLE Listen): Sticky-Header.
   Kopfzeile bleibt beim Scrollen stehen, nur die Zeilen scrollen.
   Scroll-Container ist .content (bzw. .md-body in Modals). Deshalb darf
   ein Listen-Wrapper KEIN eigenes overflow-y:auto ohne feste Höhe setzen
   (sonst bricht position:sticky). Neue Tabellen erben das automatisch.
   ────────────────────────────────────────────────────────────────────── */
.content thead th{position:sticky;top:0;z-index:3}
.content thead tr.dt-filter-row th{top:29px;z-index:2}
/* DataTable-Tabellen setzen thead th auf position:relative (Sort-Indikator) —
   innerhalb .content per höherer Spezifität auf sticky überschreiben.
   Modal-DataTables (nicht in .content) bleiben unverändert. */
.content table[data-dt-done="1"] thead th{position:sticky;top:0;z-index:3}
.content table[data-dt-done="1"] thead tr.dt-filter-row th{position:sticky;top:29px;z-index:2}
.dark-mode .content thead th{background:var(--white)}

/* ── Forms ── */
.fg{display:flex;flex-direction:column;gap:3px}
.fl{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.fc{padding:7px 9px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:var(--white);color:var(--text);font-family:inherit;width:100%;box-sizing:border-box}
.fc:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(229,52,43,.14)}
textarea.fc{resize:vertical}
/* Welle 24+: Standort-Selektoren mit hierarchischen Pfaden brauchen mehr
   Breite — Default-min für alle Selektoren mit langen Optionen. */
select.fc{min-width:240px}
select#mat-orge, select#mat-lag-id, select#lo-f-org,
select[id$="-orge"], select[id$="-lo"], select[id$="-loid"],
select[id$="-stid"], select[id^="w-adr-"]{min-width:340px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px;margin-bottom:11px}
/* Innerhalb von Form-Grids dürfen Selects unter die 240px-Default-Breite
   schrumpfen — sonst sprengen lange Selects die Grid-Spalten und
   Felder überlappen (z.B. TYP + ABSCHLUSS im Lehrgang-Formular).
   Das Grid garantiert über minmax(170px,1fr) eine sinnvolle Mindestbreite.
   `min-width:0` auf .fg ist nötig, weil CSS-Grid-Items per Default
   `min-width:auto` haben und damit nicht unter ihren Inhalt schrumpfen. */
.fgrid .fg{min-width:0}
/* Eingabefelder einer Rasterzeile auf eine Linie.
   Die Beschriftungen sind verschieden lang: „SPINDNUMMER (UMKLEIDE)" passt
   in eine Zeile, „RFID-TAG (TERMINAL-EINBUCHUNG)" braucht zwei. Ohne diese
   Regel beginnt jedes Feld direkt unter seiner eigenen Beschriftung — die
   Felder einer Zeile stehen dann treppenartig versetzt.
   Die Zelle ist ohnehin so hoch wie die hoechste; `flex-end` schiebt das
   Feld an ihren unteren Rand, und alle fluchten. */
.fgrid > .fg{justify-content:flex-end}
/* Ausgenommen, was sich ueber die ganze Breite zieht: Dort steht das Feld
   allein in seiner Zeile, und ein Hinweis darunter gehoert nach unten. */
.fgrid > .fg[style*="1/-1"]{justify-content:flex-start}
.fgrid select.fc{min-width:0;text-overflow:ellipsis}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}

/* ── Alerts ── */
.al{padding:8px 12px;border-radius:6px;margin-bottom:9px;font-size:13px;line-height:1.5}
.al-r{background:var(--red-bg);color:var(--red2);border:1px solid #F5AAAA}
.al-a{background:var(--amber-bg);color:var(--amber-text);border:1px solid #FAC88A}
.al-g{background:var(--green-bg);color:var(--green-text);border:1px solid #80CFA0}
.al-b{background:var(--blue-bg);color:var(--blue-text);border:1px solid #80B8E0}

/* ── Layout ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
@media(max-width:800px){.g2,.g3{grid-template-columns:1fr}}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:8px;flex-wrap:wrap}
.pt{font-size:17px;font-weight:700}
.sr{display:flex;gap:7px;margin-bottom:11px;align-items:center;flex-wrap:wrap}
.si{flex:1;min-width:160px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit}
.si:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(229,52,43,.14)}

/* ── Tabs ── */
.tb{display:flex;border-bottom:2px solid var(--border);margin-bottom:13px;gap:0}
.tab{padding:6px 13px;cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .12s}
.tab.active{color:var(--red);border-bottom-color:var(--red)}
.ueb-ber-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 14px}
.ueb-ber-item{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px}
.ueb-ber-item input[type=checkbox]{width:22px;height:22px;margin:0;flex:none;accent-color:var(--red)}
.tab-grp{display:inline-flex;align-items:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);opacity:.6;padding:4px 8px 4px 4px;pointer-events:none;white-space:nowrap}
.tp{display:none}.tp.active{display:block}

/* ── Modal ── */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1000;align-items:center;justify-content:center;padding:12px}
.mo.open{display:flex}
.md{background:var(--white);border-radius:11px;width:min(620px,96vw);max-height:calc(100vh - 24px);display:flex;flex-direction:column;box-shadow:var(--sh2);overflow:hidden}
.md-w{width:min(1100px,98vw)}
.md-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0}
.md-h1{font-weight:700;font-size:14px}
.md-h2{font-size:11px;color:var(--muted);margin-top:2px}
.md-body{padding:17px;flex:1 1 auto;overflow-y:auto;min-height:0}
.md-foot{padding:11px 17px;border-top:1px solid var(--border);display:flex;gap:7px;justify-content:flex-end;flex-shrink:0}
/* ── Global: alle Modals mit Tab-Leiste passen sich der Tab-Breite an ──
   Tab-Leiste IMMER einzeilig (nowrap) und OHNE Scrollbalken: passen nicht alle
   Tabs in eine Zeile, schrumpfen sie gleichmäßig (flex-shrink), zur Not mit
   Ellipsis — siehe .ptabs unten. */
.md:has(.ptabs){height:94vh;width:min(1800px,99vw);max-height:none;max-width:none}
.ptabs{flex-wrap:nowrap;row-gap:0}
/* Das Personenfenster hat fuenfzehn Reiter. Auf einer Zeile schrumpfen
   sie so weit, dass nur noch „Berechtigu…" oder „Grö…" uebrigbleibt —
   man muss raten, was sich dahinter verbirgt. Diese eine Leiste bricht
   deshalb um: lieber zwei Zeilen als abgeschnittene Namen. Die uebrigen
   Reiterleisten bleiben einzeilig, sie haben weniger Eintraege. */
#mm-tabs{flex-wrap:wrap;overflow:visible;row-gap:3px}
#mm-tabs button{flex-shrink:0;overflow:visible;text-overflow:clip}

/* ── Drop-Zone für Datei-Upload ── */
.dropzone{border:2px dashed #a5b4fc;background:#eef2ff;border-radius:10px;padding:18px;text-align:center;cursor:pointer;transition:all .15s;margin:10px 0}
.dropzone:hover{background:#e0e7ff;border-color:#6366f1}
.dropzone.dz-hover{background:#c7d2fe;border-color:#4338ca;border-style:solid;transform:scale(1.01)}
.dropzone .dz-icon{font-size:28px;line-height:1;margin-bottom:6px}
.dropzone .dz-text{font-weight:600;color:#3730a3;font-size:13px}
.dropzone .dz-sub{font-size:11px;color:#6366f1;margin-top:4px}

/* ═══ DESIGN-STANDARD FÜR ALLE DIALOGE (ab 2026-04) ═══
   Tab-Leisten in Modalen, Einstellungen und allen künftigen Dialogen
   verwenden die Klasse .ptabs mit dicken, gut sichtbaren roten Active-Tabs.
   Gruppenüberschriften via .ptab-grp. */
.ptabs .ptab-grp{display:inline-flex;align-items:center;padding:0 10px 0 4px;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;align-self:flex-end;padding-bottom:11px;white-space:nowrap}
/* Kompatibel zum alten .tab-Markup in den Einstellungen */
.ptabs > .tab{padding:8px 11px;background:var(--white);border:1px solid var(--border);border-bottom:none;border-radius:7px 7px 0 0;cursor:pointer;font-weight:600;white-space:nowrap;font-size:13px;color:var(--muted);flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;position:relative;top:1px;transition:background .1s,color .1s}
.ptabs > .tab:hover{background:var(--red-bg);color:var(--red)}
.ptabs > .tab.active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 -2px 6px rgba(229,52,43,.25);font-weight:700}
.ptabs > .tab.active:hover{background:var(--red2);color:#fff}

/* Mehrreihige Tabs mit Gruppenlabels links (z.B. Einstellungen) */
.ptabs-rows{display:flex;flex-direction:column;gap:4px;border-bottom:3px solid var(--red);margin-bottom:14px;padding:0 3px;background:var(--bg)}
.ptab-row{display:flex;align-items:flex-end;gap:3px;flex-wrap:wrap;padding:2px 0}
.ptab-row + .ptab-row{border-top:1px dashed var(--border);padding-top:6px}
.ptab-row .ptab-grp{display:inline-flex;align-items:center;padding:0 12px 10px 4px;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;min-width:140px;flex-shrink:0}
.ptab-row .tab{padding:10px 16px;background:var(--white);border:1px solid var(--border);border-bottom:none;border-radius:7px 7px 0 0;cursor:pointer;font-weight:600;white-space:nowrap;font-size:13px;color:var(--muted);flex-shrink:0;position:relative;top:1px;transition:background .1s,color .1s}
.ptab-row .tab:hover{background:var(--red-bg);color:var(--red)}
.ptab-row .tab.active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 -2px 6px rgba(229,52,43,.25);font-weight:700}
.ptab-row .tab.active:hover{background:var(--red2);color:#fff}
@media(max-width:680px){
  .ptab-row{flex-direction:column;align-items:stretch}
  .ptab-row .ptab-grp{padding-bottom:2px;min-width:0}
}
/* ── Einstellungen: Sidebar-Layout statt 55-Tab-Wand (2026-06-19) ──
   Grid auf der Sektion: Spalte 1 = Gruppen-Nav, Spalte 2 = das eine sichtbare
   Panel (display:none-Panels belegen keine Grid-Zelle). swEinstTab unverändert. */
#sec-einstellungen.active{display:grid;grid-template-columns:236px minmax(0,1fr);gap:0 20px;align-items:start}
#sec-einstellungen > .ph{grid-column:1/-1;margin-bottom:6px}
#sec-einstellungen > #einst-search-wrap{grid-column:1/-1;margin-bottom:12px}
#einst-search{width:100%;max-width:520px;padding:9px 12px}
#sec-einstellungen #einst-tabs{flex-direction:column;flex-wrap:nowrap;gap:1px;border-bottom:none;margin:0;padding:0;background:transparent;position:sticky;top:0;max-height:calc(100vh - 150px);overflow-y:auto;overflow-x:hidden}
#sec-einstellungen .ptab-row{flex-direction:column;align-items:stretch;gap:1px;padding:0 0 8px;flex-wrap:nowrap}
#sec-einstellungen .ptab-row + .ptab-row{border-top:none;padding-top:0}
#sec-einstellungen .ptab-grp{min-width:0;width:auto;padding:7px 8px 4px;cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;border-radius:6px}
#sec-einstellungen .ptab-grp:hover{background:var(--bg)}
#sec-einstellungen .ptab-grp::before{content:'▾';font-size:9px;color:var(--muted);transition:transform .12s;flex-shrink:0}
#sec-einstellungen .ptab-row.collapsed .ptab-grp::before{transform:rotate(-90deg)}
#sec-einstellungen .ptab-row.collapsed .tab{display:none}
#sec-einstellungen #einst-tabs .tab{padding:6px 10px 6px 22px;border:none;border-radius:6px;background:transparent;font-size:13px;font-weight:500;color:var(--tx2);text-align:left;white-space:normal;position:static;top:0;box-shadow:none;line-height:1.3}
#sec-einstellungen #einst-tabs .tab:hover{background:var(--red-bg);color:var(--red)}
#sec-einstellungen #einst-tabs .tab.active{background:var(--red);color:#fff;border-color:transparent;box-shadow:none;font-weight:600}
#sec-einstellungen #einst-tabs .tab.active:hover{background:var(--red);color:#fff}
#sec-einstellungen [id^="etab-"]{min-width:0}
#einst-noresult{grid-column:1/-1;color:var(--muted);font-size:13px;padding:6px 8px;display:none}
@media(max-width:760px){
  #sec-einstellungen{grid-template-columns:1fr}
  #sec-einstellungen #einst-tabs{position:static;max-height:none;margin-bottom:12px}
}
/* ── Personal-Tabs ── */
.ptabs{display:flex;gap:3px;border-bottom:3px solid var(--red);margin:-3px -3px 14px;overflow:hidden;padding:0 3px;background:var(--bg);flex-shrink:0;position:sticky;top:-17px;z-index:5;padding-top:14px;margin-top:-17px}
.ptabs::-webkit-scrollbar{height:5px}
.ptabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.ptabs button{padding:8px 11px;background:var(--white);border:1px solid var(--border);border-bottom:none;border-radius:7px 7px 0 0;cursor:pointer;font-weight:600;white-space:nowrap;font-size:13px;color:var(--muted);flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;position:relative;top:1px;transition:background .1s,color .1s}
.ptabs button:hover{background:var(--red-bg);color:var(--red)}
.ptabs button.active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 -2px 6px rgba(229,52,43,.25);font-weight:700}
.ptabs button.active:hover{background:var(--red2);color:#fff}
.ptab{display:none}
.ptab.active{display:block}
.mc{background:none;border:none;cursor:pointer;font-size:22px;color:var(--muted);line-height:1;flex-shrink:0}

/* ── Fahrzeug-Bilder-Tab ── */
#fz-ident-badge{float:right;margin:0 0 .6rem 1.2rem;max-width:220px;text-align:right}
#fz-ident-badge img{max-height:120px;border-radius:6px}
.fz-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
.fz-slot-img{position:relative}
.fz-slot-img img{width:100%;border:1px solid #dee2e6;border-radius:6px;cursor:pointer}
.fz-slot-img img.sil{opacity:.6;cursor:default}
.fz-slot-lbl{text-align:center;font-size:.8rem;color:#555}
.fz-unzug{display:flex;flex-wrap:wrap;gap:.5rem}
.fz-uitem img{height:70px;border-radius:4px;cursor:pointer}
.btn-x{position:absolute;top:4px;right:4px}
.fz-truck{display:grid;grid-template-columns:1fr 2fr 1fr;gap:.5rem;align-items:start;max-width:560px}
.fz-col{display:flex;flex-direction:column;gap:.4rem}
.fz-body{background:#f1f3f5;border:2px solid #ced4da;border-radius:10px;min-height:160px;display:flex;align-items:flex-start;justify-content:center}
.fz-cab{background:#dee2e6;border-radius:6px;padding:.2rem .6rem;margin:.4rem;font-size:.75rem;color:#555}
.fz-blueprint{width:100%;height:auto;display:block;opacity:.92}
.fz-fach{position:relative;border:1px dashed #adb5bd;border-radius:6px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff}
.fz-fach.belegt{border-style:solid;cursor:default;padding:0;overflow:hidden}
.fz-fach img{width:100%;height:100%;object-fit:cover}
.fz-fach-nr{font-weight:600;color:#868e96}.fz-fach-plus{position:absolute;bottom:2px;right:6px;color:#adb5bd}
.fz-heck{display:flex;gap:.4rem;max-width:560px;margin-top:.5rem}.fz-heck .fz-fach{flex:1}

/* ── Progress bar ── */
.pr{height:5px;background:#EEE;border-radius:3px;overflow:hidden}
.pf{height:100%;border-radius:3px;transition:width .3s}

/* ── Toast notifications ── */
.nb{position:fixed;bottom:16px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:6px;pointer-events:none}
/* Globale „lädt noch…"-Anzeige (oben-mittig, sichtbar solange API-Calls laufen) */
#lade-anzeige{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2100;display:none;align-items:center;gap:9px;background:var(--card);color:var(--txt,inherit);border:1px solid var(--bdr,#d5dbe3);border-left:4px solid var(--red);padding:8px 16px;border-radius:22px;font-size:13px;font-weight:600;box-shadow:0 8px 26px rgba(0,0,0,.20);pointer-events:none}
#lade-anzeige.show{display:flex}
#lade-anzeige .sp{width:15px;height:15px;border:2.5px solid var(--bg2);border-top-color:var(--red);border-radius:50%;animation:ladespin .7s linear infinite}
@keyframes ladespin{to{transform:rotate(360deg)}}
.nf{background:#1E2433;color:#E6EAF1;padding:9px 14px;border-radius:8px;font-size:13px;min-width:220px;max-width:340px;box-shadow:0 6px 24px rgba(0,0,0,.35);animation:nfin .16s ease;pointer-events:auto;border-left:4px solid transparent}
.nf.s{border-left-color:var(--green)}.nf.e{border-left-color:var(--red)}.nf.w{border-left-color:var(--amber)}.nf.i{border-left-color:var(--blue)}
@keyframes nfin{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes depPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.7),0 0 0 0 rgba(220,38,38,.4)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0),0 0 14px 4px rgba(220,38,38,.6)}}
.dep-blink{animation:depPulse 1.1s ease-in-out infinite}

/* ── Login ── */
.login{position:fixed;inset:0;background:#1a1a2e;display:flex;align-items:center;justify-content:center;z-index:9999}
.lbox{background:#fff;border:1px solid #ddd;border-radius:12px;padding:36px;width:340px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.lic{font-size:36px;text-align:center;margin-bottom:8px}
.lit{font-size:18px;font-weight:700;text-align:center;margin-bottom:4px;color:#1a1a1a}
.lis{font-size:12px;text-align:center;color:#666;margin-bottom:18px}
.lif{margin-bottom:12px}
.lil{display:block;font-size:12px;margin-bottom:4px;color:#444;font-weight:500}
.lii{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:14px;margin-bottom:10px;color:#1a1a1a;background:#fff;font-family:inherit}
.lii:focus{outline:none;border-color:var(--red)}
.lii::placeholder{color:rgba(255,255,255,.25)}
.lib{width:100%;padding:9px;background:var(--red);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:4px}
.lib:hover{background:var(--red2)}
.lih{font-size:11px;text-align:center;color:#999;margin-top:12px}

/* ── Checkbox row ── */
.cbrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:5px}
.cbl{display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer}

/* ── Anhang / Upload ── */
.upload-zone{border:2px dashed var(--border);border-radius:8px;padding:18px;text-align:center;cursor:pointer;transition:border-color .15s}
.upload-zone:hover{border-color:var(--red)}
.anhang-item{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid var(--border);font-size:13px}
.anhang-item:last-child{border-bottom:none}
.anhang-icon{font-size:18px;flex-shrink:0}

/* ── Kontakt-Karte ── */
.kk{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px;margin-bottom:8px;position:relative}
.kk-name{font-weight:600;font-size:13px}
.kk-firma{font-size:11px;color:var(--muted);margin-top:1px}
.kk-contacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.kk-link{font-size:12px;color:var(--blue);text-decoration:none}
.kk-link:hover{text-decoration:underline}

/* ── Lehrgang-Zeile ── */
.lg-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.lg-best{background:var(--green-bg);color:var(--green-text)}
.lg-teil{background:var(--blue-bg);color:var(--blue-text)}
.lg-abgb{background:var(--red-bg);color:var(--red2)}

#topbar-breadcrumb{font-size:11px;color:var(--muted);line-height:1.2}
/* ── Responsive / Mobile ── */
@media(max-width:900px){
  .sidebar{width:200px;min-width:200px}
  .g2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .sg{flex-wrap:wrap}
  .st{min-width:120px}
}
@media(max-width:650px){
  .app{flex-direction:column}
  .sidebar{width:100%;min-width:unset;height:auto;flex-direction:row;overflow-x:auto}
  .sidebar nav{display:flex;flex-direction:row;overflow-x:auto;padding:4px}
  .sidebar .logo{display:none}
  .ns{display:none}
  .ng{display:flex;flex-direction:row}
  .ng.collapsed{display:flex;max-height:unset;opacity:1}
  .ni{padding:8px 12px;white-space:nowrap;border-radius:16px;margin:2px;font-size:12px;min-height:36px}
  .ni.active{border-left:none;padding-left:12px;border-bottom:2px solid var(--red)}
  .main{height:calc(100vh - 60px)}
  .topbar{padding:0 8px;gap:4px;flex-wrap:wrap;height:auto;min-height:52px;padding-top:6px;padding-bottom:6px}
  #topbar-breadcrumb{display:none}
  .topbar-title{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #global-search{width:120px}
  .md{width:96vw!important;max-width:96vw!important;margin:2vw}
  .fgrid{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .tw{overflow-x:auto}
  table{min-width:500px}
}

/* ── Burger-Menü (Drawer): Einstellungen IMMER ausblenden, egal welche
   Bildschirmbreite. Wenn die Sidebar als mobiler Drawer geöffnet ist,
   handelt es sich um eine Mannschafts-/Mitglieder-Ansicht — System-Setup
   (Schlüssel, Lizenzen, Integration) hat dort nichts verloren. */
.sidebar.mobile-open .ni[data-s="einstellungen"]{display:none !important}

/* ── Optimierung für sehr schmale Smartphones (≤ 480 px) ───────── */
@media(max-width:480px){
  /* DEV-Banner kompakter — verbraucht sonst auf kleinen Screens
     1/4 der Sichthöhe */
  .topbar > div[style*="ENTWICKLUNG"],
  body > div[style*="ENTWICKLUNGSSYSTEM"]{
    font-size:9px !important;
    padding:3px 8px !important;
    line-height:1.2 !important;
  }
  /* Topbar: kompakte Knöpfe + flexible Wrap */
  .topbar{gap:3px;padding:4px 6px}
  .topbar-title{font-size:12px;flex:1 1 100%}
  .topbar .btn{padding:5px 8px;font-size:11px;min-height:36px}
  #global-search{flex:1;min-width:0;width:auto}
  /* Profil-Pill kleiner */
  .topbar .profile-pill{padding:3px 8px;font-size:11px}
  /* Sidebar komplett verstecken — Smartphone-Nutzer brauchen primär
     Self-Service, nicht die Verwaltungs-Navigation. Sidebar wird
     bei Bedarf über den Hamburger-Knopf als Drawer eingeblendet. */
  .sidebar{display:none !important}
  .sidebar.mobile-open{
    display:flex !important;flex-direction:column;
    position:fixed;top:0;left:0;
    width:80vw;max-width:300px;height:100vh;
    z-index:9999;
    box-shadow:4px 0 20px rgba(0,0,0,.4);
    overflow-y:auto
  }
  .sidebar.mobile-open nav{
    display:flex;flex-direction:column;
    overflow-x:visible;overflow-y:auto;padding:6px
  }
  .sidebar.mobile-open .logo{display:flex}
  .sidebar.mobile-open .ns{display:flex}
  .sidebar.mobile-open .ng{flex-direction:column}
  .sidebar.mobile-open .ni{
    padding:10px 14px;font-size:13px;border-radius:6px;
    min-height:40px;white-space:normal;width:100%;
    border-bottom:none;border-left:none;margin:1px 0
  }
  .sidebar.mobile-open .ni.active{
    border-left:3px solid var(--red);padding-left:11px;border-bottom:none
  }
  /* Backdrop hinter offenem Drawer */
  .sidebar-mobile-backdrop{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.5);z-index:9998
  }
  .sidebar-mobile-backdrop.show{display:block}
  /* Hamburger-Button in der Topbar */
  #mobile-menu-toggle{
    display:inline-flex !important;
    align-items:center;justify-content:center;
    width:40px;height:40px;background:var(--red);color:white;
    border:none;border-radius:6px;font-size:18px;cursor:pointer;
    margin-right:4px;flex-shrink:0
  }
  .ni-locked::after{display:none}    /* Schloss-Icon weg auf Mobile */
  /* Content: weniger Padding, voller Breite */
  .content{padding:10px 8px}
  .card{padding:10px 12px;margin-bottom:10px}
  .ch{padding:8px 10px;font-size:12px;flex-wrap:wrap;gap:6px}
  .cb{padding:10px}
  /* Form-Elemente: Touch-friendly (min 44 px Höhe gemäß iOS HIG) */
  .fc, input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="search"], select, textarea{
    min-height:42px;font-size:14px;padding:8px 10px
  }
  .btn{min-height:42px;padding:10px 14px;font-size:13px}
  .btn-s{min-height:36px;padding:7px 12px;font-size:12px}
  .btn-xs{min-height:30px;padding:5px 10px;font-size:11px}
  /* Modal-Footer: Buttons stapeln */
  .md-foot{flex-wrap:wrap;gap:6px;padding:10px}
  .md-foot .btn{flex:1 1 calc(50% - 6px);min-height:42px}
  .md-foot .btn-del{flex:1 1 100%;order:99}
  /* Tabellen: weniger Padding pro Zelle, kleine Schrift */
  table th, table td{padding:6px 8px;font-size:11px}
  /* Modals fast vollbild */
  .md{width:98vw!important;max-width:98vw!important;
        max-height:96vh!important;margin:1vw}
  .md-body{padding:10px}
  .md-head{padding:8px 10px;min-height:44px}
  .md-h1{font-size:14px}
  /* Tabs: scrollbar mit Snap */
  .ptabs, .ptabs-rows{overflow-x:auto;scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch}
  .ptabs .tab, .ptabs-rows .tab{scroll-snap-align:start;
        flex-shrink:0;min-height:38px;padding:9px 14px}
  /* Action-Spalte (Buttons in Tabellen) auf kleinem Screen
     vertikal stapeln und auf gleiche Breite ziehen */
  table td .btn{display:block;width:100%;margin:2px 0}
  /* Phone-Mockup im Hub: kleiner für Sichtkontrolle */
  .wt-phone-frame{transform:scale(.85);transform-origin:top left;
        margin-bottom:-80px}
  /* Admin-/Operations-Widgets im Dashboard ausblenden — auf dem
     Smartphone braucht ein Mitglied keine Prüffristen, anstehenden
     Prüfungen, letzte Einsätze, Einsätze-nach-Art, Verbrauchsmaterial-
     oder Werkzeug-Ausleihe-Übersicht. Geblieben: Geburtstage, Feiertage,
     persönliche KPI-Karten. */
  .dashboard-admin-widgets{display:none !important}
  /* Sidebar-Menüpunkte mit Bezug zu Material/Werkzeug/Werkstatt
     ausblenden — für Mannschafts-Nutzung irrelevant. Drawer enthält
     dann nur noch Dashboard, Personal-Self-Service, Termine, etc.
     Einstellungen werden auf Mobil ebenfalls ausgeblendet — auf dem
     Smartphone soll niemand am System-Setup schrauben (System-Keys,
     Lizenzen, Integration etc.). */
  .ni[data-s="material"],
  .ni[data-s="werkstatt"],
  .ni[data-s="lager"],
  .ni[data-s="ausleihe"],
  .ni[data-s="werkzeug"],
  .ni[data-s="einstellungen"]{
    display:none !important
  }
  /* Header-Buttons auf Mobil ausblenden — Funktisch, Doku, Handbuch,
     Hilfe, Feedback, +Neu. Profil-Dropdown bleibt sichtbar damit der
     User sich abmelden kann. Hamburger + Title + Suche reichen. */
  .topbar [data-topbar-id="funktisch-app"],
  .topbar [data-topbar-id="hilfe-doku"],
  .topbar [data-topbar-id="anwender-doku"],
  .topbar [data-topbar-id="fernwartung"],
  .topbar [data-topbar-id="feedback"],
  .topbar [data-topbar-id="new-entry"]{
    display:none !important
  }
}

/* ── Optimierung für Tablet hochkant (481-820 px) ──────────────── */
@media(min-width:481px) and (max-width:820px){
  .content{padding:14px 12px}
  .md-foot .btn{min-height:40px}
  .fc{min-height:38px}
}
@media print{
  .sidebar,.topbar,.md-foot,.btn,.sr{display:none!important}
  .app{display:block}
  .main{overflow:visible}
  .content{padding:0}
  .sec.active{display:block!important}
  .card{break-inside:avoid;border:1px solid #ccc;margin-bottom:8px}
}
/* ── Dark Mode — Leitstand-Dark ── */
.dark-mode {
  --bg:#121A28;--white:#1B2536;--card:#1B2536;
  --border:#2B3850;--border2:#232F44;
  --text:#E6EAF1;--muted:#8794A8;
  --row-hover:#222E42;--sidebar:#0C1422;
  --red:#F2554C;--red2:#E5342B;--red-bg:rgba(242,85,76,.16);
  --green:#22C55E;--green-bg:rgba(34,197,94,.16);--green-text:#4ADE80;
  --amber:#F59E0B;--amber-bg:rgba(245,158,11,.16);--amber-text:#FBBF24;
  --blue:#3B82F6;--blue-bg:rgba(59,130,246,.16);--blue-text:#60A5FA;
  --gray-bg:#222E42;--gray-text:#8794A8;
  --sh:0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.15);
  --sh2:0 16px 48px rgba(0,0,0,.55);
}
.dark-mode .sidebar { background:var(--sidebar); }
.dark-mode .topbar  { background:var(--white); border-bottom-color:var(--border); }
.dark-mode .card    { background:var(--white); }
.dark-mode .login   { background:var(--sidebar); }
.dark-mode .lbox    { background:var(--white); border-color:var(--border); }
.dark-mode .lil     { color:var(--muted); }
.dark-mode .lii     { background:var(--row-hover); color:var(--text); border-color:var(--border); }
.dark-mode .lit,.dark-mode .lis,.dark-mode .lih { color:var(--text); }
.dark-mode input, .dark-mode select, .dark-mode textarea {
  background:var(--white); color:var(--text); border-color:var(--border);
}
.dark-mode .fc, .dark-mode .si {
  background:var(--row-hover); color:var(--text); border-color:var(--border);
}
.dark-mode .mo > .md { background:var(--white); border-color:var(--border); }
.dark-mode .nf { box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.dark-mode .st { background:var(--white); }
.dark-mode .btn { background:var(--white); color:var(--text); border-color:var(--border); }
.dark-mode .btn:hover { background:var(--row-hover); }
.dark-mode .btn-p { background:var(--red)!important; color:#fff!important; border-color:var(--red)!important; }
.dark-mode table { color:var(--text); }
.dark-mode th { background:var(--white); color:var(--muted); border-color:var(--border); }
.dark-mode td { border-color:var(--border); }
.dark-mode tr:hover td { background:var(--row-hover); }
/* ── Farbschema „Hoher Kontrast" — hell, harte Kanten (Beamer/Sonnenlicht).
     Bedeutungsfarben behalten ihre Semantik, nur kräftiger. ── */
html[data-theme="kontrast"] {
  --bg:#FFFFFF;--white:#FFFFFF;--card:#FFFFFF;
  --border:#8B97A9;--border2:#6E7B8F;
  --text:#000000;--muted:#26303F;
  --row-hover:#EEF1F5;--sidebar:#05090F;--s-text:#C7D2E4;
  --red:#B80000;--red2:#8F0000;--red-bg:#FFD9D6;
  --green:#0F7A37;--green-bg:#D2F5DF;--green-text:#0B5C2A;
  --amber:#A85B00;--amber-bg:#FDEBC8;--amber-text:#7E4400;
  --blue:#153FB0;--blue-bg:#DCE6FD;--blue-text:#153FB0;
  --gray-bg:#E4E8ED;--gray-text:#26303F;
  --sh:0 1px 3px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12);
  --sh2:0 16px 48px rgba(0,0,0,.35);
}
/* ── Farbschema „Nachtbetrieb" — stark gedimmt. Nutzt die .dark-mode-Komponenten-
     regeln (Klasse ist zusätzlich gesetzt), überschreibt nur die Variablen. ── */
html.dark-mode[data-theme="nacht"] {
  --bg:#0A0F18;--white:#101724;--card:#101724;
  --border:#1E2839;--border2:#182130;
  --text:#C2C9D6;--muted:#6E7A8E;
  --row-hover:#151E2E;--sidebar:#060A12;
  --red:#C94B44;--red2:#B02E2E;--red-bg:rgba(201,75,68,.16);
  --green:#1E9E4F;--green-bg:rgba(30,158,79,.16);--green-text:#3BBF74;
  --amber:#C98A0B;--amber-bg:rgba(201,138,11,.16);--amber-text:#DFA92E;
  --blue:#3D6BB8;--blue-bg:rgba(61,107,184,.16);--blue-text:#6FA0E8;
  --gray-bg:#151E2E;--gray-text:#6E7A8E;
  --sh:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --sh2:0 16px 48px rgba(0,0,0,.75);
}
/* ── Farbsinn-Profile (Farbschwäche/Farbblindheit) — kombinierbar mit jedem
     Farbschema. NACH den Theme-Blöcken (gewinnen bei gleicher Spezifität);
     kombinierte Selektoren decken die dunklen Schemata ab.
     Rot-Grün: Grün→Blau (Rot↔Blau sicher unterscheidbar), Amber→Ocker.
     Blau-Gelb: Info-Blau→Magenta, Amber→Rotorange. ── */
html[data-farbsinn="rotgruen"] {
  --green:#1D6FC2;--green-bg:#DCE9FB;--green-text:#12459A;
  --amber:#8F7500;--amber-bg:#F5EDC8;--amber-text:#6E5A00;
}
html.dark-mode[data-farbsinn="rotgruen"] {
  --green:#5B9BE8;--green-bg:rgba(91,155,232,.16);--green-text:#8FBCF2;
  --amber:#D9C226;--amber-bg:rgba(217,194,38,.16);--amber-text:#E8D74A;
}
html[data-farbsinn="blaugelb"] {
  --blue:#86198F;--blue-bg:#FAE8FF;--blue-text:#86198F;
  --amber:#C2410C;--amber-bg:#FDE1D3;--amber-text:#9A3412;
}
html.dark-mode[data-farbsinn="blaugelb"] {
  --blue:#C05B9E;--blue-bg:rgba(192,91,158,.16);--blue-text:#E08FC7;
  --amber:#E8703A;--amber-bg:rgba(232,112,58,.16);--amber-text:#F09A6E;
}
/* Dark Mode Toggle Button */
#dark-toggle {
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
  background:var(--white);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;flex-shrink:0;
}
#dark-toggle:hover { background:var(--border); }
/* ── Inline-Validierung ── */
.fc.invalid { border-color:var(--red)!important; background:var(--red-bg)!important; }
.fc.valid   { border-color:var(--green)!important; }
.field-error{ font-size:11px;color:var(--red);margin-top:3px;display:none }
.fc.invalid + .field-error { display:block }
/* Pflichtfelder: rot solange leer/ungültig, normal sobald gültig befüllt */
.fc[required]:invalid,
.fc:required:invalid {
  border-color: var(--red);
  background: #fff5f5;
}
.fc[required]:valid,
.fc:required:valid {
  border-color: var(--border);
  background: var(--white);
}

/* ── Navigationsgruppen: Auf-/Zuklappen ── */
.ng-head {
  padding: 7px 10px 4px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  margin: 6px 4px 0;
  transition: color .15s, background .15s;
}
.ng-head:hover { color: rgba(255,255,255,.6); background: rgba(255,255,255,.04); }
.ng-head .ng-arrow {
  font-size: 10px;
  transition: transform .22s ease;
  display: inline-block;
}
.ng-head.collapsed .ng-arrow { transform: rotate(-90deg); }
.ng-body {
  overflow: hidden;
  max-height: 600px;
  transition: max-height .22s ease-out;
}
.ng-body.collapsed {
  max-height: 0 !important;
}
.ng-body a.ni {
  display: flex;
  align-items: center;
  padding: 7px 12px 7px 20px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  text-decoration: none;
  border-radius: 5px;
  margin: 1px 4px;
  transition: background .12s, color .12s;
  cursor: pointer;
}
.ng-body a.ni:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.ng-body a.ni.active {
  background: rgba(229,52,43,.2);
  color: #FF8A80;
  border-left: 3px solid var(--red);
  padding-left: 17px;
  font-weight: 500;
}
.ng-body a.ni.ni-locked {
  opacity: .3;
  pointer-events: none;
}
/* Dashboard-Link */
a.ni[data-s="dashboard"] {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  text-decoration: none;
  border-radius: 5px;
  margin: 4px 4px 2px;
  transition: background .12s, color .12s;
}
a.ni[data-s="dashboard"]:hover { background: rgba(255,255,255,.06); color: #fff; }
a.ni[data-s="dashboard"].active { background: rgba(229,52,43,.2); color: #FF8A80; border-left: 3px solid var(--red); padding-left: 9px; }
.font-large { font-size: 16px !important; }
.font-large .fc, .font-large .fl, .font-large .tab { font-size: 15px !important; }
.font-xlarge { font-size: 18px !important; }
.font-xlarge .fc, .font-xlarge .fl, .font-xlarge .tab { font-size: 17px !important; }

/* ── DataTable: Sort + Filter (global, generisch) ──────────────── */
table[data-dt-done="1"] thead th { position: relative; }
table[data-dt-done="1"] thead th .dt-sort-ind {
  color: var(--muted, #888); font-size: 10px; margin-left: 4px; opacity: 0.7;
}
table[data-dt-done="1"] thead th:hover .dt-sort-ind {
  opacity: 1; color: var(--red, #C0392B);
}
/* Aktive Sortier-Spalte */
table[data-dt-done="1"] thead th.dt-active-sort {
  color: var(--red, #C0392B) !important;
}
table[data-dt-done="1"] thead th.dt-active-sort .dt-sort-ind {
  color: var(--red, #C0392B); opacity: 1;
}
/* Aktive Filter-Spalte: roter Header + Akzent */
table[data-dt-done="1"] thead th.dt-active-filter {
  background: rgba(229,52,43,0.18) !important;
  color: #FF8A80 !important;
}
/* Filter-Zeile */
table[data-dt-done="1"] thead tr.dt-filter-row th {
  padding: 2px 4px;
  background: var(--bg, transparent);
  border-bottom: 1px solid var(--border, #2d3748);
  text-transform: none; letter-spacing: normal; font-size: inherit;
}
table[data-dt-done="1"] thead tr.dt-filter-row th.dt-active-filter {
  background: rgba(229,52,43,0.10) !important;
  border-bottom: 2px solid var(--red, #C0392B);
}
.dt-filter-wrap { position: relative; display: flex; align-items: center; }
table[data-dt-done="1"] thead tr.dt-filter-row th input.dt-filter-input {
  width: 100%;
  padding: 3px 22px 3px 6px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--white);
  color: var(--text);
  box-sizing: border-box;
  font-family: inherit;
}
table[data-dt-done="1"] thead tr.dt-filter-row th input.dt-filter-input:focus {
  outline: none; border-color: var(--red); background: var(--white); color: var(--text);
}
table[data-dt-done="1"] thead tr.dt-filter-row th.dt-active-filter input.dt-filter-input {
  border-color: var(--red);
  background: var(--white);
  color: var(--text);
}
.dt-filter-clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  padding: 0; line-height: 1;
  border: none; background: transparent;
  color: var(--muted, #888);
  font-size: 16px; font-weight: bold;
  cursor: pointer; border-radius: 2px;
}
.dt-filter-clear:hover {
  color: var(--red, #C0392B); background: rgba(229,52,43,0.15);
}
/* Toolbar oberhalb jeder Tabelle */
.dt-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px; margin-bottom: 4px; font-size: 12px;
}
.dt-toolbar .dt-tb-count { color: var(--muted, #888); font-size: 11px; }
.dt-toolbar .btn { padding: 4px 10px; font-size: 11px; }
.dt-count { font-size: 11px; color: var(--muted, #888); margin-top: 4px; }

/* ── Spaltenauswahl: Symbol links in der Kopfzeile + Klappliste ──── */
.dt-cols-wrap { position: relative; display: inline-block; margin-right: 6px; }
.dt-cols-btn {
  cursor: pointer; user-select: none; font-size: 12px; line-height: 1;
  color: var(--muted, #888); padding: 2px 3px; border-radius: 3px;
}
.dt-cols-btn:hover, .dt-cols-btn:focus {
  color: var(--red, #C0392B); background: rgba(229,52,43,0.12); outline: none;
}
.dt-cols-panel {
  position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 4px;
  min-width: 190px; max-height: 320px; overflow-y: auto;
  background: var(--card, #fff); border: 1px solid var(--border, #ddd);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  padding: 6px; text-align: left; font-weight: 400;
}
.dt-cols-suche {
  width: 100%; box-sizing: border-box; margin-bottom: 6px;
  padding: 5px 8px; font-size: 12px; font-weight: 400;
}
.dt-cols-head {
  font-size: 11px; font-weight: 600; color: var(--muted, #888);
  padding: 2px 4px 6px; border-bottom: 1px solid var(--border, #eee); margin-bottom: 4px;
}
.dt-cols-item {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 4px 5px; border-radius: 4px; font-size: 12px; white-space: nowrap;
}
.dt-cols-item:hover { background: var(--bg, #f5f5f5); }
/* Die globale Regel `input{width:100%}` darf Checkboxen nicht aufblasen. */
.dt-cols-item input[type=checkbox] { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }
.dt-cols-all { width: 100%; margin-top: 6px; font-size: 11px; }

/* ── Spaltenreihenfolge: Ziehgriff in der Kopfzelle ──────────────── */
/* Eigener Griff statt ziehbarer Kopfzelle: ein Klick auf den Text soll
   weiter sortieren. Nur der Griff ist draggable — damit gibt es keine
   Doppeldeutigkeit zwischen Sortieren und Umordnen. */
/* Groesser als ein reines Symbol: der Griff muss mit der Maus sicher zu
   treffen sein, ohne dass man die Kopfzelle erwischt und damit sortiert. */
.dt-drag {
  cursor: grab; user-select: none; display: inline-block;
  color: var(--muted, #888); font-size: 18px; line-height: 1;
  letter-spacing: 0; margin-right: 6px; padding: 4px 6px 4px 4px;
  opacity: .55; vertical-align: middle;
}
.dt-drag:hover { opacity: 1; color: var(--red, #C0392B); }
.dt-drag:active { cursor: grabbing; }
th.dt-zieht { opacity: .45; }
th.dt-ziel-vor  { box-shadow: inset  3px 0 0 var(--red, #C0392B); }
th.dt-ziel-nach { box-shadow: inset -3px 0 0 var(--red, #C0392B); }

/* ── Native <select>: Optionen + optgroups im Darkmode lesbar ────── */
/* Browser-Default: optgroups erben System-Farben (helles Grau auf Weiß).
   In unserem Darkmode wird das auf dem dunklen Container fast unsichtbar.
   Explizite dunkle Farben setzen — wirkt überall, wo .fc auf <select> liegt. */
select.fc option {
  background: var(--bg2, #1a1d2e) !important;
  color: var(--tx, #e2e8f0) !important;
}
select.fc option:checked,
select.fc option:hover {
  background: var(--red, #C0392B) !important;
  color: #fff !important;
}
select.fc option:disabled {
  color: var(--muted, #888) !important;
  font-style: italic;
}
select.fc optgroup {
  background: var(--bg, #0f1117) !important;
  color: #FF8A80 !important;
  font-weight: 700;
  font-style: normal;
  padding: 4px 0;
}
/* Size-Listbox (multi-line select) — saubere Zeilenhöhe */
select.fc[size]:not([size="1"]) {
  padding: 4px;
  line-height: 1.6;
}

/* ── Termin-Warnungen auf <input type="date"> (global) ──────────── */
/* Rot: überfällig (Datum < heute) */
input.fc.fc-overdue, input.fc-overdue {
  border: 2px solid #dc2626 !important;
  background: rgba(220,38,38,0.10) !important;
  box-shadow: 0 0 0 1px rgba(220,38,38,0.35);
}
/* Gelb: ≤30 Tage bis Datum */
input.fc.fc-soon, input.fc-soon {
  border: 2px solid #f59e0b !important;
  background: rgba(245,158,11,0.08) !important;
}
input.fc.fc-overdue:focus, input.fc-overdue:focus,
input.fc.fc-soon:focus, input.fc-soon:focus {
  outline: none;
}

/* ── Gesperrte Materialien / Geräte: rote Schrift ───────────────── */
/* Wirkt global auf Tabellen-Zeilen und Listenelemente, die der
   Status-Highlighter mit .row-gesperrt markiert. */
tr.row-gesperrt > td,
tr.row-gesperrt > th,
li.row-gesperrt,
div.row-gesperrt {
  color: #ef4444 !important;
}
tr.row-gesperrt > td code,
tr.row-gesperrt > td strong {
  color: #fca5a5 !important;
}
/* Links/Buttons innerhalb gesperrter Zeilen sollen nicht auch rot werden */
tr.row-gesperrt > td .btn,
tr.row-gesperrt > td .pill {
  color: var(--tx) !important;
}

/* ── Dokumente-Leiste (dok-leiste.js) ────────────────────────────── */
.dok-box{display:flex;align-items:center;gap:8px;margin-right:12px;position:relative}
.dok-box .dok-info{cursor:pointer;font-size:13px;color:var(--tx2);white-space:nowrap}
.dok-box .dok-liste{display:none;position:absolute;top:28px;right:0;z-index:50;
  min-width:320px;max-height:280px;overflow:auto;background:var(--bg);
  border:1px solid var(--bdr);border-radius:6px;padding:6px}
.dok-box .dok-z{display:flex;align-items:center;gap:8px;padding:4px 6px;font-size:13px}
.dok-box .dok-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dok-box .dok-g{color:var(--tx3);white-space:nowrap;flex:0 0 auto}
.dok-box .dok-d{color:var(--tx3);margin-left:auto;white-space:nowrap;flex:0 0 auto}
/* ── Dokumente-Gesamtübersicht (Reiter „Dokumente", dokGesamtRendern) ── */
.dok-gesamt-leer{color:var(--tx3);font-style:italic;padding:8px 2px}
.dok-gesamt-wrap{max-height:60vh;overflow-y:auto}
.dok-gesamt-wrap thead th{position:sticky;top:0;z-index:2}
/* Ablegen-Zone: aus der abgeloesten Ansicht uebernommen, weil mehrere Dateien
   auf einmal abzulegen schneller ist als der Knopf oben rechts. */
.dok-drop{margin-top:10px;padding:14px;text-align:center;cursor:pointer;
  border:2px dashed var(--bdr);border-radius:8px;background:var(--bg2)}
.dok-drop:hover,.dok-drop.dok-drop-an{border-color:var(--red);background:var(--bg3)}
.dok-drop .dok-drop-t{font-size:13px;color:var(--tx2)}
.dok-drop .dok-drop-s{font-size:10px;color:var(--tx3);margin-top:2px}