/*
 * SimpliPass – Schülerausweise · Version 0.4 · Build d4f9d27c · 08.11.2026
 * © 2026 Haiko Korb. Alle Rechte vorbehalten.
 * Vervielfältigung und Bearbeitung dieses Programms sind ohne Zustimmung des Urhebers nicht gestattet (§ 69c UrhG).
 */
/* =====================================================================
   SimpliPass – Grundgerüst: Farben, Layout, Bedienelemente, Tabellen, Dialoge
   Angelehnt an SimpliNot (src/css/basis.css) – dieselbe Familie, eigene Farbe.
   ===================================================================== */
:root{
  --bg:#f4f6f6; --panel:#ffffff; --panel2:#f9fbfb; --ink:#1b2a2c; --ink2:#566668;
  --line:#dbe3e3; --line2:#edf2f2;
  --acc:#0E7C7B; --acc-ink:#ffffff; --acc-soft:#e3f2f1;
  --ok:#1a7f4b; --ok-soft:#e4f4ea;
  --warn:#8f5a05; --warn-soft:#fdf3e0;
  --bad:#b3261e; --bad-soft:#fdeceb;
  --info:#2d5fa8; --info-soft:#e8effa;
  --grau:#6b7476; --grau-soft:#eef0f0;
  --koralle:#E45D57;
  --markzeile:#e9f5f4;
  --r:10px; --sh:0 1px 2px rgba(20,40,40,.07), 0 4px 14px rgba(20,40,40,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111819; --panel:#192223; --panel2:#151d1e; --ink:#e6eeee; --ink2:#9db0b1;
    --line:#29393a; --line2:#213031;
    --acc:#4cc3bf; --acc-ink:#062120; --acc-soft:#173332;
    --ok:#5fd398; --ok-soft:#142a20;
    --warn:#e8b45c; --warn-soft:#2d2415;
    --bad:#f0837a; --bad-soft:#2e1a19;
    --info:#86b0f0; --info-soft:#172338;
    --grau:#a3adae; --grau-soft:#222b2c;
    --markzeile:#1b2c2c;
    --sh:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font:15px/1.45 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;font-weight:650}
h1{font-size:1.35rem} h2{font-size:1.15rem} h3{font-size:1rem} h4{font-size:.9rem}
p{margin:0 0 .7em}
a{color:var(--acc)}
small,.small{font-size:.82rem;color:var(--ink2)}
.muted{color:var(--ink2)}
.mono{font-variant-numeric:tabular-nums}
.hide{display:none !important}
[hidden]{display:none !important}

/* ---------- Bedienelemente ---------- */
button,.knopf{font:inherit;font-size:.92rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:8px;padding:6px 12px;min-height:34px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  justify-content:center;text-decoration:none;white-space:nowrap}
button:hover{border-color:var(--acc);background:var(--acc-soft)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
button.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.danger{color:var(--bad);border-color:var(--bad)}
button.danger:hover{background:var(--bad-soft)}
button.leise{border-color:transparent;background:transparent}
button.leise:hover{border-color:var(--line)}
button.sm{min-height:28px;padding:3px 9px;font-size:.84rem}
button:disabled{opacity:.5;cursor:default}
button:disabled:hover{border-color:var(--line);background:var(--panel)}
input,select,textarea{font:inherit;font-size:.95rem;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:8px;padding:6px 9px;min-height:34px;max-width:100%}
textarea{min-height:60px;resize:vertical;line-height:1.35}
input[type=checkbox],input[type=radio]{min-height:0;width:17px;height:17px;accent-color:var(--acc);margin:0;vertical-align:middle}
input[type=color]{padding:2px;width:52px}
input.fehler,select.fehler{border-color:var(--bad);background:var(--bad-soft)}
label.feld{display:flex;flex-direction:column;gap:3px;min-width:0}
label.feld > span{font-size:.82rem;color:var(--ink2)}
label.haken{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer}
.zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.zeile > *{flex:0 1 auto}
.wachs{flex:1 1 auto}
.abstand{height:10px}

/* ---------- Rahmen ---------- */
#app{display:flex;flex-direction:column;min-height:100%}
header.kopf{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sh)}
.kopfleiste{display:flex;align-items:center;gap:8px;padding:8px 14px;min-height:54px;flex-wrap:wrap}
.marke{font-weight:700;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2);
  color:inherit;padding:2px 10px 2px 6px;border-radius:9px;min-height:38px}
