/* =====================================================================
   FREEFIGHT-FITNESS – SITE (geteilte Bausteine aller Seiten)
   Header, Footer, Eyebrow/Display/Links, Seitenkopf, CTA-Banner.
   Wird im WP-Theme zum globalen Stylesheet; Seiten-Sektionen liegen
   in home.css bzw. den Seiten-Stylesheets (= Pattern-Styles).
   ===================================================================== */

/* ---- Seitengrund ---- */
.page-dark {
  background: var(--c-bg-dark);
  color: var(--c-paper);
}
.page-dark p { color: var(--c-on-dark-dim); }
.section--paper {
  background: var(--c-paper);
  color: var(--c-ink);
}
.section--paper p { color: var(--c-ink); }

/* ---- Wiederkehrende Bausteine ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand) !important;
  margin-bottom: var(--sp-2);
}
/* ❌ ENTFERNT 15.09.2026 (Patrick): der geschrägte grüne Balken vor jedem Eyebrow.
   Er stand über jeder Headline auf 11 Seiten und war reine Dekoration ohne
   Bedeutung. Die Marke trägt der Diagonal-Keil an den Sektionsrändern (.keil)
   und die kursive Condensed-Headline – der Strich war eine dritte Stimme, die
   nichts gesagt hat. Ersatzlos weg, die Eyebrow-ZEILE selbst bleibt.
.eyebrow::before { … skewX(-22deg) … }  */
.display {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.display__accent { color: var(--c-brand); }

/* ---------------------------------------------------------------------
   SEKTIONS-TITEL – der globale Headline-Stil der Alt-Seite.
   Gemessen im Export: .heading-7 { font-family: Interstate cond; font-style: italic;
   text-align: center; font-size: 5vw (Desktop) / 11vw (≤991) / 14vw (≤767) }.
   Das ist KEIN Sonderfall der Kurse-Sektion, sondern der Stil ALLER Sektions-
   Überschriften (Patrick, 15.09.2026). Kursiv = synthetisch aus dem Condensed-
   Schnitt, genau wie die Hero-Wortmarke (siehe home.css).
   Abweichung mit Absicht: statt roher vw-Werte ein clamp() mit rem-Anteil, sonst
   skaliert die Schrift nicht mit der Systemschriftgröße des Nutzers (Zugänglichkeit).
   Die Eckwerte treffen das Original: 390 px ≈ 52 px (Original 14vw ≈ 55 px),
   1440 px = 72 px (Original 5vw = 72 px).
   --------------------------------------------------------------------- */
.sektion-titel {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(2.75rem, 0.6rem + 11vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--c-paper);
}
.section--paper .sektion-titel { color: var(--c-ink); }

/* ---------------------------------------------------------------------
   .h-display – Titel in einer Textspalte, versal (Phase 0, 16.09.2026)
   Stand 2× als Inline-Style im Markup (ueber-uns, gewaltschutztrainer) und
   war in docs/BLOCK-INVENTAR.md unter genau diesem Namen schon vorgesehen.

   🚨 Hier steht NUR `text-transform`, obwohl der Inline-Style zusaetzlich
   `font-family` und `font-size` setzte. Beides ist redundant: die Basis
   `h1, h2, h3, h4` in base.css liefert es bereits. Nachgemessen am
   16.09.2026 (Attribut entfernt, computed vorher gegen nachher): von den
   drei Deklarationen wirkte **nur** text-transform.

   ⚠️ Bewusst eine Klasse und KEINE Kontextregel `.kurs-block h2`: im selben
   Baustein steht auf der Gym-Seite ein dritter Titel („Willkommen im
   Freefight Fitness Gym"), der NICHT versal ist. Eine Kontextregel haette
   ihn stillschweigend mitgeaendert.

   Nicht mit `.sektion-titel` verwechseln: der ist zentriert und bis 4,5 rem
   gross, dies hier bleibt linksbuendig auf --fs-h2.
   --------------------------------------------------------------------- */
.h-display { text-transform: uppercase; }

/* Grün-Metallic: das Gegenstück zu .silber (pages.css, Gym-Seite), nur in der
   Markenfarbe. Eingesetzt für die FF+GYM-Headline auf der Startseite.
   Gedanke dahinter: FF+GYM bekommt DIESELBE Headline-Größe wie „KURSE" – gleicher
   Rang in der Seite –, hebt sich aber über die Oberfläche als Sub-Marke ab (D-009).
   ⚠️ Für den Theme-Bau: `background-clip: text` + transparenter Text bedeutet, dass
   ohne den Verlauf NICHTS zu sehen ist. Im Gutenberg-Editor muss der Hintergrund
   also mitkommen, sonst steht die Überschrift unsichtbar im Canvas (gleiche Falle
   wie beim Silber-Text der Gym-Seite, siehe D-016). */
.gruen-metallic {
  background-image: linear-gradient(45deg, #d7f5a8, #5f8f24 39%, #eaffcf 59%, #6ba52a 91%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Marken-Kursive: für emotionale Zeilen („Das Team", „Platz sichern") – wie Original */
.kicker-italic {
  font-family: var(--f-head);
  font-weight: 900;
  font-style: italic;
  font-size: var(--fs-h2);
  color: var(--c-brand);
  letter-spacing: 0.01em;
}
/* 🚨 Als <p> kam das Grün NIE an: `.page-dark p` (Klasse+Element) schlägt eine
   einzelne Klasse, die Zeile stand gedimmt grau da. Gemessen auf der Gym-Seite
   („Vereinbare dein Probetraining …", „Mitgliederstimmen"). Mit `p.kicker-italic`
   ist die Spezifität gleich und diese Regel steht später, also gewinnt sie.
   Betrifft alle Seiten, die den Kicker als Absatz setzen (P-006). */
p.kicker-italic {
  color: var(--c-brand);
  /* 🚨 Und `max-width: none`: base.css setzt `p { max-width: 65ch }`. In einer
     zentrierten Sektion ist der Absatz dadurch schmaler als der Container und klebt
     links – `text-align: center` zentriert dann nur INNERHALB dieses schmalen Kastens.
     Gemessen auf der Gym-Seite: „Kostenlos. Unverbindlich." stand 225 px zu weit links.
     Dieselbe Falle wie beim Kurse-Fuß (D-019). */
  max-width: none;
}

/* ---------------------------------------------------------------------
   Drei Rollen, nicht drei Größen (Phase 0, 16.09.2026)
   🚨 `.kicker-italic` ist eine Display-Zeile in --fs-h2 (28 px). Zwei der
   fünf Verwendungen setzten sie per Inline-Style auf 16 px bzw. 14 px
   herunter. Das sind keine Größen-Varianten mehr, sondern **andere
   Rollen**, und die bekommen Namen nach ihrer Aufgabe, nicht nach ihrer
   Größe: eine Klasse namens „--klein" sagt nicht, wann man sie nimmt.

   Der Abstand steht bewusst MIT in der Rollenklasse: beide Rollen haben
   einen festen Platz am Knopf (davor bzw. dahinter), der Abstand gehört
   also zur Rolle und nicht in eine allgemeine Abstands-Utility.

   🚨 Warum die Doppelklasse (`.kicker-italic.kicker-italic--…`) und nicht
   die einfache: P-006, zum wiederholten Mal. Ein einfacher Modifikator hat
   0,1,0 und verliert gegen `.kurs-block__text p` (0,1,1) in pages.css. Beim
   ersten Versuch stand der Aufruf-Kicker dadurch auf 16 px statt 24 px, und
   der Positions-Schnappschuss meldete prompt 170 verschobene Elemente auf
   der Gym-Seite. Die Doppelklasse hebt auf 0,2,0 und gewinnt zuverlässig,
   ohne `!important` und ohne Abhängigkeit von der Ladereihenfolge.
   --------------------------------------------------------------------- */

/* Aufforderung direkt VOR dem Knopf („Vereinbare dein Probetraining …") */
.kicker-italic.kicker-italic--aufruf { font-size: var(--fs-body); margin-top: var(--sp-3); }

/* Beruhigende Fußnote NACH dem Knopf („Kostenlos. Unverbindlich.") */
.kicker-italic.kicker-italic--notiz { font-size: var(--fs-small); margin-top: var(--sp-2); }

/* Leitet innerhalb einer Sektion einen NEUEN Abschnitt ein („Mitglieder-
   stimmen" nach dem Zahlen-Raster). Behält die volle Display-Größe, braucht
   aber die große Luft nach oben, weil davor ein abgeschlossener Block endet. */
.kicker-italic.kicker-italic--abschnitt { margin-top: var(--sp-8); }

/* Diagonal-Keil: das Marken-Element der Alt-Seite (grüne Schrägen an Sektionsrändern) */
.keil {
  position: relative;
  overflow: hidden;
}
.keil::before {
  content: "";
  position: absolute;
  top: 12%;
  width: clamp(90px, 14vw, 200px);
  aspect-ratio: 1;
  background: linear-gradient(49deg, var(--c-brand), var(--c-brand-deep));
  transform: rotate(45deg);
  pointer-events: none;
}
.keil--links::before { left: calc(clamp(90px, 14vw, 200px) / -2); }
.keil--rechts::before { left: auto; right: calc(clamp(90px, 14vw, 200px) / -2); top: auto; bottom: 14%; }
/* 🚨 Der Keil lag ÜBER dem Text (gemessen auf der Gym-Seite, 390 px: der grüne Zipfel
   schnitt „Wir begleiten dich Schritt für Schritt" an). Grund ist die Malreihenfolge,
   nicht die Position: `::before` ist absolut positioniert, der Inhalt daneben statisch,
   und Positioniertes malt über Statisches, ganz gleich wer im Markup zuerst kommt.
   Deshalb bekommt der Inhalt eine eigene Ebene. Gilt für alle Keil-Sektionen. */
.keil::before { z-index: 0; }
.keil > * { position: relative; z-index: 1; }
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--f-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-small);
  color: var(--c-paper);
  text-decoration: none;
  border-bottom: 2px solid var(--c-brand);
  padding-bottom: 0.35em;
}
.arrow-link::before { content: "→"; color: var(--c-brand); }
.arrow-link:hover { color: var(--c-brand); }
.btn--dark {
  background-image: none;
  background-color: var(--c-ink);
  color: var(--c-paper);
}

/* ---- Seitenkopf (Unterseiten, Pattern "page-head") ---- */
.page-head {
  padding-block: var(--sp-6) var(--sp-6);
  background:
    radial-gradient(55% 60% at 90% 0%, #75b62c1c, transparent 70%),
    var(--c-bg-dark);
  border-bottom: 1px solid var(--c-line-dark);
}
.page-head h1 {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.page-head__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  max-width: 42rem;
}
.page-head__lead strong { color: var(--c-paper); }

/* ---- CTA-Banner (Unterseiten, Pattern "cta-banner") ---- */
.cta-banner {
  background:
    linear-gradient(49deg, #75b62c26, transparent 55%),
    var(--c-bg-dark);
  border-top: 1px solid var(--c-line-dark);
}
.cta-banner .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
}
.cta-banner h2 { font-size: var(--fs-h3); max-width: 24ch; }
.cta-banner p { margin-top: 0.4em; font-size: var(--fs-small); }

/* ---- Kontakt-Schnellwege (geteilt: Home, Kontakt) ---- */
/* Raster wie im Export (`.grid-home-socials`): mobil DREI Spalten (also 3+2 statt
   eines unruhigen 4+1-Umbruchs), ab Tablet alle fuenf nebeneinander. */
.pt__kontakte {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) 0.9rem;
  padding: 0;
  margin-top: var(--sp-4);
}
@media (min-width: 768px) { .pt__kontakte { gap: var(--sp-3); } }
/* 🚨 KEINE festen Spaltenbreiten. Vorher lag jede Kachel in einer 98 px breiten
   Drittel-Spalte – die 56-px-Kachel schwamm darin und alles wirkte weit auseinander
   (Patrick, 15.09.). Jetzt bestimmt der Inhalt die Breite, und mit der kleineren
   Beschriftung passen alle fuenf in EINE Reihe (gemessen bei 390 px). */
.pt__kontakte li { flex: 0 0 auto; }
.pt__kontakte a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
  color: #ffffffe6;
  text-decoration: none;
}
/* Kachel 1:1 aus dem Export (`.image.contact-box.shadow-medium.home-socials-size`):
   3.5rem Box, 1rem Innenabstand -> 1.5rem Icon, Radius .8rem, schwarzer Verlauf
   128deg #1d1d1b -> #2e2d2c, Hover wechselt auf den Gruen-Verlauf.
   🚨 Der Innenabstand ist der Punkt: vorher lag das Icon randlos in 44 px und wirkte
   riesig (Patrick). Das Original hat fast ein Drittel der Box als Luft. */
