/* ==========================================================================
   THE CLEAN FOX — AC Landing Page (Instagram Ads)
   Aufbau und Bewegung 1:1 nach dem sb-tt-Nachbau (~/Projects/sbtt-rebuild):
   .reveal mit Versatz und Weichzeichner, gestaffelt ueber --d,
   handgezeichneter SVG-Unterstrich, driftende Farbwolken, Zeiger-Glanz,
   Karten mit Fuchs statt Gorilla.
   Farben und Schriften sind The Clean Fox.
   Regel: keine ch/ex-Einheiten, damit das Layout auf allen Geraeten
   und waehrend des Schriftladens identisch bleibt.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/archivo.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../assets/fonts/plex.woff2') format('woff2');
}

:root{
  /* Farben, am Logo gemessen */
  --bg:#0a1417;
  --bg-soft:rgba(12,26,31,.6);
  --fox:#83d5dc;            /* Markenfarbe, spielt die Rolle von SBTT-Violett */
  --fox-light:#b9eef1;
  --fox-deep:#0f3b4a;
  --air:#1b6e9c;            /* zweite Farbe, Luft und AC */
  --navy:#0c2a38;
  --ice:#d8f1f7;
  --sand:#e3d6be;
  --wa:#25d366;             /* Handlungsfarbe, spielt die Rolle von SBTT-Neongelb */
  --wa-ink:#04220f;

  --ink:#fff;
  --ink-85:rgb(255 255 255 / .85);
  --ink-80:rgb(255 255 255 / .8);
  --ink-78:rgb(255 255 255 / .78);
  --ink-75:rgb(255 255 255 / .75);
  --ink-70:rgb(255 255 255 / .7);
  --ink-65:rgb(255 255 255 / .65);
  --ink-60:rgb(255 255 255 / .6);
  --ink-55:rgb(255 255 255 / .55);
  --ink-50:rgb(255 255 255 / .5);
  --ink-40:rgb(255 255 255 / .4);

  --line:rgb(255 255 255 / .09);
  --line-strong:rgb(255 255 255 / .14);
  --surface:rgb(255 255 255 / .04);
  --surface-2:rgb(255 255 255 / .045);

  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;

  --wrap:1180px;
  --rhythm:clamp(88px,11vw,152px);
  --rhythm-half:calc(var(--rhythm) / 2);
  --radius-pill:999px;
  --bar-h:76px;
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;font-synthesis:none;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.6;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-bottom:var(--bar-h);
}
img,video{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}

/* Anzeigeschrift: Archivo breit und schwer, als Ersatz fuer Archivo Black */
h1,h2,h3,.h2,.plan-name,.title,.num,.big{
  font-family:var(--font-display);
  font-weight:300;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}
/* kleinere Auszeichnungen bleiben kraeftiger, sonst verschwinden sie */
.plan-name,.num,.big{font-weight:600;letter-spacing:-.005em}

/* --- Keyframes ----------------------------------------------------------- */
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,7%) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,-4%) scale(1.12)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 10px 40px rgb(131 213 220 / .35)}50%{box-shadow:0 10px 60px rgb(131 213 220 / .7)}}

/* --- Scroll-Reveal ------------------------------------------------------- */
/* JS setzt is-in, sobald das Element sichtbar wird. --d staffelt die Reihe. */
.reveal{
  opacity:0;
  transform:translateY(38px);
  filter:blur(10px);
  transition:opacity .9s ease var(--d,0s),transform .9s ease var(--d,0s),filter .9s ease var(--d,0s);
}
.reveal.is-in{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  html{scroll-behavior:auto}
}

