/* ==========================================================================
   FITOMAT RÖTHA — Stylesheet
   Marke:   Schwarz · Violett #6E12F5 · Signalorange #FF3800
   Schrift: DIN Next Pro Black (Display) · Montserrat (Text) · FITOMAT (Wortmarke)
   Aufbau:  Tokens → Reset → Typo → Komponenten → Sektionen → Responsive
   ========================================================================== */

/* ===== FONTS =====
   Montserrat wird lokal ausgeliefert statt über Google Fonts. Der externe
   Aufruf hätte bei jedem Seitenbesuch die Besucher-IP an Google übertragen,
   und zwar vor jeder Einwilligung. Über unicode-range lädt der Browser nur
   die Teilmenge, die er für den dargestellten Text wirklich braucht. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/montserrat-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/montserrat-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== EIGENE SCHRIFTEN =====
   Google Fonts werden per <link rel="preconnect"> + <link> im HTML geladen,
   nicht per @import: ein @import blockiert das Rendering, weil der Browser
   erst das CSS parsen muss, bevor er den Font-Request überhaupt kennt. */

/* Displayschrift: Barlow Black statt DIN Next LT Pro.
   DIN Next ist lizenzpflichtig, und eine Desktop-Lizenz deckt die Einbettung
   im Web nicht ab. Barlow steht unter der SIL Open Font License und darf
   ohne Pageview-Grenze als Webfont ausgeliefert werden.
   Von fuenf geprueften freien Groteskschriften traf Barlow Black die Breite
   von DIN Next Black am genauesten: ueber fuenf typische Ueberschriften der
   Seite gemessen betrug die Abweichung 0,8 Prozent (Saira 5,4, Chivo 6,4,
   Archivo 14 bis 20). Deshalb brechen die Ueberschriften an denselben
   Stellen um wie zuvor.
   Als woff2 zudem 22 statt 79 KB. */
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===== TOKENS ===== */
:root {
  /* Flächen — gestaffelt statt flach schwarz, damit Sektionen Tiefe bekommen */
  --bg:       #08080B;
  --bg-alt:   #0E0E14;
  --bg-card:  #14141C;
  --bg-raise: #1C1C26;

  /* Marke */
  --purple:        #6E12F5;
  --purple-lift:   #8B3DFF;
  --purple-text:   #B08CFF;   /* Violett für Text: erfüllt AA auf dunklem Grund */
  --purple-dim:    rgba(110,18,245,0.14);
  --purple-border: rgba(110,18,245,0.42);
  --purple-glow:   rgba(110,18,245,0.38);

  /* Signalorange als AKZENTFARBE auf dunklem Grund (5,5:1 – erfüllt AA) */
  --orange:      #FF3800;
  --orange-lift: #FF5A2B;
  /* Dieselbe Signalfarbe als FLÄCHE unter weißer Schrift. Muss dunkler
     sein, sonst erreicht weißer Text darauf nur 3,6:1 statt 4,5:1. */
  --orange-surface:       #DC3000;
  --orange-surface-hover: #C92A00;
  /* Violett für große Headlines (.accent). Das Markenviolett #6E12F5
     erreicht dort nur 2,9:1, nötig sind 3:1 für große Schrift. */
  --purple-accent: #7A28F7;

  /* Text */
  --white:    #F4F4F6;
  --grey:     #A2A2AE;
  --grey-dim: #8A8A96;

  /* Linien */
  --border:      rgba(255,255,255,0.09);
  --border-lift: rgba(255,255,255,0.20);

  /* Form */
  --radius:     14px;
  --radius-lg:  22px;
  --radius-sm:  8px;
  --radius-btn: 8px;
  --max-width:  1180px;

  /* Rhythmus */
  /* Richtet sich nach der Bildschirmhoehe: Ziel ist, dass eine Sektion
     moeglichst nicht hoeher als ein Bildschirm wird. */
  --section-y:     clamp(3.5rem, 9vh, 7rem);
  --gap:           clamp(1rem, 2vw, 1.75rem);
  /* Seitenabstand des Inhalts. Als Token, damit Karussells per negativem
     Margin sauber bis an den Displayrand ausbrechen koennen (full bleed). */
  --container-pad: 1.5rem;

  /* Bewegung */
  --ease:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Licht */
  --bevel:       inset 0 1px 0 rgba(255,255,255,0.06);
  --lift:        0 24px 60px -28px rgba(0,0,0,0.9);
  --lift-purple: 0 30px 70px -34px var(--purple-glow);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* Ankersprünge landen nicht unter dem fixen Header */
  /* clip statt hidden: unterbindet horizontales Scrollen genauso, zwingt aber
     die Y-Achse nicht in "auto" (das würde html/body zu eigenen Scroll-
     Containern machen und position:sticky im Dokument-Body kaputt machen —
     genau das brauchte der Stapel-Effekt der Ausstattungskarten). */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;   /* native Formularelemente (z.B. der Datepicker) folgen dem dunklen Theme */
}

/* Touch: kein 300ms-Verzögerungsfenster fürs Doppel-Tap-Zoom, eigener Tap-Flash
   statt der grauen Systemvorgabe (unsere :active/:hover-Zustände übernehmen das) */
a, button, .btn, input, textarea, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  background: var(--bg);
  color: var(--white);
  line-height: 1.65;
  overflow-x: clip;   /* siehe Begründung bei html { } weiter oben */
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
picture { display: block; }   /* sonst Grundlinien-Luecke unter dem Bild */
address { font-style: normal; }   /* Browser-Default kursiv aufheben */
::selection { background: var(--purple); color: #fff; }

/* ===== ACCESSIBILITY ===== */
:focus-visible {
  outline: 3px solid var(--purple-text);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 9999;
  background: var(--purple);
  color: #fff;
  padding: 0.9rem 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== TYPOGRAPHY =====
   Große Displaygrößen laufen eng gesperrt (modern), kleine Größen weit
   gesperrt (lesbar) — deshalb pro Ebene ein eigenes letter-spacing. */
h1, h2, h3, h4 {
  font-family: 'Barlow', 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.04;
  margin: 0 0 1rem;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Deutsche Komposita ("GROSSSTADTNIVEAU", "EINVERSTAENDNISERKLAERUNG") sind
   laenger als die Zeile schmaler Displays. break-word verhindert, dass sie
   aus dem Kasten laufen; die Silbentrennung weiter unten sorgt dafuer, dass
   der Umbruch an einer sinnvollen Stelle mit Trennstrich passiert. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
h1 { font-size: clamp(2.75rem, 6.4vw, 5.25rem); letter-spacing: -0.012em; }
h2 { font-size: clamp(1.95rem, 4.2vw, 3.1rem);  letter-spacing: -0.005em; }
h3 { font-size: 1.3rem;  letter-spacing: 0.02em; line-height: 1.15; }
h4 { font-size: 0.95rem; letter-spacing: 0.07em; }

p { color: var(--grey); margin: 0 0 1rem; text-wrap: pretty; }
a { color: var(--purple-text); text-decoration: none; }
strong { color: var(--white); }

/* ===== UTILITIES ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.center { text-align: center; }

/* Markenwort im Text — erbt die Schrift der Umgebung, nur eingefärbt */
.brand-logo {
  font-family: inherit;
  color: var(--purple-text);
  text-transform: uppercase;
  font-weight: inherit;
  letter-spacing: inherit;
  display: inline;
}
h1 .brand-logo, h2 .brand-logo, h3 .brand-logo { color: var(--purple); }

/* Eyebrow bewusst NICHT in der Logo-Schrift: die bricht bei 14px auseinander */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--purple-text);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  margin-bottom: 0.9rem;
  display: block;
}
.eyebrow.center { text-align: center; }

.accent { color: var(--purple-accent); }

/* ===== SIGNATURE: Live-Status (24/7) ===== */
.status-live {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
.status-live strong { color: var(--white); font-weight: 700; }
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 12px var(--purple-glow);
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--purple);
  animation: status-ring 2.6s var(--ease-out) infinite;
}
@keyframes status-ring {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.status-live--lg {
  font-size: 0.76rem;
  gap: 0.7rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border-lift);
  border-radius: 999px;
  background: rgba(8,8,11,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1.6rem;
  color: var(--white);
}
.status-live--lg .status-dot { width: 8px; height: 8px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-btn);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  cursor: pointer;
  border: 2px solid transparent;
  text-align: center;
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease),
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
/* Kein Abdimmen per opacity beim Hover — stattdessen echte Farb- und Tiefenänderung */
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-primary {
  background: var(--orange-surface);
  color: #fff;
  border-color: var(--orange-surface);
  box-shadow: 0 10px 30px -14px rgba(255,56,0,0.75);
}
.btn-primary:hover {
  background: var(--orange-surface-hover);
  border-color: var(--orange-surface-hover);
  box-shadow: 0 18px 40px -16px rgba(255,56,0,0.75);
}
.btn-secondary {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
  box-shadow: 0 10px 30px -14px var(--purple-glow);
}
.btn-secondary:hover { background: var(--purple-lift); border-color: var(--purple-lift); }

