/* =====================================================================
   FREEFIGHT-FITNESS – UNTERSEITEN-Bausteine v2
   Designsprache aus der Live-Seiten-Analyse (19.08., Runde Patrick-Kritik):
   Kurs-Karten im Panel-Look · Tages-Pills + Foto-Kacheln mit Zeit-Badge ·
   große Display-Ziffern · Glow-Karten (grüner Verlaufs-Rand) ·
   Diamant-Listen · editoriale News-Reihen. KEINE Links-Strich-Boxen.
   ===================================================================== */

/* ---- Zweispalter Medien/Text (ueber-uns, gewaltschutz) ---- */
.kurs-block {
  display: grid;
  gap: var(--sp-4);
}
.kurs-block__media img {
  border-radius: var(--radius);
  width: 100%;
}
.kurs-block__text p { margin-top: var(--sp-2); }
@media (min-width: 768px) {
  .kurs-block {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--sp-8);
  }
}

/* ---- Diamant-Liste (Marken-Aufzählung, statt Chips/Streifen) ---- */
.diamant-liste { list-style: none; padding: 0; display: grid; gap: 0.55em; margin-top: var(--sp-2); }
.diamant-liste li { position: relative; padding-left: 1.5em; color: var(--c-on-dark-dim); }
.diamant-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.55em; height: 0.55em;
  background: linear-gradient(49deg, var(--c-brand), var(--c-brand-deep));
  transform: rotate(45deg);
}
.section--paper .diamant-liste li { color: var(--c-ink); }

/* ---- Check-Liste (grüne Haken – Original-Vokabular ✓) ---- */
.check-liste { list-style: none; padding: 0; display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.check-liste li { padding-left: 1.6em; position: relative; color: var(--c-on-dark-dim); }
.check-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--c-brand); font-weight: 700; }
.section--paper .check-liste li { color: var(--c-ink); }
.section--paper .check-liste li::before { color: var(--c-brand-deep); }

/* =====================================================================
   KURS-KARTEN (kurse.html) – Karten-Raster, abgenommen 15.09.2026.
   Ersetzt die fruehere Panel-Liste (eine lange Karte je Kurs, 6.829 px
   mobil). Aufbau nach dem Original: kompakte Karte als Uebersicht,
   Details dahinter – aber per <details> statt 3D-Klappkarte.
   Werte und Begruendung: D-019, Verlauf LOG 35-37.
   ===================================================================== */
/* Raster: drei Spalten wie im Original (.grid-4), mobil eine.
   Das Original hatte feste Kartenmaße (24rem × 40rem); wir lassen die Höhe
   frei, weil sich die Karte beim Aufklappen verändert. */
.kurs-raster {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-4);
  /* 🚨 `start` statt des Grid-Standards `stretch`: sonst zieht eine aufgeklappte
     Karte ihre GANZE Reihe auf die neue Hoehe, und die Nachbarkarten wachsen
     als leere dunkle Flaeche mit (Patrick, 15.09.). Mobil fiel das nicht auf,
     weil dort nur eine Karte pro Reihe steht. */
  align-items: start;
}
/* 🚨 minmax(0, 1fr), nicht 1fr: `1fr` ist in Wahrheit `minmax(auto, 1fr)` und
   waechst mit dem laengsten unumbrechbaren Inhalt. Gemessen: die Spalte mit
   „HOCHEFFIZIENTE SELBSTVERTEIDIGUNG" war 34 px breiter als die Nachbarn,
   die Karten also unterschiedlich gross. Mit minmax(0, 1fr) sind sie gleich. */
@media (min-width: 640px) {
  .kurs-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kurs-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); }
}

/* Karte. Werte aus dem Export (.card_side): #141314 auf 1px #191819,
   Radius 2rem, 1.75rem Innenabstand, oben mehr wegen Notch und Stempel. */
.kurs-karte__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #141314;
  border: 1px solid #191819;
  border-radius: 2rem;
  /* 🚨 Oben 4.75rem, nicht 3rem: der Logo-Stempel sitzt bei 1.75rem und ist
     ca. 1.2rem hoch. Mit 3rem lief der Titel in den Stempel und wurde am
     Kartenrand abgeschnitten (Patrick, 15.09.). Das Original macht es genauso:
     Stempel bei 2rem, `.card_side.is-front` hat padding-top 5rem. Dadurch hat
     der Titel die VOLLE Kartenbreite und bricht erst, wenn die Zeile voll ist. */
  padding: 4.75rem 1.5rem 1.5rem;
}
/* Notch: Export .card_hole – 6rem × .75rem, mittig, 1rem von oben */
.kurs-karte__notch {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  height: 0.75rem;
  border-radius: 100rem;
  background: #080808;
}
/* Logo-Stempel: Export .card_stamp-wrapper (opacity .3, oben rechts) */
.kurs-karte__stempel {
  position: absolute;
  top: 1.75rem;
  right: 1.5rem;
  width: 4rem;
  height: auto;
  opacity: 0.3;
  pointer-events: none;
}

/* Titel mit grünem Verlauf – im Original .text-green-gradient:
   radial-gradient(circle at 50% 50%, #74b52c, #293f0c) + Unterstreichung.
   ⚠️ Der Endpunkt #293f0c ist auf #141314 fast unlesbar (Kontrast ~1,6:1).
   Deshalb derselbe Verlauf, aber mit aufgehelltem Ende (#4e791c, den das
   Original an anderer Stelle selbst verwendet): bleibt der Marken-Look,
   ist aber lesbar. */
/* Zweizeilige Hoehe reservieren: „Bärenstark" ist einzeilig, „Selbstver-teidigung"
   und „Fitnesscircle & -boxen" sind zweizeilig. Ohne feste Hoehe starten die Bilder
   der Karten in einer Reihe auf unterschiedlicher Hoehe und das Raster wirkt unruhig.
   Die Schriftgroesse steht deshalb am h2, damit `em` hier die Titelgroesse meint. */
.kurs-karte__titel {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.2rem);
  /* 2.65em gemessen, nicht geschaetzt: ein zweizeiliger Titel ist inklusive
     Unterstrich und Innenabstand 2.63em hoch, ein einzeiliger 2.3em. */
  min-height: 2.65em;
}
/* 🚨 Warum hier ein Innenabstand rechts steht (nicht entfernen!):
   Der Titel ist KURSIV und wird per `background-clip: text` mit einem Verlauf
   gefuellt. Der Verlauf endet an der Elementbox – die Kursive neigt den letzten
   Buchstaben aber darueber hinaus. Gemessen: Element 130 px, Text 130 px, das „N"
   von KICKBOXEN ragt heraus und bleibt UNBEMALT. Es sieht aus wie abgeschnitten,
   ist aber nur ungefaerbt. Betrifft jede kursive Schrift mit Verlaufsfuellung in
   einer schrumpfenden Box (inline-block). Bloecke ueber die volle Breite – etwa
   die FF+GYM-Headline der Startseite – haben das Problem nicht. */
