/* KI-Schulung — Grundgestaltung. Markenfarben aus dem Zetcore-Auftritt. */
:root{
  --ink:#14171a; --ink-2:#1b1f24; --ink-3:#242a32;
  --teal:#0e6f6b; --teal-hell:#2dd4bf; --cream:#f2f0ec;
  --muted:#9aa4ad; --bad:#ff6b5e; --ok:#2dd4bf;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{
  background:var(--ink);color:var(--cream);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;min-height:100vh;display:flex;flex-direction:column;
}
h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:750;letter-spacing:-.02em;line-height:1.2}
h2{font-size:1.4rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
a{color:var(--teal-hell)}
main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:2rem 1.2rem 3rem}

#kopf{background:rgba(20,23,26,.95);border-bottom:1px solid var(--ink-3);position:sticky;top:0;z-index:20}
#kopf .inner{max-width:960px;margin:0 auto;padding:.75rem 1.2rem;display:flex;gap:1rem;align-items:center}
#kopf .marke{font-weight:750}
#kopf .wer{margin-left:auto;color:var(--muted);font-size:.85rem}
#kopf .abmelden{font-size:.82rem;color:var(--muted)}

footer{border-top:1px solid var(--ink-3);padding:1rem 1.2rem;text-align:center;
       font-size:.76rem;color:var(--muted)}

.anmeldebox{max-width:420px;margin:4vh auto 0}
.anmeldebox .logo{height:56px;width:auto;margin-bottom:1.4rem;display:block}
.muted{color:var(--muted)}
.klein{font-size:.8rem;margin-top:.3rem}

.feld{margin:1rem 0}
.feld label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.3rem}
.feld input{width:100%;background:var(--ink-3);border:1px solid #333a42;border-radius:9px;
            padding:.7rem .9rem;color:var(--cream);font:inherit}
.feld input:focus{outline:0;border-color:var(--teal-hell)}

.btn{display:inline-block;background:var(--teal);color:#fff;border:1px solid transparent;
     padding:.72rem 1.5rem;border-radius:10px;font:inherit;font-weight:700;cursor:pointer;
     text-decoration:none;transition:.15s}
.btn:hover{background:#0f817c}
.btn.ghost{background:transparent;border-color:#333a42;color:var(--cream)}

.fehler{color:var(--bad);font-size:.9rem;margin:.6rem 0}
.erfolg{color:var(--ok);font-size:.95rem;margin:.6rem 0}
.hinweis{margin-top:1.4rem;font-size:.82rem;color:var(--muted);line-height:1.5}

.karte{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r);padding:1.3rem}
.karte + .karte{margin-top:1rem}
code{background:var(--ink-3);padding:.1rem .35rem;border-radius:4px;font-size:.9em}

/* ── Verwaltung ─────────────────────────────────────────── */
.kennzahlen{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:.6rem}
.kennzahlen>div{display:flex;flex-direction:column}
.kennzahlen .zahl{font-size:2rem;font-weight:800;color:var(--teal-hell);line-height:1.1;
                  font-variant-numeric:tabular-nums}

.tabellenrahmen{overflow-x:auto;margin-top:.6rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
   color:var(--muted);font-weight:600;padding:.5rem .6rem;border-bottom:1px solid var(--ink-3)}
td{padding:.6rem;border-bottom:1px solid var(--ink-3);vertical-align:middle}
tr.inaktiv{opacity:.45}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.85rem}
.rolle{font-size:.68rem;background:var(--teal);color:#fff;border-radius:4px;
       padding:.08rem .4rem;margin-left:.4rem;vertical-align:middle}
.stand{font-size:.82rem;padding:.15rem .5rem;border-radius:5px;white-space:nowrap}
.stand.gut{background:rgba(45,212,191,.14);color:var(--teal-hell)}
.stand.laeuft{background:rgba(255,180,84,.13);color:#ffb454}
.stand.offen{color:var(--muted)}
.aktionen{display:flex;gap:.35rem;flex-wrap:wrap}
.aktionen form{margin:0}
.mini{background:transparent;border:1px solid #333a42;color:var(--cream);border-radius:6px;
      padding:.25rem .55rem;font:inherit;font-size:.76rem;cursor:pointer}
.mini:hover{border-color:var(--teal-hell);color:var(--teal-hell)}
/* Der Nachweis-Knopf ist ein Link, soll aber aussehen wie die Knöpfe daneben. */
a.mini{display:inline-block;text-decoration:none;line-height:1.45}

.reihe-form{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.reihe-form .feld{margin:0;flex:1;min-width:170px}

.passwort{font-family:ui-monospace,Consolas,monospace;font-size:1.5rem;letter-spacing:.06em;
          background:var(--ink-3);border-radius:8px;padding:.7rem 1rem;margin:.5rem 0;
          user-select:all;display:inline-block}
select{width:100%;background:var(--ink-3);border:1px solid #333a42;border-radius:9px;
       padding:.7rem .9rem;color:var(--cream);font:inherit}
select:focus{outline:0;border-color:var(--teal-hell)}
textarea{width:100%;background:var(--ink-3);border:1px solid #333a42;border-radius:9px;
         padding:.7rem .9rem;color:var(--cream);font:inherit;line-height:1.5;resize:vertical}
textarea:focus{outline:0;border-color:var(--teal-hell)}
input[type=file]{width:100%;background:var(--ink-3);border:1px solid #333a42;border-radius:9px;
                 padding:.55rem .7rem;color:var(--cream);font:inherit;font-size:.9rem}

/* Ersatz, solange kein Logo hinterlegt ist */
.marke-text{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--cream);
            background:var(--teal);padding:.3rem .7rem;border-radius:7px;white-space:nowrap}
#zert-blatt .marke-text{background:var(--teal);color:#fff;font-size:1.3rem;
                        display:inline-block;margin-bottom:1.2rem}