.btn-outline {
  background: transparent;
  border-color: var(--purple-border);
  color: var(--purple-text);
}
.btn-outline:hover {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 14px 34px -16px var(--purple-glow);
}
.btn-outline-white {
  background: transparent;
  border-color: var(--border-lift);
  color: var(--white);
}
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }

.btn-neutral {
  background: transparent;
  border-color: var(--border);
  color: var(--white);
}
.btn-neutral:hover { border-color: var(--purple-border); color: var(--purple-text); }

.btn-lg { padding: 1.15rem 2.5rem; font-size: 0.9rem; }

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(8,8,11,0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* .scrolled wird per JS gesetzt, sobald die Seite bewegt wird */
.site-header.scrolled {
  background: rgba(8,8,11,0.93);
  border-bottom-color: var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 1rem;
  transition: height 0.4s var(--ease);
}
.site-header.scrolled .header-inner { height: 64px; }
/* flex-shrink:0 verhindert, dass der Flex-Container das Logo bei knappem
   Platz (z.B. zwischen 961–1180px, wenn Nav + CTA eng werden) stauchen
   kann — sonst wirkt die Wortmarke verzerrt statt nur kleiner. */
.logo { flex-shrink: 0; }
.logo img { height: 26px; width: auto; }

.main-nav { display: flex; gap: 1.7rem; }
.main-nav a {
  position: relative;
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.72;
  padding: 0.35rem 0;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.main-nav a:hover,
.main-nav a.active { opacity: 1; color: var(--white); }
.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); }

.header-cta {
  white-space: nowrap;
  font-size: 0.72rem !important;
  padding: 0.7rem 1.3rem !important;
}
.header-status { margin-right: 0.4rem; }

/* Kopfzeile bei knapper Breite (961–1300px)
   Logo, fuenf Navigationspunkte, Statuspille und der CTA stehen alle auf
   'nowrap'. Zusammen brauchen sie mehr als die 1180px des Containers, also
   schob der CTA ueber den rechten Seitenrand hinaus und wurde vom
   overflow-x:clip des Bodys angeschnitten - bei 1280px Fensterbreite fehlten
   dem Button rund 58px. Statt umzubrechen (was die Kopfzeile zweizeilig
   machen wuerde) wird der Platzbedarf gestaffelt zurueckgenommen:
   erst die Abstaende, dann die dekorative Statuspille. */
@media (max-width: 1300px) {
  .header-inner { gap: 0.7rem; }
  .main-nav { gap: 1.05rem; }
  .header-cta { padding: 0.7rem 1rem !important; }
}
@media (max-width: 1180px) { .header-status { display: none; } }
@media (max-width: 1080px) {
  .main-nav { gap: 0.8rem; }
  .main-nav a { font-size: 0.7rem; letter-spacing: 0.045em; }
}

/* Burger mit echtem X-Morph */
.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 22px; height: 2px;
  margin-left: -11px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== HERO ===== */
.hero { background: var(--bg); border-bottom: 1px solid var(--border); }
.hero-inner { max-width: 860px; }
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 .sub { color: var(--purple); }
.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  max-width: 46ch;
  margin-bottom: clamp(0.85rem, 3vh, 2.2rem);
  color: #D6D6DE;
}