.kurs-karte__titeltext {
  display: inline-block;
  padding-right: 0.16em;
  font-size: inherit;
  text-transform: uppercase;
  background-image: radial-gradient(circle farthest-corner at 50% 50%, #8fd63a, #4e791c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  border-bottom: 3px solid var(--c-brand);
  padding-bottom: 0.15em;
  /* Netz fuer lange Kursnamen: „Selbstverteidigung" lief sonst ueber die
     Kartenkante hinaus. Muss im CSS stehen, nicht nur als &shy; im Text –
     die Betreiber legen Kurse spaeter selbst im CPT an. */
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Unterzeile: Export .heading-type – uppercase, .75rem, Laufweite .5px */
.kurs-karte__kicker {
  margin: 0.9em 0 0;
  font-family: var(--f-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-paper);
}
.kurs-karte__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1rem;
  margin-top: var(--sp-3);
}

/* ---- Aufklapp-Bereich ----
   <details>/<summary> statt Klappkarte: kein JavaScript, Tastatur und
   Screenreader kennen den Auf-/Zu-Zustand von Haus aus, und der Text steht
   im DOM – also auch für Suchmaschinen lesbar. */
.kurs-karte__mehr { margin-top: auto; padding-top: var(--sp-3); }
.kurs-karte__mehr summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-paper);
  border-bottom: 2px solid var(--c-brand);
  padding-bottom: 0.35em;
}
.kurs-karte__mehr summary::-webkit-details-marker { display: none; }
.kurs-karte__mehr summary::before {
  content: "+";
  color: var(--c-brand);
  font-size: 1.2em;
  line-height: 1;
}
.kurs-karte__mehr[open] summary::before { content: "–"; }
.kurs-karte__mehr summary:hover { color: var(--c-brand); }
.kurs-karte__mehr-zu { display: none; }
.kurs-karte__mehr[open] .kurs-karte__mehr-auf { display: none; }
.kurs-karte__mehr[open] .kurs-karte__mehr-zu { display: inline; }

.kurs-karte__inhalt { padding-top: var(--sp-3); }
.kurs-karte__inhalt p { margin-top: var(--sp-2); }
.kurs-karte__inhalt p:first-child { margin-top: 0; }
.kurs-karte__gruppen { margin-top: var(--sp-3); }
.kurs-karte__gruppen strong {
  display: block;
  margin-bottom: 0.6em;
  font-family: var(--f-body);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-paper);
}
.kurs-karte__zeiten { margin-top: var(--sp-3); }

/* 🚨 `max-width: none` ist der eigentliche Fix: base.css setzt `p { max-width: 65ch }`.
   Der Absatz war dadurch schmaler als der Container und stand links – `text-align:
   center` zentrierte nur INNERHALB des schmalen Absatzes. Mobil fiel es nicht auf,
   weil 65ch dort breiter sind als der Bildschirm. */
.kurs-fuss {
  margin-top: var(--sp-6);
  max-width: none;
  text-align: center;
}

/* =====================================================================
   KURSPLAN (kursplan.html) – wie Live: Tages-Pill + Foto-Kacheln
   mit grünem Zeit-Badge
   ===================================================================== */
/* Der Download gehört nach OBEN, nicht nur ans Seitenende (Patrick, 16.09.):
   der Kursplan ist mobil über 6.000 px lang, wer ihn nur herunterladen will, soll
   nicht erst durchscrollen müssen. Der Knopf am Seitenende bleibt trotzdem stehen. */
.plan-link {
  font-weight: 700;
  color: var(--c-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.plan-link:hover { color: var(--c-paper); }

/* Das frühere grüne „FF+Gym"-Band stand als eigener Kasten VOR dem Kursplan und hat
   den Blick vom eigentlichen Inhalt weggezogen. Die Information gehört in den
   Seitenkopf (Patrick, 16.09.). Was vom Band bleibt, ist die Farbe: die ganze Zeile
   steht in Brand-Grün, damit die Öffnungszeit sich vom übrigen Kopftext abhebt.
   🚨 `.page-head__lead` erbt seine Farbe von `.page-dark p` – deshalb muss die Regel
   hier mindestens gleich spezifisch sein, sonst kommt das Grün nicht an (P-006). */
.page-head__lead.gym-zeile { color: var(--c-brand); }
/* Die Marke bleibt WEISS im grünen Satz (Patrick, 16.09.: „FF+Gym gerne wieder weiß
   und rest grün"). Weiß auf Grün setzt den Namen ab, ohne ihn lauter zu machen.
   ⚠️ Die Doppelklasse ist trotzdem nötig: sie muss `.page-head__lead strong` aus
   site.css schlagen können, sonst hängt die Farbe an der Reihenfolge zweier Dateien
   und kippt beim nächsten Umbau still (P-006). */
.page-head__lead.gym-zeile .gym-zeile__marke {
  font-family: var(--f-head);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-paper);
}

.kursplan-grid {
  display: grid;
  gap: var(--sp-6) var(--gap-grid);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
/* 🚨 Die Leiste ist KEIN flacher grüner Kasten (Patrick, 16.09.). Die Alt-Seite hatte
   hier einen radialen Verlauf, der aus der Mitte heraus leuchtet und zum Rand hin
   fast ins Schwarzgrüne läuft, plus einen harten Schlagschatten nach unten. Das ist
   der Grund, warum die Leisten dort „special" wirkten und bei uns wie ein Balken.
   1:1 abgelesen aus `.schedule-heading-wrap.schedule-shadow` (Export Z. 1133–1138):
     background-image: radial-gradient(circle farthest-corner at 50% 50%,
                       var(--stani-green), var(--dark-green) 90%);
     border-radius: .7rem; padding: .5rem 0; box-shadow: 0 8px 15px -2px #000;
   Übernommen bis auf den Innenabstand: das Original hatte links/rechts 0, weil die
   Leiste dort immer volle Spaltenbreite hatte. */
.tages-pill {
  display: block;
  text-align: center;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-paper);
  background-image: radial-gradient(circle farthest-corner at 50% 50%,
                    var(--c-brand), var(--c-brand-night) 90%);
  border-radius: 0.7rem;
  padding: 0.5rem 1em;
  box-shadow: 0 8px 15px -2px #000;
  margin-bottom: var(--sp-3);
}
.tag-spalte ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }

.slot-kachel {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.slot-kachel img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.85);
}
.slot-kachel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #00000000 30%, #000000a6 100%);
}
.slot-kachel__zeit {
  position: absolute;
  top: 0; right: 0;
  z-index: 1;
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--c-paper);
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-deep));
  border-radius: 0 0 0 12px;
  padding: 0.35em 0.9em;
}
.slot-kachel__name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  text-align: center;
  padding: var(--sp-2);
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-paper);
}
.slot-kachel__name small {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--c-brand);
}
.kursplan-fuss {
  margin-top: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
}
.kursplan-fuss p { font-size: var(--fs-small); margin: 0; }

/* =====================================================================
   NEWS (news.html) – editoriale Reihen mit großem Display-Datum
   ===================================================================== */
