/* ============================================================
   FORCE by Enggist — mobile-first One-Pager
   Ruhig, dunkel, editorial. Eine Signalfarbe: #E4302B.
   ============================================================ */
:root{
  --bg:#9C120E;                     /* Seitenrot — aus dem Hero-Verlauf */
  --bg-deep:#6E0B09;
  --bg-hot:#B31712;
  --ink:#FFFFFF;
  /* Deckkraft bewusst hoch: auf dem helleren Seitenrot lag die frühere
     Feinschrift (.55) unter dem 4.5:1-Kontrast und war schlecht lesbar */
  --sub:rgba(255,255,255,.88);
  --faint:rgba(255,255,255,.74);
  --red:#E4302B;
  --hairline:rgba(255,255,255,.3);
  --pad:clamp(34px,7vw,48px);     /* hält Abstand zur Laufbahn (Inset 26px) */
  /* Drei Ebenen. Fehlt eine Hausschrift, greift lückenlos der Rückfall,
     die Seite bleibt also auch ohne die Dateien intakt. */
  --font:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;            /* Fliesstext, Formulare */
  --font-brand:'Coolvetica','Inter',-apple-system,'Segoe UI',Arial,sans-serif; /* Marke, Titel, Bedienelemente */
  --font-display:'Allstars',Impact,sans-serif;                                 /* Graffiti-Zeile, Sterne */
  /* Coolvetica hat sehr enge Seitenränder — Paare wie "en" oder "ei"
     kleben sonst zusammen. Eine Spur Luft, zentral steuerbar. */
  --track:.012em;
  /* Filmkorn. Die Staerke wird von js/track.js ueber --grain-x
     mitgeschrieben (1 in Ruhe, bis 1.3 beim schnellen Scrollen). */
  --grain-base:.075;
  --grain-x:1;
  --grain-rate:.9s;
}

/* ---------- Hausschriften ---------- */
@font-face{
  font-family:'Allstars';
  src:url('../fonts/allstars.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Coolvetica';
  src:url('../fonts/CoolveticaRg-Regular.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Coolvetica';
  src:url('../fonts/CoolveticaRg-Bold.woff2') format('woff2');
  font-weight:600 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Coolvetica';
  src:url('../fonts/CoolveticaHv-Regular.woff2') format('woff2');
  font-weight:800 900; font-style:normal; font-display:swap;
}

/* ---------- Sterne aus Allstars ----------
   In der Schrift liegt auf jedem Satzzeichen ein eigener Stern:
   ":" und "&" sind die langen Sternschnuppen, "." und "," die kompakten.
   Bewusst gesetzt, nicht gestreut. Bis die Schrift geladen ist, bleibt
   das Zeichen verborgen — sonst stünde dort ein nackter Doppelpunkt. */
.gx{
  display:none; font-family:var(--font-display); font-style:normal;
  font-weight:400; -webkit-user-select:none; user-select:none;
}
.has-allstars .gx{ display:inline-block; }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:linear-gradient(180deg,var(--bg-hot) 0%,var(--bg) 45%,var(--bg-deep) 100%) var(--bg);
  color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.55;
  overflow-x:clip;
}
::selection{ background:#fff; color:var(--bg); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
p{ text-wrap:pretty; }

/* ---------- Opener ----------
   Schwarzer Vorhang mit der Graffiti-Zeile, der nach oben wegzieht.
   Standardmässig aus — nur wenn das Kopf-Skript .opening setzt. */
.opener{ display:none; }
.opening .opener{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:95; background:#0A0A0A;
  transition:transform .7s cubic-bezier(.76,0,.24,1);
}
.opening .opener-mark{
  font-family:var(--font-display); color:#fff;
  font-size:clamp(30px,8.4vw,74px); line-height:1;
  opacity:0; transform:translateY(12px);
  animation:openerIn .55s cubic-bezier(.2,.7,.2,1) .06s forwards;
}
.opening .opener-mark .gx{ font-size:.62em; margin-left:.2em; vertical-align:.1em; }
.opener.lift{ transform:translateY(-101%); }
@keyframes openerIn{ to{ opacity:1; transform:none; } }
.opening,.opening body{ overflow:hidden; }

/* Sprungmarke für Tastatur-Navigation */
.skip{
  position:fixed; top:8px; left:8px; z-index:100;
  transform:translateY(-200%);
  background:#0A0A0A; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.4); border-radius:10px;
  font-size:13px; font-weight:600; padding:12px 18px;
}
.skip:focus{ transform:none; }

/* ---------- Typografie ---------- */
/* Hausstil der Titel: Coolvetica Heavy, Versalien, enger Zeilenfall */
h1,h2{
  font-family:var(--font-brand); font-weight:800;
  text-transform:uppercase; letter-spacing:var(--track); line-height:.94;
  text-wrap:balance;
}
h1{ font-size:clamp(34px,9.6vw,76px); }
h2{ font-size:clamp(32px,8.8vw,64px); }
h1 em,h2 em{ font-style:normal; color:var(--red); }
.sub{
  color:var(--sub); font-size:clamp(15px,4vw,18px); font-weight:400;
  line-height:1.6; margin-top:18px; max-width:34em;
}

/* ---------- Zwischenzeiten (js/track.js) ----------
   Stationsnummer und Meterstand, in derselben Sprache wie die Laufbahn.
   Sie binden den Rahmen an den Inhalt: die Zahl hier ist dieselbe, die
   aussen auf der Bahn steht, wenn der Abschnitt den Schirm erreicht. */
.split{
  display:flex; align-items:center; gap:12px;
  margin-bottom:clamp(16px,2.6vh,26px);
  font-family:var(--font-brand); font-weight:600;
  font-size:11.5px; letter-spacing:.24em;
  color:rgba(255,255,255,.55);
}
.split span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:20px; padding:0 6px;
  border:1px solid rgba(255,255,255,.34); border-radius:3px;
  font-size:10.5px; letter-spacing:.14em; color:rgba(255,255,255,.8);
}
/* Haarlinie bis zum Satzspiegel-Rand — wie eine Marke auf der Bahn */
.split::after{
  content:""; flex:1; height:1px;
  background:rgba(255,255,255,.2);
}
.cta .split,.cert .split{ justify-content:center; }
.cta .split::after,.cert .split::after{ display:none; }

/* ---------- Filmkorn ----------
   Eine überdimensionierte Rausch-Kachel (assets/grain.png), die in
   unregelmässigen Sprüngen versetzt wird — wie Korn, das pro Frame neu
   würfelt, nicht wie eine wandernde Textur. Nur transform, also ohne
   Layout- oder Paint-Kosten; unter Laufbahn (60) und Bedienung. */
.grain{
  position:fixed; inset:-60%; z-index:55;
  width:220%; height:220%;
  background:url('../assets/grain.png') repeat 0 0/192px 192px;
  opacity:calc(var(--grain-base) * var(--grain-x));
  pointer-events:none;
  animation:grain var(--grain-rate) steps(1) infinite;
  transition:opacity .5s ease;
  will-change:transform;
}
@keyframes grain{
  0%      { transform:translate(0,0); }
  12%     { transform:translate(-2.6%,1.9%); }
  24%     { transform:translate(1.4%,-3.1%); }
  35%     { transform:translate(-3.4%,-1.2%); }
  47%     { transform:translate(2.9%,2.4%); }
  58%     { transform:translate(-1.1%,3.2%); }
  70%     { transform:translate(3.1%,-2.2%); }
  82%     { transform:translate(-2.2%,-2.8%); }
  93%     { transform:translate(1.8%,1.1%); }
}
@media (max-width:600px){
  :root{ --grain-base:.06; }
}
@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
}

