/* ==========================================================
   SOKAI Kickboxen — Stylesheet
   ==========================================================
   Aufbau der Datei (von oben nach unten):
   1. CSS-Variablen (Farben, Radien, Schriften)
   2. Reset / Grundeinstellungen
   3. Wiederverwendbare Bausteine (Buttons, Kicker-Label, Bild-Platzhalter)
   4. Header / Navigation
   5. Die einzelnen Seitenabschnitte, in der Reihenfolge wie im HTML
   6. Responsive Anpassungen (Media Queries) ganz am Ende

   Warum CSS-Variablen? Damit Farben und Radien nur an EINER Stelle
   gepflegt werden müssen. Will man z.B. das Mint-Grün später einen
   Ton dunkler machen, reicht eine Änderung in :root - nicht 30 Stellen
   im ganzen Dokument absuchen.
   ========================================================== */

:root {
  /* Grundfarben, angelehnt an das Referenz-Design: warmes Creme als
     Hintergrundfarbe im Hero, Dunkelblau statt reinem Schwarz für die
     dunklen Abschnitte (wirkt weniger hart), Mint-Grün als Akzentfarbe
     für Calls-to-Action.
     Beide Creme-Töne bewusst sehr zurückhaltend/hell gehalten (kaum
     wahrnehmbarer Warmton statt sattem Beige) - im Referenz-Design ist das
     eher ein ganz leichter Unterschied zu Weiß, kein eigenständiger
     "Beige-Look". */
  --color-cream: #f7f2e9;
  --color-cream-soft: #faf7f2;
  --color-white: #ffffff;
  --color-dark: #10192a;
  --color-dark-soft: #1a2438;
  --color-text: #14181f;
  --color-muted: #6b6f76;
  --color-muted-on-dark: #b7bdc9;
  --color-mint: #8ce6c4;
  --color-mint-dark: #6bd1ac;
  /* Der rostrote/terrakotta Ton für die kleinen Kicker-Texte über den
     Überschriften ("TRAININGSPROGRAMME" usw.) - bewusst ein warmer,
     kein reiner Signalfarbton, damit es nicht wie eine Fehlermeldung wirkt. */
  --color-kicker: #c1440e;

  --radius-pill: 999px; /* für komplett runde Buttons */
  --radius-md: 14px;
  --radius-lg: 20px; /* für Bildflächen/Karten */

  --container-width: 1180px; /* maximale Breite des Inhalts, damit Zeilen
                                 auf großen Monitoren nicht ins Unendliche
                                 laufen und unlesbar breit werden */

  /* Einheitliche Schatten-Stufen statt an jeder Stelle eigene box-shadow-
     Werte zu erfinden. Bewusst sehr weich/dezent (großer Blur, geringe
     Deckkraft) - harte, dunkle Schlagschatten wirken schnell "billig",
     weiche Schatten erzeugen dagegen Tiefe, ohne aufdringlich zu sein. */
  --shadow-sm: 0 2px 8px rgba(16, 25, 42, 0.06);
  --shadow-md: 0 16px 40px -12px rgba(16, 25, 42, 0.18);

  /* Eine sanfte "Ease-Out"-Kurve statt des CSS-Standards "ease" - Bewegungen
     starten etwas schneller und laufen sehr weich aus. Für Hover-Effekte
     und Accordion-Animationen wirkt das spürbar hochwertiger als der
     lineare Standard-Übergang. */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* Bewusst NUR Inter für Überschriften UND Fließtext (statt vorher Inter +
     Manrope gemischt) - eine einzige, konsequent durchgezogene Schriftfamilie
     wirkt ruhiger und näher am Referenz-Design, das ebenfalls mit einer
     einzigen, eher zurückhaltenden Grotesk-Schrift statt einer zweiten,
     "dekorativeren" Display-Schrift arbeitet. */
  --font-display: "Inter", system-ui, sans-serif; /* Überschriften */
  --font-body: "Inter", system-ui, sans-serif; /* Fließtext */
}

/* ---------- Reset ---------- */

/* border-box sorgt dafür, dass padding/border NICHT zur angegebenen Breite
   dazugerechnet werden - ohne das würde jede Breitenangabe im Layout ständig
   zu Überraschungen führen, sobald irgendwo Innenabstand dazukommt. */
* {
  box-sizing: border-box;
}

/* Garantiert, dass das native HTML-Attribut "hidden" IMMER wirklich
   etwas ausblendet - auch dann, wenn eine speziellere Klasse auf
   demselben Element (z.B. .btn mit "display: inline-flex") sonst
   Vorrang hätte. Ohne diese Regel kann es passieren, dass ein per
   JavaScript "el.hidden = true" gesetztes Element (z.B. ein
   Formular-Button) trotzdem sichtbar bleibt, weil eine gleich
   spezifische Klassen-Regel den unsichtbaren Browser-Standard für
   [hidden] überstimmt. Kam in diesem Projekt tatsächlich beim
   Probetraining-Button vor - daher lieber einmal hier zentral
   absichern, als an jeder Stelle einzeln aufzupassen. */
[hidden] {
  display: none !important;
}

/* Sorgt dafür, dass Klicks auf die Anker-Links im Header (#programme usw.)
   weich scrollen statt abrupt zu springen. */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.5; /* etwas mehr Zeilenabstand als der Browser-Standard,
                        macht Fließtext deutlich angenehmer lesbar */
  -webkit-font-smoothing: antialiased; /* glattere Schriftdarstellung auf
                                           Mac/Safari, rein kosmetisch */
}

/* Eigener Fokus-Ring statt des Browser-Standards (meist ein grelles Blau,
   das zu keinem Farbschema passt). :focus-visible sorgt dafür, dass der
   Ring nur bei Tastatur-Bedienung erscheint, nicht bei jedem Maus-Klick -
   Barrierefreiheit UND ein aufgeräumter Look schließen sich so nicht aus. */
:focus-visible {
  outline: 2px solid var(--color-kicker);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  max-width: 100%;
  display: block;
} /* verhindert, dass Bilder ihren
  Container sprengen, und entfernt den kleinen "Leerraum" unter <img>,
  der durch inline-Elemente entsteht */
a {
  color: inherit;
  text-decoration: none;
} /* Links übernehmen die
  Textfarbe der Umgebung, statt Standard-Blau - Unterstreichungen/Farben
  werden gezielt pro Link-Typ gesetzt (siehe .link-arrow etc.) */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800; /* kräftig/fett, wie im Referenz-Design - die vorherige
                        Reduzierung auf 700 hat die Überschriften zu
                        zurückhaltend wirken lassen */
  line-height: 1.05;
  margin: 0 0 0.4em;
  letter-spacing: -0.02em;
  /* Sicherheitsnetz gegen abgeschnittene Wörter: eine per <br> fest
     erzwungene Zeile kann bei sehr breiten Bildschirmen (h1 wächst bis
     4.6rem, siehe unten) länger werden als ihre Spalte - ohne diese
     Zeile würde der Text dann seitlich über den Hero hinauslaufen und
     dort von "overflow: hidden" abgeschnitten. overflow-wrap sorgt
     dafür, dass so ein zu langes Wort im Zweifel selbst umbricht, statt
     unsichtbar zu werden. Ändert am normalen Schriftbild nichts - greift
     nur in genau diesem Fall. */
  overflow-wrap: break-word;
}

/* clamp(min, bevorzugt, max) lässt die Schriftgröße fließend mit der
   Fensterbreite mitwachsen, ohne dass man für jede Bildschirmgröße eine
   eigene Media Query schreiben muss. Auf dem Handy landet man automatisch
   near am Minimalwert, auf großen Monitoren near am Maximalwert.
   Die Werte hier wurden bewusst wieder GRÖSSER gesetzt als in der letzten
   Fassung - die Schrift war dort zu klein und wirkte im Vergleich zum
   Referenz-Design zaghaft/unfertig statt selbstbewusst. */
h1 {
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);
}
h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
}
h3 {
  font-size: 1.2rem;
  font-weight: 700;
}
h4 {
  font-size: 1.05rem;
  font-weight: 700;
}
p {
  margin: 0 0 1em;
  color: var(--color-muted);
}

/* Der Standard-Wrapper für so gut wie jeden Abschnitt: zentriert den
   Inhalt, begrenzt die Breite und sorgt links/rechts für Luft, damit
   der Text auf dem Handy nicht am Bildschirmrand klebt. */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Grundabstände & Sektions-Varianten ---------- */
.section {
  padding: 80px 0;
} /* Abstand oben/unten zwischen den Themen-
  blöcken - vorher 96px, etwas verdichtet, damit die Seite insgesamt
  kompakter wirkt und näher am Referenz-Design bleibt */
