/* =====================================================================
   FREEFIGHT-FITNESS – HOME (Sektionen der Startseite = Patterns)
   hero · kurse (Slider) · gym-promo · probetraining
   Geteilte Bausteine (Header/Footer/Eyebrow/…) liegen in site.css.
   ===================================================================== */

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-6) 0;
  background: var(--c-bg-dark);
}
/* Marken-Keil: die grüne Diagonale der Original-Seite */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(49deg, var(--c-brand-deep), var(--c-brand));
  clip-path: polygon(0 74%, 100% 52%, 100% 100%, 0 100%);
}
@media (min-width: 768px) {
  .hero::before {
    clip-path: polygon(78% 0, 100% 0, 100% 100%, 48% 100%);
  }
}
.hero__grid {
  position: relative;
  display: grid;
  gap: var(--sp-4);
}
.hero__text { max-width: 34rem; }

/* Wortmarke = H1 wie auf der Alt-Seite.
   🚨 Gemessen im Webflow-Export: body war "Interstate cond", .hero-h1 nur
   `font-style: italic` – es gibt KEINE Condensed-Italic-Datei. Die Alt-Seite hat die
   Kursive vom Browser synthetisieren lassen, und genau dieser leicht geneigte
   Condensed-Look IST die Marke. Deshalb hier bewusst var(--f-display) (= Interstate
   Black Cond, aufrecht) PLUS font-style:italic. Nicht auf die echte Interstate Black
   Italic umstellen: die ist nicht condensed und baut die Wortmarke sichtbar breiter. */
.hero__wortmarke {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3.25rem, 1.9rem + 9.2vw, 7rem);
  line-height: 0.88;
  letter-spacing: 0.005em;
  color: var(--c-paper);
}
/* Untertitel: Wortlaut, Zeilenumbruch, Größe und Farbe 1:1 aus dem Webflow-Export.
   Gemessen: .hero-subheading-h2 { font-family: Droid Sans; font-size: 1.5rem;
   font-weight: 900; color: var(--white) }, Akzentwörter var(--stani-green) = #74b52c
   (unser Token --c-brand #75b62c, praktisch identisch).
   🚨 ABER: Maßgeblich ist, was AUSGESPIELT wurde, nicht was im CSS stand. Geladen war nur
   `Droid Sans:400,700`. Bei font-weight:900 sucht der Browser erst nach oben, findet nichts
   und nimmt 700; synthetisch verfettet wird nur, wenn gar kein Bold da ist. Auf dem Schirm
   stand also 700, nicht 900. Deshalb hier 700 und NICHT 800.
   ⚠️ Droid Sans selbst entfällt: einer der DSGVO-Befunde der Alt-Seite (4 Schriftfamilien
   von Google-Servern, siehe docs/analyse-webflow-export.html). Ersatz ist MANROPE, nicht
   Interstate – Interstate ist eine Display-Schrift und trifft die Anmutung nicht.
   🚨 Die Farbe MUSS spezifischer gesetzt werden als `.page-dark p` (site.css:13),
   sonst gewinnt das gedimmte Grau. Gleiche Falle wie P-001. */
.hero .hero__claim {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(1.125rem, 0.98rem + 0.95vw, 1.5rem);
  line-height: 1.3;
  margin-top: var(--sp-2);
  color: var(--c-paper);
  text-wrap: pretty;
}
.hero__claim span { color: var(--c-brand); }
/* Auf sehr schmalen Geräten (≤ 359 px) würde der feste Umbruch „Sportschule für"
   allein auf eine Zeile zwingen. Dort umbricht der Satz lieber natürlich. */
@media (max-width: 359px) {
  .hero__claim br { display: none; }
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.hero__proof {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: #ffffff8c;
  text-wrap: pretty;   /* verhindert „steht." als einzelnes Wort in der letzten Zeile */
}
.hero__media {
  justify-self: center;
  width: min(82vw, 420px);
  margin-bottom: -2px; /* PNG steht auf der Sektionskante */
}
.hero__media img {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}

@media (min-width: 768px) {
  .hero { padding-block: var(--sp-8) 0; }
  .hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
  }
  .hero__text { padding-bottom: var(--sp-8); }
  .hero__media { width: min(44vw, 460px); justify-self: end; }
}

