/* Landingpage Jobcoach-Portal. Nur Variablen aus design-tokens.css — keine eigenen Farben, keine eigenen Radien.
   Breakpoints: 640 (sm) · 900 (md: Zweispalter) · 1100 (lg: volle Navigation, 6 Links) */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--canvas);color:var(--text);font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block}
p,h1,h2,h3,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--lilac);outline-offset:3px;border-radius:var(--r-tag)}
.ds-cta:focus-visible,.ds-ghost:focus-visible{border-radius:var(--r-pill)}
.ds-ghost:hover{transform:translateY(-1px)}
.ds-ghost:active{transform:translateY(1px)}
.ds-ghost{transition:transform var(--dur-1) var(--ease-out)}

/* SVG-Linien: eine Regel fuer alle Icons */
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.wrap{width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--s-4);top:-80px;z-index:var(--z-toast);background:var(--card);color:var(--ink);padding:var(--s-3) var(--s-5);
  border-radius:var(--r-pill);box-shadow:var(--sh-3);font-weight:700;text-decoration:none}
.skip:focus{top:var(--s-3)}

/* ---------- Typo */
.h2{font-size:var(--fs-h2);max-width:20ch;overflow-wrap:break-word}
.h3{font:var(--fw-h) var(--fs-h3)/var(--lh-tight) var(--font);letter-spacing:var(--ls-h);color:var(--ink)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text);max-width:var(--measure-lead)}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
/* Brücken-Satz nach den Pain Points */
.bridge{margin:var(--s-12) auto 0;max-width:34ch;text-align:center;color:var(--ink);font-size:clamp(20px,2.4vw,26px);line-height:var(--lh-tight);letter-spacing:var(--ls-h);font-weight:500}
.bridge strong{display:block;font-weight:var(--fw-h);margin-bottom:var(--s-1)}
.bridge-ico{margin:var(--s-5) auto 0;width:40px;height:40px;padding:9px;border-radius:var(--r-pill);background:var(--ice);color:var(--ink)}
/* Grundregel-Callout unter der Methode */
.rule{display:flex;gap:var(--s-4);align-items:flex-start;margin-top:var(--s-5);background:var(--green-soft);border-radius:var(--r-tile);padding:var(--s-5) var(--s-6);box-shadow:var(--lift);color:var(--ink)}
.rule p{font-size:var(--fs-read);line-height:var(--lh-body);max-width:58ch;padding-top:6px}
.rule strong{font-weight:var(--fw-h)}
.rule-ico{flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-field);background:var(--card);color:var(--ok-fg)}
@media (min-width:900px){.rule{width:calc((100% - 5 * var(--s-6)) * 7 / 12 + 6 * var(--s-6))}}
/* Caption direkt unter einem CTA */
.cta-note{display:flex;gap:var(--s-2);align-items:flex-start;font-size:var(--fs-small);line-height:1.45;color:var(--ink-2);max-width:var(--measure-lead)}
.hero .cta-note{max-width:none}
.cta-note strong{color:var(--ink);font-weight:700}
.cta-note-ico{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--ok-fg)}
.cta-note-ico svg{width:13px;height:13px}

/* ---------- Kopfzeile */
.site-header{position:sticky;top:0;z-index:var(--z-nav);background:var(--canvas);transition:box-shadow var(--dur-2) var(--ease-out)}
.site-header.is-scrolled{box-shadow:var(--sh-1)}
.bar{display:flex;align-items:center;gap:var(--s-2);min-height:68px}
.brand{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap);text-decoration:none;color:var(--ink);margin-right:auto}
.mark{width:34px;height:34px;flex:none}
.mk-b{fill:var(--logo-bg)}
.mk-v{fill:none;stroke:var(--logo-fg);stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font:var(--fw-h) 19px/1 var(--font);letter-spacing:-.03em}