.section-dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--color-white);
}
.section-cream {
  background: var(--color-cream-soft);
}

.kicker {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em; /* Großbuchstaben mit Buchstabenabstand wirken
                              wie ein "Etikett", nicht wie eine Überschrift */
  text-transform: uppercase;
  color: var(--color-kicker);
  margin-bottom: 14px;
}
.kicker-on-dark {
  color: #ff9466;
} /* helleres Orange auf dunklem Grund,
  damit der Kontrast (Lesbarkeit) auch dort passt */

.section-copy {
  max-width: 46ch;
} /* "ch" = Breite des Zeichens "0" in der
  aktuellen Schrift. So bleiben Textzeilen unabhängig von der Bildschirm-
  breite angenehm kurz (Faustregel: 45-75 Zeichen pro Zeile lesen sich am
  besten) statt über die ganze Containerbreite zu laufen. */
.section-copy-on-dark {
  color: var(--color-muted-on-dark);
}

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(
    --radius-pill
  ); /* komplett rund/pillenförmig, wie im
                                         Referenz-Design */
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  /* Mehrere Eigenschaften einzeln benennen (statt "transition: all") ist
     zwar etwas mehr Tipparbeit, aber performanter: der Browser muss nicht
     bei jeder denkbaren CSS-Eigenschaft nachschauen, ob sie sich geändert
     hat. Die weiche --ease-smooth-Kurve statt linear "ease" lässt die
     Bewegung hochwertiger/natürlicher wirken. */
  transition:
    transform 0.25s var(--ease-smooth),
    box-shadow 0.25s var(--ease-smooth),
    background 0.2s ease;
  white-space: nowrap; /* Button-Text darf nicht umbrechen und den Button
                           dadurch hässlich in die Höhe ziehen */
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-dark:hover {
  background: var(--color-dark-soft);
}
.btn-mint {
  background: var(--color-mint);
  color: var(--color-dark);
}
.btn-mint:hover {
  background: var(--color-mint-dark);
}
.btn-small {
  padding: 11px 22px;
  font-size: 0.88rem;
  box-shadow: none;
}

.btn-link {
  background: none;
  padding: 15px 4px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 2px solid transparent; /* Rand ist unsichtbar bis zum
    Hover, so bleibt der Platz reserviert und der Text springt beim Hover
    nicht plötzlich nach oben/unten */
  transition: border-color 0.2s var(--ease-smooth);
}
.btn-link:hover {
  border-color: var(--color-text);
}

.link-arrow {
  display: inline-flex;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 2px;
  transition: gap 0.2s var(--ease-smooth);
}
/* Der Pfeil rückt beim Hover minimal nach rechts - ein sehr kleines,
   fast unterbewusstes Detail, das einen Link "reagierend" wirken lässt,
   statt komplett statisch zu sein. Genau solche Kleinigkeiten machen
   optisch den Unterschied zwischen "Baukasten" und "handgemacht". */
.link-arrow:hover {
  gap: 10px;
}
.section-dark .link-arrow,
.section-dark .btn-link {
  color: var(--color-white);
  border-color: var(--color-white);
}

/* ---------- Bildflächen mit automatischem Platzhalter ----------
   Jede Bildfläche ist ein <figure class="media" data-label="..."> mit
   einem echten <img class="media-img" src="bilder/dateiname.jpg"> darin.

   Der Ablauf:
   1. Der Browser versucht, die Datei aus dem bilder/-Ordner zu laden.
   2. Existiert sie -> das Foto füllt die Fläche komplett aus
      (object-fit: cover, siehe .media-img unten).
   3. Existiert sie NICHT -> das onerror-Attribut am <img> (siehe
      index.html, ruft handleMediaError() aus script.js auf) versteckt
      das kaputte Bild und setzt die Klasse "media--missing" auf die
      .media-Fläche. Erst DANN wird das Streifenmuster + Label sichtbar.

   So sieht man beim Arbeiten am Projekt immer sofort, wo genau noch ein
   Foto fehlt - und sobald die passende Datei im bilder/-Ordner liegt,
   erscheint sie beim nächsten Laden automatisch, ohne dass hier am CSS
   oder HTML noch etwas geändert werden müsste. */
.media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 160px;
  background: var(
    --color-cream-soft
  ); /* neutraler Hintergrund, falls das
    Bild noch lädt */
  box-shadow: var(
    --shadow-sm
  ); /* minimale Tiefe, damit Bildflächen sich
    leicht vom Hintergrund abheben statt komplett flach zu wirken */
}
.media-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* füllt die Fläche komplett, statt das Bild zu
    verzerren oder Ränder freizulassen - überschüssiger Bildbereich wird
    einfach abgeschnitten */
  display: block;
}

/* Nur diese Zustands-Klasse zeigt das Streifenmuster + die Beschriftung -
   solange ein echtes Bild lädt, ist davon nichts zu sehen.
   Bewusst ein neutraler Kühlgrau-Verlauf statt des vorherigen grünlichen
   Tons - der hat sich optisch mit den Creme-Hintergründen vermischt und
   die ganze Seite "beiger" wirken lassen, als sie sein soll. Neutrales
   Grau signalisiert klar "Platzhalter", ohne eine eigene Farbstimmung
   in den Abschnitt zu bringen. */
