/* ════════════════════════════════════════════════════════
   Phönix Fightclub Würzburg
   Entwurf 3 – 07.08.2026

   Typografie: Impact NUR in sehr großen Zeilen, dort über
   .impact leicht schmaler gestaucht und weiter gesperrt.
   Alles Kleinere in der Fließschrift, fett.
   ════════════════════════════════════════════════════════ */

/* Android liefert kein Impact mit – dort fiel die Display-Schrift
   bisher auf eine dünne Standardschrift zurück. Anton (selbst
   gehostet, keine Google-Server = kein Datenschutz-Thema) steht in
   der Schriftliste direkt hinter Impact und springt genau dort ein.
   Windows und iPhone haben Impact und ändern sich nicht. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-latin.woff2") format("woff2");
}

:root {
  --schwarz: #000002;
  --matte:   #101216;
  --matte-2: #171A1F;
  --matte-3: #1E2228;
  --linie:   #262A31;
  --grau:    #8A9099;
  --grau-2:  #C4C9CF;
  --weiss:   #F5F5F3;
  --orange:  #E25B1B;
  --glut:    #FF8A3D;

  /* Abstufungen zwischen --linie und --grau, bisher als rohe Hex-Werte verstreut */
  --linie-2: #343941;   /* gestrichelte Rahmen, Platzhalter */
  --linie-3: #3E434A;   /* Umrandung heller Elemente */
  --grau-3:  #565C64;   /* sehr zurückhaltender Text */

  --display: Impact, "Anton", Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --text:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:    "Consolas", ui-monospace, "SF Mono", "Roboto Mono", monospace;

  --breite: 1200px;
  --luft:   clamp(3.25rem, 6.5vw, 5.5rem);
  --rand:   clamp(1.25rem, 5vw, 3rem);

  --rund:   16px;
  --rund-s: 10px;
  --pille:  999px;
}

*, *::before, *::after { box-sizing: border-box; }

/* KEIN scroll-behavior: smooth auf html.
   Browser stellen beim Zurueckgehen die letzte Scrollposition wieder her –
   sanftes Scrollen bricht genau das und wirft einen an den Seitenanfang.
   Das sanfte Scrollen bei Ankerklicks macht stattdessen seite.js. */
[id] { scroll-margin-top: 6.5rem; }
.block[id], .seitenkopf[id] { scroll-margin-top: max(1.25rem, calc(6.5rem - var(--luft))); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--text);
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 6.5rem;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--glut); outline-offset: 3px; border-radius: var(--rund-s); }

.skiplink {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--orange); color: var(--schwarz);
  padding: .75rem 1.25rem; font-weight: 700; border-radius: var(--pille);
}
.skiplink:focus { left: 1rem; top: 1rem; }

/* ── Typografie ───────────────────────────────────────── */

.hero__titel, .titel, .zahl__wert, .tarif__zahl {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  margin: 0;
}
.titel { font-size: clamp(2.125rem, 1.3rem + 4vw, 4.25rem); margin-bottom: 1.25rem; }

/* Impact leicht schmaler stauchen und weiter sperren.
   Nimmt der Schrift die Klotzigkeit, ohne sie zu ersetzen. */
.impact {
  display: inline-block;
  transform: scaleX(.94);
  transform-origin: left center;
  letter-spacing: .05em;
}

/* Unterüberschriften – Fließschrift, fett. */
.unter, .kurs__name, .tarif__name, .person__name, .faq__frage, .fuss__marke {
  font-family: var(--text);
  font-weight: 800;
  letter-spacing: -.005em;
  line-height: 1.25;
  margin: 0 0 .5rem;
}
.unter { font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .06em; }
.unter--gross { font-size: clamp(1.125rem, 1rem + .8vw, 1.5rem); text-transform: none; letter-spacing: -.01em; }

.eyebrow {
  font-weight: 800;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 .875rem;
}

.fliess { max-width: 62ch; color: var(--grau-2); margin: 0 0 2rem; }
.fliess--gross { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); color: var(--weiss); line-height: 1.55; }
.fliess em { color: var(--orange); font-style: italic; }
.fliess strong { color: var(--weiss); }

/* ── Herzschlag-Puls ───────────────────────────────────
   Halbe Geschwindigkeit, weiche Übergänge: zwei Schläge,
   die ineinander auslaufen, dann eine lange Ruhephase.   */
.puls { animation: herzschlag 4.8s cubic-bezier(.37, 0, .28, 1) infinite; }
@keyframes herzschlag {
  0%        { box-shadow: 0 0 0 0    rgba(226,91,27,.00), 0 0 16px 2px  rgba(226,91,27,.26); }
  6%        { box-shadow: 0 0 0 4px  rgba(226,91,27,.26), 0 0 24px 5px  rgba(226,91,27,.48); }
  12%       { box-shadow: 0 0 0 7px  rgba(226,91,27,.28), 0 0 32px 8px  rgba(226,91,27,.62); }
  20%       { box-shadow: 0 0 0 5px  rgba(226,91,27,.16), 0 0 24px 5px  rgba(226,91,27,.38); }
  27%       { box-shadow: 0 0 0 8px  rgba(226,91,27,.22), 0 0 36px 10px rgba(226,91,27,.54); }
  36%       { box-shadow: 0 0 0 11px rgba(226,91,27,.10), 0 0 30px 8px  rgba(226,91,27,.34); }
  50%, 100% { box-shadow: 0 0 0 0    rgba(226,91,27,.00), 0 0 16px 2px  rgba(226,91,27,.26); }
}

/* ── Kopfzeile ────────────────────────────────────────── */
.kopfhalter { position: sticky; top: 0; z-index: 100; padding: .75rem var(--rand); }
.kopf {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--breite); margin: 0 auto;
  padding: .5rem .5rem .5rem 1rem;
  background: rgba(16,18,22,.88);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--linie); border-radius: var(--pille);
  box-shadow: 0 10px 30px rgba(0,0,2,.55);
}

.marke { display: flex; align-items: center; gap: .625rem; text-decoration: none; margin-right: auto; }
/* Weißes Logo direkt auf dunklem Grund – keine Kreisfläche nötig. */
.marke__logo { flex: none; width: 42px; height: 42px; object-fit: contain; display: block; }
.marke__text { font-weight: 800; font-size: .9375rem; line-height: 1.15; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.3vw, 1.375rem); }
.nav a {
  text-decoration: none; font-size: .875rem; font-weight: 600;
  color: var(--grau-2); padding: .5rem .25rem; white-space: nowrap;
  transition: color .15s ease;
}
.nav a:hover { color: var(--weiss); }

/* Probetraining im Kopf: eigener Knopf mit Umrandung */
.kopf__cta {
  flex: none; text-decoration: none;
  background: rgba(226,91,27,.12); color: var(--weiss);
  border: 2px solid var(--orange);
  font-weight: 800; font-size: .875rem;
  padding: .5625rem 1.25rem; border-radius: var(--pille);
  transition: background .15s ease, color .15s ease;
}
.kopf__cta:hover { background: var(--orange); color: var(--schwarz); }

.burger {
  display: none; flex: none; width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--linie); border-radius: 50%; cursor: pointer;
}
.burger span { display: block; width: 16px; height: 2px; margin: 3px auto; background: var(--weiss); border-radius: var(--rund-s); }

.mobilnav {
  position: sticky; top: 5rem; z-index: 99;
  margin: 0 var(--rand); padding: .75rem;
  background: rgba(16,18,22,.97);
  border: 1px solid var(--linie); border-radius: var(--rund);
  display: flex; flex-direction: column;
}
/* Wichtig: display:flex überstimmt sonst das hidden-Attribut,
   dann steht das Menü dauerhaft offen. */