/* Kennzahlen: eigene Fläche, damit sie auf dem Foto lesbar bleiben */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  /* calc(8vh - 24px) trifft auf 1080px Hoehe die bisherigen 4rem und faellt
     auf flachen Laptops deutlich staerker ab, als ein reiner vh-Anteil es
     koennte - 31px bei 690px Hoehe gegenueber 41px bei 6vh. */
  margin-top: clamp(1.1rem, calc(8vh - 24px), 4rem);
  max-width: 1000px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--lift);
}
.stat {
  padding: clamp(1.05rem, 2.3vh, 1.6rem) clamp(1.3rem, 1.6vw, 1.7rem) clamp(1rem, 2.15vh, 1.5rem);
  background: rgba(10,10,14,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.stat h3,
.stat .stat-title {
  color: var(--purple-text);
  margin: 0 0 clamp(0.28rem, 0.6vh, 0.45rem);
  font-size: clamp(1.18rem, 2vh, 1.4rem);
  letter-spacing: 0.02em;
}
/* Als <p> statt <h3> braucht die Kennzahl die Displayschrift ausdruecklich —
   die Regel fuer h1–h4 greift hier nicht mehr. Optisch bleibt alles gleich,
   nur die Gliederungsebene der Seite stimmt jetzt. */
.stat .stat-title {
  font-family: 'Barlow', 'Montserrat', sans-serif;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.stat p:not(.stat-title) { font-size: clamp(0.8rem, 1.3vh, 0.86rem); margin: 0; line-height: 1.5; }

/* ===== SECTIONS ===== */
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--bg-alt); }
/* Zwei gleichfarbige Sektionen hintereinander bekommen eine Trennlinie,
   sonst verschwimmt der Abschnittswechsel zu einer einzigen Fläche. */
.section-alt + .section-alt { border-top: 1px solid var(--border); }
.section-lead { max-width: 62ch; margin: 0 auto 2.5rem; font-size: 1.05rem; }
/* Linksbuendige Variante: in Split-Layouts darf der Text nicht zentriert werden */
.section-lead--start { margin-left: 0; }
/* Kopfblock einer Sektion (Eyebrow + Ueberschrift) */
.section-head { max-width: 640px; }
.section--compact { padding: 3.5rem 0; }
.mt-lg { margin-top: 2.5rem; }
.flush { margin: 0; }

/* ===== EQUIPMENT ===== */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 3.5rem;
}
.equipment-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--bevel);
  transition: border-color 0.45s var(--ease), transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.equipment-card:hover {
  border-color: var(--purple-border);
  transform: translateY(-6px);
  box-shadow: var(--bevel), var(--lift), var(--lift-purple);
}
/* Feste Bildratio: verhindert Layoutsprünge beim Nachladen */
.equipment-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.equipment-card:hover img { transform: scale(1.05); }
.equipment-card h3 {
  padding: 1.3rem 1.4rem 0.4rem;
  margin: 0;
  color: var(--white);
  font-size: 1.05rem;
}
.equipment-card p {
  padding: 0 1.4rem 1.5rem;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ===== ADVANTAGES =====
   Ein einziges Rahmenraster: die 1px-Lücke IST die Linie. Die Zellen selbst
   bekommen keinen eigenen Rand, sonst entstehen doppelte 2px-Nähte. */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 3rem 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.advantage {
  background: var(--bg-card);
  padding: 1.15rem 1.4rem 1.15rem 3rem;
  font-weight: 600;
  font-size: 0.9rem;
  position: relative;
  transition: background-color 0.4s var(--ease);
}
.advantage:hover { background: var(--bg-raise); }
.advantage::before {
  content: "";
  position: absolute;
  left: 1.2rem; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--purple-dim);
  border: 1px solid var(--purple-border);
}
.advantage::after {
  content: "";
  position: absolute;
  left: 1.53rem; top: 50%;
  width: 4px; height: 8px;
  margin-top: -5px;
  border: solid var(--purple-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.studio-verbund {
  position: relative;
  text-align: center;
  max-width: 820px;
  margin: 3rem auto 0;
  padding: 2.75rem 2.5rem;
  border: 1px solid var(--purple-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(110,18,245,0.22), transparent 62%),
    var(--bg-card);
  box-shadow: var(--bevel), var(--lift);
}
.studio-verbund--wide { text-align: left; max-width: none; }
.studio-verbund h3 { color: var(--white); }
.studio-verbund p { color: #DCDCE4; margin: 0; }

/* ===== PRICING ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 3.5rem;
  align-items: stretch;
}
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem 2rem;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--bevel);
  transition: border-color 0.45s var(--ease), transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.price-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-lift);
  box-shadow: var(--bevel), var(--lift);
}
.price-card.highlighted {
  border-color: var(--purple);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(110,18,245,0.20), transparent 60%),
    var(--bg-card);
  box-shadow: var(--bevel), var(--lift), var(--lift-purple);
}
.price-card.highlighted:hover {
  box-shadow: var(--bevel), var(--lift), 0 36px 80px -34px var(--purple-glow);
}
.price-card h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }

.badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--purple);
  color: #fff;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  box-shadow: 0 8px 24px -10px var(--purple-glow);
}
.price-period { font-size: 0.78rem; margin-bottom: 1.4rem; color: var(--grey-dim); }

/* Betrag und Zeitraum gestapelt statt auf einer Grundlinie —
   "44,90 € alle 28 Tage" in einer Zeile las sich vorher wie Fließtext. */
.price {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(2.8rem, 4.4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;   /* Ziffern gleich breit, Beträge zittern nicht beim Vergleichen */
  color: var(--white);
  margin-bottom: 1.6rem;
}
.price span {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.price-card .btn { margin-bottom: 1.8rem; width: 100%; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 0.5rem; text-align: left; }
.price-card li {
  padding: 0.65rem 0 0.65rem 1.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--grey);
  position: relative;
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 0.2rem; top: 1.05rem;
  width: 5px; height: 9px;
  border: solid var(--purple-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ===== ABOUT ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--lift);
}

/* ===== STEPS ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.step { text-align: center; padding: 2.5rem 2rem; background: var(--bg-card); }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--purple-dim);
  border: 1px solid var(--purple-border);
  color: var(--purple-text);
  font-family: 'Barlow', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}

/* ===== FAQ ===== */
.faq-list { max-width: 820px; margin: 3rem auto 0; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.faq-item:hover { border-color: var(--border-lift); }
.faq-item.open { border-color: var(--purple-border); background: var(--bg-raise); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-icon {
  color: var(--purple-text);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--purple-dim);
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease), color 0.45s var(--ease);
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--purple); color: #fff; }

/* Grid-Trick statt max-height: animiert auf beliebige Höhe, ohne Abschneiden */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > * { overflow: hidden; min-height: 0; }
/* padding-bottom NUR im offenen Zustand: overflow:hidden kappt zwar den Text,
   nicht aber das Padding selbst — ohne diese Trennung bleibt bei geschlossener
   Antwort ein 21px hoher Padding-Rest sichtbar (min-content-Höhe der Box). */
.faq-answer p { padding: 0 1.5rem; margin: 0; font-size: 0.94rem; }
.faq-item.open .faq-answer p { padding-bottom: 1.35rem; }

/* ===== LOCATION ===== */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem;
}
.location-info h3 { margin-bottom: 0.8rem; }
.location-info h4 {
  color: var(--purple-text);
  margin-top: 2rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}
.location-map {
  overflow: hidden;
  min-height: 380px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  /* isolation:isolate kapselt Leaflets eigene z-index-Werte (Panes/Controls
     laufen intern bis 1000) in eine eigene Stacking-Context. So kann die
     Karte beim Scrollen nie über den fixen Header (z-index:200) rutschen. */
  isolation: isolate;
}

/* ===== CTA FINAL ===== */
.cta-final {
  position: relative;
  padding: var(--section-y) 0;
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(110,18,245,0.20), transparent 60%),
    var(--bg-alt);
  border-top: 1px solid var(--purple-border);
}
.cta-final h2 { max-width: 900px; margin: 0 auto 1.3rem; }
.cta-final p { max-width: 62ch; margin: 0 auto 2.2rem; font-size: 1.05rem; }

/* ===== FOOTER ===== */
.site-footer {
  background: #050507;
  padding: 4.5rem 0 1.75rem;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 2rem;
  margin-bottom: 3rem;
}
/* Ohne diese beiden Zeilen bleibt minmax(0,1fr) wirkungslos: die Spalte
   waere zwar schmal genug, der Text ragte dann einfach heraus. */
.footer-grid a,
.footer-grid address,
.footer-cookie-btn { overflow-wrap: break-word; hyphens: auto; }
.footer-logo { height: 22px; width: auto; margin-bottom: 1.3rem; }
.footer-grid h4,
.footer-grid .footer-heading {
  color: var(--purple-text);
  font-size: 0.72rem;
  margin-bottom: 1.2rem;
  letter-spacing: 0.18em;
}
.footer-grid a {
  display: block;
  color: var(--grey);
  font-size: 0.86rem;
  margin-bottom: 0.7rem;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-grid a:hover { color: var(--white); transform: translateX(3px); }
.footer-grid address {
  color: var(--grey);
  font-size: 0.86rem;
  line-height: 1.8;
  margin-bottom: 0.8rem;
}
.footer-cookie-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.2rem;
  color: var(--grey);
  font-size: 0.86rem;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: color 0.3s var(--ease);
}
.footer-cookie-btn:hover { color: var(--white); }
.footer-grid p { font-size: 0.86rem; }
.footer-bottom {
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--grey-dim);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* ===== HERO / SUBPAGE HERO ===== */
.subpage-hero {
  position: relative;
  /* Die Innenabstaende folgen der Viewport-HOEHE, nicht festen Pixeln.
     Vorher kosteten 160+120px auf einem 768px hohen Laptop allein 37 Prozent
     der Bildhoehe - der Hauptbutton landete dadurch 5px unter der Falz. */
  padding: clamp(72px, 11vh, 160px) 0 clamp(44px, 8vh, 120px);
  /* Skaliert bis zum unteren Bildschirmrand statt auf eine feste Höhe —
     100svh berücksichtigt auf Mobilgeräten die ein-/ausblendende Browser-UI,
     100vh bleibt als Fallback für Browser ohne svh-Unterstützung. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}
.subpage-hero .eyebrow { margin-bottom: 1rem; }
.subpage-hero .container { position: relative; z-index: 2; width: 100%; }
.subpage-hero .hero-text { max-width: 640px; }

/* Die Schlagzeile darf nicht allein an der Breite haengen: ein
   1366x768-Laptop hat reichlich Breite, aber kaum Hoehe. min() nimmt jeweils
   den knapperen der beiden Werte, deshalb schrumpft die Zeile nur dort, wo
   vertikal wirklich Platz fehlt - auf 1920x1080 bleibt sie unveraendert. */
.hero h1,
.subpage-hero h1 {
  font-size: clamp(2.25rem, min(6.4vw, 8vh), 5.25rem);
  margin-bottom: clamp(0.85rem, 2.1vh, 1.4rem);
}

/* Gleiches Prinzip fuer die Abstaende unter Statuspille und Unterzeile. */
.subpage-hero .status-live--lg { margin-bottom: clamp(0.9rem, 2vh, 1.5rem); }
.subpage-hero .hero-text .btn { margin-top: 0.6rem; }

/* Hero linksbündig über die volle Breite */
.hero > .container,
.subpage-hero > .container {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(1.5rem, 5vw, 5rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
}
/* .hero-inner (nur index.html) soll die Textspalte trotzdem auf 860px
   begrenzen. Braucht mehr Spezifität als ".hero > .container" oben,
   sonst gewinnt dessen "max-width:none" und die Kennzahlen-Reihe
   spannt sich auf sehr breiten Bildschirmen unbegrenzt auf. */
.hero > .container.hero-inner { max-width: 860px; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--hero-img, none);
  /* Pro Seite überschreibbar (--hero-size): "cover" füllt exakt die Fläche —
     passt Bild- und Containerverhältnis fast zusammen, bleibt dabei aber
     KEIN horizontaler Spielraum übrig, um seitlich auszuweichen (100% der
     Bildbreite ist dann sowieso sichtbar). --hero-size etwas über "cover"
     hinaus (z. B. 118%) schafft absichtlich Spielraum, damit --hero-pos
     eine störende Wandgrafik am Rand wirklich aus dem Ausschnitt schieben
     kann, statt sie nur zu verschieben. */
  background-size: var(--hero-size, cover);
  background-position: var(--hero-pos, center);
  background-repeat: no-repeat;
}
/* Overlay: links dunkel für den Text, rechts kräftiger als zuvor,
   damit die Kennzahlen auf dem Foto nicht verschwinden. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(6,6,9,0.95) 0%,
      rgba(6,6,9,0.88) 40%,
      rgba(6,6,9,0.70) 72%,
      rgba(6,6,9,0.62) 100%),
    linear-gradient(to top,
      rgba(6,6,9,0.85) 0%,
      rgba(6,6,9,0.25) 45%,
      rgba(6,6,9,0.45) 100%);
}

/* ===== SPLIT LAYOUT ===== */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.split-layout.wide-right { grid-template-columns: 5fr 7fr; }

.split-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.split-panels > div { padding: 3rem 2.5rem; background: var(--bg-card); }

/* ===== CONTACT ===== */
.contact-section {
  padding: var(--section-y) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.contact-form-wrap {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 2.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--bevel);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* ===== REQUIREMENTS LIST ===== */
.req-list { list-style: none; padding: 0; margin: 2rem 0; }
.req-list li {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--border);
}
.req-list li:first-child { border-top: 1px solid var(--border); }
.req-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--purple-dim);
  border: 1px solid var(--purple-border);
  color: var(--purple-text);
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  flex-shrink: 0;
}
.req-content h4 { margin: 0 0 0.3rem; color: var(--white); font-size: 1rem; letter-spacing: 0.03em; }
.req-content p { margin: 0; font-size: 0.9rem; }

/* ===== FORM ===== */
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.form-group label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grey);
}
.form-group input,
.form-group textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  padding: 0.9rem 1rem;
  outline: none;
  width: 100%;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--grey-dim); }
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-dim);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-code-hint { font-size: 0.8rem; color: var(--grey); margin: 0; }
.form-info-box {
  background: var(--purple-dim);
  border: 1px solid var(--purple-border);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  font-size: 0.92rem;
}
.form-info-box p { margin: 0; color: var(--white); }