/* =====================================================================
   KURSE (Slider)
   Nachgebaut nach den GEMESSENEN Werten des Webflow-Exports
   (css/freefight-fitness.webflow.css: .slider-bild, .bild-schwarzer-verlauf,
   .schrift-container-slider, .ueberschrift-kurs-slider, .paragraph-11,
   .w-slider-dot, .w-slider-arrow-*). Nichts hier ist geschaetzt.

   Bewusste Abweichung: Der Original-Slider ist Webflow-JS mit Drag-Handler.
   Wir nutzen natives CSS scroll-snap – wischen, Tastatur und Screenreader
   funktionieren dadurch ohne Bibliothek, und es bleiben 2,5 KB JS statt 90 KB.
   Optik und Masse sind identisch.
   ===================================================================== */
.kurse {
  border-top: 1px solid var(--c-line-dark);
}
.kurse__titel { margin-bottom: var(--sp-6); }

/* Buehne = Traeger fuer Pfeile und Punkte, exakt so hoch wie eine Karte */
.kurse__buehne { position: relative; }

.kurse__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kurse__viewport::-webkit-scrollbar { display: none; }

.kurse__track {
  display: flex;
  /* 🚨 Klein halten! Im Original haben die Slides GAR KEINEN Abstand – die Luft
     zwischen den Karten entsteht allein durch das scale(0.9) der Nachbarn.
     Jeder Pixel hier frisst den sichtbaren Nachbar-Ausschnitt auf, und genau der
     macht aus einer Kartenreihe ein Karussell: bei 390 px Schirm und 300 px Karte
     bleiben 45 px je Seite, mit 20 px Abstand waren es nur noch 25 px. */
  gap: 10px;
  list-style: none;
  margin: 0;
  /* Nachbarkarten „gucken" links UND rechts rein: die aktive Karte steht mittig,
     deshalb Innenabstand = halbe Restbreite. So ist auch die erste/letzte Karte
     zentrierbar (im Original macht das der Webflow-Loop). */
  padding: 0 calc((100% - var(--karte-b)) / 2);
}

/* Kartenmasse. Ausgangspunkt war 1:1 der Export (300x450 · 350x500 · 450x600),
   seit 15.09.2026 aber bewusst **15 % kleiner auf beiden Achsen** (Patrick):
   Auf einem Laptop bekam man die 600 px hohe Karte samt Headline nicht mehr auf
   einen Bildschirm, und mobil wirkte die Kachel erschlagend.
   300x450 -> 255x382  ·  350x500 -> 298x425  ·  450x600 -> 383x510.
   Das Seitenverhaeltnis bleibt exakt erhalten, die Schriftgroessen ausdruecklich
   NICHT (Patrick: „Schrift und so kann so bleiben"). Nebeneffekt, der hilft:
   Der sichtbare Nachbar-Ausschnitt waechst mobil von 45 auf 67 px, das Karussell
   liest sich noch klarer. */
.kurse { --karte-b: 255px; --karte-h: 382px; --karte-titel: 1.9rem; }
@media (min-width: 480px) { .kurse { --karte-b: 298px; --karte-h: 425px; --karte-titel: 2.2rem; } }
@media (min-width: 992px) { .kurse { --karte-b: 383px; --karte-h: 510px; --karte-titel: 3rem; } }

.kurs-card {
  scroll-snap-align: center;
  flex: 0 0 var(--karte-b);
  width: var(--karte-b);
}
.kurs-card a {
  position: relative;
  display: block;
  height: var(--karte-h);
  border-radius: 1.5rem;          /* Export: .slider-bild */
  overflow: hidden;
  text-decoration: none;
  outline-offset: 4px;
}
.kurs-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50%;           /* Export: background-position: 50% */
  transition: transform 0.4s ease;
}
/* Abdunkelung: Export .bild-schwarzer-verlauf – NUR die unteren 70 %,
   Verlauf von transparent bis Volltonschwarz. Nicht „ein bisschen dunkler",
   sondern exakt diese vier Stopps. */
