/* ==========================================================================
   FORMYA - site.css (v2, Feedback-Runde 2026-08-12)
   Helle Zwei-Ton-Welt: Pearl (wie live formya.de) + Cashmere. Marke gross
   und sichtbar: Brandmark als Wasserzeichen, Eyebrow-Zeichen und
   scrollendes Emblem. Formsystem rund, Motion ruhig (design-language.md).
   ========================================================================== */

:root{
  /* Styleguide pur (Notion, verbindlich) */
  --pearl:#fffbf6;          /* Hintergrund primaer = Live-Farbe formya.de */
  --cashmere:#f1e9db;       /* Hintergrund sekundaer, der einzige Zweitton */
  --porcelain:#d7c6ab;      /* Elemente sekundaer, Deko */
  --umber:#887b6d;          /* Ueberschrift-Ton, nur gross einsetzen (3.9:1) */
  --euka:#6a867d;           /* DER Akzent */

  /* Rollen-Stufen des einen Akzents (Kanon-Grammatik, AA-gesichert) */
  --euka-deep:#54685f;      /* CTA-Basis + Akzent-Text auf hell (>= 4.9:1) */
  --euka-hover:#465950;     /* Button-Hover */
  --euka-soft:rgba(106,134,125,.13);

  /* Text-Hierarchie auf hell (warme Umber-Familie) */
  --ink:#3e3931;
  --ink-2:#6d6459;
  --ink-3:#887b6d;          /* = Umber, nur gross/dekorativ */
  --on-accent:#f8f4ec;      /* Text auf Eucalyptus-deep */

  /* On-Dark-Set: gilt im Hero-Film und im abgedunkelten Bildband */
  --dark:#1c1e1b;           /* der Scrim-Grundton, warm gebrochen */
  --on-dark:#f7f2e9;
  --on-dark-2:rgba(247,242,233,.82);
  --on-dark-3:rgba(247,242,233,.62);
  --euka-light:#a9c4b9;     /* Akzent auf dunkel (AA auf --dark) */
  --line-dark:rgba(247,242,233,.24);

  /* Hairlines */
  --line:#e7ddcb;
  --line-2:#efe8da;
  --line-strong:#d9cbb2;

  /* Layout + Form: durchgehend weiche Form (Feedback 2026-09-11). Nichts
     Eckiges mehr - Bilder, Karten, Buttons und Icon-Flaechen laufen ueber
     diese fuenf Schalter, damit ein Radius an einer Stelle geaendert wird
     und nicht an sechzig. Die Skala steigt mit der Elementgroesse. */
  --wrap:1560px;
  --opener-h:clamp(38px, 3.6vw, 48px); /* Bauhoehe des Eroeffnungs-Stoerers */
  --nav-h:calc(96px + var(--opener-h)); /* Bauhoehe der schwebenden Nav inkl. Aussenluft */
  --gutter:clamp(20px, 4.5vw, 84px);
  --pad:clamp(66px, 7vw, 118px);
  --pad-tight:clamp(44px, 5vw, 72px);
  --r-pill:999px;
  --r-xl:28px;
  --r-lg:22px;
  --r-md:14px;
  --r-photo:30px;
  --r-ic:50%;               /* Icon-Flaechen und Zaehler laufen als Kreis */
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 34px 80px -46px rgba(62,57,49,.42);
}

/* ---------- Reset / Base -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}
body{
  margin:0;background:var(--pearl);color:var(--ink);
  font-family:'Hanken Grotesk','Segoe UI',sans-serif;
  font-size:clamp(1rem, .97rem + .18vw, 1.11rem);
  line-height:1.62;font-weight:400;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;appearance:none;-moz-appearance:none;-webkit-appearance:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,blockquote,figure{margin:0}
::selection{background:var(--porcelain);color:var(--ink)}
:focus-visible{outline:2px solid var(--euka-deep);outline-offset:3px}

.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:fixed;left:14px;top:-60px;z-index:400;padding:11px 20px;
  background:var(--euka-deep);color:var(--on-accent);border-radius:var(--r-pill);
  font-weight:600;font-size:.9rem;transition:top .2s var(--ease)}
.skip:focus-visible{top:14px}

.sprite{position:absolute}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* Icon-Grundstil: ein Strich, runde Kappen, ueberall gleich */
.benefit-ic svg,.x-ic svg,.step-ic svg,
.place-addr svg,.foot-social svg,.scroll-cue svg{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- Sand-Grain: statisches Papierkorn, kein Motion ----------------
   feTurbulence als Data-URI, minimale Deckung UEBER der Flaeche
   (pointer-events:none): jede Tonflaeche bekommt dieselbe Haptik. */
.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:.05;mix-blend-mode:multiply;
}

/* ---------- Signature: der FORMYA-Bogen -----------------------------------
   Das Brandmark ist ein echtes <svg><use> auf #i-signet (Sprite oben im
   Markup), gefaerbt per fill:currentColor. Das ist robuster als eine
   CSS-Mask ueber ein externes Asset und laesst sich genauso in jede
   Tonzone einfaerben. --par (Scroll-Drift) und --rot (Scroll-Rotation)
   kommen aus site.js, das Atmen aus der Keyframe. */
.mark-bg{
  position:absolute;z-index:0;pointer-events:none;
  fill:currentColor;aspect-ratio:1;
}
.js .mark-bg{animation:breathe 17s ease-in-out infinite alternate}
@keyframes breathe{
  from{transform:translate3d(0, var(--par, 0px), 0) rotate(var(--rot, 0deg)) scale(1)}
  to{transform:translate3d(0, var(--par, 0px), 0) rotate(var(--rot, 0deg)) scale(1.045)}
}

/* Der Hero traegt jetzt den Film, deshalb steht das Zeichen dort nicht mehr
   im Grund. Es bleibt im Closer, in Karten und im Dialog. In dieser Groesse
   faellt das Atmen aus der Keyframe als Wackeln auf und lenkt vom Text ab,
   deshalb steht es hier still und blasser als die kleineren Vorkommen. */
.mark-bg--xl{color:var(--porcelain);opacity:.19;
  width:min(66vw, 900px);left:-18%;bottom:-32%}
.js .mark-bg--xl{animation:none}
.offer-card .mark-bg{color:var(--porcelain);opacity:.38;width:300px;right:-80px;top:-80px}

/* ---------- Typo-Grundmuster ---------------------------------------------- */
h1,h2,.plan-price b,.qa{
  font-family:'Source Serif 4',Georgia,serif;
  font-weight:600;font-optical-sizing:auto;
  letter-spacing:-.015em;line-height:1.08;color:var(--ink);
  text-wrap:balance;
}
h2{font-size:clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem)}
h3{font-weight:600;font-size:1.12rem;line-height:1.3}

/* Keine zweite Akzentfarbe mehr in Headlines: das Keyword bleibt im gleichen
   dunklen Umber-Ton wie der Rest der Ueberschrift. */
.u{color:inherit}

.eyebrow{
  font-size:clamp(.84rem, .8rem + .2vw, .94rem);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--euka-deep);margin-bottom:1rem;
  display:flex;align-items:center;gap:.65rem;
}
/* Das Logo als Eyebrow-Zeichen: das Brandmark ersetzt die Linie.
   Echtes <svg><use> auf #i-signet statt CSS-Mask (robuster). */
.eyebrow-ic{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.sec-head--center .eyebrow{justify-content:center}

.lead{font-size:clamp(1.04rem, 1rem + .3vw, 1.2rem);line-height:1.6;color:var(--ink-2);max-width:62ch}
.sec-head{max-width:940px;margin-bottom:clamp(2.2rem, 4vw, 3.6rem)}
.sec-head h2{margin-bottom:1rem}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .lead{margin-inline:auto}

/* ---------- Buttons: Pill, Farbe wechselt, Groesse nie -------------------- */
/* Versalien in allen Buttons: die Labels werden dadurch zu ruhigen Flaechen
   statt zu Saetzen. Das Sperren ist Pflicht, sonst kleben die Grossbuchstaben. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border-radius:var(--r-pill);padding:16px 30px;
  font-weight:600;font-size:.82rem;line-height:1.15;
  text-transform:uppercase;letter-spacing:.13em;
  transition:background .22s var(--ease), color .22s var(--ease),
    border-color .22s var(--ease), box-shadow .22s var(--ease);
  white-space:nowrap;
}
.btn .arr{font-size:1.15em;line-height:.9;translate:0 -1px;
  transition:translate .25s var(--ease)}
.btn:hover .arr,.btn:focus-visible .arr{translate:4px -1px}
.btn-primary{background:var(--euka-deep);color:var(--on-accent)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--euka-hover)}
.btn-ghost{border:1px solid rgba(84,104,95,.38);color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--euka-deep);color:var(--euka-deep)}
.btn-lg{padding:19px 36px;font-size:.86rem}
/* Gleiche Groesse und Sperrung wie .nav-links a / .eyebrow, damit der CTA
   nicht kleiner wirkt als die Links daneben. Eigene, knappere Vertikal-Polsterung
   als der Standard-.btn (16px): in der schmalen Kapsel (seit 2026-09-14, Referenz
   reformfactory.de) bleibt so mehr Luft zwischen Button und Kapselrand - vorher
   nur ~10.5px je Seite, jetzt ~14px, naeher an der Referenzproportion. */
.btn-nav{padding:11px 26px;font-size:clamp(.84rem, .8rem + .2vw, .94rem);letter-spacing:.24em}

/* Ueber dem Hero steht der Nav-CTA auf Foto und Glas: eine Hairline in der
   hellen Nav-Farbe hebt ihn ab, ohne die Buttongroesse zu veraendern (inset
   statt border). Ab dem ersten Scrollen traegt die Pearl-Leiste den Kontrast,
   die Linie verschwindet. */
header:not(.scrolled) .btn-nav{box-shadow:inset 0 0 0 1px rgba(247,242,233,.42)}

/* ---------- Header: die schwebende Leiste ----------------------------------
   Die Nav liegt fixiert UEBER dem Inhalt (Kundenreferenz reformfactory.de):
   ueber dem Hero-Bild als Glas mit heller Schrift, ab dem ersten Scrollen in
   Pearl mit dunkler Schrift. Der Hero fuellt darunter den ganzen Screen und
   haelt seinen Text ueber das obere Padding von der Leiste frei. */
header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;flex-direction:column;
  pointer-events:none;               /* nur Stoerer und Kapsel faengen Klicks */
}

