/* AppReviewX: Befundkarten im Riso-Druck. Zwei Farben (Kobalt, Koralle), die sich überdrucken, auf kühlem Rasterpapier. */
:root{--paper:#E8EBF1;--card:#F8F9FB;--ink:#0B0F33;--muted:#454C70;--line:#B9BFD3;--cobalt:#2236F5;--coral:#FF5240;--coral-text:#B8230F;--white:#fff;
--display:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;--body:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--r:6px;
--grid:linear-gradient(rgba(34,54,245,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(34,54,245,.075) 1px,transparent 1px);
--shadow:0 1px 0 rgba(0,0,0,.08),0 12px 28px -14px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth;accent-color:var(--cobalt);scrollbar-color:var(--cobalt) var(--paper)}
body{margin:0;background-color:var(--paper);background-image:var(--grid);background-size:32px 32px;color:var(--ink);font:400 1.0625rem/1.62 var(--body);-webkit-font-smoothing:antialiased;caret-color:var(--cobalt)}
::selection{background:var(--coral);color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.6rem,7vw,5.6rem)}h2{font-size:clamp(1.8rem,3.8vw,3rem)}h3{font-size:1.3rem;letter-spacing:-.015em;line-height:1.18}
p{margin:0 0 1em;max-width:62ch}a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--cobalt)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}.closing :focus-visible,.honest :focus-visible,.foot-dark :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10}.skip:focus{left:8px;top:8px}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(1rem,4vw,3rem);flex-wrap:wrap;border-bottom:1.5px solid var(--ink);background:var(--paper)}
.brand{display:flex;align-items:center;gap:.65rem;font:700 1.35rem var(--display);letter-spacing:-.03em;text-decoration:none}
.dot{position:relative;width:1.6rem;height:1.6rem;isolation:isolate;flex:none}
.dot::before,.dot::after{content:"";position:absolute;left:50%;top:-8%;width:24%;height:116%;margin-left:-12%;border-radius:2px}
.dot::before{background:var(--cobalt);transform:rotate(45deg)}.dot::after{background:var(--coral);transform:rotate(-45deg);mix-blend-mode:multiply}
.top nav{display:flex;align-items:center;flex-wrap:wrap;gap:0 1rem;font-weight:500}.top nav a{text-decoration:none;display:inline-block;padding:.65rem .2rem}.top nav a:hover{text-decoration:underline}
.langs{display:flex;gap:0;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;font-family:var(--mono)}
.langs a{padding:.5rem .85rem;font-size:.9rem;text-decoration:none!important}.langs [aria-current]{background:var(--ink);color:var(--paper)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:.85rem 1.5rem;border-radius:var(--r);font-weight:600;text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;font-family:var(--body);font-size:1rem;transition:background .15s,color .15s,transform .15s cubic-bezier(.2,.8,.2,1)}
.btn:hover{background:var(--cobalt);border-color:var(--cobalt);color:var(--white)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.small{padding:.4rem 1rem;font-size:.95rem}.btn[disabled]{opacity:.45;cursor:default}
main{display:block}.band{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,3rem);max-width:1180px;margin:0 auto}.narrow{max-width:760px}
.hero{display:grid;gap:clamp(2.5rem,6vw,5rem);grid-template-columns:1fr;max-width:1180px;margin:0 auto;padding:clamp(2.5rem,7vw,6rem) clamp(1rem,4vw,3rem) clamp(3rem,7vw,6rem);align-items:center}
@media(min-width:900px){.hero{grid-template-columns:1.1fr .9fr}}
.lead{font-size:1.25rem;color:var(--muted);max-width:44ch}.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.8rem 0 1rem}.note{font-size:.95rem;color:var(--muted)}
/* Testbogen: 12 Felder werden gestempelt, 14 Tage laufen aus */
.bench{position:relative;margin:0;background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);isolation:isolate}
.bench::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--coral);background:rgba(255,82,64,.16);border-radius:var(--r);mix-blend-mode:multiply;z-index:-1;pointer-events:none}
.bench-count{font:500 .95rem var(--mono);margin-bottom:1.3rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}.bench-count strong{font:700 3.2rem/1 var(--display);color:var(--cobalt);letter-spacing:-.04em}
.testers{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.testers li{position:relative;aspect-ratio:1;border-radius:4px;border:1.5px solid var(--ink);background:var(--white);animation:stamp .4s calc(var(--i)*.13s + .3s) cubic-bezier(.2,.8,.2,1) forwards}
.testers li::after{content:"";position:absolute;inset:18%;border-radius:2px;background:var(--cobalt);opacity:0;transform:scale(1.5);animation:ink .4s calc(var(--i)*.13s + .3s) cubic-bezier(.2,.8,.2,1) forwards}
.testers li:nth-child(3n+2)::after{background:var(--coral);mix-blend-mode:multiply;inset:14% 22% 22% 14%}
.days{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.days li{height:.8rem;border:1px solid var(--ink);border-radius:2px;background:transparent;animation:tick .3s calc(var(--i)*.09s + 1.5s) forwards}
.bench figcaption{font-size:.95rem;color:var(--muted);max-width:38ch}
@keyframes stamp{from{background:var(--white)}to{background:var(--white)}}
@keyframes ink{to{opacity:1;transform:scale(1)}}@keyframes tick{to{background:var(--ink)}}
@media(prefers-reduced-motion:reduce){.testers li::after{animation:none;opacity:1;transform:none}.days li{animation:none;background:var(--ink)}html{scroll-behavior:auto}.btn{transition:none}}
.steps{list-style:none;counter-reset:s;padding:0;margin:2.2rem 0 0;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps li{counter-increment:s;border-top:1.5px solid var(--ink);padding-top:1.1rem}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:4px;background:var(--cobalt);color:var(--white);font:500 1.1rem var(--mono);margin-bottom:.9rem}
.steps li:nth-child(2)::before{background:var(--coral);color:var(--ink)}.steps li:nth-child(3)::before{background:var(--ink)}
.feats{display:grid;gap:0 2.2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1.8rem}
.feats div{border-top:1.5px solid var(--ink);padding:1.4rem 0 .8rem}
.honest,.closing{--edge:max(clamp(1rem,4vw,3rem),calc((100vw - 1180px)/2 + clamp(1rem,4vw,3rem)));padding-inline:var(--edge)}
.honest{background:var(--cobalt);color:var(--paper);padding-block:clamp(3rem,7vw,5.5rem)}.honest h2{max-width:20ch}.honest p{font-size:1.2rem;margin-bottom:0;max-width:60ch}
details{border-top:1.5px solid var(--ink);padding:1.1rem 0}details:last-of-type{border-bottom:1.5px solid var(--ink)}
summary{font:600 1.2rem var(--display);letter-spacing:-.01em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
summary::-webkit-details-marker{display:none}summary::after{content:"+";font:500 1.5rem var(--mono);line-height:1;color:var(--cobalt)}details[open] summary::after{content:"–"}
details p{margin:.7rem 0 0;color:var(--muted)}
.closing{background:var(--ink);color:var(--paper);padding-block:clamp(3.5rem,8vw,6.5rem)}.closing h2{max-width:18ch}.closing p{max-width:60ch}
.closing .btn{background:var(--coral);color:var(--ink);border-color:var(--coral)}.closing .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.foot{padding:2rem clamp(1rem,4vw,3rem);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.95rem;border-top:1.5px solid var(--ink)}.foot p{margin:0}
.posts{list-style:none;padding:0;margin:2rem 0 0}.posts li{border-top:1.5px solid var(--ink);padding:1.5rem 0}.posts h2{font-size:1.7rem;margin-bottom:.3rem}.posts a{text-decoration:none}.posts a:hover{text-decoration:underline}
time{color:var(--muted);font:400 .85rem var(--mono)}
.narrow h1,.prose h1{font-size:clamp(2.1rem,4.8vw,3.4rem)}.prose h2{font-size:1.7rem;margin-top:2.4rem}.prose p,.prose li{max-width:66ch}.prose ol{padding-left:1.3rem}.prose li{margin-bottom:.5rem}
.callout{position:relative;background:var(--card);border:1.5px solid var(--ink);padding:1.3rem 1.5rem;border-radius:var(--r);margin-top:2.5rem}
/* App */
.app{max-width:980px}.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.stars{font:500 1rem var(--mono);background:var(--cobalt);color:var(--white);padding:.35rem .9rem;border-radius:4px}
.tabs{display:flex;gap:.2rem;border-bottom:1.5px solid var(--ink);margin-bottom:1.6rem;flex-wrap:wrap}
.tabs button{background:none;border:1.5px solid transparent;border-bottom:0;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1.5px;padding:.7rem 1.1rem;font:600 1rem var(--body);cursor:pointer;color:var(--muted);min-height:44px}
.tabs button:hover{color:var(--ink)}.tabs [aria-selected=true]{background:var(--card);border-color:var(--ink);color:var(--ink);box-shadow:inset 0 3px 0 var(--coral)}
.card{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:1.15rem 1.3rem;margin-bottom:1rem}
.card h3{margin-bottom:.3rem}.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}.meta{color:var(--muted);font-size:.92rem}
.pill{display:inline-block;font:500 .78rem var(--mono);border:1.5px solid var(--ink);padding:.05rem .55rem;border-radius:3px;background:var(--white)}
form.stack{display:grid;gap:.9rem;max-width:560px}label{display:grid;gap:.25rem;font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;font-weight:400;padding:.65rem .8rem;border:1.5px solid var(--ink);border-radius:4px;background:var(--white);color:var(--ink);width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--cobalt);outline:3px solid var(--cobalt);outline-offset:1px}
textarea{min-height:7rem;resize:vertical}.err{color:var(--coral-text);font-weight:600;min-height:1.4rem;margin:0}
.fb{white-space:pre-wrap;background:var(--paper);border-radius:4px;padding:.8rem;margin:.6rem 0;font-family:var(--mono);font-size:.9rem;line-height:1.55}
.meter{height:.7rem;border:1.5px solid var(--ink);border-radius:2px;background:var(--white);overflow:hidden;margin:.5rem 0;max-width:340px}.meter i{display:block;height:100%;background:var(--cobalt)}
.empty{color:var(--muted);padding:1rem 0}
#faq>*{max-width:760px}#faq p{max-width:62ch}
.footnav{display:flex;gap:.4rem 1.2rem;flex-wrap:wrap}.footnav a{color:var(--muted);display:inline-block;padding:.6rem 0}
.badge{display:inline-block;font:500 .75rem var(--mono);background:var(--coral);color:var(--ink);padding:.05rem .5rem;border-radius:3px;margin-left:.4rem;vertical-align:middle}
.ai-ok{color:var(--cobalt)}.ai-bad{color:var(--coral-text)}.ai-na{color:var(--muted)}
.buy{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 1.2rem}
.ok{color:var(--cobalt);font-weight:600;margin:0}
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:620px;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--shadow);z-index:20}
.consent p{margin:0 0 .8rem;font-size:.95rem}.consent .row{gap:.6rem}
.toc{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:.9rem 1.2rem;margin:1.2rem 0}.toc ul{margin:.4rem 0 0;padding-left:1.1rem}.more{padding-left:1.1rem}
/* Befund-Zitat: zweiter Druckgang leicht versetzt */
blockquote{position:relative;margin:1.4rem 0;padding:1.1rem 1.3rem;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);white-space:pre-wrap;isolation:isolate}
blockquote::before{content:"";position:absolute;inset:8px -8px -8px 8px;border:2px solid var(--coral);background:rgba(255,82,64,.14);border-radius:var(--r);mix-blend-mode:multiply;z-index:-1;pointer-events:none}
blockquote footer{margin-top:.7rem;font:400 .82rem var(--mono);color:var(--muted)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}.check input{width:auto;margin-top:.25rem}
.cookies{border-collapse:collapse;width:100%;font-size:.9rem;margin:1rem 0}.cookies th,.cookies td{border:1.5px solid var(--ink);padding:.45rem .65rem;text-align:left;vertical-align:top}.cookies th{background:var(--card);font-family:var(--mono);font-weight:500}
.app h1{font-size:clamp(2rem,4.6vw,3rem);margin:0}.app .bar{margin-bottom:1rem}
.fb-wrap{margin-top:1rem}.fb-wrap .pill{margin-bottom:.4rem}
.app h2{margin-top:1rem;font-size:clamp(1.5rem,3vw,2rem)}
input[type=file]{padding:.5rem;cursor:pointer}input[type=file]::file-selector-button{margin-right:.8rem;border:0;border-radius:4px;background:var(--ink);color:var(--paper);padding:.5rem 1rem;font:600 .95rem var(--body);cursor:pointer}
label>textarea,label>input,label>select{margin-top:.3rem}
.hint{background:var(--card);border:1.5px dashed var(--cobalt);border-radius:var(--r);padding:.9rem 1.2rem;margin:0 0 1rem}.hint p{margin:0}
.sample blockquote{max-width:68ch}
@media(max-width:560px){.top{gap:.3rem}.langs{order:3}.bench::before,blockquote::before{inset:6px -6px -6px 6px}}

