:root{
  --petrol:#0C7C9E;        /* Flächen mit weißer Schrift — 4,80:1 */
  --petrol-text:#0A6A87;   /* Schrift auf Weiß/Hell — 6,21:1 bzw. 5,75:1 */
  --navy:#01344E; --hell:#F2F7F9; --rand:#C9D9E0; --text2:#3F5A6A;
  --rot:#B3261E; --rot-bg:#FBEAE8; --gruen:#1B6B3A; --gruen-bg:#E6F4EA;
  --gelb:#8A5A00; --gelb-bg:#FFF7E0; --grau:#2A4A5C; --grau-bg:#E7EEF2;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hell);color:var(--navy);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--petrol-text)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,audio:focus-visible{
  outline:3px solid var(--petrol);outline-offset:2px}

header{background:var(--navy);color:#fff;padding:12px 20px;display:flex;align-items:center;
  gap:8px 18px;flex-wrap:wrap}
header .marke{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.92}
header h1{margin:0;font-size:18px;font-weight:700}
header nav{margin-left:auto;display:flex;gap:6px 14px;flex-wrap:wrap}
header nav a{color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:4px 2px;
  border-bottom:2px solid transparent}
header nav a:hover,header nav a.hier{border-bottom-color:#7FD3EC}

main{max-width:1180px;margin:20px auto 48px;padding:0 16px}
main.schmal{max-width:460px}
.karte{background:#fff;border:1px solid var(--rand);border-radius:12px;padding:18px 20px;
  margin-bottom:16px;box-shadow:0 2px 10px rgba(1,52,78,.05)}
.karte h2{margin:0 0 12px;font-size:17px}
.karte h3{margin:18px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--text2)}
.karte h3:first-child{margin-top:0}
p{margin:8px 0}
.klein{font-size:13px;color:var(--text2)}
.mitte{text-align:center}
.leer{padding:26px 20px;text-align:center;color:var(--text2)}
.leer strong{display:block;color:var(--navy);font-size:16px;margin-bottom:6px}

/* Filterleiste --------------------------------------------------------- */
.filter{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end}
.filter .weit{grid-column:1/-1}
label{display:block;font-weight:600;font-size:13px;margin:0 0 4px;color:var(--text2)}
input[type=text],input[type=search],input[type=password],input[type=date],select{
  width:100%;padding:9px 11px;font:inherit;font-size:16px;color:var(--navy);
  border:1px solid var(--rand);border-radius:8px;background:#fff}
.ankreuz{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--navy);padding-bottom:9px}
.ankreuz input{width:18px;height:18px;margin:0}
button,.knopf{padding:9px 15px;font:inherit;font-size:15px;font-weight:700;color:#fff;
  background:var(--petrol);border:0;border-radius:8px;cursor:pointer;text-decoration:none;
  display:inline-block;text-align:center}