/* ---------- Eroeffnungs-Stoerer --------------------------------------------
   Schmales Vollbild-Band ueber der Nav-Kapsel, ruhiger Akzent-Ton statt
   Signalfarbe als Flaeche (Kanon-Ausnahme fuer einen echten, befristeten
   Termin - keine Dauerwerbeflaeche). Verschwindet automatisch nach dem
   Eroeffnungswochenende (site.js). */
.opener-bar{
  pointer-events:auto;
  background:var(--pearl);color:var(--ink);
  border-bottom:1px solid var(--line);
  min-height:var(--opener-h);
}
.opener-in{
  max-width:var(--wrap);margin-inline:auto;height:100%;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.3rem clamp(.7rem, 2vw, 1.6rem);
  min-height:var(--opener-h);
  font-size:.78rem;
}
.opener-msg{margin:0;opacity:.94;letter-spacing:.01em;text-align:center}
/* Rutscht als Ganzes in die naechste Zeile, statt mitten im Satz umzubrechen,
   sobald die Zeile nicht mehr reicht (Kundenfeedback 2026-09-14). Das Datum
   bekommt aus demselben Grund ein eigenes nowrap, sonst faellt "Uhr" allein
   vom Datum weg und haengt an "Alle" (siehe Trennstrich-Fix unten). */
.opener-date,.opener-tail{white-space:nowrap}
.opener-msg strong{font-weight:700}
.opener-sep{display:inline-block;width:1px;height:.9em;background:currentColor;
  opacity:.35;margin:0 .7em -.12em;vertical-align:middle}
.opener-sep--soft{opacity:.22}
.opener-bar.is-hidden{display:none}
@media (max-width:860px){
  .opener-in{padding-inline:16px}
  .opener-msg{font-size:.72rem}
}
@media (max-width:480px){
  /* visibility:hidden statt display:none: die Trennlinie blendet sich aus,
     ihr Platz (Margin) bleibt aber erhalten. Mit display:none fiel der
     Abstand komplett weg, sobald "Alle sind ..." in die naechste Zeile
     rutscht - Text und Nachbarwort standen dann ohne Luft aneinander
     ("UhrAlle...", gemeldetes Problem 2026-09-14). */
  .opener-sep--soft{visibility:hidden}
}

.nav-pill{
  pointer-events:auto;
  /* Schmale, freischwebende Kapsel statt volle Contentbreite - Referenz
     reformfactory.de (Kundenwunsch 2026-09-14): dort ist die Nav auf
     max-w-3xl (768px) begrenzt, deutlich schmaler als die 1585px breite
     Seite, und zentriert ueber dem Hero. Loest die aeltere Vorgabe vom
     2026-09-11 ab (Nav so breit wie der Content), die genau das Gegenteil
     wollte. Unterhalb von --nav-w bleibt sie ueber --gutter/100% weiterhin
     fluessig, damit sie auf schmalen Viewports nicht an den Rand stoesst.
     Seit 2026-10-12 breiter (Menuepunkt Kursplan plus bsport-Login), bleibt
     aber deutlich schmaler als die Seite. */
  --nav-w:1160px;
  max-width:min(calc(100% - var(--gutter) * 2), var(--nav-w));margin-inline:auto;
  width:100%;
  margin-block:clamp(9px, 1.4vw, 15px);
  /* Gap-Obergrenze bewusst niedriger als frueher (2.4rem): die Kapsel selbst
     ist seit --nav-w fixiert, aber Gap/Logo wuchsen ueber vw ungebremst weiter
     mit dem Viewport, bis der Inhalt bei sehr breiten Screens (~1900px) mehr
     Platz brauchte als die Kapsel breit war - der CTA rutschte rechts heraus
     (gemeldetes Problem 2026-09-14, reproduziert bei 1920px). */
  display:flex;align-items:center;gap:clamp(1rem, 2vw, 2rem);
  min-height:66px;
  padding:8px clamp(14px, 1.8vw, 22px);
  border-radius:var(--r-pill);
  color:var(--on-dark);
  /* Eigener Stacking-Context fuer den ::before-Hintergrundlayer unten -
     isolation:isolate, NICHT backdrop-filter/transform direkt auf .nav-pill,
     denn die wuerden die Kapsel zum Containing Block fuer positionierte
     Nachfahren machen. Genau das war der Bug: das Vollbild-Menue
     (.nav-links, position:fixed) landete dadurch in der 333x62px-Kapsel
     statt im Viewport (gefunden 2026-09-14, Livegang-Check). */
  position:relative;isolation:isolate;
}
/* Glas-Optik auf einem eigenen Layer hinter dem Inhalt: traegt Hintergrund,
   Rahmen und Blur, ohne dass .nav-pill selbst einen Filter/Transform traegt.
   Ueber dem Hero bereits ein hauchduenner Pearl-Milchglas-Schleier (sehr
   niedrige Deckkraft), kein hartes Transparent-zu-Deckend (Kundenfeedback
   2026-09-14). */
.nav-pill::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  border:1px solid rgba(255,251,246,.18);
  background:rgba(255,251,246,.14);
  -webkit-backdrop-filter:blur(7px) saturate(1.2);
  backdrop-filter:blur(7px) saturate(1.2);
  transition:background .35s var(--ease), border-color .35s var(--ease),
    box-shadow .35s var(--ease),
    backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease);
}
/* Ab dem ersten Scrollen (und auf den Rechtsseiten) verdichtet sich derselbe
   Pearl-Schleier zu Milchglas - Referenz reformfactory.de (Kundenwunsch
   2026-09-14): die Live-Hintergrundfarbe der Seite (--pearl), nicht deckend
   weiss, der Blur haelt sie "milchig" statt glasklar. */
header.scrolled .nav-pill{color:var(--ink)}
header.scrolled .nav-pill::before{
  background:rgba(255,251,246,.82);
  border-color:var(--line);
  box-shadow:0 18px 44px -34px rgba(62,57,49,.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
}

/* Beide Logofassungen stapeln sich in derselben Zelle: nur die Deckkraft
   wechselt, kein Layoutsprung. */
.brand{flex:none;display:grid;align-items:center;line-height:0}
.brand > *{grid-area:1 / 1}
.brand img{height:clamp(27px, 2.4vw, 34px);width:auto}
.brand-logo{transition:opacity .35s var(--ease)}
.brand-logo--dark{opacity:0}
header.scrolled .brand-logo--light{opacity:0}
header.scrolled .brand-logo--dark{opacity:1}
.nav-links{display:flex;gap:clamp(1rem, 1.6vw, 1.8rem);margin-left:auto}
/* Formel wie .eyebrow: gleiche Groesse, Sperrung und Gewicht, damit Eyebrow
   und Hauptnavigation als eine typografische Stimme lesen. */
.nav-links a{
  font-size:clamp(.84rem, .8rem + .2vw, .94rem);font-weight:600;color:inherit;opacity:.86;
  text-transform:uppercase;letter-spacing:.24em;white-space:nowrap;
  padding:.5rem 0;border-bottom:1.5px solid transparent;
  transition:opacity .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{opacity:1;border-bottom-color:currentColor}
header.scrolled .nav-links a{color:var(--ink-2);opacity:1}
header.scrolled .nav-links a:hover,
header.scrolled .nav-links a:focus-visible{color:var(--euka-deep);border-bottom-color:var(--euka)}
.nav-cta{display:flex;align-items:center;gap:.6rem;margin-left:auto}
/* Der Reset gilt nur auf der Desktop-Breite, wo .nav-links sichtbar VOR der
   CTA-Gruppe steht und sonst doppelten Abstand erzeugen wuerde (einmal durch
   .nav-links margin-left:auto, einmal durch .nav-cta margin-left:auto).
   Unterhalb 1180px ist .nav-links unsichtbar (position:fixed, display:none),
   der Selektor traf aber trotzdem zu (er prueft nur die DOM-Reihenfolge, nicht
   die Sichtbarkeit) und hat dadurch .nav-cta seinen eigenen margin-left:auto
   genommen - das Burger-Menu landete faelschlich links neben dem Logo statt
   rechts aussen (gemeldetes Problem 2026-09-14). */
@media (min-width:1181px){
  .nav-links + .nav-cta{margin-left:0}
}
.nav-pill :focus-visible{outline-color:currentColor}

/* Login (bsport loginButton) rechts neben dem CTA. bsport rendert den Button
   selbst; die Mindesthoehe haelt den Platz frei, bis das Widget geladen ist,
   damit die Kapsel nicht springt. */
.nav-login{flex:none;display:flex;align-items:center;justify-content:flex-end;min-height:40px;min-width:148px}
/* bsport liefert einen MUI-Button in Indigo und Roboto mit (cleanslate setzt
   alles mit !important). Die IDs heben unsere Regeln darueber, damit der
   Login als ruhiger Zweitknopf in der FORMYA-Sprache neben dem CTA steht:
   Pill, Hanken, Versalien, ueber dem Hero hell, nach dem Scrollen dunkel. */
#bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButtonGroup-root{box-shadow:none !important;border-radius:var(--r-pill) !important}
#bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root{
  font-family:'Hanken Grotesk','Segoe UI',sans-serif !important;
  font-size:clamp(.78rem, .74rem + .18vw, .86rem) !important;font-weight:600 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;line-height:1.15 !important;
  color:var(--on-dark) !important;background:transparent !important;
  border:1px solid rgba(247,242,233,.42) !important;border-radius:var(--r-pill) !important;
  padding:10px 18px !important;min-height:40px !important;min-width:0 !important;
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease) !important;
}
#bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root:hover,
#bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root:focus-visible{
  background:rgba(247,242,233,.12) !important;border-color:currentColor !important}
#bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root svg{
  width:17px !important;height:17px !important;fill:currentColor !important;margin-right:7px !important}
#bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-label{color:inherit !important;font:inherit !important;letter-spacing:inherit !important}
header.scrolled #bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root,
body.menu-open #bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root{
  color:var(--ink) !important;border-color:rgba(84,104,95,.38) !important}
header.scrolled #bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root:hover,
header.scrolled #bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root:focus-visible,
body.menu-open #bsport-widget-a6d758cb-6eb1-4461-a9b3-e0002f601212 .MuiButton-root:hover{
  color:var(--euka-deep) !important;border-color:var(--euka-deep) !important;background:transparent !important}

.burger{display:none;width:46px;height:46px;border-radius:var(--r-pill);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:inherit;margin-right:-6px;
  /* Muss ueber dem aufgeklappten Vollbild-Menu liegen (das traegt z-index:150
     innerhalb desselben, durch .nav-pill{isolation:isolate} abgeschotteten
     Stacking-Contexts), sonst verdeckt die Menuflaeche den Schliessen-Button
     und das Menu laesst sich nicht mehr zumachen (gemeldetes Problem
     2026-09-14). */
  position:relative;z-index:160}
