/* Dienstfrei, Startseite (28.09.2026): eine Bühne, die stehen bleibt, das Handy groß rechts, die Kapitel links —
   gebaut wie mindesto.com (dort website/v2), damit beide Seiten eine Sprache sprechen (Daniel).
   Farben und Karten aus der App: Grund des Systems, weiße Karten, Farbe als Tönung und im Label.
   Hilfe und Rechtstexte behalten site.css. */
:root{
  --bg:#FBFBFD;--card:#FFFFFF;--raised:#F2F2F7;--ink:#1C1C1E;--sec:#6C6C70;--ter:#8E8E93;--line:#E5E5EA;
  --green:#2DA44E;--green-ink:#1D8A3A;--green-tint:#E6F7EB;
  --amber:#FF9500;--amber-ink:#A85E00;--amber-tint:#FFF2DF;
  --blue:#007AFF;--blue-ink:#0B5FCB;--blue-tint:#E5F0FF;
  --indigo:#5856D6;--indigo-ink:#3F3DB8;--indigo-tint:#ECECFB;
  --violet:#AF52DE;--violet-ink:#8531B5;--violet-tint:#F3E8FA;
  --slate:#8E8E93;--slate-ink:#5C5C61;--slate-tint:#EFEFF2;
  --shadow:0 24px 60px rgba(28,28,30,.14),0 4px 14px rgba(28,28,30,.06);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.75,.15,1);--spring:cubic-bezier(.34,1.4,.5,1);
  --tint:var(--amber-tint);--tone-ink:var(--amber-ink)
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000000;--card:#1C1C1E;--raised:#2C2C2E;--ink:#F5F5F7;--sec:#A1A1A6;--ter:#7C7C82;--line:#2C2C2E;
  --green:#30D158;--green-ink:#30D158;--green-tint:#0E2A17;
  --amber:#FF9F0A;--amber-ink:#FF9F0A;--amber-tint:#2E1F07;
  --blue:#0A84FF;--blue-ink:#5AA9FF;--blue-tint:#0A1F38;
  --indigo:#5E5CE6;--indigo-ink:#A5A4FF;--indigo-tint:#1A1A3A;
  --violet:#BF5AF2;--violet-ink:#D28BFF;--violet-tint:#2A1436;
  --slate:#98989D;--slate-ink:#B4B4B9;--slate-tint:#232326;
  --shadow:0 24px 60px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.35)
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{display:block;max-width:100%}
svg.i{width:18px;height:18px;flex:none}
svg[hidden]{display:none}

/* oben: der Name und der eine Weg hinein */
.bar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(20px,4vw);transition:background-color .3s ease,box-shadow .3s ease}
.bar.is-solid{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand img{width:32px;height:32px;border-radius:8px}
.bar nav{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:500}
.bar nav a{text-decoration:none;color:var(--sec)}
.bar nav a:hover{color:var(--ink)}
.bar nav a.nav-aktion,.knopf{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;background:var(--green);color:#fff;font-weight:600;text-decoration:none}
.knopf{height:54px;padding:0 24px;font-size:17px}
@media (prefers-color-scheme:dark){.bar nav a.nav-aktion,.knopf{color:#0B2A15}}
@media (max-width:640px){.bar nav a:not(.nav-aktion){display:none}}

/* ---------- die Geschichte: eine Bühne, die stehen bleibt, während die Kapitel vorbeiziehen ---------- */
.story{position:relative;height:calc(var(--n) * 100svh)}
/* Rastpunkte der Kapitel (nur Touch, setzt start.js): ein Wisch hält am nächsten Kapitel an */
.anker{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start}
.anker:not(.ausgang){scroll-snap-stop:always}
@media (pointer:coarse){html.rast{scroll-snap-type:y mandatory}}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center}
/* das getönte Feld hinter dem Handy: die Farbe des Kapitels, wie ein Bereich in der App */
.panel{position:absolute;top:max(76px,9svh);bottom:3.2svh;left:47%;right:max(16px,2.2vw);border-radius:48px;background:var(--tint);transition:background-color .9s ease}
.stage[data-tone="green"]{--tint:var(--green-tint);--tone-ink:var(--green-ink)}
.stage[data-tone="amber"]{--tint:var(--amber-tint);--tone-ink:var(--amber-ink)}
.stage[data-tone="blue"]{--tint:var(--blue-tint);--tone-ink:var(--blue-ink)}
.stage[data-tone="indigo"]{--tint:var(--indigo-tint);--tone-ink:var(--indigo-ink)}
.stage[data-tone="violet"]{--tint:var(--violet-tint);--tone-ink:var(--violet-ink)}
.stage[data-tone="slate"]{--tint:var(--slate-tint);--tone-ink:var(--slate-ink)}

.copy{position:relative;height:100%;padding:0 3vw 0 max(24px,6.5vw)}
.step{position:absolute;left:max(24px,6.5vw);right:3vw;top:52%;transform:translateY(calc(-50% + 34px));opacity:0;pointer-events:none;transition:opacity .45s ease,transform .75s var(--ease)}
.step.is-past{transform:translateY(calc(-50% - 34px))}
.step.is-on{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:.06s}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 18px;font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--amber-ink)}
.eyebrow i{width:9px;height:9px;border-radius:50%;background:currentColor}
.step[data-tone="amber"] .eyebrow{color:var(--amber-ink)}.step[data-tone="blue"] .eyebrow{color:var(--blue-ink)}
.step[data-tone="green"] .eyebrow{color:var(--green-ink)}.step[data-tone="violet"] .eyebrow{color:var(--violet-ink)}
.step[data-tone="indigo"] .eyebrow{color:var(--indigo-ink)}.step[data-tone="slate"] .eyebrow{color:var(--slate-ink)}
h1,h2{margin:0;font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
h1{font-size:clamp(46px,5.2vw + 10px,104px)}
h1 .zweit{color:var(--ter)}
.step h2{font-size:clamp(40px,3.9vw + 10px,80px)}
.lead,.step p.say{margin:26px 0 0;max-width:31ch;font-size:clamp(18px,.55vw + 13px,22px);line-height:1.45;color:var(--sec);text-wrap:pretty}
/* Wörter steigen aus einer Maske, eins nach dem anderen */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;transform:translateY(108%);transition:transform .8s var(--ease);transition-delay:calc(var(--i) * 32ms + .05s)}
.step.is-on .w>span{transform:none}
.cta{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:34px}
.badge img{height:54px;width:auto}
.bald{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 22px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);font-size:17px;font-weight:600}
.bald svg{width:20px;height:20px;color:var(--green)}
.laden-text,.note{margin:0;font-size:14px;color:var(--ter);line-height:1.4}
.laden-text a{color:var(--sec);text-underline-offset:2px}