.media--missing {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(16, 25, 42, 0.05) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(160deg, #e7e8ea, #d3d5d9);
}
.media--missing .media-img {
  display: none;
} /* das kaputte <img> wird
  komplett ausgeblendet, damit kein Browser-eigenes "Bild fehlt"-Symbol
  zu sehen ist */

/* Das Label wird nicht als eigenes HTML-Element eingefügt, sondern über
   das data-label-Attribut per CSS erzeugt (content: attr(...)) - und auch
   nur angezeigt, wenn die Fläche gerade im "missing"-Zustand ist. */
.media--missing::after {
  content: attr(data-label);
  position: absolute;
  left: 16px;
  bottom: 14px;
  background: rgba(16, 25, 42, 0.75);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  z-index: 2; /* über dem media-fade-Verlauf (z-index: 1), sonst würde der
    Verlauf das Label auf hellem Grund kaum lesbar überdecken */
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; /* bleibt beim Scrollen oben "kleben", statt mit der
                        Seite mitzuwandern */
  top: 0;
  z-index: 100; /* muss über allen anderen Sektionen liegen */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(
    8px
  ); /* leichter Weichzeichner-Effekt für den
    Inhalt, der unter dem halbtransparenten Header durchscrollt - wirkt
    hochwertiger als ein einfarbiger Balken */
  border-bottom: 1px solid rgba(16, 25, 42, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo links, Nav Mitte/rechts, Buttons
                                      ganz rechts - klassisches 3-Zonen-Layout */
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.logo span {
  color: var(--color-kicker);
} /* der Punkt hinter "SOKAI" in
  der Akzentfarbe, kleines Wiedererkennungsmerkmal */

.main-nav {
  display: flex;
  gap: 28px;
  font-size: 0.92rem;
  font-weight: 500;
}
.main-nav a:hover {
  color: var(--color-kicker);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Hamburger-Icon aus drei einfachen <span>-Strichen statt einem Icon-Font
   oder SVG - so bleibt der Header komplett ohne externe Icon-Bibliothek
   lauffähig. Standardmäßig unsichtbar (display: none), wird erst in der
   Media Query weiter unten für schmale Bildschirme eingeblendet. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; /* damit der vertikale Schriftzug (.hero-vertical-label)
    weiter unten relativ zu diesem Abschnitt positioniert werden kann */
  background: var(--color-cream);
  overflow: hidden; /* verhindert, dass die abgesetzte kleine Bildfläche
    (die bewusst über den Rand hinausragt) einen horizontalen Scrollbalken
    verursacht */
}

/* Der Hero ist bewusst NICHT in .container gepackt (siehe index.html) -
   dadurch darf .hero-media unten bis an den Bildschirmrand "ausbluten".
   Damit der Text trotzdem exakt so beginnt wie der Inhalt jedes anderen
   Abschnitts (der ja in .container steckt), wird der linke Innenabstand
   hier von Hand nachgerechnet: die Hälfte des Freiraums neben der
   maximalen Containerbreite, plus das normale Container-Innenpolster.
   max(...) verhindert, dass der Wert auf schmalen Bildschirmen negativ
   wird (dort ist 100vw ja kleiner als --container-width). */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); /* Bildspalte
    bewusst etwas breiter als die Textspalte - das Bild soll den größeren,
    dominanteren Part einnehmen */
  align-items: stretch;
  /* Bewusst NICHT als starrer Pixel-Wert: auf großen/breiten Bildschirmen
     (z.B. 4K-Monitore) wächst die Breite der Bildspalte viel schneller als
     eine feste Höhe von 640px - das Hero-Bild wird dann in einen immer
     flacheren, breiteren Ausschnitt gezwängt und wirkt dadurch optisch
     "verzerrt" (obwohl object-fit: cover technisch nur zuschneidet, sieht
     der stark beschnittene, extrem breite Ausschnitt eines hochformatigeren
     Fotos schief aus). clamp() lässt die Höhe stattdessen mit der
     Bildschirmhöhe mitwachsen: 640px als Untergrenze auf kleinen/niedrigen
     Fenstern, 88vh als bevorzugter Wert, 900px als Obergrenze, damit der
     Hero auf sehr hohen Displays nicht ausufernd groß wird. */
  min-height: clamp(640px, 88vh, 900px);
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 56px;
  padding-left: max(24px, calc((100vw - var(--container-width)) / 2 + 24px));
  padding-right: 48px;
  /* Grid-Kinder haben als Default min-width: auto statt 0 - dadurch
     weigern sie sich, unter die intrinsische Mindestbreite ihres Inhalts
     zu schrumpfen. Auf schmalen Bildschirmen reicht dafür schon eine
     einzelne lange, an sich umbrechbare Textzeile (z.B. in .trust-row auf
     den SoKai-Academy-Unterseiten), um die ganze Spalte über die
     Bildschirmbreite hinauswachsen zu lassen und dadurch horizontales
     Scrollen auf der GESAMTEN Seite zu erzwingen. min-width: 0 hebt genau
     diese Sperre auf, ohne sonst etwas am Layout zu verändern. */
  min-width: 0;
}
.hero-sub {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
}
.hero-copy {
  max-width: 44ch;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero-media {
  position: relative;
  height: 100%;
  min-height: 420px;
}
/* Ab Desktop-Breite füllt das Hauptbild die GESAMTE Bildspalte (Breite bis
   zum Bildschirmrand, volle Höhe der Zeile) - dafür wird es hier absolut
   positioniert und "inset: 0" gesetzt, statt wie vorher über ein festes
   Seitenverhältnis in seiner Größe begrenzt zu sein. Auf schmalen
   Bildschirmen wird das in der Media Query weiter unten wieder auf ein
   normales, ruhig fließendes Seitenverhältnis zurückgestellt. */
.hero-media-main {
  position: absolute;
  /* Bewusst NICHT "inset: 0" (= randlos bis zum Header/unteren Rand),
     sondern oben/unten ein Stück Luft lassen: dort bleibt die Creme-
     Hintergrundfarbe des Hero-Bereichs sichtbar, statt dass das Foto
     direkt an den weißen Header stößt. Rechts bleibt es bei 0, damit
     der gewünschte Ausbluten-Effekt zum Bildschirmrand erhalten bleibt. */
  top: 44px;
  right: 0;
  bottom: 44px;
  left: 0;
  /* Ein einziger Verlauf: Creme blendet von der linken Bildkante her ein
     (Text steht links, Bild rechts, Hero-Hintergrund ist Creme). */
  --fade-color: var(--color-cream);
  --fade-angle: to right;
}
/* Dieses Feld zeigt das SOKAI-LOGO (bilder/hero-kickboxen.png), kein
   zweites Trainingsfoto - deshalb bewusst anders gestaltet als die
   generische .media-Fläche, von der es erbt:
   - kein Rahmen: ein Rahmen in Hintergrundfarbe ergibt bei einem Foto
     Sinn (trennt zwei Bildkanten optisch voneinander), sieht bei einem
     frei stehenden Logo mit transparentem Hintergrund aber wie ein
     unmotivierter Kasten aus.
   - transparenter statt cremefarbener Hintergrund: die .png-Datei hat
     selbst einen transparenten Hintergrund. Ohne diese Zeile würde
     die cremefarbene Standardfläche von .media (siehe weiter oben)
     durch das Logo hindurchscheinen wie ein Blatt Papier dahinter,
     statt dass das Logo frei über dem großen Foto zu schweben scheint.
   - kein Schlagschatten: passt zu einer Bildkarte, wirkt aber bei
     einem einzelnen Logo-Schriftzug eher störend/schwer.
   Bewusst OHNE "!important" gelöst: da diese Regeln alle über die
   ID-lose Klasse .hero-media-small kommen und NACH der generischen
   .media-Regel in dieser Datei stehen, gewinnen sie in der Kaskade
   ganz regulär - ein Erzwingen per !important ist hier gar nicht
   nötig und würde nur zukünftige Anpassungen erschweren. */
.hero-media-small {
  position: absolute;
  left: 40px; /* auf der ausblutenden, sehr breiten Bildfläche liegt der
                    kleine Zweit-Ausschnitt jetzt weiter innen, statt (wie
                    vorher bei der kleineren Box) fast am linken Rand zu
                    kleben - wirkt bei dieser Größe ausgewogener */
  bottom: 40px;
  width: 38%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  background: transparent;
  box-shadow: none;
  z-index: 2; /* muss über dem media-fade-Verlauf des großen Bilds liegen,
    sonst würde der Verlauf über dem kleinen Bild "schweben" */
}
/* object-fit: contain statt des globalen "cover" (siehe .media-img weiter
   oben): "cover" würde das Logo anschneiden, sobald sein Seitenverhältnis
   nicht exakt zur Fläche passt - bei einem Foto fällt das kaum auf, bei
   einem Logo mit Schriftzug sähe ein abgeschnittener Rand sofort kaputt
   aus. "contain" zeigt das komplette Logo unverzerrt, notfalls mit ein
   wenig transparentem Rand statt Beschnitt. */
.hero-media-small .media-img {
  object-fit: contain;
}

/* ---------- Bild-Verlauf ("Schleier"), der die Seitenfarbe ins Foto
   überblendet ----------
   Statt dass ein großes Bild mit einer harten, geraden Kante neben dem
   Text steht, blendet hier die Hintergrundfarbe des jeweiligen Abschnitts
   weich in einen Bildrand hinein - das Foto wirkt dadurch weniger wie
   "ein Kasten neben dem Text" und mehr wie ein natürlicher Teil des
   Layouts. --fade-color und --fade-side werden pro Bild überschrieben
   (siehe die einzelnen .xyz-media.media-fade-Regeln weiter unten in
   dieser Datei), --fade-angle ergibt sich automatisch daraus. */
.media-fade {
  --fade-color: var(--color-white);
  --fade-angle: to right; /* die Richtung, in der der Verlauf verläuft -
    "to right" heißt: die Farbe startet links und wird nach rechts hin
    durchsichtig. Wird pro Bild überschrieben (siehe .hero-media-main,
    .method-media, .flagship-media weiter unten in dieser Datei). */
}
.media-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* liegt über dem <img> (das ist nicht positioniert und
    zählt daher als "darunter"), aber unter allem, was bewusst einen
    höheren z-index bekommt (z.B. .hero-media-small) */
  pointer-events: none; /* rein optisch - darf Klicks/Hover auf das
    darunterliegende Bild nicht blockieren */
  /* Genau EIN Verlauf, immer in der gleichen Sektionsfarbe - bewusst
     schlicht gehalten statt mehrere Verläufe zu kombinieren.
     Die erste Zeile ist ein einfacher Zwei-Punkt-Verlauf als Fallback für
     Browser, die "color-mix()" nicht kennen (der Verlauf funktioniert
     dann trotzdem, nur etwas weniger weich). Die zweite Zeile
     überschreibt das in allen aktuellen Browsern mit einem Verlauf aus
     DREI Haltepunkten: völlig deckend -> halb durchscheinend -> komplett
     durchsichtig, und über eine größere Breite (55% statt vorher 30%
     der Bildbreite). Ein einfacher Zwei-Punkt-Verlauf blendet linear
     und dadurch recht "technisch" aus; der zusätzliche Mittelpunkt lässt
     den Übergang runder/organischer wirken, so wie er auch bei Bildern
     entsteht, die von Hand in einem Bildbearbeitungsprogramm überblendet
     wurden. */
  background: linear-gradient(
    var(--fade-angle),
    var(--fade-color) 0%,
    transparent 30%
  );
  background: linear-gradient(
    var(--fade-angle),
    var(--fade-color) 0%,
    color-mix(in srgb, var(--fade-color) 55%, transparent) 26%,
    transparent 55%
  );
}

/* Der kleine vertikale Schriftzug am rechten Rand aus dem Referenz-Design.
   writing-mode dreht den Text um 90°, die Rotation um 180° sorgt dafür,
   dass er von unten nach oben statt oben nach unten lesbar ist.
   Auf dem Handy ausgeblendet (siehe Media Query), weil dort schlicht kein
   Platz dafür ist, ohne den Hauptinhalt zu stören. */
.hero-vertical-label {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff; /* seit das Hero-Bild bis zum rechten Rand ausblutet, liegt
    dieses Label direkt AUF dem Foto (vorher lag es im leeren Rand daneben)
    - Weiß mit Schlagschatten (nächste Zeile) bleibt über jedem Fotomotiv
    lesbar, ein gedecktes Grau würde auf dunklen Bildbereichen verschwinden */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  z-index: 3; /* über dem Bild UND über dessen media-fade-Verlauf */
  /* Auf schmalen Bildschirmen ist dafür schlicht kein Platz, ohne den
     Haupttext zu stören - dort bleibt es ausgeblendet. Ab 960px (siehe
     min-width Media Query weiter unten) wird es sichtbar. */
  display: none;
}

/* ---------- Probetraining: kleine Karte (fest an der Seite) ----------
   "position: fixed" statt "absolute": die Karte hängt am
   BROWSERFENSTER, nicht an einer bestimmten Seitensektion - sie bleibt
   deshalb an derselben Stelle sichtbar, während man die Seite runter-
   und wieder hochscrollt ("läuft mit"). z-index liegt über dem
   Sticky-Header (der hat 100).

   WICHTIG: diese Karte ist von Anfang an mit sichtbaren Feldern da -
   es braucht keinen Klick, um sie erst "aufzuklappen". Die große,
   zweispaltige Ansicht (.probe-modal weiter unten) kommt NUR, wenn
   jemand nach dem Absenden freiwillig auf "mehr erzählen" klickt. */
.probe-widget {
  position: fixed;
  top: 110px;
  right: 24px;
  z-index: 150;
  width: 320px;
  max-height: calc(
    100vh - 130px
  ); /* Sicherheitsnetz für niedrige
    Bildschirme/viele Felder - das Formular soll trotzdem nie
    abgeschnitten werden, deshalb bleibt overflow-y: auto bestehen */
  overflow-y: auto;
  /* Der Scrollbalken selbst soll aber unsichtbar bleiben (siehe
     .probe-widget::-webkit-scrollbar weiter unten) - man kann die
     Karte bei Bedarf weiterhin ganz normal mit Mausrad/Touch scrollen,
     nur der optisch störende Balken daneben verschwindet. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* alte Edge-/IE-Engines */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(
    14px
  ); /* Safari braucht das Vendor-Prefix
    noch, sonst bleibt der Weichzeichner dort aus und die Karte wirkt
    milchig-undurchsichtig statt glasig */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}
/* Chrome/Safari/neueres Edge kennen scrollbar-width nicht, sondern
   verstecken den Scrollbalken über dieses Pseudo-Element - deshalb
   beide Wege gleichzeitig, sonst bliebe der Balken in Chrome sichtbar. */
.probe-widget::-webkit-scrollbar {
  display: none;
}
.probe-widget-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(16, 25, 42, 0.06);
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.probe-widget-close:hover {
  background: rgba(16, 25, 42, 0.12);
  color: var(--color-text);
}
.probe-widget .hero-form-title {
  font-size: 1.3rem;
  padding-right: 24px;
}

/* Taucht genau dort auf, wo eben noch die Karte war, sobald sie über
   das ×-Symbol komplett weggedrückt wurde - so bleibt "Probetraining
   anfragen" reaktivierbar, statt für den Rest des Besuchs unerreichbar
   zu sein. Gleiche Position/Ebene wie .probe-widget, damit der Übergang
   beim Schließen/Wiederöffnen keinen Sprung an eine andere Bildschirm-
   stelle macht. */
.probe-widget-reopen {
  position: fixed;
  top: 110px;
  right: 24px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  background: var(--color-mint);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease;
}
.probe-widget-reopen:hover {
  transform: translateY(-2px);
}

.probe-widget-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text);
}