.burger span{width:20px;height:1.6px;border-radius:999px;background:currentColor;
  transition:transform .3s var(--ease), opacity .2s var(--ease)}
body.menu-open .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* Seit 2026-10-12 bei 1180px statt 1040px: mit Kursplan und Login braucht
   die Kapsel rund 1090px, darunter wuerde sie ueberlaufen. */
@media (max-width:1180px){
  .nav-links{
    position:fixed;inset:0;z-index:-1;
    display:none;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;
    background:var(--cashmere);margin:0;
  }
  body.menu-open .nav-links{display:flex;z-index:150}
  .nav-links a,
  header.scrolled .nav-links a{
    font-family:'Source Serif 4',Georgia,serif;font-weight:600;
    font-size:clamp(1.6rem, 6vw, 2.2rem);color:var(--ink);border-bottom:0;opacity:1;
    /* Im Vollbild-Menue traegt die Groesse, das Sperren darf zurueck */
    text-transform:none;letter-spacing:-.01em;
  }
  /* Im offenen Menue steht die Leiste immer auf hell, sonst verschwindet
     das weisse Logo auf der Cashmere-Flaeche. */
  body.menu-open .nav-pill{color:var(--ink)}
  body.menu-open .nav-pill::before{background:rgba(255,251,246,.82);border-color:var(--line)}
  body.menu-open .brand-logo--light{opacity:0}
  body.menu-open .brand-logo--dark{opacity:1}
  .burger{display:flex}

  /* CTA im Vollbild-Menu statt permanent in der Kapsel: auf schmalen
     Breiten sonst zu voll neben dem Burger. Der Button erscheint erst,
     wenn das Menu offen ist, unterhalb der Links (Kundenfeedback
     2026-09-14), und traegt dieselbe z-Ebene wie .nav-links. */
  .btn-nav{display:none}
  body.menu-open .btn-nav{
    display:inline-flex;
    position:fixed;left:50%;bottom:clamp(36px, 8vh, 76px);
    translate:-50% 0;z-index:150;
  }
  /* Der Login steht im offenen Menue direkt ueber dem CTA (Kundenwunsch
     2026-10-12: "auch im mobilen Menue"). */
  .nav-login{display:none}
  body.menu-open .nav-login{
    display:flex;
    position:fixed;left:50%;bottom:calc(clamp(36px, 8vh, 76px) + 74px);
    translate:-50% 0;z-index:150;
  }
}
@media (max-width:560px){
  .nav-pill{min-height:58px}
}

/* ---------- Hero: vollflaechiger Film, Marke gross darauf ------------------- */
/* Der Hero fuellt den ganzen ersten Screen, die Nav schwebt darueber. Das
   obere Padding haelt die Bauhoehe der Leiste frei. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--dark);
  min-height:100svh;
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + clamp(30px, 5vh, 70px)) clamp(88px, 12vh, 140px);
  color:var(--on-dark);
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-still,.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Das Standbild traegt den ersten Frame und lebt ueber ein sehr langsames
   Ken-Burns, damit der Hero auch ohne Videodatei nicht steht. */
.hero-still{filter:sepia(.07) saturate(1.02) contrast(1.02);transform:scale(1.05)}
.js .hero-still{animation:heroDrift 30s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.05)}to{transform:scale(1.13)}}
/* Ohne JS liegt das Video sofort sichtbar oben; mit JS blendet es erst auf,
   wenn es wirklich abspielbar ist (kein schwarzer Sprung, kein Ruckler). */
.js .hero-video{opacity:0;transition:opacity 1.4s var(--ease)}
.js .hero-video.is-live{opacity:1}
/* Scrim: mehrstufiger linearer Verlauf plus radialer Layer ueber der
   Textecke unten links. Ohne den radialen Anteil kippt die Lesbarkeit,
   sobald im Video eine helle Wand durchlaeuft. */
/* Der Scrim arbeitet jetzt aus der Mitte: oben dunkel fuer die Nav, ein
   ruhiger Kern hinter der Typo, unten dunkel fuer den Uebergang. */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(28,30,27,.68) 0%, rgba(28,30,27,.34) 20%,
      rgba(28,30,27,.3) 42%, rgba(28,30,27,.5) 74%, rgba(28,30,27,.88) 100%),
    radial-gradient(78% 62% at 50% 52%, rgba(28,30,27,.6), rgba(28,30,27,0) 72%);
}
/* Zentrierte Mitte: eine schmale Textspalte, viel Luft, nichts links
   angeschlagen. Das ist der ruhigere, hochwertigere Auftritt. */
.hero-in{
  position:relative;z-index:2;width:100%;
  max-width:78ch;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* Kein Kasten mehr: die Eroeffnung steht als gesperrte Zeile ueber der Marke */
.badge{
  display:block;border:0;background:none;padding:0;
  margin-bottom:clamp(1.5rem, 3.4vh, 2.6rem);
  font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--on-dark-2);
}
.hero-brand{line-height:0;width:100%}
.hero-brand img{width:min(620px, 78vw);height:auto;margin-inline:auto}
.tagline{
  margin-top:1.5rem;max-width:100%;
  font-size:clamp(.74rem, .7rem + .28vw, .88rem);font-weight:600;
  letter-spacing:.42em;text-transform:uppercase;color:var(--euka-light);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.5rem 1.1rem;
  /* Das Sperren haengt rechts nach: der Einzug schiebt die Zeile zurueck
     in die Mitte. */
  text-indent:.42em;
}
.tag-sep{width:4px;height:4px;border-radius:50%;background:var(--on-dark-3);flex:none}
/* Haarlinie als Zaesur zwischen Marke und Aussage */
.hero-rule{
  display:block;width:64px;height:1px;flex:none;
  background:var(--line-dark);
  margin-top:clamp(1.7rem, 3.8vh, 2.8rem);
}
.hero .lead{margin-top:1.05rem;max-width:56ch;margin-inline:auto;color:var(--on-dark-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;
  justify-content:center;margin-top:clamp(2rem, 4vh, 2.8rem)}
.hero-trust{margin-top:1.1rem;font-size:.78rem;letter-spacing:.06em;color:var(--on-dark-3)}
/* Buttons in der dunklen Zone: Primaer bleibt Eucalyptus, der Zweitpfad
   wird zur hellen Kontur. */
.hero .btn-ghost{border-color:var(--line-dark);color:var(--on-dark)}
.hero .btn-ghost:hover,.hero .btn-ghost:focus-visible{
  border-color:var(--on-dark);color:var(--on-dark);background:rgba(247,242,233,.1)}
.hero :focus-visible{outline-color:var(--on-dark)}

.scroll-cue{
  position:absolute;left:50%;bottom:clamp(18px, 3vh, 30px);translate:-50% 0;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--on-dark-3);
}
.scroll-cue svg{width:19px;height:19px}
.js .scroll-cue svg{animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}

/* ---------- Claim-Band: steht still ----------------------------------------
   Kundenfeedback 2026-10-12: das Laufband mit der drehenden Blume war zu
   unruhig. Der Claim steht jetzt als eine ruhige, zentrierte Zeile; auf
   schmalen Schirmen stapeln sich die zwei Saetze um das Signet. */
.claimband{
  background:var(--cashmere);overflow:hidden;
  padding-block:clamp(14px, 2vw, 26px);
}
.claim{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.2em 0;padding-inline:var(--gutter);
  font-family:'Source Serif 4',Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);line-height:1.2;
  letter-spacing:-.022em;color:var(--umber);text-align:center;
  padding-block:.4em;
}
/* Zwei Stimmen: Anspruch in Eucalyptus, Wirkung in Umber */
.claim b{font-weight:500;white-space:nowrap}
.cl-move{color:var(--euka)}
.cl-feel{color:var(--umber)}
.glyph{width:.72em;height:.72em;margin-inline:.85em;flex:none;
  color:var(--euka);fill:currentColor;opacity:.7}
@media (max-width:620px){
  .claim{flex-direction:column;gap:.35em}
  .glyph{width:.6em;height:.6em;margin:0}
}

/* ---------- Sektionen ------------------------------------------------------ */
.sec{padding-block:var(--pad);position:relative;overflow:hidden}
.sec--tight{padding-block:var(--pad-tight) var(--pad)}
.sec--sand{background:var(--cashmere)}

/* Bogenkante: der Uebergang von Pearl in die Cashmere-Zone ist rund, nicht
   geschnitten. Der Bogen sitzt oben AUF der Sandflaeche. */
.arc-top{margin-top:clamp(46px, 6vw, 90px)}
.arc-top::before{
  content:"";position:absolute;left:50%;top:calc(-1 * clamp(28px, 4.5vw, 62px));
  transform:translateX(-50%);
  width:150%;height:clamp(29px, 4.6vw, 63px);
  background:var(--cashmere);border-radius:100% 100% 0 0;
}

/* ---------- Bild-Grade: EINE Utility macht aus fremdem Material eine Welt --- */
.ph{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:sepia(.09) saturate(1.03) contrast(1.01) brightness(1.02);
}

/* ---------- Zahlen (Hairline-Grid-Statbar mit Count-up) -------------------- */
/* Sitzt direkt unter der Konzept-CTA: eigenes, knappes Deckelmass statt
   --pad-tight, sonst addiert sich Konzepts Bodenabstand mit dem Deckel hier
   zu einer Luecke, die staerker wirkt als beide Sektionen einzeln. */
#zahlen{padding-block:clamp(8px, 1.6vw, 22px) var(--pad-tight)}
.statbar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
}
.stat{background:var(--pearl);padding:clamp(26px, 3.6vw, 42px) 20px;text-align:center}
.stat .num{
  display:block;font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(2.1rem, 1.5rem + 2.2vw, 3rem);line-height:1;
  color:var(--euka-deep);font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:.55rem;font-size:.92rem;color:var(--ink-2)}
@media (max-width:640px){.statbar{grid-template-columns:1fr}.stat{padding-block:22px}}

/* ---------- Konzept -------------------------------------------------------- */
/* Boden hier gekappt: die Zahlen-Sektion direkt danach bringt ihr eigenes,
   knappes Deckelmass mit (#zahlen oben), die Summe beider Standardabstaende
   waere sonst die zu grosse Luecke. */