.mobilnav[hidden] { display: none; }
.mobilnav a { padding: .8125rem 1rem; text-decoration: none; font-weight: 700; border-radius: var(--rund-s); }
.mobilnav a:hover { background: var(--matte-3); }

@media (max-width: 1040px) { .nav { display: none; } .burger { display: block; } }
@media (max-width: 480px)  { .kopf__cta { display: none; } }

/* ── Hinweisleiste ───────────────────────
   Schmales Band unter der Kopfzeile. Kein Lauftext – bei
   mehreren Meldungen blenden sie sich gegenseitig ab. */
.hinweisleiste {
  position: relative; z-index: 80;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .6875rem var(--rand);
  background: linear-gradient(90deg, rgba(226,91,27,.16), rgba(226,91,27,.09));
  border-bottom: 1px solid rgba(226,91,27,.3);
}
.hinweisleiste[hidden] { display: none; }

.hinweisleiste__punkt {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(226,91,27,.55);
  animation: hinweispuls 2.8s ease-out infinite;
}
@keyframes hinweispuls {
  0%   { box-shadow: 0 0 0 0 rgba(226,91,27,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(226,91,27,0); }
  100% { box-shadow: 0 0 0 0 rgba(226,91,27,0); }
}

/* Bühne hält die Höhe, die Meldungen liegen übereinander */
.hinweisleiste__buehne { position: relative; flex: 0 1 auto; min-width: 0; }
.hinweisleiste__text {
  margin: 0; text-align: center; line-height: 1.4;
  font-size: .9375rem; color: var(--weiss);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
}
.hinweisleiste__text:first-child { position: relative; }
.hinweisleiste__text:not(:first-child) { position: absolute; inset: 0; }
.hinweisleiste__text.ist-da { opacity: 1; visibility: visible; }
.hinweisleiste__text strong { color: var(--orange); }
.hinweisleiste__text a { color: var(--weiss); text-decoration: underline; text-underline-offset: 3px; }
.hinweisleiste__text a:hover { color: var(--orange); }

/* Ohne Bewegung: alle Meldungen untereinander */
.hinweisleiste--liste { flex-direction: column; align-items: center; }
.hinweisleiste--liste .hinweisleiste__buehne { display: grid; gap: .5rem; }
.hinweisleiste--liste .hinweisleiste__text {
  position: relative !important; inset: auto !important;
  opacity: 1; visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hinweisleiste__punkt { animation: none; }
  .hinweisleiste__text { transition: none; }
}
@media (max-width: 600px) {
  .hinweisleiste { padding: .625rem 1rem; align-items: flex-start; }
  .hinweisleiste__punkt { margin-top: .4375rem; }
  .hinweisleiste__text { font-size: .875rem; text-align: left; }
}

/* ── Hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(76vh, 680px);
  padding: calc(var(--luft) + 5.25rem) var(--rand) 0;
  margin-top: -5.25rem;
  overflow: hidden;
}
@media (max-width: 700px) { .hero { min-height: 70vh; } }
.hero__bild {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 15%, #24282F 0%, #0B0D11 55%, #000002 100%);
  display: grid; place-items: center;
}
/* Übereinanderliegende Bildfolien, die langsam überblenden. */
.hero__folie {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.6s ease-in-out;
}
.hero__folie--an { opacity: 1; }
.hero__folie img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
@media (prefers-reduced-motion: reduce) {
  .hero__folie:not(.hero__folie--an) { display: none; }
}
/* Heller als vorher – das Motiv soll erkennbar bleiben.
   Unten trotzdem dunkel genug, damit die Überschrift trägt. */
.hero__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(0,0,2,.34) 0%, rgba(0,0,2,.04) 38%,
              rgba(0,0,2,.60) 78%, rgba(0,0,2,.92) 100%);
}
.platzhalter {
  font-family: var(--mono); font-size: .75rem; text-align: center;
  color: var(--grau-3); letter-spacing: .08em; line-height: 1.9;
  border: 1px dashed var(--linie-2); border-radius: var(--rund-s); padding: 1rem 1.5rem;
}

.hero__inhalt { position: relative; z-index: 1; width: 100%; max-width: var(--breite); margin: 0 auto; }
.hero__titel { font-size: clamp(2.75rem, 1rem + 9vw, 7rem); }
.hero__sub { max-width: 54ch; margin: 1.5rem 0 2rem; color: var(--grau-2); font-size: clamp(1rem, .95rem + .4vw, 1.1875rem); }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: .875rem; }

.knopf {
  display: inline-block; text-decoration: none;
  padding: 1rem 1.875rem; border-radius: var(--pille);
  font-weight: 800; font-size: 1rem; line-height: 1.2;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.knopf--voll { background: var(--orange); color: var(--schwarz); border: 2px solid var(--orange); }
.knopf--voll:hover { background: var(--glut); border-color: var(--glut); }
.knopf--rand {
  background: rgba(226,91,27,.14); color: var(--weiss);
  border: 2px solid var(--orange);
}
.knopf--rand:hover { background: var(--orange); color: var(--schwarz); }
.knopf--linie { border: 1px solid var(--linie-3); color: var(--weiss); background: rgba(255,255,255,.04); }
.knopf--linie:hover { border-color: var(--weiss); background: rgba(255,255,255,.09); }

.bewertung { margin: 1.75rem 0 0; font-size: .9375rem; color: var(--grau-2); }
.bewertung__sterne { color: var(--orange); letter-spacing: .12em; margin-right: .5rem; }
.bewertung__wert { font-weight: 800; color: var(--weiss); }

/* ── Tagesleiste ──────────────────────────────────────── */
.leiste {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--breite);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 1.25rem clamp(1rem, 3vw, 1.75rem) 1.5rem;
  background: linear-gradient(180deg, rgba(30,34,40,.92), rgba(16,18,22,.92));
  border: 1px solid var(--linie); border-bottom: none;
  border-radius: var(--rund) var(--rund) 0 0;
  backdrop-filter: blur(8px);
}
.leiste__kopf {
  display: flex; flex-wrap: wrap; gap: .375rem 1rem;
  justify-content: space-between; align-items: baseline; margin-bottom: 1.125rem;
}
/* Fließschrift statt Monospace – wirkte zu technisch. */
.leiste__label { font-weight: 800; font-size: .9375rem; letter-spacing: .01em; color: var(--weiss); }
.leiste__status { font-size: .9375rem; color: var(--orange); font-weight: 600; }
.leiste__status[data-zu="ja"] { color: var(--grau); font-weight: 500; }

.leiste__spur { position: relative; height: 32px; }
.leiste__balken {
  position: absolute; top: 6px; left: 0; right: 0; height: 3px; border-radius: var(--rund-s);
  background: linear-gradient(90deg, var(--linie) 0%, #3C424A 50%, var(--linie) 100%);
}
.leiste__jetzt { position: absolute; top: 0; transform: translateX(-50%); transition: left .4s ease; }
/* Zeitanzeige: ruhiges Leuchten, kein Herzschlag. */
.leiste__punkt {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--glut), var(--orange) 65%);
  box-shadow: 0 0 0 5px rgba(226,91,27,.14), 0 0 22px 6px rgba(226,91,27,.42);
}
.leiste__marken {
  position: absolute; top: 17px; left: 0; right: 0;
  display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none;
  font-size: .6875rem; color: var(--grau);
}
.leiste__fuss {
  margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: .9375rem; color: var(--grau-2); max-width: 76ch;
}