button:hover,.knopf:hover{background:#095D77}
button.zweit,.knopf.zweit{background:#fff;color:var(--navy);border:1px solid var(--rand);font-weight:600}
button.zweit:hover,.knopf.zweit:hover{background:var(--hell)}
.knopf.zweit.hier{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.knopf.zweit.hier:hover{background:#095D77}
button.gefahr{background:#fff;color:var(--rot);border:1px solid #E5B4B0;font-weight:600}
button.gefahr:hover{background:var(--rot-bg)}
form.zeile{display:inline}
form.zeile button{padding:5px 9px;font-size:13px;margin:2px 2px 2px 0}

/* Abzeichen ------------------------------------------------------------ */
.ab{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:700;
  white-space:nowrap;background:var(--grau-bg);color:var(--grau)}
.ab-freundlich{background:var(--gruen-bg);color:var(--gruen)}
.ab-veraergert{background:var(--rot-bg);color:var(--rot)}
.ab-auff{background:var(--rot-bg);color:var(--rot)}
.ab-unsicher{background:var(--gelb-bg);color:var(--gelb)}
.ab-offen{background:var(--gelb-bg);color:var(--gelb)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.chips li{background:var(--grau-bg);color:var(--grau);border-radius:999px;padding:3px 11px;font-size:13.5px}
.chips li a{color:inherit;text-decoration:none}
.chips li a:hover{text-decoration:underline}

/* Liste der Gespräche --------------------------------------------------- */
.liste{list-style:none;margin:0;padding:0}
.liste li{margin-bottom:10px}
.zeile-g{display:block;background:#fff;border:1px solid var(--rand);border-left:4px solid var(--rand);
  border-radius:10px;padding:12px 14px;text-decoration:none;color:inherit}
.zeile-g:hover{border-color:var(--petrol);border-left-color:var(--petrol);background:#FBFDFE}
.zeile-g.warn{border-left-color:var(--rot)}
.kopfzeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:5px}
.zeit{font-weight:700;font-size:15px;white-space:nowrap}
.nr{font-variant-numeric:tabular-nums;color:var(--text2);font-size:14.5px;white-space:nowrap}
.dauer{color:var(--text2);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.marken{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.anliegen{margin:0;font-size:15px;line-height:1.5}
.ergebniszeile{margin:5px 0 0;font-size:13.5px;color:var(--text2)}

/* Kennzahlen ------------------------------------------------------------ */
.kacheln{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0}
.kachel{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:13px 15px}
.kachel .wert{font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.kachel .was{font-size:13px;color:var(--text2);margin-top:2px}
.kachel.warn .wert{color:var(--rot)}

/* Balken ---------------------------------------------------------------- */
.balken{list-style:none;margin:0;padding:0}
.balken li{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto;align-items:center;
  gap:10px;padding:4px 0;font-size:14px}
.balken .was{overflow-wrap:anywhere}
.balken .spur{background:var(--grau-bg);border-radius:4px;height:16px;overflow:hidden}
.balken .fuell{background:var(--petrol);height:100%;display:block;border-radius:4px}
.balken .fuell.rot{background:var(--rot)}
.balken .fuell.gruen{background:var(--gruen)}
.balken .fuell.grau{background:#6B8A99}
.balken .n{font-variant-numeric:tabular-nums;color:var(--text2);white-space:nowrap;min-width:3.5em;text-align:right}

/* Tagesverlauf: senkrechte Säulen, lesbar auch mit wenigen Tagen --------- */
.saeulen{display:flex;align-items:flex-end;justify-content:flex-start;gap:3px;height:152px;
  margin:10px 0 0;padding:0 0 2px;list-style:none;overflow-x:auto}
.saeulen li{flex:1 1 14px;min-width:14px;max-width:54px;height:100%;display:flex;
  flex-direction:column;justify-content:flex-end;align-items:center}
.saeulen .stab{width:100%;background:var(--petrol);border-radius:3px 3px 0 0;min-height:2px}
.saeulen .stab.null{background:var(--rand)}
.saeulen .tag{font-size:10.5px;color:var(--text2);margin-top:4px;writing-mode:vertical-rl;
  max-height:72px;overflow:hidden;flex:none}
.achse{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text2);margin-top:6px}

/* Detailansicht --------------------------------------------------------- */
.meta{display:grid;gap:10px 22px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0;padding:0}
.meta div{min-width:0}
.meta dt{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text2)}
.meta dd{margin:1px 0 0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.meta div.breit{grid-column:1/-1}
.meta div.breit dd{font-size:13.5px;font-weight:400;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hinweis{border-left:4px solid var(--gelb);background:var(--gelb-bg);color:#4A3100;
  padding:11px 14px;border-radius:0 8px 8px 0;margin:0 0 14px}
.hinweis.rot{border-left-color:var(--rot);background:var(--rot-bg);color:#6B1711}
.hinweis strong{display:block;margin-bottom:2px}
.dialog{list-style:none;margin:0;padding:0}
.dialog li{border-left:3px solid #6B8A99;background:var(--hell);border-radius:0 8px 8px 0;
  padding:9px 13px;margin-bottom:8px}
.dialog li.anrufer{border-left-color:var(--petrol);background:#fff;border:1px solid var(--rand);
  border-left:3px solid var(--petrol)}
.dialog .wer{font-size:12.5px;font-weight:700;color:var(--text2);display:flex;gap:10px;margin-bottom:2px}
.dialog li.anrufer .wer{color:var(--petrol-text)}
.dialog .t{font-variant-numeric:tabular-nums;font-weight:400}
.dialog p{margin:0;font-size:15.5px}
.spuren{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
audio{width:100%;height:40px}
.volltext{white-space:pre-wrap;font-size:14.5px;margin:8px 0 0}
details>summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--petrol-text);padding:4px 0}

/* Tabelle (Verwaltung) --------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--rand);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text2)}
td.aktionen,td.zeit2{white-space:nowrap}
.status-aktiv{color:var(--gruen);font-weight:600}
.status-gesperrt{color:var(--rot);font-weight:600}
.status-eingeladen{color:var(--gelb);font-weight:600}
.fehler{padding:10px 12px;border-radius:8px;background:var(--rot-bg);color:var(--rot);
  font-weight:600;font-size:14px;margin:0 0 12px}
.ok{padding:10px 12px;border-radius:8px;background:var(--gruen-bg);color:var(--gruen);
  font-weight:600;font-size:14px;margin:0 0 12px}
.geheim{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;padding:10px 12px;
  background:var(--gelb-bg);border:1px solid #F0D48A;border-radius:8px;word-break:break-all;user-select:all}
.blaettern{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* Anmeldung ------------------------------------------------------------- */
body.anmeldung{display:flex;align-items:center;justify-content:center;min-height:100vh}
body.anmeldung main{width:100%;max-width:400px;margin:24px;background:#fff;border:1px solid var(--rand);
  border-radius:12px;overflow:hidden;padding:0}
body.anmeldung .kopf{background:var(--navy);color:#fff;padding:20px 26px}
body.anmeldung .kopf .marke{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.92;margin:0 0 3px}
body.anmeldung .kopf h1{margin:0;font-size:21px}
body.anmeldung form{padding:20px 26px 24px}
body.anmeldung label{margin-top:12px}
body.anmeldung button{width:100%;margin-top:18px;padding:12px}
body.anmeldung .fuss{padding:0 26px 20px;font-size:13px;color:var(--text2)}

@media (max-width:720px){
  main{padding:0 12px;margin-top:14px}
  header{padding:10px 14px}
  header h1{font-size:16px}
  .karte{padding:14px;border-radius:10px}
  .kopfzeile{gap:4px 10px}
  .marken{margin-left:0;width:100%}
  .kachel .wert{font-size:22px}
  .balken li{grid-template-columns:minmax(72px,38%) 1fr auto;font-size:13.5px}
  .meta{gap:8px 14px}
  .saeulen{gap:2px}
  .saeulen li{flex:1 1 12px;min-width:12px;max-width:44px}
  .saeulen .tag{font-size:10px;max-height:62px}
  /* Auswahlfelder über die ganze Breite: sonst schneidet das Betriebssystem
     den Text ab („alle Stimmunger“). */
  .filter > div{grid-column:1/-1}
  .filter > div.halb{grid-column:span 1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}.hh0{height:0%}.hh1{height:1%}.hh2{height:2%}.hh3{height:3%}.hh4{height:4%}.hh5{height:5%}.hh6{height:6%}.hh7{height:7%}.hh8{height:8%}.hh9{height:9%}.hh10{height:10%}.hh11{height:11%}.hh12{height:12%}.hh13{height:13%}.hh14{height:14%}.hh15{height:15%}.hh16{height:16%}.hh17{height:17%}.hh18{height:18%}.hh19{height:19%}.hh20{height:20%}.hh21{height:21%}.hh22{height:22%}.hh23{height:23%}.hh24{height:24%}.hh25{height:25%}.hh26{height:26%}.hh27{height:27%}.hh28{height:28%}.hh29{height:29%}.hh30{height:30%}.hh31{height:31%}.hh32{height:32%}.hh33{height:33%}.hh34{height:34%}.hh35{height:35%}.hh36{height:36%}.hh37{height:37%}.hh38{height:38%}.hh39{height:39%}.hh40{height:40%}.hh41{height:41%}.hh42{height:42%}.hh43{height:43%}.hh44{height:44%}.hh45{height:45%}.hh46{height:46%}.hh47{height:47%}.hh48{height:48%}.hh49{height:49%}.hh50{height:50%}.hh51{height:51%}.hh52{height:52%}.hh53{height:53%}.hh54{height:54%}.hh55{height:55%}.hh56{height:56%}.hh57{height:57%}.hh58{height:58%}.hh59{height:59%}.hh60{height:60%}.hh61{height:61%}.hh62{height:62%}.hh63{height:63%}.hh64{height:64%}.hh65{height:65%}.hh66{height:66%}.hh67{height:67%}.hh68{height:68%}.hh69{height:69%}.hh70{height:70%}.hh71{height:71%}.hh72{height:72%}.hh73{height:73%}.hh74{height:74%}.hh75{height:75%}.hh76{height:76%}.hh77{height:77%}.hh78{height:78%}.hh79{height:79%}.hh80{height:80%}.hh81{height:81%}.hh82{height:82%}.hh83{height:83%}.hh84{height:84%}.hh85{height:85%}.hh86{height:86%}.hh87{height:87%}.hh88{height:88%}.hh89{height:89%}.hh90{height:90%}.hh91{height:91%}.hh92{height:92%}.hh93{height:93%}.hh94{height:94%}.hh95{height:95%}.hh96{height:96%}.hh97{height:97%}.hh98{height:98%}.hh99{height:99%}.hh100{height:100%}