#konzept{padding-bottom:0}
/* Das Bild traegt die halbe Sektion (Feedback: Bilder praesenter) */
.concept{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2.4rem, 5vw, 5rem);align-items:center}
.concept-media{
  margin:0;overflow:hidden;
  border-radius:var(--r-photo);
  aspect-ratio:4 / 5;max-height:780px;
}
.concept-copy h2{margin-bottom:1.15rem}
.concept-copy .lead{margin-bottom:1.1rem}
.concept-copy > p:not(.eyebrow):not(.lead){color:var(--ink-2);max-width:60ch}
.concept-cta{margin-top:clamp(1.7rem, 3vw, 2.4rem)}

/* ---------- Staerken: Aussage steht, Liste laeuft --------------------------
   Editoriale Zweiteilung. Links bleibt die Aussage beim Scrollen stehen,
   rechts laufen die sechs Punkte als nummerierte Haarlinien-Liste durch:
   rein typografisch, keine Icons. */
/* #staerken braucht kein Clipping (keine Bleed-Elemente hier) und hebt
   .sec{overflow:hidden} deshalb auf: sonst sticken die Sticky-Karten
   in manchen Browsern nur innerhalb der Sektion statt beim Seitenscroll. */
#staerken{overflow:visible}
.strengths{
  display:grid;grid-template-columns:.88fr 1.12fr;
  gap:clamp(2.2rem, 5vw, 5.5rem);align-items:start;
}
.strengths-head{position:sticky;top:calc(var(--nav-h) + clamp(24px, 4vh, 56px))}
.strengths-head h2{margin-bottom:1.1rem}

/* Die sechs Punkte stapeln sich beim Scrollen: jede Karte bleibt sticky
   stehen, bis die naechste sie leicht versetzt ueberdeckt (02 legt sich
   ueber 01, 03 ueber 02, usw.), waehrend .strengths-head links fixiert
   stehen bleibt. Jede Karte braucht eine eigene, deckende Flaeche, sonst
   scheint die vorherige durch. */
.usps{counter-reset:usp;padding-top:.3rem;display:flex;flex-direction:column;gap:1.15rem}
.usps li{
  counter-increment:usp;position:sticky;
  background:var(--pearl);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 26px 56px -48px rgba(62,57,49,.32);
  padding:clamp(1.7rem, 2.8vw, 2.3rem) clamp(1.8rem, 3vw, 2.3rem) clamp(1.7rem, 2.8vw, 2.3rem) clamp(4.6rem, 6.2vw, 5.8rem);
}
.usps li:nth-child(1){top:calc(var(--nav-h) + 16px)}
.usps li:nth-child(2){top:calc(var(--nav-h) + 32px)}
.usps li:nth-child(3){top:calc(var(--nav-h) + 48px)}
.usps li:nth-child(4){top:calc(var(--nav-h) + 64px)}
.usps li:nth-child(5){top:calc(var(--nav-h) + 80px)}
.usps li:nth-child(6){top:calc(var(--nav-h) + 96px)}
/* Grosse, blasse Editorial-Ziffer statt kleiner Tracking-Caption: passt
   als ruhiges Hintergrund-Element besser zur eigenstaendigen Karte. */
.usps li::before{
  content:counter(usp, decimal-leading-zero);
  position:absolute;left:clamp(1.6rem, 2.6vw, 2.1rem);top:50%;translate:0 -50%;
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem);line-height:1;
  color:var(--porcelain);font-variant-numeric:tabular-nums;
}
.usps b{
  display:block;font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(1.15rem, 1.02rem + .55vw, 1.42rem);letter-spacing:-.012em;
  line-height:1.22;color:var(--ink);margin-bottom:.3rem;
}
.usps li span{display:block;font-size:.95rem;color:var(--ink-2);line-height:1.55;max-width:44ch}

/* ---------- Warum Reformer -------------------------------------------------
   Links die Aussage mit den vier Wirkungen, rechts zwei Bildspalten, die
   gegenlaeufig und sehr langsam durchlaufen und an Ober- und Unterkante
   ausmaskiert sind (Kundenreferenz sportpark.tv). Die Bilder sind Stimmung,
   kein Inhalt: die Buehne steht auf aria-hidden. */
.why-grid{
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(2.4rem, 5vw, 5.5rem);align-items:center;
}
.why-copy h2{margin-bottom:1.1rem}
.why-copy .lead{margin-bottom:clamp(1.8rem, 3.2vw, 2.6rem)}
.why-cta{margin-top:clamp(1.7rem, 3vw, 2.4rem)}

.why-stage{
  --wg:clamp(.7rem, 1.3vw, 1.1rem);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--wg);
  /* align-items:start ist Pflicht: sonst zieht der Grid beide Spalten auf
     dieselbe Zeilenhoehe, die kuerzere bekommt unten Leerraum und ihr
     50-Prozent-Loop springt. */
  align-items:start;
  height:min(84vh, 760px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
}
.why-col{display:flex;flex-direction:column;gap:var(--wg);will-change:transform}
/* Die Motive liegen doppelt im Markup: eine halbe Bahn plus ein halber Spalt
   ist genau eine Runde, deshalb schliesst der Lauf nahtlos. */
.js .why-col.a{animation:whyUp 78s linear infinite}
.js .why-col.b{animation:whyUp 92s linear infinite reverse}
@keyframes whyUp{
  from{transform:translateY(0)}
  to{transform:translateY(calc(-50% - var(--wg) / 2))}
}
.why-col img{border-radius:var(--r-photo);
  width:100%;height:auto;flex:none;
  aspect-ratio:4 / 5;object-fit:cover;
  filter:sepia(.09) saturate(1.03) contrast(1.01) brightness(1.02);
}
.why-col.b img{aspect-ratio:3 / 4}

.benefits{display:grid;grid-template-columns:repeat(2, 1fr);gap:clamp(.8rem, 1.6vw, 1.1rem);
  position:relative;z-index:1}
.benefit{
  background:var(--pearl);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:1.5rem 1.4rem 1.6rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.benefit-ic{
  width:46px;height:46px;border-radius:var(--r-ic);display:grid;place-items:center;
  background:var(--euka-soft);color:var(--euka-deep);margin-bottom:1rem;
}
.benefit-ic svg{width:23px;height:23px}
.benefit h3{margin-bottom:.5rem}
.benefit p{font-size:.93rem;line-height:1.55;color:var(--ink-2)}

/* ---------- Fuer wen: eine Tafel, vier Ziele -------------------------------
   Ziel-Tabs statt vier Karten (Kundenreferenz sportpark.tv): oben die
   Auswahl, darunter Bild und Text zum gewaehlten Ziel. site.js tauscht nur
   Inhalte, das Layout steht. */
.goals{max-width:1180px;margin-inline:auto}
.goal-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.55rem;margin-bottom:clamp(1.6rem, 3vw, 2.6rem);
}
.goal-tab{
  min-height:48px;padding:12px 22px;
  border:1px solid rgba(84,104,95,.3);border-radius:var(--r-pill);
  font-size:.76rem;font-weight:600;line-height:1.15;
  text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2);
  transition:background .25s var(--ease), color .25s var(--ease),
    border-color .25s var(--ease);
}
.goal-tab:hover{border-color:var(--euka-deep);color:var(--euka-deep)}
.goal-tab.is-active{background:var(--euka-deep);border-color:var(--euka-deep);color:var(--on-accent)}

.goal-panel{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(1.6rem, 3.4vw, 3.4rem);align-items:center;
  background:var(--pearl);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:clamp(1.2rem, 2.2vw, 1.8rem);
}
.goal-media{overflow:hidden;border-radius:var(--r-photo);aspect-ratio:4 / 3}
.goal-body{padding-right:clamp(0px, 1.6vw, 1.6rem)}
.goal-body .eyebrow{margin-bottom:.75rem}
.goal-body h3{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(1.35rem, 1.15rem + 1vw, 1.9rem);letter-spacing:-.015em;
  line-height:1.14;margin-bottom:.7rem;
}
.goal-body p{color:var(--ink-2);max-width:44ch;margin-bottom:1.5rem}
/* Die Vorratsbloecke tragen bereits [hidden]; die Regel haelt sie auch dann
   unten, wenn ein Browser das Attribut ueberschrieben bekommt. */
.goal-data{display:none}

/* ---------- Preise ----------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.1rem;align-items:stretch;
  max-width:1180px;margin-inline:auto}
.plan{
  position:relative;
  background:var(--pearl);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:2rem 1.8rem 1.9rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan--hero{border-color:rgba(84,104,95,.42);background:var(--cashmere)}
.plan-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--euka-deep);color:var(--on-accent);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:.38rem 1rem;
}
.plan h3{font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:1.35rem;letter-spacing:.01em}
.plan-credits{font-size:.9rem;color:var(--ink-2);margin-top:.1rem}
.plan-credits b{color:var(--euka-deep);font-weight:700;font-variant-numeric:tabular-nums}
.plan-price{display:flex;align-items:baseline;gap:.45rem;margin-block:.9rem .1rem}
.plan-price b{font-size:2.7rem;font-variant-numeric:tabular-nums;line-height:1}
.plan-price span{font-size:.9rem;color:var(--ink-2)}
.plan-note{font-size:.88rem;color:var(--ink-2);margin-bottom:1.25rem}
.plan .btn{width:100%;margin-top:auto}
@media (min-width:961px){
  .plan--hero{transform:translateY(-14px);padding-block:2.5rem 2.4rem}
  .plan--hero:hover{transform:translateY(-18px)}
}

/* Start mit Eroeffnungsangebot: Angebotszeile, Preis, Vergleichspreis klein,
   zwei Haken, Code zum Kopieren. */
.plan-offer{font-weight:600;color:var(--euka-deep);font-size:.98rem;margin-top:.15rem}
.fn-ref{color:inherit;margin-left:.1em;padding-inline:.15em}
.fn-ref:hover,.fn-ref:focus-visible{color:var(--ink)}
.plan--hero .plan-price{margin-top:.55rem}
.plan-was{font-size:.86rem;color:var(--ink-2)}
.plan-list{text-align:left;width:100%;margin:1.1rem 0 1rem;border-top:1px solid var(--line-strong)}
.plan-list li{padding:.6rem 0;border-bottom:1px solid var(--line-strong);font-size:.92rem;color:var(--ink-2);line-height:1.45}
.plan-list.ticks li::before{top:1.05em}
.plan--hero .code-chip{margin-bottom:1.2rem}

