/* ==========================================================================
   Tom's Powerhouse – Stylesheet
   Design: "Hardcore-Klassiker" – Schwarz, Kreideweiß, Rot als Akzent,
   durchgehend abgerundete Formen und die leicht runde Schrift Rubik
   ========================================================================== */

/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-latin-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  /* "optional" statt "swap": die Schrift ist per <link rel=preload> schon unterwegs, bevor
     dieser Block überhaupt greift. Käme sie doch später an, tauscht der Browser sie NICHT
     mitten in der Einblend-Animation aus (das wäre genau der Ruckler) – dann bleibt für
     diesen Seitenaufruf einfach die Ersatzschrift stehen, unauffällig und ruhig. */
  font-display: optional;
}
/* Schriftzug neben dem Logo – ähnlich der handgezeichneten Logo-Schrift */
@font-face {
  font-family: "Lilita One";
  src: url("/assets/fonts/lilitaone-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

/* ---------- Design-Tokens ---------- */
:root {
  --c-black: #0b0b0b;
  --c-coal: #121212;
  --c-graphite: #1b1b1b;
  --c-steel: #2a2a2a;
  --c-line: #333;
  --c-chalk: #f2efe9;
  --c-text: #e6e3dd;
  --c-mute: #a8a49d;
  --c-red: #b8322c;          /* Flächen/Buttons – mit weißer Schrift */
  --c-red-dark: #962a25;
  --c-red-bright: #e0625a;   /* Rot als Schriftfarbe auf Dunkel */
  --c-star: #f5b301;
  --c-open: #3ddc84;         /* Geöffnet-Status: der Punkt beim aktuellen Tag */

  --f-head: "Rubik", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(104px, 14vw, 220px); /* großzügig – jeder Abschnitt bekommt Luft */
  --header-h: 72px;
  --radius-sm: 12px;     /* Eingabefelder, kleine Flächen */
  --radius: 18px;        /* Karten und Kästen */
  --radius-lg: 24px;     /* Fotos und große Flächen */
  --radius-pill: 999px;  /* Buttons, Chips, Plaketten */
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.18, 1);
  --ease-spring: cubic-bezier(0.3, 1.18, 0.5, 1);
  --shadow-lift: 0 34px 60px -22px rgba(0, 0, 0, 0.85), 0 18px 40px -24px rgba(242, 239, 233, 0.55);
}

/* Winkel für den umlaufenden Rahmen der hervorgehobenen Preiskarte */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- Reset / Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Dezente Filmkörnung über allem – ohne externe Datei */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,
picture,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
.page-hero__media picture,
.gallery picture {
  height: 100%;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  a:hover {
    color: var(--c-chalk);
  }
}
p {
  margin: 0 0 1em;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--c-red-bright);
  outline-offset: 3px;
}
::selection {
  background: var(--c-red);
  color: #fff;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1000;
  background: var(--c-red);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Typografie ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--f-head);
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--c-chalk);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* nur lange Wörter trennen, mindestens 4 Buchstaben vor und nach dem Trennstrich */
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}
.lead,
.prose {
  overflow-wrap: break-word;
}
a[href^="mailto:"] {
  overflow-wrap: anywhere;
}
h2 {
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem);
}
h3 {
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--f-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red-bright);
}
.eyebrow::before {
  content: "";
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--c-red);
}
.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--c-text);
  max-width: 62ch;
}
.text-red {
  color: var(--c-red-bright);
}
.muted {
  color: var(--c-mute);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
  position: relative;
}
/* Dunkelgraue Abschnitte blenden oben und unten weich ins Schwarz über – keine harten Kanten */
.section--coal,
.section--graphite {
  --blend: clamp(72px, 10vw, 180px);
  background: linear-gradient(180deg, var(--c-black), var(--c-coal) var(--blend), var(--c-coal) calc(100% - var(--blend)), var(--c-black));
}
.section--graphite {
  background: linear-gradient(180deg, var(--c-black), var(--c-graphite) var(--blend), var(--c-graphite) calc(100% - var(--blend)), var(--c-black));
}
main > .section--coal:last-of-type {
  background: linear-gradient(180deg, var(--c-black), var(--c-coal) var(--blend));
}
.section__head {
  max-width: 760px;
  margin-bottom: clamp(48px, 7vw, 104px);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center .eyebrow {
  justify-content: center;
}
.split {
  display: grid;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--wide-text {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .split--reverse > :first-child {
    order: 2;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--f-head);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease),
    background-size 0.45s var(--ease-out), box-shadow 0.35s var(--ease-out), translate 0.45s var(--ease-out),
    scale 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.btn:active {
  scale: 0.97;
}
.btn--primary {
  background: var(--c-red);
  color: #fff;
}
.btn--primary:active {
  filter: brightness(0.9);
}
.btn--ghost {
  border-color: rgba(242, 239, 233, 0.55);
  color: var(--c-chalk);
  background-image: linear-gradient(var(--c-chalk), var(--c-chalk));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
}
.btn--light {
  background: var(--c-chalk);
  color: var(--c-black);
}
@media (hover: hover) {
  .btn--primary:hover {
    color: #fff;
    filter: brightness(1.2);
    background-color: rgba(255, 255, 255, 0.1);
  }
  .btn--ghost:hover {
    border-color: var(--c-chalk);
    background-size: 100% 100%;
    color: var(--c-black);
  }
  .btn--light:hover {
    background: #fff;
    color: var(--c-black);
  }
}
.btn--block {
  width: 100%;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-red-bright);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
@media (hover: hover) {
  .link-arrow:hover {
    color: var(--c-chalk);
  }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), translate 0.45s var(--ease-out),
    height 0.35s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid,
.site-header--solid {
  background: rgba(11, 11, 11, 0.94);
  border-bottom-color: var(--c-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-chalk);
}
.brand__mark {
  display: block;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(242, 239, 233, 0.12), 0 6px 18px rgba(0, 0, 0, 0.5);
}
/* Schriftzug „TOM’S POWERHOUSE“ neben dem Logo: ähnlich der handgezeichneten Logo-Schrift, aber zurückhaltend klein */
.brand__name {
  font-family: "Lilita One", var(--f-head);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
@media (min-width: 1140px) {
  .brand__name {
    font-size: 1.12rem;
  }
}
/* sehr schmale Handys (320 px): Logo, Schriftzug und Menü-Knopf passen nebeneinander */
@media (max-width: 359px) {
  .site-header__inner {
    gap: 12px;
  }
  .brand {
    gap: 10px;
  }
  .brand__mark {
    width: 44px;
    height: 44px;
  }
  .brand__name {
    font-size: 0.92rem;
  }
}
/* Fenster noch schmaler als ein Handy-Display: Schriftzug ausblenden, Logo und
   Menü-Knopf bleiben so in jeder erreichbaren Fensterbreite nutzbar */
@media (max-width: 299px) {
  .brand__name {
    display: none;
  }
}
.nav {
  display: none;
}
.nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
}
.nav__link {
  font-family: var(--f-head);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text);
  display: inline-block;
  position: relative;
  padding: 8px 0;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-red);
  scale: 0 1;
  transform-origin: right center;
  transition: scale 0.4s var(--ease-out);
}
.nav__link.is-active,
.nav__link[aria-current="page"] {
  color: var(--c-chalk);
}
.nav__link.is-active::after,
.nav__link[aria-current="page"]::after {
  scale: 1 1;
  transform-origin: left center;
}
@media (hover: hover) {
  .nav__link:hover {
    color: var(--c-chalk);
  }
  .nav__link:hover::after {
    scale: 1 1;
    transform-origin: left center;
  }
}
.header-cta {
  display: none;
}
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  background: none;
  border: 0;
  color: var(--c-chalk);
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.menu-toggle__bars::before {
  top: -8px;
}
.menu-toggle__bars::after {
  top: 8px;
}
.menu-open .menu-toggle__bars {
  background: transparent;
}
.menu-open .menu-toggle__bars::before {
  transform: translateY(8px) rotate(45deg);
}
.menu-open .menu-toggle__bars::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobiles Menü */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  background: var(--c-black);
  padding: 32px var(--gutter) 120px;
  overflow-y: auto;
  display: none;
}
.menu-open .mobile-menu {
  display: block;
}
.menu-open {
  overflow: hidden;
}
.mobile-menu__list a[aria-current="page"] {
  color: var(--c-red-bright);
}
.mobile-menu__list {
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.mobile-menu__list a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-head);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-chalk);
}
.mobile-menu__cta {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

@media (min-width: 1140px) {
  .nav,
  .header-cta {
    display: block;
  }
  .menu-toggle,
  .mobile-menu {
    display: none !important;
  }
  .header-cta .btn {
    min-height: 44px;
    padding: 10px 22px;
    font-size: 0.82rem;
  }
}

/* ---------- Hero (Startseite) ----------
   Minimal wie ein Produkt-Auftritt: große, dicht gesetzte Überschrift „Bock [Scheibe] auf /
   Kraftsport?“ – Toms Logo sitzt als schräg liegende 3D-Scheibe (wie eine Hantelscheibe) mit
   Kante, Lichtreflex und Schlagschatten in der Lücke der ersten Zeile. Beim Scrollen richtet sie
   sich auf, zieht in einem Bogen nach rechts und verschwindet hinter dem Wort „Kraft“; die
   Buttons weichen nach links aus (Weg und Werte rechnet main.js). */
.hero {
  --hfs: clamp(2.2rem, 13vw - 4px, 5rem);  /* Schriftgröße der Überschrift */
  --coin: min(60vw, 250px);               /* Durchmesser der Scheibe */
  --thick: calc(var(--coin) * 0.075);     /* Dicke der Scheibe */
  --runway: clamp(260px, 60svh, 720px);   /* Leerstrecke unter dem Hero: so lang reist die Scheibe
                                             allein, bevor der erste Abschnitt auftaucht */
  position: relative;
  z-index: 1; /* die Scheibe ragt unten aus dem Hero heraus – ohne das hier würde der nächste, leere Abschnittsbereich ihr die Maus-Ereignisse wegschnappen */
  display: flex;
  align-items: center;
  min-height: calc(100svh + var(--runway));
  padding-bottom: var(--runway);
  background: var(--c-black);
  overflow-x: clip;
  isolation: isolate;
}
.hero__content {
  position: relative;
  width: 100%;
  padding-top: calc(var(--header-h) + clamp(24px, 5svh, 64px));
  padding-bottom: clamp(40px, 8svh, 96px);
  text-align: center;
}
.hero__stage {
  position: relative;
}
.hero__kicker {
  justify-content: center;
  margin-bottom: clamp(10px, 1.8svh, 22px);
  padding-left: 0.28em; /* Sperrung endet mit Leerraum – so steht der Text exakt mittig */
  color: var(--c-mute);
  letter-spacing: 0.28em;
}
.hero__kicker::before {
  display: none;
}
.hero__title {
  position: relative;
  z-index: 5;
  margin: 0 0 clamp(28px, 5svh, 56px);
}
.hero__title-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.22em;
  font-size: var(--hfs);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: #fff;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.hero__line {
  display: block;
  flex: 0 0 100%;
}
.hero__title-main .text-red {
  display: block;
  margin-inline: auto;
}
/* Platz für die Scheibe unter „Kraftsport?“ – sie hängt von unten ein Stück in die Buchstaben
   hinein (etwa die untere Hälfte der mittleren Buchstaben) und ragt nach unten heraus */
.hero__slot {
  position: relative;
  display: block;
  flex: 0 0 100%;
  height: var(--coin);
  margin-top: -0.42em;
}
.hero .btn-row {
  position: relative;
  z-index: 6;
  justify-content: center;
}
.hero .open-status {
  display: none;
}
.hero__title {
  margin-bottom: 0;
}
/* Handy: Schrift ist im Verhältnis zur Scheibe klein – sie hängt nur ein kleines Stück hinein */
@media (max-width: 599px) {
  .hero__slot {
    margin-top: -0.2em;
  }
}
/* ab Tablet: große Überschrift, Zeilen eng beieinander */
@media (min-width: 600px) {
  .hero {
    --hfs: min(11.2vw, 18svh, 13.5rem);
    --coin: calc(var(--hfs) * 2.1);
  }
  .hero__title {
    margin-inline: calc(50% - 50vw + 2vw);
  }
  .hero__kicker {
    margin-bottom: calc(var(--hfs) * 0.2);
  }
  .hero__title-main {
    row-gap: 0.1em;
  }
}
@media (max-width: 519px) {
  .hero .btn-row .btn {
    flex: 1 1 100%;
  }
}
@media (max-width: 359px) {
  .hero__kicker {
    padding-left: 0.18em;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
  }
}