.hdr-actions{display:flex;align-items:center;gap:var(--s-2)}
.hdr-cta{padding:12px 14px;font-size:15px;flex:none}
.cta-long{display:none}
.brand{min-width:0}
.brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:399px){.brand-name{font-size:15px}.brand{gap:6px}.mark{width:30px;height:30px}}
.menu-btn{display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:var(--r-field);background:var(--card);color:var(--ink);
  box-shadow:var(--sh-1);cursor:pointer}
html:not(.js) .menu-btn{display:none}

.nav{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + var(--s-1));background:var(--card);border-radius:var(--r-card);
  box-shadow:var(--sh-3);padding:var(--s-3)}
.site-header.is-open .nav{display:block}
.nav-links a{display:flex;align-items:center;min-height:48px;padding:0 var(--s-4);border-radius:var(--r-field);text-decoration:none;font-weight:650;font-size:16px;color:var(--ink)}
.nav-links a:hover{background:var(--bone)}
.nav-login{width:100%;margin-top:var(--s-2)}

@media (min-width:400px){
  .cta-long{display:inline}
  .cta-short{display:none}
}
@media (min-width:1100px){
  .bar{gap:var(--s-4)}
  .nav{display:flex;align-items:center;gap:var(--s-2);position:static;background:none;box-shadow:none;padding:0}
  .nav-links{display:flex;gap:var(--s-1)}
  .nav-links a{min-height:var(--tap);padding:0 var(--s-3);font-size:15px}
  .nav-login{width:auto;margin:0 0 0 var(--s-2)}
  .menu-btn{display:none}
  .hdr-cta{padding:14px 22px}
  .brand-name{font-size:20px}
}

/* ---------- Hero */
.hero{display:grid;gap:var(--s-10);padding-top:clamp(20px,4vw,56px);padding-bottom:var(--section-y);align-items:center}
.hero-text{display:grid;gap:var(--s-5);justify-items:start}
.hero-title{font-size:var(--fs-hero);overflow-wrap:break-word;hyphens:manual}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-1)}

.audience{display:grid;gap:var(--s-2);margin-top:var(--s-2)}
.audience-label{font-size:var(--fs-small);font-weight:700;color:var(--ink)}
.audience-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.audience-chips .ds-tag{padding:5px 11px;font-size:13px;background:var(--card);box-shadow:var(--sh-1)}
.cta-wide{line-height:1.25;text-align:center;max-width:100%}

.hero-media{position:relative;display:flex;justify-content:center}
.phone{position:relative;width:100%;max-width:380px;background:var(--card);border-radius:var(--r-sec);box-shadow:var(--sh-3);padding:var(--s-6) var(--s-5) var(--s-5);
  display:grid;gap:var(--s-4)}
.phone-top{display:flex;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.phone-q{font:var(--fw-h) 22px/var(--lh-tight) var(--font);letter-spacing:var(--ls-h);color:var(--ink);text-wrap:balance}
.phone-a{position:relative;font-size:var(--fs-body);line-height:1.6;color:var(--text);max-height:calc(1.6em * 3);overflow:hidden}
.phone-a::after{content:"";position:absolute;inset:auto 0 0 0;height:1.6em;background:linear-gradient(to bottom,transparent,var(--card))}
.fake-btn{justify-self:start;display:inline-flex;align-items:center;gap:var(--s-2);min-height:36px;padding:0 var(--s-4);border-radius:var(--r-pill);background:var(--bone);
  color:var(--ink);font-weight:700;font-size:14px;box-shadow:var(--lift),var(--sh-1)}
.voice{display:flex;align-items:center;gap:var(--s-3);min-height:60px;padding:var(--s-2);border-radius:var(--r-pill);background:var(--voice);box-shadow:var(--sh-voice);margin-top:var(--s-1)}
.mic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.voice-label{font-weight:800;font-size:16px;color:var(--ink)}
.float-tile{display:none}

@media (min-width:640px){
  .float-tile{display:grid;gap:var(--s-2);position:absolute;right:max(0px,calc(50% - 214px));bottom:88px;background:var(--card);border-radius:var(--r-tile);
    box-shadow:var(--sh-2);padding:var(--s-3) var(--s-4)}
  .float-word{font:var(--fw-h) 17px/1 var(--font);color:var(--ink);letter-spacing:var(--ls-h)}
}
@media (min-width:900px){
  .hero{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-8)}
  .hero-text{grid-column:1 / span 7}
  .hero-media{grid-column:8 / span 5}
  .hero-title{font-size:clamp(44px,4.4vw,60px)}
  .actions{flex-wrap:nowrap}
}
@media (min-width:1100px){.phone{max-width:420px}}