/* Flow und Signature: noch nicht buchbar. Bewusst kein opacity-Abblenden,
   das wuerde den Kontrast unter AA druecken; stattdessen gedaempfte Toene
   auf neutraler Flaeche und ein klares Etikett statt Button. */
.plan--soon{background:transparent;border-color:var(--line);border-style:solid}
.plan--soon:hover{transform:none;box-shadow:none}
.plan--soon h3,.plan--soon .plan-price b{color:var(--ink-3)}
.plan--soon .plan-price span,.plan--soon .plan-note,.plan--soon .plan-credits{color:var(--ink-2)}
.plan--soon .plan-credits b{color:var(--ink-2)}
.plan-soon{
  margin-top:auto;width:100%;
  border:1px dashed var(--line-strong);border-radius:var(--r-pill);
  padding:14px 20px;font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);
}

/* Rabatt-Code als Chip mit Kopier-Knopf */
.code-chip{
  display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.35rem .6rem;
  background:var(--pearl);border:1px dashed var(--euka);border-radius:var(--r-md);
  padding:.5rem .55rem .5rem .95rem;font-size:.88rem;color:var(--ink-2);
}
.code-chip b,.code-inline{font-weight:700;color:var(--ink);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.code-chip--lg{font-size:.95rem;margin-bottom:.4rem}
/* In der schmalen Abo-Karte steht das Etikett ueber Code und Knopf */
.plan .code-chip{width:100%}
.plan .code-label{flex-basis:100%;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.copy-btn{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  border:1px solid rgba(84,104,95,.38);border-radius:var(--r-pill);
  padding:.42rem .8rem;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--euka-deep);background:transparent;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.copy-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.copy-btn:hover,.copy-btn:focus-visible{background:var(--euka-soft);border-color:var(--euka-deep)}
.copy-btn.is-copied{background:var(--euka-deep);border-color:var(--euka-deep);color:var(--on-accent)}

/* Sternchen-Hinweis: Kundenwortlaut, klein und ruhig, aber voll lesbar */
.fussnote{
  max-width:1180px;margin:clamp(1.6rem, 2.6vw, 2.2rem) auto 0;
  font-size:.8rem;line-height:1.6;color:var(--ink-2);text-align:center;text-wrap:pretty;
}
.fussnote > span{margin-right:.2em}

/* Der bezifferte Einstieg: ruhig hervorgehoben, kein zweiter CTA */
.intro-banner{
  max-width:760px;margin:clamp(1.8rem, 3vw, 2.6rem) auto 0;
  display:flex;gap:1.15rem;align-items:center;
  background:var(--cashmere);border-radius:var(--r-lg);
  padding:1.25rem 1.5rem;
}
.ib-mark{
  flex:none;width:52px;height:52px;border-radius:var(--r-ic);
  background:var(--pearl);display:grid;place-items:center;
}
.ib-mark-ic{width:30px;height:30px;color:var(--euka-deep);fill:currentColor}
.intro-banner .ib-copy > b{display:block;font-weight:600;font-size:1.04rem;margin-bottom:.15rem}
.intro-banner p{font-size:.92rem;color:var(--ink-2)}
.ib-copy{flex:1;min-width:0}
.copy-btn--solo{background:var(--pearl)}
/* Mobil: Zeichen links, Text rechts, Kopier-Knopf unter dem Text. Mit
   flex-wrap allein bricht der Knopf nie um (flex:1 hat Basis 0), der Text
   wurde dann auf eine Wortbreite gequetscht. */
@media (max-width:620px){
  .intro-banner{display:grid;grid-template-columns:52px 1fr;align-items:start;gap:.8rem 1rem}
  .intro-banner .copy-btn{grid-column:2;justify-self:start}
}

.price-extras{max-width:760px;margin:clamp(1.4rem, 2.4vw, 2rem) auto 0;padding-inline:1.5rem}
.price-extras li{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding-block:1rem;border-bottom:1px solid var(--line);
}
.price-extras li:last-child{border-bottom:0}
.x-ic{flex:none;width:44px;height:44px;border-radius:var(--r-ic);
  display:grid;place-items:center;
  background:var(--euka-soft);color:var(--euka-deep)}
.x-ic svg{width:21px;height:21px}
.price-extras b{display:block;font-weight:600;font-size:1rem;margin-bottom:.1rem}
.price-extras li div span{font-size:.9rem;color:var(--ink-2)}

/* Textlinks im Fliesstext: sonst erben sie die Textfarbe und sind unsichtbar */
.price-extras a,.step p a,.tl-step p a,.faq-a a,.offer-note a,.login-hint a,.widget-fallback a,.booking-note a{
  color:var(--euka-deep);border-bottom:1px solid rgba(84,104,95,.35);
  transition:border-color .2s var(--ease), color .2s var(--ease)}
.price-extras a:hover,.step p a:hover,.tl-step p a:hover,.faq-a a:hover,.offer-note a:hover,
.login-hint a:hover,.widget-fallback a:hover,.booking-note a:hover{color:var(--euka-hover);border-bottom-color:currentColor}

/* ---------- Buchung: bsport-Widgets in ruhiger Fassung ---------------------
   Die Widgets bringen eigenes Layout mit (Karten, Filter, Dialoge). Wir geben
   nur Rahmen, Breite und reservierte Hoehe vor, damit beim Laden nichts
   springt; das Innenleben kommt aus dem bsport-Theme. */
.booking{
  max-width:1180px;margin:clamp(3rem, 6vw, 5rem) auto 0;
  padding-top:clamp(2.4rem, 4.5vw, 3.6rem);border-top:1px solid var(--line);
}
.booking-head{text-align:center;margin-bottom:1.4rem}
.booking-head h3{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);margin-bottom:.4rem}
.booking-head p{color:var(--ink-2);font-size:.98rem}
.booking-note{
  display:flex;align-items:center;gap:1rem 1.4rem;
  max-width:900px;margin:0 auto 1.4rem;
  background:var(--cashmere);border:1px solid var(--porcelain);border-left:3px solid var(--euka-deep);
  border-radius:var(--r-md);padding:1rem 1.2rem 1rem 1.3rem;
  font-size:.95rem;color:var(--ink);line-height:1.55;
}
.booking-note p{flex:1;min-width:0}
.booking-note--center{display:block;text-align:center;border-left-width:1px;
  margin-bottom:clamp(1.6rem, 3vw, 2.4rem)}
@media (max-width:620px){
  .booking-note{flex-direction:column;align-items:flex-start}
  .booking-note--center{align-items:center}
}
.widget-frame{
  background:var(--pearl);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(.8rem, 2vw, 1.6rem);
}
.sec--sand .widget-frame{background:var(--pearl)}
.widget-frame--wide{max-width:1280px;margin-inline:auto}
.booking .widget-frame{max-width:900px;margin-inline:auto}
/* Mobil braucht bsport die volle Breite: das Widget bringt eigenen Innenabstand
   mit, Rahmen plus Polster schnitten Karten und Suchfeld rechts ab. */
@media (max-width:620px){
  .widget-frame{padding:0;border:0;background:transparent;border-radius:0}
}
.bsport-mount--abo{min-height:480px}
.bsport-mount--kalender{min-height:560px}
.widget-fallback{margin-top:.9rem;text-align:center;font-size:.86rem;color:var(--ink-2)}
.js .widget-fallback{display:none}
.js .widget-fallback.is-shown{display:block}

/* Hinweis auf den Login fuer Bestandskunden unter den drei Schritten */
.login-hint{
  display:flex;align-items:center;gap:1.1rem;
  max-width:760px;margin:clamp(2.2rem, 4vw, 3.2rem) auto 0;
  background:var(--pearl);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1rem 1.4rem;font-size:.95rem;color:var(--ink-2);
}
.login-hint b{color:var(--ink);font-weight:600}

/* ---------- Ablauf ----------------------------------------------------------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4, 1fr);gap:clamp(1.4rem, 2.6vw, 2.6rem)}
/* Verbindet die vier Icons zu einer Kette; liegt hinter den Icon-Kacheln,
   die per z-index+eigenem Hintergrund die Linie an ihrer Position "kappen". */
.steps::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:calc(.4rem + 26px);left:12.5%;right:12.5%;
  height:1.5px;background:var(--line-strong);
}
/* Drei Schritte seit der Buchung ueber die Website (2026-10-12) */
.steps--3{grid-template-columns:repeat(3, 1fr);max-width:1120px;margin-inline:auto}
.steps--3::before{left:16.67%;right:16.67%}
.step{position:relative;padding-top:.4rem;text-align:center}
.step-ic{
  position:relative;z-index:1;
  width:52px;height:52px;border-radius:var(--r-ic);
  display:grid;place-items:center;margin:0 auto 1rem;
  background:var(--pearl);border:1px solid var(--line-strong);color:var(--euka-deep);
}
.step-ic svg{width:23px;height:23px}
.step h3{margin-bottom:.45rem}
.step p{font-size:.93rem;color:var(--ink-2);line-height:1.55;max-width:30ch;margin-inline:auto}

/* Die erste Stunde, entdramatisiert: vier ruhige Zeilenkarten */
.firsttime{
  max-width:900px;margin:clamp(2.6rem, 4.5vw, 4rem) auto 0;
  background:var(--pearl);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3.2vw, 2.6rem);
}
.firsttime h3{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(1.25rem, 1.1rem + .7vw, 1.55rem);letter-spacing:-.01em;
  margin-bottom:1.1rem;text-align:center;
}
.firsttime ul{display:grid;grid-template-columns:1fr 1fr;gap:.85rem 2.2rem}
.firsttime li{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.85rem 0;border-bottom:1px solid var(--line);
}
.firsttime b{font-weight:600;font-size:.99rem}
.firsttime li span{font-size:.9rem;color:var(--ink-2);line-height:1.5}
@media (max-width:720px){
  .firsttime ul{grid-template-columns:1fr}
}

/* ---------- Standort ---------------------------------------------------------- */
.place{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2.4rem, 5vw, 5.5rem);align-items:start;
  position:relative;z-index:1}
.place-copy h2{margin-bottom:1.1rem}
.place-addr{
  display:flex;align-items:center;gap:.7rem;margin-top:1.6rem;
  font-weight:600;font-size:1.02rem;color:var(--ink);
}
.place-addr svg{width:21px;height:21px;color:var(--euka-deep);flex:none}

