/* Hirnwetter – Stylesheet. Textgrößen in rem, damit die Schriftgröße-Einstellung überall greift. */
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-italic.woff2) format("woff2");font-weight:500 800;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito";src:url(../fonts/nunito.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --ink:#27264A; --ink2:#55557A; --ink3:#6E6D8F;
  --cream:#FFF8F1; --peach:#FFE3CC; --coral:#F2896B; --coral-d:#C2603F;
  --lav:#E4DFFA; --lav2:#C9C1F2; --sky:#D7ECFA; --mint:#D6F1E4; --sun:#FFC85A;
  --card:rgba(255,255,255,.8); --line:rgba(39,38,74,.08); --line2:rgba(39,38,74,.14);
  --r-lg:22px; --shadow:0 1px 2px rgba(39,38,74,.05),0 8px 24px -8px rgba(39,38,74,.14);
  --safe-t:max(env(safe-area-inset-top),14px); --safe-b:env(safe-area-inset-bottom);
  --tabh:calc(74px + var(--safe-b));
}
html{font-size:100%;-webkit-text-size-adjust:100%;background:#F3EEE9}
html.fs-1{font-size:112.5%} html.fs-2{font-size:125%}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Nunito",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100dvh;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:3px solid #6B60C9;outline-offset:3px;border-radius:12px}
.serif{font-family:"Fraunces",Georgia,serif;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;background:var(--cream);overflow-x:hidden}
@media (min-width:520px){#app{box-shadow:0 0 0 1px var(--line),0 30px 80px -40px rgba(39,38,74,.4)}}

/* ---------- Screen-Grundgerüst ---------- */
.screen{min-height:100dvh;display:flex;flex-direction:column;position:relative;animation:in .28s ease-out both}
.screen.has-tabs{padding-bottom:var(--tabh)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.content{flex:1;padding:var(--safe-t) 22px 24px;display:flex;flex-direction:column;position:relative;z-index:2;min-height:0}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:10px}
.iconbtn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.75);display:grid;place-items:center;box-shadow:var(--shadow);flex:none;color:var(--ink);transition:transform .15s}
.iconbtn:active{transform:scale(.94)}
.brandrow{display:flex;align-items:center;gap:8px}
.brandrow span{font-family:"Fraunces";font-size:1.25rem;font-weight:600}
.eyebrow{font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7)}
.btn{min-height:58px;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:1.0625rem;padding:0 20px;text-align:center;transition:transform .15s,opacity .15s;width:100%}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--ink);color:#fff;box-shadow:0 10px 24px -10px rgba(39,38,74,.6)}
.btn.ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1px solid var(--line2)}
.btn.coral{background:var(--coral);color:#fff}
.btn.small{min-height:46px;font-size:.9375rem;border-radius:16px}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{font-weight:800;color:var(--ink2);font-size:.9375rem;padding:12px;text-align:center;display:block;width:100%;text-decoration:none}
.pill{min-height:30px;padding:4px 12px;border-radius:15px;background:rgba(255,255,255,.78);font-size:.8125rem;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line)}
.ally{margin-top:14px;font-size:.84rem;color:var(--ink2);font-weight:600;display:flex;align-items:center;gap:8px;justify-content:center;text-align:center}
.h2{font-family:"Fraunces";font-size:1.875rem;font-weight:600;line-height:1.1}
.lead{font-size:.97rem;color:var(--ink2);font-weight:600;line-height:1.5}