/* Erster Abschnitt nach dem Hero: Inhalt rückt tiefer, damit unter der angehaltenen Scheibe
   (sie liegt über „Kraft“) genug Luft bleibt */
.hero + .section {
  padding-top: calc(var(--section-y) + clamp(90px, 13vw, 220px));
}

/* „Kraft“ im nächsten Abschnitt liegt VOR der Scheibe: sie verschwindet dahinter und
   schimmert durch die Buchstaben */
.hero ~ .section .bg-word {
  color: rgba(13, 13, 13, 0.55);
  -webkit-text-stroke-color: rgba(242, 239, 233, 0.16);
}

/* Die 3D-Scheibe */
.hero__coin {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: var(--coin);
  height: var(--coin);
  margin: calc(var(--coin) / -2) 0 0 calc(var(--coin) / -2);
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  contain: layout;
}
.hero__coin,
.coin-land,
.hero__coin-shadow,
.coin-float,
.coin,
.coin__edge,
.coin__face {
  display: block;
}
.coin-land {
  position: absolute;
  inset: 0;
  perspective: 1800px;
}
.coin-float,
.coin,
.coin__edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* gerade von vorn wie eine flache Scheibe – die Tiefe kommt nur über Lichtkante und weichen Schatten */
.coin {
  transform: none;
  transition: transform 0.6s var(--ease-out);
}
.coin__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.coin__face--front {
  transform: translateZ(calc(var(--thick) / 2));
  background: #1b1b1b;
}
.coin__face--front img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Lichtreflex und leichte Wölbung am Rand */
.coin__face--front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.38) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), inset 0 -22px 44px rgba(0, 0, 0, 0.5), inset 0 12px 26px rgba(255, 255, 255, 0.07);
}
.coin__face--back {
  transform: rotateY(180deg) translateZ(calc(var(--thick) / 2));
  background: radial-gradient(circle at 40% 30%, #2c2c2c, #111 70%);
}
/* Kante: viele dünne Scheiben hintereinander, oben vom Licht getroffen */
.coin__edge i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(170deg, #6a6a6a 0%, #2e2e2e 28%, #161616 58%, #0b0b0b 100%);
  transform: translateZ(calc(var(--thick) / 2 - var(--thick) * var(--i) / var(--n)));
}
/* Schlagschatten – fällt auf die Schrift dahinter */
.hero__coin-shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0));
  opacity: 0.8;
  filter: blur(18px);
  translate: 0 calc(var(--coin) * 0.07);
  scale: 1.02 0.98;
}
/* Dezente Reaktion auf Mauskontakt: die Scheibe rückt minimal näher und etwas nach oben, ganz gerade – kein Kippen zur Seite. Nur auf Geräten mit Maus. */
@media (hover: hover) {
  .hero__coin {
    pointer-events: auto;
  }
  .hero__coin:hover .coin {
    transform: translateY(-6px) translateZ(20px) scale(1.03);
  }
}

/* Quick-Facts unter dem Hero */
.facts {
  background: var(--c-black);
  padding-bottom: clamp(8px, 2vw, 24px);
}
.facts__list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  padding: 4px clamp(20px, 3vw, 32px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-graphite);
  color: var(--c-chalk);
}
.facts__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-head);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
}
.facts__item:last-child {
  border-bottom: 0;
}
.facts__item svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--c-red-bright);
}
@media (min-width: 700px) {
  .facts__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
  }
  .facts__item:nth-last-child(2) {
    border-bottom: 0;
  }
}
@media (min-width: 1100px) {
  .facts__list {
    grid-template-columns: repeat(4, 1fr);
  }
  .facts__item {
    border-bottom: 0;
    padding: 26px 0;
  }
}

/* ---------- USP-Kacheln ---------- */
.usp-grid {
  list-style: none;
  display: grid;
  gap: 16px;
}
@media (min-width: 700px) {
  .usp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .usp-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.usp {
  background: var(--c-coal);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
}
.section--coal .usp {
  background: var(--c-graphite);
}
.usp__icon {
  width: 44px;
  height: 44px;
  color: var(--c-red-bright);
  margin-bottom: 22px;
}
.usp h3 {
  margin-bottom: 10px;
}
.usp p {
  margin: 0;
  color: var(--c-mute);
}

/* ---------- Startseite „Warum“: der Trainingsweg ----------
   Im Stil der Anfahrts-Karte: Erst zeichnet sich eine dunkle „Straße“, dann läuft beim
   Runterscrollen eine gestrichelte Route von Punkt zu Punkt. Jeder erreichte Punkt wird
   abgehakt (.is-lit), seine Karte leuchtet auf und das Symbol zeichnet sich. Weg und
   Fortschritt (--route-t, --route-d) setzt main.js. Ohne JS / „Bewegung reduzieren“: alles
   abgehakt. Desktop: Zickzack von oben nach unten, Handy und Tablet: die Punkte sitzen links
   an einer senkrechten Linie. */
.usp-route {
  --route-t: 1;
  --route-d: 1;
  --usp-pad: clamp(28px, 3vw, 40px);
  position: relative;
}
.usp-route__svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.usp-route__track,
.usp-route__draw,
.usp-route__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* die „Straße“ */
.usp-route__track {
  stroke: #232323;
  stroke-width: 12;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - var(--route-t));
  opacity: clamp(0, var(--route-t) * 40, 1);
}
/* Maske, die die Route entlang des Wegs freilegt */
.usp-route__draw {
  stroke: #fff;
  stroke-width: 34;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - var(--route-d));
}
/* die Route selbst: gestrichelt und in Bewegung, wie auf der Karte */
.usp-route__line {
  stroke: var(--c-red);
  stroke-width: 3;
  stroke-dasharray: 12 10;
  animation: usp-route-flow 1.4s linear infinite;
}
@keyframes usp-route-flow {
  to {
    stroke-dashoffset: -44;
  }
}
.usp-grid--route {
  position: relative;
  z-index: 1;
}
.usp-grid--route .usp {
  position: relative;
}
.usp-grid--route .usp > :not(.usp__check) {
  transition: opacity 0.7s var(--ease-out);
}
.usp-grid--route .usp.is-lit {
  border-color: rgba(242, 239, 233, 0.3);
}
.usp-route.is-live .usp:not(.is-lit) {
  border-color: #242424;
}
.usp-route.is-live .usp:not(.is-lit) > :not(.usp__check) {
  opacity: 0.32;
}
/* Symbol zeichnet sich, sobald der Punkt erreicht ist */
.usp-grid--route .usp__icon {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s var(--ease-out) 0.15s, scale 0.5s var(--ease-out), color 0.3s var(--ease);
}
.usp-route.is-live .usp:not(.is-lit) .usp__icon {
  stroke-dashoffset: 60;
}
/* Der Wegpunkt: Nummer → Haken */
.usp__check {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #3a3a3a;
  border-radius: 50%;
  background: var(--c-black);
  color: var(--c-mute);
  font-family: var(--f-head);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), scale 0.6s var(--ease-spring);
}
.usp__num,
.usp__check svg {
  grid-area: 1 / 1;
}
.usp__num {
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.25s var(--ease), scale 0.4s var(--ease-out);
}
.usp__check svg {
  width: 22px;
  height: 22px;
  overflow: visible;
}
.usp__tick {
  fill: none;
  stroke: var(--c-black);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s var(--ease-out) 0.15s;
}
/* Puls wie der Standort auf der Karte */
.usp__check::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--c-red-bright);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.usp-route:not(.is-live) .usp__check,
.usp.is-lit .usp__check {
  border-color: var(--c-chalk);
  background: var(--c-chalk);
  scale: 1.1;
}
.usp-route.is-live .usp.is-lit .usp__check::after {
  animation: map-ring 1.6s var(--ease-out);
}
/* das Ziel pulsiert weiter */
.usp-route.is-live .usp.is-lit:last-child .usp__check::after {
  animation: map-ring 2.8s var(--ease-out) infinite;
}
.usp-route.is-live .usp:not(.is-lit) .usp__num {
  opacity: 1;
  scale: 1;
}
.usp-route.is-live .usp:not(.is-lit) .usp__tick {
  stroke-dashoffset: 1;
  transition-delay: 0s;
}
/* Handy + Tablet: senkrechter Weg links */
@media (max-width: 899px) {
  .usp-grid--route {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-left: 52px;
  }
  .usp-grid--route .usp__check {
    top: calc(var(--usp-pad) + 5px);
    left: -53px;
  }
}
@media (min-width: 600px) and (max-width: 899px) {
  .usp-grid--route .usp {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 26px;
    align-items: start;
  }
  .usp-grid--route .usp__icon {
    grid-row: 1 / 3;
    margin: 0;
  }
  .usp-grid--route .usp h3 {
    margin-bottom: 6px;
  }
}
/* Desktop: Zickzack von oben nach unten – links, rechts, links, rechts, jeder Kasten ein Stück
   tiefer. Die Wegpunkte sitzen auf der Innenkante, die Route schlängelt sich in der Mitte durch. */
@media (min-width: 900px) {
  .usp-grid--route {
    display: flex;
    flex-direction: column;
    max-width: 880px;
    margin-inline: auto;
    padding-top: 84px; /* Platz für den Startpunkt */
  }
  .usp-grid--route .usp {
    width: 41%;
    align-self: flex-start;
  }
  .usp-grid--route .usp:nth-child(even) {
    align-self: flex-end;
  }
  .usp-grid--route .usp + .usp {
    margin-top: -24px;
  }
  .usp-grid--route .usp__check {
    top: calc(50% - 17px);
    right: -19px;
  }
  .usp-grid--route .usp:nth-child(even) .usp__check {
    right: auto;
    left: -19px;
  }
}
@media (hover: hover) {
  /* Kästen bleiben beim Drüberfahren auf dem Weg liegen */
  .usp-grid--route .usp:hover {
    transform: none;
  }
}
/* Variante ohne Zickzack: immer senkrecht untereinander, mit spürbarem Abstand
   zwischen den Kacheln (z. B. Probetraining „So läuft’s ab“). Überschreibt die
   Zickzack-Regeln oben, weil sie weiter unten in der Datei steht. */
.usp-grid--route-vertical {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(64px, 10vw, 116px);
  max-width: 620px;
  margin-inline: auto;
  padding: 50px 0 0 52px;
}
.usp-grid--route-vertical .usp {
  width: auto;
  align-self: auto;
  margin-top: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  align-items: start;
}
.usp-grid--route-vertical .usp__icon {
  grid-row: 1 / 3;
  margin: 0;
}
.usp-grid--route-vertical .usp h3 {
  margin-bottom: 6px;
}
.usp-grid--route-vertical .usp__check,
.usp-grid--route-vertical .usp:nth-child(even) .usp__check {
  top: calc(var(--usp-pad) + 5px);
  right: auto;
  left: -53px;
}
@media (hover: hover) {
  /* Bei der geraden Linie dürfen sich die Kacheln (anders als im Zickzack) ruhig anheben */
  .usp-grid--route.usp-grid--route-vertical .usp:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
}
@media (max-width: 479px) {
  .usp-grid--route-vertical {
    padding-left: 44px;
  }
  .usp-grid--route-vertical .usp {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .usp-grid--route-vertical .usp__icon {
    grid-row: auto;
  }
  .usp-grid--route-vertical .usp__check,
  .usp-grid--route-vertical .usp:nth-child(even) .usp__check {
    left: -45px;
  }
}
/* Startpunkt der Route */
.usp-route__start {
  fill: var(--c-black);
  stroke: var(--c-mute);
  stroke-width: 2;
}
.usp-route__start,
.usp-route__label {
  opacity: clamp(0, var(--route-t) * 3 - 1, 1);
}
.usp-route__label {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--c-mute);
}

/* ---------- Studio ---------- */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}
.chips li {
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-graphite);
  font-family: var(--f-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-chalk);
}
.gallery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: clamp(40px, 6vw, 72px);
}
.gallery li {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: var(--c-graphite);
  aspect-ratio: 4 / 3;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
  .gallery li:hover img {
    transform: scale(1.08);
  }
}
@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .gallery li:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