/* ===== App-Oberfläche (eingeloggt): Seitenleiste am Mac, Tab-Leiste am Handy ===== */
body.in-app{--bg:#F2F3F8;--paper:#EEF0F6;--card:#fff;--white:#fff;--ink:#0B0F33;--muted:#575D7D;--line:rgba(11,15,51,.1);--hair:rgba(11,15,51,.1);
--accent:#2236F5;--accent-soft:rgba(34,54,245,.1);--accent-text:#1B2BD0;--lift:0 1px 2px rgba(0,0,0,.05),0 10px 28px -18px rgba(0,0,0,.28);--glass:rgba(247,248,252,.74);
background:var(--bg);background-image:none;font-size:1rem}
@media(prefers-color-scheme:dark){body.in-app{--bg:#0D0F1E;--paper:#141730;--card:#181B31;--white:#1E2240;--ink:#F1F2FA;--muted:#A5AACB;--line:rgba(255,255,255,.12);--hair:rgba(255,255,255,.12);
--accent:#5666FF;--accent-soft:rgba(110,124,255,.18);--accent-text:#9AA6FF;--lift:0 1px 2px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.7);--glass:rgba(20,23,48,.72)}
body.in-app ::selection{color:#0B0F33}}
body.in-app .top,body.in-app .foot{display:none}
body.in-app .band.app{max-width:none;padding:0}
body.in-app h1,body.in-app h2,body.in-app h3{letter-spacing:-.02em}
.ic{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.shell{display:grid;grid-template-columns:15.5rem minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1.2rem;padding:1.1rem .8rem;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px);border-right:1px solid var(--hair)}
.side .brand{padding:.2rem .6rem .6rem;font-size:1.3rem}
.dock{display:flex;flex-direction:column;gap:.15rem}
.dock-item{display:flex;align-items:center;gap:.7rem;width:100%;padding:.6rem .8rem;border:0;border-radius:10px;background:none;color:var(--ink);font:500 .97rem var(--body);cursor:pointer;text-align:left;min-height:44px;transition:background .15s}
.dock-item:hover{background:var(--accent-soft)}.dock-item[aria-selected=true]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:.4rem;padding:0 .4rem}
.langs-seg{display:inline-flex;align-self:flex-start;padding:2px;border-radius:9px;background:var(--accent-soft)}
.langs-seg a{padding:.35rem .8rem;border-radius:7px;text-decoration:none;font:500 .85rem var(--mono);min-height:32px;display:inline-flex;align-items:center}
.langs-seg [aria-current]{background:var(--card);box-shadow:var(--lift);color:var(--ink)}
.main{width:100%;max-width:56rem;margin:0 auto;padding:1.6rem clamp(1rem,3vw,2.2rem) 4rem}
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.2rem}
.toolbar p{margin:0}.toolbar h1{font-size:clamp(1.7rem,3.4vw,2.2rem);margin:0;line-height:1.1;overflow-wrap:anywhere}
.stars{background:var(--accent-soft);color:var(--accent-text);border-radius:99px;padding:.45rem 1rem;font:600 .95rem var(--mono)}
.icon-btn{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:0;background:var(--accent);color:#fff;cursor:pointer}
.icon-btn:hover{filter:brightness(1.1)}
.main h2{font-size:1.35rem;margin:1.6rem 0 .7rem}.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.6rem 0 .8rem}.page-head h2{margin:0}
body.in-app .card,.list,.profile-card{border-radius:16px}
body.in-app .card{background:var(--card);border:1px solid var(--hair);box-shadow:var(--lift);padding:1rem 1.15rem;margin-bottom:.8rem}
body.in-app .card h3{font-size:1.05rem;margin:0 0 .15rem}
body.in-app .meta{color:var(--muted);margin:.1rem 0;font-size:.9rem}
body.in-app p{max-width:none}
body.in-app .btn{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
body.in-app .btn:hover{filter:brightness(1.1);background:var(--accent);border-color:var(--accent);color:#fff}
body.in-app .btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--hair);box-shadow:0 1px 1px rgba(0,0,0,.04)}
body.in-app .btn.ghost:hover{background:var(--accent-soft);filter:none;color:var(--ink);border-color:var(--hair)}
body.in-app .btn.small{padding:.45rem .95rem;font-size:.92rem;min-height:36px}.btn .ic{width:1.05rem;height:1.05rem}
body.in-app .btn.danger,body.in-app .btn.ghost.danger{color:#C0301C}.btn.block{width:100%;margin-top:1.4rem}
body.in-app .btn.light{background:#fff;color:#0B0F33;border-color:#fff}body.in-app .btn.light:hover{background:#fff;color:#0B0F33}
body.in-app input,body.in-app select,body.in-app textarea{background:var(--white);border:1px solid var(--hair);border-radius:10px;color:var(--ink)}
body.in-app input:focus-visible,body.in-app select:focus-visible,body.in-app textarea:focus-visible{border-color:var(--accent);outline:3px solid var(--accent-soft);outline-offset:0;box-shadow:0 0 0 1px var(--accent)}
body.in-app :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
body.in-app input[type=file]::file-selector-button{background:var(--accent);color:#fff;border-radius:8px}
body.in-app .pill,body.in-app .chip{background:var(--accent-soft);border:0;color:var(--accent-text);border-radius:99px;padding:.1rem .65rem}
body.in-app .badge{background:#FFE1DC;color:#8E1A08;border-radius:99px;font-family:var(--body);font-weight:600;padding:.05rem .6rem}
body.in-app .fb{background:var(--paper);border-radius:10px;font-family:var(--body);font-size:.95rem}
body.in-app .meter{border:0;border-radius:99px;background:var(--accent-soft);height:.55rem}body.in-app .meter i{background:var(--accent);border-radius:99px}
body.in-app .hint{background:var(--accent-soft);border:0;border-radius:14px}body.in-app .empty{text-align:center;padding:2rem 0;color:var(--muted)}
.tile{display:grid;place-items:center;width:3rem;height:3rem;border-radius:13px;font:700 1.25rem var(--display);flex:none}
.grow{flex:1;min-width:0}.grow h3{overflow-wrap:anywhere}
.task,.app-card{display:flex;align-items:center;gap:.9rem}.task.featured{border-color:rgba(255,82,64,.5);background:linear-gradient(0deg,rgba(255,82,64,.06),rgba(255,82,64,.06)),var(--card)}
.side-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.reward{background:#FFE1DC;color:#8E1A08;border-radius:99px;padding:.15rem .75rem;font:600 .95rem var(--mono)}
.cta-card{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem 1.15rem;border:1.5px dashed var(--accent);border-radius:16px;background:var(--accent-soft);color:var(--ink);text-align:left;font:inherit;cursor:pointer;margin-bottom:.4rem}
.cta-card:hover{filter:brightness(.98)}.cta-card span{display:block}.cta-card strong{font:600 1.05rem var(--display)}.cta-card .grow span{color:var(--muted);font-size:.92rem}
.cta-ic{display:grid!important;place-items:center;width:2.8rem;height:2.8rem;border-radius:12px;background:var(--accent);color:#fff}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .4rem}
.chip-btn,.filters select{border:1px solid var(--hair);background:var(--card);color:var(--ink);border-radius:99px;padding:.45rem 1rem;font:500 .92rem var(--body);cursor:pointer;min-height:40px;width:auto}
.chip-btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.seg{display:inline-flex;gap:2px;padding:2px;border-radius:11px;background:var(--accent-soft);margin:.4rem 0 1.1rem;flex-wrap:wrap}
.seg button{border:0;background:none;color:var(--muted);padding:.45rem 1rem;border-radius:9px;font:600 .92rem var(--body);cursor:pointer;min-height:38px}
.seg [aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:var(--lift)}
.switch{position:relative;width:2.7rem;height:1.6rem;border-radius:99px;border:0;background:rgba(120,126,160,.4);cursor:pointer;padding:0;transition:background .2s}
.switch i{position:absolute;top:.15rem;left:.15rem;width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.switch[aria-checked=true]{background:#2BA66A}.switch[aria-checked=true] i{transform:translateX(1.1rem)}
.app-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}.app-head h2{margin:0}.back{margin-bottom:.6rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.6rem 0 1rem}.stats strong{display:block;font:700 1.6rem var(--display)}.stats span{font-size:.85rem;color:var(--muted)}
.stats.on-dark{grid-template-columns:repeat(2,1fr)}.stats.on-dark span{color:rgba(255,255,255,.72)}
.big{font:600 1.1rem var(--body);margin:0 0 .4rem}
.steps-app{list-style:none;margin:0;padding:0;display:grid;gap:1rem}.step{display:flex;gap:.9rem}
.step .num{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font:600 .95rem var(--mono);flex:none}
.step.done .num{background:var(--accent);color:#fff}.step h4{margin:.2rem 0 .15rem;font:600 1rem var(--body)}
.claim{padding-bottom:1.2rem}
.hero-card{text-align:center;padding:1.6rem 1.2rem}.hero-card h2{margin:.4rem 0 .5rem}.hero-card p{margin-inline:auto;max-width:44ch}
.diagram{width:14rem;max-width:100%;color:var(--ink)}.diagram .n-you{fill:var(--accent)}.diagram .n-q{fill:var(--accent-soft)}
.diagram .t-you{fill:#fff;font:700 15px var(--display)}.diagram .t-q{fill:var(--accent-text);font:700 18px var(--display)}
.profile-card{background:#0B0F33;color:#F1F2FA;padding:1.5rem;margin-bottom:1rem;box-shadow:var(--lift)}
@media(prefers-color-scheme:dark){.profile-card{background:#242A66}}
.profile-card .who{margin:0;opacity:.75;font:500 .9rem var(--mono)}.profile-card .label{margin:1.3rem 0 0;opacity:.7;font-size:.9rem}
.balance{font:700 3.6rem/1 var(--display);margin:.2rem 0 1rem;letter-spacing:-.04em}.balance span{font:500 1.1rem var(--body);opacity:.7;letter-spacing:0}
.group-h{font-size:.85rem!important;color:var(--muted);font-weight:600;margin:1.4rem .3rem .4rem!important;letter-spacing:0}
.list{background:var(--card);border:1px solid var(--hair);box-shadow:var(--lift);overflow:hidden}
.row-link,.list summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.1rem;min-height:48px;text-decoration:none;color:var(--ink);font:500 1rem var(--body)}
.list>*+*{border-top:1px solid var(--hair)}.row-link:hover,.list summary:hover{background:var(--accent-soft)}
.list details{padding:0}.list details>*:not(summary){padding:0 1.1rem 1rem}.list summary::after{content:none}.list summary{cursor:pointer;color:#C0301C}
.auth-card{max-width:27rem;margin:clamp(1.5rem,6vw,4rem) auto;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:1.6rem;box-shadow:var(--lift)}
.auth-card h1{font-size:2rem}.auth-card .btn{width:100%;justify-content:center;display:flex}
@media(max-width:899px){
 .shell{display:block}
 .side{position:fixed;inset:auto 0 0 0;height:auto;flex-direction:row;padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--hair);z-index:15;gap:0}
 .side .brand,.side-foot{display:none}
 .dock{flex-direction:row;width:100%}
 .dock-item{flex-direction:column;gap:.15rem;padding:.4rem .2rem;font-size:.72rem;justify-content:center;align-items:center;text-align:center;min-height:52px}
 .main{padding-bottom:6.5rem;padding-top:1rem}
 .task,.app-card{align-items:flex-start;flex-wrap:wrap}.side-actions{flex-direction:row;align-items:center;width:100%;justify-content:space-between;margin-left:3.9rem}
 .app-card .side-actions{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.switch,.switch i,.dock-item{transition:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drop{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1.1rem;border:1.5px dashed var(--accent);border-radius:14px;background:var(--accent-soft);color:var(--accent-text);font-weight:600;cursor:pointer;text-align:center;position:relative}
.drop:focus-within{outline:3px solid var(--accent);outline-offset:2px}.drop:hover{filter:brightness(.97)}
.switch-row{display:flex;align-items:center;gap:1rem}
.center{text-align:center;display:flex;justify-content:center;align-items:center;gap:.3rem}
.sheet{border:0;padding:0;background:var(--card);color:var(--ink);width:min(30rem,100%);border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);max-height:92vh;overflow:auto}
.sheet::backdrop{background:rgba(11,15,51,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-in{padding:1.4rem}.sheet-head{display:flex;justify-content:space-between;align-items:center}.sheet-head h2{margin:0;font-size:1.5rem}
.icon-btn.soft{background:var(--accent-soft);color:var(--ink);font-size:1.4rem;line-height:1}
.packs{display:grid;gap:.6rem;margin:1rem 0}
.pack{display:flex;align-items:center;gap:.9rem;text-align:left;padding:.9rem 1rem;border:1.5px solid var(--hair);border-radius:16px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.pack[aria-checked=true]{border-color:var(--accent);background:var(--accent-soft)}
.pack .grow strong{display:block;font:700 1.2rem var(--display)}
.dot-r{width:1.3rem;height:1.3rem;border-radius:50%;border:2px solid var(--hair);flex:none;display:grid;place-items:center}
.pack[aria-checked=true] .dot-r{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--card);background:var(--accent)}
.price{display:flex;flex-direction:column;align-items:flex-end;font:700 1.15rem var(--display)}.price em{font:600 .75rem var(--body);font-style:normal;background:#D9F1E6;color:#0B6446;border-radius:99px;padding:.1rem .55rem;margin-top:.2rem}
@media(max-width:899px){.sheet{margin:auto auto 0;border-radius:24px 24px 0 0;width:100%}}
body.in-app .list details{border:0}

/* ===== CSS-Intro (20 s, Schleife, nur CSS-Animationen) ===== */
.film{margin:1.6rem 0 0;position:relative}.film .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stage{container-type:inline-size;position:relative;aspect-ratio:16/9;background-color:var(--paper);background-image:var(--grid);background-size:4cqw 4cqw;border:1.5px solid var(--ink);border-radius:14px;overflow:hidden;isolation:isolate}
.sc{position:absolute;inset:0;opacity:0;display:grid;place-items:center;animation:var(--k) 20s linear infinite}
.sc1{--k:s1}.sc2{--k:s2}.sc3{--k:s3}.sc4{--k:s4}.sc5{--k:s5}
.cap{position:absolute;left:0;right:0;bottom:5cqw;margin:0;text-align:center;font:700 3.4cqw/1.15 var(--display);letter-spacing:-.02em;max-width:none;padding-inline:6cqw;text-wrap:balance}
.ln{display:block;height:1.1cqw;border-radius:99px;background:var(--ink);opacity:.8;margin:1cqw 0;width:100%}.ln.s{width:60%}
/* 1: App ist live, kein Feedback */
.ph{width:15cqw;height:25cqw;margin-top:-6cqw;background:var(--card);border:.35cqw solid var(--ink);border-radius:2.4cqw;padding:2cqw;animation:ph1 20s cubic-bezier(.2,.8,.2,1) infinite}
.tl{display:block;width:5cqw;height:5cqw;border-radius:1.4cqw;background:var(--cobalt);margin-bottom:2cqw}
.zero{position:absolute;left:0;right:0;top:3.5cqw;text-align:center;font:500 1.8cqw var(--mono);color:var(--muted);margin:0;max-width:none}
.q{position:absolute;font:700 5cqw var(--display);color:var(--coral);animation:qf 20s ease-in-out infinite}.q1{left:34cqw;top:10cqw}.q2{right:33cqw;top:15cqw;animation-delay:-.4s}.q3{left:38cqw;top:26cqw;animation-delay:-.8s}
/* 2: eins gegen eins, Überdruck */
.fc{position:absolute;top:10cqw;width:17cqw;height:18cqw;background:var(--card);border:.35cqw solid var(--ink);border-radius:1.6cqw;padding:2cqw;mix-blend-mode:multiply}
.fc.a{left:18cqw;border-color:var(--cobalt);animation:fa 20s cubic-bezier(.2,.8,.2,1) infinite}.fc.a .ln{background:var(--cobalt)}
.fc.b{right:18cqw;border-color:var(--coral);background:rgba(255,82,64,.22);animation:fb 20s cubic-bezier(.2,.8,.2,1) infinite}.fc.b .ln{background:var(--coral)}
.one{position:absolute;top:35cqw;margin:0;font:700 4.2cqw var(--display);color:var(--ink);animation:pop2 20s cubic-bezier(.16,1,.3,1) infinite;max-width:none;left:0;right:0;text-align:center}
/* 3: 12 Tester, 14 Tage */
.sqs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,5.2cqw);gap:1.4cqw;margin-top:-8cqw}
.sqs li{aspect-ratio:1;border:.3cqw solid var(--ink);border-radius:.9cqw;background:var(--cobalt);opacity:0;animation:sq 20s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i)*.14s - 20s)}
.sqs li:nth-child(3n+2){background:var(--coral);mix-blend-mode:multiply}
.tks{list-style:none;margin:0;padding:0;position:absolute;bottom:14cqw;display:grid;grid-template-columns:repeat(14,2.2cqw);gap:.7cqw}
.tks li{height:1.6cqw;border:.25cqw solid var(--ink);border-radius:.4cqw;animation:tk 20s linear infinite;animation-delay:calc(var(--i)*.09s - 20s)}
/* 4: privat, keine Store-Bewertungen */
.fc.priv{left:calc(50% - 8.5cqw);top:9cqw;mix-blend-mode:normal;animation:pv 20s cubic-bezier(.2,.8,.2,1) infinite}
.lock{position:absolute;right:-2cqw;bottom:-2cqw;width:5cqw;height:5cqw;border-radius:50%;background:var(--ink);animation:pop4 20s cubic-bezier(.16,1,.3,1) infinite}.lock::after{content:"";position:absolute;inset:1.4cqw 1.5cqw;border:.4cqw solid var(--paper);border-radius:.4cqw}
.stars{position:absolute;top:31cqw;font:700 4cqw var(--display);color:var(--ink);opacity:.35}.stars i{position:absolute;left:-1cqw;right:-1cqw;top:50%;height:.7cqw;background:var(--coral);transform-origin:left;transform:scaleX(0) rotate(-6deg);animation:strike 20s cubic-bezier(.2,.8,.2,1) infinite}
.stars span{display:block;letter-spacing:.4cqw}.note2{position:absolute;top:37.5cqw;margin:0;font:500 1.8cqw var(--mono);color:var(--muted);max-width:none}
/* 5: Marke */
.mark{position:relative;width:11cqw;height:11cqw;margin-top:-18cqw}
.mark i{position:absolute;left:50%;top:-8%;width:24%;height:116%;margin-left:-12%;border-radius:.6cqw}
.mark .b1{background:var(--cobalt);animation:b1 20s cubic-bezier(.2,.8,.2,1) infinite}.mark .b2{background:var(--coral);mix-blend-mode:multiply;animation:b2 20s cubic-bezier(.2,.8,.2,1) infinite}
.word{position:absolute;top:30cqw;margin:0;font:700 8cqw var(--display);letter-spacing:-.04em;max-width:none;animation:wd 20s cubic-bezier(.2,.8,.2,1) infinite}
.film-ctl{position:absolute;right:1rem;bottom:1rem;border:1.5px solid var(--ink);background:var(--card);color:var(--ink);border-radius:99px;padding:.45rem 1rem;font:600 .9rem var(--body);cursor:pointer;min-height:40px}
.film-ctl:hover{background:var(--ink);color:var(--paper)}
.film.paused .stage *,.film.paused .sc{animation-play-state:paused}
@keyframes s1{0%{opacity:0}2%,16%{opacity:1}19%,100%{opacity:0}}
@keyframes s2{0%,17%{opacity:0}20%,38%{opacity:1}41%,100%{opacity:0}}
@keyframes s3{0%,39%{opacity:0}42%,62%{opacity:1}65%,100%{opacity:0}}
@keyframes s4{0%,63%{opacity:0}66%,80%{opacity:1}83%,100%{opacity:0}}
@keyframes s5{0%,81%{opacity:0}84%,97%{opacity:1}100%{opacity:0}}
@keyframes ph1{0%,1%{transform:translateY(5cqw) scale(.94)}5%,100%{transform:none}}
@keyframes qf{0%,4%{opacity:0;transform:translateY(2cqw)}8%,15%{opacity:1;transform:translateY(0)}19%,100%{opacity:0}}
@keyframes fa{0%,19%{transform:translateX(-22cqw);opacity:0}25%{opacity:1}29%,38%{transform:translateX(19cqw)}41%,100%{transform:translateX(19cqw)}}
@keyframes fb{0%,19%{transform:translateX(22cqw);opacity:0}25%{opacity:1}29%,38%{transform:translateX(-19cqw)}41%,100%{transform:translateX(-19cqw)}}
@keyframes pop2{0%,29%{opacity:0;transform:scale(.6)}32%,38%{opacity:1;transform:scale(1)}41%,100%{opacity:0}}
@keyframes sq{0%,41%{opacity:0;transform:scale(1.6)}45%,63%{opacity:1;transform:scale(1)}66%,100%{opacity:0}}
@keyframes tk{0%,46%{background:transparent}48%,63%{background:var(--ink)}66%,100%{background:transparent}}
@keyframes pv{0%,65%{opacity:0;transform:translateY(3cqw)}69%,100%{opacity:1;transform:none}}
@keyframes pop4{0%,70%{transform:scale(0)}73%,100%{transform:scale(1)}}
@keyframes strike{0%,73%{transform:scaleX(0) rotate(-6deg)}77%,100%{transform:scaleX(1) rotate(-6deg)}}
@keyframes b1{0%,84%{transform:rotate(0) scaleY(.2)}89%,100%{transform:rotate(45deg) scaleY(1)}}
@keyframes b2{0%,85%{transform:rotate(0) scaleY(.2)}90%,100%{transform:rotate(-45deg) scaleY(1)}}
@keyframes wd{0%,88%{opacity:0;letter-spacing:.06em;filter:blur(.6cqw)}93%,100%{opacity:1;letter-spacing:-.04em;filter:none}}
@media(prefers-reduced-motion:reduce){
 .sc,.sc *{animation:none!important}.sc{opacity:0}.sc5{opacity:1}.sc5 .cap{bottom:5cqw}
 .mark .b1{transform:rotate(45deg)}.mark .b2{transform:rotate(-45deg)}.film-ctl{display:none}
}

/* ===== Bewegung: wenige, gezielte Momente. Alles aus bei prefers-reduced-motion ===== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:no-preference){
 /* Landing: ein orchestrierter Auftritt der Hero-Texte, danach Ruhe */
 .hero-text>*{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
 .hero-text>:nth-child(2){animation-delay:.08s}.hero-text>:nth-child(3){animation-delay:.16s}.hero-text>:nth-child(4){animation-delay:.24s}
 .bench{animation:rise .9s .2s cubic-bezier(.16,1,.3,1) both}
 /* Scroll: Schritte und Merkmale erscheinen beim Hereinscrollen (nur wo unterstützt) */
 @supports (animation-timeline:view()){
  .steps li,.feats div,.film{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
 }
 .btn,.chip-btn,.dock-item,.row-link,.pack,.cta-card{transition:background .18s,color .18s,transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,filter .18s,border-color .18s}
 .btn:hover{transform:translateY(-1px)}.btn:active,.chip-btn:active,.pack:active{transform:scale(.97)}
 .cta-card:hover{transform:translateY(-2px)}
 /* App: Ansichtswechsel blendet Karten gestaffelt ein, aber nur beim Wechsel */
 .enter>*{animation:rise .38s cubic-bezier(.16,1,.3,1) both}
 .enter>:nth-child(2){animation-delay:.04s}.enter>:nth-child(3){animation-delay:.08s}.enter>:nth-child(4){animation-delay:.12s}.enter>:nth-child(5){animation-delay:.16s}.enter>:nth-child(n+6){animation-delay:.2s}
 .stars.bump{animation:bump .5s cubic-bezier(.16,1,.3,1)}
 .step.done .num .ic path{stroke-dasharray:24;animation:draw .4s .1s ease-out both}
 .sheet[open]{animation:sheet-in .32s cubic-bezier(.16,1,.3,1)}.sheet[open]::backdrop{animation:fade .25s ease-out}
 .seg [aria-selected=true],.dock-item[aria-selected=true]{animation:fade .2s ease-out}
}