.marke svg{width:28px;height:28px}
.marke .ver{font-weight:500;font-size:.75rem;color:var(--ink2)}
.reiter{display:flex;gap:4px;margin-left:6px}
.reiter button{border-color:transparent;background:transparent;font-weight:600;color:var(--ink2)}
.reiter button.an{background:var(--acc-soft);color:var(--acc);border-color:var(--acc-soft)}
.kopfleiste .luecke{flex:1 1 auto}
.speicherstand{font-size:.8rem;color:var(--ink2);display:flex;align-items:center;gap:6px;max-width:42ch}
.speicherstand .punkt{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.speicherstand.warn .punkt{background:var(--warn)}
.speicherstand.bad .punkt{background:var(--bad)}
.speicherstand.laeuft .punkt{background:var(--info)}
main#haupt{padding:16px 18px 40px;max-width:1400px;width:100%;margin:0 auto}
.karte-panel,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;margin-bottom:16px}
.panel h2{margin-bottom:.6em}
.hinweis{border-left:4px solid var(--info);background:var(--info-soft);padding:9px 12px;border-radius:6px;margin:8px 0;font-size:.9rem}
.hinweis.warn{border-color:var(--warn);background:var(--warn-soft)}
.hinweis.bad{border-color:var(--bad);background:var(--bad-soft)}
.hinweis.ok{border-color:var(--ok);background:var(--ok-soft)}

/* ---------- Schloss (Startseite vor dem Entsperren) ---------- */
.schloss{min-height:100%;display:flex;align-items:center;justify-content:center;padding:30px 16px}
.schloss .kasten{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:26px 28px}
.schloss .titel{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.schloss .titel svg{width:56px;height:56px}
.schloss .titel h1{margin:0;font-size:1.5rem}
.schloss .titel .unter{color:var(--ink2);font-size:.9rem}
.schloss .wege{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.schloss .wege button{justify-content:flex-start;min-height:44px;font-size:.98rem;white-space:normal;text-align:left}
.schloss .fuss{margin-top:18px;font-size:.78rem;color:var(--ink2);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pwgut{font-size:.82rem;margin-top:4px}
.pw-rot{color:var(--bad)} .pw-gelb{color:var(--warn)} .pw-gruen{color:var(--ok)}

/* ---------- Tabellen ---------- */
.tabellenkasten{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);max-height:calc(100vh - 290px);min-height:200px}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:6px 9px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:middle}
thead th{position:sticky;top:0;background:var(--panel2);z-index:2;font-weight:650;font-size:.84rem;color:var(--ink2);white-space:nowrap;border-bottom:1px solid var(--line)}
thead th.sortierbar{cursor:pointer;user-select:none}
thead th.sortierbar:hover{color:var(--acc)}
thead th .pfeil{font-size:.75em;margin-left:3px}
tbody tr.klickbar{cursor:pointer}
tbody tr.klickbar:hover{background:var(--markzeile)}
tbody tr.gewaehlt{background:var(--acc-soft)}
tbody tr.abgegangen td{color:var(--ink2)}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums}
td.mono{font-variant-numeric:tabular-nums}
td.knapp,th.knapp{width:1%;white-space:nowrap}
.leer{padding:26px;text-align:center;color:var(--ink2)}

/* ---------- Marken (Status) ---------- */
.marke-s{display:inline-block;font-size:.78rem;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;
  background:var(--grau-soft);color:var(--grau);border:1px solid transparent}
.marke-s.ok{background:var(--ok-soft);color:var(--ok)}
.marke-s.warn{background:var(--warn-soft);color:var(--warn)}
.marke-s.bad{background:var(--bad-soft);color:var(--bad)}
.marke-s.info{background:var(--info-soft);color:var(--info)}
.marke-s.leise{background:transparent;border-color:var(--line);color:var(--ink2);font-weight:500}