/* ---------- Studio als „Karte“ ----------
   Im Stil der Anfahrts-Karte: die Kennzahlen sind ein Maßstab (Balken füllen sich), die
   Ausstattung ist eine nummerierte Legende, die Fotos tragen passende Pins und liegen in einem
   gezeichneten Kartenrahmen. --scale-p, --plan-p (0 → 1) und .is-lit setzt main.js beim
   Scrollen; ohne JS / „Bewegung reduzieren“ ist alles fertig. */
.studio__top {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
}
.studio__top .section__head {
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .studio__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}
/* Maßstab: erst füllen sich die 7 Tage, danach der Kraftsport-Balken (--days-p / --kraft-p, je 0 → 1, setzt main.js) */
.stats--scale {
  --scale-p: 1;
  --days-p: 1;
  --kraft-p: 1;
  margin: 0;
}
.stats--scale .stat {
  align-content: start;
  gap: 8px;
}
.stats--scale .stat__num {
  font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
}
.stat__bar {
  display: flex;
  gap: 3px;
  height: 8px;
  margin-top: 8px;
}
.stat__bar i {
  flex: 1;
  border-radius: 2px;
  background: var(--c-chalk);
}
.stat__bar--days i {
  opacity: clamp(0.12, var(--days-p) * 7 - var(--k, 0), 1);
}
.stat__bar--days i:nth-child(2) { --k: 1; }
.stat__bar--days i:nth-child(3) { --k: 2; }
.stat__bar--days i:nth-child(4) { --k: 3; }
.stat__bar--days i:nth-child(5) { --k: 4; }
.stat__bar--days i:nth-child(6) { --k: 5; }
.stat__bar--days i:nth-child(7) { --k: 6; }
.stat__bar--full {
  border-radius: 2px;
  background: #2a2a2a;
}
.stat__bar--full i {
  transform-origin: left center;
  scale: var(--kraft-p) 1;
}
/* „0 Schnickschnack“: der Balken bleibt leer */
.stat__bar--empty {
  border: 1.5px dashed #4a4a4a;
  border-radius: 2px;
  opacity: clamp(0, var(--kraft-p) * 2, 1);
}

/* Karte: Legende + Fotos */
.studio__plan {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  margin-top: clamp(64px, 8vw, 112px);
  align-items: start;
}
@media (min-width: 900px) {
  .studio__plan {
    grid-template-columns: minmax(250px, 0.78fr) 2fr;
  }
}
.legend__title {
  margin-bottom: 18px;
}
.legend__list {
  list-style: none;
  display: grid;
  margin: 0;
  padding: 0;
}
.legend__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--c-line);
}
.legend__item:last-child {
  border-bottom: 1px solid var(--c-line);
}
.legend__item[data-spot] {
  cursor: zoom-in;
}
.legend__pin,
.gallery__pin {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid #3a3a3a;
  border-radius: 50%;
  background: var(--c-black);
  font-family: var(--f-head);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-mute);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease),
    scale 0.5s var(--ease-spring);
}
/* Puls wie der Standort-Pin */
.legend__pin::after,
.gallery__pin::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--c-red-bright);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.studio:not(.is-live) .legend__item[data-spot] .legend__pin,
.studio:not(.is-live) .gallery__pin,
.legend__item.is-lit .legend__pin,
.gallery--plan li.is-lit .gallery__pin {
  border-color: var(--c-chalk);
  background: var(--c-chalk);
  color: var(--c-black);
}
.studio.is-live .legend__item.is-lit .legend__pin::after,
.studio.is-live .gallery--plan li.is-lit .gallery__pin::after,
.legend__item.is-hot .legend__pin::after,
.gallery--plan li.is-hot .gallery__pin::after {
  animation: map-ring 1.6s var(--ease-out);
}
.legend__item.is-hot .legend__pin::after,
.gallery--plan li.is-hot .gallery__pin::after {
  animation-iteration-count: infinite;
}
.legend__item.is-hot .legend__pin,
.gallery--plan li.is-hot .gallery__pin {
  scale: 1.15;
}
.legend__item--extra .legend__pin {
  border-style: dashed;
}
.legend__text {
  padding-top: 3px;
  transition: opacity 0.6s var(--ease-out);
}
.legend__text strong {
  display: block;
  font-family: var(--f-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-chalk);
}
.legend__text span {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--c-mute);
}
.studio.is-live .legend__item[data-spot]:not(.is-lit) .legend__text {
  opacity: 0.4;
}
/* Kartenrahmen */
.studio__map {
  --plan-p: 1;
  position: relative;
  margin: 0;
  padding: clamp(12px, 1.6vw, 20px);
}
.studio__map::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(242, 239, 233, 0.14);
  border-radius: calc(var(--radius) + 6px);
  clip-path: inset(0 calc((1 - var(--plan-p)) * 100%) calc((1 - var(--plan-p)) * 100%) 0 round calc(var(--radius) + 6px));
  pointer-events: none;
}
.gallery--plan {
  gap: 10px;
  margin-top: 0;
}
@media (min-width: 600px) {
  .gallery--plan {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (min-width: 900px) {
  .gallery--plan li:first-child {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}
.gallery--plan > * {
  --reveal-r: var(--radius-sm);
}
.gallery--plan li {
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.3s var(--ease);
}
.gallery--plan img {
  transition: transform 0.6s var(--ease), opacity 0.8s var(--ease-out), filter 0.4s var(--ease);
}
.gallery--plan li.is-hot {
  outline-color: var(--c-chalk);
}
.gallery--plan.has-hot li:not(.is-hot) img {
  filter: brightness(0.4);
}
.gallery__pin {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  pointer-events: none;
}
.gallery--plan .gallery__caption {
  right: 12px;
  left: 12px;
  font-size: 0.7rem;
}
.gallery--plan .gallery__zoom::before {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background-size: 18px;
}
/* Variante B: Kennzahlen als große Kacheln über die ganze Breite, Fotos darunter im Kartenrahmen */
.stats--band {
  gap: clamp(10px, 1.6vw, 16px);
  margin-top: clamp(40px, 6vw, 72px);
}
.stats--band .stat {
  gap: 10px;
  padding: clamp(20px, 3vw, 30px) clamp(16px, 3vw, 28px);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(242, 239, 233, 0.04);
  transition: transform 0.5s var(--ease-out), border-color 0.3s var(--ease), background-color 0.3s var(--ease),
    box-shadow 0.5s var(--ease-out), scale 0.3s var(--ease);
}
.stats--band .stat:first-child {
  padding-left: clamp(16px, 3vw, 28px);
  border-left: 1px solid transparent;
}
.stats--band .stat__num {
  font-size: clamp(1.9rem, 1rem + 5vw, 5.2rem);
  letter-spacing: -0.01em;
}
.stats--band .stat__bar {
  max-width: 240px;
  height: 6px;
}
@media (hover: hover) {
  .stats--band .stat:hover {
    border-color: rgba(242, 239, 233, 0.32);
    background: rgba(242, 239, 233, 0.08);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
}
@media (hover: none) {
  .stats--band .stat:active {
    scale: 0.985;
  }
}
@media (max-width: 599px) {
  .stats.stats--band {
    grid-template-columns: 1fr;
  }
  .stats--band .stat {
    padding: 18px 20px;
  }
  .stats--band .stat:first-child {
    padding-left: 20px;
  }
}
.studio > .container > .studio__map {
  margin-top: clamp(48px, 6vw, 80px);
}
.studio > .container > .studio__map .gallery--plan li {
  aspect-ratio: 3 / 2;
}
.studio__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 14px;
  font-family: var(--f-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.studio__caption span + span {
  font-family: var(--f-body);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(242, 239, 233, 0.14), rgba(242, 239, 233, 0) 55%), var(--c-graphite);
  color: var(--c-text);
}
.note svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--c-red-bright);
  margin-top: 3px;
}
.note p {
  margin: 0;
}

/* ---------- Bild-Rahmen ---------- */
.photo {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.photo picture {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: box-shadow 0.5s var(--ease-out);
  will-change: transform;
  backface-visibility: hidden;
}
.photo img {
  width: 100%;
  height: auto;
  scale: 1.08;
  translate: 0 var(--py, 0px);
  will-change: translate;
  backface-visibility: hidden;
}
.photo--framed::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--c-red);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.photo figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--c-mute);
}
@media (max-width: 899px) {
  .photo--framed::before {
    inset: 12px -10px -12px 10px;
  }
}

/* ---------- Leistungen / Betreuung ---------- */
.service-grid {
  list-style: none;
  display: grid;
  gap: 16px;
  margin-top: 36px;
}
@media (min-width: 640px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.service {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.service::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 48px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--c-red);
  transition: width 0.5s var(--ease-out), background-color 0.3s var(--ease);
}
.service__icon {
  width: 36px;
  height: 36px;
  color: var(--c-red-bright);
  margin-bottom: 16px;
}
.service h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.service p {
  margin: 0;
  color: var(--c-mute);
  font-size: 1rem;
}

/* ---------- Über Tom ---------- */
.quote {
  position: relative;
  margin: 32px 0;
  padding: 0 0 0 26px;
}
.quote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--c-red);
}
.quote p {
  font-family: var(--f-head);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-chalk);
  margin: 0 0 10px;
}
.quote cite {
  font-style: normal;
  color: var(--c-mute);
  font-size: 0.95rem;
}

/* ---------- Interview (Über Tom) ----------
   Wie ein Chatverlauf: erst die Frage, dann drei tippende Punkte an Toms Stelle,
   dann seine Antwort – Frage für Frage, während man runterscrollt. Ausgelöst über
   die vorhandene Einblend-Engine (main.js hängt .qa an .is-visible), die
   Zeitfolge selbst ist reines CSS (keyframes weiter unten). */
.qa-list {
  display: grid;
  gap: clamp(30px, 4.4vw, 46px);
  max-width: 700px;
}
.qa {
  display: grid;
  gap: 14px;
}
.qa__q,
.qa__a-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.qa__a-wrap {
  margin-left: clamp(0px, 5vw, 52px);
}
.qa__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.qa__avatar--asker {
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  color: var(--c-mute);
}
.qa__avatar--asker svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.qa__avatar--tom {
  border: 1px solid var(--c-line);
}
.qa__avatar--tom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qa__q-bubble,
.qa__typing,
.qa__a-bubble {
  border-radius: 4px var(--radius) var(--radius) var(--radius);
  border: 1px solid var(--c-line);
}
.qa__q-bubble {
  max-width: 52ch;
  padding: 14px 20px;
  background: var(--c-graphite);
}
.qa__num {
  display: block;
  font-family: var(--f-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-red-bright);
}
.qa__q-bubble h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
}
.qa__a-stack {
  display: grid;
  flex: 1;
  min-width: 0;
}
.qa__typing,
.qa__a-bubble {
  grid-area: 1 / 1;
  background: var(--c-coal);
}
.qa__typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 17px 18px;
}
.qa__typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-mute);
  animation: qa-bounce 1.1s ease-in-out infinite;
}
.qa__typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.qa__typing i:nth-child(3) {
  animation-delay: 0.3s;
}
.qa__a-bubble {
  max-width: 58ch;
  padding: 16px 22px;
}
.qa__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-chalk);
}
.qa__a-bubble p {
  margin: 0;
  color: var(--c-text);
}

