/* ASP Control Center – Oberflaeche des Verwaltungsportals.
   Ein Werkzeug, kein Prospekt: dicht, ruhig, gut lesbar bei langer Benutzung. */

:root{
  --grund:#f4f5f8; --flaeche:#fff; --flaeche2:#eceef3;
  --tinte:#14171f; --tinte2:#414957; --tinte3:#6b7382;
  --linie:#d9dde5; --linie2:#b9c0cc;
  --akzent:#2f66c4; --akzent-hell:#e3ebfa; --akzent-dunkel:#204a92;
  --gut:#2f7d32; --gut-hell:#e4f0e4;
  --warn:#8a6100; --warn-hell:#f8efd9;
  --fehler:#b03a2e; --fehler-hell:#f8e3e0;
  --schrift:"Segoe UI",system-ui,-apple-system,sans-serif;
  --fest:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --grund:#0f1117; --flaeche:#171b24; --flaeche2:#1f2430;
    --tinte:#e7eaf0; --tinte2:#b3bbc9; --tinte3:#848d9c;
    --linie:#2a3040; --linie2:#3b4356;
    --akzent:#6fa3f2; --akzent-hell:#1c2941; --akzent-dunkel:#a6c6f8;
    --gut:#74c063; --gut-hell:#1a2a1b;
    --warn:#dfae57; --warn-hell:#2e2717;
    --fehler:#e58175; --fehler-hell:#331d1a;
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--schrift);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1{font-size:1.55rem;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
h2{font-size:1.15rem;font-weight:600;margin:32px 0 10px}
h3{font-size:1rem;font-weight:600;margin:0 0 8px}
p{margin:0 0 10px}
a{color:var(--akzent-dunkel)}
code{font-family:var(--fest);font-size:.9em;background:var(--flaeche2);
  padding:1px 5px;border-radius:3px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:4px}

/* Kopf */
.kopf{background:var(--flaeche);border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;
  align-items:center;gap:26px;min-height:56px;flex-wrap:wrap}
.marke{text-decoration:none;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.marke-a{color:var(--akzent)}
.marke-b{color:var(--tinte);margin-left:6px;font-weight:600}
.marke.gross{display:block;font-size:1.3rem;margin-bottom:2px}
.kopf nav{display:flex;gap:18px;flex:1;flex-wrap:wrap}
.kopf nav a{color:var(--tinte2);text-decoration:none;font-size:14.5px;padding:4px 0}
.kopf nav a:hover{color:var(--akzent-dunkel)}
.wer{font-size:13px;color:var(--tinte3);display:flex;gap:12px;align-items:center}
.abmelden{color:var(--tinte3)}

main{max-width:1180px;margin:0 auto;padding:26px 20px 60px}
main.schmal{max-width:440px;padding-top:60px}

/* Meldungen */
.meldung{padding:11px 15px;border-radius:6px;margin-bottom:16px;font-size:14.5px}
.meldung.gut{background:var(--gut-hell);color:var(--gut)}
.meldung.fehler{background:var(--fehler-hell);color:var(--fehler)}
.meldung.hinweis{background:var(--akzent-hell);color:var(--akzent-dunkel)}

/* Karten */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;
  padding:20px;margin-bottom:18px}
.karte.reihe{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.karte.hinweis{background:var(--flaeche2)}
.karte.anmeldung{padding:28px}
.karte-fuss{padding:0 15px 13px;margin:0}
.unter{color:var(--tinte3);font-size:14px;margin-bottom:18px}
.fein{color:var(--tinte3);font-size:13px;margin:8px 0 0}
.leer{color:var(--tinte3);padding:22px;background:var(--flaeche);
  border:1px dashed var(--linie2);border-radius:8px}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin:18px 0}
.kacheln.vier{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:16px}
.kachel.klein{padding:13px}
.zahl{font-size:1.7rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.kachel.klein .zahl{font-size:1.3rem}
.zahl small{font-size:.85rem;font-weight:500;color:var(--tinte3)}
.beschriftung{font-size:12.5px;color:var(--tinte3);margin-top:4px}

/* Balken */
.balken{height:7px;background:var(--flaeche2);border-radius:4px;overflow:hidden;
  margin-top:10px}
.balken.schmal{height:5px;margin:0;width:110px;display:inline-block;vertical-align:middle}
.balken span{display:block;height:100%;background:var(--akzent);border-radius:4px}
.balken span.eng{background:var(--fehler)}

/* Tabellen */
.tabelle-rahmen{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:8px;overflow-x:auto;margin-bottom:18px}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--linie);
  vertical-align:middle}
thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte3);font-weight:600;background:var(--flaeche2)}
tbody tr:last-child td{border-bottom:0}
td.zahlen{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.protokoll{font-size:13.5px}
.protokoll .einzelheit{color:var(--tinte2);max-width:340px}
tr.misslungen td{background:var(--fehler-hell)}

/* Zustandspunkt */
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:6px;vertical-align:1px}
.punkt.gross{width:11px;height:11px}
.punkt.an{background:var(--gut);box-shadow:0 0 0 3px var(--gut-hell)}
.punkt.aus{background:var(--tinte3)}

/* Etiketten */
.etikett{display:inline-block;font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 7px;border-radius:3px;margin-left:7px;
  background:var(--akzent-hell);color:var(--akzent-dunkel);font-weight:600}
.etikett.warn{background:var(--fehler-hell);color:var(--fehler)}

/* Formulare */
label{display:block;font-size:13.5px;color:var(--tinte2);margin:14px 0 5px;font-weight:500}
input[type=text],input[type=email],select{width:100%;padding:9px 11px;
  border:1px solid var(--linie2);border-radius:6px;background:var(--flaeche);
  color:var(--tinte);font-family:inherit;font-size:15px}
input.code{font-family:var(--fest);font-size:1.5rem;letter-spacing:.35em;text-align:center}
input.schmal{width:150px}
.zeile-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.zeile-form.eng{align-items:center;gap:8px}
.zeile-form label{margin-top:0}
.zeile-form .breit{flex:1;min-width:200px}

button,.knopf{display:inline-block;padding:9px 18px;border-radius:6px;
  border:1px solid var(--linie2);background:var(--flaeche);color:var(--tinte);
  font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;
  text-decoration:none;white-space:nowrap}
button:hover,.knopf:hover{border-color:var(--akzent)}
button[type=submit],.knopf.betont{background:var(--akzent);border-color:var(--akzent);color:#fff}
.knopf.klein{padding:5px 11px;font-size:13px}
.knopf.gefahr{background:var(--fehler);border-color:var(--fehler);color:#fff}
form button{margin-top:16px}
.zeile-form button{margin-top:0}

.kopfzeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.kopfzeile h1{margin:0}
.kopfzeile .fein{margin:0}

/* Einrichtung des zweiten Faktors */
.qr{display:flex;justify-content:center;padding:18px;background:#fff;
  border-radius:8px;margin:16px 0}
.geheimnis{font-family:var(--fest);font-size:14px;background:var(--flaeche2);
  padding:10px 13px;border-radius:6px;word-break:break-all;text-align:center}

ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;
  font-size:14.5px;color:var(--tinte2)}

footer{max-width:1180px;margin:0 auto;padding:18px 20px 32px;
  border-top:1px solid var(--linie);display:flex;gap:22px;flex-wrap:wrap;
  font-size:12.5px;color:var(--tinte3)}

@media (max-width:640px){
  .kopf-innen{gap:12px;padding-block:10px}
  .kopf nav{order:3;width:100%;gap:14px}
  main{padding:18px 16px 44px}
  th,td{padding:8px 10px}
}