/* ===== PARTNER =====
   Statt Logos (unterschiedliche Markenvorgaben, teils schlecht lesbar in
   kleiner Groesse) zeigen wir die Partnernamen als reinen Text plus einem
   Button zum Anmeldeformular bzw. zur Firmenfitness-Seite. */
.partner-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  margin: 1.6rem 0;
}
.partner-names--center { justify-content: center; }
.partner-names span {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.partner-names span:not(:last-child)::after {
  content: "·";
  margin-left: 1.1rem;
  color: var(--purple-text);
}

/* Kartenliste fuer Split-Layouts, in denen die reine Textzeile zu leer
   wirkt (z.B. Startseite) — gleiche Bauweise wie .advantages-grid: die
   1px-Luecke zwischen den Karten IST die Trennlinie. */
.partner-list {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.partner-list li {
  position: relative;
  background: var(--bg-card);
  padding: 1.3rem 1.5rem 1.3rem 4.4rem;
  font-family: 'Barlow', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  transition: background-color 0.4s var(--ease);
}
.partner-list li:hover { background: var(--bg-raise); }
.partner-list li::before {
  content: "";
  position: absolute;
  left: 1.5rem; top: 50%;
  width: 34px; height: 34px;
  margin-top: -17px;
  border-radius: var(--radius-sm);
  background: var(--purple-dim);
  border: 1px solid var(--purple-border);
}
.partner-list li::after {
  content: "";
  position: absolute;
  left: 2.62rem; top: 50%;
  width: 8px; height: 15px;
  margin-top: -9px;
  border: solid var(--purple-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ===== WECHSELPRAEMIE ===== */
.praemie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 3rem 0;
}
.praemie-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem;
  text-align: center;
  box-shadow: var(--bevel);
  transition: border-color 0.45s var(--ease), transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.praemie-card:hover { transform: translateY(-5px); box-shadow: var(--bevel), var(--lift); }
.praemie-card.highlight {
  border-color: var(--purple-border);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(110,18,245,0.20), transparent 62%),
    var(--bg-card);
  box-shadow: var(--bevel), var(--lift-purple);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 260px;
}
.praemie-months {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(3.5rem, 7vw, 5rem);
  color: var(--purple-text);
  line-height: 0.9;
  margin-bottom: 0.8rem;
  letter-spacing: -0.03em;
}
.praemie-card h3,
.praemie-card h4 {
  color: var(--white);
  margin: 0.5rem 0;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}
.praemie-card p { margin: 0; font-size: 0.9rem; }

.tutorial-steps { margin: 3rem 0 0; }
.tutorial-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--border);
}
.tutorial-step:first-child { border-top: 1px solid var(--border); }
.t-num {
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--purple-dim);
  border: 1px solid var(--purple-border);
  color: var(--purple-text);
  font-family: 'Barlow', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  flex-shrink: 0;
}
.t-content h3,
.t-content h4 { color: var(--white); margin: 0 0 0.4rem; font-size: 1rem; letter-spacing: 0.03em; }
.t-content p { margin: 0; font-size: 0.92rem; }
/* :not(.btn) verhindert, dass Buttons innerhalb von .t-content (z.B. "Jetzt
   Testzeitraum starten") ihre eigene .btn-primary/.btn-outline-Farbe verlieren —
   ohne die Ausnahme gewinnt diese Regel sonst gegen .btn-primary { color:#fff }. */
.t-content a:not(.btn) { color: var(--purple-text); }

.email-box {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--purple-border);
  border-radius: var(--radius);
  padding: 0.85rem 1.4rem;
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--purple-text);
  font-size: 0.95rem;
}

/* ===== STICKY MOBILE CTA =====
   Auf Smartphones dauerhaft erreichbar — Standard bei Studioketten, weil der
   Abschluss sonst hinter mehreren Bildschirmlängen Scrollen verschwindet. */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 190;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(8,8,11,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.sticky-cta .btn { flex: 1; padding: 0.85rem 1rem; font-size: 0.72rem; }
.sticky-cta .btn-neutral { flex: 0 0 auto; padding: 0.85rem 1.1rem; }

/* ===== SCROLL-REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== LEAFLET / OPENSTREETMAP ===== */
#leaflet-map {
  width: 100%;
  height: 100%;
  min-height: 380px;
  background: var(--bg-card);
}
.leaflet-container { font-family: 'Montserrat', sans-serif !important; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--bg-card) !important;
  color: var(--white) !important;
  border: 1px solid var(--purple-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.leaflet-popup-content { color: var(--white); font-weight: 600; margin: 12px 14px !important; }
.leaflet-popup-content a { color: var(--purple-text); }
.leaflet-container a.leaflet-popup-close-button { color: var(--white) !important; }

/* ===== CONSENT CHECKBOX ===== */
.form-consent {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--grey);
  cursor: pointer;
  line-height: 1.55;
}
.form-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--purple);
  border-radius: 5px;
  background: var(--bg);
  cursor: pointer;
  position: relative;
  margin-top: 2px;
  transition: background-color 0.2s var(--ease);
}
.form-consent input[type="checkbox"]:checked { background: var(--purple); }
.form-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-consent a { color: var(--purple-text); text-decoration: underline; }
.form-hp { position: absolute; left: -9999px; }