/* Zeitfolge: Frage kommt, dann tippt Tom, dann steht seine Antwort da */
@keyframes qa-rise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
@keyframes qa-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes qa-typing-cycle {
  0% {
    opacity: 0;
    scale: 0.82;
  }
  14% {
    opacity: 1;
    scale: 1;
  }
  78% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.82;
  }
}
@keyframes qa-answer-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0;
  }
}
@keyframes qa-bounce {
  0%,
  60%,
  100% {
    translate: 0 0;
  }
  30% {
    translate: 0 -4px;
  }
}
.js .qa__typing,
.js .qa__a-bubble {
  opacity: 0;
}
.js .qa.reveal-stagger.is-visible > .qa__q {
  animation: qa-rise calc(0.32s * var(--qa-t, 1)) var(--ease-out) both;
  animation-delay: 0s;
}
.js .qa.reveal-stagger.is-visible > .qa__a-wrap {
  animation: qa-fade calc(0.24s * var(--qa-t, 1)) var(--ease-out) both;
  animation-delay: calc(0.34s * var(--qa-t, 1));
}
.js .qa.is-visible .qa__typing {
  animation: qa-typing-cycle calc(0.8s * var(--qa-t, 1)) var(--ease-out) both;
  animation-delay: calc(0.5s * var(--qa-t, 1));
}
.js .qa.is-visible .qa__a-bubble {
  animation: qa-answer-in calc(0.32s * var(--qa-t, 1)) var(--ease-out) both;
  animation-delay: calc(1.2s * var(--qa-t, 1));
}
/* Beim Laden schon sichtbare Fragen: sofort komplett da, kein Warten aufs Tippen */
.js .qa.is-instant .qa__typing {
  display: none;
}
.js .qa.is-instant .qa__a-bubble {
  opacity: 1;
  animation: none;
}
.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 8px 0 28px;
}
.tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-chalk);
}
.tags li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-red);
}

/* ---------- Kennzahlen (Studio) ---------- */
.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 32px 0 0;
  padding: 0;
}
.stat {
  display: grid;
  gap: 6px;
  padding: 4px clamp(12px, 2.4vw, 28px);
  border-left: 1px solid var(--c-line);
}
.stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.stat__num {
  font-family: var(--f-head);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-chalk);
  white-space: nowrap;
}
.stat:nth-child(2) .stat__num {
  color: var(--c-red-bright);
}
.stat__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--c-mute);
}
@media (max-width: 599px) {
  .stat {
    padding-inline: 12px;
  }
  .stat__label {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }
}

/* ---------- Toms Weg als Zeitstrahl ---------- */
.journey {
  --dot: 14px;
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 32px 0 8px;
  padding: 0;
}
.journey::before {
  content: "";
  position: absolute;
  top: calc(var(--dot) / 2 - 1px);
  left: calc(var(--dot) / 2);
  right: calc(25% - var(--dot) / 2);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c-line), var(--c-red));
  transform-origin: left center;
}
.journey li {
  position: relative;
  padding: calc(var(--dot) + 14px) 10px 0 0;
  font-family: var(--f-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--c-text);
}
.journey li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dot);
  height: var(--dot);
  box-sizing: border-box;
  border: 2px solid var(--c-red);
  border-radius: 50%;
  background: var(--c-coal);
}
.section:not(.section--coal) .journey li::before {
  background: var(--c-black);
}
.journey li:last-child {
  color: var(--c-chalk);
}
.journey li:last-child::before,
.section .journey li:last-child::before {
  background: var(--c-red);
  box-shadow: 0 0 0 5px rgba(242, 239, 233, 0.22);
}

/* Handy: Zeitstrahl senkrecht */
@media (max-width: 599px) {
  .journey {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .journey::before {
    top: calc(var(--dot) / 2);
    bottom: calc(var(--dot) / 2);
    left: calc(var(--dot) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--c-line), var(--c-red));
    transform-origin: center top;
  }
  .journey li {
    padding: 0 0 0 calc(var(--dot) + 16px);
    line-height: var(--dot);
  }
}

/* ---------- Community & Bewertungen ---------- */
.rating-big {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 8px 0 0;
}
.rating-big__score {
  font-family: var(--f-head);
  font-size: clamp(3rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-chalk);
}
.rating-big__meta {
  display: grid;
  gap: 2px;
}
.rating-big__meta .stars {
  font-size: 1.35rem;
  color: var(--c-red-bright);
}
.rating-big--lg {
  margin-top: clamp(26px, 4vw, 40px);
  gap: 22px;
}
.rating-big--lg .rating-big__score {
  font-size: clamp(3.6rem, 4.5rem + 2vw, 5.4rem);
}
.rating-big--lg .rating-big__meta {
  gap: 5px;
}
.rating-big--lg .rating-big__meta .stars {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
}
.rating-big--center {
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
}
.rating-big--center .rating-big__meta {
  justify-items: center;
  text-align: center;
}
.rating-big--tight {
  margin-top: clamp(14px, 2vw, 22px);
}
/* Community: Bewertungsnote näher an die Rezensionskarten holen */
#stimmen .section__head {
  margin-bottom: clamp(32px, 5vw, 56px);
}
.reviews {
  list-style: none;
  display: grid;
  gap: 16px;
  margin-top: clamp(36px, 5vw, 56px);
}
@media (min-width: 900px) {
  .reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}
.review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px 28px;
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.review .stars {
  margin-bottom: 16px;
}
.review blockquote {
  margin: 0 0 22px;
  font-size: 1.02rem;
  color: var(--c-text);
  flex: 1;
}
.review blockquote p {
  margin: 0;
}
.review figcaption {
  font-family: var(--f-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-chalk);
}
.review figcaption span {
  display: block;
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-mute);
}
.reviews-footer {
  margin-top: 32px;
  text-align: center;
}

/* ---------- Preise ---------- */
.pricing {
  list-style: none;
  display: grid;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .pricing {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 30px 32px;
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.plan--featured {
  background: var(--c-chalk);
  color: var(--c-black);
  border-color: var(--c-chalk);
}
.plan__badge {
  position: absolute;
  top: -14px;
  left: 30px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--c-red);
  color: #fff;
  font-family: var(--f-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plan__term {
  font-family: var(--f-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin: 0 0 12px;
}
.plan--featured .plan__term {
  color: #555;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--f-head);
  color: var(--c-chalk);
}
.plan--featured .plan__price {
  color: var(--c-black);
}
.plan__amount {
  font-size: clamp(3.2rem, 5.2vw, 4rem);
  font-weight: 800;
  line-height: 1;
}
.plan__unit {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plan__desc {
  margin: 8px 0 0;
  color: var(--c-mute);
  font-size: 0.98rem;
}
.plan--featured .plan__desc {
  color: #3d3d3d;
}
.pricing-note {
  margin: 22px 0 0;
  color: var(--c-mute);
  font-size: 0.98rem;
}
.included-top {
  margin-top: clamp(32px, 4vw, 48px);
}
/* Preise: nach den Tickets mehr Luft zum Kartenband darunter lassen */
#preise {
  padding-bottom: calc(var(--section-y) + clamp(32px, 4.8vw, 72px));
}
/* Probetraining: Anfrage rückt näher an die Ablauf-Schritte darüber */
#formular {
  padding-top: clamp(56px, 7vw, 110px);
}
.included {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--c-line);
}
.included-top h3,
.included h3 {
  font-size: 1.4rem;
  margin: 0 0 18px;
}
.checklist {
  list-style: none;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .checklist--grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
  .tickets {
    grid-template-columns: 1fr 1fr;
  }
}
.checklist li {
  position: relative;
  padding-left: 34px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.tickets {
  list-style: none;
  display: grid;
  gap: 12px;
}
.ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: 1px dashed #4a4a4a;
  border-radius: var(--radius);
  background: var(--c-coal);
}
.ticket__name {
  font-family: var(--f-head);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-chalk);
}
.ticket__name small {
  display: block;
  font-family: var(--f-body);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-mute);
}
.ticket__price {
  font-family: var(--f-head);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--c-chalk);
  white-space: nowrap;
}

/* ---------- Öffnungszeiten & Anfahrt ---------- */
.hours {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin: -8px 0 20px;
}
.hours th,
.hours td {
  padding: 16px 0;
  background: var(--c-graphite);
  text-align: left;
  vertical-align: top;
}
.hours th {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-chalk);
  padding-right: 16px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.hours td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.address {
  font-style: normal;
  margin: 0 0 28px;
  font-size: 1.1rem;
  line-height: 1.6;
}
.address strong {
  color: var(--c-chalk);
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 880px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}
.faq details {
  padding-inline: clamp(18px, 3vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-graphite);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.faq details[open]:not(.is-closing) {
  border-color: rgba(242, 239, 233, 0.45);
}
.faq summary {
  position: relative;
  display: block;
  padding: 22px 52px 22px 0;
  font-family: var(--f-head);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.18rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-chalk);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: linear-gradient(var(--c-red-bright), var(--c-red-bright)) center / 14px 2.5px no-repeat,
    linear-gradient(var(--c-red-bright), var(--c-red-bright)) center / 2.5px 14px no-repeat,
    rgba(242, 239, 233, 0.12);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
@media (hover: hover) {
  .faq summary:hover {
    color: #fff;
  }
}
.faq__answer {
  padding: 0 0 24px;
  max-width: 70ch;
  color: var(--c-text);
}
.faq__answer p:last-child {
  margin-bottom: 0;
}

/* ---------- Kontakt / Probetraining ---------- */
/* weniger Luft zum „Ablauf“-Abschnitt darüber, der Anfrage-Block soll näher heranrücken */
#formular {
  padding-top: clamp(24px, 3vw, 56px);
}
.contact-options {
  display: grid;
  gap: 12px;
  margin: 30px 0 34px;
}
@media (min-width: 700px) {
  .contact-options--grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .contact-options--grid .contact-option__surface {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 34px 20px;
    text-align: center;
  }
  .contact-options--grid .contact-option__icon {
    width: 60px;
    height: 60px;
  }
  .contact-options--grid .contact-option__icon svg {
    width: 30px;
    height: 30px;
  }
  .contact-options--grid .contact-option__label {
    font-size: 1.08rem;
  }
}
/* Der Klick-/Hover-Bereich (.contact-option) selbst bleibt immer unverändert stehen – nur die
   sichtbare Fläche (.contact-option__surface) darin hebt sich beim Hover ab. So bleibt die Maus
   an der Kante immer eindeutig „drüber" oder „drunter", ohne dass es zwischen den Zuständen flackert. */
.contact-option {
  display: block;
  text-decoration: none;
  color: var(--c-text);
}
.contact-option__surface {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: transform 0.5s var(--ease-out), border-color 0.3s var(--ease), background-color 0.3s var(--ease),
    box-shadow 0.5s var(--ease-out), scale 0.3s var(--ease);
}
@media (hover: hover) {
  .contact-option:hover .contact-option__surface {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(242, 239, 233, 0.55);
    background-color: #1f1f1f;
  }
}
.contact-option:active .contact-option__surface {
  scale: 0.985;
}
.contact-option__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--c-red);
  color: #fff;
}
.contact-option__icon svg {
  width: 24px;
  height: 24px;
}
.contact-option__label {
  display: block;
  font-family: var(--f-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-chalk);
  line-height: 1.2;
}
.contact-option__value {
  display: block;
  font-size: 0.95rem;
  color: var(--c-mute);
  word-break: break-word;
}

.form {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 44px);
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-red), var(--c-red-bright));
}
.form h3 {
  margin-bottom: 6px;
}
.form__intro {
  color: var(--c-mute);
  margin-bottom: 24px;
}
.field {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.field label {
  font-family: var(--f-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-chalk);
}
.field label .optional {
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-mute);
}
.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  background: var(--c-black);
  border: 1px solid #454545;
  border-radius: var(--radius-sm);
  color: var(--c-chalk);
  font-size: 1rem;
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #7d7a74;
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--c-red-bright);
  box-shadow: 0 0 0 3px rgba(242, 239, 233, 0.25);
}
.field__hint {
  font-size: 0.88rem;
  color: var(--c-mute);
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__privacy {
  margin: 16px 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--c-mute);
}
.form__status {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(242, 239, 233, 0.5);
  border-radius: var(--radius-sm);
  background: var(--c-black);
  display: none;
}
.form__status.is-visible {
  display: block;
}

/* ---------- Abschluss-CTA-Band ---------- */
.cta-band {
  background: var(--c-black);
  padding-bottom: var(--section-y);
}
.cta-band__inner {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: clamp(30px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);
  color: #fff;
  box-shadow: 0 40px 80px -40px rgba(242, 239, 233, 0.65);
}
@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
    gap: 48px;
  }
}
.cta-band h2 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
}
.cta-band p {
  margin: 10px 0 0;
  font-size: 1.1rem;
}
.cta-band .btn--light {
  color: var(--c-black);
}
.cta-band .btn--ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  background-image: linear-gradient(#fff, #fff);
}
@media (hover: hover) {
  .cta-band .btn--ghost:hover {
    color: var(--c-red-dark);
    border-color: #fff;
  }
}