/* Countdown-Basis (Box-Grid) fuer den Zaehler am Timeline-Schritt */
.countdown-cells{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;max-width:390px}
.cd-cell{
  flex:1;background:var(--pearl);padding:.9rem .4rem;text-align:center;
}
.cd-cell .cd-num{
  display:block;font-size:clamp(1.4rem, 1.2rem + 1vw, 1.9rem);line-height:1;
  color:var(--euka-deep);font-variant-numeric:tabular-nums;font-weight:700;
}
.cd-cell span{
  display:block;margin-top:.35rem;font-size:.72rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;
}
@media (max-width:420px){
  .countdown-cells{max-width:100%}
  .cd-cell{padding:.75rem .25rem}
}

/* Countdown am Ziel-Schritt der Timeline (Eröffnungswochenende): kleiner
   dosiert als im Popup, auf die Card-Innenbreite begrenzt, dezenter Cashmere-
   Ton statt Pearl-auf-Pearl, damit sich die Zellen vom Kartengrund abheben. */
.countdown--tl{margin-top:1rem}
.countdown--tl .countdown-cells{max-width:100%}
.countdown--tl .cd-cell{background:var(--cashmere);padding:.65rem .3rem}
.countdown--tl .cd-cell .cd-num{font-size:1.3rem}
.countdown--tl .cd-cell span{font-size:.66rem}

.timeline{
  background:var(--pearl);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.4rem);
  display:grid;gap:1.5rem;position:relative;
}
.tl-step{position:relative;padding-left:2.1rem}
.tl-step::before{
  content:"";position:absolute;left:6px;top:.45rem;bottom:-1.5rem;
  width:1.5px;background:var(--line);
}
.tl-step:last-child::before{display:none}
.tl-step::after{
  content:"";position:absolute;left:0;top:.32rem;
  width:13px;height:13px;border-radius:50%;
  background:var(--pearl);border:1.6px solid var(--porcelain);
}
.tl-step.is-now::after{background:var(--euka-deep);border-color:var(--euka-deep);
  box-shadow:0 0 0 4px var(--euka-soft)}
.tl-step time{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--euka-deep);margin-bottom:.3rem;
}
.tl-step h3{margin-bottom:.3rem}
.tl-step p{font-size:.92rem;color:var(--ink-2);line-height:1.5}

/* Echtes Herrenberg-Motiv als breites Band unter dem Ort. Der Markenfilter
   zieht das Fremdmotiv in die warme Zwei-Ton-Welt. */
.place-photo{
  margin:clamp(2.6rem, 4.5vw, 4rem) 0 0;overflow:hidden;
  border-radius:var(--r-photo);position:relative;z-index:1;
}
.place-photo img{
  width:100%;height:auto;
  aspect-ratio:1800 / 674;max-height:min(44vh, 420px);object-fit:cover;
  filter:sepia(.3) saturate(.74) contrast(1.05) brightness(1.03);
}

/* ---------- Erster Blick: KI-Renderings des Studios ------------------------
   Drei gleichwertige Bilder. Jedes traegt ein fest sichtbares Badge auf der
   Flaeche selbst (Pflichtkennzeichnung KI-generiert, keine reine
   Alt-Text-Loesung -- Alt-Text nennt es zusaetzlich fuer Screenreader). */
.render-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px, 2vw, 22px);
}
.render-item{
  margin:0;position:relative;overflow:hidden;
  border-radius:var(--r-photo);aspect-ratio:4 / 3;
}
.ai-tag{
  position:absolute;left:14px;bottom:14px;z-index:1;
  /* Bewusst transparent statt deckend: Pflichtkennzeichnung bleibt lesbar,
     draengt sich aber nicht vor die Visualisierung (Kundenfeedback 2026-09-14). */
  background:rgba(255,251,246,.62);color:var(--ink-2);
  border:1px solid rgba(255,251,246,.5);border-radius:var(--r-pill);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.45em .9em;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}

/* Bildfenster oeffnen sich weich aus der Mitte, wie .concept-media */
.js .render-item.reveal{
  clip-path:inset(9% 9% 9% 9% round var(--r-photo));
  transition:opacity .8s var(--ease), transform .8s var(--ease),
    clip-path 1.15s var(--ease) .12s;
}
.js .render-item.reveal.in{clip-path:inset(0 round var(--r-photo))}

/* ---------- FAQ: schlichte Hairline-Liste, keine Boxen ------------------------- */
.faq{max-width:860px;margin-inline:auto}
.faq details{
  /* var(--line-2) liegt farblich fast auf dem Cashmere-Sektionsgrund und
     verschwindet dort optisch; hier braucht es die kraeftigere Hairline. */
  border-bottom:1px solid var(--line-strong);
}
.faq details:first-child{border-top:1px solid var(--line-strong)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.3rem 3.4rem 1.3rem 0;
  font-weight:600;font-size:1rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:0;top:50%;
  width:12px;height:12px;translate:0 -50%;
  background:
    linear-gradient(var(--euka-deep), var(--euka-deep)) center/12px 1.6px no-repeat,
    linear-gradient(var(--euka-deep), var(--euka-deep)) center/1.6px 12px no-repeat;
  border-radius:0;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 3.4rem 1.3rem 0;max-width:70ch}
.faq-a p{color:var(--ink-2);font-size:.96rem}
.faq-more{text-align:center;margin-top:clamp(1.6rem, 3vw, 2.4rem)}

/* ---------- Hakenliste ------------------------------------------------------------
   Ein Haken aus zwei Kanten statt eines Icons: derselbe Strich wie im
   Sprite, aber ohne zusaetzliches Markup.
   ul.ticks statt .ticks: die Karten weiter unten setzen ihren Zeilenabstand
   ueber die padding-Kurzform (.offer-card li, .wl-perks li) und wuerden den
   linken Einzug sonst wieder auf 0 ziehen. */
ul.ticks li{position:relative;padding-left:2rem}
.ticks li::before{
  content:"";position:absolute;left:2px;top:1.28em;
  width:11px;height:6px;
  border-left:1.6px solid var(--euka-deep);border-bottom:1.6px solid var(--euka-deep);
  transform:rotate(-45deg);
}

/* ---------- Quote: der eine dunkle Akt --------------------------------------------
   Die einzige Zaesur der hellen Welt. Der Satz bleibt im Viewport stehen,
   waehrend man durch den Laufweg scrollt. --p (site.js) laeuft von 0 auf 1:
   damit blenden die beiden Zeilen ineinander und das Bild oeffnet sich von
   der Tafel auf die volle Flaeche. */
.quote-act{
  --p:0;
  position:relative;height:230vh;
  /* Startet in Cashmere, damit die Flaeche neben dem sich oeffnenden Bild
     nahtlos an die vorhergehende Sektion (Fragen, sec--sand) anschliesst. */
  background:var(--cashmere);color:var(--on-dark);
}
.quote-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;
}
.qa-bg{
  position:absolute;inset:0;margin:0;z-index:0;overflow:hidden;
  clip-path:inset(calc(15% - var(--p) * 15%) calc(11% - var(--p) * 11%) round var(--r-photo));
  transition:clip-path .18s linear;
}
.qa-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:sepia(.16) saturate(.92) contrast(1.02) brightness(.86);
  transform:scale(calc(1.1 - var(--p) * .08));
}
/* Scrim, damit der Satz auf jedem Bildausschnitt traegt */
.qa-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(28,30,27,.62), rgba(28,30,27,.44) 46%, rgba(28,30,27,.72)),
    radial-gradient(72% 58% at 50% 50%, rgba(28,30,27,.5), rgba(28,30,27,0) 74%);
}
.qa-in{
  position:relative;z-index:1;display:grid;
  width:100%;max-width:1040px;margin-inline:auto;
  padding-inline:var(--gutter);text-align:center;
}
.qa{
  grid-area:1 / 1;align-self:center;
  color:var(--on-dark);
  font-size:clamp(1.9rem, 1.2rem + 3.4vw, 4rem);line-height:1.1;
  text-wrap:balance;
}
.qa1{
  opacity:clamp(0, calc(1.2 - var(--p) * 2.8), 1);
  transform:translateY(calc(var(--p) * -26px));
}
.qa2{
  opacity:clamp(0, calc(var(--p) * 2.8 - 1.2), 1);
  transform:translateY(calc(26px - var(--p) * 26px));
}
/* Ohne JS bleibt --p auf 0: dann faellt der Pin weg und beide Zeilen stehen
   ruhig untereinander im offenen Bild. Dieselbe Ruhefassung gilt bei
   reduced-motion (Block am Dateiende). */
html:not(.js) .quote-act{height:auto}
html:not(.js) .quote-pin{position:static;height:auto;min-height:64svh;
  padding-block:clamp(84px, 10vw, 150px)}
html:not(.js) .qa-bg{clip-path:none}
html:not(.js) .qa-bg img{transform:none}
html:not(.js) .qa{grid-area:auto;opacity:1;transform:none}
html:not(.js) .qa1{font-size:clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  color:var(--on-dark-2);margin-bottom:.6rem}

/* ---------- Closer / Vorverkauf -------------------------------------------------- */
.closer{padding-block:clamp(84px, 9vw, 150px)}
.offer-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.04fr .96fr;
  gap:clamp(2.4rem, 5vw, 5.5rem);align-items:center;
}
.closer-wordmark{width:min(400px, 72%);height:auto;margin-block:.4rem 1.4rem}
.closer h2{margin-bottom:1.1rem}
.cta-sp{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.9rem}

.offer-card{
  position:relative;overflow:hidden;
  background:var(--pearl);color:var(--ink);
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  padding:clamp(1.9rem, 3.4vw, 2.7rem);
  box-shadow:var(--shadow);
}
.offer-card > :not(.mark-bg){position:relative;z-index:1}
.offer-card h3{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(1.3rem, 1.1rem + .8vw, 1.7rem);letter-spacing:-.01em;
  margin-bottom:1.1rem;
}
.offer-card ul{margin-bottom:1.6rem}
.offer-card li{
  padding:.68rem 0;border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--ink-2);
}
.offer-card li:first-child{border-top:1px solid var(--line)}
.offer-card b{color:var(--ink);font-weight:600}
.offer-card .btn{width:100%}
.offer-note{margin-top:.85rem;font-size:.83rem;color:var(--ink-2);line-height:1.55}

/* ---------- Footer: dunkelbraune Flaeche, Text- und Linien-Token auf on-dark umgestellt ---------- */
footer{background:var(--ink);color:var(--on-dark-2);position:relative;overflow:hidden;
  border-top:1px solid var(--line-dark);
  padding-block:clamp(52px, 6vw, 84px) clamp(20px, 2.4vw, 30px)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(2rem, 4vw, 4rem);padding-bottom:clamp(2rem, 4vw, 3.4rem)}