.hero-form-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--color-text);
  margin: 4px 0 10px;
}
.hero-form-field {
  margin-bottom: 14px;
}
/* Bewusst ">" (Kind-Kombinator) statt eines einfachen Leerzeichens:
   ein simples ".hero-form-field label" würde auch auf die Quiz-Pillen
   (.pill-choice) und Options-Kästchen (.hero-form-chip) durchschlagen,
   die als <label> ja ebenfalls IRGENDWO innerhalb eines .hero-form-field
   verschachtelt sind. Mit ">" trifft die Regel nur die eigentliche
   Feld-Überschrift (direktes Kind von .hero-form-field), nicht die
   Auswahl-Optionen darunter. */
.hero-form-field > label,
.hero-form-goals legend {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.required-mark {
  color: var(--color-kicker);
}
.optional-inline {
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--color-muted);
  font-size: 0.72rem;
}
.hero-form-field input[type="text"],
.hero-form-field input[type="tel"],
.hero-form-field input[type="email"],
.hero-form-field input[type="number"],
.hero-form-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(16, 25, 42, 0.15);
  border-radius: 10px;
  background: var(--color-cream-soft);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}
/* Eigener, deutlich sichtbarer Fokus-Zustand direkt auf den Feldern,
   zusätzlich zum globalen :focus-visible-Ring. */
.hero-form-field input:focus-visible,
.hero-form-field select:focus-visible {
  outline: none;
  border-color: var(--color-kicker);
  box-shadow: 0 0 0 3px rgba(193, 68, 14, 0.15);
}

/* Zwei Felder nebeneinander (E-Mail + Telefonnummer) - wie im
   Referenz-Layout. Auf schmalen Bildschirmen (Media Query weiter
   unten) wieder untereinander. */
.probe-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hero-form-goals {
  border: none;
  padding: 0;
  margin: 0 0 14px;
}
.hero-form-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-text);
  padding: 7px 0;
  cursor: pointer;
}
.hero-form-chip input {
  accent-color: var(--color-kicker);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Die Datenschutz-Einwilligung im Pflichtteil - Text UND Link stecken
   bewusst gemeinsam in einem <span> statt lose im Label zu stehen:
   .hero-form-consent ist ein Flex-Container, und ohne dieses <span>
   würde jeder Text-/Link-Abschnitt zu einem eigenen Flex-Element und
   liefe seitlich aus der Karte heraus. */
.hero-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.4;
  margin-bottom: 16px;
  cursor: pointer;
}
.hero-form-consent input {
  accent-color: var(--color-kicker);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
}
.hero-form-consent a {
  text-decoration: underline;
  color: var(--color-text);
}

/* ---------- "Optional"-Abzeichen ----------
   Kommt jetzt nur noch an EINER Stelle vor (im Link "Magst du uns noch
   kurz mehr erzählen?"), statt wie vorher bei jedem einzelnen Feld -
   eine einzige, klare Ansage reicht, wiederholtes "optional" an jeder
   Frage wirkte eher unruhig als hilfreich. */
.optional-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  background: var(--color-mint);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

