/* =========================================================================
   GONGAUSBILDUNG.DE — Design System
   Basis: Alexander J. Renner Design System (tokens.css, CD-Ordner)
   Entscheidungen Alexander 18.07.2026:
   Gold #d19947 als Akzent/CTA · Text #262626 · Grund Weiss/Papier (kein Sand
   als Seitengrund) · Syntax LT Pro self-hosted · Ethos: Linie statt Schatten,
   Eyebrow statt Icon, Kante statt Glow. Editorial, hell, reduziert.
   Layout-Finalisierung 19.07.2026: editorial verzahnt (Aman/The Row/Lanserhof),
   asymmetrische Raster, Formatvielfalt, Full-Width-Baender raus.
   ========================================================================= */

@font-face {
  font-family: "Syntax LT Pro";
  src: url("../fonts/SyntaxLTPro-Roman.woff2") format("woff2"),
       url("../fonts/SyntaxLTPro-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syntax LT Pro";
  src: url("../fonts/SyntaxLTPro-Bold.woff2") format("woff2"),
       url("../fonts/SyntaxLTPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben (CD Alexander J. Renner, fixiert 18.07.2026) */
  --gold:        #d19947;
  --gold-deep:   #b07e30;
  --gold-soft:   #e6c086;
  --gold-tint:   #f3e6cf;
  --bordeaux:    #701512;
  --bordeaux-ink:#4a0d0b;
  --ink:         #262626;
  --ink-soft:    #6e6862;
  --black:       #141311;
  --paper:       #faf4ea;
  --sand:        #f6eadb;
  --white:       #ffffff;

  --rule:        rgba(38, 38, 38, 0.14);
  --rule-strong: rgba(38, 38, 38, 0.34);
  --rule-dark:   rgba(230, 192, 134, 0.28);

  /* Typo */
  --font: "Syntax LT Pro", "Optima", "Gill Sans", system-ui, sans-serif;
  --fs-display: clamp(3.2rem, 8.2vw, 8.25rem);
  --fs-d2:      clamp(2.2rem, 4.6vw, 4rem);
  --fs-h2:      clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3:      clamp(1.35rem, 2vw, 1.75rem);
  --fs-lede:    clamp(1.15rem, 1.5vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-small:   1.05rem;   /* 40+ Zielgruppe: kleine Schrift bewusst groesser (war 0.875) */
  --fs-micro:   0.8rem;

  /* Raum */
  --gutter: clamp(24px, 5vw, 72px);
  --maxw:   1440px;
  --sec:    clamp(96px, 11vw, 176px);
  --sec-s:  clamp(64px, 7vw, 112px);

  --ease: cubic-bezier(0.22, 0.61, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
figure { margin: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--bordeaux); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }

::selection { background: var(--gold-soft); color: var(--black); }

.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typo-Bausteine ---------- */
.eyebrow {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.display {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.display .shift { display: block; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink);
}

.muted { color: var(--ink-soft); }

/* Feine Serviette-Zeile unter CTAs (Trust/Hinweis) */
.microline { font-size: var(--fs-micro); letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 16px; }
.lead-in .microline { font-size: calc(var(--fs-micro) * 1.4); color: var(--ink); margin-top: 22px; }
.feature .microline { font-size: calc(var(--fs-micro) * 1.3); color: var(--ink); margin-top: 22px; }

/* ---------- Buttons (CD: eckig, Farb-Swap, kein Schatten) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 3px;
  border: 1.5px solid transparent;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
  cursor: pointer;
}
.btn--gold { background: var(--gold); color: var(--black); }
.btn--gold:hover { background: var(--gold-deep); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.btn--ghost-dark { background: transparent; color: var(--gold-soft); border-color: var(--rule-dark); }
.btn--ghost-dark:hover { border-color: var(--gold); background: var(--gold); color: var(--black); }
.btn--bordeaux { background: var(--bordeaux); color: #fff; }
.btn--bordeaux:hover { background: var(--bordeaux-ink); color: #fff; }

.textlink {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bordeaux);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 3px;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.textlink:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.textlink .arr { transition: transform 0.2s var(--ease); }
.textlink:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.site-head.scrolled { border-bottom-color: var(--rule); }

.site-head__row {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 88px;
}

/* Wort-Bild-Marke: gjr-Monogramm + Wortmarke */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { height: 50px; width: auto; flex: 0 0 auto; display: block; }
.brand__wm { display: flex; flex-direction: column; line-height: 1.14; }
.brand__wm strong {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.brand__wm span {
  font-size: 0.825rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.site-nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
/* Fuenf Menuepunkte plus Button: unter 1440px wird der Abstand enger,
   damit die Beschriftungen einzeilig bleiben. */
@media (min-width: 1300px) and (max-width: 1440px) {
  .site-nav { gap: 16px; }
}
.site-nav a {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
/* Ohne nowrap brechen die langen Punkte zweizeilig und der Pfeil rutscht allein
   in die zweite Zeile. Der Burger uebernimmt, bevor es dazu kommt. */
.site-nav > a,
.site-nav > .nav-drop > a { white-space: nowrap; }
.site-nav a:hover { border-bottom-color: var(--gold); color: var(--gold-deep); }
/* Standort im Menue sichtbar machen, nicht nur fuer Screenreader. */
.site-nav > a[aria-current="page"],
.site-nav > .nav-drop > a[aria-current="page"] { color: var(--gold-deep); border-bottom-color: var(--gold); }
.site-nav .btn { padding: 11px 20px; border-bottom: 0; }
.site-nav .btn:hover { border-bottom: 1.5px solid transparent; }

/* Dropdown fuer Menuepunkte mit Unterseiten (Gong Trainings, Online Gong Trainings) */
.nav-drop { position: relative; display: flex; align-items: center; }
/* Der Pfeil ist ein CSS-Dreieck, kein Schriftzeichen: Syntax LT Pro hat kein ▾ und
   der Browser zeigte ein Ersatzglyph. Gezeichnet wird auf ::after, damit ein
   Textinhalt im span nichts danebensetzen kann. */
.nav-drop__arrow {
  display: inline-flex; align-items: center; margin-left: 8px;
  font-size: 0; line-height: 0;
  transition: transform 0.16s var(--ease);
}
.nav-drop__arrow::after {
  content: ""; display: block;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
}
.nav-drop:hover .nav-drop__arrow,
.nav-drop:focus-within .nav-drop__arrow { transform: rotate(180deg); }
.nav-drop__menu {
  position: absolute; top: 100%; left: 50%;
  margin: 0; padding: 10px 0; min-width: 260px; list-style: none;
  background: var(--white); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(20,19,17,.16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
  z-index: 40;
}
.nav-drop:hover .nav-drop__menu,
.nav-drop:focus-within .nav-drop__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
/* Leseschrift, nicht Menue-Kapitaelchen: 16,8px in Roman 400, dieselbe Groesse wie
   die Footer-Links. Syntax LT Pro hat nur 400 und 700, das vorherige 600 hat der
   Browser selbst verfettet, daher die seltsamen Buchstabenformen. */
.site-nav .nav-drop__menu a {
  display: block; padding: 11px 26px; font-size: 1.05rem; font-weight: 400;
  line-height: 1.35; letter-spacing: normal; text-transform: none;
  color: var(--ink); text-decoration: none;
  border-bottom: 0; white-space: nowrap;
}
.site-nav .nav-drop__menu a:hover { color: var(--gold-deep); background: var(--gold-tint); }

/* Overlay-Header: liegt transparent ueber dem Vollbild-Hero, wird beim Scrollen hell */
.site-head--overlay { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; }
.site-head--overlay .brand__wm strong { color: #fff; }
.site-head--overlay .brand__wm span { color: rgba(255,255,255,.82); }
/* Lesbarkeit ueber hellen Stellen des Hero-Bildes, gleiche Technik wie .hero__eyebrow */
.site-head--overlay .brand__wm strong,
.site-head--overlay .brand__wm span,
.site-head--overlay .site-nav > a,
.site-head--overlay .site-nav > .nav-drop > a { text-shadow: 0 1px 14px rgba(8,7,6,0.55); }
.site-head--overlay .site-nav > a,
.site-head--overlay .site-nav > .nav-drop > a { color: #fff; }
.site-head--overlay .site-nav > a:hover,
.site-head--overlay .site-nav > .nav-drop > a:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.site-head--overlay .nav-toggle span { background: #fff; }
.site-head--overlay.scrolled { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom-color: var(--rule); }
.site-head--overlay.scrolled .brand__wm strong,
.site-head--overlay.scrolled .brand__wm span,
.site-head--overlay.scrolled .site-nav > a,
.site-head--overlay.scrolled .site-nav > .nav-drop > a { text-shadow: none; }
.site-head--overlay.scrolled .brand__wm strong { color: var(--ink); }
.site-head--overlay.scrolled .brand__wm span { color: var(--ink-soft); }
.site-head--overlay.scrolled .site-nav > a,
.site-head--overlay.scrolled .site-nav > .nav-drop > a { color: var(--ink); }
.site-head--overlay.scrolled .site-nav > a:hover,
.site-head--overlay.scrolled .site-nav > .nav-drop > a:hover { color: var(--gold-deep); }
/* Das Dropdown-Panel liegt immer auf weissem Grund, unabhaengig vom Header-Zustand:
   seine Links bleiben deshalb immer dunkel, nie weiss wie die Overlay-Nav. */
.site-head--overlay .site-nav .nav-drop__menu a,
.site-head--overlay.scrolled .site-nav .nav-drop__menu a { color: var(--ink); text-shadow: none; }
.site-head--overlay .site-nav .nav-drop__menu a:hover,
.site-head--overlay.scrolled .site-nav .nav-drop__menu a:hover { color: var(--gold-deep); background: var(--gold-tint); }
.site-head--overlay.scrolled .nav-toggle span { background: var(--ink); }
/* Der Gold-CTA im Overlay bleibt gold, egal ob gescrollt */
.site-head--overlay .site-nav .btn--gold { color: var(--black); }
/* Ohne diese Regeln uebernahmen die allgemeinen Hover-Farben der Overlay-Nav (gold-soft bzw. gold-deep)
   auch den CTA-Button, dessen Hover-Hintergrund selbst gold-deep ist: Text und Hintergrund wurden
   gleichfarbig, die Schrift verschwand sichtbar. Hoehere Spezifitaet erzwingt hier wieder Weiss. */
.site-head--overlay .site-nav .btn--gold:hover,
.site-head--overlay.scrolled .site-nav .btn--gold:hover { color: var(--white); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }

/* ---------- Hero (Vollbild, Headline liegt im Bild) ---------- */
.hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  /* Reserve fuer den fest stehenden Seitenkopf. Wirkt nur, wenn der Inhalt
     hoeher ist als der Bildschirm, also auf kurzen Displays (iPhone SE).
     Ohne sie legt sich der Kopf ueber die erste Hero-Zeile. */
  padding-top: clamp(76px, 9vw, 104px);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
  z-index: -2; filter: brightness(0.97) saturate(1);
}
/* bewegter Wald-Loop liegt ueber dem Standbild-Fallback (kein poster: object-fit greift so in jedem Browser) */
.hero__vid { z-index: -2; background: transparent; }
.hero__img--fallback { z-index: -3; }
@media (prefers-reduced-motion: reduce) {
  .hero__vid { display: none; }
}
/* gerichteter Scrim: links + unten dunkel (Textzone), Mitte + rechts frei (Bild) */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20,19,17,0.64) 0%, rgba(20,19,17,0.34) 30%, rgba(20,19,17,0) 60%),
    linear-gradient(0deg, rgba(20,19,17,0.78) 0%, rgba(20,19,17,0.12) 46%, rgba(20,19,17,0) 64%),
    linear-gradient(180deg, rgba(20,19,17,0.56) 0%, rgba(20,19,17,0) 21%);
}
.hero__foot { width: 100%; padding-bottom: clamp(48px, 6vw, 104px); color: #fff; }
.hero__eyebrow {
  font-size: calc(var(--fs-micro) * 1.2); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: clamp(18px, 2vw, 26px);
  text-shadow: 0 1px 16px rgba(8,7,6,0.5);
}
.hero__title { color: #fff; text-shadow: 0 1px 30px rgba(8,7,6,0.5); }
.hero__title .shift { display: block; }
.hero__lede {
  color: rgba(255,255,255,0.94); max-width: 46ch; margin-top: 24px;
  font-size: var(--fs-lede); line-height: 1.5;
  text-shadow: 0 1px 18px rgba(8,7,6,0.45);
}
.hero__actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.hero__actions .textlink { color: #fff; border-color: rgba(255,255,255,0.4); }
.hero__actions .textlink:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.hero__actions .textlink .arr { color: var(--gold-soft); }
.hero__meta {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.26);
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}
.hero__meta span {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}

/* ---------- Manifest (Text links, versetztes Hochformat rechts) ---------- */
.manifest { padding-block: var(--sec); }
.manifest__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.manifest__text { grid-column: 1 / 8; }
.manifest__text .eyebrow { margin-bottom: clamp(24px, 3vw, 38px); }
.manifest__text > p {
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.manifest__text .accent { color: var(--bordeaux); }
.manifest__foot {
  margin-top: clamp(30px, 3.5vw, 48px);
  display: flex;
  gap: clamp(24px, 3vw, 56px);
  flex-wrap: wrap;
}
.manifest__foot div { border-top: 1px solid var(--rule); padding-top: 14px; min-width: 140px; }
.manifest__foot strong { display: block; font-size: 1.75rem; font-weight: 400; letter-spacing: -0.02em; }
.manifest__foot small { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

.manifest__media { grid-column: 9 / 13; }
.manifest__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.manifest__media figcaption {
  margin-top: 14px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- 1:1 im Fokus (grosses Hochformat + Fakten) ---------- */
.lead-in { background: var(--paper); padding-block: var(--sec); }
.lead-in__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.lead-in__media { grid-column: 1 / 7; }
.lead-in__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.lead-in__body { grid-column: 7 / 13; }
.lead-in__body .eyebrow { margin-bottom: 20px; }
.lead-in__body h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; margin-bottom: 22px; }
.lead-in__body .lede { color: var(--ink); max-width: 46ch; }
.lead-in__cta { margin-top: 36px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ---------- Fakten-Zeilen (geteilt: lead-in + feature) ---------- */
.facts { list-style: none; margin: 34px 0 0; padding: 0; }
.facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-body);
}
.facts li:last-child { border-bottom: 1px solid var(--rule); }
.facts .k { color: var(--ink-soft); font-size: var(--fs-small); }
.facts .v { font-weight: 700; text-align: right; }
.facts .v.gold { color: var(--gold-deep); }

/* ---------- Editoriale Bildkomposition (Diptychon, ersetzt die Full-Width-Baender) ---------- */
.duo { padding-block: var(--sec); }
.duo__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.duo__tall { grid-column: 1 / 5; }
.duo__tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duo__aside { grid-column: 5 / 8; align-self: center; }
.duo__aside .eyebrow { margin-bottom: 18px; }
.duo__aside p { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.duo__wide { grid-column: 8 / 13; margin-top: clamp(48px, 8vw, 128px); }
.duo__wide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.duo__wide figcaption {
  margin-top: 14px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- Feature-Split (Online-Kurs, Zickzack) ---------- */
.feature { padding-block: var(--sec); }
.feature--flip { background: var(--paper); }
.feature__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.feature__body { grid-column: 1 / 7; }
.feature__media { grid-column: 8 / 13; }
.feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature__body .eyebrow { margin-bottom: 20px; }
.feature__body h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; margin-bottom: 22px; }
.feature__body .lede { max-width: 46ch; }
.feature__cta { margin-top: 36px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
/* --flip: Bild links, Text rechts */
.feature--flip .feature__body { grid-column: 7 / 13; order: 2; }
.feature--flip .feature__media { grid-column: 1 / 6; order: 1; }

/* ---------- Präsenz-Formate (Zeilen mit Thumbnail) ---------- */
.formats { padding-block: var(--sec); }
.formats__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.formats__intro { grid-column: 1 / 4; }
.formats__intro .eyebrow { margin-bottom: 16px; }
.formats__intro h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.formats__intro p { margin-top: 18px; color: var(--ink-soft); max-width: 30ch; }

.formats__list { grid-column: 4 / 13; list-style: none; margin: 0; padding: 0; }

.frow {
  display: grid;
  grid-template-columns: clamp(124px, 15vw, 180px) 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 0.25s var(--ease);
}
.formats__list li:last-child .frow { border-bottom: 1px solid var(--rule); }
.frow:hover { padding-left: 10px; color: var(--ink); }
.frow__thumb { aspect-ratio: 16 / 11; overflow: hidden; }
.frow__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.frow:hover .frow__thumb img { transform: scale(1.04); }

.frow__body h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; font-weight: 700; }
.frow__body p { margin-top: 6px; color: var(--ink-soft); font-size: var(--fs-small); max-width: 52ch; }

.frow__meta {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.frow__meta .arr { color: var(--gold-deep); font-size: 1.1rem; transition: transform 0.25s var(--ease); }
.frow:hover .frow__meta .arr { transform: translateX(5px); }

/* ---------- Trainer ---------- */
.trainer { padding-block: var(--sec); }
.trainer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.trainer__media { grid-column: 1 / 6; }
.trainer__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.trainer__body { grid-column: 7 / 13; }
.trainer__body h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; margin: 16px 0 22px; }
.trainer__body p { max-width: 52ch; margin-bottom: 16px; }
.trainer__sig {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.trainer__sig span { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Stimmen ---------- */
.voices { background: var(--paper); padding-block: var(--sec); }
.voices__head { margin-bottom: clamp(40px, 5vw, 72px); }
.voices__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(36px, 5vw, 96px);
  align-items: start;
}
.quote { border-top: 1px solid var(--rule); padding-top: 26px; }
.quote--lead blockquote {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 26ch;
}
.quote blockquote { font-size: var(--fs-lede); line-height: 1.5; margin: 0 0 18px; }
.quote .mark { color: var(--gold); font-size: 3rem; line-height: 0.4; display: block; margin-bottom: 18px; font-weight: 700; }
.quote cite {
  font-style: normal;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.quote + .quote { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- Free / Funnel (dunkler Anker, Abend-Motiv als Grund) ---------- */
.free { position: relative; overflow: hidden; background: var(--black); color: var(--paper); padding-block: var(--sec); }
.free::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../img/free-abend.webp") center/cover no-repeat;
  opacity: 0.5; filter: saturate(0.92);
}
.free::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20,19,17,0.94) 0%, rgba(20,19,17,0.74) 52%, rgba(20,19,17,0.48) 100%);
}
.free__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.free__body { grid-column: 1 / 9; }
.free__body .eyebrow { color: var(--gold); }
.free__body h2 {
  color: var(--paper);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 20px 0 24px;
}
.free__body p { color: rgba(250, 244, 234, 0.82); max-width: 50ch; font-size: var(--fs-lede); line-height: 1.55; }
.free__actions { margin-top: 40px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.free__note { grid-column: 10 / 13; align-self: end; }
.free__note p { font-size: calc(var(--fs-small) * 1.3); color: rgba(250, 244, 234, 0.86); border-top: 1px solid var(--rule-dark); padding-top: 16px; }

/* ---------- Footer ---------- */
.site-foot { background: var(--black); color: var(--paper); border-top: 1px solid var(--rule-dark); padding: clamp(56px, 7vw, 96px) 0 40px; }
.site-foot__grid {
  display: grid;
  /* Die vierte Spalte traegt jetzt die Newsletter-Anmeldung und braucht Platz
     fuer zwei Eingabefelder, deshalb breiter als die zwei Link-Spalten. */
  grid-template-columns: 1.3fr 0.9fr 0.9fr 1.25fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(44px, 5vw, 72px);
}
.site-foot h4 {
  color: var(--gold);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 11px; font-size: var(--fs-small); color: rgba(250, 244, 234, 0.88); }
.site-foot a { color: rgba(250, 244, 234, 0.88); text-decoration: none; font-size: var(--fs-small); }
.site-foot a:hover { color: var(--gold-soft); }
.site-foot p { color: rgba(250, 244, 234, 0.72); font-size: var(--fs-small); max-width: 32ch; margin-top: 16px; }

/* Footer-Marke: Monogramm + helle Wortmarke */
.brand--foot .brand__mark { height: 46px; }
.brand--foot .brand__wm strong { color: var(--paper); }
.brand--foot .brand__wm span { color: rgba(250, 244, 234, 0.74); font-size: 0.9rem; }

.site-foot__bottom {
  border-top: 1px solid var(--rule-dark);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 244, 234, 0.5);
}
.site-foot__bottom a { color: rgba(250, 244, 234, 0.5); text-decoration: none; margin-left: 22px; font-size: var(--fs-micro); letter-spacing: 0.14em; }
.site-foot__bottom a:hover { color: var(--gold-soft); }

/* Footer: Newsletter (rechte Spalte im Footer-Grid) */
.foot-nlcol__lede { margin-top: 0; margin-bottom: 16px; max-width: 30ch; }
.foot-nl__form input {
  flex: 1 1 170px;
  background: transparent;
  border: 1.5px solid var(--rule-dark);
  border-radius: 3px;
  color: var(--paper);
  font-family: var(--font);
  font-size: var(--fs-small);
  padding: 14px 16px;
  transition: border-color 0.16s var(--ease);
}
.foot-nl__form input::placeholder { color: rgba(250, 244, 234, 0.5); }
.foot-nl__form input:focus { outline: none; border-color: var(--gold); }
.foot-nl__form .btn { flex: 0 0 auto; }
/* Gestapelte Variante fuer die schmale Footer-Spalte. Muss NACH der Basisregel
   stehen: in einer Spalte ist flex-basis die Hoehe, ein geerbtes "1 1 170px"
   macht die Felder 170px hoch. Gleiche Spezifitaet, also entscheidet die
   Reihenfolge. */
.foot-nl__form--col { display: flex; flex-direction: column; gap: 10px; }
.foot-nl__form--col input { flex: 0 0 auto; width: 100%; }
.foot-nl__form--col .btn { width: 100%; justify-content: center; }
.foot-nl__note { font-size: var(--fs-micro); color: rgba(250, 244, 234, 0.5); margin-top: 14px; }
.foot-nl__note a { color: rgba(250, 244, 234, 0.74); text-decoration: underline; text-underline-offset: 2px; }
.foot-nl__note a:hover { color: var(--gold-soft); }

/* Footer: Akkreditierungs-Hinweis */
.site-foot .foot-accredited {
  margin-top: 18px;
  padding-left: 15px;
  border-left: 2px solid var(--gold);
  color: var(--gold-soft);
  font-size: var(--fs-small);
  max-width: 34ch;
}

/* Footer: Social */
.foot-social { display: flex; gap: 12px; margin-top: 24px; }
.foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  color: rgba(250, 244, 234, 0.74);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.foot-social a:hover { color: var(--black); background: var(--gold); border-color: var(--gold); }

/* Footer: Kontakt-Verweis */
.site-foot .foot-contact { color: rgba(250, 244, 234, 0.74); margin: 0 0 16px; max-width: 28ch; }
.textlink--foot { color: var(--gold-soft); border-color: var(--rule-dark); }
.textlink--foot:hover { color: var(--gold); border-color: var(--gold); }
.textlink--foot .arr { color: var(--gold); }

/* ---------- Reveal (nur mit JS aktiv, Sicherheitsnetz in main.js) ---------- */
.js [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.js [data-rv].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Parallax: redaktionelle Bilder wandern sanft beim Scrollen (JS in main.js) */
.manifest__media, .lead-in__media, .duo__tall, .duo__wide, .feature__media { overflow: hidden; }
.manifest__media img, .lead-in__media img, .duo__tall img, .duo__wide img, .feature__media img {
  will-change: transform; transform: scale(1.15);
}
@media (prefers-reduced-motion: reduce) {
  .manifest__media img, .lead-in__media img, .duo__tall img, .duo__wide img, .feature__media img { transform: none; }
}

/* Sektionen mit Anker nicht unter den fixen Header rutschen lassen */
#praesenz, #formate, #online, #trainer, #kontakt, #free { scroll-margin-top: 96px; }

/* ---------- Responsive: Tablet ---------- */
/* Das Desktop-Menue braucht 1300px: Logo 272, Menue 868, Abstand 32, Rand 128.
   Darunter uebernimmt der Burger, sonst ueberlappt das Menue den Schriftzug. */
@media (max-width: 1299px) {
  .site-nav { display: none; }
  .site-nav.open {
    display: flex;
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    padding: 28px var(--gutter) 36px;
    gap: 22px;
  }
  /* Alle Punkte linksbuendig, auch die ohne Untermenue. Vorher standen die
     Dropdown-Gruppen links und Dein Trainer, Videos, Kontakt zentriert. */
  .site-nav.open > a { align-self: flex-start; }
  .site-head--overlay .site-nav.open > a,
  .site-head--overlay .site-nav.open > .nav-drop > a { color: var(--ink); }
  .site-head--overlay .site-nav.open .btn--gold { color: var(--black); }
  .nav-toggle { display: block; }

  /* Mobil kein Hover: das Dropdown liegt eingerueckt und dauerhaft offen im Menue. */
  .nav-drop { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-drop__arrow { display: none; }
  .nav-drop__menu {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; box-shadow: none; border: 0; min-width: 0; width: 100%;
    margin-top: 10px; padding: 0 0 0 18px;
  }
  .site-nav .nav-drop__menu a { padding: 8px 0; }

  .manifest__grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 56px); }
  .manifest__text { grid-column: 1; }
  .manifest__text > p { max-width: 40ch; }
  .manifest__media { grid-column: 1; max-width: 460px; }

  .lead-in__grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  .lead-in__media { grid-column: 1; max-width: 520px; }
  .lead-in__body { grid-column: 1; }

  .duo__grid { grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 40px); }
  .duo__tall { grid-column: 1; }
  .duo__aside { grid-column: 2; align-self: center; }
  .duo__wide { grid-column: 1 / 3; margin-top: clamp(24px, 5vw, 48px); }

  .feature__grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  .feature__body, .feature__media,
  .feature--flip .feature__body, .feature--flip .feature__media { grid-column: 1; }
  .feature__body { order: 1; }
  .feature__media { order: 2; max-width: 560px; }

  .formats__grid { grid-template-columns: 1fr; }
  .formats__intro, .formats__list { grid-column: 1; }
  .formats__intro { margin-bottom: 32px; }
  .formats__intro p { max-width: 56ch; }
  .frow { grid-template-columns: 118px 1fr auto; }

  .trainer__grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  .trainer__media { grid-column: 1; max-width: 460px; }
  .trainer__body { grid-column: 1; }

  .voices__grid { grid-template-columns: 1fr; }

  .free__body { grid-column: 1 / 13; }
  .free__note { grid-column: 1 / 13; margin-top: 32px; }

  .site-foot__grid { grid-template-columns: 1fr 1fr; }
  .foot-brandcol { grid-column: 1 / 3; }
}

/* ---------- Responsive: Mobil ---------- */
@media (max-width: 600px) {
  .site-head__row { height: 72px; }
  .brand__mark { height: 40px; }
  .brand__wm strong { font-size: 0.8125rem; letter-spacing: 0.16em; }
  .brand__wm span { font-size: 0.625rem; }
  .site-nav.open { top: 72px; }

  .duo__grid { grid-template-columns: 1fr; }
  .duo__tall, .duo__aside, .duo__wide { grid-column: 1; }
  .duo__aside { margin-top: 8px; }
  .duo__wide { margin-top: 0; }

  .frow { grid-template-columns: 1fr; gap: 14px; }
  .frow__thumb { aspect-ratio: 16 / 9; }
  .frow__meta { margin-top: 2px; }

  .hero__meta { gap: 14px 28px; }

  .site-foot__grid { grid-template-columns: 1fr; }
  /* Die Markenspalte spannt oberhalb von 600px ueber zwei Spalten. Ohne dieses
     Zuruecksetzen bleibt grid-column: 1 / 3 aktiv und zwingt das einspaltige
     Raster in zwei ungleiche Spalten. Fiel erst mit der Newsletter-Anmeldung
     im Footer auf, weil die Eingabefelder dadurch halb so breit waren. */
  .foot-brandcol { grid-column: auto; }
}

/* ---------- Formular-Technik (Honeypot, Rueckmeldung) ---------- */
/* Honeypot: fuer Menschen unsichtbar, Screenreader ignorieren es (aria-hidden). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg {
  margin-top: 18px; padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: var(--paper);
  font-size: var(--fs-small); color: var(--ink);
}
.is-error .form-msg { border-left-color: var(--bordeaux); }