.news-liste { display: grid; list-style: none; padding: 0; }
.news-card {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-6);
  border-top: 1px solid #ffffff1f;
}
.news-liste .news-card:first-child { border-top: 0; padding-top: 0; }
.news-card__datum {
  font-family: var(--f-display);
  text-transform: uppercase;
  color: var(--c-brand);
  font-size: var(--fs-h1);
  line-height: 0.95;
}
.news-card__datum small {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #ffffff8c;
  text-transform: uppercase;
  margin-top: 0.5em;
}
.news-card h2 { font-size: var(--fs-h3); }
.news-card ul { margin: 0; }
.news-card .check-liste { margin-top: var(--sp-1); }
.news-card .btn { justify-self: start; margin-top: var(--sp-2); }
@media (min-width: 768px) {
  .news-card { grid-template-columns: 11rem 1fr; column-gap: var(--sp-6); }
  .news-card__inhalt { grid-column: 2; }
  .news-card__datum { grid-column: 1; grid-row: 1 / span 2; }
  .news-card h2 { grid-column: 2; }
}

/* =====================================================================
   GLOW-KARTE – grüner Verlaufs-Rand (Angebot, Preise, Stellen)
   ===================================================================== */
.glow-grid { display: grid; gap: var(--gap-grid); margin-top: var(--sp-4); }
@media (min-width: 768px) { .glow-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.glow-karte {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(#22231f, #1d1e1a) padding-box,
    linear-gradient(160deg, #75b62c99, #75b62c14 55%, #75b62c33) border-box;
  padding: var(--sp-4);
}
.glow-karte h3 {
  color: var(--c-brand);
  font-size: var(--fs-h4);
  margin-bottom: 0.4em;
}
.glow-karte p { font-size: var(--fs-small); color: var(--c-on-dark-dim); }
/* Die Karte war im Original nahezu quadratisch (gemessen 311×332). Bei uns wurde sie
   flach, weil der Text kleiner war und der Innenabstand knapp. Mit dem groesseren Text
   und etwas mehr Luft stimmt das Verhaeltnis wieder, ohne feste Hoehe – die waere bei
   frei editierbarem Text die naechste Fehlerquelle. */
.page-gym .glow-karte--icon { padding: 3.6rem 1.5rem 1.75rem; }
/* Ab Tablet die Original-Hoehe (330 px → 20.625rem), damit die drei Karten nebeneinander
   quadratisch wirken statt flach. `min-height`, nicht `height`: laengerer Text darf
   wachsen, sonst laeuft er spaeter beim Bearbeiten aus der Karte.
   Mobil bewusst NICHT: dort steht eine Karte allein, das Quadrat ergibt keine Ordnung
   mehr und kostet nur Scrollweg. */
@media (min-width: 640px) {
  .page-gym .glow-karte--icon { min-height: 20.625rem; }
}
.section--paper .glow-karte p { color: var(--c-on-dark-dim); } /* Karte bleibt dunkel, auch auf hellen Sektionen */

/* ---- Preis-Karten: dunkel + Glow (wie Live-Gym-Seite) ---- */
.preis-grid { display: grid; gap: var(--gap-grid); margin-top: var(--sp-4); }
@media (min-width: 768px) { .preis-grid { grid-template-columns: 1fr 1fr; } }
.preis-card {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(#22231f, #1d1e1a) padding-box,
    linear-gradient(160deg, #75b62c99, #75b62c14 55%, #75b62c33) border-box;
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.preis-card h3 { font-size: var(--fs-h4); color: var(--c-paper); }
.preis-card__preis {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--c-brand);
}
.preis-card__preis small { font-family: var(--f-body); font-size: var(--fs-small); color: #ffffff8c; }
.preis-card .check-liste { margin-top: 0; }
.preis-card .btn { justify-self: start; margin-top: var(--sp-2); }
.preis-card--top {
  background:
    linear-gradient(#252720, #1e201a) padding-box,
    linear-gradient(160deg, var(--c-brand), #75b62c33 60%, var(--c-brand)) border-box;
}
.preis-card__badge {
  justify-self: start;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-deep));
  color: var(--c-paper);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 0.2em 0.7em;
}

/* =====================================================================
   NUMMERN-BLÖCKE – große grüne Display-Ziffern (wie „Unser Konzept" live)
   ===================================================================== */
.num-grid { display: grid; gap: var(--sp-6) var(--sp-8); margin-top: var(--sp-4); }
@media (min-width: 768px) { .num-grid { grid-template-columns: 1fr 1fr; } }
/* Die Ziffer steht im Original in einer gross gezeichneten Raute (Kontur, kein Fuellung).
   Das ist eins der Details, die die Alt-Seite „gemacht" wirken lassen: dieselbe Raute
   taucht als Diamant-Bullet und als Plus-Rahmen wieder auf, die Seite hat dadurch EINE
   Formensprache statt drei. Die Kontur liegt hinter der Ziffer und ist bewusst schwach
   (14 % Weiss), damit sie die Zahl nicht totschlaegt. */
.num-block__zahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  min-height: 2.2em;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.6rem, 2rem + 2.5vw, 4rem);
  line-height: 1;
  color: var(--c-brand);
}
.num-block__zahl::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.55em;
  height: 1.55em;
  border: 2px solid #75b62c3d;
  border-radius: 0.12em;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
.num-block h3 {
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 900;
  color: var(--c-brand);
  font-size: var(--fs-h4);
  margin: 0.2em 0 0.4em;
}
.num-block p, .num-block li { font-size: var(--fs-small); }
.num-block .diamant-liste { gap: 0.4em; }

/* =====================================================================
   GYM-Sub-Brand (freefight-fitness-gym.html) – „Premium-Metal"-Look
   Silber-Verlaufstext, Ghost-Wordmark, Icon-Karten, Plus-Bullets,
   Parallelogramm-Deko. Silber bleibt EXKLUSIV der Gym-Seite.
   ===================================================================== */

/* Silber-Text: Original-Rezept aus dem Webflow-CSS (.text-span-7).
   🚨 WIE es im Original benutzt wurde, ist genauso wichtig wie die Rezeptur:
   `.text-span-7` steht dort GENAU EINMAL, auf einem einzigen Wort („FÜr" in
   „FÜr alle Anmeldungen vor dem 13. Januar 25", gym-Seite Z. 397). Wir hatten es
   auf vier ganze Sektions-Unterzeilen gelegt. Ein Verlauf, der ueber drei Buchstaben
   schimmert, wird ueber vierzig Zeichen zu grauem Matsch: die dunklen Stopps (#616161,
   #555) landen mitten im Satz und der Kontrast faellt unter das Lesbare.
   Deshalb zwei getrennte Klassen statt einer: `.silber` bleibt der Akzent auf einem
   Wort (Original-Rezept, unveraendert), `.silber--gross` ist die Unterzeile und
   benutzt einen deutlich helleren Verlauf. */
.silber {
  background-image: linear-gradient(45deg, #fff, #616161 39%, #fff 59%, #555 91%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.silber--gross {
  display: block;
  /* Manrope statt Interstate: die Unterzeile soll unter der Headline stehen, nicht
     neben ihr konkurrieren. Interstate 400 nicht-kursiv war auf dieser Seite die
     einzige dritte Stimme neben Display-Kursiv und Fliesstext. */
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: 0.005em;
  max-width: 34ch;
  margin-top: var(--sp-2);
  /* Heller Metall-Verlauf: Glanz bleibt, die dunkelste Stelle liegt bei #b6b6b6
     statt #555. Gemessen gegen #1d1d1b sind das rund 8:1 statt 3:1. */
  background-image: linear-gradient(100deg, #ffffff, #b6b6b6 42%, #ffffff 62%, #cfcfcf 92%);
}
/* In zentrierten Sektionen (Angebot, Konzept, Preise) muss auch der Block mittig
   stehen, sonst zentriert `text-align` nur den Text INNERHALB einer links klebenden
   Spalte. Eigene Klasse statt eines Selektors auf den Inline-Style: der Inline-Style
   verschwindet in Phase 0, die Klasse wird spaeter ein Block-Attribut. */
/* 🚨 Die Klasse hiess „zentriert", zentrierte aber nur die BOX, nicht den
   Text. Deshalb brauchte eine der drei Verwendungen zusaetzlich ein
   Inline-`text-align: center`, die anderen beiden nicht, weil dort schon der
   Container zentriert. Der Name war also irrefuehrend, nicht der Einsatz.
   Nachgemessen: die beiden anderen Stellen sind bereits zentriert, das
   Ergaenzen ist dort folgenlos. */
.silber--zentriert { margin-inline: auto; text-align: center; }

/* Sektion, deren gesamter Inhalt zentriert ist (Angebot, Preise auf der
   Gym-Seite). Bewusst am Container: dort sind ALLE Kinder zentriert,
   Karten und Knoepfe eingeschlossen. Gemessen: 16 von 16 bzw. 11 von 20. */
.container--zentriert { text-align: center; }

/* Einzelne zentrierte Ueberschrift in einer sonst linksbuendigen Sektion.
   ⚠️ Bewusst KEIN eigener Kopf-Wrapper: in der Konzept-Sektion ist die
   Zentrierung bereits korrekt auf Titel und Silberzeile begrenzt, das Raster
   darunter steht links. Ein Wrapper wuerde also ein Problem loesen, das die
   Messung nicht gefunden hat, und dafuer eine DOM-Ebene kosten. */
.zentriert { text-align: center; }

/* =====================================================================
   GYM-SEITE: GRUND UND LESBARKEIT (D-024, 16.09.2026)
   Patrick: „der Hintergrund ist viel zu grau … die Leserlichkeit sieht nur noch
   nach KI-Slop aus, fette kleine Schriften … grau ist schwer lesbar, warum nicht
   weiss oder Schriften etwas groesser."
   Er hat recht, und die Zahlen aus dem Export geben ihm recht:
   • Grund der Alt-Seite: **#191919**, unser Seitenschwarz ist #1d1d1b. Klingt nach
     nichts, ist aber genau der Unterschied zwischen „schwarz" und „grau", wenn
     grosse Flaechen nebeneinander liegen.
   • Fliesstext der Gym-Seite im Original: **#ffffff, 1rem, Gewicht 700**, Zeilenhoehe
     1.5 (`.gym-intro.padding`, `.gym-exklusive-vorteile.padding`, `.gym-konzept.padding`
     … alle identisch). Bei uns lief derselbe Text auf `--fs-small` (14 px) in
     `--c-on-dark-dim` (#ffffffb3). Das ist der „Einheitsbrei", von dem er spricht:
     unser gedimmtes Grau ist als **Stilmittel** gedacht, nicht als Standard fuer
     Inhalte, die man wirklich lesen soll.
   🚨 Merksatz fuer alles Weitere: Grau ist erlaubt fuer Beiwerk (Bildunterschriften,
   Fussnoten, Belegzeilen). Sobald ein Text eine Aussage traegt – Kartentext,
   Aufzaehlung, Konzeptpunkt – ist er weiss und mindestens 1rem gross.
   ===================================================================== */
.page-gym { background: #191919; }
/* Das Karten-Loch, mit dem Icons den Rahmen unterbrechen, muss die Seitenfarbe
   treffen – sonst steht wieder ein Rechteck in der Karte. */
.page-gym .glow-karte--icon { background-image: linear-gradient(#191919, #191919), linear-gradient(160deg, #75b62c99, #75b62c14 55%, #75b62c33); }
.page-gym .glow-karte--icon .glow-karte__icon { background: #191919; }

/* Die Konzept-Sektion traegt im Original denselben Verlauf wie der Hero
   (`.gym-background-konzept`). Das ist die einzige weitere Stelle mit dem hellen
   Grau – ueberall sonst steht der dunkle Grund. */
.gym-konzept-bg { background-image: linear-gradient(130deg, #303030, #141414); }

/* ---- Lesbarkeit: die Stellen, an denen Grau falsch war ---- */
.page-gym .glow-karte p,
.page-gym .num-block p,
.page-gym .num-block li,
.page-gym .plus-liste li {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-paper);
}
.page-gym .diamant-liste li,
.page-gym .check-liste li { color: var(--c-paper); }
/* Der Fliesstext der Sektionen ebenso: er traegt die Aussage, nicht die Stimmung. */
.page-gym .section p { color: #ffffffeb; }
/* ⚠️ Diese Zeile steht BEWUSST nach `.section p`: beide Selektoren sind gleich
   spezifisch (zwei Klassen + Element), also entscheidet die Reihenfolge. Der Kartentext
   soll reines Weiss sein wie im Original, nicht 92 %. */
.page-gym .glow-karte p { color: var(--c-paper); }
/* ⚠️ Und die Marken-Kursive zurueckholen: `.page-gym .section p` ist spezifischer als
   `p.kicker-italic` und haette die gruene Zeile wieder weiss gemacht. Genau der Effekt,
   den ich eine Stunde vorher site-weit repariert hatte – eine neue Regel kann eine alte
   Reparatur still ueberschreiben. Deshalb nach JEDER Farbregel im Browser nachsehen. */
.page-gym p.kicker-italic { color: var(--c-brand); }
/* Ausnahmen, wo Grau richtig bleibt: Belegzeilen unter dem Preis und die
   Oeffnungszeit im Hero. Beides Beiwerk, kein Lesetext. */
.page-gym .preis-card__preis small,
.page-gym .hero__proof { color: #ffffff8c; }

/* ---------------------------------------------------------------------
   GYM-HERO – neu aufgebaut am 16.09.2026 (D-023), Werte aus dem Export.
   Patrick: „schau wie clean und gut gemacht es im original ist direkt bei
   Sektion 1 … bei uns der Mann riesengross."
   Vier Unterschiede, alle nachgemessen:
   1. Die Wortmarke steht im Original in **Interstate, NICHT condensed**
      (`.gym-hero { font-family: Interstate }`, `.gym-heading-h1 { 4.5vw/900 }`,
      `.gym-h1-hero { 5.7vw }`). Die Gym-Seite ist eine Sub-Marke (D-009) und
      weicht hier bewusst vom condensed Haupt-Look ab. Wir hatten `.display`
      = condensed, dadurch wirkte die Marke schmal und fremd.
      „FREEFIGHT" ist gemessen ~1,2× so gross wie „FITNESS GYM".
   2. Das Athleten-PNG ist im Original **20vw** breit (gemessen 160 px auf 375,
      ~250 px auf 1440). Bei uns waren es min(82vw, 420px) – mehr als doppelt so
      gross, und dadurch kippte die ganze Sektion.
   3. Der Hintergrund ist `linear-gradient(130deg, #303030, #141414)` plus drei
      weiche gruene Kreise (`.bg-light-1`: `radial-gradient(circle closest-side,
      #75b62c, #49711b9e 53%, transparent)`, 25–30vw, Deckkraft .25–.35).
      Die machen die Tiefe, die uns gefehlt hat. Kein Keil im Gym-Hero.
   4. Mobil ist im Original alles **zentriert**, erst ab Tablet zweispaltig.
   --------------------------------------------------------------------- */
.hero.hero--gym {
  background-color: #141414;
  background-image:
    radial-gradient(25vw 25vw at 8% 16%, #75b62c59, #49711b3d 53%, transparent 100%),
    radial-gradient(30vw 30vw at 66% 96%, #75b62c40, #49711b26 53%, transparent 100%),
    linear-gradient(130deg, #303030, #141414);
  padding-block: var(--sp-6) var(--sp-4);
  text-align: center;
}
.hero.hero--gym::before { content: none; }   /* kein Keil auf der Gym-Seite */
.hero--gym .hero__text { max-width: none; }

/* Wortmarke: zwei Zeilen, die obere groesser. `block` statt <br>, damit die
   Groessen getrennt steuerbar sind und der Umbruch nicht am Markup klebt. */
.gym-wortmarke {
  font-family: var(--f-head);   /* Interstate, NICHT condensed – siehe Punkt 1 */
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--c-paper);
}
.gym-wortmarke__gross,
.gym-wortmarke__klein { display: block; }
.gym-wortmarke__gross { font-size: clamp(2.6rem, 1.15rem + 6.2vw, 4.75rem); }
.gym-wortmarke__klein { font-size: clamp(2.15rem, 0.95rem + 5.1vw, 3.95rem); }

/* ⚠️ `.hero--gym` davor ist Pflicht: `.page-dark p` (Klasse+Element) schlaegt eine
   einzelne Klasse und faerbt den Claim sonst grau statt gruen. Beim ersten Durchgang
   genau so passiert und im Browser gesehen (P-006). */
.hero--gym .gym-claim {
  margin-top: var(--sp-2);
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1rem, 0.85rem + 0.7vw, 1.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.hero--gym .hero__cta { justify-content: center; }
.hero--gym .hero__proof { max-width: none; }

/* Athlet: klein und mittig, mit der Wortmarke als Schatten dahinter.
   `min()` statt fester Breite, damit er auf kleinen Geraeten nicht die halbe
   Hoehe frisst. Werte am Original geeicht (20vw). */
.hero--gym .hero__media {
  position: relative;
  width: min(48vw, 200px);
  justify-self: center;
  margin-top: var(--sp-4);
  margin-bottom: 0;
}
.hero--gym .hero__media::before {
  content: "";
  position: absolute;
  inset: -18% -95% -8% -95%;
  /* Das GYM-Logo, nicht das Hauptlogo: auf dieser Seite traegt die Sub-Marke den
     Zusatz „+GYM" (Original: `.fff-gym_logo_decoration` mit FFFGym-Logo_Web.svg). */
  background: url("../assets/img/FFFGym-Logo_Web.svg") no-repeat center / contain;
  opacity: 0.07;   /* Original: .fff-gym_logo_decoration { opacity: .07 } */
  pointer-events: none;
}
.hero--gym .hero__media img { position: relative; }

@media (min-width: 768px) {
  /* Ab Tablet wie im Original: Text links, Athlet rechts. */
  .hero.hero--gym { text-align: left; padding-block: var(--sp-8) var(--sp-6); }
  .hero--gym .hero__grid { align-items: center; }
  .hero--gym .hero__cta { justify-content: flex-start; }
  .hero--gym .hero__media {
    width: min(26vw, 300px);
    justify-self: center;
    margin-top: 0;
  }
}

/* Grüne Plus-Bullets (Gym „Was uns besonders macht").
   Wie im Original sitzt das Plus in einer Rauten-Kontur – dieselbe Form wie bei den
   Konzept-Ziffern und den Diamant-Bullets. Das Plus selbst wird aus zwei Balken
   gezeichnet (nicht als Zeichen gesetzt), damit es exakt mittig sitzt. */
.plus-liste { list-style: none; padding: 0; display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.plus-liste li { position: relative; padding-left: 3.1em; }
/* ⚠️ Zwei Pseudo-Elemente, nicht eines: der Rahmen ist um 45° gedreht, das Plus darf
   es NICHT sein. Zeichnet man beides in ein Element, dreht der Hintergrund mit und aus
   dem Plus wird ein X. */
.plus-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2em;
  height: 2em;
  border: 2px solid #75b62c3d;
  border-radius: 0.14em;
  transform: rotate(45deg);
}
.plus-liste li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2em;
  height: 2em;
  background-image:
    linear-gradient(var(--c-brand), var(--c-brand)),
    linear-gradient(var(--c-brand), var(--c-brand));
  background-size: 1em 0.26em, 0.26em 1em;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* ---- Icon-Karten (Gym-Angebot) ----
   🚨 Die Icons hatten sichtbar verschiedene Groessen (Patrick, 16.09.). Ursache war
   `height: 52px` fuer alle drei: die Hantel ist 300×109 und wurde dadurch 144 px BREIT,
   die Kaempfer-Silhouette (88×150) nur 40 px. Eine feste Hoehe ist bei Icons mit so
   unterschiedlichem Seitenverhaeltnis die falsche Stellschraube.
   Gemessen im Original (`.benefit-icon`, Inhalt ohne Innenabstand): 96×35, 52×90, 89×90.
   Genau diese drei Groessen ergeben sich aus EINER Regel: max. 6rem breit, max. 5.625rem
   hoch, Seitenverhaeltnis erhalten. Also keine Sonderwerte je Icon noetig.
   Dazu das Detail, das die Alt-Seite „smooth" macht: das Icon sitzt MITTIG AUF der
   oberen Kartenkante und unterbricht den Rahmen (`inset: -6% 0 auto 50%` plus
   Hintergrundfarbe der Sektion als Innenabstand). Das faellt nicht bewusst auf,
   macht aber den Unterschied zwischen „Icon in Karte gelegt" und „gestaltet". */
.glow-karte--icon {
  position: relative;
  text-align: center;
  /* 🚨 Die Karte bekommt die SEKTIONSFARBE als Fuellung, nicht den dunkleren
     Karten-Verlauf. Sonst sieht man die Farbkachel, mit der das Icon den Rahmen
     unterbricht, als helles Rechteck im Karteninneren. Im Original faellt das nicht
     auf, weil die Karte dort gar keine Fuellung hat, nur einen gruenen Rahmen –
     Fuellung und Seitenhintergrund sind also identisch. Genau das bauen wir nach. */
  background:
    linear-gradient(var(--c-bg-dark), var(--c-bg-dark)) padding-box,
    linear-gradient(160deg, #75b62c99, #75b62c14 55%, #75b62c33) border-box;
  /* Platz fuer das ueberstehende Icon: halbe Icon-Hoehe + Luft. */
  padding-top: 3.6rem;
  margin-top: 2.8rem;
}
.glow-karte--icon:first-child { margin-top: 2.8rem; }
.glow-karte--icon .glow-karte__icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 6rem;
  max-height: 5.625rem;
  object-fit: contain;
  /* Die Kachel deckt den Rahmen ab, deshalb exakt die Sektionsfarbe.
     ⚠️ Wird die Sektion je hell, muss dieser Wert mitwandern. */
  background: var(--c-bg-dark);
  padding-inline: 1rem;
  box-sizing: content-box;
}
.glow-karte--icon h3 {
  font-style: italic;
  font-weight: 900;
}

/* ---- Willkommen-Sektion (Gym) ----
   Im Original steht hier mobil ALLES auf einer Mittelachse: Überschrift, Silber-Zeile,
   Fließtext, Knopf. Bei uns klebte alles links, und genau das lässt eine Marketing-
   Sektion „hingeklatscht" wirken – es gibt keine erkennbare Ordnung, nur Text.
   Ab Tablet wird daraus die zweispaltige Fassung mit linksbündigem Text: dort ist die
   Spalte breit genug, dass zentrierte Flächen unruhig würden. */
.gym-intro__text { text-align: center; }
.gym-intro__text .silber--gross,
.gym-intro__text p { margin-inline: auto; }
.gym-intro__media { justify-self: center; }
/* 30 % kleiner als zuvor (Patrick, 16.09.): 210 → 148 px. Das Bild ist Beiwerk,
   nicht die Aussage der Sektion, und nahm mobil ein Drittel der Hoehe ein. */
.gym-intro__media img { width: min(34vw, 148px); margin-inline: auto; }
@media (min-width: 768px) {
  .gym-intro__text { text-align: left; }
  .gym-intro__text .silber--gross,
  .gym-intro__text p { margin-inline: 0; }
}

/* Parallelogramm-Deko (outlined, wie Original-Hintergrundlinien) */
.deko-rahmen { position: relative; }
.deko-rahmen::before,
.deko-rahmen::after {
  content: "";
  position: absolute;
  border: 1px solid #75b62c59;
  transform: skewX(-20deg);
  pointer-events: none;
}
.deko-rahmen::before { width: 55%; height: 70%; right: -6%; bottom: -8%; }
.deko-rahmen::after { width: 34%; height: 42%; right: 22%; top: -10%; }

/* Preis-Karten im Original-Layout: Titel grün-kursiv oben, Preis unten */
.preis-card { text-align: center; }
.preis-card h3 {
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 900;
  color: var(--c-brand);
}
.preis-card .check-liste { text-align: left; justify-self: center; }
/* 🚨 `.preis-card__preis` allein reicht NICHT: `.page-dark p` ist als Klasse+Element
   spezifischer und hat den Preis still auf #ffffffb3 gesetzt. Gemessen stand da
   rgba(255,255,255,.7) statt Grün – ausgerechnet auf der Zahl, wegen der die Leute
   die Seite aufrufen. Deshalb die Doppelklasse (P-006). */
.preis-card .preis-card__preis {
  font-style: italic;
  color: var(--c-brand);
  margin-top: var(--sp-2);
}
.preis-card .btn, .preis-card__badge { justify-self: center; }

/* =====================================================================
   KARRIERE (karriere.html)
   Die Seite war eine Textwand: drei Glow-Karten, alles gleichzeitig offen,
   4.260 px auf dem Handy. Die Alt-Seite hatte an dieser Stelle ein Akkordeon
   mit gruenem Plus, und das aus gutem Grund: wer Arbeit sucht, will zuerst
   SEHEN, was es gibt, und erst dann lesen. Wir nehmen dieselbe Idee, aber mit
   `<details>` statt Webflow-JS - genau wie auf der Kurse-Seite, also ohne JS,
   per Tastatur bedienbar und fuer Suchmaschinen lesbar.
   ===================================================================== */
.stellen-liste {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.stelle {
  background: linear-gradient(160deg, #22231f, #191a17);
  border: 1px solid #ffffff1a;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--speed);
}
.stelle[open] { border-color: #75b62c66; }
.stelle:hover { border-color: #75b62c4d; }

.stelle summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* Die ganze Zeile ist das Tippziel, nicht nur der Titel. Auf dem Handy trifft
     niemand ein 24-px-Plus am rechten Rand. */
  padding: var(--sp-3);
  cursor: pointer;
  list-style: none;
}
.stelle summary::-webkit-details-marker { display: none; }
.stelle__kopf { flex: 1; min-width: 0; }
.stelle__titel {
  font-family: var(--f-head);   /* Interstate kursiv, NICHT condensed: zweite Ebene (D-019 C) */
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  color: var(--c-paper);
  margin: 0;
}
.stelle__meta {
  display: block;
  margin-top: 0.25em;
  font-size: var(--fs-small);
  color: var(--c-brand);
}

/* Plus, das beim Oeffnen zum Minus wird. Zwei Balken statt eines Zeichens:
   ein getipptes "+" haengt an der Schriftart und sitzt nie genau mittig. */
.stelle__marke {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #ffffff0f;
  transition: background var(--speed);
}
.stelle__marke::before,
.stelle__marke::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.85rem;
  height: 2px;
  background: var(--c-brand);
  transform: translate(-50%, -50%);
  transition: transform var(--speed), opacity var(--speed);
}
.stelle__marke::after { transform: translate(-50%, -50%) rotate(90deg); }
.stelle[open] .stelle__marke { background: #75b62c26; }
.stelle[open] .stelle__marke::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.stelle summary:focus-visible { outline: 3px solid var(--c-brand); outline-offset: -3px; }

.stelle__inhalt {
  padding: 0 var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--c-line-dark);
  margin-top: 0;
  padding-top: var(--sp-3);
}
.stelle__inhalt h4 {
  font-family: var(--f-head);
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-paper);
  margin-top: var(--sp-3);
}
.stelle__inhalt h4:first-child { margin-top: 0; }
.stelle__hinweis {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  font-style: italic;
}
.stelle__inhalt .btn { margin-top: var(--sp-3); }

/* ---- Vorteile: statt einer siebenzeiligen Hakenliste ein Raster aus kleinen
        Karten. Gleiche Aussagen, aber man erfasst sie im Vorbeiscrollen.
        🚨 Die Emoji sind eine bewusste Entscheidung von Patrick (16.09.), keine
        Verlegenheitsloesung: die Alt-Seite hatte sie an genau dieser Stelle, und sie
        brechen die Monotonie einer Seite auf, die sonst nur aus Text besteht.
        Mein Gegenargument (haengt an der Emoji-Schrift des Geraets, sieht ueberall
        etwas anders aus) bleibt richtig, wiegt hier aber leichter als der Gewinn.
        Deshalb: eigene Spalte fuers Emoji und eine explizite Emoji-Schriftliste,
        damit die Darstellung wenigstens nicht vom Zufall abhaengt. ---- */
.vorteil-raster {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}
@media (min-width: 640px)  { .vorteil-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vorteil-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 🚨 Raster statt absolut positioniertem Marker. Der Diamant davor sass auf
   `top: 1.45rem` – eine feste Zahl, die nur bei EINZEILIGEM Titel passte. Sobald ein
   Titel umbrach, stand er sichtbar zu hoch (Patrick: „die karos sind verschoben",
   16.09.). Das war ein Fehler, keine Absicht. Mit zwei Spalten richtet das Raster
   Marker und Titel aneinander aus, egal wie lang der Titel wird. */
.vorteil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
  padding: var(--sp-3);
  background: #ffffff08;
  border: 1px solid #ffffff12;
  border-radius: var(--radius-sm);
}
.vorteil__icon {
  grid-row: 1 / span 2;
  /* Erst die Farb-Emoji-Schriften, dann der normale Fliesstext-Stack. Ohne diese
     Liste sucht der Browser die Glyphe irgendwo im System zusammen. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--f-body);
  font-size: 1.4rem;
  line-height: 1.25;
}
.vorteil__titel {
  grid-column: 2;
  font-family: var(--f-head);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fs-body);
  line-height: 1.25;
  color: var(--c-paper);
}
.vorteil__text {
  grid-column: 2;
  margin-top: 0.25em;
  font-size: var(--fs-small);
  color: var(--c-on-dark-dim);
}

/* =====================================================================
   Sonstiges
   ===================================================================== */

/* Telefon und E-Mail auf der Kontaktseite: WEISS, nicht gruen (Patrick, 16.09.).
   Sie stehen dort in einer gruenen Vollflaechen-Sektion, und Marken-Gruen auf Gruen
   ist praktisch unlesbar. Dass es Links sind, zeigt der Unterstrich – das ist
   ohnehin das verlaesslichere Signal als Farbe allein, weil es nicht von der
   Hintergrundfarbe abhaengt. */
.pt__direkt { margin-top: var(--sp-2); }
.pt__direkt a {
  color: var(--c-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pt__direkt a:hover { text-decoration-thickness: 2px; }

/* ---- Team (ueber-uns.html) ---- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap-grid);
  list-style: none;
  padding: 0;
  margin-top: var(--sp-4);
}
.team-card { text-align: center; }
.team-card img,
.team-card .team-card__platzhalter {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border-radius: 50%; /* runde Portraits wie auf der Live-Gym-Seite */
  background: #2a2a27;
}
.team-card .team-card__platzhalter {
  display: grid;
  place-items: center;
  color: #ffffff59;
  font-size: 3rem;
  font-family: var(--f-display);
}
.team-card__name {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--f-head);
  font-weight: 700;
}
.team-card__rolle {
  display: block;
  font-size: var(--fs-small);
  color: #ffffff8c;
}
.team-card__foto-hinweis {
  display: block;
  font-size: 0.75rem;
  color: var(--c-brand);
  margin-top: 0.2em;
}

/* ---- Zitate (Mitgliederstimmen) ----
   🚨 Waren weisse Karten auf der dunklen Gym-Seite: zwei grelle Bloecke, die den
   Premium-Metal-Look der Sub-Marke (D-009) an der auffaelligsten Stelle aufbrachen.
   Jetzt dunkle Karten wie die Preis- und Glow-Karten daneben, mit einem grossen
   gruenen Anfuehrungszeichen als Marker. Die Aussage bleibt Wort fuer Wort. */
.zitate { display: grid; gap: var(--gap-grid); margin-top: var(--sp-4); }
@media (min-width: 768px) { .zitate { grid-template-columns: 1fr 1fr; } }
/* 🚨 Der Name sitzt AUF der oberen Rahmenkante und unterbricht sie – dasselbe
   Prinzip wie die Icons auf den Angebots-Karten. Im Original ist es ein gruener Stern
   plus Name, und der Rahmen laeuft rechts davon weiter. Genau dieses eine Detail macht
   den Unterschied zwischen „Kasten mit Text" und „gestaltete Karte", und es kostet
   nichts ausser einer negativen Aussenkante.
   Dafuer steht `<cite>` im Markup VOR dem Absatz. Semantisch ist das zulaessig:
   `blockquote` erlaubt Fluss-Inhalt in beliebiger Reihenfolge. */
.zitate blockquote {
  position: relative;
  background: linear-gradient(160deg, #22231f, #191a17);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-top: 0.9em;
}
.zitate blockquote p { font-style: italic; color: #ffffffe0; }
.zitate cite {
  position: absolute;
  top: 0;
  left: var(--sp-3);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* Die Fuellung deckt den Rahmen ab. Muss die Kartenfarbe an dieser Stelle treffen,
     also der Startwert des Karten-Verlaufs. */
  background: #22231f;
  padding-inline: 0.55em;
  font-style: italic;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--fs-small);
  color: var(--c-paper);
  white-space: nowrap;
}
/* Gruener Stern wie im Original, als CSS-Form statt als Bilddatei: eine Grafik weniger,
   die spaeter in der Mediathek gepflegt werden muesste. */
.zitate cite::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex: none;
  background: var(--c-brand);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ---- Timeline (ueber-uns Historie) ---- */
.timeline { list-style: none; padding: 0; margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.timeline li { display: grid; grid-template-columns: 5rem 1fr; gap: var(--sp-2); }
.timeline .jahr {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-brand);
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.timeline p { margin: 0; }

/* ---- Karte (Zwei-Klick, kontakt.html) ---- */
.karte { margin-top: var(--sp-4); }
.karte__consent {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  text-align: center;
  background: #26251f;
  border: 1px dashed #ffffff33;
  border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-4);
}
.karte__consent p { max-width: 34rem; font-size: var(--fs-small); }
.karte iframe {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: var(--radius);
  display: block;
}

/* ---- Legal-Seiten ---- */
.legal { max-width: 46rem; }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--sp-6); }
.legal h3 { font-size: var(--fs-h4); margin-top: var(--sp-3); }
.legal p, .legal li { margin-top: var(--sp-2); color: var(--c-on-dark-dim); }
.legal ul { margin-left: 1.2em; }
.legal a { color: var(--c-brand); }
/* 🚨 Erstes Kind ohne eigenen Abstand: `.section` liefert bereits 71,8 px
   padding-top, die erste Ueberschrift legte nochmal --sp-6 (48 px) drauf.
   Gemessen 120 px Leerraum zwischen Trennlinie und erster Zeile, auf einem
   844 px hohen Handy-Bildschirm ein Siebtel der Seite fuer nichts.
   Trifft NUR Impressum und Datenschutz, weil nur dort eine Ueberschrift das
   erste Element der Sektion ist (alle 12 Seiten nachgemessen, 16.09.2026). */
.legal > :first-child { margin-top: 0; }
.hinweis-box {
  background: #75b62c1a;
  border: 1px solid var(--c-brand);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  margin-top: var(--sp-3);
}

/* ---- 404 ---- */
.fehler404 { text-align: center; padding-block: var(--sp-12); }
.fehler404 .display { font-size: clamp(4rem, 16vw, 9rem); color: var(--c-brand); font-style: italic; }
.fehler404 p { margin: var(--sp-2) auto 0; }
.fehler404 .hero__cta { justify-content: center; margin-top: var(--sp-4); }

/* =====================================================================
   ABSTANDS-BEZIEHUNGEN (Phase 0 Schritt 7, 16.09.2026)
   Die letzten acht Inline-`margin-top` aufgeloest. Der Abstand haengt hier
   nicht am Element, sondern daran, WAS DAVOR STEHT. Also wird genau das
   im Selektor ausgedrueckt, statt den Wert an das Element zu haengen.

   🚨 KEINE VEREINHEITLICHUNG. Zwei Uebergaenge haben denselben Typ und
   verschiedene Werte (Absatz nach Kartenraster: 32 bei .glow-grid, 24 bei
   .preis-grid). Das anzugleichen waere ein sichtbarer Sprung von 8 px und
   damit eine Designaenderung, die der Freeze verbietet. Die Werte bleiben
   also, als dokumentierte Bestandsvarianten. Patrick entscheidet, ob das
   je angeglichen wird - es ist Geschmack, keine Aufraeumarbeit.

   🚨 Die Regeln sind bewusst DISJUNKT formuliert. Die naheliegende Fassung
   `.kicker-italic + .btn {16}` und `p + .btn {24}` waere falsch: der Kicker
   IST ein <p>, erfuellt also beide Bedingungen, und bei gleicher Spezifitaet
   gewinnt die spaetere Regel. Der Knopf haette still 24 statt 16 bekommen.
   Deshalb trifft die zweite Regel ueber die Zielklasse, nicht ueber `p`.

   ⚠️ Fuer den spaeteren Blockbau: Diese Beziehungen setzen voraus, dass
   Vorgaenger und Element GESCHWISTER bleiben. Bekommen Raster und
   Abschlusstext im Theme getrennte Blockwurzeln, greift keine dieser
   Regeln mehr. Alle acht Stellen sind feste Kompositionen ohne frei
   einfuegbare Zwischenbloecke - genau deshalb ist die Beziehung hier
   tragfaehig. Wo das nicht mehr gilt, gehoert der Abstand in den Block.
   ===================================================================== */

/* Knopf direkt nach der kleinen Aufforderung: eng gebunden. */
:where(.kicker-italic) + .btn { margin-top: var(--sp-2); }
/* Knopf nach einem laengeren Informationstext: mehr Luft. */
:where(.lesebreite--mitte) + .btn { margin-top: var(--sp-3); }

/* Absatzfolge im Fliesstext.
   🚨 Das Ziel ist ausdruecklich `p.lesebreite`, nicht `.lesebreite`: die
   Klasse sitzt auch auf `ul.plus-liste` (dort bedeutet sie nur die Lesebreite).
   Die erste Fassung traf deshalb auch die Liste und ueberschrieb deren
   `margin-top: var(--sp-4)` mit 16 px, weil beide 0,1,0 haben und diese Regel
   spaeter steht. Gemessen: 16 px zu wenig, 158 verschobene Elemente.
   Lehre: Eine Klasse, die eine BREITE bedeutet, taugt nicht als Anker fuer
   eine Abstandsbeziehung. Der Anker muss sagen, WAS das Element ist. */
:where(.lesebreite) + p.lesebreite { margin-top: var(--sp-2); }

/* Sektionskopf: Display-Unterzeile, dann der einleitende Absatz. */
:where(.silber) + .lesebreite--mitte { margin-top: var(--sp-3); }

/* Abschlusstext nach einem Kartenraster. Zwei Werte, siehe Kasten oben. */
:where(.glow-grid) + .lesebreite--mitte { margin-top: var(--sp-4); }
:where(.preis-grid) + .lesebreite--mitte { margin-top: var(--sp-3); }

/* Anschrift nach der Reihe der Kontaktkacheln. */
:where(.pt__kontakte) + address { margin-top: var(--sp-4); }

/* Abschlusstext nach der Zeitleiste.
   ⚠️ Hier reicht 0,0,1 NICHT: der Absatz steht in `.kurs-block__text`, und
   `.kurs-block__text p` (0,1,1) setzt bereits --sp-2. Deshalb der Kontext
   mit im Selektor, gleiche Spezifitaet, spaetere Position gewinnt. */
.kurs-block__text :where(.timeline) + p { margin-top: var(--sp-3); }


/* =====================================================================
   BESTANDSVARIANTEN (Phase 0 Schritt 8, 16.09.2026)
   Die letzten fuenf Inline-Styles. Anders als die Gruppen davor sind das
   KEINE fehlenden Systemregeln, sondern echte Einzelfaelle: jeder kommt
   genau einmal vor und hat einen erkennbaren gestalterischen Grund.
   Sie bekommen deshalb einen Namen nach ihrer ROLLE und bleiben lokal.
   Ein Modifikator darf spaeter fest aus dem Block-Markup kommen, er muss
   kein Regler im Editor werden.
   ===================================================================== */

/* Kleingedrucktes am Fuss einer Sektion („Unsere Mitgliederanzahl ist
   begrenzt …"). Nicht mit `.kicker-italic--notiz` verwechseln: das ist die
   gruene Marken-Kursive am Knopf, dies hier ist normaler Fliesstext. */
.sektion-hinweis { font-size: var(--fs-small); }

/* Hinweisbox auf HELLEM Grund (`.section--paper`). Die Grundfassung liegt
   auf dunklem Grund und traegt 10 % Gruen; auf Weiss ist das zu kraeftig,
   deshalb hier 8 %. Die Textfarbe kommt vom Kontext, sie war inline
   redundant (gemessen 16.09.2026). */
.hinweis-box--hell { background: #75b62c14; }

/* Zweispalter, der eine Sektion nach unten OFFEN abschliesst: keine
   Trennlinie, unten kein Innenabstand, oben der normale Abstand. */
.kurs-block--offen { padding-block: var(--sp-4) 0; }

/* Sektion, die nach OBEN durch eine Haarlinie abgesetzt wird.
   Einzelfall auf ueber-uns: dort folgt das Team direkt auf den Fliesstext,
   ohne Farbwechsel, und braucht eine sichtbare Zaesur. */
.section--getrennt { border-top: 1px solid var(--c-line-dark); }

/* Titel, der semantisch ein h2 bleibt, optisch aber eine Stufe kleiner
   auftritt. ⚠️ Die Ueberschriftenebene wird NICHT wegen der Schriftgroesse
   geaendert, das waere ein Fehler in der Dokumentstruktur. */
.h-kompakt { font-size: var(--fs-h3); margin-top: var(--sp-1); }