/* ---------- Quiz-Pillen für Ein-/Mehrfachauswahl-Fragen ----------
   Statt trockener Radio-Buttons: antippbare "Pillen", die sich beim
   Auswählen dunkel einfärben. Das <input> bleibt technisch vorhanden
   (für Tastatur-Bedienung und Screenreader), wird aber visuell
   versteckt - das sichtbare "Pillen"-Aussehen kommt komplett vom
   <span> daneben. */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill-choice {
  display: block;
}
.pill-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.pill-choice span {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(16, 25, 42, 0.15);
  background: var(--color-white);
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.pill-choice:hover span {
  border-color: rgba(16, 25, 42, 0.35);
}
.pill-choice input:checked + span {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}
.pill-choice input:focus-visible + span {
  outline: 2px solid var(--color-kicker);
  outline-offset: 2px;
}

.hero-form-action {
  width: 100%;
  justify-content: center;
}

.hero-form-success {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  background: rgba(
    140,
    230,
    196,
    0.35
  ); /* dezentes Mint als "Erfolg"-Farbe,
    passend zur restlichen Marke statt eines generischen Grüns */
  border-radius: 10px;
  padding: 14px 16px;
  margin: 4px 0 0;
}

/* ==========================================================
   Probetraining: breites, zweispaltiges Popup
   ==========================================================
   Klassisches Modal-Muster: ein abgedunkelter Hintergrund
   (.probe-modal-backdrop) über der ganzen Seite, mit der eigentlichen
   Karte (.probe-modal) mittig darauf. Wird komplett über das
   "hidden"-Attribut gesteuert (siehe initProbeWidget() in script.js) -
   ":not([hidden])" ist hier wichtig: ohne das würde die eigene
   "display: flex"-Regel das Standardverhalten von [hidden]
   (display: none) überstimmen und das Popup bliebe immer sichtbar. */
.probe-modal-backdrop:not([hidden]) {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200; /* über allem anderen, inklusive dem Auslöser-Button */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 25, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Zweispaltiges Grid: schmale dunkle Info-Spalte links, breiteres
   Formular rechts - bewusst BREIT (900px), damit die Fragen im
   Formular nicht eng untereinander gequetscht werden müssen und die
   Karte in aller Regel ohne eigenes Scrollen auskommt. max-height +
   overflow-y bleiben trotzdem als Sicherheitsnetz für sehr niedrige
   Bildschirme (z.B. Handy quer) bestehen - im Normalfall greifen sie
   nie. */
.probe-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  width: min(900px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow-y: auto;
  /* Gleiche Begründung wie bei .probe-widget weiter oben: das Scrollen
     selbst bleibt als Sicherheitsnetz erhalten, nur der Balken dafür
     wird ausgeblendet. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: probe-modal-in 0.3s var(--ease-smooth);
}
.probe-modal::-webkit-scrollbar {
  display: none;
}
@keyframes probe-modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.probe-modal-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  gap: 8px;
}
.probe-modal-icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(16, 25, 42, 0.06);
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.probe-modal-icon-btn:hover {
  background: rgba(16, 25, 42, 0.12);
  color: var(--color-text);
}

/* ---------- Linke Spalte: Vertrauens-/Ablaufinfo ---------- */
.probe-modal-aside {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 32px 28px;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  display: flex;
  flex-direction: column;
}
/* Zeigt das SOKAI-Schriftzeichen (爽快, "erfrischend/belebend" - dieselben
   zwei Kanji wie im großen Logo im Hero-Bild) statt einer reinen "01" -
   ein kleiner Marken-Akzent oben in der dunklen Info-Spalte, bevor der
   eigentliche Ablauf in drei nummerierten Schritten (.probe-modal-steps
   weiter unten) folgt. Bewusst als echter Text statt eines Bildes: kein
   zusätzlicher Bild-Download nötig, und die Zeichen bleiben so in jeder
   Auflösung gestochen scharf. Rein dekorativ (aria-hidden), die
   eigentlichen Schritte darunter tragen die Information. */
.probe-modal-step-badge {
  display: inline-block;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.probe-modal-aside h3 {
  color: var(--color-white);
  font-size: 1.4rem;
  margin: 0 0 20px;
}
.probe-modal-steps {
  list-style: none;
  margin: 0 0 auto;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.probe-modal-steps li {
  font-size: 0.88rem;
  color: var(--color-muted-on-dark);
  line-height: 1.4;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.probe-modal-steps li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.probe-modal-step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--color-kicker);
  margin-bottom: 4px;
}
.probe-modal-aside-footnote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--color-muted-on-dark);
  line-height: 1.4;
  margin: 24px 0 0;
}
.probe-modal-aside-footnote span {
  color: var(--color-mint);
  flex-shrink: 0;
}

/* ---------- Rechte Spalte: das eigentliche Formular ---------- */
.probe-modal-main {
  padding: 32px 36px;
  overflow: hidden;
}
.probe-modal-main #probeModalKicker {
  margin-top: 4px;
}
.probe-modal-hint {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0 0 20px;
}
.probe-modal-hint strong {
  color: var(--color-kicker);
  font-weight: 700;
}

/* Kurzer erklärender Satz direkt unter einer Abschnitts-Überschrift -
   bewusst schmal gehalten (max-width), damit er bei voller Container-
   Breite nicht als ellenlange Zeile über den ganzen Bildschirm läuft. */
.section-intro {
  max-width: 56ch;
  color: var(--color-muted);
  margin-top: -8px;
}

/* ---------- Programm-Karten ----------
   WICHTIG zum Abstands-Rhythmus zwischen Karten-Reihen (.card-grid hier,
   .steps-grid/.method-grid/.team-grid weiter unten): alle vier hatten
   bisher leicht unterschiedliche Werte für "gap" (20/24/28px) UND für
   den Abstand zur Überschrift/zum nächsten Element danach (28-40px oben,
   0-36px unten) - das erzeugte genau den "mal enger, mal weiter"-
   Eindruck beim Scrollen, der zurecht bemängelt wurde. Jetzt einheitlich:
   gap: 24px, margin-top vor der Reihe: 32px, KEIN eigener margin-bottom
   mehr danach (der Abstand zum Ende der Sektion kommt stattdessen
   einheitlich vom padding-bottom der Sektion selbst - siehe .section
   weiter oben). */
.card-grid {
  display: grid;
  grid-template-columns: repeat(
    4,
    1fr
  ); /* vier gleich breite Spalten auf
    großen Bildschirmen; wird in den Media Queries auf 2 bzw. 1 reduziert */
  gap: 24px;
  margin-top: 32px;
}
.program-img {
  aspect-ratio: 3 / 4;
  margin-bottom: 18px;
  transition: box-shadow 0.4s var(--ease-smooth);
}
/* Die Karte (das .media-Rechteck mit overflow:hidden) bleibt in Ruhe -
   nur das FOTO darin zoomt beim Hover ganz leicht (scale). So bleibt der
   Rahmen/Schatten der Karte stabil, während sich nur das Bild "hinter dem
   Fenster" bewegt - der klassische, dezente Zoom-Effekt aus hochwertigen
   Portfolio-/Studio-Websites, kein aufdringlicher Karten-Sprung. */
.program-img .media-img {
  transition: transform 0.5s var(--ease-smooth);
}
.program-card:hover .program-img {
  box-shadow: var(--shadow-md);
}
.program-card:hover .program-img .media-img {
  transform: scale(1.06);
}
.program-card h3 {
  margin-bottom: 8px;
}
.program-card p {
  font-size: 0.95rem;
  margin-bottom: 12px;
}
/* Altersangabe hinter dem Kartentitel - bewusst als eigenes <span> mit
   gedeckterer Farbe statt fett/schwarz wie der Titel selbst, damit sie
   als ergänzende Zusatzinfo wirkt und nicht mit dem Namen konkurriert. */
.program-age {
  font-weight: 500;
  font-size: 0.85em;
  color: var(--color-muted);
}

/* ---------- Nummerierte Schritte (wird an drei Stellen wiederverwendet:
   "Der richtige Weg", die dunkle Alltags-Sektion und "Standorte") ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* einheitlich mit .card-grid/.method-grid/.team-grid - siehe
    Kommentar bei .card-grid weiter oben */
  margin-top: 32px;
  padding-top: 24px; /* einheitlich mit .method-grid (siehe dort) */
  border-top: 1px solid rgba(16, 25, 42, 0.1); /* dünne Trennlinie zum Text
    darüber, statt nur mit Abstand zu arbeiten - gibt der Reihe eine klare
    "Start"-Kante */
}
.steps-grid-dark {
  border-top-color: rgba(255, 255, 255, 0.15);
} /* gleiche
  Trennlinie, aber hell genug für den dunklen Hintergrund */
/* Zeigt ein kleines Icon statt einer reinen Zahl ("01"/"02"/"03") vor jedem
   Schritt in "Der richtige Weg" - ein Icon ist auf den ersten Blick
   erfassbar (Sprechblase = Gespräch, Hantel = Training, Haken = Entscheidung)
   und wirkt hochwertiger als eine nackte Nummer. Als echtes Inline-SVG statt
   Icon-Font/Bild-Datei: kein zusätzlicher Download, überall gestochen
   scharf, und die Farbe läuft einfach über "color" (currentColor im SVG)
   mit, falls sich die Akzentfarbe mal ändert. */