/* ---------- Unterseiten ---------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 110px));
  padding-bottom: clamp(48px, 7vw, 96px);
  background: var(--c-coal);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.8vw, 4.3rem);
  line-height: 1.02;
  margin-bottom: 18px;
}
.page-hero .lead {
  margin: 0;
}
.page-hero .btn-row {
  margin-top: 28px;
}
/* Danke-Seite: Öffnungszeiten auf Höhe der WhatsApp-/Anrufen-Kacheln, Buttons rechtsbündig */
.danke-hours .btn-row {
  margin-top: 28px;
  gap: 8px;
  justify-content: space-between;
}
.danke-hours .btn-row .btn {
  padding-inline: 14px;
  font-size: 0.84rem;
}
@media (min-width: 900px) {
  .danke-direct {
    align-self: start;
  }
  .danke-hours {
    align-self: start;
    margin-top: clamp(24px, 5.76vw, 83px);
  }
}
/* Probetraining: Hero ohne Buttons – Textblock rutscht auf deren alte Höhe runter */
.page-hero--probetraining .container > .eyebrow {
  margin-top: 80px;
}
@media (max-width: 519px) {
  .page-hero .btn-row .btn {
    flex: 1 1 100%;
  }
}
@media (max-width: 380px) {
  .page-hero h1 {
    font-size: 1.9rem;
  }
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero__media {
  position: absolute;
  inset: 0;
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  opacity: 0.35;
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-coal) 10%, rgba(18, 18, 18, 0.5) 60%, rgba(18, 18, 18, 0.2) 100%);
}
.prose {
  max-width: 76ch;
}
.prose h2 {
  font-size: clamp(1.3rem, 1rem + 1.5vw, 1.85rem);
  margin-top: 2.2em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  font-size: 1.1rem;
  margin-top: 1.8em;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
  margin: 0 0 1em;
}
.prose li {
  margin-bottom: 0.4em;
}
.prose a {
  color: var(--c-red-bright);
}
@media (hover: hover) {
  .prose a:hover {
    color: var(--c-chalk);
  }
}
.prose strong {
  color: var(--c-chalk);
}
.toc {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-graphite);
  padding: clamp(22px, 3vw, 32px);
  margin: 0 0 2.6em;
}
.toc__label {
  margin: 0 0 14px;
  font-family: var(--f-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.toc .toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
@media (min-width: 640px) {
  .toc .toc__list {
    grid-template-columns: 1fr 1fr;
    gap: 2px 28px;
  }
}
.toc__list li {
  margin: 0;
}
.toc__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 6px;
  border-radius: 8px;
  color: var(--c-text);
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
@media (hover: hover) {
  .toc__list a:hover {
    color: var(--c-chalk);
    background-color: rgba(242, 239, 233, 0.06);
  }
}
.toc__num {
  flex: none;
  min-width: 1.4em;
  font-family: var(--f-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-red-bright);
}

.rules {
  list-style: none;
  counter-reset: rule;
  display: grid;
  gap: 10px;
}
.rules li {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 22px 24px;
  background: var(--c-coal);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.rules li::before {
  content: counter(rule, decimal-leading-zero);
  font-family: var(--f-head);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-red-bright);
}

.error-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
}
.error-page h1 {
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem);
}
.chips a {
  display: block;
  margin: -8px -16px;
  padding: 8px 16px;
  border-radius: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .chips a:hover {
    color: var(--c-red-bright);
  }
}
.error-page__code {
  font-family: var(--f-head);
  font-size: clamp(5rem, 20vw, 12rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--c-red);
  margin: 0 0 8px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-coal);
  border-top: 1px solid var(--c-line);
  padding-top: clamp(56px, 8vw, 96px);
  color: var(--c-mute);
  font-size: 0.98rem;
}
.footer-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}
.footer-brand .badge {
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(242, 239, 233, 0.12), 0 10px 30px rgba(0, 0, 0, 0.55);
  margin-bottom: 20px;
}
.footer-brand p {
  max-width: 32ch;
  color: var(--c-text);
  line-height: 1.6;
  text-wrap: balance;
}
.footer-title {
  font-family: var(--f-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-chalk);
  margin: 0 0 16px;
}
.footer-list {
  list-style: none;
  display: grid;
  gap: 10px;
}
.footer-list a {
  text-decoration: none;
}
@media (hover: hover) {
  .footer-list a:hover {
    color: var(--c-chalk);
    text-decoration: underline;
  }
}
.footer-list--contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.footer-list--contact svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex: none;
  color: var(--c-red-bright);
}
.footer-hours {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 8px 18px;
  margin: 0;
}
.footer-hours dt {
  color: var(--c-text);
}
.footer-hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-chalk);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (hover: hover) {
  .social a:hover {
    background: var(--c-red);
    border-color: var(--c-red);
  }
}
.social svg {
  width: 20px;
  height: 20px;
}
.footer-status {
  display: flex;
  justify-content: center;
}
.footer-status:not(:empty) {
  margin-bottom: clamp(32px, 5vw, 56px);
}
.social--footer {
  justify-content: center;
  margin-top: clamp(24px, 4vw, 40px);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.social--footer a {
  width: 52px;
  height: 52px;
}
.social--footer svg {
  width: 24px;
  height: 24px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-block: 24px;
  border-top: 1px solid var(--c-line);
  font-size: 0.9rem;
}
.footer-bottom ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-bottom a {
  text-decoration: none;
}
@media (hover: hover) {
  .footer-bottom a:hover {
    color: var(--c-chalk);
    text-decoration: underline;
  }
}

/* ---------- Mobile Kontaktleiste ---------- */
.mobile-bar {
  position: fixed;
  inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: rgba(11, 11, 11, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.85);
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  font-family: var(--f-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-chalk);
}
.mobile-bar a[href^="https://wa.me"] {
  background: var(--c-red);
  color: #fff;
}
.mobile-bar svg {
  width: 22px;
  height: 22px;
}
.mobile-bar a {
  transition: filter 0.2s var(--ease), background-color 0.2s var(--ease), scale 0.15s var(--ease-out);
}
.mobile-bar a:active {
  scale: 0.93;
  filter: brightness(0.9);
}
@media (hover: hover) {
  .mobile-bar a:hover {
    filter: brightness(1.2);
    background-color: rgba(255, 255, 255, 0.1);
  }
}
body {
  padding-bottom: calc(54px + 20px + env(safe-area-inset-bottom));
}
@media (min-width: 1140px) {
  .mobile-bar {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Bewegung & Interaktion
   Macht die Seite lebendig: Einblenden beim Scrollen, gleichmäßiges Anheben mit
   Schatten beim Drüberfahren, Parallax, Laufband, Bildband, Galerie-Großansicht und
   Öffnungsstatus live. Die Klassen (.reveal, .reveal-stagger …) setzt
   main.js. Animiert werden fast nur transform/opacity – das läuft auch auf dem
   Handy flüssig. Bei „Bewegung reduzieren“ schaltet der Block ganz unten alles ab.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes card-in {
  from {
    opacity: 0;
    translate: 0 32px;
    scale: 0.98;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
/* Bilder: Fenster öffnet sich weich von innen nach außen, dazu Einblenden */
@keyframes aperture {
  from {
    opacity: 0;
    clip-path: inset(7% 7% 7% 7% round var(--reveal-r, 24px));
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--reveal-r, 24px));
  }
}
/* … und das Foto darin wird scharf und kommt zur Ruhe */
@keyframes img-focus {
  from {
    scale: 1.2;
    filter: blur(8px);
  }
  to {
    scale: 1.08;
    filter: blur(0);
  }
}
@keyframes img-settle {
  from {
    scale: 1.16;
    filter: blur(6px);
  }
  to {
    scale: 1;
    filter: blur(0);
  }
}
@keyframes frame-in {
  from {
    opacity: 0;
    translate: -10px -10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes hero-settle {
  from {
    scale: 1.16;
    filter: brightness(0.3);
  }
  to {
    scale: 1.04;
    filter: brightness(1);
  }
}
@keyframes wipe-block {
  0% {
    scale: 0 1;
    transform-origin: left center;
  }
  48% {
    scale: 1 1;
    transform-origin: left center;
  }
  52% {
    scale: 1 1;
    transform-origin: right center;
  }
  100% {
    scale: 0 1;
    transform-origin: right center;
  }
}
@keyframes text-appear {
  0%,
  49% {
    color: transparent;
  }
  50%,
  100% {
    color: var(--c-red-bright);
  }
}
@keyframes line-grow {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    scale: 0.4;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  75%,
  100% {
    box-shadow: 0 0 0 9px transparent;
  }
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
@keyframes logo-sway {
  from {
    rotate: -5deg;
  }
  to {
    rotate: 5deg;
  }
}
@keyframes angle-spin {
  to {
    --angle: 360deg;
  }
}
@keyframes marquee {
  to {
    translate: -33.3333% 0;
  }
}
@keyframes shine {
  0% {
    translate: -130% 0;
  }
  55%,
  100% {
    translate: 130% 0;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zoom-in {
  from {
    opacity: 0;
    scale: 0.94;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/* ---------- Header: ein-/ausblenden, schrumpfen, Lesefortschritt ---------- */
.site-header.is-hidden {
  translate: 0 -100%;
}
@media (min-width: 1140px) {
  .site-header.is-solid {
    height: 62px;
  }
}
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, var(--c-red-dark), var(--c-red-bright));
  transform-origin: left center;
  scale: var(--progress, 0) 1;
  pointer-events: none;
}
/* Logos: nur sanfte Bewegung, keine ganzen Umdrehungen */
.brand__mark {
  transition: rotate 0.8s var(--ease-out), scale 0.8s var(--ease-out);
}
@media (hover: hover) {
  .brand:hover .brand__mark {
    rotate: -8deg;
    scale: 1.04;
  }
}

/* ---------- Mobiles Menü: Einträge gleiten nacheinander herein ---------- */
.menu-open .mobile-menu {
  animation: fade-in 0.3s var(--ease-out);
}
.menu-open .mobile-menu__list li,
.menu-open .mobile-menu__cta {
  animation: rise 0.55s var(--ease-out) backwards;
}
.menu-open .mobile-menu__list li:nth-child(2) {
  animation-delay: 0.04s;
}
.menu-open .mobile-menu__list li:nth-child(3) {
  animation-delay: 0.08s;
}
.menu-open .mobile-menu__list li:nth-child(4) {
  animation-delay: 0.12s;
}
.menu-open .mobile-menu__list li:nth-child(5) {
  animation-delay: 0.16s;
}
.menu-open .mobile-menu__list li:nth-child(6) {
  animation-delay: 0.2s;
}
.menu-open .mobile-menu__cta {
  animation-delay: 0.26s;
}
.mobile-menu__list a {
  transition: color 0.2s var(--ease), padding-left 0.35s var(--ease-out);
}
.mobile-menu__list a:focus-visible {
  padding-left: 12px;
  color: var(--c-red-bright);
}
@media (hover: hover) {
  .mobile-menu__list a:hover {
    padding-left: 12px;
    color: var(--c-red-bright);
  }
}

/* ---------- Startseiten-Hero: Auftritt beim Laden ---------- */
.hero .btn-row,
.hero__title > * {
  animation: rise 1s var(--ease-out) backwards;
}
.hero__kicker {
  animation-delay: 0.2s;
}
.hero__title-main {
  animation-duration: 1.2s;
  animation-delay: 0.35s;
}
.hero .btn-row {
  animation-delay: 0.9s;
}
/* „Mehr Training.“ – Balken wischt drüber und gibt den Text frei */
.hero__title-main .text-red {
  position: relative;
  width: fit-content;
  animation: text-appear 1.1s linear 1s backwards;
}
.hero__title-main .text-red::after {
  content: "";
  position: absolute;
  inset: 0.08em -0.06em 0.02em;
  border-radius: 0.12em;
  background: var(--c-red);
  scale: 0 1;
  pointer-events: none;
  animation: wipe-block 1.1s var(--ease-in-out) 1s both;
}
/* Scheibe landet sanft, danach schwebt sie ruhig */
.coin-land {
  animation: coin-in 1.6s var(--ease-out) 0.5s backwards;
}
.coin-float {
  animation: coin-float 6s var(--ease-in-out) 2.1s infinite alternate;
}
.hero__coin-shadow {
  animation: coin-shadow 6s var(--ease-in-out) 2.1s infinite alternate;
}
@keyframes coin-in {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes coin-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}
@keyframes coin-shadow {
  from {
    opacity: 1;
    scale: 1.04 0.98;
  }
  to {
    opacity: 0.75;
    scale: 1.1 1.03;
  }
}
.page-hero__media {
  overflow: hidden;
}

/* ---------- Unterseiten-Kopf: Auftritt, Parallax, ruhig pendelndes Logo ---------- */
.page-hero .container {
  translate: 0 calc(var(--scroll, 0) * 0.12px);
}
.page-hero .container > * {
  animation: rise 0.9s var(--ease-out) backwards;
}
.page-hero .container > :nth-child(2) {
  animation-delay: 0.08s;
}
.page-hero .container > :nth-child(3) {
  animation-delay: 0.16s;
}
.page-hero .container > :nth-child(4) {
  animation-delay: 0.26s;
}
.page-hero .container > :nth-child(5) {
  animation-delay: 0.36s;
}
.page-hero .container > :nth-child(6) {
  animation-delay: 0.46s;
}
.page-hero h1 {
  animation-duration: 1.1s;
}
.page-hero__media {
  translate: 0 calc(var(--scroll, 0) * 0.3px);
}
.page-hero__media img {
  animation: hero-settle 2.2s var(--ease-out) both;
}
.page-hero__mark {
  position: absolute;
  top: 50%;
  right: -8vw;
  width: clamp(280px, 44vw, 600px);
  height: clamp(280px, 44vw, 600px);
  margin-top: calc(clamp(280px, 44vw, 600px) / -2);
  opacity: 0.12;
  pointer-events: none;
  translate: 0 calc(var(--scroll, 0) * 0.25px);
  animation: logo-sway 16s var(--ease-in-out) infinite alternate;
}
/* Porträt im Seitenkopf (Über Tom): Bild rechts, gut sichtbar */
@media (min-width: 900px) {
  .page-hero--portrait .page-hero__media {
    left: auto;
    width: 50%;
  }
  .page-hero--portrait .page-hero__media img {
    opacity: 0.8;
    object-position: 50% 10%;
  }
  .page-hero--portrait .page-hero__media::after {
    background: linear-gradient(90deg, var(--c-coal) 0%, rgba(18, 18, 18, 0.55) 35%, rgba(18, 18, 18, 0) 75%),
      linear-gradient(0deg, var(--c-coal) 0%, rgba(18, 18, 18, 0) 35%);
  }
  .page-hero--portrait .lead {
    max-width: 44ch;
  }
}

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal:not(.photo):not(.is-visible),
.js .reveal-stagger:not(.is-visible) > :not(.reveal-stagger) {
  opacity: 0;
}
.js .reveal.is-visible:not(.photo),
.js .reveal-stagger.is-visible > :not(.reveal-stagger) {
  animation: rise 0.9s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
/* Button-Zeilen nur einblenden, nicht verschieben: „rise“ lässt sie von unten hochgleiten –
   tippt man aufs Handy genau in dem Moment, sitzt der Finger noch auf der alten Position und
   der Tipp geht ins Leere (erst der zweite trifft). Ohne Verschiebung bleibt die Trefffläche stabil. */
.js .reveal.is-visible.btn-row,
.js .reveal.is-visible.reviews-footer,
.js .reveal-stagger.is-visible > .btn-row {
  animation-name: fade-in;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.js h2.reveal.is-visible:not(.photo),
.js .reveal-stagger.is-visible > h2:not(.reveal-stagger) {
  animation-duration: 1.1s;
}
.js .reveal-stagger--cards.is-visible > :not(.reveal-stagger) {
  animation-name: card-in;
  animation-duration: 1s;
  animation-delay: calc(var(--i, 0) * 110ms);
}
.js .reveal-stagger--list.is-visible > :not(.reveal-stagger) {
  animation-duration: 0.7s;
  animation-delay: calc(var(--i, 0) * 60ms + 0.1s);
}
.js .reveal-stagger--gallery > * {
  --reveal-r: var(--radius);
}
.js .reveal-stagger--gallery.is-visible > :not(.reveal-stagger) {
  animation-name: aperture;
  animation-duration: 1.2s;
}
.js .reveal-stagger--gallery.is-visible img {
  animation: img-settle 1.6s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
/* Was beim Laden schon zu sehen ist, steht sofort da */
.js .is-instant,
.js .is-instant > *,
.js .photo.is-instant::before,
.js .photo.is-instant picture,
.js .photo.is-instant img,
.js .photo.is-instant figcaption {
  animation: none !important;
}
/* Zeitstrahl: die Linie zieht sich von links nach rechts */
.js .journey.reveal-stagger::before {
  scale: 0 1;
  transition: scale 1.4s var(--ease-out) 0.2s;
}
.js .journey.reveal-stagger.is-visible::before {
  scale: 1 1;
}
@media (max-width: 599px) {
  .js .journey.reveal-stagger::before {
    scale: 1 0;
  }
  .js .journey.reveal-stagger.is-visible::before {
    scale: 1 1;
  }
}
/* Rote Linie vor den Überschriften wächst beim Einblenden */
.js .reveal-stagger .eyebrow::before,
.js .eyebrow.reveal::before {
  scale: 0 1;
  transform-origin: left center;
  transition: scale 0.9s var(--ease-out) 0.35s;
}
.js .section__head--center .eyebrow::before {
  transform-origin: center;
}
.js .reveal-stagger.is-visible .eyebrow::before,
.js .eyebrow.reveal.is-visible::before {
  scale: 1 1;
}

/* Fotos: das Bildfenster öffnet sich weich, das Foto wird scharf, danach folgt der Rahmen */
.js .photo.reveal:not(.is-visible) picture,
.js .photo.reveal:not(.is-visible) figcaption,
.js .photo--framed.reveal:not(.is-visible)::before {
  opacity: 0;
}
.js .photo.reveal.is-visible picture {
  animation: aperture 1.4s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 120ms);
}
.js .photo.reveal.is-visible img {
  animation: img-focus 1.8s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 120ms);
}
.js .photo.reveal.is-visible figcaption {
  animation: rise 0.8s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 120ms + 0.7s);
}
.js .photo--framed.reveal.is-visible::before {
  animation: frame-in 1.1s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 120ms + 0.6s);
}
.photo--framed::before {
  transition: translate 0.7s var(--ease-out), border-color 0.3s var(--ease);
}
.photo img {
  transition: scale 1.2s var(--ease-out);
}
@media (hover: hover) {
  .photo--framed:hover::before {
    translate: 8px 8px;
    border-color: var(--c-red-bright);
  }
  .photo:hover picture {
    box-shadow: var(--shadow-lift);
  }
  .photo:hover img {
    scale: 1.12;
  }
}

/* Bilder, die erst beim Scrollen laden, blenden weich ein */
.js img[loading="lazy"] {
  transition: opacity 0.8s var(--ease-out);
}
.js img[loading="lazy"]:not(.is-loaded) {
  opacity: 0;
}
.js .gallery img {
  transition: transform 0.6s var(--ease), opacity 0.8s var(--ease-out);
}

/* ---------- Kleine Details: Sterne, Haken, Nummern ---------- */
.stars span {
  display: inline-block;
  transition: scale 0.35s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 40ms);
}
.js .stars:not(.is-visible) span {
  opacity: 0;
}
.js .stars.is-visible span {
  animation: pop 0.6s var(--ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 0.15s);
}
.js .hero .stars.is-visible span {
  animation-delay: calc(var(--i, 0) * 90ms + 1.2s);
}
.checklist li::before {
  transition: scale 0.5s var(--ease-spring), opacity 0.5s var(--ease-out);
}
.js .checklist:not(.is-visible) li::before {
  scale: 0.4;
  opacity: 0;
}
.js .checklist.is-visible li::before {
  transition-delay: calc(var(--i, 0) * 90ms + 0.3s);
}
@media (hover: hover) {
  .js .checklist.is-visible li:hover::before,
  .checklist li:hover::before {
    scale: 1.1;
    transition-delay: 0s;
  }
}
/* Nummern (Hausordnung) füllen sich von links mit Rot */
.rules li::before {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-red-bright);
  background: linear-gradient(var(--c-red-bright), var(--c-red-bright)) no-repeat left center / 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 1s var(--ease-out), translate 0.45s var(--ease-spring);
}
.no-js .rules li::before,
.rules.is-visible li::before {
  background-size: 100% 100%;
}
.rules.is-visible li::before {
  transition-delay: calc(var(--i, 0) * 110ms + 0.5s), 0s;
}
@media (hover: hover) {
  .rules li:hover::before {
    translate: 6px 0;
  }
}

/* ---------- Karten: gleichmäßig anheben, Schatten, roter Rand ---------- */
.usp,
.service,
.review,
.ticket,
.rules li,
.plan {
  transition: transform 0.5s var(--ease-out), border-color 0.3s var(--ease), background-color 0.3s var(--ease),
    box-shadow 0.5s var(--ease-out), scale 0.3s var(--ease);
}
.review {
  position: relative;
}
.review::before {
  content: "\201C";
  content: "\201C" / "";
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--c-mute);
  opacity: 0.35;
  pointer-events: none;
  transition: scale 0.6s var(--ease-out), opacity 0.3s var(--ease);
}
@media (hover: hover) {
  .usp:hover,
  .service:hover,
  .review:hover,
  .rules li:hover {
    border-color: rgba(242, 239, 233, 0.55);
    background-color: #1f1f1f;
  }
  .service:hover::before {
    width: 88px;
    background: var(--c-red-bright);
  }
  .usp:hover,
  .service:hover,
  .review:hover,
  .ticket:hover,
  .rules li:hover,
  .plan:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
  .plan--featured:hover {
    box-shadow: 0 40px 80px -34px rgba(242, 239, 233, 0.85);
  }
  .plan:not(.plan--featured):hover {
    border-color: rgba(242, 239, 233, 0.55);
  }
  .ticket:hover {
    border-style: solid;
    border-color: var(--c-red);
  }
  .review:hover::before {
    opacity: 0.45;
  }
  a.contact-option[href^="https://wa.me"]:hover .contact-option__icon {
    background: #1fa855;
  }
}
@media (hover: none) {
  .usp:active,
  .service:active,
  .review:active,
  .ticket:active,
  .rules li:active,
  .plan:active {
    scale: 0.985;
  }
}
/* Symbole und Preise reagieren dezent mit */
.usp__icon,
.service__icon,
.contact-option__icon,
.ticket__price {
  transition: scale 0.5s var(--ease-out), color 0.3s var(--ease), background-color 0.3s var(--ease);
}
@media (hover: hover) {
  .usp:hover .usp__icon,
  .service:hover .service__icon,
  .contact-option:hover .contact-option__icon {
    scale: 1.08;
  }
  .ticket:hover .ticket__price {
    color: var(--c-red-bright);
  }
  .review:hover::before {
    scale: 1.08;
  }
}
/* „Bester Preis“: umlaufender Rahmen in Bewegung */
.plan--featured {
  box-shadow: 0 30px 70px -34px rgba(242, 239, 233, 0.7);
}
.plan--featured::before {
  content: "";
  position: absolute;
  inset: -3px;
  padding: 3px;
  border-radius: calc(var(--radius-lg) + 3px);
  pointer-events: none;
  background: var(--c-red);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- Buttons: Glanz, Füllung, leichtes Anheben ---------- */
.btn--light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 25%, rgba(242, 239, 233, 0.2) 50%, transparent 75%);
  translate: -130% 0;
  pointer-events: none;
}
@media (hover: hover) {
  .btn--light:hover::before {
    translate: 130% 0;
    transition: translate 0.8s var(--ease-out);
  }
}
@media (hover: hover) {
  .btn:hover {
    translate: 0 -2px;
  }
}
.link-arrow span[aria-hidden="true"] {
  display: inline-block;
  transition: translate 0.35s var(--ease-spring);
}
@media (hover: hover) {
  .link-arrow:hover span[aria-hidden="true"] {
    translate: 6px 0;
  }
}

/* ---------- Kleine Felder ---------- */
.facts__item svg {
  transition: scale 0.5s var(--ease-out);
}
@media (hover: hover) {
  .facts__item:hover svg {
    scale: 1.1;
  }
}
.chips li {
  transition: translate 0.35s var(--ease-out), background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), box-shadow 0.35s var(--ease-out);
}
@media (hover: hover) {
  .chips li:hover {
    translate: 0 -2px;
    background: var(--c-red);
    border-color: var(--c-red);
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(242, 239, 233, 0.8);
  }
  .chips li:hover a {
    color: #fff;
  }
}
.tags li::before {
  transition: rotate 0.45s var(--ease-spring), scale 0.45s var(--ease-spring), background-color 0.3s var(--ease);
}
@media (hover: hover) {
  .tags li:hover::before {
    scale: 1.3;
    background: var(--c-red-bright);
  }
}
.note {
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.note svg {
  transition: scale 0.45s var(--ease-spring);
}
@media (hover: hover) {
  .note:hover {
    border-color: rgba(242, 239, 233, 0.45);
    box-shadow: 0 18px 40px -24px rgba(242, 239, 233, 0.55);
  }
  .note:hover svg {
    scale: 1.08;
  }
}
.hours th {
  padding-left: 18px;
}
.hours td {
  padding-right: 18px;
}
.hours th,
.hours td {
  transition: background-color 0.3s var(--ease), translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
@media (hover: hover) {
  .hours tr:hover > * {
    background: #222;
    translate: 0 -2px;
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.7);
  }
}
.hours tr.is-today > * {
  background: rgba(242, 239, 233, 0.22);
}
.hours tr.is-today th,
.hours tr.is-today td {
  color: var(--c-chalk);
}
.hours tr.is-today th::after {
  content: "Heute";
  display: inline-block;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--c-red);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1.2;
  vertical-align: 3px;
}
.footer-hours .is-today {
  color: var(--c-chalk);
}
.footer-hours dt.is-today::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c-open);
  vertical-align: 2px;
}
.footer-hours dt.is-today.is-soon::before {
  background: var(--c-star);
}
.footer-hours dt.is-today.is-closed::before {
  background: var(--c-red-bright);
}
.social a {
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), translate 0.4s var(--ease-out);
}
.footer-list a,
.footer-bottom a {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% 1px;
  transition: background-size 0.35s var(--ease-out), color 0.2s var(--ease);
}
@media (hover: hover) {
  .social a:hover {
    translate: 0 -2px;
  }
  .footer-list a:hover,
  .footer-bottom a:hover {
    text-decoration: none;
    background-size: 100% 1px;
  }
}
/* Höhere Spezifität als „.js img[loading="lazy"]“ nötig, sonst frisst dessen
   Transition (nur opacity) unsere rotate/scale-Übergänge komplett weg. */