/* --- Ambient: driftende Farbwolken hinter allem -------------------------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;border-radius:50%;display:block}
.ambient .a1{top:-12%;left:-14%;width:55vw;height:55vw;background:radial-gradient(circle,rgb(131 213 220 / .16) 0%,transparent 68%);filter:blur(70px);animation:drift 26s ease-in-out infinite}
.ambient .a2{top:34%;right:-18%;width:52vw;height:52vw;background:radial-gradient(circle,rgb(27 110 156 / .26) 0%,transparent 68%);filter:blur(80px);animation:drift2 32s ease-in-out infinite}
.ambient .a3{bottom:-16%;left:18%;width:48vw;height:48vw;background:radial-gradient(circle,rgb(131 213 220 / .12) 0%,transparent 68%);filter:blur(90px);animation:drift 34s ease-in-out infinite}

/* --- Gemeinsame Bausteine ------------------------------------------------ */
.section{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto}
.section--faq{max-width:820px}
.section-head{text-align:center}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--ink-50);text-transform:uppercase;margin:0}
.eyebrow--fox{color:var(--fox)}
.h2{font-size:clamp(28px,4.6vw,54px);line-height:1.1}
.lead{font-size:16.5px;color:var(--ink-65);line-height:1.6}

/* Handgezeichneter Unterstrich, SVG-Pfad wird per JS eingezeichnet */
.underline-wrap{position:relative;display:inline-block;text-shadow:0 1px 3px rgb(4 12 15 / .55)}
.underline-wrap svg{
  position:absolute;left:-1.5%;bottom:-.16em;width:103%;height:.34em;overflow:visible;z-index:-1;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.underline-wrap path{
  stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.25s cubic-bezier(.22,.61,.36,1) .3s;
}
.underline-wrap path.is-drawn{stroke-dashoffset:0}
@media (max-width:600px){.underline-wrap path{stroke-width:2.4}}

/* --- Knoepfe ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;border-radius:var(--radius-pill);border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;transition:transform .25s ease;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-wa{background:var(--wa);color:var(--wa-ink);animation:pulseGlow 3.2s ease-in-out infinite}
.btn-wa:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--fox);transform:translateY(-2px)}

/* --- Navigation ---------------------------------------------------------- */
.nav-wrap{position:absolute;inset:0 0 auto 0;z-index:20}
.nav{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo img{height:44px;width:44px}
.nav-logo span{font-family:var(--font-display);font-weight:300;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:#fff;white-space:nowrap}
@media (max-width:430px){.nav-logo span{display:none}}
.footer-logo{height:52px;width:52px}
.nav .btn{padding:13px 22px;font-size:13px}
@media (max-width:560px){.nav .btn{display:none}}

/* --- 01 Hero ------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1}
.hero-bg{position:absolute;inset:0;background:var(--bg)}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgb(10 20 23 / .78) 0%,rgb(10 20 23 / .58) 40%,rgb(10 20 23 / .96) 88%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:2;text-align:center;padding:clamp(96px,11vh,124px) 22px calc(24px + var(--bar-h));max-width:1060px}
.hero h1{font-size:clamp(34px,5.6vw,68px);line-height:1.05;margin:0 0 24px;letter-spacing:-.015em;max-width:min(100%,860px);margin-inline:auto}
.hero h1 .outline{color:var(--fox)}
.hero-sub{font-size:clamp(16px,2vw,21px);line-height:1.5;color:var(--ink-80);max-width:min(100%,640px);margin:0 auto 36px}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.hero-rule{margin-top:clamp(30px,4vw,46px);padding-top:clamp(26px,3vw,34px);border-top:1px solid rgb(255 255 255 / .14);
  font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--fox)}
.hero-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);margin-top:clamp(18px,2.4vw,26px);text-align:center}
.hero-trust b{display:block;font-weight:600;font-size:14.5px;color:#fff;line-height:1.3}
.hero-cue{position:absolute;left:50%;bottom:calc(var(--bar-h) + 14px);transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid rgb(255 255 255 / .28);border-radius:14px;
  display:grid;justify-items:center;padding-top:8px;z-index:3}
.hero-cue span{width:3px;height:7px;border-radius:2px;background:var(--fox);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(13px);opacity:.15}}
@media (max-height:720px),(max-width:600px){.hero-cue{display:none}}
@media (prefers-reduced-motion:reduce){.hero-cue span{animation:none}}
.hero-trust span{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;color:var(--ink-55)}
@media (max-width:720px){
  .hero-trust{grid-template-columns:repeat(2,1fr);gap:14px 12px;margin-top:16px}
  .hero-trust b{font-size:13px}
  .hero-trust span{display:none}
  .hero-rule{margin-top:22px;padding-top:20px;font-size:11px;letter-spacing:.2em}
  .hero-actions{gap:12px}
}

/* --- 02 Problem ---------------------------------------------------------- */
.problem{position:relative;z-index:1;padding:var(--rhythm-half) 22px;text-align:center;
  background:linear-gradient(180deg,var(--bg) 0%,rgb(10 20 23 / .6) 46%,rgb(10 20 23 / 0) 100%)}
.problem .eyebrow{margin-bottom:20px}
.problem h2{font-size:clamp(25px,4.4vw,52px);line-height:1.1;margin:0 0 30px}
.problem p.intro{font-size:clamp(16px,2vw,20px);line-height:1.6;color:var(--ink-75);max-width:min(100%,640px);margin:0 auto}
.chips{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.chip{display:inline-block;padding:12px 22px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);
  background:var(--surface);font-weight:600;font-size:15px;color:var(--ink-80);text-decoration:none;
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.chip:hover{border-color:var(--fox);color:#fff;transform:translateY(-2px)}
.problem .closer{font-size:clamp(18px,2.4vw,24px);font-weight:600;margin:38px 0 0;color:#fff}
.problem .closer em{color:var(--fox);font-style:normal}

/* --- 03 Beweis ----------------------------------------------------------- */
.proof{padding:var(--rhythm-half) 22px}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;margin-top:clamp(36px,5vw,52px)}
.shot{position:relative;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.shot img,.shot video{width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 18px 16px;background:linear-gradient(180deg,transparent,rgb(4 12 15 / .93));font-size:14.5px;line-height:1.45;color:var(--ink-85)}

/* --- 04 Mensch ----------------------------------------------------------- */
.human{position:relative;z-index:1;min-height:92svh;display:grid;place-items:start center;overflow:hidden}
.human-bg{position:absolute;inset:0;justify-self:stretch;align-self:stretch}
.human-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 42%}
.human-veil{position:absolute;inset:0;justify-self:stretch;align-self:stretch;background:linear-gradient(180deg,rgb(10 20 23 / .88) 0%,rgb(10 20 23 / .62) 34%,rgb(10 20 23 / .18) 62%,rgb(10 20 23 / .55) 88%,var(--bg) 100%)}
.human-inner{position:relative;z-index:2;text-align:center;max-width:900px;padding:clamp(56px,9vw,104px) 22px 0}
.human h2{font-size:clamp(30px,5vw,58px);line-height:1.08;margin:0 0 22px}
.human p{color:var(--ink-78);font-size:clamp(16px,2vw,20px);line-height:1.6;max-width:min(100%,640px);margin:0 auto 14px}
/* Auf dem Handy schneidet cover einen schmalen, oben fast schwarzen Streifen
   aus dem Querformat. Deshalb dort kein Ueberlagern, sondern Text oben und
   das Bild als eigener Block darunter, mit weichem Auslauf nach unten. */
@media (max-width:720px){
  .human{min-height:0;display:block;padding:var(--rhythm-half) 0 0}
  .human-inner{padding:0 22px;max-width:none}
  .human-veil{display:none}
  .human-bg{position:relative;inset:auto;margin-top:clamp(26px,5vw,36px)}
  .human-bg img{height:auto;aspect-ratio:4/3;object-position:center 60%}
  .human-bg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;
    background:linear-gradient(180deg,rgb(10 20 23 / 0),var(--bg));pointer-events:none}
}

/* --- 05 Buchung ---------------------------------------------------------- */
.book{padding:var(--rhythm-half) 22px}
.book .section-head{margin-bottom:clamp(32px,4vw,48px)}
.book .lead{max-width:min(100%,560px);margin:18px auto 0}
.picker{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:24px;padding:clamp(24px,4vw,40px);backdrop-filter:blur(8px)}
.picker fieldset{border:0;padding:0;margin:0 0 26px}
.picker legend{display:flex;align-items:center;gap:10px;padding:0;margin-bottom:14px;font-family:var(--font-display);font-weight:700;font-size:15px}
.step-no{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:var(--fox);color:var(--bg);font-size:13px;font-weight:800;flex:none}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative}
.pill input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill span{display:block;min-height:52px;padding:14px 20px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-size:15px;font-weight:500;color:var(--ink-70);transition:all .16s ease}
.pill input:checked + span{background:var(--fox);border-color:var(--fox);color:var(--bg);font-weight:700}
.pill input:focus-visible + span{outline:2px solid var(--fox);outline-offset:3px}
.verdict{
  border:1px solid var(--line);border-left:3px solid var(--fox);border-radius:16px;
  padding:20px 22px;margin:0 0 24px;min-height:96px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgb(131 213 220 / .12),transparent 70%),var(--surface-2);
  font-size:15px;color:var(--ink-70);
}
.verdict b{color:#fff;font-weight:600}
.verdict .big{display:block;font-size:clamp(26px,4.4vw,40px);line-height:1.05;color:var(--fox);margin-bottom:6px}
.picker .btn{width:100%}
.picker-note{font-size:13.5px;color:var(--ink-50);margin:12px 0 0;text-align:center}

/* --- 06 Ablauf ----------------------------------------------------------- */
.how{padding:var(--rhythm-half) 22px}
.steps{counter-reset:s;margin:clamp(34px,4vw,48px) auto 0;display:grid;max-width:820px}
.step{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;padding:24px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--fox);padding-top:4px}
.step h3{font-size:19px}
.step p{margin:6px 0 0;color:var(--ink-65);font-size:15.5px}

/* --- 07 Team ------------------------------------------------------------- */
section.who{padding:var(--rhythm-half) 22px}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(46%,165px),1fr));gap:12px;margin-top:clamp(34px,4vw,48px)}
/* Zehn echte Beitraege aus dem Instagram-Feed, laufen von rechts nach links */
.reelstrip{
  margin-top:clamp(34px,4vw,48px);
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;touch-action:pan-y;overscroll-behavior-x:contain;
}
.reelstrip::-webkit-scrollbar{display:none}
.reelstrip.is-drag{cursor:grabbing}
.reelstrip.is-drag *{pointer-events:none}
.reelstrip-row{display:flex;gap:14px;width:max-content;padding:0 14px}
.reel{flex:none;width:clamp(150px,17vw,210px);border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.reelnote{margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--ink-50)}
.reelnote a{color:var(--fox);text-decoration:none;border-bottom:1px solid rgb(131 213 220 / .4)}

