/* biotec Anlagen-Doku — Verwaltung (Web). Mobil-first, abgeleitet aus dem Prototyp.
   Tokens: biotec-Cyan/Blau (klinisch), kühles Neutralgrau, grün=erledigt, orange=Foto angefordert. */
:root{
  --bg:#e7edf1; --app:#ffffff; --surface:#ffffff; --surface-2:#f4f8fb; --surface-3:#eaf1f6;
  --fg:#0d1f2b; --muted:#5a6f7d; --faint:#8aa0ad; --border:#d4e0e8; --border-strong:#b9ccd8;
  --brand:#0a84c4; --brand-deep:#064a71; --brand-soft:#dceef8;
  --ok:#1b8d57; --ok-soft:#d9f0e3; --warn:#c9741c; --warn-soft:#fbe9d4; --danger:#c2402f; --danger-soft:#f8ddd8;
  --r:12px; --r-sm:8px; --shadow:0 1px 2px rgba(13,31,43,.06),0 8px 28px rgba(13,31,43,.10);
  --font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a141b; --app:#0f1e29; --surface:#122533; --surface-2:#0e2130; --surface-3:#16303f;
  --fg:#e7f0f6; --muted:#9fb4c1; --faint:#6a818f; --border:#23404f; --border-strong:#305468;
  --brand:#2ea3df; --brand-deep:#8fd1f0; --brand-soft:#123649;
  --ok:#3fb67e; --ok-soft:#10362a; --warn:#e0984a; --warn-soft:#3a2a16; --danger:#e07566; --danger-soft:#3a1f1b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0a141b; --app:#0f1e29; --surface:#122533; --surface-2:#0e2130; --surface-3:#16303f;
  --fg:#e7f0f6; --muted:#9fb4c1; --faint:#6a818f; --border:#23404f; --border-strong:#305468;
  --brand:#2ea3df; --brand-deep:#8fd1f0; --brand-soft:#123649;
  --ok:#3fb67e; --ok-soft:#10362a; --warn:#e0984a; --warn-soft:#3a2a16; --danger:#e07566; --danger-soft:#3a1f1b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.45;-webkit-text-size-adjust:100%;min-height:100vh}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit;cursor:pointer}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* Kopfleiste */
.topbar{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,var(--brand-deep),#053a5a);color:#eaf6fd;
  padding:10px 16px;display:flex;align-items:center;gap:12px}
:root[data-theme="dark"] .topbar,:root:not([data-theme="light"]) .topbar{background:linear-gradient(180deg,#07283b,#04202f)}
.brand{display:flex;align-items:center;gap:9px;font-weight:600}
.brand .logo{width:26px;height:26px;border-radius:7px;background:#fff;display:grid;place-items:center;flex:none}
.brand small{display:block;font-size:10px;font-weight:400;opacity:.8;margin-top:-2px}
.topbar .sp{flex:1}
.navlinks{display:flex;gap:4px;flex-wrap:wrap}
.navlinks a{color:#d6eefb;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:8px}
.navlinks a:hover{background:rgba(255,255,255,.12)}
.navlinks a.active{background:rgba(255,255,255,.18);color:#fff}
.icbtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#eaf6fd;border-radius:8px;padding:6px 10px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.icbtn:hover{background:rgba(255,255,255,.22)}
.userchip{font-size:12px;color:#cfe8f7;display:flex;align-items:center;gap:7px}

/* Container */
.wrap{max-width:960px;margin:0 auto;padding:18px 16px 60px;display:flex;flex-direction:column;gap:16px}
.wrap.narrow{max-width:520px}
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pagehead h1{font-size:20px}
.pagehead .sp{flex:1}
.crumb{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.crumb b{color:var(--fg)} .crumb .sep{color:var(--faint)}

/* Flash */
.flash{border-radius:var(--r-sm);padding:11px 14px;font-size:13px;font-weight:500;display:flex;gap:9px;align-items:center}
.flash.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
.flash.err{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
.flash.info{background:var(--brand-soft);color:var(--brand-deep);border:1px solid var(--brand)}

/* Karten */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.card>.head{padding:12px 15px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--surface-2)}
.card>.head h3{font-size:14px}.card>.head .sub{font-size:11.5px;color:var(--muted);font-weight:400}
.card>.body{padding:14px 15px;display:flex;flex-direction:column;gap:13px}

/* Listenzeilen */
.rowlist{display:flex;flex-direction:column}
.rowitem{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--border);background:var(--surface);text-align:left;width:100%;border-left:3px solid transparent;color:inherit}
.rowitem:last-child{border-bottom:0}.rowitem:hover{background:var(--surface-2)}
.rowitem .num{font-family:var(--mono);font-size:12px;font-weight:600;background:var(--surface-3);border:1px solid var(--border);border-radius:7px;padding:4px 8px;min-width:40px;text-align:center;flex:none}
.rowitem .main{flex:1;min-width:0}
.rowitem .main .t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowitem .main .s{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowitem .chev{color:var(--faint);flex:none}
.rowitem.done{border-left-color:var(--ok)}.rowitem.partial{border-left-color:var(--warn)}
.grouphdr{padding:9px 15px;background:var(--surface-3);border-bottom:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--brand-deep);text-transform:uppercase;display:flex;align-items:center;gap:8px}
:root[data-theme="dark"] .grouphdr,:root:not([data-theme="light"]) .grouphdr{color:var(--brand)}

/* Felder */
.fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fieldgrid.one{grid-template-columns:1fr}
@media (max-width:460px){.fieldgrid{grid-template-columns:1fr}}
.field label,.flabel{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.2px;display:block;margin-bottom:5px}
.field input,.field select,.field textarea,.inp{width:100%;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--fg);border-radius:var(--r-sm);padding:9px 11px;font-size:13px;font-family:inherit}
.field input:focus,.field textarea:focus,.field select:focus,.inp:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
textarea{resize:vertical;min-height:64px}
.field .err,.err-msg{color:var(--danger);font-size:11px;margin-top:4px}

/* Buttons */
.btn{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:9px;padding:10px 15px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn.ghost{background:var(--surface-2);color:var(--fg);border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--surface-3)}
.btn.sm{padding:7px 11px;font-size:12px}.btn.block{width:100%}
.btn.ok{background:var(--ok);border-color:var(--ok)}.btn.ok:hover{filter:brightness(.94)}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btnrow{display:flex;gap:9px;flex-wrap:wrap}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:999px;text-transform:uppercase}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.open{background:var(--surface-3);color:var(--muted)}.badge.brand{background:var(--brand-soft);color:var(--brand-deep)}
:root[data-theme="dark"] .badge.brand,:root:not([data-theme="light"]) .badge.brand{color:var(--brand)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--fg);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--brand)}.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.add{border-style:dashed;color:var(--muted);font-weight:600}

/* Segmented */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--fg);border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:600;flex:1;min-width:64px}
.seg button.on[data-v="ja"],.seg button.on[data-v="richtig"],.seg button.on[data-v="vorhanden"]{background:var(--ok);border-color:var(--ok);color:#fff}
.seg button.on[data-v="nein"],.seg button.on[data-v="falsch"],.seg button.on[data-v="fehlt"]{background:var(--danger);border-color:var(--danger);color:#fff}
.seg button.on[data-v="veraltet"],.seg button.on[data-v="unvollständig"],.seg button.on[data-v="nicht ersichtlich"],.seg button.on[data-v="Nein < 2 cm"]{background:var(--warn);border-color:var(--warn);color:#fff}

/* X-Feld */
.xfield{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-sm);padding:9px 11px;text-align:left;width:100%}
.xfield .box{width:24px;height:24px;border-radius:6px;border:2px solid var(--border-strong);display:grid;place-items:center;flex:none;font-weight:800;color:transparent;font-size:15px}
.xfield .lab{flex:1;min-width:0;font-size:13px;font-weight:500}
.xfield.on{background:var(--ok-soft);border-color:var(--ok)}.xfield.on .box{background:var(--ok);border-color:var(--ok);color:#fff}

/* Foto-Verknüpfung */
.photolink{display:flex;align-items:center;gap:9px;background:var(--warn-soft);border:1px dashed var(--warn);color:var(--warn);border-radius:8px;padding:8px 11px;font-size:12px;font-weight:600}

/* Komponenten-Raster */
.compscroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-sm)}
.comptable{border-collapse:collapse;min-width:100%;font-size:12px}
.comptable th,.comptable td{border:1px solid var(--border);padding:0;text-align:center}
.comptable thead th{background:var(--surface-3);font-family:var(--mono);font-weight:700;padding:8px 4px;min-width:46px}
.comptable tbody th{background:var(--surface-2);font-size:10px;color:var(--muted);padding:6px 8px;text-align:left;white-space:nowrap;position:sticky;left:0}
.compcell{width:100%;height:38px;background:transparent;border:0;font-size:14px;font-weight:800;color:transparent}
.compcell.on{color:var(--danger);background:var(--danger-soft)}
.addcomp{border:1px dashed var(--border-strong);background:var(--surface-2);color:var(--muted);border-radius:8px;padding:8px 11px;font-size:12px;font-weight:600;width:100%}

/* Abstriche */
.absgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
@media (max-width:420px){.absgrid{grid-template-columns:1fr}}
.absitem{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);background:var(--surface-2);border-radius:8px;padding:8px 10px;font-size:12.5px;font-weight:600}
.absitem .b{width:18px;height:18px;border-radius:5px;border:2px solid var(--border-strong);flex:none;display:grid;place-items:center;color:transparent;font-weight:800;font-size:11px}
.absitem.on{background:var(--brand-soft);border-color:var(--brand)}.absitem.on .b{background:var(--brand);border-color:var(--brand);color:#fff}

/* Foto-Slots */
.slot{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;background:var(--surface)}
.slot .thumb{width:48px;height:48px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--border);color:var(--faint);overflow:hidden}
.slot .thumb img{width:100%;height:100%;object-fit:cover}
.slot .m{flex:1;min-width:0}.slot .m .t{font-size:13px;font-weight:600}.slot .m .s{font-size:11px;color:var(--muted)}
.slot.req{border-color:var(--warn);background:var(--warn-soft)}.slot.done{border-color:var(--ok)}

/* Modulleiste (Editor) */
.modbar{position:sticky;top:46px;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);display:flex;gap:6px;overflow-x:auto;padding:8px 10px;-webkit-overflow-scrolling:touch}
.modbar::-webkit-scrollbar{height:0}
.modtab{flex:none;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.modtab .n{font-family:var(--mono);font-size:10px;opacity:.7}
.modtab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.modtab.done{border-color:var(--ok)}
.modtab .dot{width:7px;height:7px;border-radius:50%;background:transparent}
.modtab.done .dot{background:var(--ok)}.modtab.req .dot{background:var(--warn)}

.hint{font-size:11.5px;color:var(--muted);display:flex;gap:7px;align-items:flex-start}
.hint svg{flex:none;margin-top:1px;color:var(--brand)}
.empty{text-align:center;color:var(--muted);padding:26px 14px;font-size:13px}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--border)}
.kv:last-child{border-bottom:0}.kv .k{color:var(--muted)}.kv .v{font-weight:600;text-align:right}
.sectitle{display:flex;align-items:center;gap:9px;margin:2px 0}.sectitle h2{font-size:17px}

/* Progress */
.prog{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;border:1px solid var(--border);flex:1}
.prog>i{display:block;height:100%;background:var(--ok);transition:width .2s}

/* Tabelle (Admin) */
table.data{width:100%;border-collapse:collapse;font-size:12.5px}
table.data th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:2px solid var(--border)}
table.data td{padding:9px 10px;border-bottom:1px solid var(--border)}

/* Login */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.loginbox{max-width:380px;width:100%}

/* Autosave-Status */
.saver{position:fixed;right:14px;bottom:14px;z-index:50;background:var(--fg);color:var(--app);font-size:12px;font-weight:600;padding:8px 13px;border-radius:999px;box-shadow:var(--shadow);opacity:0;transition:opacity .2s;pointer-events:none}
.saver.show{opacity:1}