/* ── Sponsorenband: schmal ────────────────────────────── */
/* Die Randausblendung gehört auf die Sektion, nicht auf das Band.
   Das Band ist mehrere tausend Pixel breit – dort würde die
   Ausblendung mitten im sichtbaren Bereich greifen und Logos
   halb verschwinden lassen. */
.sponsoren {
  padding: 1.125rem 0 1.5rem;
  border-bottom: 1px solid var(--linie);
  background: var(--matte); overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.sponsoren__label {
  font-size: .625rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--grau);
  text-align: center; margin: 0 0 .75rem;
}
.sponsoren__band {
  display: flex; align-items: center; width: max-content;
}
.sponsoren__band:hover .sponsoren__spur { animation-play-state: paused; }
.sponsoren__spur {
  display: flex; align-items: center; min-height: 64px;
  gap: clamp(2.25rem, 6vw, 4.5rem);
  margin: 0; padding: 0 clamp(1.125rem, 3vw, 2.25rem); list-style: none;
  animation: laufband 38s linear infinite;
}
/* Alle Logodateien liegen auf einer identischen Leinwand (320x110),
   das Motiv ist darin bereits auf gleiche optische Größe skaliert und
   mittig gesetzt. Hier deshalb nur noch eine feste Anzeigegröße –
   dadurch liegen alle Mittelpunkte automatisch auf einer Linie.
   Keine Farbfilter: dunkle Logos sind schon in der Datei aufgehellt. */
.sponsoren__spur li {
  flex: none; display: block;
  transition: transform .25s ease;
}
.sponsoren__spur li img {
  display: block; width: 132px; height: 60px; object-fit: contain;
}
.sponsoren__spur li:hover { transform: scale(1.08); }
@keyframes laufband { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .sponsoren__band { width: 100%; overflow-x: auto; mask-image: none; }
  .sponsoren__spur:last-child { display: none; }
}

/* ── Abschnitte ───────────────────────────────────────── */
.block { padding: var(--luft) var(--rand); }
.block > * { max-width: var(--breite); margin-left: auto; margin-right: auto; }
.block--kontrast { background: var(--matte); }