/* ===== COOKIE BANNER ===== */
.cookie-banner {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom)); left: 1rem; right: 1rem;
  z-index: 500;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-raise);
  border: 1px solid var(--purple-border);
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 0.86rem; color: #DCDCE4; margin: 0 0 1.1rem; }
.cookie-banner-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cookie-banner button {
  flex: 1;
  min-width: 120px;
  font-family: 'Montserrat', sans-serif;
  padding: 0.75rem 1rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--purple-border);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--purple-text);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cookie-banner button.primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.cookie-banner button.reject:hover { background: var(--purple-dim); }
.cookie-banner button.primary:hover { background: var(--purple-lift); border-color: var(--purple-lift); }

/* ===== CONSENT GATE ===== */
.consent-gate {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.1rem;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.consent-gate p { max-width: 360px; margin: 0; font-size: 0.88rem; }
.location-map .consent-gate { flex: 1; border: none; border-radius: 0; width: 100%; }

/* ===== LEGAL / TEXT PAGE ===== */
.legal-page { padding: 150px 0 var(--section-y); }
.legal-page .container { max-width: 780px; }
.legal-page h1 { margin-bottom: 2rem; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.legal-page h2 { margin: 2.75rem 0 1rem; font-size: 1.35rem; color: var(--purple-text); }
.legal-page h3 { margin: 1.7rem 0 0.6rem; font-size: 1.02rem; color: var(--white); }
.legal-page p, .legal-page li { color: var(--grey); font-size: 0.95rem; }
.legal-page ul { padding-left: 1.4rem; }
.legal-page a { color: var(--purple-text); text-decoration: underline; }
.legal-page address { color: var(--white); line-height: 1.7; }
/* Offener Platzhalter im Fliesstext — bewusst auffaellig, damit er beim
   Livegang nicht als unscheinbarer grauer Text uebersehen wird. */
.todo {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px dashed var(--orange);
  border-radius: 6px;
  background: rgba(255, 56, 0, 0.10);
  color: #FFB59E;
  font-size: 0.88em;
  font-weight: 600;
}
.legal-page .lead-note { margin-top: -1rem; font-size: 0.85rem; }
.legal-page .legal-updated { margin-top: 2.5rem; }

.legal-page .placeholder-block {
  border: 1px dashed var(--purple-border);
  background: var(--purple-dim);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin: 1rem 0;
  color: var(--white);
  font-size: 0.9rem;
}

/* ===== STATUSSEITEN (404, Danke) =====
   .error-page bleibt als Aliasname bestehen, damit vorhandene Verweise
   weiterhin greifen; .status-page ist der neutrale Name fuer beides. */
.status-page,
.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 1.5rem var(--section-y);
}
.status-page__text { max-width: 52ch; margin: 0 auto 2rem; }

.status-page .code,
.error-page .code {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(6rem, 18vw, 12rem);
  color: var(--purple);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}

/* ===== DATENTABELLE =====
   Ersetzt die zuvor pro Zelle hartcodierten Inline-Styles der Unterseiten. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  min-width: 520px;   /* darunter wird im .table-wrap gescrollt statt gequetscht */
  font-variant-numeric: tabular-nums;   /* Beträge/Zeiträume untereinander sauber ausgerichtet */
}
.data-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--grey);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.data-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--grey);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td:first-child { color: var(--white); font-weight: 600; }
.data-table .cell-accent { color: var(--orange); font-weight: 800; }

/* ===== INFO- UND ZUSAMMENFASSUNGSKASTEN ===== */
.summary-box {
  margin-top: 3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 2rem;
  box-shadow: var(--bevel);
}
.summary-box h3 { margin-bottom: 1.3rem; }
.summary-box > p:last-child { margin: 1.3rem 0 0; font-size: 0.84rem; }

/* ===== KLEINTEILE, die vorher inline gesetzt waren ===== */
.praemie-label {
  color: var(--purple-text);
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 0.2rem;
}
.praemie-card.highlight .praemie-label { color: var(--orange); }

.btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-block { width: 100%; }
.btn-row--start { justify-content: flex-start; margin-top: 1.8rem; }
.btn-sm { font-size: 0.72rem; padding: 0.7rem 1.2rem; }

/* Ueberschrift innerhalb eines Panels — kleiner als eine Sektionsueberschrift */
.panel-title { font-size: 1.4rem; margin-bottom: 1.5rem; }

/* Hervorgehobener Hinweiskasten */
.info-box {
  margin-top: 1.5rem;
  padding: 1.4rem;
  border: 1px solid var(--purple-border);
  border-radius: var(--radius);
  background: var(--purple-dim);
}
.info-box p { margin: 0 0 0.9rem; color: var(--white); font-size: 0.9rem; }
.info-box strong { color: var(--purple-text); }
.info-box p:last-child { margin-bottom: 0; }

/* Sektionen, die direkt aneinander anschliessen sollen */
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.btn-inline { margin-top: 0.8rem; }
.text-accent { color: var(--orange); }
.narrow { max-width: 780px; margin-left: auto; margin-right: auto; }
.footnote { font-size: 0.82rem; color: var(--grey-dim); }
.lead-lg { font-size: 1.05rem; }

@media (max-width: 480px) {
  .summary-box { padding: 1.4rem; }
  .btn-row .btn { width: 100%; }
}

/* ==========================================================================
   MOBILE TOUCH-ZIELE
   Auf Zeigegeräten mit grober Auflösung (Finger) brauchen Bedienelemente
   mindestens 44x44 px Trefferfläche. Die Schriftgrößen bleiben unverändert,
   vergrößert wird nur der anklickbare Bereich.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

  /* Footer-Navigation: war 23 px hoch, die Links standen dicht untereinander */
  .footer-grid a,
  .quick-links a,
  .footer-cookie-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }
  .footer-grid a:hover { transform: none; }   /* Verschieben ohne Mauszeiger sinnlos */

  /* Fließtext-Links (FAQ, Kontakt, Datenschutzhinweise): die Zeilenhöhe
     lässt sich nicht aufblähen, ohne den Textfluss zu zerreißen. Stattdessen
     ein unsichtbarer Rahmen um die Trefferfläche.

     Das :not(.btn) ist zwingend: ohne die Ausnahme greift diese Regel auch
     auf echte Buttons in denselben Containern (z.B. "Route zum Studio" im
     Kontaktblock) und ersetzt deren Innenabstand durch 0.35em/0 — der
     Button fiel dadurch auf 29px Höhe ohne Seitenluft zusammen. */
     Bewusst generisch ueber die Textcontainer (p, li, address, label)
     statt ueber eine Liste einzelner Sektionsklassen: jeder neue Fliesstext-
     Link ist damit automatisch abgedeckt, ohne dass die Regel nachgepflegt
     werden muss. */
  p a:not(.btn),
  li a:not(.btn),
  address a:not(.btn),
  label a:not(.btn),
  .email-box a:not(.btn) {
    position: relative;
    display: inline-block;
    padding: 0.35em 0;
  }
  p a:not(.btn)::after,
  li a:not(.btn)::after,
  address a:not(.btn)::after,
  label a:not(.btn)::after,
  .email-box a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Sicherheitsnetz: jeder Button erfuellt die 44px unabhaengig davon, in
     welchem Container er steht. */
  .btn { min-height: 44px; }

  /* Logo im Kopfbereich: Bildhöhe 26 px, Trefferfläche jetzt volle Kopfhöhe */
  .site-header .logo {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Kartensteuerung von Leaflet: die Standardknöpfe sind 30 px */
  /* Eingabefelder: unter 16px zoomt iOS Safari beim Antippen automatisch
     hinein, die Seite springt und der Nutzer muss zurückzoomen. */
  .form-group input,
  .form-group textarea,
  .form-group select { font-size: 16px; }

  /* Kompakte Buttons kamen auf 41 px */
  .btn-sm,
  .cookie-banner button { min-height: 44px; }

  /* Das Kästchen selbst war 20 px. Der umschließende Label-Bereich ist zwar
     ebenfalls klickbar, trotzdem trifft man ein größeres Kästchen sicherer. */
  .form-consent input[type="checkbox"] { width: 26px; height: 26px; }
  .form-consent input[type="checkbox"]:checked::after { left: 7px; top: 3px; width: 6px; height: 13px; }

  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 1.3rem !important;
  }
  .leaflet-popup-close-button {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.4rem !important;
  }
}