/* ---------- Sektionen */
.section{padding-bottom:var(--section-y)}
.section > .h2{margin-bottom:var(--s-10)}

/* Pain Points */
.pain-grid{display:grid;gap:var(--s-4)}
.pain{display:grid;gap:var(--s-3);align-content:start}
.pain p{color:var(--text)}
.ico{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-field);background:var(--ice);color:var(--ink);margin-bottom:var(--s-1)}
@media (min-width:640px){.pain-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}}

/* Funktionen */
.features{display:grid;gap:var(--s-6)}
.feature{display:grid;gap:var(--s-6);align-items:center;padding:var(--card-pad)}
.feature-text{display:grid;gap:var(--s-3);max-width:46ch}
.feature-text p{font-size:16px}
.feature-no{font:var(--fw-display) 13px/1 var(--font);color:var(--ink-2);letter-spacing:var(--ls-label)}
.feature-media{padding:var(--s-5);display:grid;gap:var(--s-3);min-width:0}
@media (min-width:900px){
  .feature{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-10);padding:var(--s-10)}
  .feature:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .feature-text{padding-inline:var(--s-2)}
  .feature:nth-child(even) .feature-media{order:-1}
  .feature-media{padding:var(--s-8);min-height:260px;align-content:center}
}

.stages{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.stages .ds-tag{padding:6px 11px;font-size:13px;background:var(--card)}
.stages .ds-tag.ok{background:var(--green-soft)}
.stages .now{background:var(--ink);color:var(--on-ink)}
.field-label{margin-top:var(--s-2);font-size:var(--fs-small);font-weight:650;color:var(--ink-2)}
.fake-field{background:var(--card);border-radius:var(--r-field);box-shadow:var(--sh-in);padding:var(--s-4);min-height:96px;font-size:16px;color:var(--text)}
.caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:text-bottom;background:var(--ink)}

.jobs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-1)}
.jobs .ds-tag{padding:6px 11px;font-size:13px;background:var(--card);max-width:100%}
.jobs .now{background:var(--ink);color:var(--on-ink)}
.jobs .add{background:none;box-shadow:inset 0 0 0 1.5px var(--hair);color:var(--ink-2)}
.q-list{display:grid;gap:var(--s-2)}
.q-row{display:grid;grid-template-columns:1fr auto;gap:var(--s-2) var(--s-3);align-items:center;background:var(--card);border-radius:var(--r-field);
  box-shadow:var(--sh-1);padding:var(--s-3) var(--s-4)}
.q-row .ds-tag{justify-self:start}
.q-text{grid-column:1 / -1;font-weight:650;color:var(--ink)}
.q-dur{grid-row:1;grid-column:2;font-size:var(--fs-small);color:var(--ink-2);font-weight:650}