/* ── Gegenüberstellung ────────────────────────────────── */
.gegen { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.gegen__spalte { padding: 1.75rem; border-radius: var(--rund); }
.gegen__spalte--wir    { background: var(--matte-3); box-shadow: inset 3px 0 0 var(--orange); }
.gegen__spalte--andere { background: rgba(255,255,255,.02); box-shadow: inset 3px 0 0 var(--linie-2); }
.gegen__spalte--andere .unter { color: var(--grau); }
.gegen__liste { margin: 0; padding: 0; list-style: none; }
.gegen__liste li { padding: .6875rem 0 .6875rem 1.625rem; position: relative; border-top: 1px solid var(--linie); font-size: .9375rem; }
.gegen__liste li:first-child { border-top: none; }
.gegen__spalte--wir li::before    { content: "+"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
.gegen__spalte--andere li::before { content: "–"; position: absolute; left: 0; color: var(--grau); font-weight: 800; }
.gegen__spalte--andere li { color: var(--grau); }

/* ── Ablauf ───────────────────────────────────────────── */
.ablauf { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.ablauf__schritt {
  display: grid; gap: .375rem 1.75rem;
  grid-template-columns: minmax(84px, 104px) 1fr;
  padding: 1.375rem 0; border-top: 1px solid var(--linie);
}
.ablauf__schritt:last-child { border-bottom: 1px solid var(--linie); }
.ablauf__schritt--wichtig {
  background: rgba(226,91,27,.06);
  box-shadow: inset 3px 0 0 var(--orange);
  border-radius: 0 var(--rund) var(--rund) 0;
  padding-left: 1.5rem; padding-right: 1.25rem;
  border-top: none;
}
.ablauf__zeit { font-size: .8125rem; color: var(--orange); letter-spacing: .02em; padding-top: .25rem; font-weight: 800; }
.ablauf__text p { margin: 0; color: var(--grau-2); max-width: 60ch; }
.ablauf__text strong { color: var(--weiss); }

/* Kleiner Einschub im Ablauf, z.B. Ausnahme fuers Kindertraining. */
.hinweis {
  margin: .75rem 0 0 !important;
  padding: .625rem .875rem;
  background: rgba(226,91,27,.08);
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
  font-size: .875rem; color: var(--grau-2);
}
.hinweis strong { color: var(--orange); }
@media (max-width: 560px) { .ablauf__schritt { grid-template-columns: 1fr; } }

/* ── Das brauchst du – kompakt und zentriert ──────────── */
.mitbringen {
  margin: 2rem auto 0; padding: 1.5rem;
  max-width: 720px; text-align: center;
  background: var(--matte-2);
  border: 1px solid var(--linie); border-radius: var(--rund);
}
.mitbringen__kopf { margin-bottom: 1rem; font-size: .9375rem; }

.mitbringen__liste {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin: 0 0 1rem; padding: 0; list-style: none;
}
.mitbringen__liste li {
  display: flex; align-items: baseline; gap: .4375rem;
  padding: .4375rem .875rem;
  background: rgba(0,0,2,.4); border: 1px solid var(--linie);
  border-radius: var(--pille);
  font-weight: 700; font-size: .9375rem;
}
.mitbringen__liste li span { font-weight: 400; font-size: .8125rem; color: var(--grau); }

.mitbringen__hinweis {
  margin: 0 auto; padding-top: 1rem; border-top: 1px solid var(--linie);
  color: var(--grau-2); font-size: .875rem; max-width: 56ch;
}
.mitbringen__hinweis strong { color: var(--orange); display: block; }

/* ── Kurse ────────────────────────────────────────────── */
.kurse { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }

.kurs {
  display: flex; flex-direction: column;
  background: var(--matte-2); border: 1px solid var(--linie);
  border-radius: var(--rund); overflow: hidden;
  text-decoration: none;            /* keine Unterstreichung im Fließtext */
}
/* Bild sitzt randlos oben in der Karte, 3:2. */
.kurs__bild { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--matte-3); }
.kurs__inhalt { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.75rem 1.75rem; }
a.kurs { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
a.kurs:hover { transform: translateY(-4px); border-color: var(--orange); background: var(--matte-3); }

/* Nur die Überschrift wird unterstrichen. */
.kurs__name {
  font-size: 1.375rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
a.kurs .kurs__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(226,91,27,.5); }
a.kurs:hover .kurs__name { text-decoration-color: var(--orange); }

.kurs--intern { background: rgba(255,255,255,.02); }
.kurs__tag {
  font-size: .625rem; font-weight: 800; letter-spacing: .08em;
  background: var(--orange); color: var(--schwarz);
  padding: .25rem .5625rem; border-radius: var(--pille); text-decoration: none;
}
.kurs__zeit { font-size: .8125rem; font-weight: 700; color: var(--orange); margin: 0 0 .25rem; letter-spacing: .02em; }
.kurs__text { margin: .875rem 0 1.5rem; color: var(--grau-2); font-size: .9375rem; }
.kurs__text strong { color: var(--weiss); }

.kurs__knopf {
  margin-top: auto; align-self: stretch;
  /* Flex statt Innenabstand: Damit sitzt die Schrift exakt in der Mitte.
     Bei reinem padding drueckt die Unterlaenge vom g den Text optisch hoch,
     und krumme Hoehen lassen den unteren Rand duenner wirken. */
  display: flex; align-items: center; justify-content: center;
  min-height: 3rem; line-height: 1;
  background: rgba(226,91,27,.14); color: var(--weiss);
  border: 2px solid var(--orange); border-radius: var(--pille);
  padding: 0 1.25rem; font-size: .875rem; font-weight: 800;
  transition: background .15s ease, color .15s ease;
}
a.kurs:hover .kurs__knopf { background: var(--orange); color: var(--schwarz); }

.kurs__notiz {
  margin-top: auto; font-size: .8125rem; color: var(--grau);
  padding-top: .75rem; border-top: 1px solid var(--linie);
}

/* ── Tarife ───────────────────────────────────────────── */
.tarife { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); }
.tarif {
  position: relative; display: flex; flex-direction: column;
  padding: 2rem 1.75rem; text-decoration: none;
  background: var(--matte-2); border: 1px solid var(--linie); border-radius: var(--rund);
  transition: transform .18s ease, border-color .18s ease;
}
.tarif:hover { transform: translateY(-4px); border-color: var(--orange); }
.tarif--hervor { border-color: var(--orange); background: var(--matte-3); }
.tarif__band {
  position: absolute; top: -.75rem; left: 1.75rem;
  background: var(--orange); color: var(--schwarz);
  font-size: .625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .3125rem .75rem; border-radius: var(--pille);
}
.tarif__name { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; }
.tarif .tarif__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(226,91,27,.5); }
.tarif:hover .tarif__name { text-decoration-color: var(--orange); }

.tarif__preis { display: flex; align-items: baseline; gap: .1875rem; margin: .5rem 0 0; }
.tarif__zahl { font-size: clamp(3.25rem, 2rem + 4.5vw, 4.5rem); }
.tarif__euro { font-family: var(--display); font-size: 1.875rem; color: var(--orange); }
.tarif__takt { font-size: .9375rem; color: var(--grau); margin-left: .3125rem; }
.tarif__jung { margin: .625rem 0 1.25rem; font-size: .9375rem; color: var(--grau-2); }
.tarif__jung strong { color: var(--orange); font-weight: 800; font-size: 1.0625rem; }
.tarif__liste { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tarif__liste li { padding: .5625rem 0 .5625rem 1.625rem; position: relative; border-top: 1px solid var(--linie); font-size: .9375rem; }
.tarif__liste li:first-child { border-top: none; }
.tarif__liste li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
.tarif__knopf {
  margin-top: auto; align-self: flex-start;
  background: rgba(226,91,27,.14); color: var(--weiss);
  border: 2px solid var(--orange); border-radius: var(--pille);
  padding: .5625rem 1.25rem; font-size: .875rem; font-weight: 800;
  transition: background .15s ease, color .15s ease;
}
.tarif:hover .tarif__knopf { background: var(--orange); color: var(--schwarz); }

.fair {
  margin-top: 1rem; padding: clamp(1.5rem, 4vw, 2.25rem);
  background: linear-gradient(140deg, var(--matte-3), var(--matte-2));
  border: 1px solid var(--linie); border-radius: var(--rund);
}
.fair .unter { margin-bottom: 1.5rem; }
.fair__liste {
  display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fair__liste li {
  display: grid; grid-template-columns: auto 1fr; gap: .875rem; align-items: start;
  padding: 1rem 1.125rem;
  background: rgba(0,0,2,.35); border: 1px solid var(--linie);
  border-radius: var(--rund-s);
  color: var(--grau-2); font-size: .9375rem; line-height: 1.5;
}
.fair__liste li::before {
  content: "✓";
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: .0625rem;
  background: rgba(226,91,27,.16); color: var(--orange);
  border-radius: 50%; font-size: .75rem; font-weight: 800;
}
.fair__liste strong { display: block; color: var(--weiss); font-weight: 800; }

/* ── Fünf Fragen ──────────────────────────────────────── */
.pruefen { margin-top: 1rem; padding: 1.75rem; background: var(--matte-3); border-radius: var(--rund); box-shadow: inset 3px 0 0 var(--orange); }
.pruefen__intro { margin: 0 0 1.5rem; color: var(--grau-2); max-width: 64ch; }
.pruefen__liste { margin: 0; padding: 0; list-style: none; counter-reset: frage; }
.pruefen__punkt {
  display: grid; gap: .25rem 1.5rem; grid-template-columns: 1fr auto;
  align-items: baseline; position: relative;
  padding: .9375rem 0 .9375rem 2.25rem;
  border-top: 1px solid var(--linie); counter-increment: frage;
}
.pruefen__punkt:first-child { border-top: none; }
.pruefen__punkt::before {
  content: counter(frage); position: absolute; left: 0; top: .9375rem;
  font-size: .8125rem; font-weight: 700; color: var(--grau);
}
.pruefen__frage { font-weight: 700; }
.pruefen__zusatz {
  display: block; margin-top: .1875rem;
  font-style: normal; font-weight: 400; font-size: .8125rem; color: var(--grau);
}
.pruefen__wir { font-size: .8125rem; font-weight: 700; color: var(--orange); letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 620px) { .pruefen__punkt { grid-template-columns: 1fr; } .pruefen__wir { white-space: normal; } }
.pruefen__schluss { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linie); color: var(--grau); font-size: .9375rem; max-width: 64ch; }

/* ── Team ─────────────────────────────────────────────── */
.team { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.person__bild {
  aspect-ratio: 4 / 5; background: var(--matte-2);
  border: 1px solid var(--linie); border-radius: var(--rund);
  display: grid; place-items: center; margin-bottom: 1rem; overflow: hidden;
}
.person__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Einstiegsbilder ──────────────────────────────────── */
.einstiegsbilder {
  display: grid; gap: 1rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.einstiegsbilder figure { margin: 0; }
.einstiegsbilder img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--rund);
  background: var(--matte-2); border: 1px solid var(--linie);
}
.einstiegsbilder figcaption { margin-top: .75rem; font-size: .875rem; color: var(--grau); }

/* Sponsorenlogos als echte Bilder */
.person__name { font-size: 1.1875rem; }
.person__rolle {
  font-size: .6875rem; font-weight: 800; color: var(--orange);
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .625rem;
}
.person__text { margin: 0; color: var(--grau-2); font-size: .9375rem; }

/* ── Zahlen ───────────────────────────────────────────── */
.zahlen { display: grid; gap: 1.25rem; margin: 0 auto 2.5rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.zahl { padding-top: 1rem; box-shadow: inset 0 3px 0 var(--orange); }
.zahl__wert { display: block; font-size: clamp(2.75rem, 2rem + 3vw, 4rem); }
.zahl__label { display: block; margin-top: .5rem; color: var(--grau); font-size: .875rem; line-height: 1.45; }

/* ── Zentrierter Abschnitt ────────────────────────────── */
.block--mitte .eyebrow,
.block--mitte .titel { text-align: center; }
.block--mitte .titel .impact { transform-origin: center; }

/* ── FAQ als Aufklapper ───────────────────────────────── */
.faq { margin: 2.5rem auto 0; max-width: 820px; display: grid; gap: .625rem; }
.faq__paar {
  background: var(--matte-2); border: 1px solid var(--linie);
  border-radius: var(--rund-s); overflow: hidden;
  transition: border-color .18s ease;
}
.faq__paar[open] { border-color: rgba(226,91,27,.45); background: var(--matte-3); }
.faq__frage {
  position: relative; cursor: pointer; list-style: none;
  padding: 1.125rem 3.25rem 1.125rem 1.375rem;
  margin: 0; font-size: 1.0625rem;
  transition: color .15s ease;
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::after {
  content: ""; position: absolute; right: 1.375rem; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .2s ease;
}
.faq__paar[open] .faq__frage::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__frage:hover { color: var(--orange); }
.faq__antwort { padding: 0 1.375rem 1.375rem; }
.faq__antwort p { margin: 0; color: var(--grau-2); max-width: 68ch; }

/* ── Gymdesk-Widgets ──────────────────────────────────────
   Gymdesk liefert eigenes Markup mit. Wir geben nur den
   Rahmen vor und drehen die Textfarben auf hell, damit es
   auf dem dunklen Grund nicht wie ein Fremdkörper wirkt.
   Feinschliff erst möglich, wenn das Widget live läuft.    */
/* Der Widget-Hintergrund ist selbst #000002, also unsere Grundfarbe.
   Deshalb kein eigener Kasten drumherum – das Widget sitzt bündig
   auf der Seite statt als Kasten-im-Kasten. */
.gymdesk {
  position: relative;
  margin-top: 2rem;
  background: #000002;
  border: 1px solid rgba(226,91,27,.3);
  border-radius: var(--rund);
  overflow: hidden;   /* rundet die Ecken des Widget-Rahmens mit ab */
}
/* Das Buchungs-Widget bringt einen eigenen Rahmen mit. Etwas Luft dazwischen,
   damit daraus kein sichtbarer Doppelrahmen wird. */
.gymdesk--buchung { padding: .75rem; }
.gymdesk--schmal { max-width: 720px; }

/* ── Abdeckungen im Stundenplan ────────────────────────
   Die Programmauswahl links und der List/Grid-Umschalter rechts
   liegen im Gymdesk-Rahmen und lassen sich von außen nicht
   entfernen. Zwei Flächen in der Widget-Hintergrundfarbe decken
   sie ab; die Wochennavigation in der Mitte bleibt bedienbar. */
.gymdesk--plan::before,
.gymdesk--plan::after {
  content: ""; position: absolute; z-index: 2;
  top: 0; background: #000002;
}
/* Links: Programmauswahl, sitzt ganz oben. */
.gymdesk--plan::before { left: 0;  width: 200px; height: 72px; }
/* Rechts: Ansichtsumschalter, sitzt tiefer auf Hoehe der Wochennavigation.
   Rechts daneben steht nichts, deshalb bis kurz ueber die Wochentage abdecken. */
/* Nur bis knapp über die Wochentage - sonst wird die Sonntagsspalte
   mit abgedeckt. */
.gymdesk--plan::after  { right: 0; width: 190px; height: 108px; }

/* Auf schmalen Bildschirmen ordnet Gymdesk die Leiste um. */
@media (max-width: 720px) {
  /* Auf dem Handy baut Gymdesk den Plan anders auf: Statt der Kopfleiste
     lagen die Abdeckungen ueber der Datumszeile und schnitten sie ab.
     Deshalb hier komplett weg. */
  .gymdesk--plan::before,
  .gymdesk--plan::after { display: none; }
}

.gymdesk, .gymdesk * { color: var(--weiss); }
.gymdesk a { color: var(--orange); }
.gymdesk table { width: 100%; border-collapse: collapse; }
.gymdesk th, .gymdesk td { border-color: var(--linie) !important; }
.gymdesk input, .gymdesk select, .gymdesk textarea {
  background: rgba(0,0,2,.45); color: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--rund-s);
  padding: .625rem .875rem; font: inherit; max-width: 100%;
}
.gymdesk input::placeholder, .gymdesk textarea::placeholder { color: var(--grau); }
.gymdesk button, .gymdesk input[type="submit"] {
  background: var(--orange); color: var(--schwarz);
  border: none; border-radius: var(--pille);
  padding: .75rem 1.5rem; font-weight: 800; cursor: pointer;
}
.gymdesk button:hover, .gymdesk input[type="submit"]:hover { background: var(--glut); }

/* ── Buchungsblock ────────────────────────────────────── */
.buchung { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--linie); }
.buchung .unter { margin-bottom: .75rem; }
.buchung .fliess { margin-bottom: 0; }

/* ── Vertragsabschluss ────────────────────────────────── */
.abschluss {
  margin-top: 2rem; padding: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 640px; text-align: center;
  background: var(--matte-2);
  border: 1px solid var(--linie); border-radius: var(--rund);
}
.abschluss__text { margin: 0 0 1.5rem; color: var(--grau-2); }
.abschluss__hinweis { margin: 1.25rem 0 0; color: var(--grau); font-size: .875rem; }

/* ── Einbettungen ─────────────────────────────────────── */
.einbettung { margin-top: 2.5rem; padding: 2.75rem 1.5rem; border: 1px dashed var(--linie-2); border-radius: var(--rund); text-align: center; }
.einbettung__hinweis { margin: 0; color: var(--grau-3); font-size: .8125rem; letter-spacing: .06em; }

/* ── Fuß ──────────────────────────────────────────────── */
.fuss {
  padding: 2.5rem var(--rand); border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
}
.fuss__marke { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; margin: 0; }

/* Social-Icons */
.sozial { display: flex; align-items: center; gap: .625rem; }
.sozial__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: var(--grau-2);
  background: var(--matte-2); border: 1px solid var(--linie);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.sozial__icon:hover {
  color: var(--schwarz); background: var(--orange);
  border-color: var(--orange); transform: translateY(-2px);
}
.sozial__icon--wa:hover { color: #fff; background: #25D366; border-color: #25D366; }

.sozial__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 42px; padding: 0 1.125rem; border-radius: var(--pille);
  background: var(--matte-2); border: 1px solid var(--linie);
  color: var(--grau-2); text-decoration: none;
  font-weight: 700; font-size: .9375rem; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.sozial__tel:hover {
  color: var(--schwarz); background: var(--orange);
  border-color: var(--orange); transform: translateY(-2px);
}

.fuss__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fuss__nav a { font-size: .875rem; color: var(--grau); text-decoration: none; }
.fuss__nav a:hover { color: var(--weiss); }

/* ── Mitscrollende Leiste: immer sichtbar ─────────────── */
.klebeleiste {
  position: fixed; z-index: 90;
  left: var(--rand); right: var(--rand); bottom: 1rem;
  max-width: var(--breite); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .625rem .625rem .625rem 1.5rem;
  background: rgba(16,18,22,.94);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--linie); border-radius: var(--pille);
  box-shadow: 0 14px 40px rgba(0,0,2,.7);
}
.klebeleiste__text {
  display: flex; flex-direction: column; line-height: 1.3;
  min-width: 0; flex: 1 1 auto;
}
.klebeleiste__text strong { font-size: .9375rem; font-weight: 800; }
.klebeleiste__text span { font-size: .8125rem; color: var(--grau); }
.klebeleiste__knopf {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  background: var(--orange); color: var(--schwarz);
  font-weight: 800; font-size: .9375rem;
  padding: .8125rem 1.625rem; border-radius: var(--pille);
  transition: background .15s ease;
}
.klebeleiste__knopf:hover { background: var(--glut); }

/* Handy: alles kleiner, damit sich Text und Knopf nicht überlappen. */
@media (max-width: 720px) {
  .klebeleiste { gap: .625rem; padding: .5rem .5rem .5rem 1rem; bottom: .625rem; }
  .klebeleiste__text strong { font-size: .8125rem; }
  .klebeleiste__text span { font-size: .6875rem; }
  .klebeleiste__knopf { font-size: .8125rem; padding: .6875rem 1.125rem; }
}
@media (max-width: 460px) {
  .klebeleiste__text span { display: none; }
  .klebeleiste__text strong { font-size: .78125rem; line-height: 1.25; }
  .klebeleiste__knopf { font-size: .78125rem; padding: .625rem .9375rem; }
}

/* ── Rechtstexte ──────────────────────────────────────── */
.recht { max-width: 780px; }
.recht > * { max-width: 100%; }
.recht p, .recht li { color: var(--grau-2); }
.recht p { margin: 0 0 1.125rem; }
.recht .unter { margin: 2.25rem 0 .75rem; color: var(--weiss); }
.recht .unter:first-of-type { margin-top: 1rem; }
.recht a { color: var(--orange); }
.recht ul { margin: 0 0 1.125rem; padding-left: 1.25rem; }
.recht li { margin-bottom: .5rem; }
.recht__stand { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); color: var(--grau); font-size: .875rem; }
.recht__kasten {
  margin: 1.5rem 0; padding: 1.25rem 1.5rem;
  background: var(--matte-2); border: 1px solid var(--linie);
  border-radius: var(--rund-s);
}
.recht__kasten p:last-child { margin-bottom: 0; }

/* ── Unterseite ───────────────────────────────────────── */
.seitenkopf { padding: calc(var(--luft) + 2rem) var(--rand) var(--luft); background: var(--matte); }
.seitenkopf > * { max-width: var(--breite); margin-left: auto; margin-right: auto; }
.zurueck { display: inline-block; margin-top: 1.5rem; font-size: .9375rem; color: var(--grau); text-decoration: none; }
.zurueck:hover { color: var(--weiss); }

/* ══════════════════════════════════════════════════════
   FAQ-SEITE  (faq.html)
   Suche, Zielgruppenfilter und Gruppenüberschriften.
   Die Fragen selbst nutzen die bestehenden .faq-Klassen.
   ══════════════════════════════════════════════════════ */

.faqsuche { max-width: 820px; margin: 0 auto 2.5rem; }

/* ── Suchfeld ── */
.faqsuche__feld { position: relative; display: flex; align-items: center; }
.faqsuche__lupe {
  position: absolute; left: 1.125rem; color: var(--grau);
  pointer-events: none; transition: color .2s ease;
}
.faqsuche__feld:focus-within .faqsuche__lupe { color: var(--orange); }
.faqsuche__eingabe {
  width: 100%;
  padding: 1rem 3rem 1rem 3.125rem;
  font: inherit; font-size: 1rem; color: var(--weiss);
  background: var(--matte-2);
  border: 1px solid var(--linie-2);
  border-radius: var(--pille);
  transition: border-color .2s ease, background .2s ease;
  -webkit-appearance: none; appearance: none;
}
.faqsuche__eingabe::placeholder { color: var(--grau-3); }
.faqsuche__eingabe:focus {
  outline: none; background: var(--matte-3); border-color: var(--orange);
}
.faqsuche__eingabe::-webkit-search-cancel-button { display: none; }

.faqsuche__leeren {
  position: absolute; right: .875rem;
  width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 1.375rem; line-height: 1; color: var(--grau);
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.faqsuche__leeren:hover { color: var(--weiss); background: var(--linie-2); }
.faqsuche__leeren[hidden] { display: none; }

/* ── Zielgruppenfilter ── */
.faqfilter {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1rem; justify-content: center;
}
.faqfilter__knopf {
  padding: .5rem 1.125rem;
  font: inherit; font-size: .875rem; font-weight: 700;
  letter-spacing: .02em; color: var(--grau-2);
  background: transparent;
  border: 1px solid var(--linie-2); border-radius: var(--pille);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.faqfilter__knopf:hover { color: var(--weiss); border-color: var(--linie-3); }
.faqfilter__knopf[aria-pressed="true"] {
  color: var(--schwarz); background: var(--orange); border-color: var(--orange);
}

.faqsuche__zaehler {
  margin: 1rem 0 0; text-align: center;
  font-size: .8125rem; color: var(--grau); letter-spacing: .03em;
}

/* ── Gruppen ── */
.faqgruppe { max-width: 820px; margin: 0 auto; }
.faqgruppe[hidden] { display: none; }
.faqgruppe__kopf {
  margin: 2.75rem 0 0; padding-bottom: .75rem;
  color: var(--orange); border-bottom: 1px solid var(--linie);
}
.faqgruppe:first-of-type .faqgruppe__kopf { margin-top: 0; }
.faqgruppe .faq { margin-top: 1rem; }
.faq__paar[hidden] { display: none; }

/* ── Keine Treffer ── */
.faqleer {
  max-width: 620px; margin: 0 auto 2rem; padding: 1.5rem;
  text-align: center; color: var(--grau-2);
  background: var(--matte-2);
  border: 1px dashed var(--linie-2); border-radius: var(--rund);
}
.faqleer[hidden] { display: none; }

@media (max-width: 600px) {
  .faqsuche__eingabe { padding: .875rem 2.75rem .875rem 2.875rem; font-size: 16px; }
  .faqfilter__knopf { flex: 1 1 auto; padding: .5rem .75rem; font-size: .8125rem; }
}

/* Verweis von der Startseiten-FAQ auf die vollständige Seite */
.faqmehr { max-width: 820px; margin: 1.5rem auto 0; text-align: center; }
.faqmehr a {
  display: inline-block; padding: .625rem 1.25rem;
  font-size: .9375rem; font-weight: 700; color: var(--orange);
  border: 1px solid rgba(226,91,27,.4); border-radius: var(--pille);
  transition: background .15s ease, border-color .15s ease;
}
.faqmehr a:hover { background: rgba(226,91,27,.1); border-color: var(--orange); }

/* ══════════════════════════════════════════════════════
   EVENTS-SEITE  (events.html)
   ══════════════════════════════════════════════════════ */

.event {
  margin-top: 2rem;
  background: var(--matte-2);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
}
.event--gross { border-color: rgba(226,91,27,.35); }

.event__bild {
  position: relative; background: var(--schwarz); aspect-ratio: 16 / 9;
  border: 1px solid rgba(226,91,27,.3); border-radius: var(--rund-s); overflow: hidden;
}
.event__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

.event__inhalt { padding: clamp(1.5rem, 3vw, 2.5rem); }
.event__inhalt .fliess { margin-bottom: 0; }
.event__inhalt .fliess + .event__aktion { margin-top: 2rem; }

/* Faktentabelle des kommenden Events */
.event__fakten {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: .75rem;
}
.event__fakten li {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--linie);
}
.event__fakten li:last-child { border-bottom: 0; padding-bottom: 0; }
.event__label {
  flex: 0 0 8rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau);
}
.event__wert { flex: 1 1 12rem; color: var(--weiss); font-weight: 700; }

.event__aktion { margin-top: 2rem; }
.event__hinweis { margin: .875rem 0 0; font-size: .8125rem; color: var(--grau); }
.event__ort {
  margin: .375rem 0 1rem;
  font-size: .875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange);
}