.strip img,.strip video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:18px;border:1px solid var(--line);display:block}
.facts{display:grid;margin:clamp(34px,4vw,48px) auto 0;max-width:820px}
.pullquote{max-width:820px;margin:clamp(30px,4vw,44px) auto 0;text-align:center;
  font-family:var(--font-display);font-weight:300;font-size:clamp(19px,2.2vw,26px);
  line-height:1.4;letter-spacing:-.01em;color:var(--ink-85)}
.fact{display:grid;grid-template-columns:minmax(0,215px) 1fr;gap:28px;padding:22px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-65);align-items:baseline}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact b{font-family:var(--font-display);font-weight:600;color:#fff;font-size:16px;line-height:1.35}
@media (max-width:620px){.fact{grid-template-columns:1fr;gap:5px}}
.quote{text-align:center;max-width:720px;margin:clamp(34px,4vw,48px) auto 0;font-size:clamp(17px,2.2vw,22px);line-height:1.5;color:var(--ink-80);font-style:italic}

/* --- 08 CTA-Band mit dem Fuchs ------------------------------------------- */
.cta-band{position:relative;z-index:1;padding:var(--rhythm-half) 22px}
.cta-banner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  max-width:1320px;margin:0 auto;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .16),transparent 70%),linear-gradient(120deg,var(--air),var(--fox-deep));
  border:1px solid var(--fox);border-radius:26px;padding:clamp(28px,4vw,44px);color:#fff;
  transition:transform .25s ease;
}
.cta-banner:hover{transform:translateY(-3px)}
@media (min-width:900.02px){
  .cta-banner{position:relative;padding-right:clamp(230px,28vw,400px)}
}
.cta-banner .title{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,3.2vw,36px);line-height:1.1;margin-bottom:8px}
.cta-banner .sub{font-size:15.5px;color:var(--ink-80)}
/* Der Fuchs haengt oben aus dem Band heraus und steht unten exakt auf der
   Kante. Absolut positioniert, weil er sonst selbst die Zeilenhoehe bestimmt
   und align-self:flex-end wirkungslos bleibt. */