.kurs-card a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70%;
  background-image: linear-gradient(to bottom, transparent, #000000ab 48%, #000000e3 80%, #000);
}
/* Textzone: Export .schrift-container-slider (untere 40 %, 10 % Seitenabstand,
   mittig) + .schrift-wrapper (flex, zentriert) */
.kurs-card__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 40%;
  padding-inline: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.kurs-card__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--karte-titel);
  text-transform: uppercase;
  line-height: 1;
  color: var(--c-paper);
  /* 🚨 Lange Kursnamen: „Selbstverteidigung" ist bei 255 px Karte 274 px breit und
     wurde am Kartenrand ABGESCHNITTEN (gemessen 15.09.). Das Netz muss im CSS
     liegen, nicht im Text – die Betreiber legen Kurse spaeter selbst im CPT an
     und werden keine weichen Trennstellen tippen. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Export .paragraph-11: stani-green, letter-spacing 2px, uppercase, .8rem, 700.
   Droid Sans faellt weg (DSGVO-Befund), Ersatz ist Manrope. */
.kurs-card__meta {
  margin-top: 0.75em;
  font-family: var(--f-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-brand);
}
.kurs-card a:hover img { transform: scale(1.04); }

/* Aktive Karte hervorheben, Nachbarn zuruecknehmen.
   🚨 Diese Werte stehen NICHT im CSS des Exports, sondern in der Webflow-Interaktion
   (js/webflow.js, Aktionslisten "a-28"/"a-29", ausgeloest von SLIDER_ACTIVE bzw.
   SLIDER_INACTIVE auf .slider-bild):
        aktiv    -> opacity 1,   scale 1,   300 ms
        inaktiv  -> opacity 0.3, scale 0.9, 300 ms
   Genau das macht aus einer Kartenreihe optisch ein Karussell. Wer nur ins CSS
   schaut, findet es nicht - ich hatte es beim ersten Bau uebersehen.

   Die Klasse .kurse--ix setzt main.js. Ohne JS bleiben alle Karten voll sichtbar,
   statt dass alles dauerhaft auf 30 % abgedunkelt stehen bliebe. */
