/* Joli WWS */
:root{color-scheme:light dark;--grund-oben:#FCF8F4;--grund:#FAF4EF;--grund-unten:#F4EBE4;--karte:#FFFCF9;--karte-hoch:#FFFFFF;--gedrueckt:rgba(122,69,54,0.06);--ton-himmel:#EFF4FB;--ton-minze:#F2F8F0;--ton-pfirsich:#FFEFE5;--ton-rose:#FDEDEC;--ton-butter:#FDF6E3;--ton-tinte:#F2ECEE;--text:#241914;--text-2:#654C42;--text-3:#7A5D52;--akzent:#AD433C;--erfolg:#1F6B50;--knopf:#2B1424;--knopf-gedrueckt:#45253B;--auf-knopf:#FFFCF9;--knopf-2:#FFFFFF;--auf-knopf-2:#2B1424;--ort:#D9645B;--auf-ort:#2B1424;--gefahr:#F7D6D6;--auf-gefahr:#8C2531;--rand:rgba(100,60,50,0.62);--zier:rgba(112,70,58,0.26);--haar:rgba(112,70,58,0.13);--fokus:#AD433C;--schatten:#7A4536;--zeichen-schlaf:#2B1424;--zeichen-joli:#D8564C;--zeichen-wachstum:#B8496A;--zeichen-tipp:#966800;}
@media (prefers-color-scheme:dark){:root{--grund-oben:#33202C;--grund:#1F121A;--grund-unten:#12090F;--karte:#3A2430;--karte-hoch:#3F2C36;--gedrueckt:rgba(9,3,7,0.22);--ton-himmel:#2C2B2E;--ton-minze:#252D29;--ton-pfirsich:#362826;--ton-rose:#3C252C;--ton-butter:#312A22;--ton-tinte:#32282F;--text:#EBDDD6;--text-2:#CDB8B1;--text-3:#AA9490;--akzent:#F0A896;--erfolg:#9CCFBC;--knopf:#FFB7AF;--knopf-gedrueckt:#EFA08F;--auf-knopf:#1F121A;--knopf-2:#45303C;--auf-knopf-2:#EBDDD6;--ort:#FFB7AF;--auf-ort:#1F121A;--gefahr:#4A1F2A;--auf-gefahr:#FF8A8F;--rand:rgba(243,226,220,0.40);--zier:rgba(243,226,220,0.20);--haar:rgba(243,226,220,0.08);--fokus:#F0A896;--schatten:#090307;--zeichen-schlaf:#F6DCD4;--zeichen-joli:#FFB7AF;--zeichen-wachstum:#F2A3B8;--zeichen-tipp:#FBE3A0;}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,var(--grund-oben),var(--grund) 45%,var(--grund-unten)) fixed;background-color:var(--grund);color:var(--text);font:400 16px/1.55 ui-rounded,"SF Pro Rounded","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(1.7rem,3.2vw,2.15rem);font-weight:800;letter-spacing:-.02em;line-height:1.15}
h2{font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
h3{font-size:1rem;font-weight:700}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:8px}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zeichen{width:22px;height:22px;flex:none}
.marke-mond{fill:var(--ort);flex:none}
.leise{color:var(--text-2)}
.klein{font-size:.88rem}

/* Rahmen: Seitenleiste am Mac, Leiste unten am Handy */
.innen{display:grid;grid-template-columns:1fr;min-height:100vh}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px calc(6px);padding-top:max(14px,env(safe-area-inset-top))}
.marke{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none}
.marke span{color:var(--text-2);font-weight:700}
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--karte);box-shadow:0 -1px 0 var(--haar),0 -8px 24px color-mix(in srgb,var(--schatten) 10%,transparent);padding:6px 6px max(8px,env(safe-area-inset-bottom))}
.leiste .marke,.leiste .abmelden{display:none}
.wege{display:flex;justify-content:space-around;gap:2px;list-style:none;margin:0;padding:0}
.weg{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;min-height:52px;padding:6px 8px;border-radius:16px;color:var(--text-2);font-size:.72rem;font-weight:700;text-decoration:none}
.weg[aria-current="page"]{color:var(--auf-ort);background:var(--ort)}
.haupt{width:100%;max-width:1120px;padding:8px 18px calc(110px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px}
body:has(.antwort textarea:focus) .leiste{display:none}
@media (min-width:900px){
  .innen{grid-template-columns:252px 1fr}
  .kopf{display:none}
  .leiste{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:26px;padding:28px 18px;box-shadow:1px 0 0 var(--haar);background:color-mix(in srgb,var(--karte) 70%,transparent)}
  .leiste .marke{display:flex;padding:0 10px}
  .leiste .abmelden{display:block;margin-top:auto}
  .wege{flex-direction:column;justify-content:flex-start;gap:4px}
  .weg{flex-direction:row;gap:12px;min-height:46px;padding:10px 14px;font-size:.98rem;border-radius:14px}
  .weg:hover{background:var(--gedrueckt);color:var(--text)}
  .weg[aria-current="page"]:hover{background:var(--ort);color:var(--auf-ort)}
  .haupt{padding:44px 48px 64px;gap:28px}
}

/* Knoepfe und Felder */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--knopf);color:var(--auf-knopf);font:inherit;font-weight:800;text-decoration:none;cursor:pointer}
.knopf:active{background:var(--knopf-gedrueckt)}
.knopf.zweit{background:var(--knopf-2);color:var(--auf-knopf-2);box-shadow:inset 0 0 0 1.5px var(--zier)}
.knopf.breit{width:100%}
.knopf-leise{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:none;color:var(--text-2);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.knopf-leise:hover{background:var(--gedrueckt);color:var(--text)}
.feld{display:flex;flex-direction:column;gap:7px}
.feld label{font-weight:700;font-size:.95rem}
.feld input,.feld textarea{width:100%;min-height:52px;padding:13px 16px;border:1.5px solid var(--zier);border-radius:16px;background:var(--karte-hoch);color:var(--text);font:inherit;font-size:17px}
.feld input:focus,.feld textarea:focus{border-color:var(--rand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--fokus) 25%,transparent)}
.feld .hilfe{color:var(--text-3);font-size:.86rem}
.formular{display:flex;flex-direction:column;gap:18px}