.cta-fox{
  position:absolute;right:clamp(20px,3vw,40px);bottom:0;
  height:clamp(190px,24vw,320px);width:auto;margin:0;
  flex:none;filter:drop-shadow(0 12px 34px rgb(0 0 0 / .5));pointer-events:none;
}
.cta-btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:var(--wa-ink);
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  padding:17px 30px;border-radius:var(--radius-pill);flex:none;animation:pulseGlow 3.2s ease-in-out infinite;
}
@media (max-width:900px){
  .cta-banner{flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;
    padding-bottom:clamp(40px,7vw,56px);padding-right:clamp(60px,17vw,92px)}
  .cta-banner>div{position:relative;z-index:2}
  .cta-fox{position:absolute;right:-16px;bottom:-8px;height:clamp(108px,27vw,145px);margin:0;z-index:0;opacity:.92}
  .cta-btn{align-self:flex-start;padding:14px 24px;font-size:14px;position:relative;z-index:2}
}

/* --- 09 Pakete ----------------------------------------------------------- */
.pricing{padding:var(--rhythm-half) 22px}
.pricing .section-head{margin-bottom:clamp(36px,5vw,56px)}
.pricing .eyebrow{margin-bottom:16px}
.pricing h2 span{color:var(--fox)}
.pricing .lead{max-width:min(100%,560px);margin:18px auto 0}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;align-items:stretch}
@media (max-width:900px){.pricing-grid{row-gap:36px}}
.price-card{
  position:relative;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgb(131 213 220 / .16),transparent 70%),rgb(255 255 255 / .035);
  --pad-t:32px;--pad-x:28px;
  border:1px solid rgb(255 255 255 / .12);border-radius:24px;padding:var(--pad-t) var(--pad-x) 32px;
  display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(8px);
  transition:border-color .25s ease,transform .25s ease;
}
.price-card:hover{border-color:rgb(131 213 220 / .7)}
.card-media{
  margin:calc(-1 * var(--pad-t)) calc(-1 * var(--pad-x)) 6px;
  aspect-ratio:16/10;overflow:hidden;border-radius:23px 23px 0 0;
  background:rgb(255 255 255 / .04);position:relative;
}
.card-media img,.card-media video{width:100%;height:100%;object-fit:cover;display:block}
.card-media::after{content:'';position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,rgb(10 20 23 / 0),rgb(10 20 23 / .75))}
.price-card .plan-name{font-size:19px;letter-spacing:.02em}
.price-card .plan-term{font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--ink-50);text-transform:uppercase}
.price-card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1}
.price-card li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink-70)}
.price-card li::before{content:'';position:absolute;left:3px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--fox);opacity:.6}
.price-card .desc{font-size:14.5px;line-height:1.55;color:var(--ink-70)}
.price-card .flag{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--fox);text-transform:uppercase}
.price-card .buy{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1.5px solid rgb(255 255 255 / .3);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 20px;border-radius:var(--radius-pill);transition:all .2s ease;
}
.price-card .buy:hover{background:rgb(27 110 156 / .3);border-color:var(--fox);color:#fff}
.price-card--best{
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .14),transparent 70%),linear-gradient(165deg,rgb(27 110 156 / .55),rgb(15 59 74 / .4));
  --pad-t:38px;
  border:1.5px solid var(--fox);padding:var(--pad-t) var(--pad-x) 32px;box-shadow:0 0 50px rgb(131 213 220 / .25);
}
.price-card--best:hover{transform:translateY(-4px)}
.price-card--best .plan-term{color:var(--ink-60)}
.price-card--best li{color:var(--ink-78)}
.price-card .ribbon{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;
  background:linear-gradient(90deg,var(--fox),var(--fox-light));color:var(--bg);
  font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 18px;border-radius:var(--radius-pill);white-space:nowrap;
}
.price-card .buy--main{
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .3),transparent 70%),var(--wa);
  border:none;color:var(--wa-ink);font-size:15px;padding:17px 20px;animation:pulseGlow 3.2s ease-in-out infinite;
}
.buy--main:hover{transform:translateY(-2px)}
.pricing-note{text-align:center;margin-top:28px;font-size:14.5px;color:var(--ink-60)}