.vocab{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:var(--r-field);box-shadow:var(--sh-1);overflow:hidden;font-size:14px}
.vocab th,.vocab td{text-align:left;padding:var(--s-3) var(--s-2);vertical-align:top}
.vocab th{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-2);background:var(--bone);font-weight:700}
.vocab td{border-top:1px solid var(--hair);color:var(--text)}
.vocab td:first-child{font-weight:700;color:var(--ink)}
.vocab th:first-child,.vocab td:first-child{padding-left:var(--s-3)}
@media (max-width:639px){
  .feature-media{padding:var(--s-3)}
  .cta-wide{padding-inline:var(--s-5)}
  .price-list{padding:var(--s-5)}
  .vocab{table-layout:fixed;font-size:13px;hyphens:manual}
  .vocab th:last-child{width:30%}
}
.vocab td:last-child{color:var(--ink-2)}
@media (max-width:429px){.vocab th:last-child,.vocab td:last-child{display:none}}
@media (min-width:640px){.vocab{font-size:15px}.vocab th,.vocab td{padding:var(--s-3);hyphens:none}.vocab td:not(:last-child){white-space:nowrap}}

.flash-wrap{perspective:1100px}
.flash{display:grid;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:center;cursor:pointer;border-radius:var(--r-card);
  transform-style:preserve-3d;transition:transform .8s var(--ease-out)}
.flash-face{grid-area:1 / 1;display:grid;gap:var(--s-2);justify-items:center;align-content:center;background:var(--card);border-radius:var(--r-card);
  box-shadow:var(--sh-2);padding:var(--s-6) var(--s-5);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flash-back{transform:rotateY(180deg)}
.flash.is-flipped{transform:rotateY(180deg)}
.flash-word,.flash-plural,.flash-hint,.flash-ex{display:block}
.flash-hint{margin-top:var(--s-2);font-size:var(--fs-small);font-weight:700;color:var(--ink-2)}
.flash-ex{max-width:30ch;color:var(--ink);font-weight:600;text-wrap:balance}
.flash:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
html:not(.js) .flash-face{grid-area:auto}
html:not(.js) .flash-back{transform:none;margin-top:var(--s-2)}
html:not(.js) .flash-hint{display:none}
.flash-word{font:var(--fw-display) clamp(26px,4vw,34px)/1.05 var(--font);letter-spacing:var(--ls-display);color:var(--ink)}
.flash-plural{color:var(--ink-2);font-weight:600}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-top:var(--s-2)}
.rate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.rate-btn{display:grid;place-items:center;min-height:var(--tap);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font-weight:700;font-size:14px;box-shadow:var(--sh-1)}
.rate-btn.ok{background:var(--green-soft);color:var(--ok-fg);box-shadow:inset 0 0 0 1.5px var(--ring-ok-2)}

/* Methode */
.method-intro{margin:calc(-1 * var(--s-6)) 0 var(--s-10)}
.method{display:grid;gap:var(--s-5)}
.method-cards{display:grid;gap:var(--s-4)}
.m-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);align-items:start}
.m-card .h3,.m-card p{grid-column:2}
.m-card p,.pain p{max-width:58ch}
.m-no{grid-row:1 / span 2;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-field);background:var(--ice);
  font:var(--fw-display) 18px/1 var(--font);color:var(--ink)}
.pitch{padding:var(--s-6) var(--s-5);display:grid;gap:var(--s-5);align-content:start}
.pitch-title{font-weight:800;color:var(--ink)}
.timeline{display:grid;gap:var(--s-5)}
.timeline li{position:relative;display:grid;gap:2px;padding-left:var(--s-8)}
.timeline li::before{content:"";position:absolute;left:8px;top:22px;bottom:calc(-1 * var(--s-5));width:2px;background:var(--hair)}
.timeline li:last-child::before{display:none}
.tl-dot{position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:var(--r-pill);background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
.timeline li:last-child .tl-dot{background:var(--ink)}
.timeline strong{color:var(--ink);font-weight:750}
.timeline span:last-child{color:var(--text)}
@media (min-width:900px){
  .method{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-6);align-items:start}
  .method-cards{grid-column:1 / span 7}
  .pitch{grid-column:8 / span 5;padding:var(--s-8);position:sticky;top:100px}
}