/* ===== HINWEISBLOCK =====
   Sachliche Einordnung, kein Warnhinweis: durchgezogener Rand statt der
   gestrichelten Linie, die vorher Platzhaltertexte markierte. */
.hinweis-block {
  border: 1px solid var(--purple-border);
  background: var(--purple-dim);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  margin: 2rem 0 0;
}
.hinweis-block h3 {
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.7rem;
  color: var(--white);
}
.hinweis-block p { font-size: 0.9rem; margin-bottom: 0.8rem; }
.hinweis-block p.flush { margin-bottom: 0; }

@media (max-width: 720px) {
  .hinweis-block { padding: 1.3rem 1.2rem; }
}

/* Rechtsbereich im verschlankten Fussbereich (404, Danke).
   Die Pflichtangaben muessen von jeder Seite aus erreichbar sein, auch von
   denen ohne die grosse Linkspalte. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin-top: 0.9rem;
}
.footer-legal a,
.footer-legal .footer-cookie-btn {
  color: var(--grey);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  margin: 0;
}
.footer-legal a:hover,
.footer-legal .footer-cookie-btn:hover { color: var(--white); }

/* ===== PREISHINWEISE UNTER DEN TARIFKARTEN =====
   Die Anmeldegebuehr und die kostenfreien ersten zwei Wochen gehoeren zum
   Preis, nicht ins Kleingedruckte einer Unterseite: wer hier Beitraege
   vergleicht, muss beides sehen, um auf den tatsaechlichen Gesamtpreis zu
   kommen. */
.tarif-hinweis {
  margin: 2.25rem auto 0;
  max-width: 700px;
  font-size: 0.95rem;
  color: var(--grey);
}
.tarif-hinweis strong { color: var(--white); font-weight: 700; }
.preis-fussnote {
  margin: 1rem auto 0;
  max-width: 640px;
  font-size: 0.82rem;
  color: var(--grey-dim);
}

/* ===== NEBENTARIFE (Studierende, Tagespass) =====
   Bewusst keine vierte Preiskarte: die drei Hauptkarten vergleichen dieselbe
   Leistung ueber verschiedene Laufzeiten, das ist ihre Ordnung. Studententarif
   und Tagespass folgen einer anderen Logik (Status bzw. gar keine
   Mitgliedschaft) und stehen deshalb als eigenes Paar darunter. */
.extra-tarife { margin-top: 2.5rem; gap: 1.25rem; }
.tarif-extra {
  padding: 1.9rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--lift);
}
.tarif-extra .eyebrow { margin-bottom: 0.6rem; }
.tarif-extra h3 {
  font-size: 2rem;
  margin-bottom: 0.7rem;
  letter-spacing: -0.01em;
}
.tarif-extra-unit {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--grey);
  margin-top: 0.35rem;
}
.tarif-extra p { font-size: 0.92rem; margin-bottom: 1.3rem; }
.tarif-extra .btn { width: 100%; text-align: center; }

@media (max-width: 720px) {
  .extra-tarife { margin-top: 2rem; }
  .tarif-extra { padding: 1.6rem 1.35rem; }
  .tarif-extra h3 { font-size: 1.75rem; }
}

/* ==========================================================================
   RASTERSPALTEN DUERFEN SCHRUMPFEN

   Eine Spalte mit "1fr" bedeutet minmax(auto, 1fr) — das "auto" ist die
   min-content-Breite. Ein einzelnes langes Wort setzt damit eine Untergrenze,
   die das ganze Raster ueber den Seitenrand schieben kann: "GROSSSTADTNIVEAU"
   in der Ueber-uns-Ueberschrift machte den Block auf 320px Breite 306px statt
   283px breit, "COOKIE-EINSTELLUNGEN" tat dasselbe im Fussbereich. Sichtbar
   war davon nur ein Anschnitt, weil overflow-x:clip den Rest verschluckt.

   min-width:0 auf den Rasterkindern nimmt dieses Vetorecht zurueck; der Text
   bricht dann um, statt die Spalte aufzudehnen. An einer Stelle gepflegt
   statt an drei Dutzend "1fr" verteilt.
   ========================================================================== */
.about-grid > *,
.split-layout > *,
.split-panels > *,
.location-grid > *,
.advantages-grid > *,
.equipment-grid > *,
.pricing-grid > *,
.praemie-grid > *,
.steps-grid > *,
.hero-stats > *,
.footer-grid > *,
.form-grid-2 > *,
.extra-tarife > *,
.tutorial-step > *,
.req-list li > * { min-width: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .price-card.highlighted { transform: none; }
  .location-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .main-nav, .header-cta { display: none; }
  .burger { display: block; }
  .main-nav.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-alt);
    flex-direction: column;
    padding: 1.25rem 1.5rem 1.75rem;
    border-bottom: 1px solid var(--border);
    gap: 0.25rem;
    z-index: 300;
  }
  .main-nav.open a {
    opacity: 1;
    font-size: 0.95rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
  }
  .main-nav.open a:last-child { border-bottom: none; }
  .main-nav.open a::after { display: none; }

  /* Scrollsperre, solange das Menü offen ist */
  body.nav-offen { overflow: hidden; }

  /* Auf Tablets ist genug Breite für drei Spalten; erst darunter stapeln */
  .hero-stats { grid-template-columns: repeat(3, 1fr); margin-top: 2.75rem; }
  .equipment-grid { grid-template-columns: repeat(2, 1fr); }
  .advantages-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .split-layout,
  .split-layout.wide-right { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-panels { grid-template-columns: 1fr; }
  .split-panels > div { padding: 2.2rem 1.6rem; }
  .praemie-grid { grid-template-columns: 1fr; }

  /* Sticky-CTA erscheint genau dort, wo der Header-CTA verschwindet.
     Der Platz dafuer wird nur auf Seiten reserviert, die die Leiste auch haben. */
  .sticky-cta { display: flex; }
  body:has(.sticky-cta) { padding-bottom: var(--sticky-cta-h, 76px); }
  body:has(.sticky-cta) .cookie-banner { bottom: calc(var(--sticky-cta-h, 76px) + 10px); }

  /* Der Hero endet genau an der Oberkante der Leiste - wie auf den
     Kampagnenseiten. --sticky-cta-h misst script.js. */
  body:has(.sticky-cta) .subpage-hero {
    min-height: calc(100vh - var(--sticky-cta-h, 76px));
    min-height: calc(100svh - var(--sticky-cta-h, 76px));
  }

  /* Sobald die Sticky-CTA-Leiste sichtbar ist, doppelt sich der Haupt-CTA
     im Hero der Startseite (zwei "14 Tage testen"-Buttons direkt beim
     Einstieg). Der nicht-sticky Button im Hero fliegt hier raus. */
  .hero .hero-cta-inline { display: none; }
}

@media (max-width: 720px) {
  .subpage-hero {
    padding: clamp(104px, 17vh, 128px) 0 clamp(64px, 11vh, 84px);
    min-height: 100vh;
    min-height: 100svh;
  }
  /* Kleinere Bildfassung fürs Handy; fällt auf die grosse zurück,
     falls eine Seite keine kleine Variante hinterlegt hat. */
  .hero-media { background-image: var(--hero-img-sm, var(--hero-img, none)); }
  /* Auf schmalen Displays läuft der Text über die volle Bildbreite —
     dort braucht es ein durchgehendes Overlay statt des Seitenverlaufs. */
  .hero-media::after {
    background: linear-gradient(to bottom,
      rgba(6,6,9,0.72) 0%,
      rgba(6,6,9,0.86) 50%,
      rgba(6,6,9,0.95) 100%);
  }
  .hero-sub { max-width: none; }
}

@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 1.6rem; }
}

@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  :root { --container-pad: 1.15rem; }
  .btn-lg { padding: 1rem 1.5rem; font-size: 0.82rem; }
  .stat { padding: 1.4rem 1.3rem; }
  .price-card { padding: 2.2rem 1.5rem 1.75rem; }
  .studio-verbund { padding: 2rem 1.4rem; }
}