/* --- 10 FAQ -------------------------------------------------------------- */
.faq{padding:var(--rhythm-half) 22px}
.faq-list{margin-top:clamp(30px,4vw,44px);display:grid;gap:10px;max-width:820px;margin-inline:auto}
.faq details{
  position:relative;border:1px solid var(--line);border-radius:16px;
  background:rgb(255 255 255 / .022);overflow:hidden;
  transition:border-color .25s ease,background .25s ease;
}
.faq details:hover{border-color:var(--line-strong);background:rgb(255 255 255 / .04)}
.faq details[open]{border-color:rgb(131 213 220 / .38);background:rgb(131 213 220 / .05)}
/* schmaler Akzent links, faehrt beim Oeffnen heraus */
.faq details::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:var(--fox);transform:scaleY(0);transform-origin:top;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.faq details[open]::before{transform:scaleY(1)}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:19px 56px 19px 22px;
  font-family:var(--font-body);font-weight:600;font-size:16.5px;line-height:1.4;color:#fff;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .marker{
  position:absolute;right:16px;top:50%;width:26px;height:26px;
  transform:translateY(-50%);display:grid;place-items:center;
  border-radius:50%;border:1px solid rgb(131 213 220 / .35);
  color:var(--fox);font-size:17px;font-weight:400;line-height:1;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),background .25s ease,border-color .25s ease;
}
.faq details:hover summary .marker{background:rgb(131 213 220 / .1)}
.faq details[open] summary .marker{transform:translateY(-50%) rotate(135deg);background:rgb(131 213 220 / .16);border-color:rgb(131 213 220 / .6)}
.faq .a{padding:0 22px 20px;color:var(--ink-70);font-size:15.5px;line-height:1.62;max-width:min(100%,640px)}