/* das Handy: Rahmen über den Bildschirmen, die Bildschirme blenden über */
.device{position:relative;justify-self:center;height:min(84svh,900px);aspect-ratio:1192/2236;margin-top:4svh;transform:translateY(calc((var(--local,.5) - .5) * -18px));will-change:transform}
.phone{position:absolute;inset:0;animation:rise 1.2s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1;transform:none}}
.screens{position:absolute;left:12.248%;top:6.261%;width:75.503%;height:87.433%;border-radius:14.11%/6.5%;overflow:hidden;background:#000;isolation:isolate}
.screen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .55s ease,transform 1s var(--ease)}
.screen.is-on{opacity:1;transform:none}
picture.screen img{width:100%;height:100%;object-fit:cover}
.bezel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* was die App sagt, neben dem Handy — echter Text, kein Bild */
.float{position:absolute;z-index:3;opacity:0;transform:translateY(18px) scale(.94);transition:opacity .4s ease,transform .7s var(--spring);pointer-events:none;translate:0 calc((var(--local,.5) - .5) * var(--par,-40px))}
.float.is-on{opacity:1;transform:none;transition-delay:.28s}
.float.is-on.late{transition-delay:.46s}
.card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:16px 18px}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);font-size:16px;font-weight:600;white-space:nowrap}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;font-size:17px;font-weight:700;box-shadow:var(--shadow);white-space:nowrap}
/* die Dienste wie im Kalender der App: getönt, Schrift in der Farbe (seit 29.09. wieder, Anna mochte Pastell lieber) */
.pill.frueh{background:var(--amber-tint);color:var(--amber-ink)}.pill.spaet{background:var(--blue-tint);color:var(--blue-ink)}.pill.nacht{background:var(--indigo-tint);color:var(--indigo-ink)}
.pill.green{background:var(--green-tint);color:var(--green-ink)}.pill.amber{background:var(--amber-tint);color:var(--amber-ink)}.pill.slate{background:var(--slate-tint);color:var(--slate-ink)}
.metric{min-width:200px}
.metric .lab{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
.metric .num{font-size:32px;font-weight:800;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.metric .sub{font-size:14px;color:var(--sec);margin-top:2px}
.ink-green{color:var(--green-ink)}.ink-blue{color:var(--blue-ink)}.ink-amber{color:var(--amber-ink)}.ink-violet{color:var(--violet-ink)}
.c-green{color:var(--green)}.c-amber{color:var(--amber)}.c-blue{color:var(--blue)}.c-violet{color:var(--violet)}

/* wo jede Notiz sitzt, im Maß des Handys */
.f-morgen{left:-30%;top:14%;--par:-50px}
.f-wecker{right:-26%;top:52%;--par:-36px}
.f-schwarz{left:-32%;top:22%;--par:-24px}
.f-tage{right:-30%;top:40%;--par:-40px}
.f-p1{left:-18%;top:24%;--par:-60px}.f-p2{left:-24%;top:36%;--par:-40px}.f-p3{left:-14%;top:48%;--par:-24px}
.f-zusammen{right:-32%;top:28%;--par:-44px}
.f-gruen{left:-30%;top:56%;--par:-30px}
.f-g1{left:-20%;top:22%;--par:-60px}.f-g2{left:-26%;top:34%;--par:-40px}.f-g3{left:-16%;top:46%;--par:-24px}
.f-sperr{right:-30%;top:30%;--par:-40px}

/* die Kapitel: sehen, wo man ist, und springen */
.rail{position:absolute;left:max(24px,6.5vw);bottom:max(26px,4.5svh);display:flex;gap:6px;flex-wrap:wrap;opacity:0;transition:opacity .5s ease}
.stage:not([data-step="0"]) .rail{opacity:1}
.rail button{appearance:none;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ter);height:34px;padding:0 12px;border-radius:999px;cursor:pointer;transition:color .3s ease,background-color .3s ease}
.rail button:hover{color:var(--ink)}
.rail button.is-on{color:var(--ink);background:var(--raised)}
.rail button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* der Hinweis sitzt, wo die Leiste sitzt; ausgeblendet darf er ihr keine Klicks nehmen (Mindesto, 28.09.) */
.hint{position:absolute;left:max(24px,6.5vw);bottom:max(26px,4.5svh);display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--ter);transition:opacity .4s ease;pointer-events:none}
.stage:not([data-step="0"]) .hint{opacity:0}
.hint i{position:relative;width:22px;height:36px;border-radius:12px;border:2px solid var(--line)}
.hint i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--ter);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}80%{opacity:0;transform:translateY(10px)}100%{opacity:0}}