/* ---------- Hinweiskacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:14px}
.kachel{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:10px 14px;min-height:74px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--sh);text-align:left;white-space:normal;cursor:pointer}
.kachel .zahl{font-size:1.6rem;font-weight:700;line-height:1.1}
.kachel .wort{font-size:.86rem;font-weight:600}
.kachel .dazu{font-size:.76rem;color:var(--ink2)}
.kachel.bad .zahl{color:var(--bad)} .kachel.warn .zahl{color:var(--warn)} .kachel.info .zahl{color:var(--info)}
.kachel.null{opacity:.55;box-shadow:none}
.kachel.null .zahl{color:var(--ink2)}
.kachel.an{outline:2px solid var(--acc);outline-offset:-1px;background:var(--acc-soft)}

/* ---------- Werkzeugleiste über der Liste ---------- */
.werkzeug{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.werkzeug input[type=search]{min-width:240px;flex:1 1 240px}
.werkzeug .zaehler{font-size:.84rem;color:var(--ink2)}

/* ---------- Dialoge ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,25,25,.42);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:var(--panel);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.25);width:100%;max-width:560px;max-height:calc(100vh - 36px);
  overflow:auto;padding:20px 22px;position:relative}
.modal.breit{max-width:980px}
.modal.sehrbreit{max-width:1240px}
.modal h2{padding-right:30px}
.modal .fuss{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;position:sticky;bottom:-20px;
  background:var(--panel);padding:10px 0 4px}
.modalzu{position:absolute;top:10px;right:10px;width:32px;height:32px;min-height:0;padding:0;border-radius:50%;font-size:1.2rem;line-height:1;border-color:transparent;background:transparent}
.modalzu:hover{border-color:var(--line)}

/* ---------- Meldungen ---------- */
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#1d2b2c;color:#fff;padding:9px 16px;border-radius:9px;box-shadow:0 4px 18px rgba(0,0,0,.25);font-size:.9rem;max-width:min(640px,90vw)}
.toast.ok{background:var(--ok)} .toast.bad{background:var(--bad)} .toast.warn{background:#8f5a05}

/* ---------- Abschnitte in den Einstellungen ---------- */
/* Kurzauftrag 0.3: eine Spalte mit fester Höchstbreite, jeder Abschnitt über die volle Breite; Datei | Protokoll gleich hoch */
.einst{display:flex;flex-direction:column;gap:16px;max-width:1360px;margin:0 auto}
.einst .panel{margin:0;padding:18px 22px}
.einst .panel > h2{margin-bottom:2px}
.einst .erkl{color:var(--ink2);font-size:.86rem;margin:0 0 14px}
.einst .knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.einst-paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.einst-paar > .panel{display:flex;flex-direction:column;min-width:0}
.datei-gross{margin:2px 0 8px}
.datei-gross .dateiname{font-size:1.35rem;font-weight:650;overflow-wrap:anywhere}
.datei-gross .sj{font-size:1.05rem;color:var(--ink2)}
.protokoll-rahmen{position:relative;flex:1 1 auto;min-height:190px}
.lz-eingaben{display:grid;grid-template-columns:minmax(240px,2fr) minmax(120px,.7fr) minmax(200px,1fr);gap:12px;align-items:end}
.lz-eingaben input{width:100%}
.lz-titel{margin:16px 0 6px;font-size:.92rem}
.lz-kasten{overflow-x:auto}
table.lzt.quer{width:100%;min-width:640px;border-collapse:separate;border-spacing:3px 2px;table-layout:fixed}
table.lzt.quer th,table.lzt.quer td{text-align:center;padding:6px 4px;white-space:nowrap;border:0;border-radius:5px}
table.lzt.quer .lz-kopf{text-align:left;width:96px;color:var(--ink2);font-weight:600;font-size:.84rem;background:none}
table.lzt.quer .lz-band td{font-size:.78rem;font-weight:600;padding:3px 4px}
table.lzt.quer .lz-klassen th{font-weight:700}
.lz-a0{background:var(--acc-soft)} .lz-a1{background:var(--info-soft)} .lz-a2{background:var(--ok-soft)} .lz-a3{background:var(--grau-soft)}
.lz-hand{background:var(--warn-soft);color:var(--warn)}
.lzt .kurz{display:none}
.fg-bereich{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:22px;align-items:start}
.fg-bereich h3{margin:0 0 4px}
table.fg-tabelle td{vertical-align:middle;padding-top:3px;padding-bottom:3px}
table.fg-tabelle input{width:100%;min-width:140px}
ol.fg-reihe{list-style:none;margin:8px 0 0;padding:0;counter-reset:fg}
ol.fg-reihe li{display:flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--line2);border-radius:7px;margin:3px 0;background:var(--panel2);counter-increment:fg}
ol.fg-reihe li::before{content:counter(fg) ".";color:var(--ink2);font-size:.8rem;min-width:1.6em}
.fg-person{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.fg-person input{min-width:180px}
.trennknopf{margin-left:8px;min-height:22px;padding:1px 7px;font-size:.78rem;font-weight:400}
.modal .fuss .loeschen{margin-right:auto}
ol.druckschritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
ol.druckschritte li{display:flex;gap:12px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:12px 14px}
ol.druckschritte .nr{flex:none;width:28px;height:28px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:flex;align-items:center;justify-content:center;font-weight:700}
ol.druckschritte p{margin:4px 0 0;font-size:.86rem;color:var(--ink2)}
.druckfuss{margin:10px 0 0}
#p-ueber .neu-in{margin:2px 0 6px;font-size:1rem}
.zwei-spalten .liste-einfach{columns:2;column-gap:32px}
.zwei-spalten .liste-einfach li{break-inside:avoid;margin:0 0 .5em}
@media (max-width:900px){
  .einst-paar,.lz-eingaben,ol.druckschritte,.fg-bereich{grid-template-columns:1fr}
  .zwei-spalten .liste-einfach{columns:1}
  .lzt .lang{display:none} .lzt .kurz{display:inline}
  table.lzt.quer{min-width:0} table.lzt.quer .lz-kopf{width:72px}
}
.liste-einfach{margin:.3em 0 .6em;padding-left:1.2em}
.liste-einfach li{margin:.15em 0}
details.klapp{border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin:8px 0;background:var(--panel2)}
details.klapp > summary{cursor:pointer;font-weight:600;font-size:.9rem}
.protokoll{position:absolute;inset:0;overflow:auto;font-size:.84rem;border:1px solid var(--line2);border-radius:8px;padding:2px 10px;background:var(--panel2)}
.protokoll .eintrag{display:grid;grid-template-columns:9.2em minmax(0,1fr);gap:10px;padding:4px 0;border-bottom:1px solid var(--line2)}
.protokoll .eintrag:last-child{border-bottom:0}
.protokoll .zeit{color:var(--ink2);font-variant-numeric:tabular-nums;font-size:.78rem;white-space:nowrap;padding-top:1px}

/* ---------- Zweispaltig im Schülerfenster ---------- */
.zwei{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:18px;align-items:start}
@media (max-width:820px){ .zwei{grid-template-columns:1fr} }
dl.daten{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 10px}
dl.daten dt{color:var(--ink2);font-size:.86rem}
dl.daten dd{margin:0}

/* ---------- Einlesen ---------- */
table.vorschau td{font-size:.84rem;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
table.vorschau th select{font-size:.82rem}
tr.problem td{background:var(--bad-soft)}
.abgleichzahlen{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.abgleichzahlen .marke-s{font-size:.86rem;padding:3px 10px}
.diff{white-space:nowrap}
.diff .alt{color:var(--bad);text-decoration:line-through;text-decoration-thickness:1px}
.diff .neu{color:var(--ok);font-weight:600}

/* ---------- Liste und Schülerfenster ---------- */
.leer-start{max-width:640px}
.werkzeug select{min-width:150px}
table.verlauf td{font-size:.86rem}
.vorschauplatz{min-width:0}
table.lzt{width:auto;min-width:240px}
table.lzt td,table.lzt th{padding:3px 12px}
.naechster{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--panel2);margin:6px 0 4px}

/* ---------- Karten einlesen ---------- */
.kartenaufruf{border:2px dashed var(--acc);background:var(--acc-soft);border-radius:12px;padding:18px 20px;margin:10px 0;text-align:center}
.kartenaufruf .gross{font-size:1.25rem;margin-bottom:4px}

/* ---------- Merkliste, Druckaufträge (0.2) ---------- */
.kachel.merk .zahl{color:var(--acc)}
table.merkliste tr.erledigt td{color:var(--ink2)}
table.merkliste tr.erledigt td:nth-child(5) button{text-decoration:line-through}
button.kopieren{font-variant-numeric:tabular-nums;letter-spacing:.02em}
details.auftrag{background:var(--panel)}
table.zuwem td{padding:6px 10px}

/* Gruppieren (0.2, Teil D) – die Trennzeile wie in SimpliNot (.klassentrenn, .trennfix, .gruppentrenn aus src/css/basis.css):
   leise, über die ganze Breite; der Inhalt klebt links beim waagrechten Scrollen. z-index unter der festen Kopfzeile. */
.klassentrenn td{background:var(--panel2);color:var(--ink2);font-size:.85rem;font-weight:600;padding:3px 10px;border-bottom:1px solid var(--line)}
.klassentrenn td > .trennfix{position:sticky;left:0;display:inline-flex;align-items:center;gap:8px;max-width:100%;z-index:1}
.gruppentrenn td{color:var(--ink);border-top:2px solid var(--line)}
.klassentrenn.abgelaufen td{color:var(--bad)}
.trennklapp{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;box-shadow:none}
.trennklapp .pfeil{display:inline-block;width:1em}
.gruppierwahl{display:inline-flex;align-items:center;gap:6px;color:var(--ink2)}
.gruppierwahl select{min-width:120px}

/* Schuljahreswechsel (0.2, Teil E): die Checkliste, der Dateiname oben, die Kachel */
.dateiinfo{font-size:.8rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.kachel.schuljahr .zahl{color:var(--acc)}
ol.schritte{margin:10px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
ol.schritte li{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
ol.schritte li.fertig{background:var(--panel2)}
ol.schritte li .kopf{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px}
ol.schritte li button{margin-top:6px}

/* ---------- Lizenz (Bauauftrag 0.4) ---------- */
.knopf.sm{min-height:28px;padding:3px 9px;font-size:.84rem}
.knopf:hover{border-color:var(--acc);background:var(--acc-soft)}
button.lizenzkopf{min-height:0;cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;padding:2px 9px;border:1px solid transparent}
button.lizenzkopf.leise{border-color:var(--line)}
button.lizenzkopf:hover{border-color:var(--acc)}
.liz-start{margin-top:12px}
.liz-stand{font-size:.98rem;margin:0 0 10px}
.liz-stand.test b,.liz-stand.vorbei b{color:var(--bad)}
.liz-daten{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 18px;margin:0 0 10px;font-size:.92rem}
.liz-daten .liz-k{color:var(--ink2)}
.liz-einfuegen{margin-top:10px}
.liz-einfuegen textarea{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem}
.liz-danach{margin:6px 0 0}
.liz-adresse{user-select:all}
.liz-fehlt{color:var(--bad)}

/* =====================================================================
   SimpliPass – die Karte (Vorschau und Druck). Maße und Schriften stehen in
   KARTE_LAYOUT (karte.js) und kommen als Stil an die Elemente; hier nur, was
   für alle gleich ist.
   ===================================================================== */
.karte{position:relative;overflow:hidden;isolation:isolate;background:#fff;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact;
  text-rendering:geometricPrecision;font-kerning:normal}
.karte *{box-sizing:border-box}
/* Seit 0.3 (Teil A) steht jedes Element einer Vorlage für sich an seiner Stelle (layout.js, vorlageHtml) */
.karte .k-el{position:absolute}
.karte .k-text{display:flex;flex-direction:column;overflow:hidden}
.karte .k-inhalt{display:flow-root}            /* der Abstand über der ersten Zeile zählt zur Höhe (fällt nicht hindurch) */
.karte .k-text > .k-inhalt{flex:none}
.karte .k-spalte{overflow:hidden}
.karte .k-zeile{white-space:nowrap;overflow:hidden}
.karte .passen{white-space:nowrap;overflow:hidden}
.karte .k-bild{object-fit:contain}
.karte .k-hgbild{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}
.karte .k-platz{border:1px dashed #b9c0c6;color:#98a2aa;font:8pt Arial,sans-serif;display:flex;align-items:center;justify-content:center;border-radius:2px;overflow:hidden;text-align:center}
.karte .k-linie{height:0}
.karte .k-geist{opacity:.35}

/* ---------- Vorschau ---------- */
.kartenvorschau{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.kartenvorschau figure{margin:0}
.kartenrahmen{zoom:1.55;display:inline-block;border-radius:3.18mm;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.12);background:#fff}
.kartenvorschau.klein{flex-direction:column;gap:10px}
.kartenvorschau.klein .kartenrahmen{zoom:1.1}
#einst-vorschau .kartenrahmen{zoom:1.45}          /* in den Einstellungen: Vorder- und Rückseite nebeneinander (Kurzauftrag 0.3) */
.kartenvorschau figcaption{font-size:.78rem;color:var(--ink2);text-align:center;margin-top:3px}
.kartenbereich{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:22px;align-items:start}
@media (max-width:1100px){ .kartenbereich{grid-template-columns:1fr} }
.kartenfelder{display:flex;flex-direction:column;gap:8px}
.bildzeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line2)}

/* =====================================================================
   SimpliPass – der Designeditor (Bauauftrag 0.3, Teil B): links die Karte groß,
   rechts die Eigenschaften. Die Bühne ist mit CSS-zoom vergrößert – alles darin
   rechnet in mm wie die Karte; --px ist ein Bildschirmpunkt, --griff die Größe
   der Anfasser (beide setzt editor.js je nach Zoom).
   ===================================================================== */
.overlay.layouteditor{padding:10px}
.overlay.layouteditor .modal{max-width:none;width:min(1560px,99vw);height:calc(100vh - 20px);max-height:none;display:flex;flex-direction:column;
  padding:12px 16px 8px;overflow:hidden}
.ed-kopf{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ed-kopf h2{margin:0 10px 0 0;padding:0}
.ed-k{display:flex;align-items:center;gap:6px;font-size:.88rem;color:var(--ink2)}
.ed-kopf label.haken{margin:0;font-size:.88rem}
.ed-menue{position:relative}
.ed-liste{position:absolute;top:100%;left:0;z-index:5;display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--sh);padding:5px;margin-top:4px;min-width:170px}
.ed-liste button{justify-content:flex-start;border-color:transparent}
.ed-haupt{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;min-height:0;padding-top:10px}
.ed-links{overflow:auto;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:28px 30px}
.ed-tipp{max-width:900px;margin-top:18px}
.ed-rechts{overflow:auto;min-height:0;padding:0 4px 20px 2px}
.ed-rechts h3{margin:4px 0 2px}
.ed-rechts h4{margin:14px 0 6px;font-size:.86rem;color:var(--ink2);text-transform:none;border-top:1px solid var(--line2);padding-top:10px}
.ed-rechts .hinweis{margin:8px 0}
.ed-f{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;align-items:center;margin:5px 0;font-size:.88rem}
.ed-f > span:first-child{color:var(--ink2)}
.ed-w{display:flex;align-items:center;gap:6px;min-width:0}
.ed-w input[type=number]{width:96px}
.ed-w input.ed-kurz{width:70px}
.ed-w input[type=range]{flex:1;min-width:60px}
.ed-w select,.ed-w input:not([type]){width:100%}
.ed-f.ed-voll{grid-template-columns:1fr}
.ed-f.ed-voll textarea{width:100%}
.ed-gitter{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.ed-gitter .ed-f{grid-template-columns:52px minmax(0,1fr)}
.ed-gitter .ed-w input[type=number]{width:84px}
.ed-knoepfe{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.ed-breit{width:100%;margin-top:8px}
.ed-zeilen{margin:6px 0 8px;padding-left:22px}
.ed-zeilen li.aus button{opacity:.55}
.ed-elemente-kopf{margin-top:18px !important;border-top:1px solid var(--line);padding-top:12px}
.ed-elemente{list-style:none;margin:0;padding:0}
.ed-elemente li{display:flex;align-items:center;gap:6px;padding:1px 4px;border-radius:6px}
.ed-elemente li.kind{padding-left:26px}
.ed-elemente li.an{background:var(--acc-soft)}
.ed-elemente li.aus button{opacity:.5;text-decoration:line-through}
.ed-elemente li button{flex:1;justify-content:flex-start;text-align:left;white-space:normal}

/* ---------- Die Bühne ---------- */
.ed-buehne{position:relative;width:85.6mm;height:54mm;margin:2mm;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.ed-karte{position:absolute;left:0;top:0;z-index:1;box-shadow:0 0 0 var(--px) rgba(0,0,0,.28),0 calc(var(--px) * 2) calc(var(--px) * 10) rgba(0,0,0,.16)}
.ed-karte [data-el]{cursor:move}
.ed-karte [data-el]:hover{outline:var(--px) solid rgba(14,124,123,.55);outline-offset:0}
.ed-karte .ed-zeile-gewaehlt{outline:calc(var(--px) * 1.5) dashed var(--acc);outline-offset:calc(var(--px) * -1.5)}
.ed-ueber{position:absolute;left:0;top:0;width:85.6mm;height:54mm;pointer-events:none;z-index:2}
.ed-sicher{position:absolute;left:1mm;top:1mm;right:1mm;bottom:1mm;border:var(--px) dashed rgba(200,40,40,.6)}
.ed-auswahl{position:absolute;outline:calc(var(--px) * 2) solid var(--acc);outline-offset:0}
.ed-auswahl.ed-spalte{outline-style:dashed}
.ed-griff{position:absolute;width:var(--griff);height:var(--griff);background:#fff;border:calc(var(--px) * 1.5) solid var(--acc);border-radius:calc(var(--px) * 2);
  pointer-events:auto;transform:translate(-50%,-50%);box-sizing:border-box}
.ed-griff[data-g=nw]{left:0;top:0;cursor:nwse-resize}   .ed-griff[data-g=n]{left:50%;top:0;cursor:ns-resize}
.ed-griff[data-g=ne]{left:100%;top:0;cursor:nesw-resize} .ed-griff[data-g=e]{left:100%;top:50%;cursor:ew-resize}
.ed-griff[data-g=se]{left:100%;top:100%;cursor:nwse-resize} .ed-griff[data-g=s]{left:50%;top:100%;cursor:ns-resize}
.ed-griff[data-g=sw]{left:0;top:100%;cursor:nesw-resize} .ed-griff[data-g=w]{left:0;top:50%;cursor:ew-resize}
.ed-hilf-x{position:absolute;top:-2mm;bottom:-2mm;width:0;border-left:var(--px) solid #d6336c}
.ed-hilf-y{position:absolute;left:-2mm;right:-2mm;height:0;border-top:var(--px) solid #d6336c}
@media (max-width:1100px){ .ed-haupt{grid-template-columns:1fr;grid-template-rows:minmax(300px,1fr) auto} .ed-rechts{max-height:40vh} }

/* =====================================================================
   SimpliPass – Druck: je Ausweis zwei Seiten im Kartenformat, ohne Rand.
   Im Bildschirm bleibt die Druckwurzel unsichtbar (aber gesetzt, damit
   kartePassen messen kann); im Druck ist sie das Einzige, was zu sehen ist.
   ===================================================================== */
@page{size:85.6mm 54mm;margin:0}
#druckwurzel{position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none}
table.druckliste{width:auto;margin-top:6px}
table.druckliste td{padding:3px 10px 3px 0;border:0}
@media print{
  html,body{background:#fff !important;height:auto;margin:0;padding:0}
  body > *:not(#druckwurzel){display:none !important}
  #druckwurzel{position:static;left:auto;visibility:visible}
  .druckseite{width:85.6mm;height:54mm;overflow:hidden;break-after:page;page-break-after:always;break-inside:avoid}
  .druckseite:last-child{break-after:auto;page-break-after:auto}
  .druckseite .karte{border-radius:0}
}
/* Die Marke der Testversion (Bauauftrag 0.4): quer und halbtransparent über der Vorderseite, im Druck und im PDF.
   Sie liegt über der Karte (eigene Ebene), fängt keine Klicks und wird nicht vermessen (kartePassen sucht .karte).
   Halbtransparent über die Farbe, nicht über opacity – die legte die Marke im PDF in eine eigene Gruppe. */
.druckseite{position:relative}
.lizenzmarke{position:absolute;left:0;top:0;width:85.6mm;height:54mm;display:flex;align-items:center;justify-content:center;
  overflow:hidden;pointer-events:none;z-index:5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.lizenzmarke span{transform:rotate(-24deg);font:700 9.5mm/1 Arial,Helvetica,sans-serif;letter-spacing:.5mm;text-transform:uppercase;
  white-space:nowrap;color:rgba(198,40,40,.45);border:.7mm solid currentColor;border-radius:2mm;padding:1.6mm 3mm 1.2mm}