.eventliste { display: grid; gap: 1.5rem; }

/* Hochformat-Plakat: nichts beschneiden, Original ist nur 646 px breit */
.event__bild--plakat { aspect-ratio: 646 / 857; max-width: 646px; margin: 0 auto; }
.event__bild--plakat img { object-fit: contain; }

@media (min-width: 900px) {
  .event--gross { display: grid; grid-template-columns: minmax(0,.85fr) 1fr; align-items: center; }
  .event--gross .event__bild--plakat { margin: 0; }
}

/* ══════════════════════════════════════════════════════
   KÜNDIGUNGSSEITE  (kuendigung.html)
   Pflichtseite nach § 312k BGB.
   ══════════════════════════════════════════════════════ */

.kuend { max-width: 720px; margin: 0 auto; }

.kuend__hinweis {
  margin-bottom: 2.5rem; padding: 1.5rem 1.625rem;
  background: rgba(0,0,2,.55);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
}
.kuend__hinweis p { margin: 0 0 .875rem; color: var(--grau-2); }
.kuend__hinweis p:last-child { margin-bottom: 0; }
.kuend__hinweis strong { color: var(--weiss); }

.kuend__block { margin: 0 0 2.5rem; padding: 0; border: 0; }
.kuend__block .unter { display: block; margin-bottom: 1.5rem; color: var(--orange); }