/* ---------- Handys und kleine Tablets: das Handy oben, das Kapitel darunter ---------- */
@media (max-width:900px){
  .stage{grid-template-columns:1fr;grid-template-rows:58svh 1fr;align-items:stretch}
  .panel{top:max(64px,8svh);left:12px;right:12px;bottom:auto;height:calc(58svh - max(64px,8svh) + 8px);border-radius:34px}
  .device{grid-row:1;align-self:end;height:min(46svh,540px);margin:0 0 -1.5svh}
  .copy{grid-row:2;padding:0}
  .step{left:22px;right:22px;top:4svh;transform:translateY(28px)}
  .step.is-past{transform:translateY(-28px)}
  .step.is-on{transform:none}
  .eyebrow{margin-bottom:10px;font-size:15px}
  h1{font-size:clamp(34px,9.2vw,56px)}
  .step h2{font-size:clamp(30px,8.2vw,48px)}
  .lead,.step p.say{margin-top:12px;font-size:16px;max-width:none}
  .cta{margin-top:18px;gap:12px}.badge img{height:46px}.bald{height:46px;font-size:16px}.laden-text{display:none}
  .float{scale:.72;transform-origin:center}
  .f-morgen{left:-22%;top:6%}.f-wecker{right:-22%;top:52%}.f-schwarz{left:-24%;top:18%}.f-tage{right:-24%;top:34%}
  .f-p1{left:-18%;top:18%}.f-p2{left:-24%;top:32%}.f-p3{left:-14%;top:46%}.f-zusammen{right:-26%;top:22%}.f-gruen{display:none}
  .f-g1{left:-18%;top:18%}.f-g2{left:-24%;top:32%}.f-g3{left:-14%;top:46%}.f-sperr{right:-26%;top:30%}
  .rail{display:none}.hint{display:none}
  .dots{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:7px;transition:opacity .4s ease}
  .dots i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:width .35s var(--ease),background-color .35s ease}
  .dots i.is-on{width:20px;background:var(--ink)}
  .stage[data-step="0"] .dots{opacity:0}
}
@media (min-width:901px){.dots{display:none}}

