@font-face{font-family:"Outfit";src:url("fonts/outfit-latin.woff") format("woff");font-weight:300 900;font-style:normal;font-display:swap}

:root{
--pink:#ff2d78;
--koralle:#ff5a5f;
--orange:#ff8a3d;
--gold:#ffc93c;
--meer:#10b5b8;
--tinte:#2a1530;
--grau:#7c6672;
--linie:#f3e1e4;
--grund:#fff5ee;
--weiss:#ffffff;
--rot:#d92553;
--ok:#14946a;
--sonne:linear-gradient(120deg,#ff2d78 0%,#ff5a5f 38%,#ff8a3d 70%,#ffc93c 100%);
--sonne-weich:linear-gradient(120deg,#ffe1ec 0%,#ffe6dc 50%,#fff1cf 100%);
--ring-1:linear-gradient(135deg,#ff2d78,#ff7a3d);
--ring-2:linear-gradient(135deg,#ff9f1c,#ffd23f);
--ring-3:linear-gradient(135deg,#0fb5a6,#38c9ef);
--schatten:0 8px 24px rgba(255,64,104,.10),0 1px 3px rgba(42,21,48,.06);
--rund:20px;
--schrift:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--nav-h:68px;
color-scheme:light
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--schrift);font-size:16px;line-height:1.45;color:var(--tinte);background:var(--grund);-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
a{color:var(--pink)}
h1,h2,h3{line-height:1.2}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--meer);outline-offset:2px;border-radius:8px}
.ico{width:20px;height:20px;flex-shrink:0}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wortmarke{font-weight:800;letter-spacing:-.02em}
.wortmarke span{color:#ffe36b}
.hero-titel .wortmarke span{filter:drop-shadow(0 3px 10px rgba(150,20,40,.45))}

.kopf{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--sonne);color:#fff;box-shadow:0 4px 18px rgba(255,64,104,.25)}
.kopf-marke{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:22px}
.logo-klein{width:34px;height:34px;filter:drop-shadow(0 2px 4px rgba(120,0,40,.25))}
.kopf-konto{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.kopf-konto.is-on{background:#fff;color:var(--pink)}

.inhalt{max-width:680px;margin:0 auto;padding:16px 16px calc(var(--nav-h) + 40px + env(safe-area-inset-bottom))}

.gruss{margin:4px 2px 14px;font-size:20px;color:var(--grau)}
.gruss strong{color:var(--tinte);font-weight:700}
.seiten-titel{margin:8px 2px 16px;font-size:28px;font-weight:800;letter-spacing:-.02em}

.tabs{display:flex;gap:4px;padding:5px;background:var(--weiss);border-radius:999px;box-shadow:var(--schatten);margin-bottom:16px}
.tabs a{flex:1;text-align:center;padding:10px 8px;border-radius:999px;color:var(--grau);font-weight:700;text-decoration:none;font-size:15px;transition:color .15s}
.tabs a:hover{color:var(--tinte)}
.tabs a.is-on{background:var(--sonne);color:#fff;box-shadow:0 4px 12px rgba(255,64,104,.3)}

.heute-karte{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;margin-bottom:16px;border-radius:24px;background:var(--sonne);color:#fff;box-shadow:0 12px 28px rgba(255,64,104,.28);position:relative;overflow:hidden}
.heute-karte::after{content:"";position:absolute;right:-40px;top:-60px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(255,240,150,.55),rgba(255,240,150,0) 70%)}
.heute-karte>div:first-child{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.heute-zahl{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em}
.heute-text{font-size:15px;font-weight:600;line-height:1.3;opacity:.95}
.heute-geschafft{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.22);font-weight:700;font-size:14px;white-space:nowrap}
.heute-geschafft .ico{width:16px;height:16px;stroke-width:3}

.filter{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.chips{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;padding:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips-umbruch{flex-wrap:wrap;overflow:visible}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:7px 14px;border:1.5px solid var(--linie);border-radius:999px;background:var(--weiss);color:var(--tinte);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.chip:hover{border-color:#f0b9c6}
.chip.is-on{border-color:transparent;background:var(--tinte);color:#fff}
.chip .ico{width:16px;height:16px}
.chip-plus{color:var(--pink);border-style:dashed}
.sortierung{margin:0}
.sortierung select{appearance:none;-webkit-appearance:none;min-height:38px;padding:7px 34px 7px 14px;border:1.5px solid var(--linie);border-radius:999px;background:var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6672' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px;color:var(--tinte);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.anzahl{margin:0 0 8px;text-align:center;color:var(--grau);font-size:14px;font-variant-numeric:tabular-nums}

.liste{display:flex;flex-direction:column;gap:10px}
.aufgabe{--ring:var(--ring-3);--ring-farbe:#0fb5a6;display:flex;align-items:flex-start;gap:14px;padding:14px 14px 10px 16px;background:var(--weiss);border-radius:var(--rund);box-shadow:var(--schatten);transition:opacity .25s,transform .25s}
.aufgabe.prio-1{--ring:var(--ring-1);--ring-farbe:#ff2d78}
.aufgabe.prio-2{--ring:var(--ring-2);--ring-farbe:#ff9f1c}
.aufgabe.is-done{opacity:.45;transform:scale(.98)}
.aufgabe form{margin:0}
.abhaken{position:relative;display:grid;place-items:center;width:32px;height:32px;margin-top:1px;padding:0;border:3px solid transparent;border-radius:50%;background:linear-gradient(#fff,#fff) padding-box,var(--ring) border-box;color:var(--ring-farbe);cursor:pointer;transition:transform .15s}
.abhaken::after{content:"";position:absolute;inset:-9px}
.abhaken .ico{width:15px;height:15px;stroke-width:3;opacity:.35;transition:opacity .15s}
.abhaken:hover .ico{opacity:1}
.abhaken:active{transform:scale(.9)}
.aufgabe.prio-1 .abhaken{animation:puls 2.2s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(255,45,120,.5)}70%{box-shadow:0 0 0 12px rgba(255,45,120,0)}100%{box-shadow:0 0 0 0 rgba(255,45,120,0)}}
.aufgabe.is-done .abhaken{background:var(--ring) border-box;color:#fff;animation:none}
.aufgabe.is-done .abhaken .ico{opacity:1}

.aufgabe-inhalt{flex:1;min-width:0}
.aufgabe-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.aufgabe-titel{margin:0;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.dauer{padding:3px 10px;border-radius:999px;background:var(--sonne-weich);color:#b4234f;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.aufgabe-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:6px}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--grau);font-size:13px}
.meta span{display:inline-flex;align-items:center;gap:5px}
.meta .ico{width:14px;height:14px}
.meta-alarm{color:var(--rot);font-weight:700}
.werkzeuge{display:flex;gap:2px;margin-left:auto}
.werkzeug{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;height:38px;padding:0 9px;border:0;border-radius:12px;background:transparent;color:var(--grau);font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.werkzeug .ico{width:18px;height:18px}
.werkzeug:hover{background:var(--grund);color:var(--pink)}
.werkzeug.is-on{background:var(--sonne);color:#fff;box-shadow:0 3px 10px rgba(255,64,104,.3)}

.leer{padding:40px 24px;border:2px dashed #f3c6cf;border-radius:24px;color:var(--grau);text-align:center;background:rgba(255,255,255,.5)}
.leer strong{display:block;margin-bottom:4px;color:var(--tinte);font-size:18px}
.leer-sonne{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:10px;border-radius:50%;background:var(--sonne);color:#fff;box-shadow:0 8px 20px rgba(255,138,61,.35)}
.leer-sonne .ico{width:32px;height:32px}

.meldung{margin:0 0 14px;padding:12px 16px;border-radius:16px;font-weight:600;font-size:15px}
.meldung-ok{background:#ddf6ec;color:#0c6b4c}
.meldung-err{background:#ffe1e7;color:#a8163d}

.unten{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px;height:var(--nav-h);padding:0 10px;border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(42,21,48,.18)}
.unten-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:84px;height:54px;border-radius:999px;color:var(--grau);font-size:12px;font-weight:700;text-decoration:none}
.unten-link .ico{width:22px;height:22px}
.unten-link.is-on{color:var(--pink)}
.unten-neu{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--sonne);color:#fff;box-shadow:0 8px 20px rgba(255,64,104,.45);transition:transform .15s}
.unten-neu:active{transform:scale(.93)}
.unten-neu .ico{width:28px;height:28px;stroke-width:2.6}
.unten-neu span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border:0;border-radius:999px;font-family:var(--schrift);font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .2s}
.knopf:active{transform:scale(.97)}
.knopf:disabled{opacity:.6;cursor:default}
.knopf-sonne{background:var(--sonne);color:#fff;box-shadow:0 8px 20px rgba(255,64,104,.32)}
.knopf-hell{background:var(--weiss);color:var(--tinte);box-shadow:0 0 0 1.5px var(--linie) inset}
.knopf-weiss{background:#fff;color:var(--pink);box-shadow:0 10px 26px rgba(120,0,40,.25)}
.knopf-glas{background:rgba(255,255,255,.18);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.7) inset;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.knopf-rot-voll{background:var(--rot);color:#fff}
.knopf-text{display:inline-flex;align-items:center;gap:8px;padding:12px 6px;border:0;background:none;font-weight:700;cursor:pointer}
.knopf-rot{color:var(--rot)}

.karte{background:var(--weiss);border-radius:24px;box-shadow:var(--schatten);padding:20px}
.karte+.karte{margin-top:14px}
.karte-titel{margin:0 0 12px;font-size:17px;font-weight:800}

.formular{display:flex;flex-direction:column;gap:14px}
.formular h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em}
.formular p{margin:0;color:var(--grau)}
.feld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--grau);letter-spacing:.02em;position:relative}
.feld input{width:100%;min-height:52px;padding:12px 16px;border:2px solid var(--linie);border-radius:16px;background:#fffaf7;color:var(--tinte);font:inherit;font-size:16px;font-weight:500;letter-spacing:0;transition:border-color .15s,background .15s}
.feld input:focus{outline:none;border-color:var(--pink);background:#fff;box-shadow:0 0 0 4px rgba(255,45,120,.12)}
.feld small{font-weight:500;font-size:13px;color:var(--grau)}
.feld.is-err input{border-color:var(--rot)}
.feld.is-err small{color:var(--rot);font-weight:700}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.haken{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--grau);cursor:pointer}
.haken input{width:22px;height:22px;margin:0;accent-color:var(--pink);flex-shrink:0}
.haken.is-err{color:var(--rot);font-weight:700}

.abschnitt{display:flex;align-items:center;justify-content:space-between;margin:10px 2px -4px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.abschnitt-link{font-size:13px;letter-spacing:0;text-transform:none;font-weight:700;text-decoration:none}

.segment{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;background:var(--weiss);border-radius:18px;box-shadow:0 0 0 1.5px var(--linie) inset}
.segment-2{grid-template-columns:1fr 1fr}
.segment button{min-height:46px;border:0;border-radius:14px;background:transparent;color:var(--grau);font-weight:700;font-size:15px;cursor:pointer}
.segment button.is-on{background:var(--tinte);color:#fff}
.segment-prio button.p1.is-on{background:var(--ring-1)}
.segment-prio button.p2.is-on{background:var(--ring-2);color:#4a2600}
.segment-prio button.p3.is-on{background:var(--ring-3)}

.dauer-wahl{display:flex;flex-direction:column;gap:10px}
.feld-zahl{flex-direction:row;align-items:center;max-width:180px}
.feld-zahl input{text-align:center;font-size:20px;font-weight:700;padding-right:52px}
.einheit{position:absolute;right:16px;color:var(--grau);font-size:15px;font-weight:700}

.optionen{display:flex;flex-direction:column;gap:8px}
.schalter{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:18px;background:var(--weiss);box-shadow:0 0 0 1.5px var(--linie) inset;font-weight:700;font-size:15px;cursor:pointer}
.schalter>span:last-child{display:inline-flex;align-items:center;gap:8px}
.schalter input{position:absolute;opacity:0;pointer-events:none}
.schalter-knopf{position:relative;flex:0 0 50px;height:30px;border-radius:999px;background:#e3d2d8;transition:background .2s}
.schalter-knopf::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .2s}
.schalter input:checked+.schalter-knopf{background:var(--sonne)}
.schalter input:checked+.schalter-knopf::after{transform:translateX(20px)}
.schalter input:focus-visible+.schalter-knopf{outline:3px solid var(--meer);outline-offset:2px}
.schalter.is-on{box-shadow:0 0 0 2px #ffb3c8 inset;background:#fff7f9}
.wiederholung{display:flex;align-items:center;gap:10px;padding:4px 16px 8px 76px;font-weight:700;color:var(--grau)}
.wiederholung input{width:84px;min-height:46px;padding:8px;border:2px solid var(--linie);border-radius:14px;background:#fffaf7;text-align:center;font:inherit;font-size:18px;font-weight:700;color:var(--tinte)}
.wiederholung input:focus{outline:none;border-color:var(--pink)}

.leiste{position:sticky;bottom:0;z-index:10;display:flex;gap:10px;margin:8px -16px 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--grund) 70%,rgba(255,245,238,0))}
body:has(.leiste) .unten{display:none}
body:has(.leiste) .inhalt{padding-bottom:16px}
.leiste .knopf-sonne{flex:1}
.loeschen{margin-top:8px;text-align:center}

.zurueck{display:inline-flex;align-items:center;gap:4px;margin:2px 0 0;color:var(--grau);font-weight:700;text-decoration:none;font-size:15px}
.tabs-2 a{flex:1}
.zeile-formular{margin-bottom:14px}
.zeile-formular .knopf{align-self:flex-start}
.kat-liste{padding:6px 8px}
.kat-zeile{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-bottom:1px solid var(--linie)}
.kat-zeile:last-child{border-bottom:0}
.kat-zeile form{margin:0}
.kat-name{flex:1;display:inline-flex;align-items:center;gap:8px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.kat-name .ico{color:var(--pink);width:18px;height:18px}
.kat-anzahl{color:var(--grau);font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.kat-leer{margin:12px;color:var(--grau);text-align:center}

.profil{display:flex;align-items:center;gap:16px;margin:8px 2px 16px}
.profil h1{margin:0;font-size:24px;font-weight:800}
.profil p{margin:2px 0 0;color:var(--grau);overflow-wrap:anywhere}
.profil-bild{display:grid;place-items:center;flex:0 0 72px;height:72px;border-radius:50%;background:linear-gradient(#fff,#fff) padding-box,var(--sonne) border-box;border:4px solid transparent;font-size:30px;font-weight:800;color:var(--pink)}
.profil-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.profil-zahlen div{display:flex;flex-direction:column;align-items:center;padding:12px 6px;border-radius:18px;background:var(--weiss);box-shadow:var(--schatten);color:var(--grau);font-size:13px;font-weight:600}
.profil-zahlen strong{font-size:22px;font-weight:800;color:var(--tinte);font-variant-numeric:tabular-nums}
.install-karte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.install-karte>div{flex:1;min-width:180px;color:var(--grau);font-size:14px}
.install-karte strong{display:block;color:var(--tinte);font-size:16px}
p.install-karte{color:var(--grau);margin:0 0 14px}
.klapp{padding:0}
.klapp summary{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;font-weight:800;cursor:pointer;list-style:none}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary::after{content:"";width:9px;height:9px;border-right:2.5px solid var(--grau);border-bottom:2.5px solid var(--grau);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.klapp[open] summary::after{transform:rotate(-135deg)}
.klapp .formular{padding:0 20px 20px}
.klapp-gefahr summary{color:var(--rot)}
.abmelden{margin:14px 0}
.abmelden .knopf{width:100%}
.rechtliches{text-align:center;color:var(--grau);font-size:14px;margin-top:20px}
.rechtliches a{color:var(--grau)}
.text-seite h1{margin-top:0}
.text-seite h2{font-size:17px;margin:20px 0 6px}
.text-seite p,.text-seite li{color:#4d3a46}

.seite-auth{min-height:100vh;min-height:100dvh;background:linear-gradient(165deg,#ff2d78 0%,#ff5a5f 32%,#ff7a3d 66%,#ffa62e 100%) fixed}
.inhalt-auth{max-width:460px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom))}
.auth-marke{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 22px;color:#fff;text-decoration:none;font-size:30px;text-shadow:0 2px 12px rgba(120,0,40,.25)}
.logo-mittel{width:52px;height:52px;filter:drop-shadow(0 4px 10px rgba(120,0,40,.3))}
.auth .karte{padding:26px 22px;box-shadow:0 24px 60px rgba(120,0,40,.28)}
.auth-links{text-align:center}
.auth-links a{font-weight:700;text-decoration:none}
.auth-unten{text-align:center;color:#fff;font-weight:600;margin-top:20px}
.auth-unten a{color:#fff;font-weight:800}
.inhalt-auth>.meldung{margin-bottom:16px}

.seite-willkommen{min-height:100vh;min-height:100dvh;color:#fff;background:radial-gradient(circle at 80% 12%,rgba(255,226,89,.55),rgba(255,226,89,0) 40%),linear-gradient(170deg,#ff1f7a 0%,#ff3f6c 30%,#ff6a45 60%,#ff8a2e 84%,#ffa62e 100%);overflow-x:hidden}
.inhalt-willkommen{position:relative;overflow-x:clip;max-width:560px;margin:0 auto;padding:calc(30px + env(safe-area-inset-top)) 20px 0}
.inhalt-willkommen>.meldung{position:relative;z-index:2}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:30px}
.hero-sonne{position:absolute;top:-10px;left:50%;width:min(330px,94vw);height:min(330px,94vw);transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#fff3a0 0%,#ffd23f 35%,#ff8a3d 70%,#ff4f7b 100%);opacity:.5;-webkit-mask:linear-gradient(#000 0 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 68%,#000 68% 75%,transparent 75% 80%,#000 80% 86%,transparent 86% 92%,#000 92%);mask:linear-gradient(#000 0 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 68%,#000 68% 75%,transparent 75% 80%,#000 80% 86%,transparent 86% 92%,#000 92%);filter:blur(.3px)}
.logo-gross{position:relative;width:132px;height:132px;margin-top:44px;filter:drop-shadow(0 14px 30px rgba(120,0,40,.35));animation:schweben 6s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-titel{position:relative;margin:26px 0 6px;font-size:clamp(38px,12.5vw,72px);line-height:1;text-shadow:0 6px 24px rgba(120,0,40,.3)}
.hero-claim{position:relative;margin:6px 0 28px;font-size:19px;font-weight:600;line-height:1.35;opacity:.96}
.hero-knoepfe{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}
.hero-knoepfe .knopf{width:100%;min-height:56px;font-size:17px}
.hero-zwischen{margin:42px 0 14px;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.hero-liste{display:flex;flex-direction:column;gap:10px;width:100%;margin:0;padding:0;list-style:none;text-align:left}
.hero-liste li{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:22px;background:rgba(255,255,255,.16);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:15px;line-height:1.4}
.hero-liste li>span{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:14px;background:#fff;color:var(--pink);box-shadow:0 4px 12px rgba(120,0,40,.18)}
.hero-liste strong{display:block;font-size:17px;margin-bottom:2px}
.hero-ios{margin:20px 0 0;font-size:14px;opacity:.9}
.hero-welle{height:90px;margin:20px -20px 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40c160-30 320-30 480 0s320 30 480 0 320-30 480 0v50H0z' fill='%2310b5b8' opacity='.55'/%3E%3Cpath d='M0 58c180-24 360-24 540 0s360 24 540 0 270-18 360-6v38H0z' fill='%230a9aa6'/%3E%3C/svg%3E") no-repeat bottom/100% 100%}

.stat-filter{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.stat-filter .tabs{margin:0}
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kachel{display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:22px;background:var(--weiss);box-shadow:var(--schatten);min-width:0}
.kachel-sonne{grid-column:1/-1;background:var(--sonne);color:#fff;box-shadow:0 12px 28px rgba(255,64,104,.28)}
.kachel-label{font-size:13px;font-weight:700;color:var(--grau)}
.kachel-sonne .kachel-label,.kachel-sonne .kachel-unter{color:rgba(255,255,255,.92)}
.kachel-zahl{display:inline-flex;align-items:center;gap:6px;font-size:44px;font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kachel-zahl-klein{font-size:24px;letter-spacing:-.01em}
.kachel-zahl .ico{width:22px;height:22px;color:var(--orange)}
.kachel-unter{font-size:13px;color:var(--grau);font-weight:600}

.diagramm-karte{padding:18px 16px 14px}
.diagramm-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-bottom:10px}
.diagramm-kopf h2{margin:0;font-size:17px;font-weight:800}
.diagramm-kopf span{color:var(--grau);font-size:13px;font-weight:600}
.legende{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;padding:0;list-style:none;font-size:13px;font-weight:600;color:var(--tinte)}
.legende li{display:inline-flex;align-items:center;gap:6px}
.farbpunkt{display:inline-block;flex:0 0 10px;width:10px;height:10px;border-radius:3px;margin-right:2px}
.diagramm{position:relative;height:250px;--label-h:38px;--achse-b:26px}
.raster{position:absolute;inset:0 0 var(--label-h) 0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.raster-linie{position:relative;height:0;border-top:1px solid #f1e6e9}
.raster-linie:last-child{border-top-color:#dccbd1}
.raster-linie span{position:absolute;left:0;top:-9px;font-size:11px;font-weight:600;color:var(--grau);font-variant-numeric:tabular-nums;background:var(--weiss);padding-right:4px}
.spalten{position:absolute;inset:0 0 0 var(--achse-b);display:flex;gap:4px}
.spalte{flex:1;min-width:0;display:grid;grid-template-rows:1fr var(--label-h);border-radius:10px;cursor:default;outline-offset:0}
.spalte:hover,.spalte:focus-visible,.spalte.is-aktiv{background:rgba(255,45,120,.06)}
.stapel{align-self:end;justify-self:center;display:flex;flex-direction:column-reverse;gap:2px;width:min(72%,26px);height:0;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.segment-teil{flex:1 1 0;min-height:3px}
.segment-teil:last-child{border-radius:4px 4px 0 0}
.spalte-label{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--grau);line-height:1.15;white-space:nowrap}
.spalte-label small{font-size:11px;font-weight:700;color:var(--tinte)}
.spalte.is-jetzt .spalte-label,.spalte.is-jetzt .spalte-label small{color:var(--pink);font-weight:800}
.diagramm-leer{position:absolute;inset:30% 10% auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:16px;background:rgba(255,255,255,.92);color:var(--grau);font-weight:700;text-align:center;font-size:14px}
.diagramm-leer .ico{color:var(--orange)}
.tooltip{position:absolute;z-index:5;min-width:170px;max-width:240px;padding:10px 12px;border-radius:14px;background:var(--tinte);color:#fff;font-size:13px;box-shadow:0 10px 24px rgba(42,21,48,.3);pointer-events:none}
.tooltip strong{display:block;font-size:14px;margin-bottom:4px}
.tooltip .tt-zeile{display:flex;align-items:center;gap:8px;padding:1px 0}
.tooltip .farbpunkt{box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.tooltip .tt-zeile span:nth-child(2){flex:1;color:#e8dbe1}
.tooltip .tt-zeile b{font-variant-numeric:tabular-nums}
.tooltip .tt-summe{margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,.2);color:#e8dbe1}

.kat-tabelle{width:100%;border-collapse:collapse;font-size:14px}
.kat-tabelle th,.kat-tabelle td{padding:9px 6px;border-bottom:1px solid var(--linie);text-align:left}
.kat-tabelle thead th{font-size:12px;font-weight:700;color:var(--grau);text-transform:uppercase;letter-spacing:.05em}
.kat-tabelle tbody tr:last-child th,.kat-tabelle tbody tr:last-child td{border-bottom:0}
.kat-tabelle tbody th{font-weight:700;white-space:nowrap}
.kat-tabelle .farbpunkt{margin-right:8px}
.kat-tabelle .zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kat-tabelle td:nth-child(2){width:40%}
.balken{display:block;height:10px;border-radius:999px;background:#f6ecef;overflow:hidden}
.balken-wert{display:block;height:100%;width:0;border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}

.farbe-e8336d{background:#e8336d}
.farbe-0f9fa6{background:#0f9fa6}
.farbe-f07a1a{background:#f07a1a}
.farbe-6b4fd6{background:#6b4fd6}
.farbe-d9a400{background:#d9a400}
.farbe-2a78d6{background:#2a78d6}
.farbe-3a9a3c{background:#3a9a3c}
.farbe-a03c7a{background:#a03c7a}
.farbe-a3acb6{background:#a3acb6}

@media (min-width:600px){
.kacheln{grid-template-columns:1.4fr 1fr 1fr}
.kachel-sonne{grid-column:auto}
.stat-filter{flex-direction:row;align-items:center}
.stat-filter .tabs{flex:0 0 300px}
.diagramm{height:280px}
.spalten{gap:8px}
}
@media (max-width:420px){
.werkzeug-text{display:none}
.filter{flex-direction:column;align-items:stretch}
.sortierung select{width:100%}
.unten-link{width:72px}
.diagramm .spalten{gap:2px}
.kat-tabelle td:nth-child(2){width:28%}
}
@media (hover:hover) and (pointer:fine){
.chips{flex-wrap:wrap;overflow:visible}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}
@media (forced-colors:active){
.segment-teil,.farbpunkt,.balken-wert{forced-color-adjust:none}
}

.menue{padding:4px 0;overflow:hidden}
.menue-zeile,.profil-zeile{display:flex;align-items:center;gap:14px;padding:12px 16px;color:var(--tinte);text-decoration:none}
.menue-zeile+.menue-zeile{border-top:1px solid var(--linie)}
.menue-zeile:hover,.profil-zeile:hover{background:#fffaf7}
.menue-zeile>.ico,.profil-zeile>.ico{color:#c9b3bd}
.menue-ico{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:var(--sonne-weich);color:var(--pink)}
.menue-ico .ico{width:19px;height:19px}
.menue-ico-gruen{background:#ddf6ec;color:var(--ok)}
.menue-text{flex:1;min-width:0;display:flex;flex-direction:column}
.menue-text strong{font-size:16px;font-weight:700}
.menue-text small{font-size:13px;color:var(--grau);overflow-wrap:anywhere}
.profil-zeile{padding:16px}
.profil-bild-klein{flex:0 0 52px;height:52px;font-size:22px;border-width:3px}
.klapp summary .menue-text{margin-left:14px}
.klapp summary{justify-content:flex-start;padding:12px 16px}
.klapp summary::after{margin-left:auto}
.versionen{padding:0 20px 16px}
.versionen h3{margin:12px 0 4px;font-size:15px}
.versionen ul,.update-karte ul{margin:0;padding-left:20px;color:#4d3a46;font-size:14px}
.daten-karte{display:flex;flex-direction:column;gap:12px}
.daten-karte p{display:flex;align-items:center;gap:12px;margin:0;font-size:14px;color:#4d3a46}
.daten-karte small{color:var(--grau);font-size:13px}
.update-karte{margin-bottom:16px;padding:16px 18px;background:linear-gradient(#fff,#fff) padding-box,var(--sonne) border-box;border:2px solid transparent}
.update-karte strong{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--pink)}
.fuss-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:14px 16px calc(18px + env(safe-area-inset-bottom));font-size:14px;font-weight:600}
.fuss-links a{color:#fff;text-decoration:none;opacity:.92}
.fuss-links a:hover{text-decoration:underline}
.seite-willkommen .fuss-links{background:#0a9aa6}
.abschnitt+.karte,.abschnitt+.install-karte{margin-top:12px}
.klapp summary .menue-text small{font-weight:500}
.meldung{display:flex;align-items:center;gap:8px}
.meldung .ico{width:18px;height:18px;stroke-width:3;flex-shrink:0}
.post-karte{align-items:center;text-align:center}
.post-karte p{margin:0}
.post-karte strong{color:var(--tinte);overflow-wrap:anywhere}
.post-symbol{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--sonne);color:#fff;box-shadow:0 10px 24px rgba(255,64,104,.35)}
.post-symbol .ico{width:36px;height:36px}
.post-klein{font-size:14px}
.formular>p{margin-top:-6px}
.text-seite h3{font-size:16px;margin:18px 0 6px}
.text-seite h4{font-size:15px;margin:14px 0 4px}
.text-seite{overflow-wrap:anywhere}
.kat-zeile{display:block;padding:0}
.kat-zeile>summary{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;list-style:none;cursor:pointer}
.kat-zeile>summary::-webkit-details-marker{display:none}
.kat-zeile[open]>summary .werkzeug{background:var(--sonne);color:#fff}
.kat-bearbeiten{display:flex;flex-direction:column;gap:6px;padding:4px 10px 14px}
.kat-umbenennen{display:flex;gap:8px;align-items:flex-start}
.kat-umbenennen .feld{flex:1}
.kat-umbenennen .knopf{min-height:52px;padding:0 16px}
.kat-bearbeiten .knopf-text{align-self:flex-start;padding-left:0}
.feld textarea{width:100%;min-height:180px;padding:12px 16px;border:2px solid var(--linie);border-radius:16px;background:#fffaf7;color:var(--tinte);font:inherit;font-size:16px;font-weight:500;letter-spacing:0;line-height:1.5;resize:vertical}
.feld textarea:focus{outline:none;border-color:var(--pink);background:#fff;box-shadow:0 0 0 4px rgba(255,45,120,.12)}
.feld.is-err textarea{border-color:var(--rot)}
.versionen ol{margin:0;padding-left:20px;color:#4d3a46;font-size:14px}
.versionen ol li+li{margin-top:4px}
.versionen p{color:#4d3a46;font-size:14px;margin:4px 0 0}
.anleitung{margin-bottom:14px}
.hinweis-klein{margin:0;color:var(--grau);font-size:13px}
.info-pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:var(--sonne-weich);color:#8a1d43;font-size:14px;font-weight:700}
.pill .ico{width:14px;height:14px}
.import-liste{padding:4px 6px}
.import-zeile{display:flex;align-items:flex-start;gap:12px;padding:10px;border-bottom:1px solid var(--linie);cursor:pointer}
.import-zeile:last-child{border-bottom:0}
.import-zeile input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--pink);flex-shrink:0}
.import-zeile span{font-weight:600;overflow-wrap:anywhere}
.import-zeile small{display:block;font-weight:600;font-size:12px;color:var(--orange)}
.import-zeile:has(input:not(:checked)) span{color:var(--grau);font-weight:500}
.daten-karte .knopf{width:100%}
.kopier-zeile{display:flex;gap:8px}
.kopier-zeile input{flex:1;min-width:0;font-size:14px}
.kopier-zeile .knopf{width:auto;flex:0 0 52px;padding:0}
.meldung-hinweis{margin-top:14px;background:#fff1dc;color:#7a4300;font-weight:600;align-items:flex-start}
.meldung-hinweis .ico{margin-top:2px}
.kalender-knoepfe{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 4px 0}
.kalender-knoepfe form{margin:0}
.js-kopieren.is-kopiert{background:#ddf6ec;color:var(--ok)}