:root{--bg:#f3f5f8;--fl:#fff;--fl2:#f6f8fa;--tx:#18212b;--tx2:#5a6673;--rd:#dfe4ea;--rd2:#c7d0da;--ak:#0b5cad;--ak2:#094b8f;--akh:#e8f1fb;--glueh:rgba(11,92,173,.18);
--gr:#18794e;--grb:#e6f4ec;--ws:#8a4b00;--wsb:#fff5e3;--fe:#b42318;--feb:#fdeceb;--sch:0 2px 6px rgba(16,24,40,.06),0 10px 28px rgba(16,24,40,.09);--auf:#fff;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=hell]){--bg:#0e1217;--fl:#171d24;--fl2:#1c232b;--tx:#e6ebf0;--tx2:#9ba7b3;--rd:#29323c;--rd2:#38434f;--ak:#5ba5ea;--ak2:#8cc2f4;--akh:rgba(91,165,234,.13);--glueh:rgba(91,165,234,.3);--gr:#55c792;--grb:rgba(85,199,146,.12);--ws:#efb563;--wsb:rgba(239,181,99,.1);--fe:#f28d84;--feb:rgba(242,141,132,.11);--sch:0 4px 18px rgba(0,0,0,.4);--auf:#08131f;color-scheme:dark}}
:root[data-theme=dunkel]{--bg:#0e1217;--fl:#171d24;--fl2:#1c232b;--tx:#e6ebf0;--tx2:#9ba7b3;--rd:#29323c;--rd2:#38434f;--ak:#5ba5ea;--ak2:#8cc2f4;--akh:rgba(91,165,234,.13);--glueh:rgba(91,165,234,.3);--gr:#55c792;--grb:rgba(85,199,146,.12);--ws:#efb563;--wsb:rgba(239,181,99,.1);--fe:#f28d84;--feb:rgba(242,141,132,.11);--sch:0 4px 18px rgba(0,0,0,.4);--auf:#08131f;color-scheme:dark}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}
a{color:var(--ak)}h1{font-size:1.5rem;margin:0 0 6px;letter-spacing:-.01em}h2{font-size:1.15rem;margin:0 0 12px}
.marke{display:inline-flex;align-items:center;gap:10px;font-weight:750;font-size:1.08rem;color:var(--tx);text-decoration:none}.marke svg{width:30px;height:30px;color:var(--ak)}.marke img.logo{width:34px;height:34px;border-radius:50%;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 14px -5px rgba(8,28,58,.5);transform:perspective(240px) rotateX(10deg) rotateY(-8deg);transition:transform .35s}.marke:hover img.logo{transform:perspective(240px) rotateY(14deg) scale(1.06)}.anmelden .marke{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:1.25rem}.anmelden .marke img.logo{width:96px;height:96px;box-shadow:0 16px 32px -12px rgba(6,22,48,.6),0 4px 10px rgba(0,0,0,.2)}
.mitte{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.karte{background:var(--fl);border:1px solid var(--rd);border-radius:12px;box-shadow:var(--sch);padding:28px}
.anmelden{width:100%;max-width:400px}.anmelden .marke{margin-bottom:22px}
.text2{color:var(--tx2);font-size:.92rem;margin:0 0 18px}
label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}
input[type=text],input[type=password],select{width:100%;height:46px;padding:0 12px;border:1px solid var(--rd2);border-radius:8px;background:var(--fl);color:var(--tx);font:inherit}
input:focus,select:focus{outline:none;border-color:var(--ak);box-shadow:0 0 0 3px var(--glueh)}
.zeile{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:.92rem}.zeile label{display:inline;margin:0;font-weight:500}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:8px;border:1px solid var(--ak);background:var(--ak);color:var(--auf);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.knopf:hover{background:var(--ak2);border-color:var(--ak2)}.knopf:disabled{opacity:.6;cursor:progress}
.knopf.breit{width:100%;margin-top:20px}.knopf.zwei{background:var(--fl);color:var(--tx);border-color:var(--rd2)}.knopf.zwei:hover{border-color:var(--ak);color:var(--ak);background:var(--fl)}
.knopf.klein{height:34px;padding:0 10px;font-size:.85rem;font-weight:550}.knopf.gefahr{background:var(--fl);color:var(--fe);border-color:var(--rd2)}.knopf.gefahr:hover{background:var(--feb);border-color:var(--fe)}
.meldung{padding:10px 12px;border-radius:8px;font-size:.9rem;margin:14px 0 0}.meldung:empty{display:none}
.meldung.fehler{background:var(--feb);color:var(--fe)}.meldung.ok{background:var(--grb);color:var(--gr)}.meldung.info{background:var(--akh);color:var(--tx)}
.fuss{color:var(--tx2);font-size:.8rem;text-align:center;margin-top:18px}
.kopf{background:var(--fl);border-bottom:1px solid var(--rd)}.kopf-innen{max-width:1100px;margin:0 auto;height:60px;padding:0 20px;display:flex;align-items:center;gap:16px}
.kopf-innen .rechts{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--tx2)}
.inhalt{max-width:1100px;margin:0 auto;padding:24px 20px 60px}
.raster{display:grid;grid-template-columns:1fr;gap:20px}
.formraster{display:grid;grid-template-columns:1fr 1fr 1.3fr auto auto;gap:12px;align-items:end}.formraster label{margin-top:0}
@media(max-width:900px){.formraster{grid-template-columns:1fr 1fr}}@media(max-width:560px){.formraster{grid-template-columns:1fr}}
.aktionen .knopf{white-space:nowrap}.raster>*{min-width:0}
@media(max-width:700px){.kopf-innen{padding:0 12px;gap:8px}.kopf-innen .marke span,#ich{display:none}.inhalt{padding:18px 12px 40px}.karte{padding:18px}
#liste-tab thead{display:none}#liste-tab tr{display:block;padding:12px 0;border-bottom:1px solid var(--rd)}#liste-tab td{display:block;border:none;padding:3px 0}}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rd);font-size:.9rem;vertical-align:middle}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tx2);font-weight:650}
.tabelle{overflow-x:auto}.rolle{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--fl2);border:1px solid var(--rd);white-space:nowrap}
.rolle.hauptadmin{background:var(--akh);color:var(--ak);border-color:transparent}.rolle.admin{background:var(--grb);color:var(--gr);border-color:transparent}
.status{font-size:.8rem;color:var(--tx2)}.status.warn{color:var(--ws)}.status.gesperrt{color:var(--fe)}
.aktionen{display:flex;flex-wrap:wrap;gap:6px}.leise{color:var(--tx2);font-size:.85rem}
.pw-zeile{display:flex;gap:8px}.pw-zeile input{flex:1}
.zugang{margin-top:16px;padding:14px;border:1px dashed var(--rd2);border-radius:10px;background:var(--fl2);font-size:.92rem}.zugang:empty{display:none}
.zugang code{font-size:1rem;font-weight:700;background:var(--fl);padding:2px 6px;border-radius:5px;border:1px solid var(--rd)}
details.prot{margin-top:20px}details.prot summary{cursor:pointer;font-weight:650}
input[type=search],input[type=email]{width:100%;height:46px;padding:0 12px;border:1px solid var(--rd2);border-radius:8px;background:var(--fl);color:var(--tx);font:inherit}
textarea{width:100%;min-height:210px;padding:10px 12px;border:1px solid var(--rd2);border-radius:8px;background:var(--fl);color:var(--tx);font:.95rem/1.5 ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;resize:vertical}
textarea:focus,input[type=search]:focus{outline:none;border-color:var(--ak);box-shadow:0 0 0 3px var(--glueh)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--ak);margin:0;flex:none}
.kopf-links{display:flex;gap:8px;margin-left:6px}.kopf-links .knopf{white-space:nowrap;gap:.3em}
details.mehr{position:relative;display:inline-block}details.mehr>summary{list-style:none}details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary::after{content:"";width:6px;height:6px;margin-left:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.mehr-menue{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:190px;padding:6px;background:var(--fl);border:1px solid var(--rd);border-radius:10px;box-shadow:var(--sch)}
.mehr-menue button{display:block;width:100%;text-align:left;padding:9px 12px;border:none;background:none;color:var(--tx);font:inherit;font-size:.9rem;border-radius:7px;cursor:pointer}
.mehr-menue button:hover{background:var(--fl2)}.mehr-menue button.gefahr{color:var(--fe)}
.titelzeile{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;margin:0 0 18px}.titelzeile .text2{margin:4px 0 0;max-width:62ch}
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px}
.klassenleiste{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--rd2);background:var(--fl);color:var(--tx);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;max-width:100%}
.chip .zahl{font-size:.74rem;color:var(--tx2);font-weight:700;background:var(--fl2);border-radius:999px;padding:0 7px;min-width:22px;text-align:center}
.chip:hover{border-color:var(--ak);color:var(--ak)}.chip[aria-pressed=true]{background:var(--ak);border-color:var(--ak);color:var(--auf)}
.chip[aria-pressed=true] .zahl{background:rgba(255,255,255,.24);color:var(--auf)}.chip.neu{border-style:dashed;color:var(--tx2);background:transparent}
.chip.trenner{margin-left:6px}
.klassenkopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;margin:0 0 14px;border-radius:10px;background:var(--fl2);border:1px solid var(--rd)}
.klassenkopf h2{margin:0;font-size:1.1rem}.klassenkopf .knopfreihe{margin-left:auto}.klassenkopf[hidden]{display:none}
.werkzeug{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:4px}.werkzeug input[type=search]{flex:1 1 240px;width:auto}
.auswahlleiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.9rem;padding:6px 10px;border-radius:8px;background:var(--akh)}.auswahlleiste[hidden]{display:none}
.leer{padding:30px 12px;text-align:center;color:var(--tx2)}.leer[hidden]{display:none}
th.wahl,td.wahl{width:34px;padding-right:0}td.wer{min-width:180px}td.wer strong{overflow-wrap:anywhere}
.klasse-tag{display:inline-block;font-size:.8rem;font-weight:650;padding:2px 9px;border-radius:6px;background:var(--fl2);border:1px solid var(--rd);white-space:nowrap}
.eigen-zeile{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.eigen-zeile>div{flex:1 1 260px}.eigen-zeile label{margin-top:0}
dialog{border:1px solid var(--rd);border-radius:12px;background:var(--fl);color:var(--tx);box-shadow:var(--sch);padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto}
dialog.breit{width:min(880px,calc(100vw - 24px))}dialog::backdrop{background:rgba(8,14,22,.5)}
.dlg-kopf{padding:20px 22px 0}.dlg-kopf h2{margin:0 0 4px}.dlg-kopf p{margin:0;color:var(--tx2);font-size:.9rem}
.dlg-inhalt{padding:6px 22px 4px}.dlg-fuss{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:16px 22px 20px}
.dlg-fuss .links{margin-right:auto}
.wahl-liste label{display:flex;gap:12px;align-items:flex-start;font-weight:500;padding:12px 14px;border:1px solid var(--rd);border-radius:9px;margin:10px 0 0;cursor:pointer}
.wahl-liste label strong{display:block}.wahl-liste label span{color:var(--tx2);font-size:.88rem}
.wahl-liste label:has(input:checked){border-color:var(--ak);background:var(--akh)}
.hinweis{font-size:.86rem;color:var(--tx2);margin:8px 0 0}
.vorschau{max-height:46vh;overflow:auto;border:1px solid var(--rd);border-radius:9px;margin-top:12px}
.vorschau table th{position:sticky;top:0;background:var(--fl2)}.vorschau td.fehler{color:var(--fe);font-weight:600}
.vorschau code,.zugangsliste code{font-size:.95rem;font-weight:700}
.zugang .knopfreihe{margin-top:10px}
.druck{display:none}
@media(max-width:700px){.kopf-links .lang{display:none}.kopf-links{margin-left:auto}.kopf-innen .rechts{margin-left:0}
.titelzeile .knopfreihe{width:100%}.titelzeile .knopfreihe .knopf{flex:1;white-space:nowrap;padding:0 10px}
.mehr-menue{right:auto;left:0}
.klassenkopf .knopfreihe{margin-left:0;width:100%}
#liste-tab tr{position:relative;padding:12px 0 12px 32px}#liste-tab td.wahl{position:absolute;left:0;top:14px;width:auto}
#liste-tab td[data-titel]{display:flex;gap:8px;font-size:.88rem}#liste-tab td[data-titel]::before{content:attr(data-titel);color:var(--tx2);min-width:122px}
#liste-tab td.akt{padding-top:8px}.dlg-kopf,.dlg-inhalt,.dlg-fuss{padding-left:16px;padding-right:16px}}
@media(max-width:420px){.kopf-links .knopf,.kopf-innen .rechts .knopf{padding:0 8px}}
@media print{
@page{margin:12mm}
body{background:#fff!important;color:#000}
body>*:not(#druck){display:none!important}
#druck{display:block;font:11pt/1.4 system-ui,Arial,sans-serif;color:#000}
#druck h1{font-size:15pt;margin:0 0 2mm}#druck .unter{font-size:9pt;color:#333;margin:0 0 5mm}
#druck .zettel-raster{display:grid;grid-template-columns:1fr 1fr;gap:0}
#druck .zettel{border:1px dashed #888;padding:5mm 6mm;break-inside:avoid;page-break-inside:avoid}
#druck .zettel .kl{font-size:9pt;color:#444;text-transform:uppercase;letter-spacing:.04em}
#druck .zettel .nm{font-size:12.5pt;font-weight:700;margin:1mm 0 2.5mm}
#druck .zettel dl{display:grid;grid-template-columns:auto 1fr;gap:1mm 4mm;margin:0}
#druck .zettel dt{color:#444;font-size:9.5pt}#druck .zettel dd{margin:0;font:700 11.5pt ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
#druck .zettel .tipp{font-size:8.5pt;color:#444;margin-top:2.5mm}}