/* So geht's */
.steps{display:grid;gap:var(--s-8);position:relative;counter-reset:none}
.step{display:grid;gap:var(--s-3);justify-items:start;align-content:start;position:relative}
.step p{max-width:32ch}
.step-num{display:grid;place-items:center;width:72px;height:72px;font:var(--fw-display) 36px/1 var(--font);color:var(--ink);letter-spacing:var(--ls-display);margin-bottom:var(--s-2)}
@media (min-width:640px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
  .steps::before{content:"";position:absolute;top:36px;left:36px;right:calc(33.333% - 36px);height:2px;background:var(--hair)}
  .step-num{position:relative}
}

/* Beispiel */
.example{display:grid;gap:var(--s-5)}
.example-main{display:grid;gap:var(--s-4);min-width:0}
.profile{padding:var(--s-4) var(--s-5);display:grid;gap:var(--s-2);justify-items:start}
.profile-line{color:var(--ink)}
.answer{display:grid;gap:var(--s-4)}
.answer-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)}
.answer-text{display:grid;gap:var(--s-5);font-size:var(--fs-read);line-height:var(--lh-read);max-width:60ch;color:var(--text)}
.ans-part{display:block}
.ans-part>.ds-tag{display:flex;width:fit-content;margin-bottom:var(--s-2)}
.term{background:var(--pink-wash);color:var(--ink);font-weight:650;border-radius:var(--r-tag);padding:1px 4px}
.answer-foot{display:flex;gap:var(--s-2);align-items:flex-start;border-top:1px solid var(--hair);padding-top:var(--s-4);color:var(--ink-2);font-size:14px;font-weight:600}
.answer-foot svg{flex:none;margin-top:1px;color:var(--ink)}
.hints{display:grid;gap:var(--s-3);align-content:start}
.hint{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--ice);border-radius:var(--r-tile);padding:var(--s-4) var(--s-5);color:var(--ink);font-weight:650;box-shadow:var(--lift)}
.hint-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-tag);background:var(--card);color:var(--ink)}
.hint > span:last-child{padding-top:7px}
.hint-tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.hint-tags .ds-tag{background:var(--card)}
@media (min-width:900px){
  .example{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-6)}
  .example-main{grid-column:1 / span 8}
  .hints{grid-column:9 / span 4;padding-top:var(--s-20)}
}

/* Vertrauen */
.trust{display:grid;gap:var(--s-5)}
.trust-item{display:flex;gap:var(--s-3);align-items:flex-start;color:var(--ink);font-weight:650;max-width:36ch}
.trust-item > span:last-child{padding-top:10px}
.trust-ico{flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-field);background:var(--green-soft);color:var(--ok-fg)}
@media (min-width:640px){.trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}}
@media (min-width:900px){.trust{gap:var(--s-8)}}

/* Stimmen */
[hidden]{display:none !important}
.voices{display:grid;gap:var(--s-4)}
.voice-card{display:grid;gap:var(--s-4);align-content:space-between}
.voice-card blockquote{margin:0;font-size:var(--fs-read);line-height:var(--lh-read);color:var(--ink)}
.voice-who{display:grid;gap:2px;font-size:var(--fs-small);color:var(--ink-2)}
.voice-who strong{color:var(--ink)}
@media (min-width:640px){.voices{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}}
@media (min-width:900px){.voices{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Preis */
.price{display:grid;gap:var(--s-8);padding:var(--card-pad)}
.price-text{display:grid;gap:var(--s-5);justify-items:start;max-width:46ch}
.price-text > p{font-size:var(--fs-lead)}
.free-box{display:flex;gap:var(--s-4);align-items:flex-start;background:var(--pink-wash);border-radius:var(--r-tile);padding:var(--s-5);box-shadow:var(--lift)}
.free-box p{font-size:16px;color:var(--ink)}
.free-label{font-weight:var(--fw-h);margin-bottom:var(--s-1)}
.free-ico{flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-field);background:var(--card);color:var(--ink)}
.price-list{background:var(--bone);border-radius:var(--r-tile);padding:var(--s-6);display:grid;gap:var(--s-4);align-content:start}
.price-list-title{font-weight:800;color:var(--ink)}
.checks{display:grid;gap:var(--s-3)}
.checks li{display:flex;gap:var(--s-3);align-items:center;font-weight:600;color:var(--ink);font-size:16px}
.chk{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--ok-fg)}
.chk .ic{stroke-width:2.4}
.price-list .ds-cta{justify-self:start;margin-top:var(--s-2)}
@media (min-width:900px){.price{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12);padding:var(--s-12);align-items:center}}