/* ==========================================================================
   MOBILE-OPTIMIERUNG
   Ziel: Scrolltiefe deutlich reduzieren, ohne Inhalte zu streichen.
   Drei Hebel, in dieser Reihenfolge wirksam:
   1. kompakterer vertikaler Rhythmus (Sektionsabstaende)
   2. horizontale Swipe-Karussells statt endloser Kartenstapel
   3. mehrspaltige Listen, wo der Text kurz genug ist
   ========================================================================== */
@media (max-width: 720px) {

  /* --- 1. Vertikaler Rhythmus ------------------------------------------
     Auf dem Desktop tragen grosse Abstaende die Komposition. Auf 390px
     Breite kosten dieselben Abstaende ueber ein Dutzend Sektionen mehrere
     Bildschirmlaengen, ohne etwas beizutragen. */
  :root {
    --section-y: clamp(2.5rem, 6.5svh, 3.25rem);
    --gap: 0.9rem;
  }
  .section--compact { padding: 2.25rem 0; }
  .mt-lg { margin-top: 1.6rem; }
  .section-lead { margin-bottom: 1.6rem; font-size: 1rem; }
  h2 { margin-bottom: 0.75rem; }

  /* --- 2. Swipe-Karussell ----------------------------------------------
     .m-scroller bricht per negativem Margin bis an den Displayrand aus,
     das Padding gleicht das innen wieder aus. Dadurch liegt die erste
     Karte buendig am Textrand, die naechste ragt sichtbar herein — dieser
     "Peek" ist die eigentliche Wischaufforderung. Ohne ihn wirkt die
     Reihe wie eine statische Karte und wird nicht bedient. */
  .m-scroller {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.85rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    padding-bottom: 0.4rem;
  }
  .m-scroller::-webkit-scrollbar { display: none; }
  .m-scroller > * {
    scroll-snap-align: start;
    flex: 0 0 84%;
    max-width: 340px;
  }
  /* Ausstattung: 6 Karten untereinander waren 2.560px Scrollstrecke. */
  .equipment-grid { display: flex; margin-top: 1.8rem; }
  .equipment-card { display: flex; flex-direction: column; }
  .equipment-card p { padding-bottom: 1.2rem; }

  /* Tarife: drei hohe Karten untereinander waren ueber 2.000px. */
  .pricing-grid {
    display: flex;
    margin-top: 2rem;
    max-width: none;
    align-items: stretch;
  }
  .price-card { padding: 2rem 1.5rem 1.6rem; }
  .price-card ul { margin-top: auto; }

  /* Praemien-Karten (Wechselpraemie) */
  .praemie-grid { display: flex; margin: 2rem 0; }

  /* Der Hero hat auf dem Desktop bewusst mehr Seitenluft. Auf dem Handy
     wuerde derselbe Wert die Heroschrift gegen den restlichen Seiten-
     rhythmus verschieben — hier also dieselbe Kante wie ueberall. */
  .hero > .container,
  .subpage-hero > .container {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  /* Kennzahlen im Hero: nebeneinander statt gestapelt, damit der Hero
     exakt eine Bildschirmhoehe bleibt. Kein overflow-Reset hier — das
     overflow-x:auto von .m-scroller wuerde sonst ueberschrieben und die
     Reihe liesse sich nicht mehr wischen. */
  .hero-stats {
    display: flex;
    margin-top: 2rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-stats > .stat {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--lift);
  }

  /* --- 3. Mehrspaltige Listen ------------------------------------------ */
  /* 12 kurze Schlagworte brauchen auf 390px keine 12 Zeilen. */
  .advantages-grid { grid-template-columns: repeat(2, 1fr); margin: 2rem 0; }
  .advantage {
    padding: 0.95rem 0.8rem 0.95rem 2.5rem;
    font-size: 0.82rem;
  }
  /* Haken auf Hoehe der ERSTEN Textzeile statt mittig zum Block: bei zwei-
     und dreizeiligen Eintraegen ("Gepflegt, sauber und modern") schwebte er
     sonst neben der Wortmitte und die Spalte wirkte unruhig. */
  .advantage::before { left: 0.75rem; top: 19px; margin-top: 0; width: 14px; height: 14px; }
  .advantage::after  { left: 1.03rem; top: 23px; margin-top: 0; width: 3px; height: 7px; }

  /* Footer: die drei Linkgruppen nebeneinander. Zweispaltig braeuchte fuer
     drei Gruppen zwei Reihen und verschenkt dabei ein halbes Feld — das
     waren allein hier ueber 250px Scrollstrecke. */
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem 0.9rem;
    margin-bottom: 2rem;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid h4,
  .footer-grid .footer-heading { font-size: 0.65rem; letter-spacing: 0.12em; margin-bottom: 0.8rem; }
  .footer-grid a { font-size: 0.78rem; }
  .footer-cookie-btn { font-size: 0.78rem; }
  .site-footer { padding: 3rem 0 1.5rem; }

  /* Das Portraet ist nahezu quadratisch und wuerde ueber die volle Breite
     fast einen halben Bildschirm einnehmen. 4:3 zeigt beide Personen
     weiterhin vollstaendig, spart aber deutlich Hoehe. */
  .about-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 28%;
  }

  /* --- Feinschliff ------------------------------------------------------ */
  .studio-verbund { margin-top: 2rem; padding: 1.9rem 1.4rem; }
  .faq-list { margin-top: 1.8rem; }
  .faq-question { padding: 1.05rem 1.15rem; font-size: 0.95rem; }
  .faq-answer p { padding: 0 1.15rem; }
  .location-grid { margin-top: 1.8rem; }
  .location-map, .consent-gate, #leaflet-map { min-height: 300px; }
  .location-info h4 { margin-top: 1.4rem; }
  .req-list { margin: 1.6rem 0; }
  .req-list li { padding: 1.15rem 0; gap: 1rem; }
  .tutorial-steps { margin-top: 2rem; }
  .tutorial-step { padding: 1.4rem 0; grid-template-columns: 40px 1fr; gap: 1.1rem; }
  .t-num { width: 40px; height: 40px; font-size: 1.1rem; }
  .summary-box { margin-top: 2rem; padding: 1.5rem 1.25rem; }
  .split-layout, .split-layout.wide-right { gap: 2rem; }
  .cta-final p { margin-bottom: 1.6rem; }
  .about-grid { gap: 1.75rem; }
  .partner-list { margin-top: 1.2rem; }
  .partner-list li { padding: 1.05rem 1.2rem 1.05rem 3.9rem; font-size: 0.98rem; }
  .partner-list li::before { left: 1.2rem; }
  .partner-list li::after { left: 2.3rem; }

  /* Auf Touchgeraeten gibt es keinen Mauszeiger — ein Hover-Versatz bleibt
     dort nach dem Antippen sichtbar "haengen" und wirkt wie ein Fehler. */
  .equipment-card:hover,
  .price-card:hover,
  .praemie-card:hover,
  .partner-badge:hover,
  .footer-grid a:hover { transform: none; }
  .equipment-card:hover img { transform: none; }
}

/* Sehr schmale Geraete (iPhone SE & Co.) */
@media (max-width: 480px) {
  /* text-wrap:balance muss hier weichen. Chromium gibt bei diesem Modus die
     Ueberlaufsicherung auf, sobald ein langes Wort nicht in die berechnete
     Zeilenbreite passt: "FITNESS AUF GROSSSTADTNIVEAU" ragte dadurch 192px
     aus seinem Kasten und wurde vom overflow-x:clip unsichtbar abgeschnitten.
     "pretty" behaelt die Hurenkind-Vermeidung, ohne diesen Nebeneffekt. */
  h1, h2, h3, h4 { text-wrap: pretty; }
  /* Silbentrennung erst hier: auf breiteren Schirmen wuerde sie
     Ueberschriften unnoetig zerstueckeln. Setzt lang="de" voraus — gesetzt. */
  h1, h2, h3 { hyphens: auto; }
}

