/* ============================================================
   KeinInternet: gemeinsame Grundgestaltung (alle Seiten)
   Hell/dunkel automatisch nach Systemeinstellung, Akzent Signal-Orange.
   Farben NUR hier ändern. Seiten binden ein:
     <link rel="stylesheet" href="stil/basis.css">   (bzw. ../stil/basis.css)
   Warnstufen: --s0 keine Daten · --s1 grün · --s2 gelb · --s3 orange · --s4 rot
   Komplett offline, keine externen Schriften.
   ============================================================ */
:root{
  --bg:#f5f5f4;
  --panel:#ffffff;
  --panel2:#f0efed;
  --inset:#f7f7f6;
  --text:#1c1917;
  --muted:#6b6560;
  --border:#e3e1de;
  --accent:#e8590c;
  --accent-soft:rgba(232,89,12,.10);
  --accent-text:#ffffff;
  --s0:#9a948e;
  --s1:#2f9e44;
  --s2:#e0a800;
  --s3:#f76707;
  --s4:#e03131;
  --ok:#2b8a3e;
  --warn:#b07d00;
  --bad:#c92a2a;
  --mid:#e8590c;
  --danger-bg:#fff1f0;
  --danger-border:#f5c2c0;
  --danger-text:#a51d1d;
  --shadow:0 1px 2px rgba(28,25,23,.05),0 1px 3px rgba(28,25,23,.06);
  --radius:14px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121110;
    --panel:#1b1a18;
    --panel2:#23211f;
    --inset:#161514;
    --text:#ece9e5;
    --muted:#a19a93;
    --border:#2e2b28;
    --accent:#ff8a3d;
    --accent-soft:rgba(255,138,61,.14);
    --accent-text:#1a0d03;
    --s0:#5c5751;
    --s1:#37b24d;
    --s2:#f2c200;
    --s3:#ff8c2b;
    --s4:#f03e3e;
    --ok:#69db7c;
    --warn:#ffd43b;
    --bad:#ff8787;
    --mid:#ff922b;
    --danger-bg:#2a1615;
    --danger-border:#5c2826;
    --danger-text:#ffb3ad;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a.link,.link a{color:var(--accent)}
a.link:hover,.link a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.015em}
h2{margin:0 0 12px;font-size:17px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
h3{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Seitenrahmen ---------- */
.seite{max-width:1240px;margin:0 auto;padding:22px 24px 40px}
.kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.kopf .uhr,.clock{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}
.sub{color:var(--muted);font-size:14px;margin:2px 0 18px}

/* ---------- Flächen ---------- */
.box,.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.box{padding:18px 20px;margin-bottom:16px}
.box.danger{background:var(--danger-bg);border-color:var(--danger-border)}

/* ---------- Bedienelemente ---------- */
button,.btn{font:inherit;font-size:13px;font-weight:500;cursor:pointer;color:var(--text);
  background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:5px 11px;transition:background .15s,border-color .15s}
button:hover,.btn:hover{background:var(--panel2)}
.btn.primaer{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.btn.primaer:hover{filter:brightness(1.06)}
input[type=text],input[type=search],input[type=number],input[type=date],input[type=tel],input[type=email],input:not([type]),select,textarea{
  font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
::placeholder{color:var(--muted);opacity:1}

/* ---------- Text & Tabellen ---------- */
.foot,.muted{color:var(--muted);font-size:12.5px}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
code{font-family:var(--mono);font-size:.86em;background:var(--panel2);padding:1px 6px;border-radius:5px}
kbd{font-family:var(--mono);font-size:12px;background:var(--panel);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:0 5px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
td,th{padding:7px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
tr:last-child td{border-bottom:0}
details summary{cursor:pointer}

/* ---------- Status-Plaketten ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;
  background:var(--panel2);color:var(--muted);border:1px solid var(--border)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

@media (max-width:640px){.seite{padding:16px 16px 32px}h1{font-size:21px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{
  :root{--bg:#fff;--panel:#fff;--panel2:#f3f3f3;--text:#000;--muted:#444;--border:#ccc;color-scheme:light}
  .box,.card{box-shadow:none}
}