/* FAQ */
.narrow{max-width:calc(var(--w-text) + 2 * var(--gutter))}
.faq{display:grid;gap:var(--s-3)}
.faq details{background:var(--card);border-radius:var(--r-tile);box-shadow:var(--sh-1)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:56px;padding:var(--s-3) var(--s-5);cursor:pointer;list-style:none;
  font-weight:750;font-size:16px;color:var(--ink);border-radius:var(--r-tile)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:8px;background:var(--chev) center/contain no-repeat;transition:transform var(--dur-2) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{background:var(--bone)}
.faq details p{padding:0 var(--s-5) var(--s-5);max-width:62ch;font-size:16px}

/* Schluss-CTA */
.closing-wrap{padding-bottom:var(--section-y)}
.closing{background:var(--pink-wash);border-radius:var(--r-sec);padding:clamp(40px,7vw,88px) var(--card-pad);display:grid;gap:var(--s-5);justify-items:center;text-align:center}
.closing .h2{max-width:18ch}
.closing p{font-size:var(--fs-lead);color:var(--ink)}
.closing .cta-note{font-size:var(--fs-small);color:var(--ink-2);align-items:center}
@media (min-width:480px){.closing .h2{max-width:none}.closing .h2 .ln{display:block}}

/* Footer */
.site-footer{background:var(--card);box-shadow:var(--sh-1)}
.foot{display:grid;gap:var(--s-6);padding-block:var(--s-10)}
.foot-brand{display:grid;gap:var(--s-2);justify-items:start}
.foot-brand p{color:var(--ink-2);max-width:40ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2)}
.foot-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-3);border-radius:var(--r-field);font-weight:650;color:var(--ink);text-decoration:none}
.foot-nav a:hover{background:var(--bone)}
.copy{color:var(--ink-2);font-size:var(--fs-small)}
@media (min-width:900px){
  .foot{grid-template-columns:1fr auto;align-items:center}
  .copy{grid-column:1 / -1}
}

/* Rechtsseiten */
.legal{padding-block:var(--s-10) var(--section-y)}
.legal .ds-card{display:grid;gap:var(--s-4);max-width:var(--w-text)}
.legal h1{font-size:var(--fs-h1)}
.legal p{font-size:var(--fs-read);line-height:var(--lh-read)}
.legal h2{font:var(--fw-h) var(--fs-h3)/var(--lh-tight) var(--font);letter-spacing:var(--ls-h);color:var(--ink);margin-top:var(--s-4)}
.legal .legal-note{background:var(--amber-soft);color:var(--ink);border-radius:var(--r-tile);padding:var(--s-3) var(--s-4);font-size:var(--fs-body);font-weight:650}
.ph{color:var(--ink-2);font-weight:650}
.back{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700;text-decoration:none;color:var(--ink)}