.site-footer .footer-brand .badge {
  transition: opacity 0.8s var(--ease-out), rotate 0.8s var(--ease-out), scale 0.8s var(--ease-out);
}
@media (hover: hover) {
  .site-footer .footer-brand .badge:hover {
    rotate: -8deg;
    scale: 1.04;
  }
}

/* ---------- Öffnungsstatus live ---------- */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(242, 239, 233, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 11, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-chalk);
  transition: translate 0.3s var(--ease-out), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease-out);
}
@media (hover: hover) {
  .open-status:hover {
    translate: 0 -2px;
    border-color: rgba(242, 239, 233, 0.32);
    box-shadow: 0 10px 20px -14px rgba(0, 0, 0, 0.7);
  }
}
.open-status__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: var(--c-mute);
  background: currentColor;
}
.open-status.is-open .open-status__dot {
  color: var(--c-open);
  animation: ping 2s var(--ease-out) infinite;
}
.open-status.is-soon .open-status__dot {
  color: var(--c-star);
  animation: ping 2s var(--ease-out) infinite;
}
.open-status.is-closed .open-status__dot {
  color: var(--c-red-bright);
}
.open-status--footer {
  margin: 0;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-graphite);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-text);
}

/* ---------- Laufband ---------- */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-block: clamp(22px, 3.5vw, 40px);
  background: var(--c-black);
}
.marquee__band {
  margin-inline: -3vw;
  rotate: -2deg;
  overflow: hidden;
  background: var(--c-red);
  border-block: 3px solid var(--c-black);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.9);
}
.marquee__track {
  display: flex;
  width: max-content;
}
.js .marquee.is-ready .marquee__track {
  animation: marquee 42s linear infinite;
}
@media (hover: hover) {
  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }
}
.marquee__group {
  display: flex;
  flex: none;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
  padding: clamp(10px, 1.4vw, 16px) 0 clamp(10px, 1.4vw, 16px) clamp(18px, 2.6vw, 34px);
  font-family: var(--f-head);
  font-size: clamp(1.25rem, 2.9vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.marquee__item:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
}
.marquee__item::after {
  content: "";
  flex: none;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--c-black);
}