.feld { margin-bottom: 1.25rem; }
.feld--paar { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.feld__label {
  display: block; margin-bottom: .4375rem;
  font-size: .8125rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grau-2);
}
.feld__optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--grau); }
.feld__eingabe {
  width: 100%; padding: .8125rem 1rem;
  font: inherit; font-size: 1rem; color: var(--weiss);
  background: var(--matte-2);
  border: 1px solid var(--linie-2); border-radius: var(--rund-s);
  transition: border-color .15s ease, background .15s ease;
}
.feld__eingabe:focus { outline: none; background: var(--matte-3); border-color: var(--orange); }
.feld__eingabe::placeholder { color: var(--grau-3); }
select.feld__eingabe { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--grau) 50%),
                    linear-gradient(135deg, var(--grau) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.75rem; }
textarea.feld__eingabe { resize: vertical; min-height: 5rem; }
.feld__hilfe { margin: .4375rem 0 0; font-size: .8125rem; color: var(--grau); }

.kuend__abschluss {
  padding-top: 2rem; border-top: 1px solid var(--linie);
}
.kuend__recht { margin: 0 0 1.5rem; font-size: .875rem; color: var(--grau-2); }
.knopf--breit { width: 100%; text-align: center; }

.kuend__alternativ {
  margin: 2rem 0 0; text-align: center; font-size: .875rem; color: var(--grau);
}