.foot-brand img{height:34px;width:auto;margin-bottom:1.2rem}
.foot-brand p{font-size:.92rem;color:var(--on-dark-2);max-width:40ch;line-height:1.6}
.foot-social{display:flex;gap:1.4rem;margin-top:1.3rem}
.foot-social a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9rem;font-weight:500;color:var(--on-dark-2);
  transition:color .2s var(--ease);
}
.foot-social svg{width:19px;height:19px}
.foot-social a:hover,.foot-social a:focus-visible{color:var(--euka-light)}
footer h4{font-size:.74rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:1.1rem}
.foot-col ul{display:grid;gap:.6rem}
.foot-col a,.foot-col li{font-size:.94rem;color:var(--on-dark-2);line-height:1.5}
.foot-col a{border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease)}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--euka-light);border-bottom-color:rgba(247,242,233,.35)}

/* Kuendigungs- und Widerrufsbutton: als echte Schaltflaechen erkennbar und
   gut lesbar (§ 312k BGB verlangt "gut lesbar", § 356a BGB "hervorgehoben"). */
.foot-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;margin-top:1.3rem}
.foot-col a.foot-btn{
  display:inline-flex;align-items:center;
  border:1px solid rgba(247,242,233,.42);border-radius:var(--r-pill);
  padding:.55rem 1.05rem;font-size:.86rem;font-weight:600;color:var(--on-dark);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.foot-col a.foot-btn:hover,.foot-col a.foot-btn:focus-visible{
  background:rgba(247,242,233,.1);border-color:var(--on-dark);color:var(--on-dark)}

/* Hausregel: kein Copyright, nur der igroup-Credit unten links */
.foot-bar{display:flex;justify-content:flex-start;
  padding-top:clamp(16px, 2vw, 26px);border-top:1px solid var(--line-dark)}
.foot-credit{margin:0;text-align:left;font-size:.81rem;color:var(--on-dark-3)}
.foot-credit a{color:inherit;border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease)}
.foot-credit a:hover,.foot-credit a:focus-visible{border-bottom-color:currentColor}