/* ---------- Bildband mit Parallax ---------- */
/* als abgerundete Fläche mit Abstand zum Rand */
.image-band {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100% - 2 * var(--gutter), var(--container));
  min-height: clamp(460px, 80vh, 760px);
  margin: 0 auto clamp(72px, 10vw, 150px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-black);
}
.image-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.image-band__media picture {
  height: 100%;
}
.image-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* oben bündig, damit Toms Kopf nie angeschnitten wird */
  object-position: 30% 0%;
}
.image-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 11, 11, 0.1) 0%, rgba(11, 11, 11, 0.45) 40%, rgba(11, 11, 11, 0.92) 68%),
    linear-gradient(0deg, rgba(11, 11, 11, 0.7) 0%, rgba(11, 11, 11, 0) 35%);
}
.image-band__inner {
  display: flex;
  justify-content: flex-end;
  padding-block: clamp(64px, 9vw, 120px);
}
.image-band__content {
  max-width: 560px;
}
.image-band h2 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.8rem);
}
@media (max-width: 899px) {
  .image-band {
    align-items: flex-end;
    min-height: clamp(560px, 130vw, 760px);
  }
  .image-band__media img {
    object-position: 42% 0%;
  }
  .image-band__media::after {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.05) 0%, rgba(11, 11, 11, 0.5) 45%, rgba(11, 11, 11, 0.96) 80%);
  }
  .image-band__inner {
    padding-block: 48px;
  }
}

/* ---------- Große Hintergrund-Wörter ---------- */
.section[data-bg-word] {
  overflow: hidden;
  overflow: clip;
}
.section[data-bg-word] > .container {
  position: relative;
  z-index: 1;
}
.bg-word {
  position: absolute;
  top: clamp(18px, 4vw, 56px);
  right: -0.04em;
  z-index: 0;
  font-family: var(--f-head);
  font-size: clamp(4rem, 12vw, 10.5rem);
  font-weight: 800;
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 239, 233, 0.12);
  pointer-events: none;
  user-select: none;
  translate: var(--bgx, 0px) 0;
  will-change: translate;
  backface-visibility: hidden;
}

/* ---------- Galerie: Zoom-Hinweis und Großansicht ---------- */
.gallery__zoom {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.gallery__zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 11, 11, 0.85) 0%, rgba(11, 11, 11, 0) 55%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.gallery__zoom::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-red)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E")
    center / 22px no-repeat;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.35s var(--ease-out), scale 0.45s var(--ease-spring);
}
.gallery__caption {
  position: absolute;
  left: 16px;
  right: 70px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--f-head);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--c-chalk);
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.4s var(--ease-out), translate 0.5s var(--ease-out);
}
.gallery__zoom:focus-visible::after {
  opacity: 1;
}
.gallery__zoom:focus-visible::before {
  opacity: 1;
  scale: 1;
}
.gallery__zoom:focus-visible .gallery__caption {
  opacity: 1;
  translate: 0 0;
}
.gallery__zoom:focus-visible {
  outline-offset: -4px;
}
@media (hover: hover) {
  .gallery li:hover .gallery__zoom::after {
    opacity: 1;
  }
  .gallery li:hover .gallery__zoom::before {
    opacity: 1;
    scale: 1;
  }
  .gallery li:hover .gallery__caption {
    opacity: 1;
    translate: 0 0;
  }
}
@media (hover: none) {
  .gallery__zoom::before {
    opacity: 0.9;
    scale: 0.8;
  }
}
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(8, 8, 8, 0.96);
  color: var(--c-chalk);
}
.lightbox[open] {
  display: grid;
  place-items: center;
  animation: fade-in 0.3s var(--ease-out);
}
.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.7);
}
.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 100%;
  margin: 0;
  padding: 72px 16px 96px;
}
.lightbox__img {
  width: auto;
  max-width: min(100%, 1280px);
  max-height: calc(100vh - 200px);
  max-height: calc(100svh - 200px);
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.lightbox__img.is-in {
  animation: zoom-in 0.45s var(--ease-out);
}
.lightbox__caption {
  max-width: 60ch;
  text-align: center;
  font-size: 0.98rem;
  color: var(--c-text);
}
.lightbox__count {
  position: absolute;
  top: 24px;
  left: 20px;
  margin: 0;
  font-family: var(--f-head);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--c-mute);
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.8);
  color: var(--c-chalk);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), scale 0.3s var(--ease-spring);
}
@media (hover: hover) {
  .lightbox__btn:hover {
    background: var(--c-red);
    border-color: var(--c-red);
  }
}
.lightbox__btn:active {
  scale: 0.92;
}
.lightbox__btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox__close {
  top: 12px;
  right: 12px;
}
.lightbox__prev,
.lightbox__next {
  top: 50%;
  margin-top: -26px;
}
.lightbox__prev {
  left: 16px;
}
.lightbox__next {
  right: 16px;
}
@media (max-width: 699px) {
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 22px;
    margin-top: 0;
  }
  .lightbox__prev {
    left: calc(50% - 64px);
  }
  .lightbox__next {
    right: calc(50% - 64px);
  }
}
.has-lightbox {
  overflow: hidden;
}

/* ---------- Fragen & Antworten ---------- */
.faq__answer {
  overflow: hidden;
}
.faq summary {
  transition: color 0.25s var(--ease), padding-left 0.4s var(--ease-out);
}
.faq summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 3px;
  background: var(--c-red);
  scale: 1 0;
  transition: scale 0.35s var(--ease-out);
}
.faq details[open] > summary {
  padding-left: 16px;
}
.faq details[open] > summary::before {
  scale: 1 1;
}
@media (hover: hover) {
  .faq summary:hover {
    padding-left: 16px;
  }
  .faq summary:hover::before {
    scale: 1 1;
  }
}
.faq summary::after {
  transition: transform 0.45s var(--ease-spring);
}
.faq details.is-closing summary::after {
  transform: none;
}

/* ---------- Formular ---------- */
.form {
  transition: box-shadow 0.5s var(--ease-out), border-color 0.3s var(--ease);
}
.form:focus-within {
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(242, 239, 233, 0.35);
}
.field label {
  transition: color 0.25s var(--ease);
}
.field:focus-within label {
  color: var(--c-red-bright);
}
.field input,
.field textarea {
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
@media (hover: hover) {
  .field input:hover:not(:focus),
  .field textarea:hover:not(:focus) {
    border-color: #5c5c5c;
  }
}
.field input:required:user-valid {
  padding-right: 46px;
  border-color: #2e7d4f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc84' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: var(--c-red-bright);
}
.form button[type="submit"][disabled] {
  cursor: progress;
}
.form button[type="submit"][disabled]::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ---------- Danke-Seite: Haken zeichnet sich ---------- */
.success-mark {
  width: 76px;
  height: 76px;
  margin: 0 0 22px;
}
.success-mark circle {
  fill: none;
  stroke: var(--c-red);
  stroke-width: 3;
  stroke-dasharray: 100;
  animation: draw 0.9s var(--ease-out) 0.25s backwards;
}
.success-mark path {
  fill: none;
  stroke: var(--c-chalk);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: draw 0.6s var(--ease-out) 0.95s backwards;
}

/* ---------- 404: die Zahl blendet ruhig ein ---------- */
.error-page__code {
  width: fit-content;
  animation: rise 1.1s var(--ease-out) 0.1s backwards;
}
.error-page .container > :not(.error-page__code) {
  animation: rise 0.9s var(--ease-out) backwards;
}
.error-page .container > :nth-child(2) {
  animation-delay: 0.5s;
}
.error-page .container > :nth-child(3) {
  animation-delay: 0.6s;
}
.error-page .container > :nth-child(4) {
  animation-delay: 0.7s;
}
.error-page .container > :nth-child(5) {
  animation-delay: 0.8s;
}

/* ---------- Anfahrt: Kartenband (eigene Karten-Grafik, nichts von Google) ----------
   Ohne Kasten: Die Karte läuft über die ganze Breite und blendet oben und unten
   weich ins Schwarz aus. --map-p (0 → 1, setzt main.js aus der Scroll-Position)
   zeichnet beim Reinscrollen erst die Hauptstraßen, dann Straßen, Gassen, Grün,
   zuletzt die rote Route und den Standort. Ohne JS / „Bewegung reduzieren“: fertig. */
.map-band {
  --map-p: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(640px, 100vh, 920px);
  /* die ausgeblendeten Ränder dürfen in den Abstand der Nachbar-Abschnitte laufen */
  margin-block: calc(var(--section-y) * -0.5);
  overflow: hidden;
  isolation: isolate;
}
/* Anfahrt sitzt jetzt zwischen Studio und dem Bildband: eigene Abstände statt der
   Standard-Überlappung – Studios eigener Innenabstand reicht oben, das Bildband
   hat aber keinen eigenen Abstand nach oben, deshalb hier extra Luft nach unten. */
#anfahrt {
  margin-top: 0;
  margin-bottom: clamp(96px, 13vw, 180px);
}
/* Beim Anspringen per Menülink („Betreuung“ → Bild) etwas mehr Abstand zur
   fixierten Navigationsleiste lassen, sonst klebt das Bild direkt daran. */
