/* Abendhafen – Stylesheet. Dunkle, warme Nachtpalette. 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{
  --bg:#10162F; --bg2:#161E3E; --bg3:#1E2850;
  --ink:#F5EDDF; --ink2:#CFC9DE; --ink3:#A6A3C2; --dark:#1A1630;
  --amber:#F4B860; --amber-d:#E39A3B; --moon:#F6E7C8; --sea:#6FA9C9; --lav:#C79BE0; --mint:#7CC4A0; --rose:#D98A7A;
  --card:rgba(255,255,255,.06); --card2:rgba(255,255,255,.1); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --r-lg:22px; --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 28px -12px rgba(0,0,0,.55);
  --safe-t:max(env(safe-area-inset-top),14px); --safe-b:env(safe-area-inset-bottom);
  --tabh:calc(74px + var(--safe-b));
  color-scheme:dark;
}
html{font-size:100%;-webkit-text-size-adjust:100%;background:#0A0F24}
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 var(--amber);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}
.muted{color:var(--ink3);font-weight:600}
#app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;background:var(--bg);overflow-x:hidden;overflow-x:clip}
@media (min-width:520px){#app{box-shadow:0 0 0 1px var(--line),0 30px 80px -40px rgba(0,0,0,.8)}}
::placeholder{color:#8E8BAE;opacity:1}

/* ---------- Grundgerüst ---------- */
.screen{min-height:100dvh;display:flex;flex-direction:column;position:relative;animation:in .3s 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,.1);border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--ink);transition:transform .15s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.iconbtn:active{transform:scale(.94)}
.brandrow{display:flex;align-items:center;gap:9px}
.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);border:1px solid var(--line)}
.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,.btn.amber{background:var(--amber);color:var(--dark);box-shadow:0 12px 28px -12px rgba(244,184,96,.65)}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--ink);border:1px solid var(--line2)}
.btn.moon{background:var(--moon);color:var(--dark)}
.btn.small{min-height:46px;font-size:.9375rem;border-radius:16px;width:auto;display:inline-flex}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.danger{background:#C2513A;color:#fff}
.link{font-weight:800;color:var(--ink2);font-size:.9375rem;padding:12px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;text-decoration:none}
.link.danger{color:#F0A08E}
.ally{margin-top:16px;font-size:.875rem;color:var(--ink2);font-weight:600;display:flex;align-items:center;gap:8px;justify-content:center;text-align:center;line-height:1.4}
.ally svg{flex:none;color:var(--amber)}
.h2{font-size:1.875rem;font-weight:600;line-height:1.12}
.lead{font-size:.97rem;color:var(--ink2);font-weight:600;line-height:1.5}
.sect{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-top:22px;margin-bottom:2px}
.tab-title{font-size:1.875rem;font-weight:600}

/* ---------- 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(13,19,42,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);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(--moon)}
.tab .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);opacity:0}
.tab.on .dot{opacity:1}

/* ---------- Szene ---------- */
.harbor{display:block;width:100%;height:100%}
.tw{animation:tw 4s ease-in-out infinite}.tw1{animation-delay:-1.3s}.tw2{animation-delay:-2.6s}
@keyframes tw{50%{opacity:.15}}
.beam{animation:beam 9s ease-in-out infinite;transform-box:view-box}
@keyframes beam{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
.glow{animation:glow 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.glow.g2{animation-delay:-2s}
@keyframes glow{50%{opacity:.6;transform:scale(1.08)}}
.rock{animation:rock 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}.rock.r1{animation-delay:-1.7s}.rock.r2{animation-delay:-3.2s}
@keyframes rock{25%{transform:rotate(-2.5deg) translateY(1px)}75%{transform:rotate(2deg) translateY(-1px)}}
.drift-a{animation:drift 9s ease-in-out infinite alternate}.drift-b{animation:drift 12s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translateX(10px)}}
.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)}}

