* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(160deg, #0B1F3A 0%, #0f2027 55%, #0a3d5c 100%); color: #f5f5f5; min-height: 100vh; padding: 48px 16px; }
main { max-width: 720px; margin: 0 auto; line-height: 1.6; }
h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); margin: 0 0 24px; }
h1 span { color: #F2A900; }
h2 { font-size: 1.05rem; margin: 26px 0 6px; color: #F2A900; }
p { margin: 0 0 10px; color: #dbe3ec; }
a { color: #9fd0ff; }
form { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 22px; }
label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 0.92rem; }
input[type=text], input[type=email], textarea { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25); color: #fff; font: inherit; }
textarea { min-height: 160px; resize: vertical; }
button { margin-top: 16px; padding: 10px 22px; border: 0; border-radius: 8px; background: #F2A900; color: #1b1b1b; font-weight: 700; font: inherit; cursor: pointer; }
.hp { position: absolute; left: -5000px; }
.meldung { padding: 12px 14px; border-radius: 10px; margin: 0 0 16px; }
.ok { background: rgba(80,180,100,0.2); border: 1px solid rgba(80,180,100,0.5); }
.fehler { background: rgba(220,80,80,0.18); border: 1px solid rgba(220,80,80,0.5); }
.zurueck { display: inline-block; margin-top: 26px; }
.klein { font-size: 0.82rem; color: #a9b6c7; }

/* Verwaltung /verwaltung (12.10.2026) */
:root { --gold: #F2A900; --rand: rgba(255,255,255,0.12); --flaeche: rgba(255,255,255,0.05); --aus-grau: #7f8ea3; }
input[type=password] { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.25); color: #fff; font: inherit; }
.kachelwahl label.kachel-zeile, .kachelwahl div.kachel-zeile { display: flex; align-items: center; gap: 14px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); cursor: pointer; font-weight: normal; }
.kachel-zeile img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.kachel-zeile .kachel-text { flex: 1; min-width: 0; }
.kachel-zeile .kachel-text b { display: block; }
.kachel-zeile .kachel-text small { color: var(--aus-grau); overflow-wrap: anywhere; }
.kachel-zeile.aus { opacity: .55; }
input.schalter { appearance: none; width: 46px; height: 26px; border-radius: 13px; background: #555; position: relative; cursor: pointer; flex: none; transition: background .15s; }
input.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
input.schalter:checked { background: var(--gold); }
input.schalter:checked::after { left: 23px; }
details.pw { margin-top: 24px; }
details.pw summary { cursor: pointer; color: #9fd0ff; }
details.pw form { margin-top: 10px; }
form.abmelden { background: none; border: 0; padding: 0; margin-top: 16px; }
form.abmelden button { background: transparent; color: #9fd0ff; border: 1px solid var(--rand); }
.fussnote { margin-top: 28px; font-size: 0.8rem; color: var(--aus-grau); text-align: center; }

/* Statistik in der Verwaltung (16.10.2026) */
.statistik { margin-top: 28px; }
.statistik .zeitraum { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.statistik .zeitraum label { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.statistik .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.statistik .kennzahlen div { background: var(--karte, rgba(255,255,255,.06)); border-radius: 10px; padding: 10px 12px; }
.statistik .kennzahlen b { display: block; font-size: 1.6rem; }
.statistik .kennzahlen small { opacity: .75; }
.statistik table.stat { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: .92rem; }
.statistik table.stat th, .statistik table.stat td { padding: 6px 10px; text-align: left; border-bottom: 1px solid rgba(128,128,128,.25); vertical-align: top; }
.statistik table.stat td small { display: block; opacity: .7; }
.statistik meter { width: 100%; min-width: 80px; height: 12px; }
.statistik .stat-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* Verwaltung: Ein/Zufall je Kachel (17.10.2026) */
.kachel-wahl { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--aus-grau); cursor: pointer; flex: none; }
input.zufall { width: 22px; height: 22px; accent-color: var(--gold); cursor: pointer; }
.zufall-info { padding: 8px 12px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--rand); }
input.pos { width: 52px; padding: 4px 6px; text-align: center; }