/* ---------- Tabbar ---------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:var(--tabh);display:flex;justify-content:space-around;align-items:flex-start;padding-top:10px;background:rgba(255,250,245,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);z-index:20}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.72rem;font-weight:700;color:var(--ink3);width:76px;padding:2px 0;border-radius:14px}
.tab.on{color:var(--ink)}
.tab .dot{width:5px;height:5px;border-radius:50%;background:var(--coral);opacity:0}
.tab.on .dot{opacity:1}

/* ---------- Heute ---------- */
.s-home{background:linear-gradient(180deg,#FFE7D3 0%,#FFF3E8 34%,var(--cream) 60%)}
.hello{font-size:.94rem;color:var(--ink2);font-weight:700;margin-top:10px}
.h-title{font-size:2.06rem;line-height:1.08;font-weight:600;margin-top:6px}
.h-title em{font-style:italic;color:var(--coral-d)}
.hero{display:block;height:132px;margin:6px -4px 8px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{min-height:112px;border-radius:22px;padding:12px 14px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .15s}
.tile:active{transform:scale(.97)}
.tile .t{font-weight:800;font-size:1.0625rem;line-height:1.2;hyphens:auto;-webkit-hyphens:auto}
.tile .s{font-size:.8125rem;color:var(--ink2);font-weight:600;margin-top:2px;line-height:1.3}
.tile svg{display:block;flex:none}
.tile.more{background:rgba(255,255,255,.55);border:1.5px dashed rgba(39,38,74,.18);box-shadow:none}
.today-card{margin-top:14px;padding:14px 16px;display:flex;gap:12px;align-items:center;text-align:left;width:100%}
.today-card .mini{width:40px;height:40px;border-radius:14px;background:#fff;display:grid;place-items:center;flex:none}
.today-card b{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:800}
.today-card span{display:block;font-weight:700;font-size:.97rem;line-height:1.35;margin-top:2px}
.today-card .go{margin-left:auto;color:var(--ink3)}
.urgent{margin-top:12px;font-size:.875rem;font-weight:800;color:#B4472F;display:flex;gap:8px;align-items:center;justify-content:center;padding:10px;border-radius:14px;background:rgba(255,227,220,.55);width:100%}

/* ---------- Check ---------- */
.s-check{background:linear-gradient(180deg,var(--qbg1,#E9E5FB) 0%,var(--qbg2,#F1EEFC) 40%,#FBF8F4 100%)}
.dots{display:flex;gap:8px}
.dots i{width:28px;height:8px;border-radius:4px;background:rgba(39,38,74,.14);transition:background .3s}
.dots i.on{background:var(--ink)} .dots i.done{background:#8C84D9}
.q{font-size:1.94rem;line-height:1.12;font-weight:600;margin-top:4px}
.q-sub{font-size:.97rem;color:var(--ink2);margin-top:8px;line-height:1.45;font-weight:600}
.q-ill{display:block;height:auto;max-height:200px;aspect-ratio:346/200;width:100%;margin:6px 0 4px}
.chips{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.chip{min-height:60px;border-radius:20px;background:rgba(255,255,255,.85);border:1.5px solid rgba(39,38,74,.07);display:flex;align-items:center;gap:14px;padding:10px 18px;font-weight:700;font-size:1.03rem;box-shadow:0 2px 8px -4px rgba(39,38,74,.12);transition:background .15s,color .15s,transform .15s;width:100%;line-height:1.25}
.chip:active{transform:scale(.985)}
.chip .e{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none}
.chip.sel{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 12px 24px -12px rgba(39,38,74,.7)}
.chip .chk{margin-left:auto;flex:none}
.chip.akut{background:rgba(255,236,231,.9);border-color:#FFD3C7}
.chip.akut.sel{background:#B4472F;border-color:#B4472F}
.skip{text-align:center;margin-top:auto;padding:16px 0 8px;font-weight:700;color:var(--ink3);font-size:.94rem;width:100%}
.own{margin-top:14px}
.own textarea{width:100%;min-height:120px;border-radius:20px;border:1.5px solid var(--line2);background:rgba(255,255,255,.9);padding:14px 16px;font-size:1rem;font-weight:600;line-height:1.45;resize:vertical}
.own small{display:block;margin-top:8px;color:var(--ink3);font-weight:600;font-size:.8125rem}

/* ---------- Bericht ---------- */
.s-report{background:linear-gradient(180deg,var(--rbg1,#DCE7F2) 0%,var(--rbg2,#EEF1F4) 42%,#FBF7F2 70%)}
.scene{margin:-4px -22px 0;height:184px;position:relative;z-index:0}
.scene-svg{display:block;width:100%;height:196px;position:absolute;top:-8px;left:0}
.r-title{font-size:2.375rem;font-weight:600;line-height:1;position:relative}
.r-meta{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.reframe{padding:18px 18px 16px;margin-top:16px}
.reframe h3{font-family:"Fraunces";font-size:1.44rem;font-weight:600;font-style:italic;line-height:1.18}
.reframe p{font-size:.94rem;line-height:1.5;color:var(--ink2);margin-top:8px;font-weight:600}
.ally2{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line2);font-size:.84rem;font-weight:700;color:var(--ink2)}
.ally2 .more{margin-left:auto;font-weight:800;color:#6B60C9;font-size:.84rem;padding:6px 0 6px 8px;flex:none}
.step{margin-top:12px;padding:16px 18px;display:flex;gap:14px;align-items:center;background:#FFF1E4;border:1px solid #FFE0C7;border-radius:var(--r-lg)}
.step .ring{flex:none}
.step .txt{flex:1}
.step .txt b{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#A4532F;font-weight:800}
.step .txt span{display:block;font-size:.97rem;font-weight:700;line-height:1.35;margin-top:4px}
.r-actions{display:flex;gap:10px;margin-top:14px}
.r-actions .btn.primary{flex:1;width:auto}
.r-actions .btn.ghost{width:58px;padding:0;flex:none}
.helpcard{margin-top:14px;padding:16px 18px;border-radius:var(--r-lg);background:#FFECE6;border:1.5px solid #FFC9BA}
.helpcard h4{font-size:1rem;font-weight:800;color:#8E3420}
.helpcard p{font-size:.9rem;font-weight:600;color:var(--ink2);margin-top:4px;line-height:1.45}
.extra-row{display:flex;gap:10px;margin-top:12px}
.extra-row .btn{flex:1;white-space:nowrap;padding-left:10px;padding-right:10px;gap:6px}
.ally2 svg{flex:none}

/* ---------- Timer ---------- */
.s-timer{background:linear-gradient(180deg,#FFF1E4 0%,var(--cream) 60%)}
.timer-wrap{display:flex;flex-direction:column;align-items:center;margin-top:12px}
.tring{width:min(250px,68vw);height:auto;aspect-ratio:1;display:block}
.tring .bg{stroke:#FFE0C7}.tring .fg{stroke:var(--coral);transition:stroke-dashoffset .9s linear}
.ttime{font-family:"Fraunces";font-weight:600;font-size:3.4rem;fill:var(--ink)}
.tstep{font-size:1.125rem;font-weight:700;text-align:center;line-height:1.4;margin-top:18px}
.how{margin-top:16px;padding:14px 16px;width:100%}
.how b{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:800}
.how li{list-style:none;font-weight:600;color:var(--ink2);font-size:.94rem;line-height:1.45;margin-top:6px;padding-left:18px;position:relative}
.how li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.tbtns{display:flex;gap:10px;margin-top:auto;padding-top:18px;width:100%}
.tbtns .btn{flex:1}

/* ---------- Belohnung ---------- */
.s-reward{background:linear-gradient(180deg,#FFE4D2 0%,#F3E6FA 40%,var(--cream) 70%);text-align:center}
.s-reward .p-ill{margin:20px -22px 0}
.rw-title{font-size:2.6rem;font-weight:600;margin-top:10px}
.rw-sub{margin-top:10px}
.confetti i{position:absolute;width:8px;height:8px;border-radius:2px;top:-10px;animation:fall 2.4s ease-in forwards;opacity:.9}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:0}}

/* ---------- Wetterkarte ---------- */
.s-map{background:linear-gradient(180deg,#FDF1E6 0%,var(--cream) 30%)}
.seg{display:flex;background:rgba(39,38,74,.06);border-radius:14px;padding:4px;margin-top:12px}
.seg button{flex:1;min-height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:800;font-size:.906rem;color:var(--ink3);text-align:center}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:12px 8px 10px;margin-top:14px}
.day{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;font-weight:800;color:var(--ink3);padding:6px 0;border-radius:14px}
.day.today{background:var(--ink);color:#fff}
.day.today .ic{background:#fff;border-radius:10px;display:grid;place-items:center;width:34px;height:34px}
.day .ic{height:34px;display:grid;place-items:center}
.day small{font-size:.72rem;font-weight:700;opacity:.85}
.weeknav{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.weeknav b{font-size:.94rem;font-weight:800}
.weeknav .iconbtn{width:38px;height:38px}
.insight{margin-top:12px;padding:16px 18px;background:linear-gradient(135deg,#ECE8FD,#F6F0FF);border:1px solid #E1DBFA;border-radius:var(--r-lg)}
.insight b{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#5B50B8;font-weight:800}
.insight p{font-size:1rem;font-weight:700;line-height:1.4;margin-top:6px}
.insight p span{color:var(--ink2);font-weight:600;font-size:.906rem;display:block;margin-top:6px}
.insight.empty{background:rgba(255,255,255,.7);border:1.5px dashed var(--line2)}
.heat{margin-top:12px;padding:16px 16px 14px}
.heat h4{font-size:.94rem;font-weight:800;display:flex;justify-content:space-between;gap:8px}
.heat h4 span{color:var(--ink3);font-weight:700;font-size:.8125rem}
.hgrid{display:grid;grid-template-columns:minmax(64px,auto) repeat(7,1fr);gap:5px;margin-top:12px;align-items:center}
.hgrid .lb{font-size:.75rem;font-weight:700;color:var(--ink3)}
.hgrid .c{height:22px;border-radius:7px}
.l0{background:#F4F2F8}.l1{background:#E4DFFA}.l2{background:#C9C1F2}.l3{background:#9F95E3}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat{padding:12px}
.stat b{font-family:"Fraunces";font-size:1.625rem;font-weight:600;display:block;line-height:1}
.stat span{font-size:.78rem;color:var(--ink2);font-weight:700;margin-top:4px;display:block}
.cal{padding:12px 10px;margin-top:12px}
.cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .wd{text-align:center;font-size:.72rem;font-weight:800;color:var(--ink3);padding-bottom:4px}
.cal .cd{aspect-ratio:1/1.15;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--ink3);gap:1px}
.cal .cd.has{background:rgba(255,255,255,.9)}
.cal .cd.today{outline:2px solid var(--ink);outline-offset:-2px}
.lockcard{margin-top:14px;padding:22px 18px;text-align:center}
.lockcard h3{font-family:"Fraunces";font-size:1.4rem;font-weight:600;margin-top:8px}
.lockcard p{margin:6px 0 14px}
.history{margin-top:12px;padding:6px 16px}
.history .row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.history .row:last-child{border:0}
.history .row b{font-size:.94rem;font-weight:800;display:block}
.history .row span{font-size:.8125rem;color:var(--ink2);font-weight:600}
.history .row .rb{margin-left:auto;flex:none}
.sect{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-top:20px}

/* ---------- Häppchen ---------- */
.s-learn{background:linear-gradient(180deg,#EAF4FB 0%,var(--cream) 34%)}
.hp-today{margin-top:14px;padding:18px;background:linear-gradient(135deg,#FFF1E4,#FFE8F0);border:1px solid #FFE0C7;border-radius:var(--r-lg);text-align:left;width:100%;display:block}
.hp-today b{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#A4532F;font-weight:800}
.hp-today h3{font-family:"Fraunces";font-size:1.5rem;font-weight:600;line-height:1.15;margin-top:6px}
.hp-today p{font-size:.94rem;font-weight:600;color:var(--ink2);margin-top:6px;line-height:1.45}
.hp-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.hp-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.8);border:1px solid var(--line);width:100%;text-align:left}
.hp-item .num{width:34px;height:34px;border-radius:12px;background:var(--lav);display:grid;place-items:center;font-weight:800;font-size:.875rem;color:#5B50B8;flex:none}
.hp-item.read .num{background:var(--mint);color:#2F7A57}
.hp-item .tt{flex:1;min-width:0}
.hp-item .tt b{display:block;font-weight:800;font-size:.97rem;line-height:1.25}
.hp-item .tt span{display:block;font-size:.8125rem;color:var(--ink2);font-weight:600;margin-top:2px;line-height:1.3}
.hp-item .lk{color:var(--ink3);flex:none}
.progress{height:8px;border-radius:4px;background:rgba(39,38,74,.08);overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#9ED8B8,#7CC4A0);border-radius:4px}
.s-hp{background:linear-gradient(180deg,#F3EEFC 0%,var(--cream) 40%)}
.hp-art{display:grid;place-items:center;height:120px;margin-top:6px}
.hp-art svg{transform:scale(2.2)}
.hp-title{font-size:2rem;font-weight:600;line-height:1.1;margin-top:10px}
.hp-lead{font-size:1.06rem;font-weight:700;color:var(--ink2);margin-top:8px;line-height:1.4}
.hp-body p{font-size:1rem;line-height:1.6;font-weight:600;margin-top:14px;color:var(--ink)}
.try{margin-top:18px;padding:16px 18px;background:#FFF1E4;border:1px solid #FFE0C7;border-radius:var(--r-lg)}
.try b{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#A4532F;font-weight:800}
.try p{font-size:1rem;font-weight:700;margin-top:4px;line-height:1.4}
.disclaimer{font-size:.8125rem;color:var(--ink3);font-weight:600;line-height:1.45;margin-top:16px;text-align:center}

/* ---------- Ich ---------- */
.s-me{background:linear-gradient(180deg,#F1ECFB 0%,var(--cream) 30%)}
.group{margin-top:10px;padding:4px 16px}
.row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.group > .row:last-child,.group > :last-child .row{border-bottom:0}
.row .lbl{flex:1;font-weight:700;font-size:.97rem;line-height:1.3}
.row .lbl small{display:block;font-size:.8125rem;color:var(--ink2);font-weight:600;margin-top:2px}
.row .val{color:var(--ink3);font-weight:700;font-size:.875rem}
.row.danger .lbl{color:#B4472F}
.toggle{width:52px;height:32px;border-radius:16px;background:rgba(39,38,74,.18);position:relative;flex:none;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.toggle[aria-checked="true"]{background:#3FA27A}
.toggle[aria-checked="true"]::after{transform:translateX(20px)}
.fs-seg{display:flex;gap:6px;flex:none}
.fs-seg button{width:44px;height:40px;border-radius:12px;background:rgba(39,38,74,.06);font-weight:800;display:grid;place-items:center;color:var(--ink2)}
.fs-seg button.on{background:var(--ink);color:#fff}
.namefield{width:100%;min-height:52px;border-radius:16px;border:1.5px solid var(--line2);background:#fff;padding:0 14px;font-weight:700;font-size:1rem}
.plusbadge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:800;background:linear-gradient(135deg,#FFD27A,#F7A487);color:#5A2A12;padding:4px 10px;border-radius:10px}
.textpage p,.textpage li{font-size:.97rem;line-height:1.6;font-weight:600;color:var(--ink2);margin-top:10px}
.textpage h3{font-size:1.06rem;font-weight:800;margin-top:20px}
.textpage ul{padding-left:20px}

/* ---------- Hilfe ---------- */
.helprow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:1px solid var(--line);margin-top:8px;text-decoration:none}
.helprow .who{flex:1;min-width:0}
.helprow .top{display:flex;align-items:center;gap:8px}
.helprow .nr{font-family:"Fraunces";font-weight:700;font-size:1.3rem;line-height:1.2;color:var(--ink);white-space:nowrap}
.helprow .nm{display:block;font-size:.8125rem;color:var(--ink2);font-weight:600;line-height:1.35;margin-top:2px}
.helprow .nm b{font-weight:800;color:var(--ink)}
.helprow .call{width:40px;height:40px;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:#2F7A57;flex:none}
.land{font-size:.7rem;font-weight:800;background:var(--lav);color:#5B50B8;padding:2px 7px;border-radius:6px;letter-spacing:.04em}

/* ---------- Plus ---------- */
.s-plus{background:linear-gradient(180deg,#FFE4D2 0%,#F3E6FA 38%,var(--cream) 64%)}
.p-ill{display:block;height:146px;margin:0 -22px}
.p-title{font-size:2.125rem;font-weight:600;line-height:1.08;text-align:center}
.p-sub{text-align:center;color:var(--ink2);font-weight:600;font-size:.97rem;margin-top:8px;line-height:1.45}
.feat{margin-top:14px;display:flex;flex-direction:column;gap:9px;padding:0 6px}
.feat div{display:flex;gap:12px;align-items:center;font-weight:700;font-size:.97rem;line-height:1.3}
.feat i{width:26px;height:26px;border-radius:9px;background:var(--mint);display:grid;place-items:center;flex:none}
.plans{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.plan{min-height:64px;border-radius:20px;background:rgba(255,255,255,.8);border:1.5px solid var(--line2);display:flex;align-items:center;padding:8px 18px;gap:14px;width:100%}
.plan.sel{border:2px solid var(--ink);background:#fff}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(39,38,74,.25);flex:none}
.plan.sel .radio{border:7px solid var(--ink)}
.plan .n{font-weight:800;font-size:1.03rem}
.plan .d{font-size:.8125rem;color:var(--ink2);font-weight:700}
.plan .pr{margin-left:auto;text-align:right;font-weight:800;font-size:1.06rem;white-space:nowrap}
.plan .pr small{display:block;font-size:.75rem;color:var(--ink3);font-weight:700}
.badge{font-size:.6875rem;font-weight:800;background:var(--mint);color:#2F7A57;padding:3px 8px;border-radius:8px;margin-left:6px;vertical-align:2px}
.fine{text-align:center;font-size:.78rem;color:var(--ink3);font-weight:600;line-height:1.5;margin-top:10px}

/* ---------- Onboarding ---------- */
.s-onb{background:linear-gradient(180deg,#FFE7D3 0%,#FFF3E8 40%,var(--cream) 70%)}
.s-onb.o2{background:linear-gradient(180deg,#E9E5FB 0%,#F4F1FC 40%,var(--cream) 70%)}
.s-onb.o3{background:linear-gradient(180deg,#E3F3EB 0%,#F1F8F4 40%,var(--cream) 70%)}
.onb-title{font-size:2.25rem;font-weight:600;line-height:1.08;margin-top:8px}
.onb-title em{font-style:italic;color:var(--coral-d)}
.onb-steps{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.onb-steps div{display:flex;gap:12px;align-items:flex-start;font-weight:700;line-height:1.4;font-size:.97rem}
.onb-steps i{width:28px;height:28px;border-radius:10px;background:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.875rem;flex:none;box-shadow:var(--shadow)}
.safety{margin-top:14px;padding:16px 18px}
.safety p{font-size:.94rem;font-weight:600;line-height:1.5;color:var(--ink2)}
.safety p+p{margin-top:8px}
.check{display:flex;gap:12px;align-items:center;margin-top:14px;font-weight:800;font-size:.97rem;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.8);border:1.5px solid var(--line2);width:100%;text-align:left}
.check .box{width:26px;height:26px;border-radius:8px;border:2px solid rgba(39,38,74,.3);display:grid;place-items:center;flex:none;background:#fff}
.check[aria-checked="true"] .box{background:var(--ink);border-color:var(--ink)}
.check[aria-checked="true"] .box::after{content:"";width:12px;height:7px;border:solid #fff;border-width:0 0 3px 3px;transform:rotate(-45deg) translate(1px,-1px)}
.onb-dots{display:flex;gap:6px;justify-content:center;margin:14px 0 4px}
.onb-dots i{width:8px;height:8px;border-radius:4px;background:rgba(39,38,74,.18)}
.onb-dots i.on{width:24px;background:var(--ink)}
.bottom{margin-top:auto;padding-top:16px}

/* ---------- Sheet, Toast, Dialog ---------- */
.backdrop{position:fixed;inset:0;background:rgba(39,38,74,.35);z-index:40;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;max-height:88dvh;overflow:auto;background:var(--cream);border-radius:28px 28px 0 0;padding:10px 20px calc(20px + var(--safe-b));z-index:41;animation:up .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes up{from{transform:translate(-50%,100%)}}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:rgba(39,38,74,.18);margin:0 auto 12px}
.sheet h2{font-family:"Fraunces";font-size:1.5rem;font-weight:600;line-height:1.15}
.sheet .lead{margin-top:6px}
.sheet .tiles{margin-top:14px}
.sheet .tile{min-height:104px}
.lock-tag{position:absolute;top:10px;right:10px;font-size:.6875rem;font-weight:800;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.85);color:var(--ink2);display:flex;align-items:center;gap:4px}
.needs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.needs button{padding:10px 14px;border-radius:14px;background:#fff;border:1.5px solid var(--line2);font-weight:700;font-size:.9rem}
.needs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.transcard{margin-top:14px;padding:18px;border-radius:22px;background:linear-gradient(135deg,#ECE8FD,#FFF1E4);font-family:"Fraunces";font-size:1.25rem;font-weight:600;line-height:1.35}
.toast{position:fixed;left:50%;top:calc(var(--safe-t) + 8px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:16px;font-weight:700;font-size:.94rem;z-index:60;max-width:calc(100% - 40px);width:max-content;text-align:center;animation:toast 2.6s both;box-shadow:0 10px 30px -10px rgba(39,38,74,.6)}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-8px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* ---------- Bewegung ---------- */
.bob{animation:bob 5s ease-in-out infinite;transform-box:fill-box}
.drift-a{animation:drift 14s ease-in-out infinite alternate}
.drift-b{animation:drift 18s ease-in-out infinite alternate-reverse}
.sun-pulse{animation:pulse 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.flash{animation:flash 4s ease-in-out infinite}
.rain{animation:rain 1.4s linear infinite}
.float{animation:bob 6s ease-in-out infinite}.float.f1{animation-delay:-1.5s}.float.f2{animation-delay:-3s}.float.f3{animation-delay:-4.5s}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes drift{to{transform:translateX(12px)}}
@keyframes pulse{50%{transform:scale(1.04)}}
@keyframes flash{0%,80%,100%{opacity:1}84%{opacity:.25}88%{opacity:1}92%{opacity:.4}}
@keyframes rain{from{transform:translateY(-6px);opacity:.2}50%{opacity:.9}to{transform:translateY(8px);opacity:.2}}
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){html:not(.rm-off) *,html:not(.rm-off) *::before,html:not(.rm-off) *::after{animation:none!important;transition:none!important}}

/* ---------- Hoher Kontrast ---------- */
html.hc{--ink2:#2E2D52;--ink3:#3F3E63;--card:#fff;--line:rgba(39,38,74,.3);--line2:rgba(39,38,74,.45)}
html.hc .card,html.hc .chip,html.hc .tile,html.hc .plan,html.hc .hp-item,html.hc .pill{border:1.5px solid rgba(39,38,74,.55);background:#fff}
html.hc .tile .s,html.hc .lead,html.hc .reframe p{color:#2E2D52}
html.hc .chip.sel{background:var(--ink);color:#fff}
html.hc .tab{color:#3F3E63}
html.hc .h-title em,html.hc .onb-title em{color:#9A3F22}
html.hc :focus-visible{outline:4px solid #000}
[data-focus]:focus{outline:none}
.onb-promise{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.onb-promise span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:.84rem;font-weight:700;color:var(--ink2)}
.onb-promise span svg{color:var(--coral)}
.btn.danger{background:#B83A26;color:#fff;box-shadow:0 10px 24px -12px rgba(184,58,38,.7)}
.fs-2 .tile .t{font-size:.94rem}.fs-1 .tile .t{font-size:1rem}