/* ═══════════ KAOS MMA ═══════════ */
:root{
  --bg-0:#0A0B0A;
  --bg-1:#131513;
  --bg-2:#1A1D1B;
  --line:#262A27;
  --tx:#F4F6F4;
  --mut:#8B948D;
  --acc:#7FFF2A;          /* nur als Akzent — nie in der Schrift */
  --wa:#7FFF2A;
  --pad:clamp(22px,5.2vw,80px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@media(min-width:901px){ html{scroll-behavior:smooth} }
body{
  background:var(--bg-0);color:var(--tx);
  font-family:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.intro-on{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Filmkorn */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(2) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-2%,1.5%)}100%{transform:translate(1.5%,-1%)}}
/* Auf großen Schirmen darf sich das Korn bewegen; dafür etwas Überstand */
@media(min-width:901px){ body::after{inset:-30%} }

/* ═══════════ INTRO ═══════════ */
#intro{position:fixed;inset:0;z-index:8000;background:#000;
  display:grid;place-items:center;overflow:hidden;transition:opacity .7s ease}
#intro.done{opacity:0;pointer-events:none}
.ivid{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.08);
  width:100%;height:100%;object-fit:cover;
  /* Der Feuerball sitzt im Clip links der Mitte; der 2:1-Zuschnitt verschiebt ihn
     zusätzlich. Dieser Wert rückt ihn auf breiten Schirmen in die Bildmitte. */
  object-position:18% center;
  mix-blend-mode:screen;          /* Schwarz fällt weg, nur das Feuer bleibt */
  opacity:0;transition:opacity 1.1s ease;   /* verglüht sanft statt abrupt */
  filter:grayscale(1) contrast(1.32) brightness(1.05);  /* weiß-grau statt orange */
}
/* grüner Lichtschein — der Akzent liegt im Bild, nicht in der Schrift */
#bloom{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(127,255,42,.5),rgba(127,255,42,.14) 28%,transparent 62%);
  mix-blend-mode:screen;filter:blur(30px);transition:opacity .5s ease}
#introLogo{position:relative;width:min(56vw,660px);opacity:0;
  filter:blur(30px) brightness(2.2);transform:scale(.24);   /* startet weit hinten */
  will-change:transform,filter,opacity}
#introLogo img{width:100%;filter:drop-shadow(0 0 60px rgba(255,255,255,.22))}
@media(max-width:900px){ .ivid{object-position:40% center} }
#skip{position:absolute;bottom:36px;right:36px;background:none;border:0;color:#5a605b;
  font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  transition:color .3s;z-index:5}
#skip:hover{color:var(--tx)}

/* ═══════════ HEADER ═══════════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;padding:22px var(--pad);
  opacity:0;transition:opacity .6s ease,background .4s,border-color .4s;
  border-bottom:1px solid transparent}
.hdr.in{opacity:1}
.hdr.stuck{background:rgba(10,11,10,.8);backdrop-filter:blur(14px);border-color:var(--line)}
.hdr__logo img{width:clamp(88px,9vw,116px)}
.hdr__nav{display:flex;gap:clamp(18px,2.6vw,38px);margin-left:auto;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.hdr__nav a{position:relative;padding:5px 0;transition:color .25s}
.hdr__nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hdr__nav a:hover{color:var(--tx)}
.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:820px){.hdr__nav{display:none}}

/* ═══════════ BUTTONS ═══════════ */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;font-size:14px;font-weight:600;letter-spacing:.04em;
  overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .35s,color .3s,border-color .3s}