.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(
    193,
    68,
    14,
    0.08
  ); /* leichte Tönung der Akzentfarbe
    --color-kicker als dezenter Hintergrund für das Icon-Kachel */
  color: var(--color-kicker);
  margin-bottom: 14px;
}
.step-icon svg {
  width: 22px;
  height: 22px;
}
.step h3 {
  margin-bottom: 8px;
}
.step p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ---------- Auffällige Karten-Variante von .step ("Der richtige Weg")
   ----------
   Nur für den ersten Schritte-Abschnitt auf der Startseite (die anderen
   beiden Wiederverwendungen von .steps-grid/.step - Standorte und die
   dunkle Alltags-Sektion - bleiben schlicht, siehe deren Markup ohne
   ".step-card"). Dunkler Kartenhintergrund + große Icon-Kachel mit
   überlappendem Nummern-Kreis, angelehnt an ein Referenzbeispiel, das
   uns gezeigt wurde - aber in SOKAIs eigener Farbwelt (Dunkelblau +
   Mint + Kicker-Orange) statt 1:1 kopiert. Dieser Abschnitt beschreibt
   die eigentliche Kundenreise (wie wir jemanden empfangen) und soll
   deshalb optisch deutlich mehr heraussstechen als eine reine Zahl auf
   hellem Grund. */
.step-card {
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  padding: 32px 26px 28px;
}
.step-card h3 {
  color: var(--color-white);
}
.step-card p {
  color: var(--color-muted-on-dark);
}
.step-icon-wrap {
  position: relative; /* Anker für den absolut positionierten Nummern-
    Kreis (.step-badge), der bewusst über die Ecke der Icon-Kachel
    hinausragt statt brav daneben zu stehen - genau dieses Überlappen
    ist der auffällige, "griffige" Effekt aus dem Referenzbeispiel. */
  width: 64px;
  margin-bottom: 20px;
}
.step-card .step-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(
    140,
    230,
    196,
    0.14
  ); /* leichte Mint-Tönung statt der
    Orange-Tönung von .step-icon auf hellem Grund - besser lesbar/
    passender auf dem dunklen Kartenhintergrund */
  color: var(--color-mint);
  margin-bottom: 0; /* der Abstand nach unten sitzt jetzt am umgebenden
    .step-icon-wrap, nicht mehr an der Icon-Kachel selbst */
}
.step-card .step-icon svg {
  width: 30px;
  height: 30px;
}
.step-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-kicker);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
/* Einzelne Karten mit eigenem Hintergrund brauchen keine gemeinsame
   Trennlinie mehr über der ganzen Reihe (siehe .steps-grid weiter oben,
   border-top) - stattdessen spürbarerer Abstand zwischen den Karten. */
/* Einzige der drei .steps-grid-Wiederverwendungen mit einem Element
   danach (der "Probetraining"-Button) - deshalb hier bewusst ein
   eigener margin-bottom, den die anderen beiden (Standorte, dunkle
   Alltags-Sektion) nicht brauchen, weil dort das padding-bottom der
   Sektion selbst schon genug Abstand zum Sektionsende gibt. */
#ueber-uns .steps-grid {
  border-top: none;
  padding-top: 0;
  margin-bottom: 32px;
}

/* ---------- Mint-Banner (Werte + Abschluss-CTA) ----------
   Gleicher senkrechter Abstand (padding) wie .section weiter oben in
   dieser Datei - bewusst NICHT mehr eigene, leicht abweichende Werte
   (früher 56px hier, 72px bei .banner-mint-cta, 96px bei .section-quote
   weiter unten), damit der Rhythmus zwischen den Abschnitten beim
   Scrollen überall gleich wirkt statt an manchen Stellen enger und an
   anderen weiter zu sein. */
.banner-mint {
  background: var(--color-mint);
  color: var(--color-dark);
  padding: 80px 0;
}
.banner-mint-inner {
  display: grid;
  grid-template-columns: auto 1fr; /* Icon | Text-Block (Überschrift,
    Satz, Zitat und die drei Werte-Buttons stehen alle in dieser einen
    Spalte untereinander) */
  gap: 24px 32px;
  align-items: start;
}
.banner-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark);
  color: var(--color-mint);
  border-radius: 50%;
  font-size: 1.1rem;
  margin-top: 4px; /* optischer Ausgleich, damit der Kreis mit der
    Überschrift auf einer Höhe wirkt statt leicht darüber zu schweben */
}
.banner-mint h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0 0 8px;
}
.banner-mint p {
  color: rgba(16, 25, 42, 0.75);
  margin: 0;
  max-width: 52ch;
}

/* Die fünf Werte als Umschalt-Buttons NEBENEINANDER (flex-wrap statt
   einer gestapelten Liste) - auf schmalen Bildschirmen brechen sie
   durch flex-wrap ganz von selbst in mehrere Zeilen um. */
.value-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.value-tab {
  border: none;
  background: rgba(16, 25, 42, 0.08);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.value-tab:hover {
  background: rgba(16, 25, 42, 0.16);
}
/* aria-expanded statt einer eigenen .is-active-Klasse als Stil-Hook -
   der Attribut-Selektor spart eine zusätzliche Klasse, die JS sonst
   parallel zum ARIA-Zustand pflegen müsste (zwei Quellen der Wahrheit
   für denselben Zustand sind eine unnötige Fehlerquelle). */
.value-tab[aria-expanded="true"] {
  background: var(--color-dark);
  color: var(--color-mint);
}

/* Klappt das Erklärungs-/Zitat-Feld nach unten auf bzw. wieder weg -
   exakt dieselbe 0fr/1fr-Grid-Technik wie beim FAQ-Akkordeon weiter
   unten (siehe .accordion-panel für die ausführliche Erklärung des
   Tricks). Eigene Klasse statt Wiederverwendung von .accordion-panel,
   weil hier nur EIN gemeinsames Panel für alle fünf Buttons existiert. */
.value-panel {
  display: grid;
  grid-template-rows: 0fr; /* zugeklappt: keine Höhe */
  transition: grid-template-rows 0.35s var(--ease-smooth);
}
.value-panel.is-open {
  grid-template-rows: 1fr;
} /* aufgeklappt */
/* Zugeklappt bleibt hier real ein winziger Rest von 18px (das eigene
   padding-top) übrig statt echter 0px - "0fr" zwingt nur die freie
   Höhe auf 0, das padding des Kindes zählt separat dazu. Exakt dasselbe
   gilt schon für .accordion-panel weiter unten (dort bleiben 22px vom
   margin-bottom übrig) und ist dort seit Langem unauffällig im Einsatz -
   ein paar Pixel Rest fallen optisch nicht auf, ein eigener Aufwand nur
   für echte 0px würde hier nicht lohnen. */
.value-panel-inner {
  overflow: hidden;
  padding-top: 18px;
}
.value-panel-inner p {
  margin: 0;
}
/* Zitat einer Kampfsport-Persönlichkeit, die zum gerade gewählten Wert
   passt - kursiv und etwas gedeckter als der Erklärsatz darüber, damit
   klar ist, dass es sich um ein fremdes Zitat und nicht um eigenen
   Website-Text handelt. Der Selektor ".value-panel-inner .value-quote"
   statt nur ".value-quote" ist bewusst gewählt: er ist genauso
   spezifisch wie ".value-panel-inner p" darüber und gewinnt dadurch in
   der Kaskade ganz regulär, ohne dass es hier ein !important bräuchte. */
.value-panel-inner .value-quote {
  margin-top: 8px;
  font-style: italic;
}

.banner-mint-cta {
  padding: 80px 0;
} /* gleicher Wert wie .section/.banner-mint - siehe Kommentar dort */
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-inner h2 {
  margin: 0;
}

/* ---------- Trainingsmethode ---------- */
.method-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* Text minimal breiter als das Bild,
    weil dort auch das 3er-Grid mit den Mini-Themen sitzt */
  gap: 56px;
  align-items: center;
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* einheitlich mit .card-grid/.steps-grid/.team-grid */
  margin-top: 32px;
  padding-top: 24px; /* einheitlich mit .steps-grid weiter oben (der
    gleiche "Trennlinie vor der Kartenreihe"-Aufbau, jetzt mit demselben
    Abstand statt vorher 20px hier / 28px dort) */
  border-top: 1px solid rgba(16, 25, 42, 0.1);
}
.method-grid p {
  font-size: 0.92rem;
  margin: 0;
}
.method-media {
  aspect-ratio: 4 / 5;
  /* Bild sitzt rechts, Text links, Abschnitt ist weiß -> der Schleier
     blendet Weiß von der linken Bildkante her ein (Richtung "to right":
     die Verlaufsfarbe startet links). */
  --fade-color: var(--color-white);
  --fade-angle: to right;
}

/* ---------- Trainingsplan (Filter + Tabelle) ---------- */
.plan-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 40px;
}
.plan-header h2 {
  text-align: right;
  margin: 0;
} /* im Referenz-Design steht
  die Überschrift hier bewusst rechtsbündig, während der Beschreibungstext
  links steht - ein kleiner asymmetrischer Kontrast zu den sonst eher
  linksbündigen Abschnitten */