/* ---------- Bewegung: nur transform/opacity, Inhalt ohne JS sichtbar */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  .js .rv.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ---------- Hero-Slider (feste Höhe: alle Szenen liegen in derselben Grid-Zelle) */
.slider{display:grid;justify-items:center;gap:var(--s-3);width:100%}
.phone-wrap{position:relative;width:100%;max-width:380px}
.phone-wrap .phone{max-width:none}
.phone-stage{display:grid}
.scene{grid-area:1 / 1;display:grid;gap:var(--s-3);align-content:start}
.scene .phone-a{max-height:none;overflow:visible}
.scene .phone-a::after{display:none}
.scene-who{font-size:var(--fs-small);font-weight:650;color:var(--ink-2)}
html:not(.js) .scene:not(:first-child){display:none}
.js .scene{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),visibility 0s}
.js .scene:not(.is-active){opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility 0s .3s}
.phone-foot{display:grid;gap:var(--s-4)}
.lvl{position:relative;display:inline-grid;grid-template-columns:repeat(3,36px);align-items:center;height:28px;padding:2px;border-radius:var(--r-pill);background:var(--bone);
  font-size:12px;font-weight:800;color:var(--ink-2);text-align:center}
.lvl span:not(.lvl-ind){position:relative;z-index:1}
.lvl span:nth-child(3){color:var(--ink)}
.lvl-ind{position:absolute;top:2px;left:2px;width:36px;height:24px;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--sh-1);
  transform:translateX(36px);transition:transform .5s var(--ease-out) .5s}
.js .scene:not(.is-active) .lvl-ind{transform:none;transition:none}
.mini-card{display:grid;gap:var(--s-1);justify-items:center;text-align:center;padding:var(--s-4);border-radius:var(--r-tile);background:var(--ice)}
.mini-word{font:var(--fw-display) 28px/1.05 var(--font);letter-spacing:var(--ls-display);color:var(--ink)}
.mini-plural{color:var(--ink-2);font-weight:600}
.mini-tr{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-top:var(--s-1)}
.mini-tr .ds-tag{background:var(--card)}
.mini-ex{margin-top:var(--s-1);color:var(--ink);font-weight:600;font-size:15px}
.wave{display:none;margin-left:auto;margin-right:var(--s-3);gap:3px;align-items:center;height:20px}
.wave i{display:block;width:3px;height:100%;border-radius:2px;background:var(--ink);opacity:.55;transform:scaleY(.3)}
.slider-nav{display:flex;align-items:center;gap:var(--s-2)}
.dots{display:flex;align-items:center}
.dot{display:grid;place-items:center;min-width:24px;height:32px;padding:0 2px;border:0;background:none;cursor:pointer;border-radius:var(--r-pill)}
.dot span{position:relative;display:block;width:8px;height:8px;border-radius:var(--r-pill);background:rgba(21,21,129,.2);overflow:hidden;transition:width .35s var(--ease-out),background-color .2s}
.dot:hover span{background:rgba(21,21,129,.4)}
.dot[aria-current="true"] span{width:28px;background:rgba(21,21,129,.14)}
.dot span::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left center;transform:scaleX(0)}
.dot[aria-current="true"] span::after{transform:none}
.slider.is-auto .dot[aria-current="true"] span::after{transform:scaleX(0);animation:dotfill var(--slide-dur,5.8s) linear forwards}
.slider.is-paused .dot[aria-current="true"] span::after{animation-play-state:paused}
.dot:focus-visible,.slider-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:1px}
.slider-toggle{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-pill);background:var(--card);color:var(--ink);box-shadow:var(--sh-1);cursor:pointer}
.slider-toggle[hidden]{display:none}
.slider-toggle .i-play,.slider-toggle.is-stopped .i-pause{display:none}
.slider-toggle.is-stopped .i-play{display:block}
.slider-note{font-size:13px;color:var(--ink-2);text-align:center}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:640px){
  .phone-wrap .float-tile{right:-28px;bottom:96px}
}
@media (min-width:900px){
  .phone-wrap .float-tile{right:-10px}
}
@media (min-width:1100px){.phone-wrap{max-width:420px}}
@media (min-width:1280px){.phone-wrap .float-tile{right:-28px}}