/* --- 11 Abschluss und Formular ------------------------------------------- */
.final{padding:clamp(70px,10vw,120px) 22px;text-align:center}
.final h2{font-size:clamp(30px,5vw,58px);line-height:1.08;margin:0 0 20px}
.final .lead{max-width:min(100%,560px);margin:0 auto}
.form{display:grid;gap:14px;margin:34px auto 0;max-width:520px;text-align:left}
.field label{display:block;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);margin-bottom:8px}
.field input{
  width:100%;min-height:56px;padding:0 20px;border-radius:16px;
  border:1px solid var(--line-strong);background:var(--surface);color:#fff;
  font-family:var(--font-body);font-size:16px;
}
.field input::placeholder{color:var(--ink-40)}
.field input:focus{outline:2px solid var(--fox);outline-offset:1px;border-color:transparent}
.err{color:#ff7a70;font-size:13.5px;min-height:19px;margin:4px 0 0}
.form-note{font-size:13.5px;color:var(--ink-40);margin:4px 0 0}

/* --- feste Leiste unten, der einzige Weg der immer sichtbar ist ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:12px;
  padding:12px 22px;padding-bottom:max(12px,env(safe-area-inset-bottom));
  background:rgb(10 20 23 / .93);backdrop-filter:blur(14px);
  border-top:1px solid var(--line-strong);
}
.bar .btn{flex:none;padding:15px 38px;animation:none}
.bar-text{flex:1;font-size:13.5px;line-height:1.35;color:var(--ink-60)}
.bar-text b{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;color:#fff}
@media (max-width:620px){.bar-text{display:none}.bar .btn{flex:1}}

/* --- Fusszeile ----------------------------------------------------------- */
.footer{
  position:relative;z-index:1;border-top:1px solid var(--line);
  background:var(--bg-soft);padding:clamp(40px,6vw,64px) 22px 48px;
  text-align:center;font-size:14px;color:var(--ink-50);
}
.footer img{height:36px;width:auto;margin:0 auto 18px}
.footer a{color:var(--ink-75)}
.footer a:hover{color:var(--fox)}

/* ==========================================================================
   ZUSATZMODULE aus dem sb-tt-Nachbau, 31.08.2026
   Vier Bausteine, die der Seite gefehlt haben. Farben und Radien folgen den
   bestehenden Tokens, es wird KEINE vorhandene Regel veraendert.
   Regel: keine ch/ex-Einheiten, damit das Layout beim Schriftladen nicht springt.
   ========================================================================== */

/* --- A: Vollbild zieht beim Scrollen auf ---------------------------------- */
.expand{position:relative;z-index:1;height:160vh}
@media (max-width:720px){.expand{height:150vh}}
.expand-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.expand-frame{
  position:relative;
  width:calc(44vw + 56vw * var(--p,0));
  height:calc(46vh + 54vh * var(--p,0));
  border-radius:calc(26px - 26px * var(--p,0));
  overflow:hidden;
  box-shadow:0 40px 90px rgb(0 0 0 / .5);
}
.expand-frame img,.expand-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.expand-frame .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgb(4 12 15 / .2),rgb(4 12 15 / .62))}
.expand-copy{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;pointer-events:none}
.expand-copy .title{font-family:var(--font-display);font-weight:800;font-variation-settings:'wdth' 112;font-size:clamp(24px,4.6vw,58px);line-height:1.05;text-shadow:0 4px 30px rgb(0 0 0 / .6)}
.expand-copy .hint{font-size:12.5px;letter-spacing:.34em;color:var(--ink-75);font-weight:700;margin-top:18px}
@media (prefers-reduced-motion:reduce){
  .expand{height:auto}
  .expand-pin{position:static;height:auto}
  .expand-frame{width:100%;height:auto;aspect-ratio:16/9;border-radius:22px}
}

