/* Velora Status – schlicht, ohne Dauer-Animationen, damit es auch auf schwachen PCs flüssig bleibt */
:root {
  --grund: #0b0912;
  --flaeche: #141021;
  --flaeche2: #1c1630;
  --rand: rgba(139, 92, 246, 0.22);
  --text: #ece9f5;
  --gedimmt: #a59cc4;
  --violett: #8b5cf6;
  --violett-hell: #c4b5fd;
  --violett-dunkel: #6d28d9;
  --pink: #f472b6;
  --gruen: #22c55e;
  --gelb: #f59e0b;
  --rot: #ef4444;
  --grau: #3a3352;
  --schrift: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--text); font: 16px/1.6 var(--schrift); overflow-x: hidden; display: flex; flex-direction: column; }
::selection { background: var(--violett); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--violett-hell); text-decoration: none; }
a:hover { color: #fff; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--violett-hell); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: .03em; }

/* Ruhiger Hintergrund: zwei feste Verläufe, keine Bewegung */
.nebel { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at 0% 0%, rgba(139, 92, 246, .18), transparent 62%),
    radial-gradient(55vmax 55vmax at 100% 100%, rgba(244, 114, 182, .08), transparent 62%); }

/* ---------- Kopf ---------- */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 960px; width: 100%; margin: 0 auto; padding: 18px 16px; }
.kopf__logo img { width: 150px; }
.kopf__nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kopf__nav a { padding: 6px 12px; border-radius: 8px; color: var(--gedimmt); font-size: .9rem; font-weight: 600; }
.kopf__nav a:hover { color: #fff; background: rgba(139, 92, 246, .14); }

/* ---------- Hauptteil ---------- */
.haupt { flex: 1; max-width: 960px; width: 100%; margin: 0 auto; padding: 12px 16px 48px; }
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 900; text-transform: uppercase;
  background: linear-gradient(90deg, #fff, var(--violett-hell) 60%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.unter { margin: 6px 0 22px; color: var(--gedimmt); }
#stand { white-space: nowrap; }

.karte, .dienst, .lage, .meldung { background: linear-gradient(180deg, var(--flaeche2), var(--flaeche)); border: 1px solid var(--rand); border-radius: 14px; }

/* ---------- Gesamtlage ---------- */
.punkt { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--grau); }
.lage { display: flex; align-items: center; gap: 14px; padding: 18px 20px; margin-bottom: 16px; }
.lage p { margin: 0; font-size: 1.15rem; font-weight: 800; }
.lage .punkt { width: 16px; height: 16px; }
.lage--on { border-color: rgba(34, 197, 94, .45); }
.lage--gestoert, .lage--wartung { border-color: rgba(245, 158, 11, .5); }
.lage--aus { border-color: rgba(239, 68, 68, .55); }
.lage--on .punkt, .dienst--on .punkt { background: var(--gruen); box-shadow: 0 0 10px rgba(34, 197, 94, .7); }
.lage--gestoert .punkt, .lage--wartung .punkt, .dienst--gestoert .punkt { background: var(--gelb); box-shadow: 0 0 10px rgba(245, 158, 11, .7); }
.lage--aus .punkt, .dienst--aus .punkt { background: var(--rot); box-shadow: 0 0 10px rgba(239, 68, 68, .7); }

/* ---------- Meldungen ---------- */
.meldungen { display: grid; gap: 12px; margin-bottom: 16px; }
.meldung { padding: 14px 18px; border-left: 4px solid var(--violett); }
.meldung--wartung { border-left-color: var(--gelb); }
.meldung--stoerung { border-left-color: var(--rot); }
.meldung__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.marke { padding: 2px 10px; border-radius: 999px; background: rgba(139, 92, 246, .2); color: var(--violett-hell); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.meldung--wartung .marke { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.meldung--stoerung .marke { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.meldung time { color: var(--gedimmt); font-size: .85rem; }
.meldung p { margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.meldung--zu { opacity: .75; margin-top: 10px; }
.meldung--ankuendigung { border-left-color: #a78bfa; background: linear-gradient(180deg, rgba(139, 92, 246, .14), var(--flaeche)); }
.meldung__titel { margin: 8px 0 0; font-size: 1.05rem; }
.vorbei { margin-bottom: 16px; }
.vorbei summary { cursor: pointer; color: var(--gedimmt); font-size: .9rem; padding: 4px 0; }
.vorbei summary:hover { color: #fff; }

/* ---------- Zeitraum-Wahl ---------- */
.wahl { position: absolute; opacity: 0; pointer-events: none; }
.reiter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 22px 0 12px; }
.reiter span { margin-right: auto; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--gedimmt); }
.reiter label { cursor: pointer; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--rand); color: var(--gedimmt); font-size: .85rem; font-weight: 700; user-select: none; }
.reiter label:hover { color: #fff; }
#z1:checked ~ .reiter label[for="z1"], #z7:checked ~ .reiter label[for="z7"], #z30:checked ~ .reiter label[for="z30"] {
  background: linear-gradient(135deg, var(--violett), var(--violett-dunkel)); border-color: transparent; color: #fff; }
#z1:focus-visible ~ .reiter label[for="z1"], #z7:focus-visible ~ .reiter label[for="z7"], #z30:focus-visible ~ .reiter label[for="z30"] { outline: 2px solid var(--violett-hell); outline-offset: 2px; }
#z1:checked ~ #inhalt .v7, #z1:checked ~ #inhalt .v30,
#z7:checked ~ #inhalt .v1, #z7:checked ~ #inhalt .v30,
#z30:checked ~ #inhalt .v1, #z30:checked ~ #inhalt .v7 { display: none; }

/* ---------- Dienste ---------- */
.dienste { display: grid; gap: 12px; }
.dienst { padding: 16px 18px 14px; }
.dienst__kopf { display: flex; align-items: center; gap: 12px; }
.dienst__kopf h3 { font-size: 1.05rem; font-weight: 800; }
.dienst__kopf h3 a { color: var(--text); }
.dienst__kopf h3 a:hover { color: var(--violett-hell); }
.zustand { margin-left: auto; font-weight: 800; font-size: .9rem; color: var(--gedimmt); white-space: nowrap; }
.dienst--on .zustand { color: #86efac; }
.dienst--gestoert .zustand { color: #fcd34d; }
.dienst--aus .zustand { color: #fca5a5; }
.dienst__info { margin: 2px 0 10px 24px; color: var(--gedimmt); font-size: .85rem; }

.balken { display: flex; gap: 2px; height: 30px; }
.s { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--grau); }
.s.on { background: var(--gruen); }
.s.gestoert { background: var(--gelb); }
.s.aus { background: var(--rot); }
.s:hover { filter: brightness(1.35); }
.skala { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--gedimmt); font-size: .75rem; }
.skala b { color: var(--text); font-weight: 700; text-align: center; }

/* ---------- Spieler ---------- */
.karte { padding: 18px; margin-top: 16px; }
.karte h2 { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.spieler__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.zahlen { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.zahlen span { display: flex; flex-direction: column; color: var(--gedimmt); font-size: .75rem; line-height: 1.3; }
.zahlen b { color: #fff; font-size: 1.5rem; font-weight: 900; }
.kurve { position: relative; height: 160px; border-left: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.kurve svg { display: block; width: 100%; height: 100%; }
.kurve .gitter { stroke: rgba(139, 92, 246, .14); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.kurve .linie { fill: none; stroke: var(--violett-hell); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kurve__max { position: absolute; top: 0; left: 6px; color: var(--gedimmt); font-size: .7rem; }
.kurve__leer { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--gedimmt); font-size: .9rem; }
.marken { display: flex; justify-content: space-between; margin-top: 6px; color: var(--gedimmt); font-size: .75rem; }
.marken span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.marken span:first-child { justify-content: flex-start; }
.marken span:last-child { justify-content: flex-end; }

/* ---------- Datenschutz, Fuß ---------- */
.ds { margin-top: 28px; color: var(--gedimmt); font-size: .9rem; }
.ds h2 { color: var(--text); margin-bottom: 6px; }
.ds p { margin: 8px 0 0; }
.fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 22px 16px; border-top: 1px solid var(--rand); color: var(--gedimmt); font-size: .85rem; }
.fuss img { width: 28px; }

@media (max-width: 560px) {
  .kopf { flex-wrap: wrap; }
  .kopf__logo img { width: 120px; }
  .kopf__nav a { padding: 6px 8px; }
  .reiter span { flex-basis: 100%; }
  .reiter label { flex: 1; text-align: center; }
  .lage { padding: 14px 16px; }
  .lage p { font-size: 1rem; }
  .dienst { padding: 14px 14px 12px; }
  .dienst__info { margin-left: 0; }
  .balken { gap: 1px; height: 26px; }
  .skala span { display: none; }
  .skala { justify-content: center; }
  .karte { padding: 14px; }
  .kurve { height: 130px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }