/* Kernel Clips — eine Datei, dunkel, ruhig. Keine Bibliothek. */
:root{
  --grund:#0f1115; --karte:#171a21; --rand:#252a34;
  --text:#e6e8ee; --matt:#9aa3b2; --akzent:#05d9e8; --akzent-tief:#08839b;
  --gut:#3ddc84; --warn:#ffcc55; --schlecht:#ff6b6b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline}
.huelle{max-width:1100px;margin:0 auto;padding:20px}
.schmal{max-width:460px}

header.kopf{border-bottom:1px solid var(--rand);background:#12151b;position:sticky;top:0;z-index:5}
header.kopf .huelle{display:flex;align-items:center;gap:18px;padding:12px 20px;flex-wrap:wrap}
.marke{font-weight:700;letter-spacing:.3px}
.marke span{color:var(--akzent)}
nav a{color:var(--matt);padding:6px 2px;font-size:14px}
nav a.an{color:var(--text);border-bottom:2px solid var(--akzent)}
.rechts{margin-left:auto}

.karte{background:var(--karte);border:1px solid var(--rand);border-radius:10px;
  padding:16px;margin-bottom:14px}
.karte h2{margin:0 0 12px;font-size:16px}
.karte h3{margin:0 0 6px;font-size:15px}

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.kachel{background:var(--karte);border:1px solid var(--rand);border-radius:10px;padding:14px;min-width:0}
.kachel .zahl{font-size:26px;font-weight:700}
.kachel .titel{color:var(--matt);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.kachel.rot .zahl{color:var(--schlecht)}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--matt);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--rand)}
td{padding:9px 10px;border-bottom:1px solid #1d222b;vertical-align:middle}
tr:last-child td{border-bottom:none}

.balken{height:8px;background:#20252f;border-radius:5px;overflow:hidden;min-width:110px}
.balken i{display:block;height:100%;background:var(--gut)}
.balken.gelb i{background:var(--warn)}
.balken.rot i{background:var(--schlecht)}

.marke-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.gut{background:var(--gut)} .warn{background:var(--warn)} .schlecht{background:var(--schlecht)}
.matt{color:var(--matt)} .klein{font-size:13px} .winzig{font-size:12px}

button,.knopf{background:var(--akzent-tief);color:#fff;border:none;border-radius:7px;
  padding:9px 14px;font:inherit;font-weight:600;cursor:pointer}
button:hover,.knopf:hover{background:#0a9cb8;text-decoration:none}
button.still{background:#252a34;color:var(--text);font-weight:500}
button.still:hover{background:#2f3540}
button[disabled]{opacity:.45;cursor:not-allowed}
input,select,textarea{background:#0f1218;border:1px solid var(--rand);color:var(--text);
  border-radius:7px;padding:9px 10px;font:inherit;width:100%}
label{display:block;font-size:13px;color:var(--matt);margin:10px 0 4px}
form.reihe{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
form.reihe > *{flex:0 0 auto}

.stufen{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.stufe{padding:6px 11px;border-radius:20px;border:1px solid var(--rand);
  font-size:13px;color:var(--matt);white-space:nowrap}
.stufe.fertig{border-color:var(--gut);color:var(--gut)}
.stufe.jetzt{border-color:var(--akzent);color:var(--akzent);background:#0d2b31}

pre.protokoll{background:#0b0e13;border:1px solid var(--rand);border-radius:8px;
  padding:12px;max-height:420px;overflow:auto;font-size:12.5px;line-height:1.6;margin:0}
pre.protokoll .warn{color:var(--warn);background:none}
pre.protokoll .error{color:var(--schlecht);background:none}
pre.protokoll .zeit{color:#5d6675}

.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.clip{background:var(--karte);border:1px solid var(--rand);border-radius:10px;overflow:hidden}
.clip video,.clip img{width:100%;display:block;background:#000;aspect-ratio:9/16;object-fit:cover}
.clip .inhalt{padding:10px}

.hinweis{background:#1b2430;border:1px solid #2b3d4e;border-left:3px solid var(--akzent);
  border-radius:7px;padding:11px 14px;margin-bottom:14px;font-size:14px}
.hinweis.warnung{background:#2a2418;border-color:#4a3d1e;border-left-color:var(--warn)}

.streamkarte{display:flex;gap:14px;align-items:center;padding:13px;border:1px solid var(--rand);
  border-radius:9px;margin-bottom:10px;background:#141821;flex-wrap:wrap}
.streamkarte img{width:112px;border-radius:6px;background:#000;flex:0 0 auto}
.streamkarte .mitte{flex:1 1 220px;min-width:0}