.plan-filter {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto; /* drei gleich breite Auswahl-
    felder, der Button daneben bekommt nur so viel Platz wie er braucht */
  gap: 16px;
  align-items: end; /* Button und Auswahlfelder unten bündig, auch wenn die
    Labels über den Feldern die Höhe leicht verändern */
  background: var(--color-cream-soft);
  padding: 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 32px;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-field label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.filter-field select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(16, 25, 42, 0.15);
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--color-white);
}

.table-wrap {
  overflow-x: auto;
} /* falls die Tabelle auf sehr schmalen
  Bildschirmen trotzdem breiter ist als der Bildschirm, bekommt NUR die
  Tabelle einen eigenen horizontalen Scrollbalken - nie die ganze Seite */
.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.plan-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(16, 25, 42, 0.12);
}
.plan-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 25, 42, 0.08);
}
/* Dezentes Hervorheben der Zeile unter dem Mauszeiger - macht eine
   Tabelle mit mehreren Zeilen deutlich leichter überblickbar und ist ein
   Detail, das man an "durchdachten" Websites eher findet als an
   Baukasten-Vorlagen. */
.plan-table tbody tr {
  transition: background-color 0.15s ease;
}
.plan-table tbody tr:hover {
  background-color: var(--color-cream-soft);
}
.table-empty {
  text-align: center;
  padding: 24px 0 0;
} /* wird per JS ein-
  geblendet, wenn der Filter keine passende Zeile findet, siehe script.js */

/* ---------- Flaggschiff-Programm (Kickboxen & K1) ---------- */
.flagship-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.flagship-media {
  aspect-ratio: 4 / 3;
  /* Hier ist es umgekehrt: Bild sitzt links, Text rechts, Abschnitt ist
     Creme -> der Schleier muss von der RECHTEN Bildkante her einblenden
     ("to left": die Verlaufsfarbe startet rechts). */
  --fade-color: var(--color-cream-soft);
  --fade-angle: to left;
}

/* ---------- Dunkles Zitat/Statement ---------- */
.section-quote {
  padding: 80px 0;
} /* gleicher Wert wie .section/.banner-mint
  (früher bewusst 96px extra Weißraum, aber genau diese Abweichung vom
  sonstigen Rhythmus wurde zurecht als unstimmig empfunden) */