.pt__icon {
  /* Mobil kleiner als das Original (3.5rem): dort standen die Kacheln allein,
     bei uns tragen sie zusaetzlich eine Beschriftung. 3rem = 48 px liegt ueber
     dem 44-px-Mindestmass fuer Tippziele. Ab Tablet das Originalmass. */
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background-image: linear-gradient(128deg, #1d1d1b, #2e2d2c);
  border-radius: 0.8rem;
  box-shadow: 0 12px 16px -4px #00000059, 0 4px 6px -2px #00000040;
  transition: background-image var(--speed), transform var(--speed);
}
.pt__icon img { width: 1.35rem; height: 1.35rem; }
@media (min-width: 768px) {
  .pt__icon { width: 3.5rem; height: 3.5rem; }
  .pt__icon img { width: 1.5rem; height: 1.5rem; }
}
.pt__kontakte a:hover .pt__icon {
  background-image: linear-gradient(128deg, var(--c-brand-deep), var(--c-brand));
  transform: translateY(-2px);
}
/* Beschriftung gibt es im Original NICHT – sie bleibt (Patrick findet sie gut),
   aber klein und zurueckhaltend, damit die Kachel die Hauptsache bleibt. */
.pt__label {
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---- Formular-Karte (geteilt: Home, Kontakt, Gym) ---- */
/* ---------------------------------------------------------------------
   PROBETRAINING-FORMULAR (index, kontakt, gym)
   Umgebaut 15.09.2026 nach Patricks Abnahme: schwarzer Verlauf statt weisser
   Karte, Eingabefelder bleiben weiss, Rahmen und Feldtitel gruen.
   Der Verlauf ist NICHT erfunden, sondern derselbe wie bei den Kontakt-Kacheln
   der Alt-Seite (Export `.image.contact-box`): linear-gradient(128deg,#1d1d1b,#2e2d2c).
   --------------------------------------------------------------------- */
.pt-form {
  background-image: linear-gradient(128deg, #1d1d1b, #2e2d2c);
  color: var(--c-paper);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  box-shadow: 0 12px 16px -4px #00000059, 0 4px 6px -2px #00000040;
}
.pt-form p { color: var(--c-paper); }
.pt-form__field { display: grid; gap: 0.4em; }
/* 🚨 Feldtitel in MANROPE, nicht Interstate. Interstate ist eine Display-Schrift;
   in 14-px-Formularbeschriftungen wirkt sie fremd (Patrick: „wirkt sehr komisch").
   Das entspricht ausserdem D-002, wo Manrope ausdruecklich fuer „Body/Formulare/
   Footer" vorgesehen war – die Interstate an dieser Stelle war ein Ausrutscher. */
.pt-form__field label {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--c-brand);
}
.pt-form__pflicht { color: var(--c-brand); }
.pt-form__legende {
  margin: 0;
  font-size: 0.75rem;
  color: #ffffff8c;
}
.pt-form__optional { font-weight: 400; color: #ffffff8c; }
.pt-form input[type="text"],
.pt-form input[type="tel"],
.pt-form input[type="email"],
.pt-form select,
.pt-form textarea {
  font-family: var(--f-body);
  border: 2px solid var(--c-brand);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  background: var(--c-paper);
  color: var(--c-ink);
  width: 100%;
}
.pt-form ::placeholder { color: #6b6b69; }
.pt-form input:focus-visible,
.pt-form select:focus-visible,
.pt-form textarea:focus-visible {
  outline: 3px solid var(--c-paper);
  outline-offset: 0;
  border-color: var(--c-paper);
}
/* Datenschutz-Zeile bewusst kleiner als die Felder: sie ist Pflichttext,
   aber nicht das, was gelesen werden MUSS, um das Formular auszufuellen. */
.pt-form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6em;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #ffffffb3;
  align-items: start;
}
.pt-form__consent input { margin-top: 0.25em; width: 1.1em; height: 1.1em; accent-color: var(--c-brand); }
.pt-form__consent a { color: var(--c-brand); }
.pt-form__submit { width: 100%; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #ffffff1a;
}
/* Blur liegt auf dem Pseudo-Element: backdrop-filter auf .site-header selbst
   wuerde den Header zum Containing Block des fixed Mobile-Menues machen (Bug). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--c-ink) 92%, transparent);
  backdrop-filter: blur(8px);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 64px;
}
/* ---------------------------------------------------------------------
   TOPBAR – ersetzt den Probetraining-Knopf im Header (Patrick, 16.09.2026).
   Sie steht INNERHALB von `.site-header`, nicht davor: der Header klebt oben,
   und die Topbar soll mitkleben. Stuende sie ausserhalb, waere der wichtigste
   Handlungsaufruf der Seite nach dem ersten Scrollen weg.
   Der Verlauf ist das Gegenstueck zur Gruen-Metallic-Schrift (site.css oben):
   heller Schimmer in der Mitte, dunklere Raender.
   ⚠️ Deshalb steht die Schrift DUNKEL auf dem Verlauf, nicht weiss. Weiss haette
   auf dem hellsten Verlaufsstop (#a5e84f) nur ~2:1 Kontrast; Dunkel liegt selbst
   auf dem dunkelsten Stop bei ~4,4:1 und damit ueber der Anforderung fuer grosse
   fette Schrift. Gemessen, nicht geschaetzt.
   --------------------------------------------------------------------- */
.topbar {
  display: flex;
  /* Nicht umbrechen: die Kopfhoehe ist ein fester Wert (--kopf-hoehe), an dem das
     Mobilmenue haengt. Eine zweite Zeile wuerde ihn still verschieben. */
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 40px;
  padding: 0.45em var(--container-pad);
  background-image: linear-gradient(100deg, #5f8f24, #a5e84f 34%, #6ba52a 58%, #97dd44 82%, #5f8f24);
  color: #14210a;
  font-family: var(--f-head);
  font-weight: 900;
  font-style: italic;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: filter var(--speed);
}
.topbar:hover { filter: brightness(1.08); }
/* Auf sehr schmalen Geraeten die Schrift verkleinern statt umbrechen lassen. */
@media (max-width: 359px) { .topbar { font-size: 0.75rem; letter-spacing: 0.05em; } }
.topbar__emoji {
  /* Eigene Schriftliste, sonst sucht der Browser die Glyphe im System zusammen. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--f-body);
  font-style: normal;
  font-size: 1.15em;
  line-height: 1;
}

/* Logo: 110 → 92 px. Gemessen war das Bild 57 px hoch in einer 64-px-Leiste, also
   nur 3,5 px Luft nach oben und unten – es klebte sichtbar an den Kanten
   (Patrick, 16.09.). Mit 92 px sind es 48 px Bildhoehe und 8 px Luft. */
.site-header__logo img { width: 92px; height: auto; }
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* ❌ Der Header-Knopf ist mit der Topbar entfallen (16.09.2026). Regeln bleiben
   NICHT als Leiche stehen – wer ihn zurueckholt, holt zwei konkurrierende
   Handlungsaufrufe nebeneinander zurueck. */

.menu-btn {
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.menu-btn__box {
  display: grid;
  gap: 5px;
  width: 24px;
}
.menu-btn__box span {
  height: 3px;
  background: var(--c-paper);
  border-radius: 2px;
  transition: transform var(--speed), opacity var(--speed);
}
.menu-btn[aria-expanded="true"] .menu-btn__box span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__box span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__box span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-nav {
  position: fixed;
  /* 🚨 Die 64 px hier waren die Hoehe der Kopfleiste und standen als nackte Zahl im
     Code. Mit der Topbar ist der Kopf 104 px hoch, und das Mobilmenue legte sich ueber
     Logo und Schliessen-Knopf. Der Wert steht deshalb jetzt EINMAL als Token und wird
     hier benutzt. Wer die Topbar-Hoehe aendert, aendert ihn dort mit. */
  inset: var(--kopf-hoehe) 0 0 0;
  z-index: 49;
  background: var(--c-ink);
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--container-pad) var(--sp-6);
  overflow-y: auto;
}
.site-nav.is-open { display: flex; }
.site-nav a {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--c-paper);
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--c-line-dark);
}
.site-nav a[aria-current="page"] { color: var(--c-brand); }
/* ❌ .site-nav__cta entfiel mit der Topbar (16.09.2026): der Handlungsaufruf steht
   jetzt dauerhaft ganz oben und muss nicht zusaetzlich im Mobilmenue stehen. */

@media (min-width: 992px) {
  .menu-btn { display: none; }
  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(0.8rem, 1.4vw, 1.4rem);
    background: none;
    padding: 0;
    overflow: visible;
  }
  .site-nav a {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    border-bottom: 2px solid transparent;
    padding: 0.4em 0;
    white-space: nowrap;
  }
  .site-nav a:hover { border-bottom-color: var(--c-brand); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--c-brand); color: var(--c-paper); }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
/* ---------------------------------------------------------------------
   FOOTER
   Aufgewertet 15.06.->15.09.2026 (Patrick: „irgendwie fehlen mir hier leichte
   Stilmittel"). Drei zurueckhaltende Mittel, alle aus dem bestehenden Marken-
   Vorrat – kein neues Formenrepertoire:
   1. Wortmarke als grosses, sehr schwaches Wasserzeichen im Hintergrund
      (dasselbe Prinzip wie die Ghost-Wordmark im Gym-Hero, pages.css)
   2. Ein grüner Schimmer oben links, wie ihn auch .page-head traegt
   3. Icons vor Telefon und E-Mail
   --------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 8% 0%, #75b62c14, transparent 70%),
    #141311;
  border-top: 3px solid;
  border-image: linear-gradient(49deg, var(--c-brand), var(--c-brand-deep)) 1;
  padding-top: var(--sp-6);
}
/* Wasserzeichen: bewusst NUR 4 % sichtbar. Es soll als Textur wirken, nicht als
   zweites Logo – der Footer traegt die echte Wortmarke ja schon oben links.
   `aria-hidden` braucht es nicht, ein ::before ist fuer Screenreader unsichtbar. */
.site-footer::before {
  content: "";
  position: absolute;
  right: -8%;
  bottom: 12%;
  width: min(88%, 560px);
  aspect-ratio: 140 / 43;
  background: url("../assets/img/FreefightFitness_logo.svg") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}
@media (min-width: 768px) {
  .site-footer::before { right: -4%; bottom: 8%; width: min(52%, 620px); opacity: 0.05; }
}
.site-footer > * { position: relative; }
.site-footer__grid {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
/* 🚨 Hier stand am 16.09.2026 kurzzeitig `.site-footer__brand img { max-height: 43px; width: auto }`,
   um ausgetauschte Logos zu begrenzen. Gemessen: `width: auto` laesst das SVG seine EIGENE Breite
   waehlen, das Logo wurde 83 px statt 140 px breit und das Verbandslogo 147 px statt 120 px. Der
   Seitenvergleich sah nichts davon, weil Staging und Theme dieselbe Regel bekamen. Die Begrenzung
   gehoert deshalb ins PHP (ff_logo_daten skaliert in den erlaubten Rahmen), nicht ins CSS. */
.site-footer__contact { font-style: normal; }
.site-footer__contact p { margin-bottom: var(--sp-2); }
.site-footer__contact a { color: var(--c-paper); text-decoration: none; }
.site-footer__contact a:hover { color: var(--c-brand); }
/* Kontaktwege mit Icon: untereinander, Icon in Markengruen eingefaerbt.
   Die SVGs sind weiss, deshalb faerbt ein Filter statt einer Farbe. */
.site-footer__wege { display: grid; gap: 0.45em; justify-items: start; }
.site-footer__wege a { display: inline-flex; align-items: center; gap: 0.6em; }
.site-footer__wege img {
  width: 1rem;
  height: 1rem;
  opacity: 0.85;
}
.site-footer__social { display: flex; gap: var(--sp-2); }
.site-footer__social img { width: 36px; height: 36px; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  border-top: 1px solid var(--c-line-dark);
  padding-block: var(--sp-3);
  font-size: var(--fs-small);
  color: #ffffff8c;
}
.site-footer__legal p { color: inherit; }
.site-footer__legal nav { display: flex; gap: var(--sp-3); }
.site-footer__legal a { color: inherit; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; }
.site-footer__legal a:hover { color: var(--c-brand); }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr auto; align-items: start; }
}