/* ==========================================================================
   Schlaf.Coach · Landingpage (Standalone)
   Tokens, Bausteine und Seitenmuster aus dem mobilo.coach Digital Design System
   (Rev. 2) und der öffentlichen Startseite der Journey-Demo
   (src/01-head.html, src/02-style.html). Keine zusätzlichen Markenfarben.
   Klassen mit Präfix ui- entsprechen 1:1 den Bausteinen des Designsystems,
   Klassen mit Präfix sc- sind seitenspezifisch.
   ========================================================================== */
:root{
  --brand-900:#FBB900;--brand-500:#FAD10D;--brand-300:#FBE317;
  --grad:linear-gradient(135deg,#FBB900 0%,#FAD10D 52%,#FBE317 100%);
  --grad-h:linear-gradient(90deg,#FBB900 0%,#FAD10D 52%,#FBE317 100%);
  --near-black:#101114;--dark:#18191D;--ink:#17181B;--muted:#6E7078;
  --offwhite:#F7F7F5;--white:#FFFFFF;--dark-text:#F4F4F2;--dark-muted:#8A8C94;--faint:#9A9CA2;
  --line:rgba(23,24,27,.11);--line-soft:rgba(23,24,27,.07);--line-strong:rgba(23,24,27,.20);--line-dark:rgba(255,255,255,.13);
  --float:0 2px 4px rgba(16,17,20,.04),0 24px 48px -20px rgba(16,17,20,.28);
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:999px;
  --sans:"Montserrat",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.7,.28,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --focus:0 0 0 3px #fff,0 0 0 5px #FBB900;
  --nav-h:76px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F7F7F5;color:#17181B;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:inherit}
svg{display:block}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid #FBB900;outline-offset:3px;border-radius:4px}
::selection{background:rgba(250,209,13,.45)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:#101114;color:#fff;padding:12px 18px;border-radius:999px;font:600 14px/1 var(--sans);text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:12px}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ---------- Designsystem-Bausteine (aus der Demo übernommen) ---------- */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:15px;height:15px}.ic--lg{width:22px;height:22px}

.ui-logo{display:inline-flex;align-items:center;gap:.42em;font-weight:800;font-size:18px;letter-spacing:-.045em;line-height:1;color:#101114;white-space:nowrap}
.ui-logo svg{height:1.12em;width:auto}
.ui-logo b{font-weight:800;color:#FAD10D}

.strang{position:absolute;pointer-events:none}
.strang svg{width:100%;height:100%;overflow:visible}
.strang__trace{fill:none;stroke:rgba(23,24,27,.16);stroke-width:1.25;vector-effect:non-scaling-stroke}
.on-dark .strang__trace{stroke:rgba(255,255,255,.14)}
.strang__flow{fill:none;stroke:url(#strangGrad);stroke-width:3;stroke-linecap:round;stroke-dasharray:520 1800;stroke-dashoffset:2320;animation:strang 14s linear infinite;vector-effect:non-scaling-stroke}
@keyframes strang{to{stroke-dashoffset:0}}

.ui-eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#6E7078}
.ui-eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:#FBB900}
.on-dark .ui-eyebrow{color:#8A8C94}
.ui-tag{font:600 10.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#6E7078}
.on-dark .ui-tag{color:#8A8C94}
.ui-meta{font:300 13px/1.5 var(--sans);color:#6E7078}
.on-dark .ui-meta{color:#8A8C94}

.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 20px;border-radius:999px;font:600 13.5px/1 var(--sans);letter-spacing:-.01em;border:1.5px solid transparent;white-space:nowrap;color:#17181B;cursor:pointer;text-decoration:none;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease);user-select:none}
.ui-btn .ic{width:16px;height:16px;transition:transform .2s var(--ease)}
.ui-btn:hover .ic{transform:translateX(2px)}
.ui-btn:active{transform:translateY(1px)}
.ui-btn:focus-visible{outline:none;box-shadow:var(--focus)}
.ui-btn--primary{background:#101114;color:#fff}
.ui-btn--primary:hover{background:#2A2B30}
.ui-btn--yellow{background:var(--grad);color:#101114}
.ui-btn--yellow:hover{box-shadow:0 10px 24px -12px rgba(251,185,0,.7)}
.ui-btn--yellow:focus-visible{box-shadow:0 0 0 3px #101114,0 0 0 5px #FBB900}
.ui-btn--secondary{border-color:rgba(23,24,27,.2);background:transparent}
.ui-btn--secondary:hover{border-color:#101114;background:rgba(16,17,20,.025)}
.ui-btn--lg{height:52px;padding:0 28px;font-size:15px}
.ui-btn--sm{height:38px;padding:0 18px;font-size:13px}

.ui-card{background:#fff;border:1px solid rgba(23,24,27,.11);border-radius:22px}
.ui-media{position:relative;overflow:hidden;background:#EDEDEA}
.ui-media img{width:100%;height:100%;object-fit:cover}

/* ---------- Layout ---------- */
.sc-wrap{max-width:1320px;margin:0 auto;padding:0 40px;position:relative}
.sc-sec{position:relative;padding:128px 0;overflow:hidden;overflow:clip}
.sc-sec--sticky,.sc-sec--visible{overflow:visible}
.sc-sec--visible{z-index:2}
[hidden]{display:none!important}
.sc-sec--off{background:#F7F7F5}
.sc-sec--white{background:#fff}
.sc-sec--dark{background:#101114;color:#F4F4F2}
.sc-sec--end{padding:24px 0 112px}
.sc-sec--tight-top{padding-top:0}

.sc-h2{font:800 clamp(32px,3.4vw,54px)/1.04 var(--sans);letter-spacing:-.045em;color:#101114;margin-top:18px;max-width:18ch;text-wrap:balance}
.on-dark .sc-h2{color:#fff}
.sc-h3{font:800 18px/1.28 var(--sans);letter-spacing:-.025em;color:#101114;text-wrap:balance}
.on-dark .sc-h3{color:#fff}
.sc-lead{font:300 clamp(18px,1.55vw,22px)/1.5 var(--sans);letter-spacing:-.01em;color:#17181B;max-width:40ch;text-wrap:pretty}
.on-dark .sc-lead{color:#DDDEDC}
.sc-copy{font:300 17px/1.66 var(--sans);color:#17181B;max-width:54ch;text-wrap:pretty}
.sc-copy + .sc-copy{margin-top:16px}
.on-dark .sc-copy{color:#DDDEDC}
.sc-copy b,.sc-copy strong{font-weight:600}
.sc-mark{position:relative;white-space:nowrap}
.sc-mark::after{content:"";position:absolute;left:.04em;right:.04em;bottom:-.1em;height:.07em;min-height:3px;border-radius:4px;background:var(--grad-h)}

.sc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:end;margin-bottom:64px}
.sc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px;align-items:center}
.sc-split--media{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.sc-split--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}

/* Bildrahmen: Bilder unterstützen, sie dominieren nicht */
.sc-figure{margin:0;border-radius:22px}
.sc-figure img{aspect-ratio:var(--ratio,4 / 3);object-position:var(--pos,50% 50%)}

/* ---------- Header ---------- */
.sc-nav{position:sticky;top:0;z-index:40;background:rgba(247,247,245,0);border-bottom:1px solid transparent;transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s}
.sc-nav.is-solid{background:rgba(255,255,255,.94);border-bottom-color:rgba(23,24,27,.11);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.sc-nav__in{height:var(--nav-h);display:flex;align-items:center;gap:28px}
.sc-nav__brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;border-radius:8px;min-width:0}
.sc-nav__product{padding-left:16px;border-left:1px solid rgba(23,24,27,.16);font:600 14px/1 var(--sans);letter-spacing:-.015em;color:#17181B;white-space:nowrap}
.sc-nav__links{display:flex;gap:2px;margin-left:auto}
.sc-nav__link{height:38px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;font:500 14px/1 var(--sans);color:#6E7078;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.sc-nav__link:hover{color:#101114;background:rgba(16,17,20,.05)}
.sc-nav__cta{margin-left:12px}

/* ---------- Hero ---------- */
.sc-hero{position:relative;overflow:hidden;background:#F7F7F5;padding:56px 0 120px;margin-top:calc(var(--nav-h) * -1);padding-top:calc(var(--nav-h) + 56px)}
.sc-glow{position:absolute;width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,rgba(250,209,13,.20) 0%,rgba(251,227,23,.07) 42%,rgba(251,227,23,0) 68%);pointer-events:none}
.sc-hero__glow{left:-360px;top:-380px}
.sc-hero__strang{left:0;right:0;bottom:36px;height:240px}
.sc-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-areas:"head media" "body media";column-gap:80px;align-items:start}
.sc-hero__head{grid-area:head;padding-top:40px}
.sc-hero__body{grid-area:body}
.sc-hero__media{grid-area:media;align-self:center;position:relative}
.sc-hero__media .sc-figure{box-shadow:0 2px 4px rgba(16,17,20,.05),0 50px 100px -48px rgba(16,17,20,.45)}
.sc-h1{font:800 clamp(48px,6.6vw,104px)/.98 var(--sans);letter-spacing:-.055em;color:#101114;margin-top:24px}
.sc-hero__sub{font:500 clamp(20px,1.9vw,27px)/1.32 var(--sans);letter-spacing:-.025em;color:#17181B;margin-top:30px}
.sc-hero__sub span{display:block}
.sc-hero__body .sc-copy{margin-top:28px;max-width:50ch}
.sc-hero__claim{margin-top:20px;font:600 15px/1.5 var(--sans);letter-spacing:-.01em;color:#17181B}
.sc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:36px}
.sc-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.sc-trust li{display:inline-flex;align-items:center;gap:10px;font:500 14px/1.3 var(--sans);letter-spacing:-.01em;color:#17181B}
.sc-trust .ic{width:16px;height:16px;stroke-width:2.2;color:#101114}

/* ---------- Kommt dir das bekannt vor? ---------- */
.sc-recognize{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:88px;align-items:start}
.sc-recognize__intro{position:sticky;top:calc(var(--nav-h) + 48px)}
.sc-questions{display:flex;flex-direction:column;border-top:1px solid rgba(23,24,27,.11)}
.sc-questions li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:26px 0;border-bottom:1px solid rgba(23,24,27,.11);font:300 clamp(19px,1.6vw,23px)/1.45 var(--sans);letter-spacing:-.015em;color:#17181B;text-wrap:pretty}
.sc-questions__n{font:500 12px/2.2 var(--mono);color:#9A9CA2}
.sc-recognize__more{margin-top:40px}
.sc-factors{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sc-factors li{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid rgba(23,24,27,.14);font:500 13.5px/1 var(--sans);color:#17181B;white-space:nowrap}
.sc-factors__lbl{width:100%;margin-bottom:2px}
.sc-highlight{margin-top:36px;display:flex;align-items:flex-start;gap:16px;padding:22px 24px;border-radius:14px;background:#F7F7F5;font:800 clamp(18px,1.5vw,21px)/1.35 var(--sans);letter-spacing:-.025em;color:#101114}
.sc-highlight::before{content:"";flex:none;width:4px;align-self:stretch;border-radius:4px;background:var(--grad)}

/* ---------- Verstehe deinen Schlaf ---------- */
.sc-understand .sc-lead{margin-top:24px}
.sc-understand__copy{margin-top:28px;padding-top:28px;border-top:1px solid rgba(23,24,27,.11)}
.sc-understand__copy .sc-copy:first-child{font-weight:600}

/* ---------- Das erwartet dich ---------- */
.sc-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sc-feature{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 30px 34px;overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.sc-feature::before{content:"";position:absolute;left:30px;right:30px;top:-1px;height:2px;border-radius:2px;background:var(--grad-h);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.sc-feature:hover{border-color:rgba(23,24,27,.2);box-shadow:0 2px 4px rgba(16,17,20,.04),0 24px 48px -28px rgba(16,17,20,.28)}
.sc-feature:hover::before{transform:scaleX(1)}
.sc-feature__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sc-feature__ic{width:48px;height:48px;border-radius:14px;background:#F7F7F5;border:1px solid rgba(23,24,27,.07);display:flex;align-items:center;justify-content:center;color:#101114}
.sc-feature__ic .ic{width:21px;height:21px}
.sc-feature__n{font:500 12px/1 var(--mono);letter-spacing:.06em;color:#9A9CA2}
.sc-feature p{font:300 15px/1.62 var(--sans);color:#6E7078;text-wrap:pretty}

/* ---------- Es geht nicht um perfekten Schlaf ---------- */
.sc-calm{position:relative;overflow:hidden;border-radius:22px;background:#F7F7F5;padding:104px 88px 184px}
.sc-calm__strang{left:-40px;right:-40px;bottom:18px;height:130px}
.sc-calm__glow{right:-420px;top:-460px}
.sc-calm__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:80px;align-items:start}
.sc-calm .sc-h2{max-width:13ch}
.sc-calm__sub{font:300 clamp(19px,1.6vw,24px)/1.45 var(--sans);letter-spacing:-.015em;color:#17181B;margin-top:26px;max-width:24ch}
.sc-calm__open{font:800 21px/1.3 var(--sans);letter-spacing:-.025em;color:#101114;margin-bottom:18px}
.sc-calm .sc-copy:last-child{margin-top:22px;padding-top:22px;border-top:1px solid rgba(23,24,27,.11);font-weight:500}

/* ---------- Wissenschaft (Dunkel · Beweis) ---------- */
.sc-science__glow{left:-380px;bottom:-460px;background:radial-gradient(circle,rgba(250,209,13,.14) 0%,rgba(250,209,13,.04) 40%,rgba(250,209,13,0) 66%)}
.sc-science__strang{left:-40px;right:-40px;bottom:-56px;height:150px}
.sc-science .sc-split{align-items:end}
.sc-science__copy .sc-copy:first-child{font-weight:500;color:#fff}
.sc-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:88px}
.sc-pillar{border-top:1px solid rgba(255,255,255,.18);padding-top:26px;display:flex;align-items:center;gap:18px}
.sc-pillar__ic{width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.sc-pillar__ic .ic{width:21px;height:21px}
.sc-pillar .sc-h3{font-size:19px}

/* ---------- Dein Tempo ---------- */
.sc-tempo .sc-copy{margin-top:24px}
.sc-tempo .sc-copy + .sc-copy{margin-top:16px}
.sc-tempo__decide{margin-top:32px;display:flex;align-items:center;gap:14px;font:600 16px/1.45 var(--sans);letter-spacing:-.01em;color:#101114;max-width:44ch}
.sc-tempo__decide .ic{width:20px;height:20px;flex:none}
.sc-tempo__decide span.sc-tempo__ic{width:44px;height:44px;border-radius:50%;border:1.5px solid #101114;display:flex;align-items:center;justify-content:center;flex:none}

/* ---------- Was du mitnimmst ---------- */
.sc-takeaways{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:88px;align-items:start}
.sc-takeaways__intro{position:sticky;top:calc(var(--nav-h) + 48px)}
.sc-takeaways__lead{font:300 clamp(19px,1.6vw,23px)/1.45 var(--sans);letter-spacing:-.015em;color:#17181B;margin-top:26px}
.sc-path{position:relative;display:flex;flex-direction:column}
.sc-path::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--grad-h);background:linear-gradient(180deg,#FBB900 0%,#FAD10D 52%,#FBE317 100%);opacity:.9}
.sc-path li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:22px;align-items:center;padding:10px 0}
.sc-path__dot{width:44px;height:44px;border-radius:50%;background:#101114;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #F7F7F5;font:500 11.5px/1 var(--mono);letter-spacing:.02em;position:relative}
.sc-path li:last-child .sc-path__dot{background:var(--grad);color:#101114}
.sc-path__t{display:block;background:#fff;border:1px solid rgba(23,24,27,.11);border-radius:14px;padding:18px 22px;font:500 16.5px/1.4 var(--sans);letter-spacing:-.015em;color:#17181B;text-wrap:pretty}
.sc-takeaways__end{margin-top:28px;margin-left:66px;font:800 clamp(18px,1.5vw,21px)/1.38 var(--sans);letter-spacing:-.025em;color:#101114;max-width:36ch;text-wrap:balance}

/* ---------- Final CTA ---------- */
.sc-final{position:relative;overflow:hidden;background:#101114;border-radius:22px;padding:104px 88px 112px;color:#F4F4F2}
.sc-final__glow{right:-300px;top:-420px;background:radial-gradient(circle,rgba(250,209,13,.16) 0%,rgba(250,209,13,.05) 40%,rgba(250,209,13,0) 66%)}
.sc-final__strang{left:44%;right:-30px;top:48px;height:200px}
.sc-final__in{position:relative;max-width:760px}
.sc-final__h{font:800 clamp(36px,4.6vw,72px)/1.02 var(--sans);letter-spacing:-.05em;color:#fff;margin-top:22px;text-wrap:balance}
.sc-final .sc-copy{margin-top:28px;max-width:52ch}
.sc-final .sc-cta{margin-top:40px}
.sc-final__line{margin-top:20px;font:400 13.5px/1.5 var(--sans);color:#8A8C94}

/* ---------- Krankenkassen-Zuschuss (Rechner) ---------- */
.ui-input{height:52px;display:flex;align-items:center;gap:10px;padding:0 8px 0 16px;border-radius:14px;border:1.5px solid rgba(23,24,27,.2);background:#fff;transition:border-color .2s,box-shadow .2s}
.ui-input .ic{color:#6E7078}
.ui-input:hover{border-color:rgba(23,24,27,.34)}
.ui-input:focus-within{border-color:#101114;box-shadow:var(--focus)}
.ui-input input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;padding:0;font:400 15px/1 var(--sans);color:#17181B}
.ui-input input::placeholder{color:#9A9CA2;font-weight:300}
.ui-help{font:300 12.5px/1.45 var(--sans);color:#6E7078}
.ui-menu{background:#fff;border:1px solid rgba(23,24,27,.11);border-radius:14px;padding:6px;box-shadow:var(--float)}
.ui-progress{height:6px;border-radius:999px;background:rgba(16,17,20,.08);overflow:hidden}
.ui-progress>i{display:block;height:100%;width:0;border-radius:999px;background:var(--grad-h);transition:width .8s var(--ease-out)}

.sc-kv{align-items:start}
.sc-kv__pending{display:flex;gap:12px;align-items:flex-start;margin-top:32px;padding:16px 18px;border-radius:14px;background:#F7F7F5;border-left:3px solid #FBB900;font:400 14.5px/1.55 var(--sans);color:#17181B;max-width:54ch}
.sc-kv__pending .ic{margin-top:2px;color:#101114}
.sc-kv__card{padding:32px 32px 30px;position:relative;z-index:2}
.sc-kv__label{display:block;font:600 13px/1.2 var(--sans);color:#17181B;margin-bottom:10px}
.sc-kv__help{margin-top:10px}
.sc-combo{position:relative}
.sc-combo__toggle{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#6E7078;flex:none;transition:background .2s,color .2s}
.sc-combo__toggle:hover{background:#F7F7F5;color:#101114}
.sc-combo__toggle .ic{transition:transform .25s var(--ease)}
.sc-combo.is-open .sc-combo__toggle .ic{transform:rotate(180deg)}
.sc-combo__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;max-height:288px;overflow-y:auto;overscroll-behavior:contain;margin:0}
.sc-combo__opt{display:flex;align-items:center;min-height:40px;padding:9px 12px;border-radius:8px;font:400 14px/1.3 var(--sans);color:#17181B;cursor:pointer}
.sc-combo__opt.is-active{background:#F7F7F5}
.sc-combo__opt[aria-selected="true"]{font-weight:600}
.sc-combo__empty{padding:12px;font:300 13.5px/1.4 var(--sans);color:#6E7078}
.sc-kv__result{margin-top:28px;padding-top:8px;border-top:1px solid rgba(23,24,27,.11)}
.sc-kv__row,.sc-kv__total{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sc-kv__row{padding:14px 0 0;font:300 16px/1.4 var(--sans);color:#17181B}
.sc-kv__row b{font:600 17px/1.2 var(--sans);color:#101114;white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-kv__bar{margin:16px 0 4px}
.sc-kv__hint{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:14px;background:#F7F7F5;border-left:3px solid #FBB900;font:500 13.5px/1.45 var(--sans);color:#17181B}
.sc-kv__hint .ic{margin-top:2px}
.sc-kv__total{margin-top:20px;padding-top:18px;border-top:2px solid #101114;font:700 16px/1.3 var(--sans);color:#101114}
.sc-kv__total b{font:800 32px/1 var(--sans);letter-spacing:-.04em;color:#101114;white-space:nowrap;font-variant-numeric:tabular-nums}
.sc-kv__small{margin-top:18px;font-size:12.5px}

/* ---------- FAQ ---------- */
.sc-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:88px;align-items:start}
.sc-faq__intro{position:sticky;top:calc(var(--nav-h) + 48px)}
.sc-acc{border-top:1px solid rgba(23,24,27,.11)}
.sc-acc__item{border-bottom:1px solid rgba(23,24,27,.11);position:relative}
.sc-acc__item::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--grad-h);transition:width .45s var(--ease-out)}
.sc-acc__item.is-open::before{width:100%}
.sc-acc__q{margin:0;font:inherit}
.sc-acc__btn{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:24px 0;font:700 clamp(16.5px,1.35vw,19px)/1.35 var(--sans);letter-spacing:-.022em;color:#101114;text-align:left;cursor:pointer}
.sc-acc__btn:focus-visible{outline:2px solid #FBB900;outline-offset:4px}
.sc-acc__ic{width:36px;height:36px;border-radius:50%;border:1px solid rgba(23,24,27,.16);display:flex;align-items:center;justify-content:center;flex:none;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.sc-acc__ic .ic{width:16px;height:16px;transition:transform .35s var(--ease-out)}
.sc-acc__btn:hover .sc-acc__ic{border-color:#101114}
.sc-acc__item.is-open .sc-acc__ic{background:#101114;border-color:#101114;color:#fff}
.sc-acc__item.is-open .sc-acc__ic .ic{transform:rotate(45deg)}
.sc-acc__panel{display:grid;grid-template-rows:1fr}
.js .sc-acc__panel{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease-out),visibility 0s linear .45s}
.js .sc-acc__item.is-open .sc-acc__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease-out),visibility 0s}
.sc-acc__panel>div{overflow:hidden}
.sc-acc__panel p{padding:0 60px 26px 0;font:300 16px/1.65 var(--sans);color:#6E7078;max-width:62ch}

/* ---------- Footer ---------- */
.sc-foot{background:#fff;border-top:1px solid rgba(23,24,27,.11);padding:56px 0 28px}
.sc-foot__in{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.sc-foot__brand p{margin-top:14px;max-width:52ch}
.sc-foot__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid rgba(23,24,27,.09);font:300 12.5px/1.4 var(--sans);color:#6E7078}

/* ---------- Einblendung (nur mit JS, ruhig, gestaffelt) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   Responsiv · Breakpoints wie die Demo-Startseite (1280 / 1080 / 760)
   ========================================================================== */
@media (min-width:1800px){.sc-wrap{max-width:1440px}}
@media (max-width:1280px){
  .sc-nav__links{display:none}
  .sc-nav__cta{margin-left:auto}
  .sc-hero__grid{column-gap:56px}
  .sc-split,.sc-split--media,.sc-recognize,.sc-takeaways,.sc-faq{gap:56px}
  .sc-calm,.sc-final{padding:88px 64px 96px}
  .sc-calm{padding-bottom:168px}
  .sc-calm__grid{gap:56px}
}
@media (max-width:1080px){
  .sc-hero{padding-bottom:88px}
  .sc-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "body";row-gap:0}
  .sc-hero__head{padding-top:16px}
  .sc-hero__media{margin-top:44px}
  .sc-hero__media .sc-figure img{aspect-ratio:16 / 10}
  .sc-hero__body .sc-copy{margin-top:40px}
  .sc-hero__strang{bottom:auto;top:30%;height:200px;opacity:.7}
  .sc-head,.sc-split,.sc-split--media,.sc-split--rev,.sc-recognize,.sc-calm__grid,.sc-takeaways,.sc-faq{grid-template-columns:minmax(0,1fr);gap:40px}
  .sc-head{margin-bottom:44px}
  .sc-split--media .sc-figure,.sc-split .sc-figure{order:-1}
  .sc-features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-takeaways__intro,.sc-faq__intro,.sc-recognize__intro{position:static}
  .sc-pillars{gap:28px;margin-top:64px}
  .sc-pillar{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px){
  :root{--nav-h:64px}
  body{font-size:15px}
  .sc-wrap{padding:0 20px}
  .sc-nav__in{gap:12px}
  .sc-nav__brand{gap:12px}
  .sc-nav__product{padding-left:12px;font-size:13px}
  .sc-nav__cta{height:36px;padding:0 14px;font-size:12.5px}
  .sc-nav__cta .ic{display:none}
  .sc-hero{padding-top:calc(var(--nav-h) + 28px);padding-bottom:72px}
  .sc-h1{font-size:46px;margin-top:18px}
  .sc-hero__sub{font-size:20px;margin-top:20px}
  .sc-hero__media{margin-top:32px}
  .sc-hero__media .sc-figure,.sc-figure{border-radius:14px}
  .sc-hero__media .sc-figure img,.sc-sec .sc-figure img{aspect-ratio:4 / 3}
  .sc-hero__body .sc-copy{margin-top:32px}
  .sc-cta{margin-top:28px}
  .sc-cta .ui-btn{flex:1 1 100%}
  .sc-trust{flex-direction:column;gap:12px;margin-top:22px}
  .sc-hero__strang{display:none}
  .sc-sec{padding:80px 0}
  .sc-sec--end{padding:8px 0 72px}
  .sc-sec--tight-top{padding-top:0}
  .sc-h2{font-size:32px;margin-top:14px}
  .sc-copy{font-size:16px}
  .sc-questions li{grid-template-columns:32px minmax(0,1fr);font-size:18.5px;padding:20px 0}
  .sc-factors li{height:34px;padding:0 13px;font-size:13px}
  .sc-highlight{padding:18px 18px;font-size:18px}
  .sc-features{grid-template-columns:minmax(0,1fr);gap:14px}
  .sc-feature{padding:24px 22px 26px}
  .sc-feature__top{margin-bottom:4px}
  .sc-calm,.sc-final{padding:56px 24px 64px;border-radius:14px}
  .sc-calm__strang,.sc-final__strang,.sc-science__strang{display:none}
  .sc-calm__open{font-size:19px}
  .sc-pillars{grid-template-columns:minmax(0,1fr);gap:0;margin-top:48px}
  .sc-pillar{flex-direction:row;align-items:center;padding:20px 0}
  .sc-pillar:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
  .sc-path li{grid-template-columns:36px minmax(0,1fr);gap:14px}
  .sc-path::before{left:17px}
  .sc-path__dot{width:36px;height:36px;font-size:10.5px;box-shadow:0 0 0 5px #F7F7F5}
  .sc-path__t{padding:14px 16px;font-size:15.5px}
  .sc-takeaways__end{margin-left:0}
  .sc-final__h{font-size:36px}
  .sc-kv__card{padding:22px 18px 22px}
  .sc-kv__pending{margin-top:24px;font-size:14px}
  .sc-kv__row{font-size:15px}
  .sc-kv__total b{font-size:28px}
  .sc-combo__list{max-height:240px}
  .sc-acc__btn{padding:20px 0;gap:16px}
  .sc-acc__panel p{padding:0 0 22px;font-size:15.5px}
  .sc-foot{padding:44px 0 24px}
}
@media (max-width:400px){
  .sc-nav__product{display:none}
  .sc-nav .ui-logo{font-size:17px!important}
  .sc-nav__cta{padding:0 12px;font-size:12px}
  .sc-h1{font-size:42px}
}

/* Ruhige Darstellung bei reduzierter Bewegung */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strang__flow{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.55}
  .js .reveal{opacity:1;transform:none;transition:none}
  .sc-feature,.sc-feature::before,.sc-acc__panel,.sc-acc__ic .ic{transition:none!important}
}