/* ---------- Laufbahn (js/track.js) ---------- */
#track{
  position:fixed; inset:0; z-index:60; pointer-events:none;
}
#track svg{ display:block; width:100%; height:100%; }
/* oberes HYROX-Logo der Bahn weicht der Navigationsleiste */
#track .trk-top{ transition:opacity .3s ease; }
.hdr-solid #track .trk-top{ opacity:0; }
.trk-glow{
  transform-box:fill-box; transform-origin:center;
  animation:glowPulse .7s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ transform:scale(1); opacity:.32; }
  50%{ transform:scale(1.65); opacity:.1; }
}
/* Ziellinie blitzt auf, wenn die Kugel eine Runde vollendet */
.trk-finish.hit{ animation:finishHit .9s ease-out; }
@keyframes finishHit{
  0%{ filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  18%{ filter:drop-shadow(0 0 8px rgba(255,255,255,.95)); }
  100%{ filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* ---------- Header ----------
   Über dem Hero unsichtbar integriert (kein Kasten, kein Blur), ab dem
   ersten Scroll eine kompakte dunkle Leiste. Kein schwebendes Pill. */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:80;
  /* Oberkante unterhalb der Laufbahn (Innenlinie bei 26px). Vorher lag
     sie auf breiten Schirmen bei 18px und damit mitten im Band — seit
     das Band dunkel ist, verschmolz die Leiste damit und unterbrach die
     oberen Bahnlinien. */
  padding:calc(env(safe-area-inset-top,0px) + 34px) var(--pad) 0;
}
@media (max-width:899px){
  #hyrox,#training,#standort,#cta{ scroll-margin-top:92px; }
}
.site-head .bar{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  max-width:1100px; margin:0 auto;
  background:transparent; border:1px solid transparent; border-radius:14px;
  padding:9px 14px;
  transition:background .3s ease,border-color .3s ease,
             -webkit-backdrop-filter .3s ease,backdrop-filter .3s ease;
}
.site-head.solid .bar{
  background:rgba(12,12,13,.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.08);
}
.brand{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  padding:8px 8px; margin:-8px -8px; /* Trefferfläche ≥44px, ohne Layout-Effekt */
}
.emblem{ width:30px; height:30px; }
.foot-emblem{ width:72px; height:72px; }
/* Marke im Kopf: das Monogramm und die Graffiti-Zeile — dieselbe
   Signatur wie im Fussbereich, nicht ein Logo mit Namen daneben.
   Allstars sitzt hoch in der Zeile, deshalb der optische Ausgleich. */
.brand-graf{
  font-family:var(--font-display);
  /* Allstars laesst den Schwung des R ins N laufen — ungesperrt
     verschmelzen die beiden zu einem Zeichen und "Born" liest sich als
     "Box". Die Laufweite trennt sie wieder.
     Unter 420px bleibt sie ganz weg: der CTA ist 116px breit, fuer die
     Zeile blieben bei 320px noch 49px — sie lag bisher unter dem Knopf.
     Das Monogramm traegt die Marke dort allein, die Graffiti-Zeile steht
     ohnehin gross im Hero, im Opener und im Fussbereich. */
  display:none;
  font-size:clamp(15px,3.8vw,19px); letter-spacing:.055em;
  line-height:1; white-space:nowrap;
  position:relative; top:1px;
  /* Tritt erst auf, wenn dieselbe Zeile im Hero aus dem Bild ist
     (Klasse .sig via js/track.js). Der Platz bleibt belegt. */
  opacity:0; transform:translateX(-8px);
  transition:opacity .35s ease,transform .35s ease;
}
@media (min-width:420px){
  .brand-graf{ display:inline-block; }
}
.site-head.sig .brand-graf{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .brand-graf{ transition:none; transform:none; }
}
.nav-links{ display:none; }
.site-head .head-cta{
  margin-top:0; padding:10px 18px; border-radius:12px;
  font-size:12px; letter-spacing:.06em; white-space:nowrap;
  background:rgba(14,14,15,.55);
}
/* Anker landen unterhalb der fixen Leiste */
#hyrox,#training,#standort,#cta{ scroll-margin-top:76px; }

/* ---------- Einblenden ----------
   Blöcke steigen auf; die Kinder darin gestaffelt hinterher, damit die
   Sektion sich aufbaut statt als Klotz zu erscheinen. */
.fx{ opacity:0; transform:translateY(14px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
.fx.in{ opacity:1; transform:none; }
.fx > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s);
}
.fx.in > *{ opacity:1; transform:none; }

/* Titel steigen zeilenweise hinter einer unsichtbaren Kante hervor */
.ln{ display:block; overflow:hidden; }
.ln > i{
  display:block; font-style:normal;
  transform:translateY(102%);
  transition:transform .85s cubic-bezier(.22,.75,.2,1) var(--d,0s);
}
.in .ln > i,.fx.in .ln > i{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .fx > *,.ln > i,.com-card{ transition:none; opacity:1; transform:none; }
}

/* ---------- 1 · Hero (Bild vollflächig im Hintergrund, Text darüber) ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  background:#0A0A0A; overflow:hidden;
}
/* Fotos liegen als WebP und als JPEG bereit. Die erste Regel ist der
   Rückfall; Browser mit image-set() überschreiben sie mit dem WebP. */
.hero-media{
  position:absolute; inset:0; z-index:0;
  background-image:
    url('../assets/hero-sprint-red.jpg'),
    radial-gradient(120% 100% at 50% 30%, #1D1D20 0%, #0C0C0D 60%, #050505 100%);
  background-image:
    image-set(url('../assets/hero-sprint-red.webp') type('image/webp'),
              url('../assets/hero-sprint-red.jpg')  type('image/jpeg')),
    radial-gradient(120% 100% at 50% 30%, #1D1D20 0%, #0C0C0D 60%, #050505 100%);
  background-size:cover,cover;
  background-position:center,center;
  /* sehr langsame Drift — der Einstieg atmet, ohne dass man es merkt */
  animation:heroDrift 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{ transform:scale(1.035) translate3d(-.6%,.4%,0); }
  to  { transform:scale(1.075) translate3d(.6%,-.5%,0); }
}
@media (prefers-reduced-motion:reduce){
  .hero-media{ animation:none; }
}
/* Telefone bekommen die halb so grosse Fassung */
@media (max-width:600px){
  .hero-media{
    background-image:
      url('../assets/hero-sprint-red-sm.jpg'),
      radial-gradient(120% 100% at 50% 30%, #1D1D20 0%, #0C0C0D 60%, #050505 100%);
    background-image:
      image-set(url('../assets/hero-sprint-red-sm.webp') type('image/webp'),
                url('../assets/hero-sprint-red-sm.jpg')  type('image/jpeg')),
      radial-gradient(120% 100% at 50% 30%, #1D1D20 0%, #0C0C0D 60%, #050505 100%);
  }
}
/* gleichmässiger Schleier über dem ganzen Bild — kein sichtbarer Verlauf,
   nur so viel, dass die weisse Schrift überall sicher steht */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:rgba(8,4,4,.2);
}
.hero-copy{
  position:relative; z-index:2; text-align:center;
  /* deutlich unterhalb der Navigation, nicht direkt an ihr geklebt */
  padding:calc(env(safe-area-inset-top,0px) + max(190px,32svh)) var(--pad) 10px;
}
/* Wortmarke im Hero: Herkunft in Allstars, Anspruch in Coolvetica Heavy —
   dazwischen die lange Sternschnuppe, wie im Marken-Lockup */
.hero h1{
  display:flex; flex-direction:column; align-items:center; gap:.1em;
  /* Vorher auf Einzeiligkeit getrimmt — dadurch war die wichtigste Zeile
     der Seite die kleinste Ueberschrift ueberhaupt. Jetzt bricht sie
     bewusst um und darf dafuer der Hoehepunkt sein. Sie greift ueber den
     Seitenrand hinaus, damit sie plakatgross werden kann. */
  margin-inline:calc(var(--pad) * -0.42);
  font-size:clamp(36px,12.2vw,108px); line-height:.96;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.hl-graf{
  font-family:var(--font-display); font-weight:400;
  font-size:.6em; letter-spacing:.01em; line-height:1.1;
}
.hl-graf .gx{ font-size:.8em; margin-left:.24em; vertical-align:.06em; }
.hl-heavy{
  font-family:var(--font-brand); font-weight:800;
  text-transform:uppercase; letter-spacing:var(--track); line-height:.94;
  font-size:1em;
}
.hero-sub{
  margin:18px auto 0; max-width:26em;
  color:#fff; font-size:15.5px; line-height:1.6;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.hero .button.hero-btn{ margin-top:26px; background:rgba(16,16,17,.62); }

/* ---------- 1b · Beleg ----------
   Bewertung, Grösse und Öffnungszeiten direkt unter dem Hero — die drei
   Angaben, nach denen jemand vor dem Buchen sucht. */
.proof{ padding:clamp(30px,6vh,52px) var(--pad); }
.proof dl{
  display:grid; grid-template-columns:1fr; max-width:1100px; margin:0 auto;
  border-top:1px solid var(--hairline);
}
.proof dl > div{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--hairline);
}
.proof dt{
  font-family:var(--font-brand);
  font-size:clamp(26px,7vw,34px); font-weight:600;
  letter-spacing:var(--track); line-height:1; white-space:nowrap;
}
.proof .star{ font-size:.54em; vertical-align:.26em; margin-left:7px; }
.proof .unit{ font-size:.4em; font-weight:500; letter-spacing:.06em; margin-left:5px; }
.proof dd{
  color:var(--sub); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- 2 · Konzept ---------- */
.concept .block{
  position:relative; display:flex; align-items:flex-end;
  min-height:88vh; min-height:88svh;
  text-decoration:none;
}
.block-media{
  position:absolute; inset:0;
  background-color:#8E100C;
  background-repeat:no-repeat;
  background-size:cover; background-position:center 34%;
}
.media-hyrox{
  background-image:url('../assets/hyrox-wallball.jpg');
  background-image:image-set(url('../assets/hyrox-wallball.webp') type('image/webp'),
                             url('../assets/hyrox-wallball.jpg')  type('image/jpeg'));
  background-position:center 22%;
}
.media-training{
  background-image:url('../assets/training-stretch.jpg');
  background-image:image-set(url('../assets/training-stretch.webp') type('image/webp'),
                             url('../assets/training-stretch.jpg')  type('image/jpeg'));
  background-position:center 28%;
}
.media-messung{
  background-image:url('../assets/body-measure.jpg');
  background-image:image-set(url('../assets/body-measure.webp') type('image/webp'),
                             url('../assets/body-measure.jpg')  type('image/jpeg'));
  background-position:center 30%;
}
.block-media::after{ /* leiser Verlauf, damit die Copy unten sicher lesbar bleibt */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.25) 0%, transparent 30%, transparent 52%, rgba(10,6,6,.88) 100%);
}
.block-copy{
  position:relative; z-index:2;
  padding:0 var(--pad) clamp(52px,9vh,90px);
}
/* Blocktitel sind einzelne Wörter und können nicht umbrechen.
   „Körpermessung." ist das längste — es gibt die Untergrenze vor. */
.block-copy h2{ font-size:clamp(27px,8.4vw,64px); }
.block-copy p{
  color:var(--sub); margin-top:12px;
  font-size:clamp(15px,4vw,17px); line-height:1.6;
}
.arrow-link{
  font-family:var(--font-brand);
  display:inline-block; margin-top:20px;
  font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:4px;
  transition:border-color .2s,color .2s;
}
.arrow-link::after{ content:" →"; }
.block:hover .arrow-link{ border-color:#fff; }

/* ---------- Sektionen (Text auf Schwarz) ---------- */
.room,.cert,.region,.cta{
  padding:clamp(110px,20vh,190px) var(--pad);
}
.room .inner,.cert .inner,.region .inner,.cta .inner{
  max-width:1100px; margin:0 auto;
}

/* ---------- 4 · HYROX ----------
   Einzige dunkle Sektion der Seite: bricht die durchgehende Rotfläche auf
   und lässt das weisse HYROX-Logo erst richtig stehen. */
.cert{
  text-align:center;
  /* schliesst direkt an das dunkle Gemeinschafts-Kapitel an und blendet
     unten zurueck ins Seitenrot */
  background:linear-gradient(180deg,
    #0A0A0A 0%, #0A0A0A 64%,
    rgba(10,10,10,.9)  72%,
    rgba(10,10,10,.66) 79%,
    rgba(10,10,10,.28) 89%,
    rgba(10,10,10,0) 100%);
}
.cert .inner{ max-width:760px; }
.hyrox-logo{
  width:min(78vw,420px); height:auto; margin:0 auto clamp(36px,6vh,56px);
}
.cert .sub{ margin-left:auto; margin-right:auto; }

/* ---------- 5 · Region ---------- */
.region h2{ color:var(--ink); }
.region .sub{ margin-top:22px; }
.region-link{ margin-top:26px; padding:12px 0 10px; text-decoration:none; }

/* ---------- 3 · Der Raum ----------
   Der einzige Abschnitt ohne Foto. Statt Ueberschrift plus Fliesstext
   traegt ihn die Zahl: 400 laeuft ueber die volle Breite und bricht
   damit die sonst durchgehend gleiche Abschnittsform. */
.room .inner{ max-width:1100px; margin:0 auto; }
.room-figure{
  font-family:var(--font-brand); font-weight:800;
  font-size:clamp(112px,34vw,300px); line-height:.78;
  letter-spacing:-.02em;
  /* greift ueber den Seitenrand, wie die Hero-Zeile */
  margin:0 calc(var(--pad) * -0.34) clamp(10px,2vh,20px);
}
.room-figure span{
  font-size:.2em; font-weight:600; letter-spacing:.06em;
  vertical-align:.34em; margin-left:.1em; color:var(--faint);
}
.room .sub{ max-width:26em; }
.room-kit{
  list-style:none; margin-top:clamp(34px,6vh,54px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 clamp(18px,4vw,40px);
  border-top:1px solid var(--hairline);
}
.room-kit li{
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--font-brand); font-weight:600;
  font-size:clamp(14px,3.7vw,16px); letter-spacing:.05em;
  text-transform:uppercase;
}
/* ungerade Anzahl: der letzte Eintrag nimmt beide Spalten */
.room-kit li:last-child:nth-child(odd){ grid-column:1 / -1; }
@media (min-width:820px){
  .room-kit{ grid-template-columns:repeat(3,1fr); }
  .room-kit li:last-child:nth-child(odd){ grid-column:auto; }
}

/* ---------- 3b · Coaching ---------- */
.coach{ padding:clamp(90px,16vh,150px) var(--pad); }
.coach .inner{ max-width:1100px; margin:0 auto; }
.coach .sub{ max-width:30em; }

/* Belege in einer Zeile. Kurz genug, dass sie neben der Karte nicht mit
   ihr um Aufmerksamkeit streiten — sie stuetzen die Ueberschrift. */
.coach-facts{
  list-style:none; margin:clamp(26px,4vh,36px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 30px;
}
.coach-facts li{ display:flex; flex-direction:column; gap:2px; }
.coach-facts b{
  font-family:var(--font-brand); font-weight:800;
  font-size:clamp(19px,5vw,24px); letter-spacing:var(--track);
  text-transform:uppercase; line-height:1;
}
.coach-facts span{
  color:var(--faint); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase;
}

/* Die Karte. Ein Objekt auf der Flaeche, kein angeschnittenes Band:
   feste Rundung, Hochformat 4:5, das Namensschild liegt als mattierte
   Leiste im Bild. Das Schild deckt zugleich den Rest des Fremdlogos auf
   dem Shirt ab, das am unteren Rand des Ausschnitts noch anschneidet. */
.coach-card{
  position:relative; margin:clamp(38px,6vh,56px) 0 0;
  /* Gestapelt darf sie nicht die ganze Breite fressen — bei 768px waere
     sie sonst 672px breit und 840px hoch. */
  max-width:440px;
  border-radius:24px; overflow:hidden; isolation:isolate;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
}
/* Haarlinie als eigene Ebene: ein Rahmen am Element selbst wuerde vom
   overflow:hidden der Bildkanten angeschnitten. */
.coach-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(255,255,255,.14); pointer-events:none; z-index:2;
}
.coach-card img{
  display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover;
}
.cc-plate{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
  padding:14px 18px; border-radius:14px;
  background:rgba(10,8,8,.66);
  /* saturate deutlich unter 100: sonst zieht die Leiste das Blau des
     Shirts als blauen Block durch den Weichzeichner. */
  -webkit-backdrop-filter:blur(18px) saturate(40%) brightness(.6);
  backdrop-filter:blur(18px) saturate(40%) brightness(.6);
  border:1px solid rgba(255,255,255,.14);
}
.cc-name{
  display:block; font-family:var(--font-brand); font-weight:800;
  text-transform:uppercase; letter-spacing:var(--track);
  font-size:clamp(19px,5.2vw,24px); line-height:1;
}
.cc-role{
  display:block; margin-top:5px; color:rgba(255,255,255,.66);
  font-family:var(--font-brand); font-weight:600;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
/* Ohne backdrop-filter (aeltere Browser) wuerde die Leiste zu hell auf
   dem Bild liegen — dann lieber deckend. */
@supports not (backdrop-filter:blur(2px)){
  .cc-plate{ background:rgba(12,10,10,.82); }
}

@media (min-width:860px){
  /* Text links, Karte rechts. minmax(0,…) fuer die Textspalte, sonst
     darf sie nicht unter ihren Mindestinhalt. */
  .coach .inner{
    display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,34vw,420px);
    gap:clamp(40px,6vw,90px); align-items:center;
  }
  .coach-copy h2{ font-size:clamp(32px,4.6vw,58px); }
  .coach-card{ margin:0; max-width:none; }
}

/* Nur für Screenreader — nimmt keinen Platz ein, bleibt aber vorlesbar */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- 3c · Gemeinschaft ----------
   Waagrechte Bahn aus Hochformaten. Natives Scrollen (also Wischen auf
   dem Telefon, Shift-Rad und Tastatur am Rechner), am Rechner zusätzlich
   ziehbar über js/track.js. */
/* Dunkles Kapitel: Stimmen, Gemeinschaft und HYROX-Zertifizierung bilden
   zusammen den einzigen Bruch im Seitenrot. Vorher war nur die Zertifizierung
   schwarz — zehn von elf Bildschirmen liefen im selben Rot durch. Die
   Fotos gewinnen auf Schwarz spuerbar an Kraft. */
.community{
  padding:clamp(96px,16vh,150px) 0 clamp(70px,11vh,110px);
  background:linear-gradient(180deg,
    rgba(10,10,10,0) 0%,
    rgba(10,10,10,.34) 12%,
    rgba(10,10,10,.74) 23%,
    #0A0A0A 34%, #0A0A0A 100%);
}
.community .inner{ max-width:1100px; margin:0 auto; padding:0 var(--pad); }
.community .sub{ max-width:26em; }
.com-rail{
  margin-top:clamp(30px,5vh,48px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  /* Ohne das rastet die erste Karte bündig am Rand ein und schiebt die
     Bahn um den Seitenrand nach links — die Beschriftung liefe dann in
     die weiche Kante. */
  scroll-padding-inline:var(--pad);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Die Ränder laufen weich aus — so ist sichtbar, dass es weitergeht,
     und die Karten schieben sich sauber unter die Laufbahn. Der Verlauf
     endet genau am Seitenrand, damit die erste Karte voll steht. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--pad),
                     #000 calc(100% - var(--pad)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--pad),
             #000 calc(100% - var(--pad)),transparent 100%);
}
.com-rail::-webkit-scrollbar{ display:none; }
.com-rail:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
.com-rail.grabbing{ cursor:grabbing; }
.com-rail.grabbing .com-card{ pointer-events:none; }
.com-track{
  display:flex; width:max-content; list-style:none;
  gap:clamp(12px,2.4vw,20px); padding:0 var(--pad);
}
.com-card{
  flex:0 0 auto; width:clamp(186px,53vw,304px);
  scroll-snap-align:start;
  opacity:0; transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}
.com-rail.in .com-card{ opacity:1; transform:none; }
.com-card img{
  width:100%; height:auto; aspect-ratio:2/3; object-fit:cover;
  border-radius:14px;
}
/* Zitatkachel: dieselbe 2:3-Flaeche wie ein Foto, damit die Bahn ihren
   Takt behaelt. Bricht den Fotorhythmus, ohne eine zweite Wischflaeche
   zu brauchen — die Stimmen hatten vorher einen eigenen Abschnitt von
   fast einem ganzen Bildschirm. */
.com-quote blockquote{
  display:flex; align-items:center;
  aspect-ratio:2/3; border-radius:14px;
  padding:clamp(18px,4vw,26px);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.045);
}
.com-quote p{
  font-family:var(--font-brand); font-weight:600;
  font-size:clamp(14px,3.6vw,17px); line-height:1.36;
  letter-spacing:var(--track);
}
.com-quote[lang="en"] p,.com-quote blockquote[lang="en"] p{ hyphens:auto; }

.com-t{
  margin-top:12px; font-family:var(--font-brand); font-weight:600;
  font-size:15px; letter-spacing:.05em; text-transform:uppercase;
  line-height:1.25;
}
.com-t span{
  display:block; margin-top:2px; color:var(--faint);
  font-family:var(--font); font-weight:400; font-size:12px;
  letter-spacing:.04em; text-transform:none;
}
@media (min-width:900px){
  .com-rail{ cursor:grab; }
}

/* ---------- Einzugsgebiet-Karte ----------
   Kein Radar: die Orte stehen an ihrer echten Lage zueinander, die
   Kilometer sind aus den Koordinaten gerechnet. Dieselbe Sprache wie
   die Laufbahn — dünne weisse Linien, ein Mittelpunkt in Rot. */
.radar-wrap{ margin-top:clamp(40px,7vh,64px); max-width:560px; }
.mapv{ width:100%; height:auto; display:block; overflow:visible; }
/* Ab der Breite stehen Text und Karte nebeneinander — sonst klebt die
   Karte links und rechts daneben bleibt eine tote Fläche. */
@media (min-width:900px){
  .region .inner{
    display:grid;
    /* minmax(0,…) statt 1fr, sonst darf die Textspalte nicht unter ihren
       Mindestinhalt — dieselbe Falle wie im Konzept-Raster. */
    grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(40px,5vw,80px); align-items:center;
  }
  /* Die Ueberschrift misst sich hier an ihrer Spalte, nicht am Fenster.
     Bei 64px war "Liechtenstein." allein 449px breit — neben der Karte
     blieben 363px, und das Raster schob die Karte um 86px aus dem Satz
     heraus (bei 900px Fensterbreite 38px Querscrollen). */
  .region-copy h2{ font-size:clamp(34px,4.4vw,64px); }
  .radar-wrap{ margin-top:0; width:min(44vw,520px); max-width:none; }
}

/* Strahlen: die Region kommt hierher, nicht der Strahl sucht sie.
   Sie laufen von innen nach aussen aus, wenn der Abschnitt erscheint —
   dieselbe Geste wie beim Aufbau der Laufbahn. */
.mp-p line{
  stroke:rgba(255,255,255,.2); stroke-width:1;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * .07s);
}
.mp-p circle,.mp-p text{
  opacity:0; transition:opacity .5s ease;
  transition-delay:calc(var(--i,0) * .07s + .3s);
}
.radar-wrap.in .mp-p line{ stroke-dashoffset:0; }
.radar-wrap.in .mp-p circle,.radar-wrap.in .mp-p text{ opacity:1; }

.mp-places circle{ fill:rgba(255,255,255,.8); }
.mp-places text{
  fill:rgba(255,255,255,.9); font-family:var(--font-brand);
  font-size:14.5px; font-weight:600; letter-spacing:.07em;
}
.mp-km{ fill:rgba(255,255,255,.5); font-weight:500; letter-spacing:.1em; }

.mp-scale line{ stroke:rgba(255,255,255,.4); stroke-width:1; }
.mp-scale text{
  fill:rgba(255,255,255,.5); font-family:var(--font-brand);
  font-size:11.5px; font-weight:500; letter-spacing:.16em;
}

/* Mittelpunkt: dunkle Scheibe mit dem Emblem. Sie ist die einzige
   dunkle Fläche der Karte und zieht den Blick sofort dorthin. */
.mp-disc{ fill:#140202; stroke:rgba(255,255,255,.28); stroke-width:1; }
.mp-me{
  fill:#fff; font-family:var(--font-brand); font-weight:800;
  font-size:25px; letter-spacing:.16em;
}
.mp-me-sub{
  fill:rgba(255,255,255,.6); font-family:var(--font-brand); font-weight:500;
  font-size:11.5px; letter-spacing:.2em;
}

/* Auf schmalen Schirmen würden zehn Beschriftungen ineinanderlaufen.
   Die vier entlegensten treten dort ab; die Karte bleibt massstäblich. */
@media (prefers-reduced-motion:reduce){
  .mp-p line{ transition:none; stroke-dashoffset:0; }
  .mp-p circle,.mp-p text{ transition:none; opacity:1; }
}
@media (max-width:640px){
  .mp-drop{ display:none; }
  .mp-places text{ font-size:17.5px; }
  .mp-km{ font-size:15.5px; }
  .mp-me{ font-size:24px; }
  .mp-me-sub{ font-size:13px; }
  .mp-scale text{ font-size:14px; }
}

/* ---------- 5b · Ablauf ----------
   Die Schritte tragen dieselben Nummernplaketten wie die Zwischenzeiten
   der Laufbahn — der Besuch liest sich als Strecke mit Stationen. */
.flow{ padding:clamp(90px,15vh,140px) var(--pad); }
.flow .inner{ max-width:1100px; margin:0 auto; }
.flow .sub{ max-width:28em; }
.flow-cols{
  display:grid; gap:clamp(38px,6vh,60px);
  margin-top:clamp(34px,6vh,56px);
}
.flow-col h3{
  font-family:var(--font-brand); font-weight:800; text-transform:uppercase;
  font-size:clamp(17px,4.6vw,21px); letter-spacing:.06em;
  padding-bottom:14px; border-bottom:1px solid var(--hairline);
}
.flow-col ol{ list-style:none; counter-reset:step; }
.flow-col li{
  counter-increment:step;
  display:grid; grid-template-columns:auto 1fr; gap:0 16px;
  padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.flow-col li::before{
  content:counter(step,decimal-leading-zero);
  grid-row:1 / span 2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:20px; margin-top:2px;
  border:1px solid rgba(255,255,255,.34); border-radius:3px;
  font-family:var(--font-brand); font-weight:600;
  font-size:10.5px; letter-spacing:.14em; color:rgba(255,255,255,.8);
}
.flow-col li b{
  font-family:var(--font-brand); font-weight:600;
  font-size:clamp(15px,4vw,17px); letter-spacing:.02em;
}
.flow-col li span{
  color:var(--faint); font-size:clamp(13.5px,3.6vw,15px);
  line-height:1.6; margin-top:3px;
}
@media (min-width:820px){
  .flow-cols{ grid-template-columns:1fr 1fr; gap:clamp(44px,5vw,80px); }
}

/* ---------- 5c · FAQ ---------- */
.faq{ padding:clamp(90px,16vh,150px) var(--pad); }
/* linke Kante auf einer Linie mit „Der Raum" und „Region" */
.faq .inner{ max-width:1100px; margin:0 auto; }
.faq details{ max-width:760px; }
.faq h2{ margin-bottom:clamp(28px,5vh,44px); }
.faq details{ border-bottom:1px solid var(--hairline); }
.faq details:first-of-type{ border-top:1px solid var(--hairline); }
.faq summary{
  font-family:var(--font-brand);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  cursor:pointer; list-style:none; padding:20px 0;
  font-size:clamp(16px,4.4vw,19px); font-weight:600; letter-spacing:var(--track);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:0 0 auto;
  font-size:22px; font-weight:400; line-height:1;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{
  color:var(--sub); font-size:clamp(15px,4vw,16.5px); line-height:1.65;
  padding:0 0 22px; margin-top:-4px; max-width:44em;
}

/* ---------- 6 · CTA / Ziellinie ---------- */
.cta{
  position:relative; overflow:hidden; text-align:center;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-bottom:clamp(140px,22vh,220px);
}
.cta-media{
  position:absolute; inset:0; z-index:0;
  /* über cover hinaus skaliert, damit die Figur den Abschluss trägt */
  background:url('../assets/cta-stance.jpg') center 44%/150% auto no-repeat;
  background-image:image-set(url('../assets/cta-stance.webp') type('image/webp'),
                             url('../assets/cta-stance.jpg')  type('image/jpeg'));
  /* Bild- und Seitenrot sind dasselbe Rot — die Figur taucht dadurch
     oben und unten nahtlos in die Seite ein, ohne sichtbare Bildkante */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
}
.cta .inner{ position:relative; z-index:1; max-width:760px; }
.h2-star{ font-size:.42em; margin-left:.3em; vertical-align:.34em; }
.cta h2,.cta .cta-note{ text-shadow:0 2px 20px rgba(0,0,0,.45); }
.button{
  display:inline-block; margin-top:clamp(36px,6vh,52px);
  background:rgba(14,14,15,.5); color:#fff; text-decoration:none;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18); border-radius:16px;
  font-family:var(--font-brand);
  font-size:13.5px; font-weight:600; letter-spacing:.04em;
  padding:14px 26px;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.button:hover{ background:rgba(24,24,26,.6); border-color:rgba(255,255,255,.35); }
.button:active{ transform:scale(.98); }
.cta-note{ margin-top:18px; color:var(--faint); font-size:13px; letter-spacing:.04em; }
.cta-note a{
  display:inline-block; margin-left:10px; padding:10px 0; color:var(--sub);
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4);
}
.cta-note a:hover{ color:#fff; border-color:#fff; }
/* Nimmt die Hemmung vor dem Klick: Dauer und Unverbindlichkeit */
.cta-micro{
  margin-top:14px; color:var(--sub);
  font-family:var(--font-brand); font-size:11.5px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.hero-micro{ text-shadow:0 1px 12px rgba(0,0,0,.55); }
.cert .button{ margin-top:clamp(34px,5vh,46px); }

/* ---------- Footer ----------
   Wortmarke, dann die Adresse als eigentliche Botschaft eines lokalen
   Studios, zwei Handlungen, dann erst die Details. */
.site-foot{
  border-top:1px solid var(--hairline);
  padding:clamp(52px,9vh,84px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 72px);
  max-width:1100px; margin:0 auto;
}
/* Wortmarke auf volle Spaltenbreite — der letzte grosse Auftritt */
.foot-mark{
  font-family:var(--font-brand); font-weight:800;
  text-transform:uppercase; letter-spacing:-.005em; line-height:.82;
  font-size:min(calc(30.8vw - 20px),318px);
  margin:0 0 clamp(30px,5vh,48px) -0.035em;
  white-space:nowrap;
}
.foot-mark .gx{ font-size:.13em; margin-left:.1em; vertical-align:2.9em; }

.foot-place{ border-top:1px solid var(--hairline); padding-top:clamp(30px,5vh,46px); }
.foot-place address{ font-style:normal; }
/* Die Adresse ist bei einem lokalen Studio die wichtigste Zeile */
.foot-adr{
  display:inline-block; text-decoration:none; color:var(--ink);
  font-family:var(--font-brand); font-weight:800;
  text-transform:uppercase; letter-spacing:var(--track); line-height:.98;
  font-size:clamp(27px,7vw,48px);
  transition:opacity .2s;
}
.foot-adr span{ display:block; }
.foot-adr:hover{ opacity:.72; }
.foot-way{
  margin-top:18px; color:var(--sub);
  font-size:clamp(14.5px,3.8vw,16px); line-height:1.7;
}
.foot-act{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px clamp(18px,3vw,30px); margin-top:clamp(26px,4vh,38px);
}
.foot-act .button{ margin-top:0; }
.foot-tel{
  font-family:var(--font-brand); font-weight:600;
  font-size:clamp(15px,4vw,18px); letter-spacing:.04em;
  text-decoration:none; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.4);
  transition:border-color .2s,opacity .2s;
}
.foot-tel:hover{ border-color:#fff; opacity:.8; }

.foot-links{
  display:flex; flex-wrap:wrap; gap:4px clamp(20px,3.5vw,36px);
  margin-top:clamp(34px,6vh,54px);
  padding-top:clamp(22px,3.5vh,32px);
  border-top:1px solid var(--hairline);
}
.foot-links a{
  display:inline-block; padding:11px 0;
  color:var(--faint); text-decoration:none;
  font-family:var(--font-brand); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s;
}
.foot-links a:hover{ color:var(--ink); }

.foot-sign{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-top:clamp(34px,6vh,54px);
}
.foot-sign .emblem{ width:54px; height:54px; }
.foot-graf{
  font-family:var(--font-display);
  font-size:clamp(16px,4.4vw,22px); color:rgba(255,255,255,.82);
}

/* ---------- Sticky-CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:0 var(--pad) calc(env(safe-area-inset-bottom,0px) + 46px);
  display:flex; justify-content:center;
  transform:translateY(130%); opacity:0;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s;
  pointer-events:none;
}
.sticky-cta.show{ transform:none; opacity:1; pointer-events:auto; }
.sticky-cta .button{
  margin-top:0; width:100%; max-width:520px; text-align:center;
  background:rgba(14,14,15,.7);
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  /* Hochformat auf breitem Screen: der Ausschnitt muss tiefer sitzen,
     sonst steht die Figur nur noch am unteren Rand */
  .hero-media{ background-position:center 40%,center; }
  .hero-copy{ padding-top:calc(env(safe-area-inset-top,0px) + 150px); }

  /* Auf breitem Screen schneidet das Hochformat ohnehin stark zu —
     hier reicht cover, sonst bliebe nur noch ein Ausschnitt der Figur */
  .cta-media{ background-size:cover; background-position:center 32%; }

  .hero-copy,.block-copy{ padding-left:clamp(40px,7vw,96px); }
  /* minmax(0,1fr) statt 1fr: sonst darf die Spalte nicht unter ihre
     Mindestbreite schrumpfen und "Koerpermessung." bei voller Groesse
     sprengt zwischen 900 und 1090px das Raster. */
  .concept{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* In zwei Spalten steht nur die halbe Breite zur Verfuegung — die
     Blocktitel muessen sich daran orientieren, nicht am Fenster. */
  .block-copy h2{ font-size:clamp(30px,4.6vw,64px); }
  /* Drei Bloecke gehen in zwei Spalten nie auf; der dritte laege sonst
     allein neben einer leeren Haelfte. Er nimmt die volle Breite. */
  .concept .block:last-child{ grid-column:1 / -1; }
  .concept .block:last-child .block-copy h2{ font-size:clamp(30px,6.4vw,64px); }
  .concept .block{ min-height:92vh; }

  /* Navigation: drei Anker plus CTA */
  .nav-links{
    display:flex; align-items:center; gap:clamp(20px,2.6vw,34px);
    margin-left:auto; margin-right:6px;
  }
  .nav-links a{
    font-family:var(--font-brand);
    font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(255,255,255,.85); text-decoration:none;
    padding:12px 7px; border-bottom:1px solid transparent;
    transition:color .2s,border-color .2s;
  }
  .nav-links a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.6); }

  /* Beleg nebeneinander statt untereinander */
  .proof dl{ grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--hairline); }
  .proof dl > div{
    flex-direction:column; align-items:flex-start; gap:8px;
    border-bottom:0; padding:22px clamp(18px,2.5vw,34px) 24px;
    border-left:1px solid var(--hairline);
  }
  .proof dl > div:first-child{ border-left:0; padding-left:0; }

}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .trk-glow,.trk-finish.hit{ animation:none; }
  .fx{ transition:none; opacity:1; transform:none; }
  .sticky-cta{ transition:none; }
}

/* ---------- Shop-Seite (shop.html) ----------
   Der Rahmen ist FORCE, der Inhalt kommt von TAC. Bewusst eine eigene
   Seite, damit die Startseite ihre eine Handlung behält. */
.shop-head{ padding:calc(env(safe-area-inset-top,0px) + 128px) var(--pad) clamp(28px,5vh,44px); }
.shop-head .inner{ max-width:1100px; margin:0 auto; }
.shop-head h1{ font-size:clamp(44px,10vw,84px); }
.shop-frame{
  padding:0 var(--pad) clamp(60px,10vh,110px);
  max-width:1180px; margin:0 auto;
}
.shop-frame iframe{
  display:block; width:100%; min-height:70vh;
  margin:0; padding:0; border:0; border-radius:6px;
  background:#fff;            /* der Shop bringt sein eigenes Weiss mit */
  position:relative; z-index:1;
}
.shop-frame iframe[hidden]{ display:none; }
.shop-backdrop{
  position:fixed; inset:0; z-index:70;
  background:rgba(8,4,4,.55); pointer-events:none;
}
.shop-fallback{
  text-align:center; padding:clamp(48px,9vh,90px) var(--pad);
  border:1px solid var(--hairline); border-radius:14px;
}
.shop-fallback[hidden]{ display:none; }
.shop-fallback-title{
  font-family:var(--font-brand); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,5vw,28px); letter-spacing:var(--track); line-height:1.05;
}
.shop-fallback-note{
  margin:14px auto 0; max-width:34em;
  color:var(--sub); font-size:15px; line-height:1.65;
}

/* ---------- Buchungs-Overlay (Acuity nativ) ---------- */
html.bk-open, html.bk-open body{ overflow:hidden; }
.booking{
  position:fixed; inset:0; z-index:90; background:var(--bg);
  display:flex; flex-direction:column;
}
.booking[hidden]{ display:none; }
.bk-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 22px) var(--pad) 16px;
  border-bottom:1px solid var(--hairline);
}
.bk-brand{ font-family:var(--font-brand); font-weight:600; font-size:14px; letter-spacing:.34em; text-transform:uppercase; }
.bk-close{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:none; border:1px solid var(--hairline); color:var(--ink); font-size:14px;
}
.bk-close:hover{ border-color:#fff; opacity:.8; }
.bk-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.bk-inner{
  max-width:640px; margin:0 auto;
  padding:clamp(28px,5vh,48px) var(--pad) 140px;
}
.booking h3{
  font-family:var(--font-brand); font-weight:600; letter-spacing:var(--track); line-height:1.1;
  font-size:clamp(26px,7vw,40px); margin-bottom:22px;
}
.bk-note{ color:var(--faint); font-size:13px; line-height:1.7; margin-top:22px; }
/* Preis-Hinweis im Bestätigungsschritt: nachgeordnet, kein Kasten,
   keine Auszeichnung — nur durch eine Haarlinie abgesetzt. */
.bk-price{
  margin-top:26px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.6); font-size:12.5px; line-height:1.7;
}
.bk-price a{
  display:block; margin-top:10px; width:fit-content;
  color:rgba(255,255,255,.85); text-underline-offset:3px;
}
.bk-price a::after{ content:" →"; }
.bk-sub{
  color:var(--faint); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; margin:24px 0 10px;
}
.bk-chosen{ color:var(--sub); font-size:14px; margin:-8px 0 8px; }

/* Termintyp-Liste */
.bk-list{ border-top:1px solid var(--hairline); }
.bk-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--hairline);
  color:var(--ink); padding:20px 0; font-family:var(--font);
}
.bk-row .t{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
.bk-row .t em{
  display:block; font-style:normal; font-weight:400;
  color:var(--sub); font-size:13.5px; margin-top:4px; line-height:1.5;
}
.bk-row .d{ color:var(--faint); font-size:12px; letter-spacing:.08em; white-space:nowrap; }
.bk-row:hover .t{ opacity:.75; }

/* Tage & Zeiten */
.bk-days{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(var(--pad)*-1); padding:2px var(--pad) 4px;
}
.bk-days::-webkit-scrollbar{ display:none; }
.bk-day{
  flex:0 0 auto; min-width:58px; padding:10px 8px; cursor:pointer; text-align:center;
  background:none; border:1px solid var(--hairline); border-radius:10px;
  color:var(--ink); font-family:var(--font); font-size:15px; font-weight:600;
}
.bk-day span{
  display:block; font-size:10px; font-weight:500; color:var(--faint);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px;
}
.bk-day[aria-pressed="true"]{ background:#fff; border-color:#fff; color:var(--bg); }
.bk-day[aria-pressed="true"] span{ color:rgba(156,18,14,.7); }
.bk-timegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bk-time{
  padding:13px 4px; cursor:pointer; text-align:center;
  background:none; border:1px solid var(--hairline); border-radius:10px;
  color:var(--ink); font-family:var(--font); font-size:15px; font-weight:500;
}
.bk-time span{ display:block; font-size:10px; color:var(--faint); margin-top:3px; }
.bk-time[aria-pressed="true"]{ background:#fff; border-color:#fff; color:var(--bg); }
.bk-time[aria-pressed="true"] span{ color:rgba(156,18,14,.7); }

/* Formular */
.bk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.bk-field{ display:block; margin-bottom:22px; }
.bk-field span{
  display:block; font-size:11px; font-weight:500; color:var(--faint);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px;
}
.bk-field input{
  width:100%; background:none; border:0; border-bottom:1px solid var(--hairline);
  color:var(--ink); font-family:var(--font); font-size:16px; padding:10px 0 12px;
  border-radius:0;
}
.bk-field input:focus{ outline:none; border-bottom-color:#fff; }
.bk-field em{ display:none; font-style:normal; color:#fff; font-weight:600; font-size:12px; margin-top:6px; }
.bk-field.err input{ border-bottom-color:#fff; }
.bk-field.err em{ display:block; }
.bk-goal-label{
  font-size:11px; font-weight:500; color:var(--faint);
  letter-spacing:.12em; text-transform:uppercase; margin:6px 0 10px;
}
.bk-goal-label span{ text-transform:none; letter-spacing:0; }
.bk-goals{ display:flex; flex-wrap:wrap; gap:8px; }
.bk-goal{
  cursor:pointer; background:none; border:1px solid var(--hairline); border-radius:999px;
  color:var(--sub); font-family:var(--font); font-size:13px; padding:10px 16px;
}
.bk-goal[aria-pressed="true"]{ background:#fff; border-color:#fff; color:var(--bg); }
.bk-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Zusammenfassung */
.bk-summary{ border-top:1px solid var(--hairline); }
.bk-summary div{
  display:flex; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--hairline);
}
.bk-summary dt{
  color:var(--faint); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; padding-top:3px;
}
.bk-summary dd{ font-size:15px; text-align:right; }
.bk-done-copy{ color:var(--sub); font-size:15px; line-height:1.7; margin:-6px 0 24px; }

/* Fehler / Skeleton */
.bk-fail{
  border:1px solid rgba(255,255,255,.4); border-radius:12px;
  padding:16px; margin-top:16px; font-size:14px; line-height:1.7;
}
.bk-fail p{ margin-bottom:6px; }
.bk-fail button{
  background:none; border:0; padding:0; cursor:pointer; margin-right:18px;
  color:#fff; font-family:var(--font); font-size:13px; font-weight:600;
  text-decoration:underline; text-underline-offset:4px;
}
.bk-fail a{ color:#fff; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.bk-skel{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.bk-skel i{
  height:48px; border-radius:10px;
  background:linear-gradient(100deg,rgba(255,255,255,.10) 40%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.10) 60%);
  background-size:200% 100%; animation:bkskel 1.1s linear infinite;
}
@keyframes bkskel{ to{ background-position-x:-200%; } }

/* Fusszeile des Overlays */
.bk-foot{
  display:flex; gap:12px; align-items:center;
  padding:12px var(--pad) calc(env(safe-area-inset-bottom,0px) + 18px);
  border-top:1px solid var(--hairline); background:var(--bg);
}
.bk-foot .bk-back{
  flex:0 0 auto; cursor:pointer; background:none; border:0;
  color:var(--sub); font-family:var(--font); font-size:13px; font-weight:500;
  padding:14px 10px;
}
.bk-foot .bk-back:hover{ color:var(--ink); }
.bk-foot .bk-next{ flex:1; margin-top:0; text-align:center; cursor:pointer; font-family:var(--font); }
.bk-foot .bk-next:disabled{ opacity:.35; cursor:not-allowed; }
.bk-foot [hidden]{ display:none !important; }
.bk-foot .bk-next.busy{ opacity:.75; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .bk-skel i{ animation:none; }
}