@media (max-width: 400px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
  .advantages-grid { grid-template-columns: 1fr; }
  .m-scroller > * { flex-basis: 88%; }
}


/* Mittlere Stufe fuer Laptops und Tablets.
   Vorher gab es nur zwei Fassungen: 800px bis 720px Viewport, darueber sofort
   das 1800px-Original. Ein 1280px-Laptop lud damit rund 133 KB Hintergrund,
   obwohl die 1200er-Fassung mit etwa 60 KB dieselbe Darstellung liefert.
   Die Dateien lagen bereits im Repository und wurden nur nie angesprochen.
   Faellt auf --hero-img zurueck, falls eine Seite keine mittlere Fassung setzt. */
@media (min-width: 721px) and (max-width: 1280px) {
  .hero-media { background-image: var(--hero-img-md, var(--hero-img, none)); }
}

/* ==========================================================================
   TABLET (721–1024px)
   Zwischen Handy und Desktop war bisher eine Luecke: die Handy-Regeln
   greifen nicht mehr, die Desktop-Raster erst ab 1025px. Ergebnis waren
   Einspalter auf 768px Breite — die Tarifkarten allein kamen so auf ueber
   2.000px, obwohl der Platz fuer drei Spalten laengst da ist.
   ========================================================================== */
@media (min-width: 721px) and (max-width: 1024px) {
  /* Tarife bleiben vergleichbar nebeneinander — genau dafuer ist eine
     Preistabelle da. Nur die Innenmasse werden enger gefasst. */
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }
  .price-card { padding: 1.9rem 1.1rem 1.5rem; }
  .price-card h3 { font-size: 1.1rem; }
  .price-period { font-size: 0.7rem; margin-bottom: 1rem; }
  .price { font-size: 2.3rem; margin-bottom: 1.2rem; }
  .price span { font-size: 0.68rem; letter-spacing: 0.05em; }
  .price-card .btn { padding: 0.8rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.03em; }
  .price-card li { font-size: 0.8rem; padding: 0.55rem 0 0.55rem 1.4rem; }
  .price-card li::before { left: 0.1rem; top: 0.95rem; }
  .badge { font-size: 0.6rem; padding: 0.35rem 0.8rem; }

  .praemie-grid { grid-template-columns: repeat(3, 1fr); }
  .advantages-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

  /* Text und Bild nebeneinander statt untereinander — auf 768px ist dafuer
     reichlich Breite, gestapelt kostet es rund eine halbe Bildschirmlaenge. */
  .about-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .location-grid { grid-template-columns: 1fr 1.25fr; }
  .split-layout { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   QUERFORMAT AUF HANDYS
   Bei gedrehtem Gerät bleiben oft nur ~375 px Höhe. Kopfzeile und
   Sticky-Leiste beanspruchten davon zusammen 144 px, und die Mindesthöhe
   des Heros von 640 px schob den Hauptbutton aus dem Bild. Hier wird alles
   flacher, damit der Einstieg ohne Scrollen sichtbar bleibt.
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header .header-inner { height: 56px; }
  .site-header.scrolled .header-inner { height: 52px; }

  .subpage-hero {
    min-height: auto;
    padding: 62px 0 36px;
  }
  .status-live--lg { display: none; }   /* dekorativ; die Höhe wird hier gebraucht */
  .hero h1, .subpage-hero h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 0.9rem; }
  .hero-sub { margin-bottom: 1rem; font-size: 0.95rem; }

  /* Querformat hat Breite im Überfluss — die Kennzahlen dürfen nebeneinander */
  .hero-stats { grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
  .stat { padding: 1rem 1.1rem; }
  .stat p { font-size: 0.78rem; }

  /* Flachere Sticky-Leiste, damit sie nicht ein Fünftel des Bildes einnimmt */
  .sticky-cta { padding: 0.45rem 0.9rem calc(0.45rem + env(safe-area-inset-bottom)); }
  .sticky-cta .btn { padding: 0.6rem 0.9rem; }
  body:has(.sticky-cta) { padding-bottom: 58px; }

  .section { padding: 3rem 0; }
}


/* ==========================================================================
   SEKTIONEN IN BILDSCHIRMHOEHE
   Ziel: Jede Sektion passt moeglichst in einen Bildschirm (zwischen Kopf-
   leiste und mobiler Buchungsleiste). Dafuer sind lange Sektionen geteilt
   (.section--split), Zusatztext ist einklappbar (.more-text) und die
   Bausteine sind straffer. Ausnahmen mit Absicht: Tabellen, Formulare und
   Vertragsinfos duerfen laenger sein, und Preisfussnoten bleiben sichtbar
   (Preisangabenverordnung).
   ========================================================================== */
.section--split { border-top: 1px solid var(--border); }

/* Einklappbarer Zusatztext */
.more-text { margin: 0 0 1.4rem; }
.more-text > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  color: var(--purple-text);
  font-weight: 700;
  font-size: 0.92rem;
}
.more-text > summary::-webkit-details-marker { display: none; }
.more-text > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--purple-dim);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.3s var(--ease);
}
.more-text[open] > summary { margin-bottom: 0.5rem; }
.more-text[open] > summary::after { transform: rotate(45deg); }
.more-text > summary:focus-visible {
  outline: 2px solid var(--purple-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Einleitung und Tipp links, Schritte rechts (Minderjaehrige) */
.split-steps { display: grid; gap: 1.5rem; }
.split-steps .split-steps-list { margin: 0; }
@media (min-width: 961px) {
  .split-steps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "intro list" "extra list";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .split-steps-intro { grid-area: intro; }
  .split-steps-list  { grid-area: list; }
  .split-steps-extra { grid-area: extra; }
}

/* Straffere Bausteine */
.equipment-grid,
.pricing-grid { margin-top: 2.25rem; }
.advantages-grid { margin: 2.25rem 0 0; }
.section .faq-list { margin-top: 2rem; }
.price-card { padding: 2rem 1.75rem 1.5rem; }
.price-period { margin-bottom: 1rem; }
.price { margin-bottom: 1.2rem; }
.price-card .btn { margin-bottom: 1.2rem; }
.price-card li { padding-block: 0.5rem; }
.price-card li::before { top: 0.9rem; }
.faq-question { padding: 1.05rem 1.35rem; }

/* Ausstattung ab Tablet als Querkarte: Bild links, Text rechts. Mit Bild
   ueber dem Text waren zwei Kartenreihen auf dem Laptop 1,4 Bildschirme. */
@media (min-width: 721px) {
  .equipment-card {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .equipment-card picture {
    grid-row: 1 / 3;
    display: block;
    overflow: hidden;
  }
  .equipment-card img {
    height: 100%;
    min-height: 150px;
    aspect-ratio: auto;
  }
  .equipment-card h3 { padding: 1.1rem 1.2rem 0.35rem; font-size: 1rem; }
  .equipment-card p { padding: 0 1.2rem 1.1rem; font-size: 0.84rem; line-height: 1.5; }
}
/* FAQ zweispaltig: neun Fragen untereinander waren auf dem Laptop
   anderthalb Bildschirme */
@media (min-width: 1024px) {
  .section .faq-list {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
  }
  .section .faq-list .faq-item { margin-bottom: 0; }
}

@media (max-width: 720px) {
  .price-card { padding: 1.6rem 1.25rem 1.25rem; }
  .price-card li { padding-block: 0.45rem; font-size: 0.84rem; }
  .price-card li::before { top: 0.8rem; }
  .advantage { padding-block: 0.8rem; }
  .advantage::before { top: 16px; }
  .advantage::after  { top: 20px; }
  .faq-question { padding: 0.9rem 1rem; font-size: 0.92rem; }
  .faq-answer p { padding: 0 1rem; }
  .location-map, .consent-gate, #leaflet-map { min-height: 220px; }
  .location-info h4 { margin-top: 1rem; }
  .req-list li { padding: 0.95rem 0; }
  .tutorial-step { padding: 1.1rem 0; }
}


/* ===== REDUCED MOTION =====
   Ganz am Ende, damit diese Regeln alles darüber sicher überschreiben. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}