/* ---------- Bewegung (nur bei prefers-reduced-motion: no-preference) */
@media (prefers-reduced-motion:no-preference){
  /* Tipp-Effekt: Wörter erscheinen nacheinander, Platz ist schon reserviert */
  .js .tw .w{opacity:0;transition:opacity .2s linear}
  .js .tw.is-typing .w{opacity:1;transition-delay:calc(var(--i,0) * 32ms)}
  .js .voice .wave i{animation:wave 1.1s ease-in-out infinite}
  .js .voice .wave{display:flex}
  .voice .wave i:nth-child(2){animation-delay:-.2s}.voice .wave i:nth-child(3){animation-delay:-.4s}
  .voice .wave i:nth-child(4){animation-delay:-.6s}.voice .wave i:nth-child(5){animation-delay:-.8s}
  .slider.is-paused .wave i{animation-play-state:paused}
  @keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
  .js .float-tile{transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
  .js .float-tile.is-swap{opacity:0;transform:translateY(6px) scale(.97)}
  .js .hero-media{animation:heroIn .8s var(--ease-out) .1s both}
  @keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* Timeline baut sich Schritt für Schritt auf */
  .js .timeline[data-anim] li{opacity:0;transform:translateX(-8px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
  .js .timeline[data-anim] li::before{transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease-out)}
  .js .timeline[data-anim] .tl-dot{transform:scale(.4);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
  .js .timeline[data-anim].is-in li{opacity:1;transform:none}
  .js .timeline[data-anim].is-in li::before{transform:none}
  .js .timeline[data-anim].is-in .tl-dot{transform:none}
  .timeline[data-anim] li:nth-child(2),.timeline[data-anim] li:nth-child(2) .tl-dot{transition-delay:.35s}
  .timeline[data-anim] li:nth-child(1)::before{transition-delay:.2s}
  .timeline[data-anim] li:nth-child(3),.timeline[data-anim] li:nth-child(3) .tl-dot{transition-delay:.7s}
  .timeline[data-anim] li:nth-child(2)::before{transition-delay:.55s}
  .timeline[data-anim] li:nth-child(4),.timeline[data-anim] li:nth-child(4) .tl-dot{transition-delay:1.05s}
  .timeline[data-anim] li:nth-child(3)::before{transition-delay:.9s}

  /* Verbindungslinie der 3 Schritte wächst */
  .js .steps[data-anim]::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out) .2s}
  .js .steps[data-anim].is-in::before{transform:none}

  /* Hover & Press */
  .ds-card,.ds-tile{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
  .ds-cta:active,.ds-ghost:active,.slider-toggle:active,.flash:active .flash-face{transform:scale(.97)}
  .rate-btn{transition:transform var(--dur-1) var(--ease-out)}
  .faq summary{transition:background-color var(--dur-2) var(--ease-out)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pain:hover,.feature:hover,.m-card:hover,.voice-card:hover,.hint:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
  .slider-toggle:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
  .flash:hover .flash-hint{color:var(--ink)}
}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Preis: Tarife (Stripe-Integration 2026-10-30) */
.tiers{display:grid;gap:var(--s-3);width:100%;grid-template-columns:1fr}
@media (min-width:520px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tier{display:grid;gap:2px;align-content:start;background:var(--card);border-radius:var(--r-tile);padding:var(--s-4);box-shadow:var(--lift)}
.tier-rec{box-shadow:inset 0 0 0 2px var(--ink),var(--lift)}
.tier-name{font-weight:800;color:var(--ink)}
.tier-price{font-size:var(--fs-h3);font-weight:var(--fw-display);letter-spacing:var(--ls-display);color:var(--ink);font-variant-numeric:tabular-nums}
.tier-note{font-size:14px;color:var(--muted)}
.tier-badge{justify-self:start;margin-top:var(--s-2);font-size:12px;font-weight:700;line-height:1.2;padding:4px 8px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--ok-fg)}
.tier-badge-rec{background:var(--ink);color:var(--on-ink)}
.price-text > p.tier-fine{font-size:14px;color:var(--muted)}