@media (max-width: 560px) {
  .feld--paar { grid-template-columns: 1fr; gap: 0; }
  .feld--paar > div { margin-bottom: 1.25rem; }
  .feld__eingabe { font-size: 16px; }
}

/* Dezente schwarze Unterlage: soll nicht als Kasten auffallen,
   aber den Text auf jedem Hintergrundbild lesbar halten. */
.hero__sub--platte {
  display: inline-block;
  padding: .75rem 1.125rem;
  background: rgba(0,0,2,.5);
  border-radius: var(--rund-s);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Zahlungshinweis unter "In jedem Tarif enthalten" */
.fair__fuss {
  margin: 1.5rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: .8125rem; line-height: 1.6; color: var(--grau);
}

/* Ueberleitung zum Kontaktformular - zugleich Sprungziel des FAQ-Knopfes */
.frageuns { margin-top: 2.5rem; }
.frageuns .unter { color: var(--orange); margin-bottom: .5rem; }
.frageuns .fliess { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════
   NUMMERIERTE SCHRITTE  (open-mat-danke.html)
   ══════════════════════════════════════════════════════ */

.schritte { max-width: 720px; margin: 0 auto 3rem; display: grid; gap: 1.75rem; }
.schritt { display: flex; gap: 1.25rem; align-items: flex-start; }
.schritt__nr {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.25rem; line-height: 1;
  color: var(--schwarz); background: var(--orange); border-radius: 50%;
}
.schritt .unter { margin: .25rem 0 .5rem; color: var(--weiss); }
.schritt .fliess { margin: 0; }

/* ── Sponsorenname beim Darüberfahren ──────────────────
   Die Leiste hat overflow:hidden und eine Maske an den
   Rändern – eine Sprechblase am Logo wird dort abge-
   schnitten. Deshalb wandert der Name in die Beschriftung
   über der Leiste. Dort ist immer Platz. */
.sponsoren__spur li img { transition: filter .18s ease; }
.sponsoren__spur li:hover img,
.sponsoren__spur li:focus-within img { filter: brightness(1.4); }

.sponsoren__label { transition: color .18s ease; min-height: 1em; }
.sponsoren__label.zeigt-namen { color: var(--orange); }


/* ══════════════════════════════════════════════════════
   OPEN-MAT-SEITE  (open-mat.html)
   ══════════════════════════════════════════════════════ */

.omfakten {
  margin-top: 2rem;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.omfakt {
  padding: 1.5rem;
  background: var(--matte-2);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
}
.omfakt .unter { margin: 0 0 .625rem; color: var(--weiss); }
.omfakt .fliess { margin: 0; }

.omliste {
  margin: 2rem auto; padding: 0; list-style: none;
  display: grid; gap: .875rem;
}
.omliste li { max-width: 68ch; }
.omliste li {
  position: relative; padding-left: 1.75rem; color: var(--grau-2);
}
.omliste li::before {
  content: ""; position: absolute; left: 0; top: .5rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}

/* Verweis auf der Open-Mat-Kurskarte.
   EIGENER Name: Hiess frueher ebenfalls .kurs__knopf und hat damit
   die Knopfform der Probetrainings-Karten ueberschrieben - der Text
   stand dadurch linksbuendig statt mittig. */
.kurs__link {
  display: inline-block; margin-top: auto; padding-top: 1rem;
  font-size: .875rem; font-weight: 800; letter-spacing: .02em;
  color: var(--orange);
  transition: color .15s ease;
}
.kurs__link:hover { color: var(--glut); }


/* ══════════════════════════════════════════════════════
   AUSRICHTUNG DER ABSCHNITTSINHALTE

   .block > * zentriert alle direkten Kinder im 1200er-
   Container. Mehrere Bausteine setzen aber später ein
   eigenes "margin: X 0" und heben das damit auf – sie
   rutschen dann an den Seitenrand, während die Über-
   schrift daneben eingerückt bleibt.

   Diese Regel steht bewusst am Ende und stellt die
   Ausrichtung für alle wieder her.
   ══════════════════════════════════════════════════════ */
.block > *,
.seitenkopf > * { margin-left: auto; margin-right: auto; }

/* ── Weiterführender Verweis unter jeder FAQ-Antwort ───
   Jede Antwort endet mit einem konkreten nächsten Schritt,
   damit möglichst wenige Fragen telefonisch ankommen. */
.faq__weiter {
  margin: 1rem 0 0; padding-top: .75rem;
  border-top: 1px solid var(--linie);
  font-size: .875rem; color: var(--grau);
}
.faq__weiter a {
  color: var(--orange); font-weight: 700;
  border-bottom: 1px solid rgba(226,91,27,.35);
  transition: color .15s ease, border-color .15s ease;
}
.faq__weiter a:hover { color: var(--glut); border-color: var(--glut); }

.faq__schritte { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--grau-2); }
.faq__schritte li { margin-bottom: .5rem; }
.faq__schritte li::marker { color: var(--orange); font-weight: 800; }

/* ── Sprechblase an der Suchleiste ─────────────────────
   Erscheint kurz nach dem Laden, verschwindet nach 5 s
   oder sobald jemand tippt. */
.faqtipp {
  position: absolute; left: calc(100% + .875rem); top: 50%;
  transform: translate(-6px, -50%);
  z-index: 5; width: max-content; max-width: 15rem;
  padding: .625rem .875rem;
  font-size: .8125rem; line-height: 1.4;
  color: var(--orange);
  background: var(--matte-3);
  border: 1px solid rgba(226,91,27,.45);
  border-radius: var(--rund-s);
  box-shadow: 0 8px 24px rgba(0,0,2,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
/* Zipfel zeigt nach links auf das Suchfeld */
.faqtipp::before {
  content: ""; position: absolute; left: -5px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  background: var(--matte-3);
  border-left: 1px solid rgba(226,91,27,.45);
  border-bottom: 1px solid rgba(226,91,27,.45);
  transform: rotate(45deg);
}
.faqtipp.ist-da { opacity: 1; transform: translate(0, -50%); }

/* Schmale Fenster: daneben ist kein Platz, dann wieder darunter */
@media (max-width: 1100px) {
  .faqtipp {
    left: 50%; top: calc(100% + .625rem);
    transform: translate(-50%, -6px);
    max-width: min(92vw, 22rem); text-align: center;
  }
  .faqtipp::before {
    left: 50%; top: -5px; margin: 0 0 0 -4px;
    border: 0; border-left: 1px solid rgba(226,91,27,.45);
    border-top: 1px solid rgba(226,91,27,.45);
  }
  .faqtipp.ist-da { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .faqtipp { transition: opacity .01s; }
}

/* ── Verweis auf die FAQ vor dem Kontaktformular ───────
   Steht bewusst ÜBER dem Formular: Wer die Antwort selbst
   findet, schreibt nicht – das ist der ganze Zweck. */
.vorabfaq {
  margin: 1.75rem 0 2.5rem;
  padding: 1.5rem 1.625rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  background: var(--matte-2);
  border: 1px solid var(--linie-2);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
}
.vorabfaq__text { flex: 1 1 22rem; margin: 0; color: var(--grau-2); font-size: .9375rem; }
.vorabfaq__text strong { color: var(--weiss); }
.vorabfaq .knopf { flex: 0 0 auto; }

/* Rangliste bei aktiver Suche – ersetzt die Gruppenansicht */
.faqtreffer { margin: 0 auto 2rem; }
.faqtreffer[hidden] { display: none; }

/* ── Klebeleiste: zweiter, ruhiger Weg zur FAQ ─────────
   Bewusst ohne Fläche, damit der Hauptknopf der einzige
   bleibt, der ins Auge springt. */
.klebeleiste__aktionen { display: flex; align-items: center; gap: .875rem; }
.klebeleiste__frage {
  flex: 0 0 auto; padding: .5rem .875rem;
  font-size: .875rem; font-weight: 700; color: var(--grau-2);
  border: 1px solid var(--linie-2); border-radius: var(--pille);
  transition: color .15s ease, border-color .15s ease;
}
.klebeleiste__frage:hover { color: var(--weiss); border-color: var(--linie-3); }

/* ── Hinweis unter dem Buchungsfenster ─────────────────
   Fängt die Fragen ab, die beim Buchen aufkommen. */
.nachfrage {
  margin: 1rem auto 0; max-width: 68ch;
  font-size: .875rem; color: var(--grau);
}
.nachfrage a {
  color: var(--orange); font-weight: 700;
  border-bottom: 1px solid rgba(226,91,27,.35);
}
.nachfrage a:hover { color: var(--glut); }

@media (max-width: 720px) {
  /* Auf dem Handy ist die Leiste eng – dort reicht der Hauptknopf */
  .klebeleiste__frage { display: none; }
}

/* Ablauf nach der Open-Mat-Anfrage */
.omablauf {
  margin: 2.25rem auto 0; padding-top: 1.75rem;
  border-top: 1px solid var(--linie);
  max-width: 34rem; text-align: left;
}
.omablauf__titel {
  margin: 0 0 .875rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grau);
}
.omablauf__liste { margin: 0; padding-left: 1.375rem; display: grid; gap: .5rem; color: var(--grau-2); }
.omablauf__liste li::marker { color: var(--orange); font-weight: 800; }

.omablauf__fuss { margin: 1rem 0 0; font-size: .875rem; color: var(--grau); }
.omablauf + .knopf { margin-top: 2rem; }

/* Spam-Hinweis auf der Open-Mat-Seite */
.omwarnung {
  margin: 1.75rem auto 0; max-width: 34rem;
  padding: 1.125rem 1.375rem; text-align: left;
  background: rgba(226,91,27,.09);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--rund-s) var(--rund-s) 0;
}
.omwarnung p { margin: 0; font-size: .9375rem; color: var(--grau-2); }
.omwarnung strong { color: var(--weiss); }

/* ══════════════════════════════════════════════════════
   HANDY: APP-ANMUTUNG

   Kleine Dinge, die zusammen den Unterschied zwischen
   „Webseite im Browser" und „App" ausmachen.
   ══════════════════════════════════════════════════════ */

html {
  -webkit-text-size-adjust: 100%;   /* iOS vergrößert sonst eigenmächtig Text */
  text-size-adjust: 100%;
}

body {
  -webkit-tap-highlight-color: transparent;  /* kein graues Kästchen beim Tippen */
  overscroll-behavior-y: contain;            /* kein Gummiband über die Ränder */
}

/* Statt des Tap-Kästchens eine eigene, ruhige Rückmeldung */
@media (hover: none) {
  a:active, button:active, summary:active { opacity: .65; transition: none; }
  .knopf:active, .kopf__cta:active, .klebeleiste__knopf:active { transform: scale(.97); }
}

@media (max-width: 720px) {
  /* Tippziele auf Fingergröße – unter 44 px trifft man daneben */
  .mobilnav a { padding: 1rem 1.25rem; }
  .fuss__nav a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Social-Kreise: 44er Tippziel als echtes Quadrat. Vorher machte
     min-height aus dem 42er-Kreis ein Oval, und inline-flex ohne
     justify-content schob das Symbol aus der Mitte. Das Zentrieren
     übernimmt weiterhin das Grid aus der Grundregel. */
  .sozial__icon { width: 44px; height: 44px; }
  .faq__frage { padding-top: 1.125rem; padding-bottom: 1.125rem; }

  /* Zwei Finger breit Luft unter dem letzten Inhalt, damit die
     Klebeleiste nichts verdeckt */
  main { padding-bottom: 5.5rem; }
}

/* iPhone: Rand unten für den Homebalken freihalten.
   Ohne das klebt die Leiste am Balken und lässt sich schlecht treffen. */
.klebeleiste {
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.fuss { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }

/* Widgets: auf schmalen Schirmen den Innenabstand zurücknehmen,
   damit der Stundenplan die volle Breite bekommt */
@media (max-width: 600px) {
  .gymdesk { border-radius: var(--rund-s); }
  .gymdesk--buchung { padding: .375rem; }
}

/* ══════════════════════════════════════════════════════
   HANDY: FEINSCHLIFF
   ══════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* Fußzeile: Icons und Telefonnummer mittig statt linksbündig */
  .sozial { justify-content: center; flex-wrap: wrap; row-gap: .75rem; }
  .fuss__nav { justify-content: center; text-align: center; }
  .fuss__marke { text-align: center; }

  /* Hero: Textunterlage schmaler, damit mehr vom Bild sichtbar bleibt */
  .hero__sub--platte {
    padding: .625rem .875rem;
    background: rgba(0,0,2,.42);
    font-size: .9375rem;
    max-width: 34ch;
  }
  .hero__sub { margin: 1rem 0 1.5rem; }
}

/* Sponsorenleiste auf Fingerbedienung:
   Erster Tipp hält das Band an und zeigt den Namen,
   zweiter Tipp lässt es weiterlaufen. Steuerung in seite.js. */
.sponsoren__spur li.ist-getippt img { filter: brightness(1.45); }
.sponsoren__band.haelt-an .sponsoren__spur { animation-play-state: paused; }