/* --- B: Bento-Raster ------------------------------------------------------ */
.inside{padding:clamp(60px,9vw,110px) 22px}
/* --- 03 Der Weg der Luft -------------------------------------------------- */
.airpath{padding:var(--rhythm-half) 22px}
.airpath .lead{max-width:min(100%,620px);margin:22px auto 0;color:var(--ink-70);font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.62}

.path{
  list-style:none;margin:clamp(44px,6vw,72px) auto 0;padding:0;
  max-width:980px;position:relative;
  display:grid;gap:clamp(40px,6vw,76px);
}
/* die durchgehende Linie, an der die drei Stationen haengen */
.path::before{
  content:'';position:absolute;top:8px;bottom:8px;left:27px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgb(131 213 220 / .5) 12%,rgb(131 213 220 / .5) 88%,transparent);
}
.stop{
  position:relative;display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:1fr;padding-left:70px;
}
/* der Punkt auf der Linie */
.stop::before{
  content:'';position:absolute;left:20px;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:2px solid var(--fox);
  box-shadow:0 0 0 5px rgb(10 20 23 / .9),0 0 22px rgb(131 213 220 / .35);
}
.stop-media{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--surface);line-height:0}
.stop-media img,.stop-media video{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.stop-no{
  font-family:var(--font-display);font-weight:300;font-size:clamp(30px,4vw,46px);
  line-height:1;color:var(--fox);letter-spacing:-.02em;margin-bottom:10px;
}
.stop-text h3{font-weight:600;font-size:clamp(19px,2.2vw,24px);line-height:1.25;margin:0 0 10px;font-family:var(--font-body)}
.stop-text p{margin:0;color:var(--ink-70);font-size:15.5px;line-height:1.62;max-width:min(100%,460px)}

/* ab Tablet: Bild und Text nebeneinander, im Wechsel links und rechts */
@media (min-width:860px){
  .path::before{left:50%;transform:translateX(-1px)}
  .stop{grid-template-columns:1fr 1fr;align-items:center;padding-left:0;gap:clamp(30px,5vw,64px)}
  .stop::before{left:50%;top:50%;transform:translate(-50%,-50%)}
  .stop:nth-child(even) .stop-media{order:2}
  .stop:nth-child(even) .stop-text{order:1;text-align:right;justify-self:end}
  .stop:nth-child(even) .stop-text p{margin-left:auto}
}

.path-end{
  margin:clamp(40px,5vw,64px) auto 0;text-align:center;max-width:min(100%,560px);
  font-family:var(--font-display);font-weight:300;font-size:clamp(19px,2.4vw,27px);
  line-height:1.35;letter-spacing:-.012em;color:#fff;
}


/* --- C: Gegenueberstellung ------------------------------------------------ */
.versus{position:relative;z-index:1;padding:var(--rhythm-half) 22px;max-width:1140px;margin:0 auto}
.versus .section-head{margin-bottom:clamp(30px,4vw,50px)}
.versus h2 span{color:var(--fox)}
.versus-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;align-items:stretch}
.versus-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.06em;
  background:var(--bg);border:1px solid var(--line-strong);color:var(--ink-60);
}
.versus-card{
  position:relative;display:flex;flex-direction:column;gap:18px;
  padding:30px 26px;border-radius:26px;border:1px solid var(--line);
  background:var(--surface);
}
.versus-card .tag-row{display:flex;align-items:center;gap:12px}
.versus-card .tag{
  font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.22em;
  padding:7px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);color:var(--ink-60);
}
.versus-card .head{font-family:var(--font-display);font-weight:300;font-size:clamp(21px,2.5vw,29px);letter-spacing:-.01em;opacity:.95}
.versus-item{display:flex;gap:15px;align-items:flex-start}
.versus-item .mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.versus-item .body{font-size:15px;line-height:1.5;font-weight:500;color:var(--ink-78)}
.versus-item .body strong{color:#fff;font-size:15.5px}
.versus-card--bad .mark{background:rgb(255 255 255 / .07);color:var(--ink-50)}
.versus-card--fox{background:linear-gradient(170deg,rgb(27 110 156 / .22),rgb(255 255 255 / .03));border-color:rgb(131 213 220 / .3)}
.versus-card--fox .tag{border-color:rgb(131 213 220 / .45);color:var(--fox)}
.versus-card--fox .head span{color:var(--fox)}
.versus-card--fox .mark{background:rgb(37 211 102 / .16);color:var(--wa)}

/* --- D: Zitat-Laufbaender ------------------------------------------------- */
.voices{padding:var(--rhythm-half) 0;position:relative;z-index:1}
.voices .section-head{padding:0 22px;margin-bottom:clamp(34px,5vw,50px)}
.voices h2 span{color:var(--fox)}
.marquee{display:flex;flex-direction:column;gap:18px}
.marquee-row{display:flex;gap:18px;width:max-content;align-items:stretch}
/* Ein Scroller pro Reihe. Automatischer Lauf und Ziehen teilen sich scrollLeft,
   deshalb kollidieren sie nicht wie bei einer CSS-Transform. */
.mq{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;touch-action:pan-y;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq::-webkit-scrollbar{display:none}
.mq.is-drag{cursor:grabbing}
.mq.is-drag *{pointer-events:none}
.quote{width:340px;flex:none;padding:26px 24px;border-radius:22px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;justify-content:center}
.quote .mark{color:var(--fox);font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1;margin-bottom:12px}
.quote p{font-size:15.5px;line-height:1.58;font-weight:400;color:var(--ink-85);margin:0}

.quote--wa{background:rgb(27 110 156 / .12);border-color:rgb(131 213 220 / .28)}
.quote--wa .mark{color:var(--wa)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqr{from{transform:translateX(-50%)}to{transform:translateX(0)}}


/* Trust-Zeile direkt am Buchungs-Knopf: Trust-Signale gehoeren dorthin, wo der
   Widerstand am groessten ist, nicht in den Fuss. */
.picker-trust{margin-top:10px;color:var(--ink-65)}
.picker-trust strong{color:var(--fox)}

/* Handy: Schrift an die Fensterbreite koppeln, damit 360 bis 430 dieselbe
   Zeilenzahl haben (Wert = bisherige Untergrenze bezogen auf 390 px). */
@media (max-width:480px){
  .hero h1{font-size:8.7vw}
  .problem h2{font-size:6.4vw}
  .voices .h2{font-size:7.2vw}
  .human h2{font-size:7.7vw}
}
/* Tablet: 3 Preiskarten in 2 Spalten, die dritte mittig statt Loch rechts. */
@media (min-width:600px) and (max-width:899px){
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pricing-grid>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}
}