/* LawZilla Status. Farben wie die Website (Kanzleiblau, dunkel). Kein Theme-Schalter, die Seite kommt ohne Skript aus. */

:root {
  color-scheme: dark;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #070b12;
  --panel: #0f1722;
  --panel2: #131d2b;
  --line: rgba(169, 203, 244, .10);
  --line-strong: rgba(169, 203, 244, .22);
  --text: #e6edf5;
  --text2: #b5c2d3;
  --muted: #7f90a6;
  --accent: #6ea8ec;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --info: #6ea8ec;
  --leer: rgba(169, 203, 244, .12);
  --glow: rgba(110, 168, 236, .16);
  --r: 14px;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg);
  background-image: radial-gradient(1200px 500px at 50% -200px, var(--glow), transparent 70%);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; }
main.wrap { flex: 1; padding-bottom: 48px; }

.kopf { border-bottom: 1px solid var(--line); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 1.05rem; }
.marke:hover { text-decoration: none; }
.marke-zusatz { color: var(--muted); font-weight: 500; }
.kopf-link { font-size: .9rem; color: var(--text2); }

h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin: 40px 0 12px; }
h3 { font-size: 1.05rem; margin: 6px 0 4px; }
p { margin: 0; }

.banner {
  margin-top: 32px; display: flex; gap: 16px; align-items: center; padding: 22px 24px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line-strong);
}
.banner p { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.banner .punkt { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.banner-normal .punkt { background: var(--ok); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 20%, transparent); }
.banner-wartung .punkt { background: var(--info); box-shadow: 0 0 0 6px color-mix(in srgb, var(--info) 20%, transparent); }
.banner-einschraenkung .punkt { background: var(--warn); box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 20%, transparent); }
.banner-stoerung { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.banner-stoerung .punkt { background: var(--bad); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 20%, transparent); }

.karte { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--r); padding: 16px 18px; margin-bottom: 12px; }
.karte-stoerung { border-left-color: var(--bad); }
.karte-wartung { border-left-color: var(--info); }
.karte-hinweis { border-left-color: var(--muted); }
.karte-kopf { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .8rem; color: var(--muted); }
.marke-art { font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .08em; }
.karte-zustand { padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line-strong); }
.karte-zeit { margin-left: auto; }
.betroffen { color: var(--text2); font-size: .9rem; }
.karte-text { color: var(--text2); white-space: pre-line; margin-top: 6px; }
.verlauf { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.verlauf li { padding: 8px 0 0; color: var(--text2); font-size: .9rem; }
.verlauf time { color: var(--muted); font-size: .8rem; display: block; }

.dienste { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.dienst { padding: 18px; border-bottom: 1px solid var(--line); }
.dienst:last-child { border-bottom: 0; }
.dienst-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dienst-text { display: block; color: var(--muted); font-size: .85rem; }
.zustand { font-size: .85rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.zustand-ok { color: var(--ok); }
.zustand-warn { color: var(--warn); }
.zustand-bad { color: var(--bad); }
.zustand-leer { color: var(--muted); }

.balken { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 30px; margin-top: 12px; }
.balken i { display: block; border-radius: 2px; background: var(--leer); }
.balken .t-ok { background: var(--ok); }
.balken .t-warn { background: var(--warn); }
.balken .t-bad { background: var(--bad); }
.balken-fuss { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; margin-top: 6px; }

.fuss { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 20px; padding-bottom: 28px; }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .balken { gap: 1px; height: 26px; }
  .karte-zeit { margin-left: 0; width: 100%; }
  .dienst-kopf { flex-direction: column; gap: 6px; }
}

/* Auf dem Telefon die letzten 30 Tage, sonst werden die Balken zu schmal. */
@media (max-width: 640px) {
  .balken { grid-template-columns: repeat(30, 1fr); }
  .balken i:nth-child(-n+60) { display: none; }
  .balken-fuss span:first-child { visibility: hidden; }
}