/* Flaechen */
.seitenkopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px}
.stand{color:var(--text-3);font-size:.9rem}
.karte{background:var(--karte);border-radius:24px;padding:20px;box-shadow:0 1px 2px color-mix(in srgb,var(--schatten) 8%,transparent),0 10px 30px -18px color-mix(in srgb,var(--schatten) 30%,transparent);display:flex;flex-direction:column;gap:14px;min-width:0}
.hinweis{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:var(--ton-butter)}
.hinweis.gut{background:var(--ton-minze)}
.hinweis.schlecht{background:var(--gefahr);color:var(--auf-gefahr)}
.hinweis.ruhig{background:var(--ton-himmel)}
.hinweis p+p{margin-top:4px}
.raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* Kennzahlen */
.kacheln{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.kachel{background:var(--karte);border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:2px;text-decoration:none;min-width:0}
.kachel.betont{background:var(--ton-pfirsich)}
.kachel-etikett{color:var(--text-2);font-size:.86rem;font-weight:700}
.kachel-zahl{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.kachel-zusatz{color:var(--text-3);font-size:.82rem}

/* Diagramme */
.diagramm{margin:0;display:flex;flex-direction:column;gap:8px}
.diagramm-titel{font-weight:800}
.diagramm-flaeche{position:relative;padding-top:20px}
.diagramm-flaeche svg{display:block;width:100%;height:120px;overflow:visible}
.diagramm-max{position:absolute;top:0;left:0;color:var(--text-3);font-size:.78rem;font-variant-numeric:tabular-nums}
.diagramm-linie{stroke:var(--zier);stroke-width:1}
.diagramm-linie.leise{stroke:var(--haar);stroke-dasharray:3 4}
.balken{fill:var(--zeichen-schlaf)}
.balken-heute{fill:var(--ort)}
.balken-luecke{fill:var(--zier)}
.diagramm.ki .balken{fill:var(--zeichen-joli)}
.diagramm.konten .balken{fill:var(--zeichen-wachstum)}
.diagramm.support .balken{fill:var(--zeichen-tipp)}
.diagramm .balken-heute{fill:var(--ort)}
.diagramm-achse{display:flex;justify-content:space-between;color:var(--text-3);font-size:.78rem;font-variant-numeric:tabular-nums}
.diagramm-fuss{color:var(--text-2);font-size:.88rem}

/* Tabellen */
.tabelle-huelle{overflow-x:auto;margin:0 -4px}
.tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabelle th{text-align:left;color:var(--text-3);font-size:.8rem;font-weight:700;padding:6px 10px}
.tabelle td{padding:11px 10px;border-top:1px solid var(--haar);vertical-align:top}
.tabelle .z{text-align:right;white-space:nowrap}
.tabelle code{font-size:.88rem;white-space:nowrap}
.tabelle th[scope="row"]{font-weight:700;text-align:left;color:var(--text);font-size:inherit;padding:11px 10px;border-top:1px solid var(--haar)}

/* Support */
.reiter{display:flex;gap:6px;flex-wrap:wrap}
.reiter a{padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:700;color:var(--text-2);background:var(--karte)}
.reiter a[aria-current="page"]{background:var(--ort);color:var(--auf-ort)}
.faeden{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.faden{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:20px;background:var(--karte);text-decoration:none}
.faden:hover{background:var(--karte-hoch)}
.faden-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vorschau{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{color:var(--text-3);font-size:.84rem}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:800;background:var(--ton-tinte);color:var(--text-2)}
.chip.wartet{background:var(--ort);color:var(--auf-ort)}
.chip.offen{background:var(--ton-minze);color:var(--erfolg)}
.zurueck{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-weight:700;text-decoration:none;min-height:44px}
.verlauf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.blase{max-width:min(620px,86%);padding:12px 16px;border-radius:22px 22px 22px 8px;background:var(--karte-hoch);box-shadow:0 1px 2px color-mix(in srgb,var(--schatten) 8%,transparent);white-space:pre-wrap;overflow-wrap:anywhere}
.blase.team{align-self:flex-end;border-radius:22px 22px 8px 22px;background:var(--knopf);color:var(--auf-knopf)}
.blase-zeit{display:block;margin-top:6px;font-size:.76rem;opacity:.72;white-space:normal}
.antwort{display:flex;flex-direction:column;gap:12px}
.antwort textarea{min-height:150px;resize:vertical;line-height:1.5}
.antwort-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
@media (max-width:899px){.antwort .knopf{width:100%}}
.zeilen{display:flex;flex-direction:column;gap:2px}
.zeile{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--haar)}
.zeile:first-child{border-top:0}
.zeile dt{color:var(--text-2)}
.zeile dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.liste-alarme{list-style:none;margin:0;padding:0}
.liste-alarme li{padding:10px 0;border-top:1px solid var(--haar)}
.liste-alarme li:first-child{border-top:0}

/* Anmelden und Einrichten */
.allein{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding:max(40px,env(safe-area-inset-top)) 18px 40px}
.allein .karte{width:100%;max-width:460px;padding:28px 24px;gap:22px}
.allein .marke{font-size:1.3rem}