/* ---------- nach der Geschichte ---------- */
.section{padding:clamp(88px,12vw,180px) max(20px,6.5vw) 0}
.section h2{font-size:clamp(40px,3.9vw + 10px,80px)}
.section .intro{margin:22px 0 0;max-width:40ch;font-size:clamp(18px,.55vw + 13px,22px);line-height:1.45;color:var(--sec)}
.intro a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.feat{background:var(--card);border-radius:28px;padding:28px;min-height:260px;display:flex;flex-direction:column;gap:14px;border:.5px solid var(--line)}
.feat .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.feat .ico svg{width:26px;height:26px}
.feat h3{margin:8px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em}
.feat p{margin:0;font-size:17px;line-height:1.45;color:var(--sec)}
.t-violet{background:var(--violet-tint);color:var(--violet-ink)}.t-blue{background:var(--blue-tint);color:var(--blue-ink)}
.t-green{background:var(--green-tint);color:var(--green-ink)}.t-amber{background:var(--amber-tint);color:var(--amber-ink)}
.t-indigo{background:var(--indigo-tint);color:var(--indigo-ink)}.t-slate{background:var(--slate-tint);color:var(--slate-ink)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px;max-width:1080px}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border-radius:28px;padding:32px;border:.5px solid var(--line)}
.plan.pro{background:var(--green-tint);border-color:transparent}
.plan .head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px}
.plan .name{font-size:17px;font-weight:600;color:var(--sec)}
.plan .trial{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--card);color:var(--green-ink);font-size:14px;font-weight:700;white-space:nowrap}
.plan.pro .name{color:var(--green-ink)}
.plan .price{font-size:clamp(44px,3vw + 20px,64px);font-weight:800;letter-spacing:-.04em;margin:10px 0 6px;font-variant-numeric:tabular-nums}
.plan .price small{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--sec);margin-left:4px}
.plan .per{margin:0;font-size:16px;line-height:1.5;color:var(--sec)}
.plan ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;font-size:17px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--green)}
.fine{margin:22px 0 0;max-width:68ch;font-size:15px;line-height:1.5;color:var(--ter)}
.final{padding:clamp(110px,14vw,200px) max(20px,6.5vw) clamp(90px,10vw,140px);text-align:center}
.final img.icon{width:96px;height:96px;border-radius:22px;margin:0 auto 28px;box-shadow:var(--shadow)}
.final h2{font-size:clamp(44px,5vw + 10px,110px);max-width:14ch;margin:0 auto}
.final .cta{justify-content:center}
footer{padding:36px max(20px,6.5vw) 48px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:14px;color:var(--ter)}
footer nav{display:flex;flex-wrap:wrap;gap:10px 22px}
footer a{text-decoration:none;color:var(--sec)}footer a:hover{color:var(--ink)}
/* eine Gruppe wie in der App: eine weiße Fläche, die Zeilen mit Haarlinien, die hinter der Kachel beginnen */
.group{list-style:none;margin:56px 0 0;padding:0;max-width:880px;background:var(--card);border-radius:28px;border:.5px solid var(--line);overflow:hidden}
.trust li{display:flex;gap:16px;align-items:flex-start;padding:20px 24px;position:relative}
.trust li+li::before{content:"";position:absolute;top:0;left:84px;right:0;border-top:1px solid var(--line)}
.trust .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.trust .ico svg{width:22px;height:22px}
.trust b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.trust span{font-size:16px;line-height:1.45;color:var(--sec)}
.trust a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.faq details{position:relative}
.faq details+details::before{content:"";position:absolute;top:0;left:24px;right:0;border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 24px;cursor:pointer;list-style:none;font-size:18px;font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:20px;height:20px;color:var(--ter);transition:transform .25s var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:20px}
.faq p{margin:0;padding:0 24px 22px;max-width:68ch;font-size:17px;line-height:1.5;color:var(--sec);text-wrap:pretty}
/* breite Bildschirme: die Überschrift neben ihrer Liste, und sie bleibt stehen, während die Liste vorbeizieht */
@media (min-width:1100px){
  .duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,112px);align-items:start}
  .duo .side{position:sticky;top:120px}
  .duo .group{margin-top:8px;max-width:none}
}
@media (max-width:640px){.group{border-radius:22px}.trust li{padding:16px 18px}.trust li+li::before{left:78px}.faq summary{padding:16px 18px;font-size:17px}.faq p{padding:0 18px 18px;font-size:16px}.faq details+details::before{left:18px}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ohne Skript: die Kapitel untereinander, das Handy einmal */
html:not(.js) .story{height:auto}
html:not(.js) .stage{position:relative;height:auto;display:block;padding:110px 0 40px}
html:not(.js) .panel,html:not(.js) .rail,html:not(.js) .hint,html:not(.js) .float,html:not(.js) .dots{display:none}
html:not(.js) .copy{height:auto}
html:not(.js) .step{position:static;opacity:1;transform:none;margin:0 0 64px}
html:not(.js) .device{margin:0 auto;height:640px}
html:not(.js) .screen:first-child{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .step,.screen,.float,.w>span,.panel,.reveal{transition:none!important}
  .phone{animation:none}.device{transform:none}.float{translate:none}.hint i::after{animation:none}
}