#willkommen {
  scroll-margin-top: 32px;
  margin-bottom: clamp(24px, 3vw, 48px);
}
.map-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
/* Abdunkeln nur hinter dem Text – orientiert sich an der Inhaltsbreite, nicht am Bildschirm */
.map-band__media::after {
  --text-x: max(50% - var(--container) / 2, 0px);
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 11, 11, 0.94) 0%,
    rgba(11, 11, 11, 0.82) calc(var(--text-x) + 460px),
    rgba(11, 11, 11, 0.2) calc(var(--text-x) + 880px),
    rgba(11, 11, 11, 0) calc(var(--text-x) + 1120px)
  );
  pointer-events: none;
}
.map-art {
  --d-main: clamp(0, var(--map-p) / 0.42, 1);
  --d-street: clamp(0, (var(--map-p) - 0.12) / 0.42, 1);
  --d-minor: clamp(0, (var(--map-p) - 0.24) / 0.42, 1);
  --d-area: clamp(0, (var(--map-p) - 0.2) / 0.45, 1);
  --d-route: clamp(0, (var(--map-p) - 0.55) / 0.3, 1);
  --d-pin: clamp(0, (var(--map-p) - 0.8) / 0.18, 1);
  display: block;
  width: 100%;
  height: 100%;
  /* die Karte gleitet beim Reinscrollen ein Stück von unten nach */
  translate: 0 calc((1 - var(--map-p)) * 110px);
  animation: map-drift 40s var(--ease-in-out) infinite alternate;
  will-change: translate;
  backface-visibility: hidden;
}
/* Straßen zeichnen sich entlang ihres Verlaufs (pathLength = 1) */
.map-art__minor path,
.map-art__street path,
.map-art__main path,
.map-art__water,
.map-art__route-draw {
  stroke-dasharray: 1 2;
}
.map-art__main {
  opacity: clamp(0, var(--d-main) * 40, 1);
}
.map-art__main path {
  stroke-dashoffset: calc(1 - var(--d-main));
}
.map-art__street {
  opacity: clamp(0, var(--d-street) * 40, 1);
}
.map-art__street path {
  stroke-dashoffset: calc(1 - var(--d-street));
}
.map-art__minor {
  opacity: clamp(0, var(--d-minor) * 40, 1);
}
.map-art__minor path {
  stroke-dashoffset: calc(1 - var(--d-minor));
}
.map-art__park,
.map-art__rail {
  opacity: var(--d-area);
}
.map-art__water {
  opacity: clamp(0, var(--d-area) * 40, 1);
  stroke-dashoffset: calc(1 - var(--d-area));
}
.map-art__route-draw {
  fill: none;
  stroke: #fff;
  stroke-width: 40;
  stroke-linecap: round;
  stroke-dashoffset: calc(1 - var(--d-route));
}
.map-art__pin {
  opacity: var(--d-pin);
  transform-box: view-box;
  transform-origin: 1180px 380px;
  scale: calc(0.6 + var(--d-pin) * 0.4);
}
@keyframes map-drift {
  from {
    scale: 1;
  }
  to {
    scale: 1.06;
  }
}
.map-art__ground {
  fill: #121212;
}
.map-art__park {
  fill: #161b17;
}
.map-art__water {
  fill: none;
  stroke: #16202a;
  stroke-width: 26;
  stroke-linecap: round;
}
.map-art__minor path,
.map-art__street path,
.map-art__main path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-art__minor path {
  stroke: #202020;
  stroke-width: 7;
}
.map-art__street path {
  stroke: #2a2a2a;
  stroke-width: 14;
}
.map-art__main path {
  stroke: #373737;
  stroke-width: 26;
}
.map-art__rail {
  fill: none;
  stroke: #2a2a2a;
  stroke-width: 3;
  stroke-dasharray: 14 10;
}
.map-art__route {
  fill: none;
  stroke: var(--c-red);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 16 14;
  animation: map-route 2.4s linear infinite;
}
@keyframes map-route {
  to {
    stroke-dashoffset: -60;
  }
}
.map-art__ring {
  fill: none;
  stroke: var(--c-red-bright);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-ring 2.8s var(--ease-out) infinite;
}
@keyframes map-ring {
  from {
    opacity: 1;
    scale: 0.8;
  }
  to {
    opacity: 0;
    scale: 2.4;
  }
}
.map-art__dot {
  fill: var(--c-red);
  stroke: #fff;
  stroke-width: 3;
}
.map-art__core {
  fill: #fff;
}
.map-art__label {
  font-family: var(--f-head);
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  fill: var(--c-chalk);
}
.map-art__sub {
  font-family: var(--f-body);
  font-size: 19px;
  fill: var(--c-mute);
}
.map-band__inner {
  padding-block: clamp(56px, 8vw, 104px);
}
.map-band__content {
  max-width: 520px;
}
.map-band .hours th,
.map-band .hours td {
  background: rgba(27, 27, 27, 0.88);
}
.map-band .hours tr.is-today > * {
  background: rgba(70, 70, 70, 0.9);
}
.map-band .btn-row {
  margin-top: 28px;
}
/* Handy: Karte oben mit dem Standort in der Mitte, Infos darunter */
@media (max-width: 899px) {
  .map-band {
    align-items: flex-end;
    min-height: 0;
  }
  .map-band__media {
    bottom: auto;
    height: 400px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 62%, transparent 100%);
  }
  /* Karte ist rechts verankert (xMaxYMid) – der Standort samt Schriftzug bleibt so bei jeder Breite im Bild */
  .map-art {
    translate: 0 calc((1 - var(--map-p)) * 60px);
  }
  .map-band__media::after {
    content: none;
  }
  .map-band .hours th {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
  }
  .map-band__inner {
    padding-top: 320px;
    padding-bottom: 24px;
  }
}

/* ==========================================================================
   Scroll-Erlebnis
   Die Werte (--p, --reveal, .is-lit) setzt main.js direkt
   aus der Scroll-Position. Ohne JavaScript oder mit „Bewegung reduzieren“ steht
   alles fertig da.
   ========================================================================== */

/* Startseite: „Bock auf Kraftsport?“ verblasst beim Runterscrollen (--scroll setzt main.js),
   der Kicker darüber und die Scheibe bleiben voll sichtbar */
.hero__line {
  opacity: clamp(0.12, 1 - var(--scroll, 0) / 650, 1);
}

/* Startseite: Umriss-Wörter hinter der Reise der Scheibe – ganz oben unsichtbar, beim
   Runterscrollen blenden sie leise ein und wandern abwechselnd nach rechts bzw. links
   (--bgx setzt main.js). Sie liegen hinter Überschrift und Scheibe. */
.hero__words {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}
.hero__word {
  position: absolute;
  left: 3vw;
  font-family: var(--f-head);
  font-size: clamp(3.4rem, 10.5vw, 9.25rem); /* etwas kleiner als „Kraft”, „Oldschool” … */
  font-weight: 800;
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 239, 233, 0.11);
  opacity: clamp(0, (var(--scroll, 0) - 60) / 380, 1);
  translate: var(--bgx, 0px) -50%;
  will-change: translate, opacity;
  backface-visibility: hidden;
}
.hero__word:nth-child(1) {
  top: 52%;
}
.hero__word:nth-child(2) {
  top: 70%;
  right: 3vw;
  left: auto;
}
.hero__word:nth-child(3) {
  top: 88%;
}

/* Überschriften füllen sich Wort für Wort */
.js .scrub-words {
  opacity: 1 !important;
  animation: none !important;
}
.scrub-words .w {
  opacity: clamp(0.2, calc(var(--p, 1) * (var(--n, 1) + 1) - var(--i, 0)), 1);
  transition: opacity 0.25s linear;
}

/* Betreuung: etwas näher ans Bildband darüber rücken, aber mehr Luft vor der Community danach */
#betreuung {
  padding-top: clamp(24px, 3vw, 48px);
  padding-bottom: calc(var(--section-y) + clamp(40px, 6vw, 110px));
}
/* Betreuung: die vier Kacheln wachsen beim Einblenden gerade und zentriert hoch,
   das Icon poppt kurz danach nach */
#betreuung .service-grid.reveal-stagger.is-visible > .service {
  animation: service-fan 0.75s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 130ms);
}
#betreuung .service-grid.reveal-stagger.is-visible .service__icon {
  animation: pop 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 130ms + 260ms);
}
@keyframes service-fan {
  from {
    opacity: 0;
    scale: 0.9;
    translate: 0 22px;
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #betreuung .service-grid.reveal-stagger.is-visible > .service,
  #betreuung .service-grid.reveal-stagger.is-visible .service__icon {
    animation: none;
  }
}
/* Bildband: kommt aus dem Dunkeln, das Foto zoomt sanft heran (oben verankert) */
.image-band__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--c-black);
  opacity: calc((1 - var(--reveal, 1)) * 0.75);
  pointer-events: none;
  will-change: opacity;
}
.image-band__media::after {
  z-index: 1;
}
/* Vergrößerung von rechts oben aus: Tom rückt nach links, der Text steht rechts frei */
.image-band__media img {
  transform-origin: 100% 0%;
  scale: calc(1.24 - var(--reveal, 1) * 0.1);
  will-change: scale;
  backface-visibility: hidden;
}
@media (max-width: 899px) {
  .image-band__media img {
    transform-origin: 42% 0%;
    scale: calc(1.1 - var(--reveal, 1) * 0.1);
  }
}

/* ---------- Bewegung reduzieren (Systemeinstellung) ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal:not(.photo),
  .js .reveal-stagger > * {
    opacity: 1 !important;
  }
  .marquee__track,
  .map-art,
  .map-art__route,
  .map-art__ring,
  .page-hero__mark,
  .plan--featured::before,
  .open-status__dot {
    animation: none !important;
  }
  .hero__coin,
  .page-hero__media,
  .page-hero .container,
  .page-hero__mark,
  .image-band__media,
  .bg-word,
  .photo img {
    translate: none !important;
  }
  .hero__word {
    opacity: 1;
    translate: 0 -50%;
  }
  .usp-route__line,
  .usp__check::after,
  .legend__pin::after,
  .gallery__pin::after {
    animation: none !important;
  }

  .image-band__media img {
    scale: none !important;
  }
  .image-band__media::before {
    opacity: 0 !important;
  }
}

/* ---------- Druck ---------- */
@media print {
  body::before,
  .site-header,
  .mobile-bar,
  .cta-band,
  .form,
  .marquee,
  .bg-word,
  .hero__words,
  .page-hero__mark,
  .open-status,
  .image-band__media,
  .lightbox {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    padding: 0;
  }
  h1,
  h2,
  h3 {
    color: #000;
  }
  .reveal,
  .reveal-stagger > *,
  .stars span,
  .photo img,
  img {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    filter: none !important;
  }
  .mobile-menu,
  .skip-link {
    display: none !important;
  }
  body *,
  a {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  img,
  svg {
    background: none;
  }
}