.quote-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: end; /* Überschrift und Begleittext enden auf gleicher
    Grundlinie, auch wenn die Überschrift mehrzeilig ist */
}
.section-quote h2 {
  margin: 0;
}

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px; /* einheitlich mit .card-grid/.steps-grid/.method-grid
    (vorher 40px) */
}
.team-photo {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 auto 16px;
  width: 84%;
}
.team-member {
  text-align: center;
}
.team-member h4 {
  margin-bottom: 4px;
}
.team-member p {
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Vertrauens-Stichpunkte (kurze Häkchen-Zeile, z.B. direkt unter
   einem Hero-Text) - wird auf den vier SoKai-Academy-Landingpages
   verwendet, um schon vor dem Scrollen ein, zwei handfeste Fakten zu
   zeigen (kostenlose erste Einheit, kleine Gruppen, ...). Eine <ul> statt
   <p>-Text mit Trennzeichen, weil es inhaltlich wirklich eine Liste
   einzelner Fakten ist - kommt so auch bei Screenreadern richtig an. */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.trust-row li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.trust-row li span[aria-hidden] {
  color: var(--color-kicker);
}
/* Variante für dunkle Abschnitte (siehe die neue Risikoumkehr-Sektion
   auf den vier SoKai-Academy-Landingpages, kurz vor dem Schluss-Banner):
   heller statt gedeckter Text, Häkchen in Mint statt Kicker-Orange, weil
   Orange auf Dunkelblau kaum Kontrast hätte. Gleiche Klasse, nur die
   Farben werden überschrieben - keine Struktur-Duplizierung nötig. */
.trust-row--on-dark {
  color: rgba(255, 255, 255, 0.82);
  justify-content: center;
}
.trust-row--on-dark li span[aria-hidden] {
  color: var(--color-mint);
}

/* ---------- Zentrierter Textblock (z.B. die neue Risikoumkehr-Sektion) ----------
   .trust-row zentriert sich über justify-content selbst (siehe die
   --on-dark-Variante oben); hier geht es nur um Überschrift/Absatz
   darüber, die sonst standardmäßig linksbündig wären. */
.section-centered {
  text-align: center;
}
.section-centered .section-copy {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Erwartungs-Karten (früher: Testimonial-Karten) ----------
   WICHTIG: Hier standen zuvor frei erfundene Zitate mit erfundenen
   Eltern-/Kunden-Namen ("Julia, Mutter von Mia" usw.) - das sind keine
   echten, eingeholten Rückmeldungen, sondern Platzhaltertext gewesen.
   Erfundene Kundenstimmen als echte Zitate auszugeben ist irreführende
   Werbung (und in Deutschland auch rechtlich riskant, siehe UWG) - genau
   das wurde zurecht bemängelt, solange wir noch keine echten Bewertungen
   haben. Deshalb jetzt bewusst UMGEBAUT: gleiche Karten-Optik (Hintergrund,
   Radius, Schatten), aber der Text beschreibt ehrlich, WAS im Training
   passiert bzw. WAS du/dein Kind mitnimmst - ohne Zitatzeichen, ohne
   erfundenen Namen als Autor. Sobald es echte, eingeholte Bewertungen
   gibt, können die hier eins zu eins rein (Struktur bleibt gleich). */
.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.expect-card {
  background: var(--color-cream-soft);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.expect-text {
  font-size: 1rem;
  margin: 0 0 16px;
}
.expect-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
  margin: 0;
}

/* ---------- FAQ / Accordion ----------
   Die Öffnen/Schließen-Animation läuft komplett über CSS
   (grid-template-rows von 0fr auf 1fr) - JavaScript setzt nur die Klasse
   "is-open" an- bzw. aus. Der Trick mit 0fr/1fr auf einer Grid-Zeile ist
   der sauberste Weg, eine Höhe "auto" weich zu animieren; mit reinem
   "height" ginge das nicht ohne die genaue Pixel-Höhe vorher zu kennen. */
.accordion {
  margin-top: 40px;
  border-top: 1px solid rgba(16, 25, 42, 0.1);
}
.accordion-item {
  border-bottom: 1px solid rgba(16, 25, 42, 0.1);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 24px 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}
.accordion-icon {
  flex-shrink: 0; /* darf nicht schrumpfen, auch wenn die Frage lang ist
    und über zwei Zeilen geht */
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-cream-soft);
  font-weight: 700;
  transition: transform 0.2s ease;
}
/* Sobald der Button aria-expanded="true" hat (wird per JS gesetzt), dreht
   sich das Plus-Zeichen um 45° und wird optisch zu einem "X" (= schließen). */
.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr; /* zugeklappt: keine Höhe */
  transition: grid-template-rows 0.35s var(--ease-smooth);
}
.accordion-panel > p {
  overflow: hidden;
  margin: 0 0 22px;
  padding-right: 44px;
}
.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
} /* aufgeklappt */

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark);
  color: var(--color-muted-on-dark);
  padding: 64px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr; /* Marken-Spalte etwas breiter
    als die drei Link-Spalten daneben */
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo-footer {
  color: var(--color-white);
  margin-bottom: 12px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col h5 {
  color: var(--color-white);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}
.footer-col a {
  font-size: 0.9rem;
}
.footer-col a:hover {
  color: var(--color-white);
}
.footer-bottom {
  padding: 24px 0;
  font-size: 0.82rem;
}

/* ---------- Rechtstexte (Impressum, Datenschutz, AGB) ----------
   Reiner Fließtext statt Karten/Grids - eine ruhige, gut lesbare
   Spalte reicht hier völlig aus. list-style ist global auf "none"
   zurückgesetzt (siehe Reset weiter oben), für echte Aufzählungen in
   Rechtstexten aber ausdrücklich gewünscht - deshalb hier gezielt
   wieder aktiviert. */
.legal-content {
  max-width: 68ch;
  margin-top: 8px;
}
.legal-content h2 {
  font-size: 1.4rem;
  margin-top: 2em;
}
.legal-content h2:first-of-type {
  margin-top: 1.2em;
}
.legal-content h3 {
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}
.legal-content ul {
  list-style: disc;
  padding-left: 1.3em;
  margin: 0 0 1em;
}
.legal-content li {
  margin-bottom: 0.4em;
  color: var(--color-muted);
}
.legal-content a {
  text-decoration: underline;
}
.legal-content .legal-updated {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: -8px;
}

/* Warnhinweis-Kasten oben auf jeder Rechtstext-Seite: macht sofort
   sichtbar (nicht nur im Quellcode-Kommentar), dass der Text ein
   Platzhalter-Entwurf ist und keine rechtssichere Fassung. Linker
   Akzentstreifen in der Kicker-Farbe statt einer kompletten Kasten-
   Umrandung - dezent, aber eindeutig als "Achtung" lesbar. */
.legal-notice {
  border-left: 3px solid var(--color-kicker);
  background: var(--color-cream-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  margin: 28px 0 0;
  max-width: 68ch;
  font-size: 0.9rem;
}
.legal-notice strong {
  color: var(--color-kicker);
}

/* E-Mail/Telefon in der Marken-Spalte des Footers - etwas Abstand zur
   Adresse darüber, sonst würde alles wie ein einziger Textblock wirken. */
.footer-contact {
  margin-top: 12px;
}
.footer-contact a:hover {
  color: var(--color-white);
}

/* Social-Media-Zeile: bewusst als einfache Textlinks statt Icons - kein
   zusätzliches Icon-Set nötig, und die Links sind ohnehin nur Platzhalter
   (href="#"), bis die echten Profile existieren. */
.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
}
.footer-social a:hover {
  color: var(--color-white);
}

/* ==========================================================
   Responsive Anpassungen
   ==========================================================
   Mobile-First wäre die "modernere" Variante (erst für schmal schreiben,
   dann mit min-width nach oben erweitern). Hier wurde bewusst der
   umgekehrte Weg gewählt (Desktop-Layout zuerst, dann mit max-width
   herunterbrechen), weil das Referenz-Design ein Desktop-Screenshot war
   und es so leichter nachvollziehbar bleibt, was sich ab wann ändert.
   ========================================================== */

/* Tablet-Bereich: die großen Zwei-Spalten-Layouts werden zu einer Spalte,
   vierspaltige Grids schrumpfen auf zwei Spalten. */
@media (max-width: 960px) {
  .hero-inner,
  .method-inner,
  .flagship-inner,
  .quote-inner,
  .plan-header {
    grid-template-columns: 1fr;
  }
  .plan-header h2 {
    text-align: left;
  } /* rechtsbündig macht in einspaltigem
    Layout keinen Sinn mehr */

  /* Der Full-Bleed-Effekt (Bild bis zum Bildschirmrand) macht auf
     schmalen Bildschirmen keinen Sinn mehr, wenn Text und Bild ohnehin
     übereinander statt nebeneinander stehen - hier also wieder ein
     normales, ruhig fließendes Bild mit festem Seitenverhältnis, wie
     ursprünglich, statt der absolut positionierten Desktop-Variante. */
  .hero-inner {
    min-height: auto;
  }
  .hero-text {
    padding: 40px 24px;
  }
  .hero-media {
    height: auto;
    min-height: 0;
    margin-top: 8px;
  }
  .hero-media-main {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    aspect-ratio: 4 / 5;
  }
  .hero-media-small {
    left: -24px;
    bottom: -32px;
    width: 45%;
    max-width: 220px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .method-grid {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .expect-grid {
    grid-template-columns: 1fr;
  }
  .plan-filter {
    grid-template-columns: 1fr 1fr;
  }
  .banner-mint-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  /* Die breite Zwei-Spalten-Ansicht des Probetraining-Popups braucht ab
     hier mehr Platz, als noch verfügbar ist - die Info-Spalte links
     wird stattdessen ausgeblendet (rein informativ/Vertrauensaufbau,
     fürs Ausfüllen selbst nicht notwendig) und das Formular bekommt
     die volle Breite der Karte. */
  .probe-modal {
    grid-template-columns: 1fr;
  }
  .probe-modal-aside {
    display: none;
  }
  .probe-modal-main {
    padding: 28px 24px;
  }
  .probe-modal-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Handy-Bereich: Hauptnavigation wird zum Hamburger-Menü, alle Grids
   werden einspaltig, generell etwas weniger Innenabstand pro Sektion. */
@media (max-width: 720px) {
  .main-nav {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  /* Diese Klasse wird per JavaScript (siehe initMobileNav() in script.js)
     auf den Header gesetzt, sobald der Hamburger-Button geklickt wird. */
  .site-header.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    padding: 16px 24px 24px;
    gap: 16px;
    border-bottom: 1px solid rgba(16, 25, 42, 0.08);
  }
  .card-grid {
    grid-template-columns: 1fr;
  }
  .plan-filter {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  /* Gruppiert, damit .banner-mint/.banner-mint-cta/.section-quote auf
     Mobil exakt denselben Rhythmus behalten wie .section - siehe die
     Kommentare bei ihren jeweiligen Grundregeln weiter oben. */
  .section,
  .banner-mint,
  .banner-mint-cta,
  .section-quote {
    padding: 10px 0;
  }

  /* Auf dem Handy soll die Karte nicht mehr als schwebendes "fixed"-
     Element über dem Inhalt liegen (das wurde als störend empfunden),
     sondern ein ganz normaler Teil der Seite sein - direkt unter dem
     ersten großen Bild (siehe index.html: die Karte steht dort jetzt
     direkt NACH dem Hero-Abschnitt, nicht mehr davor), von Anfang an
     sichtbar, ohne dass man extra draufklicken muss. "position: static"
     holt sie deshalb aus der Fixierung heraus und lässt sie stattdessen
     genau dort erscheinen, wo sie im HTML auch steht. max-height/
     overflow-y werden nicht mehr gebraucht, weil sie nicht mehr in ein
     enges schwebendes Fenster gepresst wird, sondern ganz normal mit der
     restlichen Seite mitwächst. Der seitliche Abstand (24px) ist bewusst
     genau der gleiche wie das linke/rechte Innenpolster von .container
     weiter oben in dieser Datei - dadurch fluchtet die Karte optisch mit
     jedem anderen Abschnitt auf der Seite, statt schief/eingerückt zu
     wirken, und wirkt dadurch mittig statt an den Rand gequetscht. */
  .probe-widget {
    position: relative; /* WICHTIG: .probe-widget-close ist "position:
      absolute" und braucht dafür einen positionierten Elternrahmen -
      "static" würde den Schließen-Button sonst aus der Karte heraus an
      eine falsche Stelle springen lassen. "relative" verhält sich sonst
      genau wie "static" (kein Herausnehmen aus dem normalen Textfluss) -
      ABER anders als "static" reagiert "relative" weiterhin auf
      top/right/bottom/left! Die Desktop-Grundregel weiter oben setzt
      "top: 110px; right: 24px" (für die schwebende Karte dort) - ohne
      die folgenden zwei Zeilen würde das hier eine unsichtbare, aber
      wirksame Verschiebung um 110px nach unten verursachen und genau
      die große Lücke zwischen Hero-Bild und Karte erzeugen, die
      gemeldet wurde. Deshalb hier ausdrücklich zurücksetzen. */
    top: auto;
    right: auto;
    width: auto;
    max-height: none;
    overflow-y: visible;
    margin: 24px 24px 32px;
    padding: 20px;
    background: var(--color-cream-soft);
    backdrop-filter: none; /* kein Weichzeichner-Effekt nötig, wenn nichts
      mehr darunter durchscheinen muss */
    -webkit-backdrop-filter: none;
  }
  .probe-modal-controls {
    top: 12px;
    right: 12px;
  }
  .probe-modal-main {
    padding: 24px 20px;
  }
  .hero-form-title {
    font-size: 1.3rem;
  }

  /* Gleiche Umstellung wie bei .probe-widget oben: kein schwebender
     Button mehr, sondern derselbe Platz im normalen Seitenfluss, an dem
     sonst die Karte stehen würde - taucht dort nur auf, wenn die Karte
     per ×-Button geschlossen wurde. Absichtlich WENIGER Abstand nach
     unten als bei der vollen Karte (24px statt 32px): der schmale Button
     füllt sichtbar viel weniger Fläche als die Karte, mit demselben
     großzügigen Abstand wie dort wirkte die Lücke darunter unverhältnis-
     mäßig groß/leer - genau das wurde gemeldet. */
  .probe-widget-reopen {
    position: static;
    display: flex;
    width: auto;
    justify-content: center;
    margin: 24px 24px 24px;
  }
}

/* Ab Tablet-Breite aufwärts genug Platz für den dekorativen vertikalen
   Schriftzug rechts im Hero (siehe .hero-vertical-label weiter oben) -
   auf schmaleren Bildschirmen bleibt er ausgeblendet. */
@media (min-width: 960px) {
  .hero-vertical-label {
    display: block;
  }
}