.kurse--ix .kurs-card a {
  opacity: 0.3;
  transform: scale(0.9);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.kurse--ix .kurs-card.ist-aktiv a {
  opacity: 1;
  transform: scale(1);
}
/* Wer „weniger Bewegung" eingestellt hat, bekommt die Helligkeitsstufen ohne
   Groessenwechsel - der Karussell-Charakter bleibt, das Zoomen entfaellt. */
@media (prefers-reduced-motion: reduce) {
  .kurse--ix .kurs-card a,
  .kurse--ix .kurs-card.ist-aktiv a { transform: none; transition: opacity 300ms ease-in-out; }
}

/* Pfeile. Das Original hat nur nackte Chevrons (.w-slider-arrow-*, 80 px Zone,
   weiss, 40 px) - die waren bei uns zu leicht zu uebersehen (Patrick, 15.09.).
   Bewusste Verbesserung statt 1:1: gleiche Position und Groessenordnung, aber als
   sichtbarer abgerundeter Button. Tippziel 56 px, also ueber den 44 px, die als
   Mindestmass fuer Finger gelten. */
.kurse__pfeil {
  position: absolute;
  top: calc(var(--karte-h) / 2);
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ffffff2e;
  border-radius: 14px;
  background: #101010cc;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-paper);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background-color var(--speed), border-color var(--speed);
}
.kurse__pfeil span { display: block; margin-top: -0.18em; }  /* Chevron optisch mitteln */
.kurse__pfeil:hover { background: #101010; border-color: var(--c-brand); }
.kurse__pfeil--prev { left: 12px; }
.kurse__pfeil--next { right: 12px; }
@media (min-width: 992px) {
  .kurse__pfeil { width: 64px; height: 64px; font-size: 34px; }
  /* Auf grossen Schirmen neben die Karte statt darauf */
  .kurse__pfeil--prev { left: calc((100% - var(--karte-b)) / 2 - 84px); }
  .kurse__pfeil--next { right: calc((100% - var(--karte-b)) / 2 - 84px); }
}

/* Punkte: Export .w-slider-dot – Kreise, rgba(255,255,255,.4), aktiv #fff.
   Sitzen wie im Original INNERHALB der Karte am unteren Rand. */
.kurse__punkte {
  position: absolute;
  inset: auto 0 0;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.kurse__punkt {
  pointer-events: auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background-color: #ffffff66;
  cursor: pointer;
  transition: background-color 0.1s;
}
.kurse__punkt[aria-current="true"] { background-color: #fff; }

.kurse__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* =====================================================================
   FF+GYM-PROMO
   Umgebaut 15.09.2026 nach Patricks Abnahme. Vorher: helle Sektion, kleine
   Kursiv-Zeile „Kennst du schon unser Gym?", Eyebrow mit Keil, dunkler Button.
   Jetzt: dunkle Flaeche wie der Rest der Startseite, Headline im Rang von
   „KURSE" (gleiche Groesse = gleicher Rang), aber im gruenen Metallic-Verlauf,
   weil FF+GYM die Sub-Marke ist (D-009).

   MOBIL ist die Referenz (Leitmedium): Titel zentriert, Text, dann Bild, dann
   CTA zentriert darunter. DESKTOP leitet sich daraus ab: zwei Spalten, Bild
   rechts ueber die volle Hoehe, Titel und CTA linksbuendig in der Textspalte.
   ===================================================================== */
.gym { background: var(--c-bg-dark); }

.gym__grid {
  display: grid;
  gap: var(--sp-4);
}
.gym__titel { margin-bottom: calc(var(--sp-2) * -1); }  /* Text rueckt naeher an die Headline */
.gym__text { max-width: 34rem; }
.gym__text p { margin-top: var(--sp-2); }
/* War --c-ink (schwarz) fuer die alte helle Sektion – auf dunklem Grund unsichtbar.
   Die Kernaussage steht jetzt in vollem Weiss, der Fliesstext daneben gedimmt. */
.gym__fact { color: var(--c-paper); }
.gym__media img {
  border-radius: var(--radius);
  width: 100%;
}
.gym__cta {
  margin: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .gym__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "titel media"
      "text  media"
      "cta   media";
    align-content: center;
    column-gap: var(--sp-6);
    row-gap: var(--sp-3);
  }
  .gym__titel { grid-area: titel; text-align: left; }
  .gym__text  { grid-area: text; }
  .gym__media { grid-area: media; align-self: center; }
  .gym__cta   { grid-area: cta; text-align: left; }
}

/* Titel war mit 27,8 px auffaellig kleiner als die uebrigen Sektionstitel
   („KURSE" 52,5 px) und wirkte dadurch wie eine andere Schrift – ist aber
   dieselbe (Interstate Black Cond, synthetisch kursiv). Gemessen, nicht geraten.
   Jetzt eine eigene Stufe zwischen Fliesstext und Sektionstitel: mobil ~36 px,
   Desktop 48 px. Bleibt linksbuendig, weil die Sektion zweispaltig ist. */
.probetraining h2 {
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3rem);
  line-height: 1.02;
}
/* Weisser, zentrierter Titel ueber dem Formular (Patrick) – sagt, wofuer das
   Formular da ist, wenn man direkt dorthin scrollt. */
.pt-form__titel {
  margin: 0;
  text-align: center;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--c-paper);
  letter-spacing: 0.01em;
}

/* =====================================================================
   PROBETRAINING
   ===================================================================== */
/* Grüne Fläche wie das Original-Probetraining-Segment der Startseite */
.probetraining {
  background: linear-gradient(49deg, var(--c-brand-deep), var(--c-brand));
}
.probetraining .eyebrow { color: #ffffffe6 !important; }
.probetraining .eyebrow::before { background: var(--c-ink); }
.probetraining .pt__text p { color: #ffffffe6; }
.probetraining .pt__kontakte a { color: #ffffffe6; }
.probetraining .pt__kontakte a:hover { color: var(--c-ink); }
.pt__grid {
  display: grid;
  gap: var(--sp-6);
}
.pt__text p { margin-top: var(--sp-2); max-width: 30rem; }

@media (min-width: 768px) {
  .pt__grid {
    grid-template-columns: 1fr 1.1fr;
    align-items: start;
  }
}