/* ---------- Heute ---------- */
.s-home{background:var(--bg)}
.home-scene{position:absolute;top:0;left:0;right:0;height:330px;z-index:0}
.home-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(16,22,47,0),var(--bg))}
.home-spacer{height:190px;flex:none}
.hello{font-size:.97rem;color:var(--ink2);font-weight:700;position:relative}
.h-title{font-size:2rem;line-height:1.1;font-weight:600;margin-top:4px;position:relative}
.h-title em,.onb-title em{font-style:italic;color:var(--amber)}
.home-cards{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.cta{display:flex;align-items:center;gap:14px;width:100%;padding:16px 16px 16px 14px;border-radius:24px;background:linear-gradient(135deg,#F7C677,#E9A04B);color:var(--dark);box-shadow:0 16px 34px -16px rgba(244,184,96,.7);text-align:left;transition:transform .15s}
.cta:active{transform:scale(.985)}
.cta .ic{width:52px;height:52px;border-radius:18px;background:rgba(26,22,48,.88);display:grid;place-items:center;flex:none}
.cta .tx{flex:1;min-width:0}
.cta b{display:block;font-size:1.125rem;font-weight:900;line-height:1.2}
.cta .tx span{display:block;font-size:.875rem;font-weight:700;opacity:.82;margin-top:2px;line-height:1.3}
.cta .go{flex:none;opacity:.8}
.cta.soft{background:var(--card2);color:var(--ink);box-shadow:none;border:1px solid var(--line2)}
.cta.soft .ic{background:rgba(244,184,96,.16);color:var(--amber)}
.rowcard{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px 14px 14px;text-align:left}
.rowcard .ic{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;flex:none}
.ic.amber{background:rgba(244,184,96,.16);color:var(--amber)} .ic.lav{background:rgba(199,155,224,.16);color:var(--lav)}
.rowcard .tx{flex:1;min-width:0}
.rowcard b{display:block;font-weight:800;font-size:1rem}
.rowcard .tx span{display:block;font-size:.875rem;color:var(--ink2);font-weight:600;margin-top:2px;line-height:1.35}
.rowcard .go{color:var(--ink3);flex:none}
.balance-mini{display:block;width:100%;margin-top:14px;padding:14px 16px;text-align:left}
.balance-mini span:last-child{display:block;font-size:.875rem;color:var(--ink2);font-weight:600;line-height:1.45;margin-top:10px}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.08);gap:2px}
.bar i{display:block;height:100%}

/* ---------- Ritual ---------- */
.s-ritual{background:radial-gradient(120% 60% at 80% 0%,#2A2F5E 0%,rgba(42,47,94,0) 60%),linear-gradient(180deg,#141B3A 0%,var(--bg) 60%)}
.dots{display:flex;gap:8px}
.dots i{width:28px;height:8px;border-radius:4px;background:rgba(255,255,255,.14);transition:background .3s}
.dots i.on{background:var(--amber)} .dots i.done{background:rgba(244,184,96,.45)}
.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}
.composer{margin-top:18px;display:flex;gap:10px;align-items:stretch}
.composer textarea{flex:1;min-height:64px;border-radius:20px;border:1.5px solid var(--line2);background:rgba(255,255,255,.07);padding:12px 14px;font-size:1rem;font-weight:600;line-height:1.4;resize:none}
.composer textarea:focus{border-color:rgba(244,184,96,.7);background:rgba(255,255,255,.1)}
.addbtn{flex:none;width:76px;border-radius:20px;background:var(--amber);color:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:900;font-size:.78rem}
.notes{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.note{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 10px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.note.launch{animation:launch .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes launch{from{opacity:0;transform:translateY(-14px) scale(.96)}}
.note .nb{flex:none;display:grid;place-items:center;width:40px}
.note .nt{flex:1;min-width:0;font-weight:700;font-size:.97rem;line-height:1.35;overflow-wrap:anywhere}
.note .nk{display:block;margin-top:4px}
.note .rm{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink3);flex:none}
.notes .empty{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;border:1.5px dashed var(--line2);color:var(--ink3);font-weight:600;font-size:.9rem;line-height:1.4}
.notes .empty svg{flex:none}
.ktag{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:800;padding:3px 9px 3px 7px;border-radius:9px;letter-spacing:.01em}
.k-morgen{background:rgba(232,166,90,.16);color:#F3C389}.k-meer{background:rgba(111,169,201,.16);color:#9CCAE2}.k-spaeter{background:rgba(199,155,224,.16);color:#DDBDF0}
.sortboat{margin:14px 0 4px;display:flex;flex-direction:column;align-items:center;position:relative}
.sb-art{height:96px;display:grid;place-items:end center}
.sb-svg{animation:rock 4s ease-in-out infinite;transform-origin:50% 100%}
.paper{margin-top:-4px;background:#F3E8D2;color:#2A2440;font-family:"Fraunces";font-weight:600;font-size:1.25rem;line-height:1.3;padding:16px 18px;border-radius:6px 18px 6px 18px;max-width:100%;text-align:center;box-shadow:0 14px 30px -14px rgba(0,0,0,.7);transform:rotate(-1deg);overflow-wrap:anywhere}
.sortboat.sail-away{animation:sail 1.1s ease-in forwards}
.sortboat.moor{animation:moor .9s ease-in forwards}
@keyframes sail{to{transform:translate(70%,-30px) scale(.4) rotate(4deg);opacity:0}}
@keyframes moor{to{transform:translate(-40%,40px) scale(.5);opacity:0}}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.choice{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 16px 12px 12px;border-radius:20px;background:var(--card);border:1.5px solid var(--line);text-align:left;transition:transform .15s,background .15s}
.choice:active{transform:scale(.985);background:var(--card2)}
.choice .ci{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.c-morgen .ci{background:rgba(232,166,90,.18);color:#F3C389}.c-meer .ci{background:rgba(111,169,201,.18);color:#9CCAE2}.c-spaeter .ci{background:rgba(199,155,224,.18);color:#DDBDF0}
.choice b{display:block;font-weight:800;font-size:1.03rem;line-height:1.25}
.choice span span{display:block;font-size:.84rem;color:var(--ink2);font-weight:600;margin-top:2px;line-height:1.3}
.hint{text-align:center;font-size:.84rem;color:var(--ink3);font-weight:600;margin-top:14px}
.stepbox{margin-top:16px}
.stepbox .namefield{margin-top:8px}
.ideas{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ideas button{padding:8px 12px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid var(--line2);font-weight:700;font-size:.84rem;color:var(--ink2)}
.prompt{margin-top:14px;padding:22px 20px 20px;position:relative;background:linear-gradient(140deg,rgba(244,184,96,.14),rgba(199,155,224,.1));border-color:rgba(244,184,96,.22)}
.prompt .pq{position:absolute;top:-8px;left:14px;font-family:"Fraunces";font-size:4rem;line-height:1;color:var(--amber);opacity:.55}
.prompt h1{font-size:1.75rem;line-height:1.18;font-weight:600;font-style:italic;position:relative}
.fadein{animation:in .35s ease-out both}
.own{margin-top:14px}
.own textarea{width:100%;min-height:130px;border-radius:20px;border:1.5px solid var(--line2);background:rgba(255,255,255,.07);padding:14px 16px;font-size:1rem;font-weight:600;line-height:1.45;resize:vertical}
.own textarea:focus{border-color:rgba(244,184,96,.7)}
.own small{display:block;margin-top:8px;color:var(--ink3);font-weight:600;font-size:.8125rem}
.swap{margin-top:4px;flex-wrap:wrap}
.swap svg{color:var(--amber)}
.aus-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.aus-card{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px 14px 14px;border-radius:20px;background:var(--card);border:1px solid var(--line);text-align:left;position:relative}
.aus-card .ai{width:50px;height:50px;border-radius:16px;background:rgba(244,184,96,.14);color:var(--amber);display:grid;place-items:center;flex:none}
.aus-card .tx{flex:1;min-width:0;padding-right:62px}
.aus-card b{display:block;font-weight:800;font-size:1.03rem}
.aus-card .tx span{display:block;font-size:.84rem;color:var(--ink2);font-weight:600;margin-top:2px;line-height:1.35}
.aus-card > svg{color:var(--ink3);flex:none;position:absolute;right:16px}
.lock-tag{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:.6875rem;font-weight:800;padding:4px 8px;border-radius:8px;background:rgba(244,184,96,.16);color:var(--amber);display:flex;align-items:center;gap:4px}

/* ---------- Ausklang ---------- */
.s-breath{background:radial-gradient(100% 50% at 50% 20%,#262C5A 0%,rgba(38,44,90,0) 70%),var(--bg);text-align:center}
.breath-wrap{display:grid;place-items:center;margin-top:10px}
.breath-wrap .lh{width:min(220px,58vw);height:auto}
.breath-glow{transform-box:fill-box;transform-origin:center;transform:scale(.55);opacity:.55;transition:transform 4s ease-in-out,opacity 4s ease-in-out}
.breath-wrap.in .breath-glow{transform:scale(1.05);opacity:1}
.breath-wrap.out .breath-glow{transform:scale(.55);opacity:.5;transition-duration:6s}
.breath-word{font-size:2.4rem;font-weight:600;margin-top:10px}
.breath-sub{color:var(--ink2);font-weight:600;margin-top:8px;line-height:1.45;min-height:1.45em}
.s-drei{text-align:left}
.drei{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.drei-row{display:flex;align-items:center;gap:12px}
.drei-row .lt{flex:none;width:44px;display:grid;place-items:center}
.namefield,.timefield{width:100%;min-height:52px;border-radius:16px;border:1.5px solid var(--line2);background:rgba(255,255,255,.07);padding:0 14px;font-weight:700;font-size:1rem;color:var(--ink)}
.namefield:focus,.timefield:focus{border-color:rgba(244,184,96,.7)}
.timefield{width:auto;min-width:112px;flex:none;text-align:center}
.lanterns{display:flex;justify-content:center;gap:6px;margin-top:36px}
.lanterns span{transition:opacity 1.2s,filter 1.2s}
.lanterns span.off{opacity:.35;filter:grayscale(1)}
.lichter-text{font-size:1.75rem;line-height:1.25;font-weight:600;margin-top:40px;min-height:6.5rem}

/* ---------- Gute Nacht ---------- */
.s-nacht{background:#0B1026;text-align:center;transition:opacity .7s,filter .7s}
.s-nacht.out{opacity:0;filter:brightness(.3)}
.nacht-scene{position:absolute;inset:0 0 auto 0;height:440px;z-index:0}
.nacht-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(11,16,38,0),#0B1026)}
.nacht-spacer{height:318px;flex:none}
.nacht-title{font-size:2.5rem;font-weight:600;line-height:1.08;position:relative}
.nacht-sub{font-family:"Fraunces";font-style:italic;font-size:1.25rem;line-height:1.4;color:var(--moon);margin-top:12px;position:relative}
.nchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.nchips span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:.84rem;font-weight:700;color:var(--ink2)}
.nchips svg{color:var(--amber)}
.nacht-hint{font-size:.875rem;color:var(--ink3);font-weight:600;line-height:1.45;margin-top:16px}

/* ---------- Hafenrunde ---------- */
.s-runde{background:radial-gradient(110% 40% at 85% 0%,#2C2D5A 0%,rgba(44,45,90,0) 70%),var(--bg)}
.rcard{padding:14px 16px 14px;margin-top:10px;transition:opacity .5s,transform .5s}
.rcard.settle{opacity:0;transform:translateX(30px)}
.rt{font-weight:800;font-size:1.06rem;line-height:1.35;margin-top:8px;overflow-wrap:anywhere}
.rs{display:flex;gap:6px;align-items:center;font-size:.875rem;color:#F3C389;font-weight:700;margin-top:4px}
.rs svg{flex:none}
.rq{font-size:.84rem;color:var(--ink3);font-weight:700;margin-top:10px}
.ropts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ropt{min-height:46px;border-radius:14px;background:rgba(255,255,255,.06);border:1.5px solid var(--line);font-weight:800;font-size:.875rem;display:flex;align-items:center;gap:8px;padding:6px 10px;line-height:1.2}
.ropt i{width:10px;height:10px;border-radius:50%;background:var(--oc);flex:none}
.ropt.on{background:var(--oc);color:var(--dark);border-color:var(--oc)}
.ropt.on i{background:var(--dark)}
.balance{padding:16px 16px 14px;margin-top:10px}
.balance p{font-size:.94rem;color:var(--ink2);font-weight:600;line-height:1.5;margin-top:10px}
.balance.empty p{margin-top:0}
.balance.empty b{color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.legend span{display:flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--ink2)}
.legend i{width:10px;height:10px;border-radius:50%}
.legend b{color:var(--ink);font-weight:900}
.empty-card{padding:22px 18px;margin-top:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty-card p{color:var(--ink2);font-weight:600;line-height:1.45}

/* ---------- Hafen ---------- */
.s-hafen{background:linear-gradient(180deg,#151C3C 0%,var(--bg) 40%)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.stat{padding:12px}
.stat b{font-family:"Fraunces";font-size:1.75rem;font-weight:600;display:block;line-height:1;color:var(--moon)}
.stat span{font-size:.78rem;color:var(--ink2);font-weight:700;margin-top:6px;display:block;line-height:1.25}
.insight{margin-top:10px;padding:14px 16px;background:linear-gradient(135deg,rgba(199,155,224,.14),rgba(111,169,201,.1));border:1px solid rgba(199,155,224,.22);border-radius:var(--r-lg)}
.insight b{font-size:1rem;font-weight:800;line-height:1.35;display:block}
.insight p{font-size:.875rem;color:var(--ink2);font-weight:600;line-height:1.45;margin-top:4px}
.insight.empty{background:var(--card);border:1.5px dashed var(--line2)}
.themes{padding:14px 16px;margin-top:10px}
.themes h4{font-size:.94rem;font-weight:800}
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tchips span{padding:6px 11px;border-radius:12px;background:rgba(244,184,96,.12);color:#F3C389;font-weight:800;font-size:.875rem}
.tchips small{opacity:.7;font-weight:700}
.lockcard{display:block;width:100%;margin-top:10px;padding:20px 18px;text-align:center;background:linear-gradient(140deg,rgba(244,184,96,.12),rgba(199,155,224,.1));border-color:rgba(244,184,96,.22)}
.lockcard .lk{width:44px;height:44px;border-radius:50%;background:rgba(244,184,96,.18);color:var(--amber);display:inline-grid;place-items:center}
.lockcard h3{font-size:1.375rem;font-weight:600;margin-top:8px}
.lockcard .lead{margin-top:6px;font-size:.9rem}
.cal{padding:10px 10px 12px;margin-top:10px}
.weeknav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.weeknav b{font-size:.94rem;font-weight:800}
.weeknav .iconbtn{width:38px;height:38px}
.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;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--ink3);gap:2px;text-align:center}
.cal .cd.has{background:rgba(244,184,96,.14);color:var(--ink)}
.cal .cd.has i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.cal .cd.today{outline:2px solid var(--moon);outline-offset:-2px}
.loglist{margin-top:10px;padding:2px 14px}
.logrow{display:flex;align-items:center;gap:10px;width:100%;padding:12px 0;border-bottom:1px solid var(--line);text-align:left;color:var(--ink3)}
.logrow:last-child{border-bottom:0}
.logrow .ld{flex:1;min-width:0}
.logrow .ld b{display:block;color:var(--ink);font-weight:800;font-size:.97rem}
.logrow .ld span{display:block;font-size:.8125rem;color:var(--ink2);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd{display:flex;gap:4px;flex:none}
.kd i{font-style:normal;min-width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:.75rem;font-weight:900}
.group{padding:2px 16px}
.drow{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:0}
.drow .dt{flex:1;min-width:0;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.drow .dt small{display:flex;align-items:center;gap:4px;font-size:.8125rem;color:#F3C389;margin-top:3px;font-weight:700}
.res{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:800;color:var(--ink2);flex:none;max-width:44%;text-align:right;line-height:1.2}
.res i{width:9px;height:9px;border-radius:50%;background:var(--oc);flex:none}
.pcard{padding:14px 16px;margin-top:10px}
.pcard b{font-size:1.125rem;font-style:italic;font-weight:600;line-height:1.3;display:block}
.pcard p{margin-top:8px;color:var(--ink2);font-weight:600;line-height:1.5;white-space:pre-wrap}

/* ---------- Anker & Wissen ---------- */
.s-anker{background:linear-gradient(180deg,#151C3C 0%,var(--bg) 40%)}
.w-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.w-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line);width:100%;text-align:left}
.w-item .wi{width:36px;height:36px;border-radius:12px;background:rgba(111,169,201,.16);color:#9CCAE2;display:grid;place-items:center;flex:none}
.w-item.read .wi{background:rgba(124,196,160,.18);color:var(--mint)}
.w-item .tt{flex:1;min-width:0}
.w-item .tt b{display:block;font-weight:800;font-size:.97rem;line-height:1.25}
.w-item .tt span{display:block;font-size:.8125rem;color:var(--ink2);font-weight:600;margin-top:2px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-item .lk{color:var(--ink3);flex:none}
.s-wissen{background:radial-gradient(100% 40% at 50% 0%,#252B58 0%,rgba(37,43,88,0) 70%),var(--bg)}
.w-art{display:grid;place-items:center;height:90px;margin-top:6px}
.w-title{font-size:2rem;font-weight:600;line-height:1.12;margin-top:6px}
.w-lead{font-size:1.06rem;font-weight:700;color:var(--ink2);margin-top:8px;line-height:1.45}
.w-body p{font-size:1rem;line-height:1.62;font-weight:600;margin-top:14px}
.try{margin-top:18px;padding:16px 18px;background:rgba(244,184,96,.1);border:1px solid rgba(244,184,96,.24);border-radius:var(--r-lg)}
.try b{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);font-weight:800}
.try p{font-size:1rem;font-weight:700;margin-top:4px;line-height:1.45}
.disclaimer{font-size:.8125rem;color:var(--ink3);font-weight:600;line-height:1.45;margin-top:18px;text-align:center}

/* ---------- Ich ---------- */
.s-me{background:linear-gradient(180deg,#151C3C 0%,var(--bg) 40%)}
.row{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 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;line-height:1.35}
.row .val{color:var(--ink3);font-weight:700;font-size:.875rem}
.row > svg{color:var(--ink3);flex:none}
.row.danger .lbl{color:#F0A08E}
.toggle{width:52px;height:32px;border-radius:16px;background:rgba(255,255,255,.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,.3);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(255,255,255,.08);font-weight:800;display:grid;place-items:center;color:var(--ink2)}
.fs-seg button.on{background:var(--amber);color:var(--dark)}
.plusbadge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:800;background:linear-gradient(135deg,#F7C677,#E9A04B);color:var(--dark);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:rgba(255,255,255,.07);border:1px solid var(--line2);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(--moon);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:rgba(124,196,160,.2);display:grid;place-items:center;color:var(--mint);flex:none}
.land{font-size:.7rem;font-weight:800;background:rgba(199,155,224,.2);color:#DDBDF0;padding:2px 7px;border-radius:6px;letter-spacing:.04em}

/* ---------- Plus ---------- */
.s-plus{background:radial-gradient(120% 50% at 50% 0%,#3A2F55 0%,rgba(58,47,85,0) 70%),var(--bg)}
.p-ill{display:block;width:calc(100% + 44px);height:auto;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:16px;display:flex;flex-direction:column;gap:10px;padding:0 4px}
.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:rgba(124,196,160,.2);color:var(--mint);display:grid;place-items:center;flex:none}
.plans{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.plan{min-height:64px;border-radius:20px;background:var(--card);border:1.5px solid var(--line2);display:flex;align-items:center;padding:8px 18px;gap:14px;width:100%}
.plan.sel{border:2px solid var(--amber);background:rgba(244,184,96,.08)}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.3);flex:none}
.plan.sel .radio{border:7px solid var(--amber)}
.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:rgba(124,196,160,.2);color:var(--mint);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:var(--bg)}
.onb-scene{position:absolute;top:0;left:0;right:0;height:380px;z-index:0}
.onb-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(16,22,47,0),var(--bg))}
.onb-spacer{height:248px;flex:none}
.s-onb.o2,.s-onb.o3{background:radial-gradient(120% 50% at 80% 0%,#2A2F5E 0%,rgba(42,47,94,0) 70%),var(--bg)}
.onb-art2-wrap{margin:8px -6px 0}
.onb-art2{display:block;width:100%;height:auto}
.onb-title{font-size:2.125rem;font-weight:600;line-height:1.1;margin-top:8px;position:relative}
.onb-steps{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.onb-steps div{display:flex;gap:12px;align-items:flex-start;font-weight:600;line-height:1.45;font-size:.97rem;color:var(--ink2)}
.onb-steps b{color:var(--ink);font-weight:800}
.onb-steps i{width:28px;height:28px;border-radius:10px;background:rgba(244,184,96,.18);color:var(--amber);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:.875rem;flex: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,.07);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:.84rem;font-weight:700;color:var(--ink2)}
.onb-promise svg{color:var(--mint)}
.safety{margin-top:14px;padding:16px 18px}
.safety p{font-size:.94rem;font-weight:600;line-height:1.5;color:var(--ink2)}
.safety b{color:var(--ink)}
.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,.07);border:1.5px solid var(--line2);width:100%;text-align:left}
.check .box{width:26px;height:26px;border-radius:8px;border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;flex:none}
.check[aria-checked="true"] .box{background:var(--amber);border-color:var(--amber)}
.check[aria-checked="true"] .box::after{content:"";width:12px;height:7px;border:solid var(--dark);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(255,255,255,.2)}
.onb-dots i.on{width:24px;background:var(--amber)}
.bottom{margin-top:auto;padding-top:18px;position:relative}

/* ---------- Sheet, Toast ---------- */
.backdrop{position:fixed;inset:0;background:rgba(3,6,18,.6);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:#182046;border-radius:28px 28px 0 0;border-top:1px solid var(--line2);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(255,255,255,.2);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}
.toast{position:fixed;left:50%;top:calc(var(--safe-t) + 8px);transform:translateX(-50%);background:var(--moon);color:var(--dark);padding:12px 18px;border-radius:16px;font-weight:800;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(0,0,0,.7)}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-8px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}

/* ---------- Weniger Bewegung ---------- */
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:#ECE6F5;--ink3:#D6D2EA;--card:rgba(255,255,255,.1);--line:rgba(255,255,255,.35);--line2:rgba(255,255,255,.55)}
html.hc .card,html.hc .choice,html.hc .aus-card,html.hc .w-item,html.hc .note,html.hc .plan,html.hc .helprow,html.hc .ropt{border:1.5px solid rgba(255,255,255,.55)}
html.hc .tab{color:#E2DEF2}
html.hc :focus-visible{outline:4px solid #fff}
html.hc ::placeholder{color:#C9C5DE}
[data-focus]:focus{outline:none}
.fs-2 .ropts{grid-template-columns:1fr}
.rtop{display:flex;align-items:center;gap:8px}
.s-lichter{text-align:center}

.nacht-title,.nacht-sub{text-shadow:0 2px 14px rgba(11,16,38,.95),0 0 4px rgba(11,16,38,.8)}
.s-onb .bottom{position:sticky;bottom:0;z-index:2;margin:auto -22px -24px;padding:18px 22px max(20px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(16,22,47,0),var(--bg) 30%)}