.btn>*{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px)}
/* WhatsApp — der einzige grüne Button */
.btn--wa{background:var(--wa);color:#07130A;text-transform:uppercase;font-weight:700;letter-spacing:.06em}
.btn--wa::before{content:"";position:absolute;inset:0;background:#fff;
  transform:translateY(101%);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.btn--wa:hover{box-shadow:0 14px 38px -14px rgba(127,255,42,.6)}
.btn--wa:hover::before{transform:translateY(0)}
/* Formular — Umrandung, füllt sich beim Drüberfahren */
.btn--ghost{background:none;color:var(--mut);border:1px solid var(--line)}
.btn--ghost::before{content:"";position:absolute;inset:0;background:rgba(127,255,42,.09);
  transform:translateY(101%);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.btn--ghost:hover{color:var(--tx);border-color:var(--acc)}
.btn--ghost:hover::before{transform:translateY(0)}
.btn__ar{transition:transform .3s}
.btn--ghost:hover .btn__ar{transform:translateX(5px)}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  /* unten Platz für den Scroll-Hinweis, sonst überlappt er die Knöpfe */
  padding:150px var(--pad) 168px;overflow:hidden}
.hero__glow{position:absolute;top:-20%;right:-5%;width:min(78vw,940px);aspect-ratio:1;
  pointer-events:none;
  /* Ein Farbverlauf ist bereits weich — ein blur() darauf kostet nur Rechenzeit */
  background:radial-gradient(circle,rgba(127,255,42,.15),rgba(127,255,42,.04) 44%,transparent 70%)}

/* Christian — weich ausgeblendet, kein harter Freisteller */
.hero__fig{position:absolute;top:0;right:0;width:min(50%,760px);height:100%;
  opacity:0;transform:translateX(40px) scale(1.03);
  transition:opacity 1.5s ease .35s,transform 1.7s cubic-bezier(.16,1,.3,1) .35s}
.hero.in .hero__fig{opacity:1;transform:none}
.hero__fig img{width:100%;height:100%;object-fit:cover;
  object-position:64% 46%;
  filter:grayscale(1) contrast(1.1) brightness(.8);
  /* weich auslaufend; Schwerpunkt rechts, damit Abstand zur Schrift bleibt */
  -webkit-mask-image:radial-gradient(ellipse 58% 78% at 60% 46%,#000 16%,rgba(0,0,0,.5) 50%,transparent 84%);
          mask-image:radial-gradient(ellipse 58% 78% at 60% 46%,#000 16%,rgba(0,0,0,.5) 50%,transparent 84%)}
@media(max-width:900px){
  .hero__fig{width:100%;opacity:.28}
  .hero.in .hero__fig{opacity:.28}
}

.hero__inner{position:relative;z-index:2;width:100%;max-width:1420px;margin:0 auto}

.eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:30px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);
  opacity:0;transform:translateY(12px);
  transition:opacity .8s ease .05s,transform .8s cubic-bezier(.16,1,.3,1) .05s}
/* Gleicher Strich wie bei allen Abschnitts-Kickern statt eines Punkts */
.eyebrow::before{content:"";width:22px;height:1px;background:var(--acc);flex:0 0 auto}
.hero.in .eyebrow{opacity:1;transform:none}

.hero__h1{font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(54px,9.2vw,146px);line-height:.9;letter-spacing:.005em;
  text-transform:uppercase;max-width:11ch}
.hero__h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero__h1 .ln>span{display:block;transform:translateY(105%);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.hero.in .ln>span{transform:none}
.hero.in .ln:nth-child(2)>span{transition-delay:.1s}

.hero__h2{margin-top:24px;font-family:"Inter",sans-serif;font-weight:600;
  /* deutlich groesser: sonst wirkt die Zeile wie Fliesstext statt wie zweite Ebene */
  font-size:clamp(23px,3.1vw,40px);line-height:1.15;letter-spacing:-.02em;color:var(--tx);
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease .38s,transform .9s cubic-bezier(.16,1,.3,1) .38s}
.hero.in .hero__h2{opacity:1;transform:none}

.hero__lead{margin-top:14px;max-width:38ch;font-size:clamp(15px,1.5vw,18px);color:var(--mut);
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease .5s,transform .9s cubic-bezier(.16,1,.3,1) .5s}
.hero.in .hero__lead{opacity:1;transform:none}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:46px;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease .56s,transform .9s cubic-bezier(.16,1,.3,1) .56s}
.hero.in .hero__cta{opacity:1;transform:none}

/* Scroll-Hinweis — deutlicher als vorher */
.scroll{position:absolute;bottom:34px;left:var(--pad);z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  opacity:0;transition:opacity 1s ease 1.15s}
.hero.in .scroll{opacity:1}
.scroll__t{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);
  transition:color .3s}
.scroll:hover .scroll__t{color:var(--tx)}
.scroll__l{position:relative;width:1px;height:44px;background:var(--line);overflow:hidden}
.scroll__l i{position:absolute;inset:0;background:linear-gradient(var(--acc),transparent);
  animation:sc 1.9s cubic-bezier(.6,0,.35,1) infinite}
@keyframes sc{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.next{background:var(--bg-0);padding:130px var(--pad);text-align:center;color:var(--mut)}

/* ═══════════ DEV ═══════════ */
.dev{position:fixed;right:16px;bottom:16px;z-index:200;
  background:rgba(15,17,15,.9);backdrop-filter:blur(10px);border:1px solid var(--line);
  padding:11px;display:flex;flex-direction:column;gap:6px}
.dev p{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#5a605b}
.dev button{background:none;border:1px solid var(--line);color:var(--mut);
  font:inherit;font-size:11px;padding:6px 11px;cursor:pointer;transition:.2s}
.dev button:hover{color:var(--tx);border-color:#383d39}
@media(max-width:900px){.dev{display:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════ BAUSTEINE ═══════════ */
.wrap{width:100%;max-width:1240px;margin:0 auto}
.wrap--narrow{max-width:860px}
.sec{padding:clamp(80px,11vw,150px) var(--pad);position:relative}
.sec--a{background:var(--bg-1)}
.sec--b{background:var(--bg-2)}
.sec+.sec{border-top:1px solid var(--line)}

.kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.kicker::before{content:"";width:22px;height:1px;background:var(--acc)}
.h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  /* 0.98 war enger als die Schrift selbst, bei zweizeiligen Ueberschriften klebten die Zeilen */
  font-size:clamp(34px,5.4vw,72px);line-height:1.06;letter-spacing:.005em}
.h2--sm{font-size:clamp(30px,4.2vw,54px)}
.sec__lead{margin-top:26px;max-width:60ch;font-size:clamp(16px,1.6vw,19px);color:var(--mut)}
.note{margin-top:44px;padding-left:18px;border-left:2px solid var(--acc);
  max-width:66ch;font-size:15px;color:var(--mut)}
.note strong{color:var(--tx);font-weight:600}
.sec p+p{margin-top:18px}

/* Einblenden beim Scrollen */
[data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1)}
[data-rv].rv{opacity:1;transform:none}

/* ═══════════ KARTEN ═══════════ */
.cards{display:grid;gap:18px;margin-top:clamp(40px,5vw,64px)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.cards--3,.cards--4{grid-template-columns:1fr}}
.card{position:relative;padding:32px 26px;background:var(--bg-0);border:1px solid var(--line);
  transition:border-color .4s,transform .45s cubic-bezier(.2,.7,.2,1),
             box-shadow .45s,background-color .4s}
/* Kachel hebt sich deutlich ab und glimmt in der Akzentfarbe */
.card:hover,.step:hover{
  border-color:var(--acc);
  transform:translateY(-10px) scale(1.025);
  background:#0E120D;
  box-shadow:0 28px 64px -26px rgba(127,255,42,.5),
             0 0 46px -14px rgba(127,255,42,.28),
             inset 0 0 0 1px rgba(127,255,42,.14)}
.card:hover .card__n{color:var(--acc)}
.card__n{display:block;margin-bottom:16px;font-family:"Anton",Impact,sans-serif;
  font-size:13px;letter-spacing:.14em;color:var(--acc)}
.card h3{font-size:19px;font-weight:600;line-height:1.3;margin-bottom:12px}
.card p{font-size:15px;color:var(--mut);line-height:1.6}
.card--no h3{padding-left:26px;position:relative}
.card--no h3::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:2px;background:var(--acc)}

/* ═══════════ GEGENÜBERSTELLUNG ═══════════ */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,38px);
  align-items:stretch;margin-top:clamp(44px,5vw,68px)}
@media(max-width:860px){.vs{grid-template-columns:1fr}}
.vs__col{padding:32px 28px;border:1px solid var(--line);background:var(--bg-0)}
.vs__col--new{border-color:rgba(127,255,42,.28);
  box-shadow:0 0 60px -30px rgba(127,255,42,.4)}
.vs__lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px;color:var(--mut)}
.vs__col--new .vs__lbl{color:var(--acc)}
.vs__col ul{list-style:none}
.vs__col li{position:relative;padding-left:26px;font-size:15px;line-height:1.55;color:var(--mut)}
.vs__col li+li{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.vs__col--old li::before{content:"×";position:absolute;left:0;color:#5c635e;font-size:16px}
.vs__col--new li{color:var(--tx)}
.vs__col--new li::before{content:"→";position:absolute;left:0;color:var(--acc);font-size:14px}
.vs__x{display:grid;place-items:center;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#565c57}
@media(max-width:860px){.vs__x{padding:6px 0}}

/* ═══════════ ZWEISPALTER ═══════════ */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,76px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split__img{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.split__img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1) contrast(1.06) brightness(.94);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.split__img:hover img{transform:scale(1.04)}
.split__txt .h2{margin-bottom:24px}
.split__txt p{color:var(--mut);max-width:56ch}

.stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);margin-top:40px;
  padding-top:28px;border-top:1px solid var(--line)}
.stats b{display:block;font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(32px,4vw,46px);line-height:1;color:var(--acc)}
.stats span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

/* ── Bücher: eigener Block über die volle Breite ── */
.books{margin-top:clamp(56px,7vw,90px);padding-top:clamp(40px,5vw,60px);
  border-top:1px solid var(--line)}
.books__head{text-align:center;margin-bottom:clamp(30px,4vw,46px)}
.books__head .kicker{justify-content:center}
.books__intro{max-width:56ch;margin:0 auto;font-size:15px;color:var(--mut)}
.books__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.books__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.books__grid{grid-template-columns:1fr}}
.bk{position:relative;padding:28px 24px;background:var(--bg-0);border:1px solid var(--line);
  transition:border-color .4s,transform .45s cubic-bezier(.2,.7,.2,1),
             box-shadow .45s,background-color .4s}
.bk:hover{border-color:var(--acc);transform:translateY(-10px) scale(1.025);background:#0E120D;
  box-shadow:0 28px 64px -26px rgba(127,255,42,.5),
             0 0 46px -14px rgba(127,255,42,.28),
             inset 0 0 0 1px rgba(127,255,42,.14)}
.bk__n{display:block;margin-bottom:14px;font-family:"Anton",Impact,sans-serif;
  font-size:13px;letter-spacing:.14em;color:var(--acc)}
.bk h3{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:22px;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin-bottom:10px}
.bk p{font-size:14px;color:var(--mut);line-height:1.5}
.books__link{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(26px,3vw,36px);
  /* etwas groesser, dafuer enger gesperrt — sonst wirkt Versalschrift schnell billig */
  font-size:14px;letter-spacing:.11em;text-transform:uppercase;color:var(--acc);transition:gap .3s}
.books__link:hover{gap:16px}
.books__ar{transition:transform .3s}
.books{text-align:center}
.books__grid{text-align:left}

/* ═══════════ SCHRITTE ═══════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(44px,5vw,66px)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:36px 28px 32px;border:1px solid var(--line);background:var(--bg-0);
  transition:border-color .4s,transform .45s cubic-bezier(.2,.7,.2,1),
             box-shadow .45s,background-color .4s}
.step__n{position:absolute;top:-20px;left:26px;width:42px;height:42px;display:grid;place-items:center;
  background:var(--acc);color:#07130A;font-family:"Anton",Impact,sans-serif;font-size:20px}
.step h3{margin:12px 0 12px;font-size:20px;font-weight:600}
.step p{font-size:15px;color:var(--mut)}

/* ═══════════ BEWERTUNGEN ═══════════ */
.stimmen__zahl{margin-top:14px;font-size:14px;color:var(--mut)}
.rez{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:clamp(36px,4.4vw,54px)}
.rz{padding:30px 28px;border:1px solid var(--line);background:var(--bg-0);
  display:flex;flex-direction:column}
/* Gold, nicht Gruen: so erkennt man eine Bewertung, ohne zu lesen.
   Gruen ist auf dieser Seite die Farbe fuers Handeln und bleibt das auch. */
.rz__st{display:flex;gap:3px;margin-bottom:17px}
.rz__st svg{width:15px;height:15px;display:block;fill:#FBBC04}
.rz__tx{font-size:15px;line-height:1.65;color:var(--tx);flex:1}
.rz__wer{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6d756f}
/* Handy: seitlich durchwischen. Die naechste Karte lugt hervor, das ist
   der Hinweis, dass es weitergeht. Macht der Browser allein, ohne Skript. */
@media(max-width:860px){
  .rez{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;
    scrollbar-width:none}
  .rez::-webkit-scrollbar{display:none}
  .rz{scroll-snap-align:start}
}
.rez__alle{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(24px,3vw,32px);
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--acc);transition:gap .3s}
.rez__alle:hover{gap:16px}
.rez__ar{transition:transform .3s}

/* ═══════════ FAQ ═══════════ */
.faq{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;padding:24px 48px 24px 0;cursor:pointer;list-style:none;
  font-size:clamp(16px,1.7vw,19px);font-weight:500;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acc)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-6px;
  background:linear-gradient(var(--mut),var(--mut)) center/13px 1px no-repeat,
             linear-gradient(var(--mut),var(--mut)) center/1px 13px no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details[open] summary{color:var(--acc)}
.faq details p{padding:0 40px 26px 0;font-size:15px;color:var(--mut);max-width:70ch}

/* ═══════════ FORMULAR ═══════════ */
/* ── Kontakt: mittig, ein Weg ── */
.wrap--form{max-width:720px;text-align:center}
.wrap--form .kicker{justify-content:center}
.wrap--form .sec__lead{margin-left:auto;margin-right:auto}
.wrap--form .form{margin-top:44px;text-align:left}
.f__ort{margin-top:26px;font-size:13px;color:var(--mut)}

.form{padding:clamp(26px,3vw,38px);border:1px solid var(--line);background:var(--bg-0)}
.form label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.form label+label{margin-top:22px}
.form input[type=text],.form input[type=email],.form input[type=tel],
.form select,.form textarea{
  width:100%;margin-top:8px;padding:13px 14px;background:var(--bg-1);
  border:1px solid var(--line);color:var(--tx);font:inherit;font-size:16px;
  letter-spacing:normal;text-transform:none;transition:border-color .25s}
.form textarea{resize:vertical;min-height:96px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc)}
.form label i{font-style:normal;text-transform:none;letter-spacing:normal;color:#5f665f}
.f__stern{color:var(--acc);font-weight:400}
.f__pflicht{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5f665f}
/* Feld, das nur bei „Warteliste Kindertraining" auftaucht. Die grüne
   Kante zeigt, dass es zur Auswahl darüber gehört. Das display:none
   steht ausdrücklich da, weil .form label{display:block} sonst das
   hidden-Attribut überstimmen würde. */
.form .f__wenn{margin-top:22px;padding-left:16px;border-left:2px solid var(--acc)}
.form .f__wenn[hidden]{display:none}
/* label+label greift über den eingeschobenen Block hinweg nicht mehr */
.form .f__wenn+label{margin-top:22px}
.f__wenn__hint{margin-top:11px;font-size:13px;line-height:1.6;
  letter-spacing:normal;text-transform:none;color:var(--mut)}
/* Zwei Ziffern brauchen kein Feld über die ganze Breite */
.form .f__wenn input{display:block;max-width:150px}
.f__wenn__hint a{color:var(--acc);text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap}
.form ::placeholder{color:#4e544f;opacity:1}
/* Datenschutz-Häkchen: eigener Abschnitt mit Luft, Kästchen sauber auf der Zeile */
.form label.f__check{display:flex;align-items:flex-start;gap:15px;
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;letter-spacing:normal;text-transform:none;line-height:1.7;color:var(--mut);
  cursor:pointer}
.f__check input{flex:0 0 auto;margin:4px 0 0;width:18px;height:18px;accent-color:var(--acc);cursor:pointer}
.f__check span{flex:1}
.f__check a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.btn--full{width:100%;justify-content:center;margin-top:14px;cursor:pointer;font-family:inherit;
  /* feste Hoehe, damit das WhatsApp-Symbol den Knopf nicht groesser macht */
  min-height:56px;padding-top:0;padding-bottom:0}
.form button.btn--full{margin-top:28px;border:0}
/* Schwarz mit leuchtender grüner Umrandung — der zweite Weg, ohne dem ersten Konkurrenz zu machen */
.btn--out{background:var(--bg-0);color:var(--tx);
  border:1px solid rgba(127,255,42,.42);
  box-shadow:0 0 28px -14px rgba(127,255,42,.45),inset 0 0 0 1px rgba(127,255,42,.06)}
.btn--out::before{content:"";position:absolute;inset:0;background:rgba(127,255,42,.1);
  transform:translateY(101%);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.btn--out:hover{border-color:var(--acc);color:var(--acc);
  box-shadow:0 18px 46px -20px rgba(127,255,42,.55),
             0 0 46px -14px rgba(127,255,42,.45),
             inset 0 0 0 1px rgba(127,255,42,.16)}
.btn--out:hover::before{transform:translateY(0)}
.f__hint{margin-top:14px;font-size:13px;color:var(--acc);min-height:1.2em;text-align:center}
.f__hint.err{color:#ff6b5e}
/* E-Mail als ruhiger Nebenweg statt zweitem Button */
.f__alt{margin-top:16px;text-align:center;font-size:13px;color:var(--mut)}
.f__alt a{color:var(--tx);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(127,255,42,.45);transition:color .25s,text-decoration-color .25s}
.f__alt a:hover{color:var(--acc);text-decoration-color:var(--acc)}

/* ═══════════ FOOTER ═══════════ */
.ft{background:var(--bg-0);border-top:1px solid var(--line);padding:clamp(60px,7vw,90px) var(--pad) 30px}
.ft__grid{display:grid;grid-template-columns:1.7fr 1fr 1.3fr 1fr;gap:clamp(26px,4vw,54px)}
@media(max-width:900px){.ft__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft__grid{grid-template-columns:1fr}}
.ft__logo{width:112px;margin-bottom:20px}
.ft__claim{font-size:14px;color:var(--mut);max-width:34ch}
.ft__h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx);margin-bottom:16px}
.ft__grid a{display:block;font-size:14px;color:var(--mut);padding:5px 0;cursor:pointer;transition:color .25s}
.ft__grid a:hover{color:var(--acc)}
.ft__btm{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);
  font-size:12px;color:#5f665f}
.ft__up{transition:color .25s}
.ft__up:hover{color:var(--acc)}

/* ═══════════ HEADER: CTA + Mobilmenü ═══════════ */
.hdr__nav{margin-left:auto}
.btn--sm{margin-left:clamp(14px,2vw,26px);padding:11px 18px;font-size:12px}
@media(max-width:820px){.btn--sm{display:none}}
.burger{display:none;margin-left:auto;width:40px;height:40px;background:none;border:0;
  cursor:pointer;position:relative}
.burger span{position:absolute;left:9px;width:22px;height:2px;background:var(--tx);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
.burger span:first-child{top:16px}
.burger span:last-child{top:23px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:820px){
  .burger{display:block}
  .hdr__nav{position:fixed;inset:64px 0 auto;flex-direction:column;gap:0;
    background:rgba(10,11,10,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:10px var(--pad) 26px;
    display:none}
  .hdr__nav.open{display:flex}
  .hdr__nav a{padding:15px 0;font-size:15px;letter-spacing:.1em;border-bottom:1px solid var(--line)}
  .hdr__nav a::after{display:none}
}

/* Hinweistext in der Kontaktliste (kein Link) */
.contact .mut{color:var(--mut)}


/* Honigtopf gegen Bots — für Menschen unsichtbar, für Screenreader ausgeblendet */
.f__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Nebenwege unter dem Absende-Knopf */
.f__alt em{font-style:normal;color:#4d534e;margin:0 4px}
.f__alt a{cursor:pointer}
/* Bestätigung nach erfolgreichem Versand */
.f__ok{text-align:center;padding:14px 0}
.f__ok__h{font-family:"Anton",Impact,sans-serif;font-size:30px;text-transform:uppercase;
  color:var(--acc);margin-bottom:12px}
.f__ok p{color:var(--mut);max-width:44ch;margin:0 auto}
.f__ok .btn{margin-top:26px}

/* ═══════════ MOBIL: flüssiges Scrollen ═══════════
   Zwei Effekte kosten auf dem Handy am meisten Rechenzeit und ließen das
   Scrollen bei jedem Richtungswechsel haken:
   1. die dauerlaufende Korn-Animation über einer gemischten Ebene
   2. der Weichzeichner hinter der Kopfleiste, neu berechnet bei jedem Bild
   Beides wird hier abgeschaltet. Sichtbar bleibt fast alles.            */
@media(max-width:900px){
  /* Die gemischte, fest liegende Ebene zwingt den Browser beim Scrollen zum
     Neuzeichnen des gesamten Bildschirms. Bei 3 % Deckkraft auf dunklem
     Grund faellt ihr Fehlen nicht auf. */
  body::after{display:none}
  .hdr.stuck{background:rgba(10,11,10,.96);backdrop-filter:none}
  .hdr__nav{background:rgba(10,11,10,.99);backdrop-filter:none}

  /* Ohne Hover wirkten die Kacheln leblos — hier bekommen sie dauerhaft Kontur */
  .card,.step{
    border-color:rgba(127,255,42,.3);
    box-shadow:0 0 24px -16px rgba(127,255,42,.4);
  }
  .card__n{color:var(--acc)}
  .vs__col{border-color:rgba(127,255,42,.16)}
  .vs__col--new{border-color:rgba(127,255,42,.42)}
}

/* Auf Touchgeräten das Hover-Verhalten sauber halten: die dauerhafte
   Umrandung bleibt, es springt nur nichts beim Antippen.                */
@media(hover:none){
  .card:hover,.step:hover{
    transform:none;
    background:var(--bg-0);
    border-color:rgba(127,255,42,.3);
    box-shadow:0 0 24px -16px rgba(127,255,42,.4);
  }
}

/* Instagram-Verweis unter dem Formular */
.f__ig{color:var(--tx);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(127,255,42,.45);transition:color .25s,text-decoration-color .25s}
.f__ig:hover{color:var(--acc);text-decoration-color:var(--acc)}

/* ═══════════ VIDEOS ═══════════ */
.vids{margin-top:clamp(48px,6vw,76px);padding-top:clamp(40px,5vw,60px);
  border-top:1px solid var(--line);text-align:center}
.vids__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
@media(max-width:900px){.vids__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

.vid{background:var(--bg-0);border:1px solid var(--line);
  transition:border-color .4s,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.vid:hover{border-color:var(--acc);transform:translateY(-8px);
  box-shadow:0 26px 60px -26px rgba(127,255,42,.45),0 0 44px -16px rgba(127,255,42,.25)}
.vid h3{padding:18px 20px 20px;font-size:16px;font-weight:600;line-height:1.35}

/* Vorschaubild als Knopf — das Video lädt erst beim Klick */
.vid__play{position:relative;display:block;width:100%;padding:0;border:0;background:#000;
  cursor:pointer;overflow:hidden;aspect-ratio:16/9}
.vid__play img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.82);
  transition:filter .5s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.vid:hover .vid__play img{filter:grayscale(0) contrast(1) brightness(.95);transform:scale(1.04)}
.vid__ico{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;background:rgba(10,11,10,.72);border:1px solid rgba(127,255,42,.5);
  backdrop-filter:blur(2px);transition:background .3s,border-color .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.vid__ico::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--acc)}
.vid:hover .vid__ico{background:var(--acc);border-color:var(--acc);transform:scale(1.08)}
.vid:hover .vid__ico::after{border-left-color:#07130A}
.vid__play iframe{width:100%;height:100%;border:0;display:block}

.vids__hinweis{margin-top:20px;font-size:12px;color:#5f665f}
.vids__links{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,44px);
  margin-top:clamp(22px,3vw,32px)}
.vids__links .books__link{margin-top:0}
.vids__sponsor{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--mut)}
/* Der Satz bleibt zurückhaltend, der Name wird sichtbar — Kontrast statt Größe */
.vids__sponsor strong{color:var(--tx);font-weight:600;letter-spacing:.01em}

/* ═══════════ ZEITEN & PREISE ═══════════ */
.tp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,5vw,62px)}
@media(max-width:860px){.tp{grid-template-columns:1fr}}
.tp__plan,.tp__preis{padding:34px 30px;border:1px solid var(--line);background:var(--bg-0)}
.tp__preis{border-color:rgba(127,255,42,.3);box-shadow:0 0 70px -34px rgba(127,255,42,.45)}
.tp__lbl{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:22px}

.plan{list-style:none}
.plan li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:15px 0;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0;padding-top:0}
.plan b{font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:19px;
  text-transform:uppercase;letter-spacing:.02em}
.plan span{font-size:16px;color:var(--mut);font-variant-numeric:tabular-nums}

.tp__zahl{font-family:"Anton",Impact,sans-serif;font-weight:400;
  font-size:clamp(64px,8.4vw,104px);line-height:.9}
/* Das Eurozeichen zog die Zeile nach rechts, dadurch standen „Mitgliedschaft"
   und die Ziffern nicht uebereinander. Der negative rechte Rand nimmt dem
   Zeichen seine Breite fuer die Zentrierung, es haengt jetzt rechts raus und
   die Ziffern sitzen exakt unter der Ueberschrift. */
.tp__zahl span{font-size:.45em;color:var(--mut);margin-left:.18em;margin-right:-.714em}
.tp__unter{margin-top:8px;font-size:14px;color:var(--mut)}
/* Seit das Eroeffnungsangebot weg ist, stand unter dem Beitrag eine Luecke,
   weil das Raster beide Karten auf gleiche Hoehe zieht. Die Zahl sitzt jetzt
   mittig im freien Raum, die Ueberschrift bleibt oben auf einer Linie mit
   der Karte daneben. */
.tp__preis{display:flex;flex-direction:column;justify-content:center;text-align:center}
/* Gesperrte Versalien haengen hinter dem letzten Buchstaben noch einen
   Abstand an. Beim Zentrieren schiebt der den Text nach links, hier um
   1,4 Pixel. Der negative Rand nimmt ihn wieder weg. */
.tp__preis .tp__lbl{margin-right:-.22em}

/* Probewoche: nimmt der Laufzeit den Schrecken, deshalb eigener Platz */
.probe{margin-top:20px;padding:30px;border:1px solid var(--line);background:var(--bg-0);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
/* .probe .probe__h statt .probe__h, sonst sticht die Regel .probe p sie aus */
.probe .probe__h{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.6vw,28px);line-height:1.05;margin-bottom:10px;color:var(--tx)}
.probe p{font-size:15px;color:var(--mut);max-width:62ch}
.probe .btn{flex:0 0 auto}
/* Der Knopf klebte sonst am Rahmen. Nur auf breiten Schirmen, auf dem
   Handy rutscht er ohnehin unter den Text. */
@media(min-width:861px){
  .probe .btn{margin-right:26px}
}
/* Im Kindertraining-Kasten ist die Schrift kleiner, also die Textspalte
   schmaler. Dadurch blieb zwischen Text und Knopf fast 400 Pixel Leere und
   der Knopf stand verloren am Rand. Er rueckt weiter herein, aber erst ab
   1200 Pixeln: darunter ist der Platz so knapp, dass er sonst unter den
   Text umbricht. */
@media(min-width:1200px){ .probe--ruhig .btn{margin-right:clamp(26px,11vw,160px)} }

/* Kindertraining: gleiche Form wie die Probewoche, aber zurückhaltender.
   Es ist noch kein Angebot, also soll es auch nicht wie eines aussehen. */
.probe--ruhig{background:transparent;border-style:dashed;border-color:#2E332F}
.probe.probe--ruhig .probe__h{font-size:clamp(17px,1.9vw,21px);color:var(--mut)}
.probe--ruhig p{font-size:14px}

/* PDF-Zeile. Steht bewusst hinter .probe--ruhig p: beide Regeln wiegen
   gleich schwer, also entscheidet die Reihenfolge. */
.probe p.dl{margin-top:16px;max-width:62ch}
.probe p.dl a{display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc);transition:gap .3s}
.probe p.dl a:hover{gap:14px}
.probe p.dl a svg{flex:0 0 auto}
.probe p.dl i{display:block;margin-top:8px;font-style:normal;font-size:13px;color:#6d756f}

/* ═══ Autofill ═══
   Browser überschreiben beim automatischen Ausfüllen die Hintergrundfarbe
   mit einem eigenen Weiß. Eine normale background-Angabe greift dagegen
   nicht. Ein innerer Schlagschatten übermalt sie, und die extrem lange
   Übergangszeit verhindert, dass sie überhaupt erst sichtbar wird. */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form select:-webkit-autofill,
.form textarea:-webkit-autofill,
.form input:autofill,
.form select:autofill,
.form textarea:autofill{
  -webkit-text-fill-color:var(--tx);
  -webkit-box-shadow:0 0 0 1000px var(--bg-1) inset;
          box-shadow:0 0 0 1000px var(--bg-1) inset;
  caret-color:var(--tx);
  border-color:var(--line);
  transition:background-color 9999s ease-in-out 0s;
}
/* Beim Hineinklicken bleibt die grüne Umrandung auch bei ausgefüllten Feldern */
.form input:-webkit-autofill:focus,
.form select:-webkit-autofill:focus,
.form input:autofill:focus{border-color:var(--acc)}