/* ---------- Formularfelder (Kuendigung, Widerruf) ---------------------------------------- */
.field{margin-bottom:.95rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.field label{
  display:block;font-size:.84rem;font-weight:600;color:var(--ink-2);
  margin-bottom:.35rem;
}
.field .opt{font-weight:400;color:var(--ink-3)}
.field input{
  width:100%;
  background:#fffdfa;color:var(--ink);
  border:1px solid #ded2bd;border-radius:var(--r-md);
  padding:13px 16px;
  font-family:inherit;font-size:16px;   /* 16px: verhindert iOS-Zoom */
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder{color:#b3a795}
.field input:focus{outline:none;border-color:var(--euka-deep);
  box-shadow:0 0 0 3px var(--euka-soft)}
.field input[aria-invalid="true"]{border-color:#a4574b;
  box-shadow:0 0 0 3px rgba(164,87,75,.14)}

.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-msg{display:none;margin-top:.85rem;font-size:.9rem;line-height:1.45}
.form-msg.show{display:block}
.form-msg.err{color:#8c4335}
.form-note{margin-top:.9rem;font-size:.8rem;color:var(--ink-2);line-height:1.5}
.form-note a{color:var(--euka-deep);border-bottom:1px solid rgba(84,104,95,.35)}

/* Kuendigungs- und Widerrufsformular: dieselben Felder wie oben, dazu
   Auswahlzeilen, Textfelder und die Bestaetigung nach dem Absenden. */
.erkl-card{
  background:var(--pearl);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.4rem, 3.4vw, 2.4rem);margin-top:1.4rem;
}
.erkl-form fieldset{border:0;margin:0 0 1.8rem;padding:0;min-width:0}
/* float hebt die Legende aus dem Rahmen-Sonderlayout: sonst ignoriert sie
   Abstaende und klebt am Feld darunter. */
.erkl-form legend{
  float:left;width:100%;padding:0;margin-bottom:.9rem;
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--euka-deep);
}
.erkl-form legend + *{clear:both}
.field textarea,.field select{
  width:100%;background:#fffdfa;color:var(--ink);
  border:1px solid #ded2bd;border-radius:var(--r-md);
  padding:13px 16px;font-family:inherit;font-size:16px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2354685f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.field textarea:focus,.field select:focus{outline:none;border-color:var(--euka-deep);box-shadow:0 0 0 3px var(--euka-soft)}
.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#a4574b;box-shadow:0 0 0 3px rgba(164,87,75,.14)}
.field-hint{margin-top:.35rem;font-size:.8rem;color:var(--ink-2);line-height:1.45}
.legal .field-hint{font-size:.8rem;margin:.35rem 0 0}
.field-row--plz{grid-template-columns:.55fr 1.45fr}
.radios{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.radios label{
  display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;
  background:#fffdfa;padding:.9rem 1rem;transition:background .2s var(--ease);
}
.radios label:hover{background:var(--cashmere)}
.radios input{margin-top:.3em;width:17px;height:17px;flex:none;accent-color:var(--euka-deep)}
.radios b{display:block;color:var(--ink);font-weight:600;font-size:.96rem}
.radios small{display:block;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.erkl-form .btn[type=submit]{margin-top:.4rem}
.erkl-form .btn[disabled]{opacity:.6;cursor:progress}
.erkl-intro{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:1.4rem 0 .4rem}
.erkl-intro > div{background:var(--pearl);padding:1.1rem 1.3rem}
.legal .erkl-intro h3{margin:0 0 .3rem}
.legal .erkl-intro p{font-size:.92rem;margin:0}
@media (max-width:620px){.erkl-intro{grid-template-columns:1fr}}
.erkl-adr{background:var(--cashmere);border-radius:var(--r-md);padding:1rem 1.3rem;margin:.6rem 0 1rem}

.erkl-done:focus{outline:none}
.erkl-done .ic{
  width:56px;height:56px;border-radius:var(--r-ic);margin-bottom:1rem;
  display:grid;place-items:center;background:var(--euka-soft);color:var(--euka-deep);
}
.legal .erkl-done h2{margin-top:0;font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2rem)}
.legal .erkl-done h3{margin:1.6rem 0 .6rem}
.legal .erkl-stamp{background:var(--cashmere);border-radius:var(--r-md);padding:.9rem 1.1rem;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.erkl-sum{border-top:1px solid var(--line);margin:0}
.erkl-sum > div{display:grid;grid-template-columns:minmax(150px, .38fr) 1fr;gap:.2rem 1rem;
  padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.94rem}
.erkl-sum dt{color:var(--ink-2)}
.erkl-sum dd{margin:0;color:var(--ink)}
@media (max-width:520px){.erkl-sum > div{grid-template-columns:1fr}}
.erkl-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* Druckfassung: die Eingangsbestaetigung muss sich speichern und ausdrucken
   lassen (§ 312k Abs. 4 BGB), ohne Kopfleiste, Footer und Chat. */
@media print{
  header,footer,.erkl-actions,.skip,#ezyaa-widget-button,[id^="ezyaa"]{display:none !important}
  .legal{padding:0}
  body{background:#fff}
}

/* ---------- Legal-Seiten (Impressum, Datenschutz) ------------------------------------------ */
/* Die Nav schwebt auch hier fixiert: das obere Padding haelt ihre Bauhoehe frei. */
.legal{padding-block:calc(var(--nav-h) + clamp(38px, 5vw, 70px)) var(--pad)}
.legal .wrap{max-width:860px}
.legal h1{font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  letter-spacing:-.015em;color:var(--ink);
  font-size:clamp(2rem, 1.5rem + 2vw, 2.8rem);margin-bottom:1.8rem}
.legal h2{font-size:1.25rem;margin:2.2rem 0 .7rem}
.legal p,.legal li{color:var(--ink-2);font-size:.98rem;line-height:1.65}
.legal p{margin-bottom:.8rem}
.legal ul{list-style:disc;padding-left:1.3rem;margin-bottom:.9rem}
.legal a:not(.btn){color:var(--euka-deep);border-bottom:1px solid rgba(84,104,95,.3)}
.legal h3{margin:1.6rem 0 .5rem}
.legal .stand{margin-top:-1rem;font-size:.88rem}
.legal .todo{
  background:var(--cashmere);border:1px solid var(--porcelain);
  border-radius:var(--r-md);padding:1rem 1.3rem;font-size:.92rem;
}
.legal .back{margin-top:2.6rem}
.legal .back a{font-weight:600}

/* ---------- Reveal ------------------------------------------------------------------------ */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.09s}
.js .reveal.d2{transition-delay:.18s}
.js .reveal.d3{transition-delay:.27s}
.js .reveal.d4{transition-delay:.36s}

/* Headline-Clip: H2s steigen aus einer unsichtbaren Kante (Award-Reveal).
   Inset oben/unten mit Luft, sonst schneiden Umlaute und Unterlaengen. */
.js .sec-head.reveal h2{
  clip-path:inset(-8% 0 102% 0);transform:translateY(18px);
  transition:clip-path .95s var(--ease) .1s, transform .95s var(--ease) .1s;
}
.js .sec-head.reveal.in h2{clip-path:inset(-8% 0 -16% 0);transform:none}
/* Der Clip-Effekt sitzt auf einem inneren Wrapper (.h2-wipe), NICHT auf dem
   h2.reveal selbst: clip-path auf dem beobachteten Element clippt es vor dem
   Reveal auf 0 sichtbare Flaeche, und Chromium wertet das dann als "nicht im
   Viewport" fuer den IntersectionObserver - das Element ist dadurch nie
   ".in" geworden und blieb dauerhaft unsichtbar (gemeldetes Problem
   2026-09-14, betraf "Sechs Dinge", "Training, das Dich fordert",
   "Im Herzen von Herrenberg", "Sei von Anfang an dabei"). Der Wrapper traegt
   den Clip, der h2 bleibt dafuer unbeeinflusst mess- und beobachtbar. */
.js h2.reveal .h2-wipe{
  display:inline-block;clip-path:inset(-8% 0 102% 0);
  transition:clip-path .95s var(--ease) .08s}
.js h2.reveal.in .h2-wipe{clip-path:inset(-8% 0 -16% 0)}

/* Bildfenster oeffnen sich weich aus der Mitte */
.js .concept-media.reveal{
  clip-path:inset(9% 9% 9% 9% round var(--r-photo));
  transition:opacity .8s var(--ease), transform .8s var(--ease),
    clip-path 1.15s var(--ease) .12s;
}
.js .concept-media.reveal.in{clip-path:inset(0 round var(--r-photo))}

/* Scroll-getriebenes Ken-Burns (CSS view-timeline, progressive enhancement):
   grosse Bilder waehrend des Durchscrollens ganz langsam auf Ruhegroesse. */
@supports (animation-timeline: view()){
  .js .kenb{animation:kenburns linear both;
    animation-timeline:view();animation-range:entry 0% cover 90%}
  @keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1.015)}}
}

/* ---------- Responsive -------------------------------------------------------------------- */
@media (max-width:1180px){
  .strengths{grid-template-columns:.95fr 1.05fr}
  .why-stage{height:min(72vh, 620px)}
}
@media (max-width:960px){
  .concept{grid-template-columns:1fr}
  .place{grid-template-columns:1fr}
  .offer-in{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:520px}
  .plan--hero{order:-1}
  .steps{grid-template-columns:repeat(2, 1fr);row-gap:2.4rem}
  .steps--3{grid-template-columns:repeat(3, 1fr)}
  .steps::before{content:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .render-grid{grid-template-columns:1fr 1fr}
  .render-item:last-child{grid-column:1 / -1}
  /* Die einspaltige Fassung: die feste linke Spalte faellt weg, die
     Ueberschrift scrollt normal mit. Die sechs Karten bleiben aber sticky
     und stapeln sich weiterhin beim Scrollen (Kundenfeedback 2026-09-14:
     der Effekt soll auch mobil sichtbar sein, nicht nur auf Desktop) -
     dafuer braucht es die feste Spalte nicht, nur die per nth-child
     gestaffelten `top`-Werte oben, die fuer alle Breiten gelten. */
  .strengths{grid-template-columns:1fr;gap:clamp(1.8rem, 4vw, 2.6rem)}
  .strengths-head{position:static}
  .why-grid{grid-template-columns:1fr}
  .why-stage{height:min(56vh, 460px)}
  .goal-panel{grid-template-columns:1fr;gap:clamp(1.3rem, 3vw, 1.9rem)}
  .goal-media{aspect-ratio:16 / 9}
  .goal-body{padding-right:0}
  .quote-act{height:200vh}
  /* left/bottom in Prozent beziehen sich auf die Sektionshoehe; die waechst
     im einspaltigen Mobil-Layout stark an, das grosse Signet wuerde sonst
     viel zu weit nach unten wandern. Feste vw-Werte statt Prozent. */
  .mark-bg--xl{width:78vw;left:-22vw;bottom:auto;top:-6vw}
}
@media (max-width:620px){
  .benefits{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .render-grid{grid-template-columns:1fr}
  .render-item:last-child{grid-column:auto}
  .field-row{grid-template-columns:1fr}
  .why-stage{height:min(48vh, 380px)}
  .goal-tab{padding:12px 16px;letter-spacing:.1em}
  .goal-body .btn{width:100%}
  /* Das Sperren wird auf schmalen Schirmen zurueckgenommen, sonst laeuft
     die Zeile ueber die Kante. */
  .tagline{letter-spacing:.26em;gap:.4rem .8rem;text-indent:.26em}
  /* Das Panorama wird auf dem Handy zum Ausschnitt statt zum Streifen */
  .place-photo img{aspect-ratio:16 / 9}
  /* Versalien plus Sperrung machen lange Labels breit: auf dem Handy
     darf der Primaer-CTA umbrechen statt zu ueberlaufen. */
  .btn{white-space:normal;text-align:center;letter-spacing:.1em}
  .hero-cta .btn{width:100%}
  .cta-band{flex-direction:column;align-items:flex-start}
  .cta-band .btn{width:100%}
  .scroll-cue{display:none}
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- Die FORMYA-Blume als Tapete -----------------------------------------------------
   Halbversetztes Brandmark-Muster, bewusst hauchzart. Steht am Dateiende,
   damit background-image die background-Shorthands der Sektionen ergaenzt. */
.pattern{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='184'%3E%3Cg fill='rgba(199,180,150,0.16)'%3E%3Cg transform='translate(14 14) scale(0.1914)'%3E%3Cpath d='M274.44,0C223.66,0,180.14,30.87,161.92,74.77c-5.55,13.23-8.72,27.62-9.14,42.71.02.67.04,35.32.04,35.32h-14.12c-16.48,0-32.23,3.26-46.55,9.19,12.86,5.32,26.88,8.47,41.54,9.06h19.13s.03,29.66.03,33.19c-.03,50.97-38.61,93.08-87.77,100.17-5.13.78-10.38,1.19-15.73,1.19l-26.85-.12-18.34,18.35,46.22.02c6.06,0,12.01-.47,17.83-1.33,42.52-6.56,77.78-34.96,93.71-73.32,5.97-14.24,9.23-29.81,9.23-46.16v-32h19.56c14.69-.59,28.71-3.74,41.57-9.06-14.32-5.92-30.07-9.19-46.6-9.19l-14.5-.02v-35.51c0-37.35,32.18-99.03,102.5-99.03h26.31S318.22,0,318.22,0h-43.79Z'/%3E%3Cpath d='M50.3,0H0v50.48C0,100.56,30.41,143.5,73.74,161.97,30.41,180.43,0,223.33,0,273.38v45.11l18.41-18.41v-26.7c0-50.08,36.09-91.9,83.62-100.89-4.35-1.28-8.63-2.78-12.87-4.51l-14.55-6.03,14.56-6.02c4.22-1.74,8.52-3.24,12.87-4.51-47.54-9-83.62-50.83-83.62-100.95v-31.96h31.89c47.07,0,86.81,31.83,98.93,75.09,1.61-7.28,3.84-14.41,6.74-21.33.78-1.88,1.68-3.69,2.54-5.53C138.56,27.22,97.6,0,50.3,0Z'/%3E%3Cpath d='M250.11,161.96c43.32-18.46,73.73-61.41,73.73-111.49V4.16l-18.41,18.41v27.91c0,50.13-36.07,91.96-83.62,100.95,4.35,1.28,8.65,2.76,12.87,4.51l14.57,6.03-14.57,6.02c-4.22,1.74-8.52,3.23-12.87,4.51,47.54,8.99,83.62,50.79,83.62,100.89v31.94h-31.89c-47.07,0-86.81-31.81-98.93-75.04-1.61,7.27-3.84,14.4-6.74,21.32-.78,1.88-1.68,3.69-2.54,5.52,19.96,39.5,60.91,66.7,108.21,66.7h50.29v-50.44c0-50.05-30.4-92.96-73.73-111.42Z'/%3E%3C/g%3E%3Cg transform='translate(106 106) scale(0.1914)'%3E%3Cpath d='M274.44,0C223.66,0,180.14,30.87,161.92,74.77c-5.55,13.23-8.72,27.62-9.14,42.71.02.67.04,35.32.04,35.32h-14.12c-16.48,0-32.23,3.26-46.55,9.19,12.86,5.32,26.88,8.47,41.54,9.06h19.13s.03,29.66.03,33.19c-.03,50.97-38.61,93.08-87.77,100.17-5.13.78-10.38,1.19-15.73,1.19l-26.85-.12-18.34,18.35,46.22.02c6.06,0,12.01-.47,17.83-1.33,42.52-6.56,77.78-34.96,93.71-73.32,5.97-14.24,9.23-29.81,9.23-46.16v-32h19.56c14.69-.59,28.71-3.74,41.57-9.06-14.32-5.92-30.07-9.19-46.6-9.19l-14.5-.02v-35.51c0-37.35,32.18-99.03,102.5-99.03h26.31S318.22,0,318.22,0h-43.79Z'/%3E%3Cpath d='M50.3,0H0v50.48C0,100.56,30.41,143.5,73.74,161.97,30.41,180.43,0,223.33,0,273.38v45.11l18.41-18.41v-26.7c0-50.08,36.09-91.9,83.62-100.89-4.35-1.28-8.63-2.78-12.87-4.51l-14.55-6.03,14.56-6.02c4.22-1.74,8.52-3.24,12.87-4.51-47.54-9-83.62-50.83-83.62-100.95v-31.96h31.89c47.07,0,86.81,31.83,98.93,75.09,1.61-7.28,3.84-14.41,6.74-21.33.78-1.88,1.68-3.69,2.54-5.53C138.56,27.22,97.6,0,50.3,0Z'/%3E%3Cpath d='M250.11,161.96c43.32-18.46,73.73-61.41,73.73-111.49V4.16l-18.41,18.41v27.91c0,50.13-36.07,91.96-83.62,100.95,4.35,1.28,8.65,2.76,12.87,4.51l14.57,6.03-14.57,6.02c-4.22,1.74-8.52,3.23-12.87,4.51,47.54,8.99,83.62,50.79,83.62,100.89v31.94h-31.89c-47.07,0-86.81-31.81-98.93-75.04-1.61,7.27-3.84,14.4-6.74,21.32-.78,1.88-1.68,3.69-2.54,5.52,19.96,39.5,60.91,66.7,108.21,66.7h50.29v-50.44c0-50.05-30.4-92.96-73.73-111.42Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:184px 184px;
}

/* ---------- Reduced Motion: kompletter Off-Switch ------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .js .mark-bg{animation:none}
  .js .hero-still{animation:none;transform:scale(1.02)}
  .js .scroll-cue svg{animation:none}
  .js .kenb{animation:none}
  .js .sec-head.reveal h2,.js h2.reveal{clip-path:none;transform:none}
  .js .concept-media.reveal{clip-path:inset(0 round var(--r-photo))}
  .js .render-item.reveal{clip-path:inset(0 round var(--r-photo))}
  /* Die Bildspalten stehen still, statt am Ende der Bahn zu stehen */
  .js .why-col.a,.js .why-col.b{animation:none}
  /* site.js setzt --p hier nicht: der Quote-Akt faellt auf die Ruhefassung
     zurueck, beide Zeilen stehen untereinander im offenen Bild. */
  .quote-act{height:auto}
  .quote-pin{position:static;height:auto;min-height:64svh;
    padding-block:clamp(84px, 10vw, 150px)}
  .qa-bg{clip-path:none}
  .qa-bg img{transform:none}
  .qa{grid-area:auto;opacity:1;transform:none}
  .qa1{font-size:clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
    color:var(--on-dark-2);margin-bottom:.6rem}
}

/* Chat aus, solange ein bsport-Dialog offen ist (site.js) */
html.bs-modal #ezyaa-widget-button,html.bs-modal [id^="ezyaa"]{display:none !important}