/* ==========================================================================
   KONSTANTIN LAURIN — Coaching Website
   Brand System v3 — Dual-Voice (Everett + IBM Plex Serif Italic)
   Palette: 60/35/5 (Weiß / Onyx / Gold)
   ========================================================================== */

/* Everett ist kommerziell lizenziert — wir laden Inter Tight als nahesten
   Open-Source-Fallback. Bei Lizenzierung von Everett: hier die @font-face
   Definition einfügen, --ff-display priorisiert dann Everett automatisch. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@1,400;1,500&display=swap');

/* ---------- TOKENS ---------- */
:root {
  /* Palette 60/35/5 */
  --c-white: #FFFFFF;        /* Bühne, 60% */
  --c-silver: #E6E8EC;       /* Sub: Karten, Hover-States, Aside */
  --c-onyx: #0E0E10;         /* Hauptschwarz, 35% — About, CTA, Footer */
  --c-deep: #050506;         /* Tiefschwarz, Doktrin/Manifest, Footer-Boden */
  --c-ink: #15151A;          /* Body-Text auf Hell — niemals reines Schwarz */
  --c-gold: #A07C2A;         /* Akzent auf Hell */
  --c-gold-bright: #C19A3F;  /* Akzent auf Dunkel */
  --c-silver-mute: #8A8A90;  /* Mikro-Labels, Caption */

  /* Hairlines */
  --hair-light: rgba(14, 14, 16, 0.14);
  --hair-light-soft: rgba(14, 14, 16, 0.07);
  --hair-dark: rgba(255, 255, 255, 0.16);
  --hair-dark-soft: rgba(255, 255, 255, 0.08);

  /* Legacy-Aliase (behalten damit alte Klassen weiter funktionieren) */
  --c-black: var(--c-onyx);
  --c-black-soft: var(--c-onyx);
  --c-charcoal: var(--c-ink);
  --c-whisper: var(--c-silver);
  --c-line-on-light: var(--hair-light);
  --c-line-on-dark: var(--hair-dark);
  --c-line-gold: rgba(160,124,42,0.4);
  --c-ink-soft: var(--c-ink);
  --c-ink-mute: var(--c-silver-mute);
  --c-paper: var(--c-silver);
  --c-gold-deep: var(--c-gold);

  /* Fonts — Dual-Voice */
  --ff-display: 'Everett', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --ff-body: 'Everett', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --ff-serif: 'IBM Plex Serif', Georgia, serif; /* nur Italic verwenden */
  --ff-mono: 'Everett', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; /* Eyebrow nutzt Sans */

  /* Layout */
  --container: 1280px;
  --container-narrow: 920px;
  --gutter-x: clamp(1.25rem, 4vw, 2.5rem);

  /* Type-Skala — exakt nach Brand-System */
  --fs-eyebrow: 11px;
  --fs-button: 11px;
  --fs-meta: 13px;
  --fs-body: 17px;
  --fs-lead: 18px;
  --fs-h3: clamp(24px, 2.4vw, 32px);
  --fs-h2: clamp(32px, 4vw, 52px);
  --fs-h1: clamp(48px, 6vw, 88px);
  --fs-display: clamp(48px, 6vw, 88px);
  --fs-numeral: clamp(96px, 14vw, 200px);

  /* Tracking */
  --tk-display: -0.035em;
  --tk-h2: -0.025em;
  --tk-h3: -0.02em;
  --tk-eyebrow: 0.32em;
  --tk-button: 0.16em;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
  font-weight: 400;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
hr { border: 0; border-top: 1px solid var(--hair-light); margin: 0; }
.bg-onyx hr, .bg-deep hr, .bg-ink hr, .bg-black hr { border-color: var(--hair-dark); }
::selection { background: var(--c-onyx); color: var(--c-white); }

/* ---------- LAYOUT PRIMITIVES ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter-x);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-inline: var(--gutter-x);
}

section { position: relative; }
.section-pad { padding-block: clamp(4rem, 9vw, 8rem); }
.section-pad-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Bg-Klassen nach Brand-System.
   Niemals zwei dunkle Sektionen direkt hintereinander (außer CTA → Footer).
   Silber nur für Karten und Hover, nie Sektion-Hintergrund. */
.bg-white { background: var(--c-white); color: var(--c-ink); }
.bg-onyx  { background: var(--c-onyx);  color: var(--c-white); }
.bg-deep  { background: var(--c-deep);  color: var(--c-white); } /* Doktrin/Manifest, Footer-Boden */
/* Legacy-Aliase */
.bg-ink   { background: var(--c-onyx);  color: var(--c-white); }
.bg-black { background: var(--c-onyx);  color: var(--c-white); }
.bg-paper { background: var(--c-white); color: var(--c-ink); } /* Off-White ist raus → wird white */

/* Headlines — Everett 500, Sentence Case, negatives Tracking */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  color: var(--c-onyx);
  font-feature-settings: "kern", "liga", "ss01";
}
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4,
.bg-onyx h1, .bg-onyx h2, .bg-onyx h3, .bg-onyx h4,
.bg-deep h1, .bg-deep h2, .bg-deep h3, .bg-deep h4,
.bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4 { color: var(--c-white); }

h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tk-display); }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: var(--tk-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tk-h3); }

.display {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: var(--tk-display);
  font-weight: 500;
}

/* ---------- TYPOGRAPHY UTILITIES ---------- */
/* Marker / Eyebrow — Everett 600, 11px, 0.34em, UPPERCASE, in Gold.
   Beginnt mit 24–32px Hairline-Vorlauf. */
.eyebrow {
  font-family: var(--ff-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  line-height: 1;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--c-gold);
  flex-shrink: 0;
}
.bg-ink .eyebrow,
.bg-onyx .eyebrow,
.bg-deep .eyebrow,
.bg-black .eyebrow { color: var(--c-gold-bright); }
.bg-ink .eyebrow::before,
.bg-onyx .eyebrow::before,
.bg-deep .eyebrow::before,
.bg-black .eyebrow::before { background: var(--c-gold-bright); }

/* Mono-Label — Caption-Stil, kleinere Mikro-Labels in Silver-Mute */
.mono-label {
  font-family: var(--ff-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--c-silver-mute);
  display: inline-block;
  line-height: 1;
}
.bg-ink .mono-label,
.bg-onyx .mono-label,
.bg-deep .mono-label,
.bg-black .mono-label { color: rgba(255,255,255,0.55); }

/* Akzent: IBM Plex Serif Italic in Gold — das einzige Ornament.
   Wechsel einzelner Wörter in Headlines. Niemals außerhalb von Italic. */
.serif-italic,
.accent {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold);
  letter-spacing: 0;
  /* Optical compensation — Plex Italic sitzt minimal anders */
  font-size: 1.02em;
}
.bg-ink .serif-italic, .bg-ink .accent,
.bg-onyx .serif-italic, .bg-onyx .accent,
.bg-deep .serif-italic, .bg-deep .accent,
.bg-black .serif-italic, .bg-black .accent { color: var(--c-gold-bright); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--c-ink);
  max-width: 56ch;
}
.bg-ink .lead, .bg-onyx .lead, .bg-deep .lead, .bg-black .lead { color: rgba(255,255,255,0.82); }

/* Inline-Link im Lead-Text — gold, dezent unterstrichen, mit Hover-Verstärkung */
.lead-link {
  color: var(--c-gold);
  text-decoration: underline;
  text-decoration-color: rgba(193,154,63,0.4);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.lead-link:hover,
.lead-link:focus-visible {
  color: var(--c-gold-bright);
  text-decoration-color: var(--c-gold-bright);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- BUTTONS ----------
   Brand-System:
   Primary auf Hell: Onyx-Background, weißer Text, Everett 600 / 11px / 0.32em / UPPERCASE
   Primary auf Dunkel: Gold-Bright-Background, Onyx-Text
   Border-Radius: max 2px (sharp, premium)
   Secondary-Link: 11px UPPERCASE + 1px Gold-Underline + 32px-Pfeil
*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.4rem;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tk-button);
  text-transform: uppercase;
  border-radius: 2px;
  line-height: 1;
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
  position: relative;
  white-space: nowrap;
}
.btn-primary {
  background: var(--c-onyx);
  color: var(--c-white);
}
.btn-primary:hover {
  background: var(--c-deep);
  transform: translateY(-1px);
}
.btn-primary .arrow { transition: transform 0.25s ease; }
.btn-primary:hover .arrow { transform: translateX(4px); }

/* Auf Dunkel: Gold-Primary */
.bg-onyx .btn-primary,
.bg-deep .btn-primary,
.bg-ink .btn-primary,
.bg-black .btn-primary {
  background: var(--c-gold-bright);
  color: var(--c-onyx);
}
.bg-onyx .btn-primary:hover,
.bg-deep .btn-primary:hover,
.bg-ink .btn-primary:hover,
.bg-black .btn-primary:hover {
  background: #D4AC4F;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--hair-light);
  color: var(--c-onyx);
}
.btn-ghost:hover {
  border-color: var(--c-onyx);
  background: var(--c-onyx);
  color: var(--c-white);
}
.bg-ink .btn-ghost, .bg-onyx .btn-ghost, .bg-deep .btn-ghost, .bg-black .btn-ghost {
  border-color: var(--hair-dark);
  color: var(--c-white);
}
.bg-ink .btn-ghost:hover, .bg-onyx .btn-ghost:hover, .bg-deep .btn-ghost:hover, .bg-black .btn-ghost:hover {
  background: var(--c-white);
  color: var(--c-onyx);
  border-color: var(--c-white);
}

.btn-light {
  background: var(--c-gold-bright);
  color: var(--c-onyx);
}
.btn-light:hover {
  background: #D4AC4F;
}

/* GOLDIGER SCHIMMER — überlagert alle goldenen Buttons mit einem schräg wandernden Glanzstreifen,
   genauso wie der Slogan-Schimmer. Wirkt edel und „lebendig". */
.btn-light,
.bg-onyx .btn-primary,
.bg-deep .btn-primary,
.bg-ink .btn-primary,
.bg-black .btn-primary {
  position: relative;
  overflow: hidden;
  /* Subtiler diagonaler Goldverlauf statt Flat-Color — gibt dem Button Tiefe & Glanz */
  background:
    linear-gradient(135deg,
      #D4AC4F 0%,
      var(--c-gold-bright) 50%,
      #B8902F 100%
    );
}
.btn-light:hover,
.bg-onyx .btn-primary:hover,
.bg-deep .btn-primary:hover,
.bg-ink .btn-primary:hover,
.bg-black .btn-primary:hover {
  background:
    linear-gradient(135deg,
      #E0B85A 0%,
      #D4AC4F 50%,
      #C19A3F 100%
    );
}
/* Wandernder Glanzstreifen — schmaler heller Strahl, der diagonal über den Button wandert */
.btn-light::before,
.bg-onyx .btn-primary::before,
.bg-deep .btn-primary::before,
.bg-ink .btn-primary::before,
.bg-black .btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,250,230,0) 30%,
    rgba(255,250,230,0.55) 50%,
    rgba(255,250,230,0) 70%,
    transparent 100%
  );
  pointer-events: none;
  animation: btn-gold-shimmer 4.5s ease-in-out infinite;
  z-index: 1;
}
/* Inhalt (Text + Pfeil) muss ÜBER dem Schimmer liegen */
.btn-light > *,
.bg-onyx .btn-primary > *,
.bg-deep .btn-primary > *,
.bg-ink .btn-primary > *,
.bg-black .btn-primary > * {
  position: relative;
  z-index: 2;
}
@keyframes btn-gold-shimmer {
  0%   { left: -100%; }
  60%  { left: 200%; }
  100% { left: 200%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-light::before,
  .bg-onyx .btn-primary::before,
  .bg-deep .btn-primary::before,
  .bg-ink .btn-primary::before,
  .bg-black .btn-primary::before { animation: none; display: none; }
}

/* Secondary-Link: 12px UPPERCASE + Gold-Underline + Pfeil */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--tk-button);
  text-transform: uppercase;
  color: var(--c-onyx);
  line-height: 1;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-gold);
  transition: border-color 0.2s ease;
}
.btn-link:hover { border-bottom-color: var(--c-onyx); }
.bg-ink .btn-link, .bg-onyx .btn-link, .bg-deep .btn-link, .bg-black .btn-link {
  color: var(--c-white);
  border-bottom-color: var(--c-gold-bright);
}
.bg-ink .btn-link:hover, .bg-onyx .btn-link:hover, .bg-deep .btn-link:hover, .bg-black .btn-link:hover {
  border-bottom-color: var(--c-white);
}

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--c-line-on-light);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding-inline: var(--gutter-x);
  max-width: var(--container);
  margin: 0 auto;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--c-onyx);
}
.nav-logo img { height: 32px; width: auto; }
.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink);
  position: relative;
  transition: color 0.2s ease;
  letter-spacing: -0.005em;
}
.nav-links a:hover { color: var(--c-onyx); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
/* Header-CTA: Gold-Bright wie Primary auf Dunkel — konsistent mit Final-CTA */
.nav .btn {
  padding: 0.75rem 1.3rem;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tk-button);
  text-transform: uppercase;
  border-radius: 2px;
  /* Sanfter goldener Verlauf-Background — weicher als Flat-Color */
  background: linear-gradient(135deg,
    #D4AC4F 0%,
    var(--c-gold-bright) 50%,
    #C19A3F 100%
  );
  color: var(--c-onyx);
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
  /* Sanfter Goldglow um den Button — pulsiert subtil, wirkt wie warmes „Glühen" statt harter Schimmer */
  box-shadow:
    0 0 0 1px rgba(193,154,63,0.15),
    0 0 20px rgba(193,154,63,0.18),
    0 2px 8px rgba(193,154,63,0.12);
  animation: nav-btn-glow 5s ease-in-out infinite;
}
/* Dezenter, langsamer Lichtschein — wandert kaum sichtbar diagonal über den Button.
   Viel subtiler als der Sweep auf .btn-light: niedrigere Opacity, langsamer, weicher. */
.nav .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,250,230,0) 35%,
    rgba(255,250,230,0.30) 50%,
    rgba(255,250,230,0) 65%,
    transparent 100%
  );
  pointer-events: none;
  animation: nav-btn-shimmer 7s ease-in-out infinite;
  z-index: 1;
}
.nav .btn > * {
  position: relative;
  z-index: 2;
}
.nav .btn:hover {
  background: linear-gradient(135deg,
    #E0B85A 0%,
    #D4AC4F 50%,
    #C19A3F 100%
  );
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(193,154,63,0.25),
    0 0 28px rgba(193,154,63,0.30),
    0 4px 12px rgba(193,154,63,0.18);
}

@keyframes nav-btn-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(193,154,63,0.15),
      0 0 18px rgba(193,154,63,0.16),
      0 2px 8px rgba(193,154,63,0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(193,154,63,0.25),
      0 0 26px rgba(193,154,63,0.28),
      0 2px 10px rgba(193,154,63,0.18);
  }
}
@keyframes nav-btn-shimmer {
  0%   { left: -80%; }
  60%  { left: 180%; }
  100% { left: 180%; }
}
@media (prefers-reduced-motion: reduce) {
  .nav .btn { animation: none; }
  .nav .btn::before { animation: none; display: none; }
}
.nav .btn:active { transform: translateY(0); }
.nav .btn .arrow { background: var(--c-onyx); }
.nav .btn .arrow::after { border-color: var(--c-onyx); }
.nav .btn:hover .arrow { transform: translateX(3px); transition: transform 0.25s ease; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-black);
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 1.5px;
  background: var(--c-black);
  left: 0;
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-inner > .btn { display: none; }
  .nav.open .nav-links {
    display: flex;
    position: absolute;
    top: 76px;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-line-on-light);
    padding: 1rem 0;
  }
  .nav.open .nav-links li {
    border-top: 1px solid var(--c-line-on-light);
  }
  .nav.open .nav-links a {
    display: block;
    padding: 1rem var(--gutter-x);
  }
  .nav.open .nav-links a::after { display: none; }
}

/* ---------- HERO — Split-Bühne, Onyx rechts bis Rand ---------- */
.hero {
  background: var(--c-white);
  position: relative;
  overflow: hidden;
  padding-top: 0;     /* Bild nutzt vollen Platz nach Nav */
  padding-bottom: 0;  /* Bild läuft bündig in die nächste Sektion (Marquee) */
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: clamp(42%, 50vw, 58%);
  background: var(--c-onyx);
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  top: -10%; right: -10%;
  width: 50%; height: 60%;
  background: radial-gradient(ellipse at center, rgba(193,154,63,0.16), transparent 65%);
  pointer-events: none;
  z-index: 1;
}

.hero .container { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end; /* Text + Bild beide unten ausgerichtet */
  width: 100%;
}
.hero-text {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.hero h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: var(--tk-display);
  color: var(--c-onyx);
}
.hero-sub {
  color: var(--c-ink);
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 2rem;
  font-weight: 400;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.hero-image-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Bild deckt vollen Hero-Bereich ab — kein Abstand oben oder unten */
  min-height: clamp(680px, 96vh, 960px);
  z-index: 2;
}
/* hero-light-stage: deckt die GANZE rechte schwarze Fläche ab.
   Hier liegen ALLE Spotlight-Effekte, damit sie nicht mehr am Rand der Bild-Spalte abgeschnitten werden.
   Liegt zwischen .hero::before (Schwarz) und .container (Text + Bild). */
.hero-light-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(42%, 50vw, 58%);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Hauptspotlight — großer radialer Goldverlauf, mittig in der schwarzen Fläche, pulsiert + driftet */
.hero-light-spot-main {
  position: absolute;
  bottom: -8%;
  left: 50%;
  width: clamp(560px, 95%, 1100px);
  height: clamp(560px, 95%, 1100px);
  background: radial-gradient(
    circle at center 55%,
    rgba(193,154,63,0.32) 0%,
    rgba(193,154,63,0.16) 25%,
    rgba(193,154,63,0.06) 45%,
    transparent 70%
  );
  filter: blur(50px);
  animation: hero-spotlight-drift 11s ease-in-out infinite;
}
/* Zweiter Lichtkegel — wandert kreisförmig im oberen Bereich */
.hero-light-spot-head {
  position: absolute;
  top: 4%;
  left: 50%;
  width: clamp(380px, 60%, 700px);
  height: clamp(480px, 70%, 820px);
  background: radial-gradient(
    ellipse at center 30%,
    rgba(255,235,180,0.22) 0%,
    rgba(193,154,63,0.12) 30%,
    transparent 65%
  );
  filter: blur(40px);
  animation: hero-spotlight-orbit 13s ease-in-out infinite;
}
/* Schräger Lichtstrahl — wandert über die ganze schwarze Fläche von links nach rechts */
.hero-light-sweep {
  position: absolute;
  top: -20%;
  left: -50%;
  width: 50%;
  height: 140%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,235,180,0) 38%,
    rgba(255,235,180,0.10) 48%,
    rgba(255,225,160,0.18) 50%,
    rgba(255,235,180,0.10) 52%,
    rgba(255,235,180,0) 62%,
    transparent 100%
  );
  filter: blur(8px);
  transform: translateX(0) rotate(8deg);
  animation: hero-light-sweep 9s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0;
}
/* Aufsteigende Lichtpartikel/Rays vom Boden */
.hero-glow-rays {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(440px, 75%, 900px);
  height: 70%;
  background:
    radial-gradient(circle at 30% 90%, rgba(193,154,63,0.18) 0%, transparent 8%),
    radial-gradient(circle at 70% 80%, rgba(193,154,63,0.14) 0%, transparent 6%),
    radial-gradient(circle at 50% 95%, rgba(255,225,160,0.20) 0%, transparent 9%),
    radial-gradient(circle at 25% 75%, rgba(193,154,63,0.10) 0%, transparent 5%),
    radial-gradient(circle at 78% 92%, rgba(193,154,63,0.16) 0%, transparent 7%);
  filter: blur(2px);
  animation: hero-rays-rise 8s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes hero-spotlight-drift {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  33%      { opacity: 1;    transform: translateX(-46%) scale(1.06); }
  66%      { opacity: 0.92; transform: translateX(-54%) scale(1.04); }
}
@keyframes hero-spotlight-orbit {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) translateY(0); }
  25%      { opacity: 0.9; transform: translateX(-46%) translateY(-8px); }
  50%      { opacity: 1;   transform: translateX(-50%) translateY(-14px); }
  75%      { opacity: 0.9; transform: translateX(-54%) translateY(-8px); }
}
@keyframes hero-light-sweep {
  0%       { transform: translateX(0) rotate(8deg); opacity: 0; }
  20%      { opacity: 0.6; }
  50%      { opacity: 0.9; }
  80%      { opacity: 0.4; }
  100%     { transform: translateX(360%) rotate(8deg); opacity: 0; }
}
@keyframes hero-rays-rise {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(-18px); opacity: 0.85; }
}

.hero-image-wrap img {
  position: relative;
  z-index: 3;
  max-height: clamp(680px, 100vh, 980px);
  width: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45));
}

@media (prefers-reduced-motion: reduce) {
  .hero-light-spot-main,
  .hero-light-spot-head,
  .hero-light-sweep,
  .hero-glow-rays {
    animation: none;
  }
  .hero-light-sweep { display: none; }
}
.hero-tag {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 4vw, 3rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.hero-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-gold-bright);
  box-shadow: 0 0 0 4px rgba(193,154,63,0.2);
}

@media (max-width: 880px) {
  /* Mobile-Hero: Bild bekommt einen schwarzen Hintergrund mit goldenem Glow (wie Desktop),
     Text darunter bleibt auf hellem Hintergrund — perfekt lesbar. */
  .hero {
    min-height: auto;
  }
  .hero::before { display: none; }
  .hero::after { display: none; }
  /* Light-Stage komplett ausblenden — wir bauen für Mobile einen eigenen Glow direkt im Bild-Container */
  .hero-light-stage { display: none; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
  }
  /* Bild-Container bekommt schwarzen Hintergrund + Goldglow als eigene Bühne.
     Container wird leicht über die Container-Breite hinaus gestreckt, damit er bündig
     bis zu den Hero-Rändern läuft (kein heller Streifen seitlich). */
  .hero-image-wrap {
    order: -1;
    min-height: auto;
    height: auto;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
    background: var(--c-onyx);
    position: relative;
    /* Negatives Margin, um über das Container-Padding hinaus zu reichen — bündig zum Hero-Rand */
    margin-left: calc(-1 * var(--gutter-x, 1.25rem));
    margin-right: calc(-1 * var(--gutter-x, 1.25rem));
    padding: 1.5rem var(--gutter-x, 1.25rem) 0;
    overflow: hidden;
  }
  /* Pulsierender Goldspot hinter Konstantin — kompakte Mobile-Variante */
  .hero-image-wrap::before {
    content: '';
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 95%;
    background: radial-gradient(
      circle at center 55%,
      rgba(193,154,63,0.32) 0%,
      rgba(193,154,63,0.16) 25%,
      rgba(193,154,63,0.06) 45%,
      transparent 70%
    );
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
    animation: hero-spotlight-drift 11s ease-in-out infinite;
  }
  /* Zweiter Lichtkegel im Kopfbereich */
  .hero-image-wrap::after {
    content: '';
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 70%;
    background: radial-gradient(
      ellipse at center 30%,
      rgba(255,235,180,0.22) 0%,
      rgba(193,154,63,0.12) 30%,
      transparent 65%
    );
    filter: blur(35px);
    z-index: 0;
    pointer-events: none;
    animation: hero-spotlight-orbit 13s ease-in-out infinite;
  }
  .hero-image-wrap img {
    max-height: clamp(380px, 60vh, 540px);
    height: auto;
    width: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 20px 36px rgba(0,0,0,0.45));
  }
  .hero-text {
    color: var(--c-ink);
    z-index: 2;
  }
  .hero-tag { top: 1rem; right: 1rem; }
}

/* ---------- TESTIMONIAL MARQUEE ---------- */
.marquee-section {
  background: var(--c-white);
  border-top: 1px solid var(--c-line-on-light);
  border-bottom: 1px solid var(--c-line-on-light);
  padding: 1.75rem 0;
  overflow: hidden;
  position: relative;
}
.marquee-section::before,
.marquee-section::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-section::before {
  left: 0;
  background: linear-gradient(90deg, var(--c-white), transparent);
}
.marquee-section::after {
  right: 0;
  background: linear-gradient(-90deg, var(--c-white), transparent);
}
.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  animation: marquee-scroll 60s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f1f1f 0%, #050505 100%);
  color: var(--c-gold);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(184,137,58,0.3);
  overflow: hidden;
}
/* Foto-Variante: runder Bildausschnitt, deckt den ganzen Kreis */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Logo-Variante: weißer Hintergrund mit etwas Padding, Logo schwebt mittig */
.avatar.is-logo {
  background: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-line-on-light);
}
.avatar.is-logo img {
  object-fit: contain;
  padding: 4px;
  background: var(--c-white);
}
.m-quote {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.m-author {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  padding-left: 0.5rem;
  border-left: 1px solid var(--c-line-on-light);
  margin-left: 0.25rem;
}

@media (max-width: 600px) {
  .marquee-section::before,
  .marquee-section::after { width: 50px; }
  .m-quote { font-size: 0.95rem; }
  .avatar { width: 32px; height: 32px; font-size: 0.7rem; }
  .marquee-track { gap: 2rem; }
}

/* ---------- BRIDGE QUESTION ---------- */
.bridge-question {
  padding: clamp(4rem, 8vw, 7rem) 0;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--c-line-on-light);
}
.bridge-text {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  max-width: 56ch;
  margin: 0 auto;
}
.bridge-accent {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold);
  font-size: 1.04em;
}

/* ---------- SECTION HEADERS ---------- */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head-eyebrow { margin-bottom: 1rem; display: inline-flex; }
.section-head h2 { max-width: 18ch; }
.section-head .right p { color: var(--c-ink-soft); }
.bg-ink .section-head .right p { color: rgba(255,255,255,0.72); }
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: 1.5rem; }
}

.section-head-center {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head-center .eyebrow { justify-content: center; margin-bottom: 1.25rem; }
.section-head-center .eyebrow::after {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--c-gold);
}
.section-head-center h2 {
  max-width: 22ch;
  margin: 0 auto 1.25rem;
}
.section-head-center .lead {
  margin-inline: auto;
  text-align: center;
}

/* ---------- CASES — Flip-Karten ---------- */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
  border-top: 1px solid var(--c-line-on-light);
  border-bottom: 1px solid var(--c-line-on-light);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  background: var(--c-white);
}
.case-card {
  perspective: 1400px;
  background: transparent;
  height: clamp(320px, 34vw, 420px);
  cursor: pointer;
  outline: none;
}
.case-card:focus-visible .case-inner { box-shadow: 0 0 0 2px var(--c-gold); border-radius: 8px; }
.case-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.85s cubic-bezier(.7,.05,.2,.95);
  transform-style: preserve-3d;
  will-change: transform;
}
.case-card:hover .case-inner,
.case-card:focus-visible .case-inner,
.case-card.is-flipped .case-inner {
  transform: rotateY(180deg);
}

.case-front, .case-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  border: 1px solid var(--c-line-on-light);
  background: var(--c-white);
}

/* VORDERSEITE — Luxus-Look: cremiger Verlauf, Gold-Hairline-Border, Eckakzente, sanfter Schatten */
.case-front {
  justify-content: space-between;
  align-items: center;
  text-align: center;
  /* Subtiler vertikaler Verlauf — von cremigweiß zu sehr leichtem Champagner-Ton */
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FAF7F0 100%);
  /* Hairline-Border in gedämpftem Gold + sanfter Schatten unten */
  border: 1px solid rgba(193,154,63,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 4px 20px -8px rgba(0,0,0,0.08);
  /* WICHTIG: kein position: relative hier — würde das position: absolute aus der
     gemeinsamen .case-front, .case-back-Regel überschreiben und das 3D-Layout brechen.
     Die Pseudo-Eckmarken nutzen das absolut positionierte .case-front automatisch
     als ihren Bezugspunkt. */
}
/* Goldene Eckakzente: 4 winzige Linien an den Ecken, wie bei edlen Visitenkarten */
.case-front::before,
.case-front::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.55;
}
.case-front::before {
  top: 14px; left: 14px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
.case-front::after {
  bottom: 14px; right: 14px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
/* KEINE Hover-Effekte auf .case-front oder den Pseudo-Eckmarken — der Flip alleine ist der Effekt */

.case-logo {
  width: 100%;
  height: clamp(90px, 11vw, 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  position: relative;
  z-index: 1;
}
.case-logo img {
  /* Alle drei Logos werden auf identische Höhe gezwungen, damit sie
     unabhängig von ihren nativen Proportionen gleich groß wirken. */
  max-height: 100%;
  max-width: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Kein Hover-Effekt aufs Logo — würde mit dem Flip interferieren */

/* Hairline mit Gold-Akzent zwischen Logo und Monaten */
.case-front-divider {
  width: 32px;
  height: 1px;
  background: var(--c-gold);
  margin: 0 auto;
  opacity: 0.4;
  position: relative;
  z-index: 1;
}
/* Kein Hover-Effekt auf den Divider */

.case-front .case-num {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.case-front-body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: auto 0;
  position: relative;
  z-index: 1;
}
.case-duration {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  color: var(--c-charcoal);
  letter-spacing: -0.025em;
}
.case-duration strong {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold);
  font-size: clamp(3.6rem, 6vw, 5.5rem);
  margin-right: 0.15em;
  display: inline-block;
  line-height: 0.9;
  vertical-align: -0.04em;
}
.case-client {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-black);
  letter-spacing: -0.005em;
}
.case-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--c-gold);
  opacity: 0.55;
  align-self: center;
  position: relative;
  z-index: 1;
}
/* Pfeil-Icon dreht sich beim Hover separat um 180° — Mikro-Detail, das die Drehung der Karte ankündigt.
   Animiert nur das innere SVG, nicht .case-front oder .case-card — das ist 3D-flip-sicher. */
.case-hint svg { transition: transform 0.5s ease; }
.case-card:hover .case-hint svg,
.case-card:focus-visible .case-hint svg,
.case-card.is-flipped .case-hint svg {
  transform: rotate(180deg);
}

/* RÜCKSEITE — gleicher Rahmen-Look wie Vorderseite, aber dunkel als Inversion */
.case-back {
  transform: rotateY(180deg);
  background: var(--c-onyx);
  color: var(--c-white);
  /* Identische Border-Stärke und Schatten wie .case-front, damit beide
     Seiten exakt gleich groß und stilistisch konsistent wirken */
  border: 1px solid rgba(193,154,63,0.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 4px 20px -8px rgba(0,0,0,0.35);
  gap: 1rem;
  justify-content: center;
  /* WICHTIG: kein position: relative hier (siehe .case-front-Kommentar).
     Die Pseudo-Eckmarken nutzen das absolut positionierte .case-back als Bezug. */
}
/* Goldene Eckakzente — gleiche Position wie auf der Vorderseite, aber heller */
.case-back::before,
.case-back::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.7;
}
.case-back::before {
  top: 14px; left: 14px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
.case-back::after {
  bottom: 14px; right: 14px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
.case-back .case-num {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}
.case-back h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.2;
  color: var(--c-white);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  position: relative;
  z-index: 1;
}
.case-back p {
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .cases { grid-template-columns: 1fr; gap: 1rem; }
  .case-card { height: auto; min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-inner { transition: none; }
  /* Bei reduzierter Animation: nur die Rückseite zeigen, da sie die Info enthält */
  .case-inner { transform: rotateY(180deg); }
}

/* ---------- PROBLEM — Horizontal-Pin (Social-Proof → Diagnose) ---------- */
/* Outer Section: Höhe in zwei Phasen aufgeteilt:
   Phase A (~36% des Pin-Progress): Slide-Wechsel Social-Proof → Diagnose
   Phase B (~64% des Pin-Progress): Diagnose steht, .problem-side wandert nach unten
   Ergibt insgesamt 280vh Scroll-Strecke.
   Layer 1 (.problem-pin-base): Social-Proof, geht synchron nach links raus (0% → -100%)
   Layer 2 (.problem-pin-stage): Diagnose, kommt von rechts rein (100% → 0%) */
.problem-pin {
  position: relative;
  height: 280vh;
  background: var(--c-white);
}
.problem-pin-track {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.problem-pin-base,
.problem-pin-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: var(--c-white);
  will-change: transform;
}
.problem-pin-base {
  z-index: 1;
  transform: translateX(0%); /* Start: voll sichtbar, JS animiert auf -100% */
}
.problem-pin-stage {
  z-index: 2;
  transform: translateX(100%); /* Start: rechts außerhalb, JS animiert auf 0% */
}
.problem-pin-base > .container,
.problem-pin-stage > .container {
  width: 100%;
  padding-block: 0;
}

/* Social-Proof als Layer 1 */
.social-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.social-proof-text {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-ink);
  max-width: 50ch;
}

/* Mobile / kein JS / reduced motion: Pin deaktivieren — beide Sektionen normal stapeln */
@media (max-width: 900px) {
  .problem-pin { height: auto; }
  .problem-pin-track { position: static; height: auto; overflow: visible; }
  .problem-pin-base,
  .problem-pin-stage { position: static; transform: none !important; display: block; padding-block: clamp(3rem, 6vw, 5rem); }
  .social-proof-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .problem-pin { height: auto; }
  .problem-pin-track { position: static; height: auto; overflow: visible; }
  .problem-pin-base,
  .problem-pin-stage { position: static; transform: none !important; display: block; padding-block: clamp(3rem, 6vw, 5rem); }
}

/* ---------- PROBLEM (Inhalt) ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.problem-list { display: flex; flex-direction: column; }
.problem-item {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--c-line-on-light);
}
.problem-item:first-child { border-top: 1px solid var(--c-line-on-light); }
.problem-num {
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  color: var(--c-gold);
  letter-spacing: 0.12em;
  padding-top: 0.25rem;
}
.problem-item h3 {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--c-black);
  margin-bottom: 0.4rem;
  letter-spacing: -0.005em;
}
.problem-item p { color: var(--c-charcoal); line-height: 1.55; margin: 0; }

.problem-side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* JS animiert translateY für den Sticky-Wander-Effekt */
  will-change: transform;
}
.result-box {
  padding: 1.75rem;
  background: var(--c-black);
  color: var(--c-white);
  border-radius: 4px;
}
.result-box .mono-label {
  color: var(--c-gold);
  margin-bottom: 0.75rem;
}
.result-box p {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
}
.quote-block {
  border-left: 2px solid var(--c-gold);
  padding-left: 1.5rem;
}
.quote-block blockquote {
  margin: 0 0 1rem;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--c-ink-soft);
  letter-spacing: -0.005em;
}
.quote-block cite {
  font-style: normal;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
/* Cite-Row mit Logo neben dem Namen */
.quote-cite-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.quote-cite-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  /* MMG-Logo ist tiefschwarz; auf hellem Untergrund wirkt es "zu hart"
     gegenüber der dezenten cite-Schrift. Leichte Reduktion auf charcoal-Niveau. */
  opacity: 0.85;
}
/* Runder Avatar (Foto) als Alternative zum Logo — gleicher Stil wie im Marquee */
.quote-cite-avatar {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--c-paper);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.quote-cite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-side { position: static; }
}

/* ---------- VIDEO TESTIMONIAL ---------- */
.video-testi {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-ink);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.video-frame:hover { transform: scale(1.01); }
.video-frame.vertical { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; }
/* Wistia-Player: Aspect-Ratio kommt vom Wistia-Element selbst (16:9), kein cursor/hover */
.video-frame-wistia {
  position: relative;
  background: var(--c-ink);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
/* Vertikale Variante (9:16 Reel) — für Welte-Video und ähnliche */
.video-frame-wistia-vertical {
  aspect-ratio: 9 / 16;
  max-width: 360px;
  margin-inline: auto;
}
/* Platzhalter-Frame (Video folgt noch) — dezenter Gold-Border, kein Hover-Scale */
.video-frame-placeholder {
  cursor: default;
  border: 1px dashed rgba(193,154,63,0.35);
  background:
    linear-gradient(135deg, #1f1f1f 0%, #0c0c0c 100%);
}
.video-frame-placeholder:hover { transform: none; }
.video-frame-placeholder .play-btn {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(193,154,63,0.4);
}
.video-frame-placeholder:hover .play-btn { transform: none; }
.video-frame-wistia:hover { transform: none; }
.video-frame-wistia wistia-player {
  display: block;
  width: 100%;
  height: 100%;
}
.video-poster {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  color: var(--c-paper);
}
.video-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(201,164,74,0.15), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(201,164,74,0.08), transparent 50%);
  pointer-events: none;
}
.play-btn {
  width: 84px; height: 84px;
  border-radius: 999px;
  background: var(--c-paper);
  color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}
.video-frame:hover .play-btn { transform: scale(1.08); }
.play-btn svg { margin-left: 4px; }
.video-meta {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  z-index: 2;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: flex;
  justify-content: space-between;
}
.video-content blockquote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.4;
  margin: 0 0 1.5rem;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.bg-ink .video-content blockquote { color: var(--c-paper); }
.video-content cite {
  font-style: normal;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
  display: block;
  margin-bottom: 0.25rem;
}
.bg-ink .video-content cite { color: var(--c-paper); }
.video-content .role {
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.bg-ink .video-content .role { color: rgba(255,255,255,0.55); }

/* Cite-Row: MMG-Logo links, Name+Rolle rechts */
.video-cite-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
}
.video-cite-logo {
  height: 44px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}
.bg-ink .video-cite-logo { filter: invert(1); opacity: 0.85; }
.video-cite-text { display: flex; flex-direction: column; gap: 0.2rem; }
.video-cite-text cite { margin-bottom: 0; }
@media (max-width: 880px) {
  .video-testi { grid-template-columns: 1fr; }
  .video-testi.reverse { grid-auto-flow: row; }
  .video-testi.reverse .video-content { order: 2; }
}

/* ---------- COMPARISON ---------- */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-line-on-light);
  border: 1px solid var(--c-line-on-light);
  border-radius: 4px;
  overflow: hidden;
}
.compare-col {
  background: var(--c-white);
  padding: clamp(2rem, 4vw, 3rem);
  position: relative;
}
.compare-col.highlight {
  background: var(--c-black);
  color: var(--c-white);
  /* Hint-Layout: Flip-Hint sitzt absolut unten. Padding-bottom schafft Platz. */
  padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 2.25rem);
}
.compare-col .mono-label { margin-bottom: 1.5rem; display: block; }
.compare-col.highlight .mono-label { color: var(--c-gold); }
.compare-col h3 {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 1.75rem;
  letter-spacing: -0.005em;
}
.compare-col.highlight h3 { color: var(--c-white); }
.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.compare-list li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.85rem;
  font-size: 1rem;
  line-height: 1.5;
}
.compare-list .icon {
  margin-top: 0.4rem;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--c-ink-mute);
}
.compare-col.highlight .compare-list .icon {
  background: var(--c-gold);
}

/* Flip-Card: rechte Karte beginnt auf dem Kopf (180°), Hover dreht sie zurück.
   Der Inhalt selbst rotiert mit dem Container — die "Standard-Sicht" steht
   verkehrt herum, beim Hover signalisiert sie "Perspektive zurück gedreht". */
.flip-card {
  perspective: 1200px;
}
.flip-card .flip-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  transform: rotate(180deg);
  transform-origin: center center;
  transition: transform 0.9s cubic-bezier(.7,.05,.2,.95);
  will-change: transform;
}
.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner,
.flip-card.is-flipped .flip-inner {
  transform: rotate(0deg);
}

.flip-hint {
  position: absolute;
  bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  transition: opacity 0.4s ease;
}
.flip-hint svg { transition: transform 0.6s ease; flex-shrink: 0; }
/* Hint nur sichtbar wenn Karte auf dem Kopf steht (also kein Hover) */
.flip-card:hover .flip-hint,
.flip-card:focus-within .flip-hint { opacity: 0; }

/* Tagline unter dem Vergleich */
.compare-tagline {
  text-align: center;
  margin: 2.5rem auto 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  color: var(--c-charcoal);
  max-width: none;
  line-height: 1.35;
  white-space: nowrap;
}

@media (max-width: 700px) {
  /* Auf schmalen Screens darf der Satz wieder umbrechen, damit er passt */
  .compare-tagline { white-space: normal; max-width: 36ch; }
}

@media (max-width: 800px) {
  .compare-grid { grid-template-columns: 1fr; }
  /* Auf Mobile keinen Hover — wir starten richtig herum, Tap toggelt */
  .flip-card .flip-inner { transform: rotate(0deg); }
  .flip-hint { display: none; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .flip-card .flip-inner { transform: rotate(0deg); transition: none; }
  .flip-hint { display: none; }
}

/* ---------- CHECKLIST (Voraussetzungen) ---------- */
.checklist-section {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.checklist li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--c-line-on-light);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-ink);
}
.checklist li:first-child { border-top: 1px solid var(--c-line-on-light); }
.checklist .check {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--c-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
}
.checklist .check svg { color: var(--c-gold-deep); }
@media (max-width: 850px) {
  .checklist-section { grid-template-columns: 1fr; }
}

/* ---------- CHECKLIST-PIN — Voraussetzungen Pin-Reveal ----------
   Pin-Section (220vh) hält den Inhalt fest während die 4 Listenpunkte
   nacheinander von links erscheinen. Erst danach scrollt die Seite weiter. */
.checklist-pin {
  position: relative;
  height: 220vh;
  background: var(--c-white);
}
.checklist-pin-track {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 5vw, 4rem);
}
/* Listenpunkte starten unsichtbar links außerhalb und kommen einzeln rein */
.checklist-reveal .checklist-item {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1),
    transform 0.7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.checklist-reveal .checklist-item.is-active {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 850px) {
  /* Mobile: kein Pin, alle Punkte direkt sichtbar */
  .checklist-pin { height: auto; }
  .checklist-pin-track { position: static; height: auto; overflow: visible; padding-block: clamp(3rem, 6vw, 5rem); }
  .checklist-reveal .checklist-item { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .checklist-pin { height: auto; }
  .checklist-pin-track { position: static; height: auto; overflow: visible; padding-block: clamp(3rem, 6vw, 5rem); }
  .checklist-reveal .checklist-item { opacity: 1; transform: none; transition: none; }
}

/* ---------- PROCESS STEPS (alte Variante — für Coaching-Page Auswahlprozess) ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  border-top: 1px solid var(--c-line-on-light);
  border-bottom: 1px solid var(--c-line-on-light);
}
.process.cols-3 { grid-template-columns: repeat(3, 1fr); }
.process .step {
  padding: clamp(2rem, 3vw, 2.5rem);
  border-right: 1px solid var(--c-line-on-light);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  background: var(--c-white);
  transition: background 0.45s cubic-bezier(.2,.7,.2,1);
}
.process .step:last-child { border-right: 0; }

/* Reveal beim Scrollen — Stagger via JS data-attribute */
.process.reveal .step {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1),
    transform 0.7s cubic-bezier(.2,.7,.2,1),
    background 0.45s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--step-delay, 0s);
}
.process.reveal .step:nth-child(1) { --step-delay: 0s; }
.process.reveal .step:nth-child(2) { --step-delay: 0.15s; }
.process.reveal .step:nth-child(3) { --step-delay: 0.30s; }
.process.reveal .step:nth-child(4) { --step-delay: 0.45s; }
.process.reveal.is-visible .step {
  opacity: 1;
  transform: translateY(0);
}

/* Goldener Indikator-Strich am unteren Rand — beim Hover wächst er */
.process .step::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px; /* überlappt die untere Border-Linie der Section */
  height: 2px;
  width: 0;
  background: var(--c-gold);
  transition: width 0.55s cubic-bezier(.2,.7,.2,1);
}
.process .step:hover::after,
.process .step:focus-within::after {
  width: 100%;
}

/* Hover: Step hebt sich subtle, Hintergrund wird leicht warmer */
.process .step:hover {
  background: linear-gradient(180deg, var(--c-white) 0%, rgba(193,154,63,0.04) 100%);
}

.process .step-num {
  font-family: var(--ff-display);
  font-size: 4rem;
  line-height: 1;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px var(--hair-light);
  margin-bottom: 0.5rem;
  letter-spacing: -0.04em;
  /* Smooth color/stroke transition für Hover-Effekt */
  transition: color 0.45s cubic-bezier(.2,.7,.2,1),
              -webkit-text-stroke-color 0.45s cubic-bezier(.2,.7,.2,1),
              transform 0.55s cubic-bezier(.2,.7,.2,1);
  display: inline-block;
}
.process .step-num.gold {
  color: transparent;
  -webkit-text-stroke: 1px var(--c-gold);
}
/* Hover: Outline-Zahl füllt sich GOLD und wird leicht größer */
.process .step:hover .step-num.gold {
  color: var(--c-gold);
  -webkit-text-stroke-color: var(--c-gold);
  transform: translateY(-2px);
}
.process .step:hover .step-num:not(.gold) {
  color: var(--c-charcoal);
  -webkit-text-stroke-color: var(--c-charcoal);
  transform: translateY(-2px);
}

.process .step h3 {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--c-onyx);
  transition: color 0.45s cubic-bezier(.2,.7,.2,1);
}
.process .step p {
  color: var(--c-ink);
  font-size: 0.98rem;
  line-height: 1.55;
  transition: color 0.45s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 900px) {
  .process, .process.cols-3 { grid-template-columns: 1fr 1fr; }
  .process .step:nth-child(2n) { border-right: 0; }
  .process .step { border-bottom: 1px solid var(--c-line-on-light); }
  .process .step:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .process, .process.cols-3 { grid-template-columns: 1fr; }
  .process .step { border-right: 0; border-bottom: 1px solid var(--c-line-on-light); }
  .process .step:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .process.reveal .step { opacity: 1; transform: none; transition: none; }
  .process .step,
  .process .step-num,
  .process .step::after { transition: none; }
}

/* ---------- ABLAUF — Pin-Reveal mit Strahl ----------
   Pin-Section (200vh hoch) hält den Inhalt fest während Schritte 02→04 nacheinander
   von links erscheinen und ein verbindender Strahl horizontal mitwächst.
   Nach komplettem Reveal löst sich der Pin und die Seite scrollt vertikal weiter. */
.process-pin {
  position: relative;
  height: 220vh;
  background: var(--c-white);
}
.process-pin-track {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.process-pin-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Section-Head-Center innerhalb Pin */
.process-pin .section-head-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Die Flow-Reihe: 4 Steps + Strahl darunter */
.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  position: relative;
  /* Padding deutlich reduziert, damit die Zahlen näher an der Headline sind */
  padding: clamp(0.5rem, 1.5vw, 1.25rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* Verbindungs-Strahl: dünne Hairline auf Höhe der Step-Dots,
   Gold-Bright-Fill wächst horizontal mit Reveal-Progress */
.process-rail {
  position: absolute;
  top: clamp(122px, 14vw, 178px); /* Auf Höhe der Step-Dots, unter den Zahlen */
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hair-light);
  z-index: 0;
}
.process-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%; /* JS animiert auf 0% → 100% */
  background: var(--c-gold);
  height: 1px;
}

/* Steps */
.process-flow .step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-top: clamp(160px, 18vw, 220px); /* Platz für Zahl + Strahl + Dot oben */
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.process-flow .step.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* Step-Dot — sitzt EXAKT auf der Strahl-Höhe, markiert Schritt-Position */
.step-dot {
  position: absolute;
  top: clamp(116px, 13.4vw, 172px);
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--c-white);
  border: 1px solid var(--hair-light);
  z-index: 2;
  transition: all 0.5s cubic-bezier(.2,.8,.2,1);
}
.process-flow .step.is-active .step-dot {
  background: var(--c-gold);
  border-color: var(--c-gold);
  box-shadow: 0 0 0 6px rgba(160,124,42,0.12);
}

/* Step-Number — groß, Outline-Style nach CI (Brand-System: Numerale-Skulptur) */
.process-flow .step-num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--ff-display);
  font-size: clamp(78px, 9vw, 128px);
  line-height: 0.85;
  font-weight: 500;
  letter-spacing: -0.05em;
  /* Default: dezent (gold mit reduzierter Opacity), wird bei is-active voll gold */
  color: var(--c-gold);
  opacity: 0.25;
  -webkit-text-stroke: 0;
  margin: 0;
  transition: opacity 0.5s ease, color 0.5s ease;
}
.process-flow .step.is-active .step-num {
  color: var(--c-gold);
  opacity: 1;
}

.process-flow .step h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 500;
  letter-spacing: var(--tk-h3);
  color: var(--c-onyx);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.process-flow .step p {
  color: var(--c-ink);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Step 01 ist immer sichtbar — Initial-State */
.process-flow .step[data-step="1"] {
  opacity: 1;
  transform: translateX(0);
}
.process-flow .step[data-step="1"] .step-dot {
  background: var(--c-gold);
  border-color: var(--c-gold);
  box-shadow: 0 0 0 6px rgba(160,124,42,0.12);
}
.process-flow .step[data-step="1"] .step-num {
  color: var(--c-gold);
  opacity: 1;
}

/* Mobile / reduced-motion: kein Pin, alle Steps sofort sichtbar, Strahl voll */
@media (max-width: 900px) {
  .process-pin { height: auto; padding-block: clamp(3rem, 6vw, 5rem); }
  .process-pin-track { position: static; height: auto; overflow: visible; display: block; }
  .process-flow { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .process-flow .step {
    opacity: 1 !important;
    transform: none !important;
    padding-top: clamp(110px, 14vw, 150px);
  }
  .process-flow .step .step-dot {
    background: var(--c-gold);
    border-color: var(--c-gold);
  }
  .process-flow .step .step-num { color: var(--c-gold); opacity: 1; }
  .process-rail { display: none; }
}
@media (max-width: 540px) {
  .process-flow { grid-template-columns: 1fr; }
  .process-flow .step { padding-top: clamp(90px, 22vw, 130px); }
}
@media (prefers-reduced-motion: reduce) {
  .process-pin { height: auto; padding-block: clamp(3rem, 6vw, 5rem); }
  .process-pin-track { position: static; height: auto; overflow: visible; display: block; }
  .process-flow .step { opacity: 1 !important; transform: none !important; }
  .process-flow .step .step-dot { background: var(--c-gold); border-color: var(--c-gold); }
  .process-flow .step .step-num { color: var(--c-gold); opacity: 1; }
  .process-rail-fill { width: 100% !important; }
}

/* ---------- FOUNDER ---------- */
/* Founder-Sektion läuft bündig in die Metrics-Sektion über (kein Abstand)
   und auch oben kein Padding — das Bild beginnt direkt bündig zur vorherigen Sektion */
section.section-pad#founder {
  padding-top: 0;
  padding-bottom: 0;
}

.founder {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
/* Bild-Spalte: Container hat exakt die Aspect-Ratio des Bildes (900:1716),
   damit das ganze Bild komplett sichtbar ist UND bündig oben/unten ohne schwarze Ränder.
   Kein max-height — das würde die Aspect-Ratio brechen und das Bild zuschneiden. */
.founder-image {
  position: relative;
  background: var(--c-onyx);
  border-radius: 4px;
  overflow: hidden;
  align-self: center;
  width: 100%;
  aspect-ratio: 900 / 1716;
}
.founder-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 25%, rgba(193,154,63,0.16), transparent 65%);
  z-index: 1;
  pointer-events: none;
}
.founder-image img {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 0;
  /* Container hat dieselbe Aspect-Ratio wie das Bild, daher kein Zuschneiden trotz cover */
  object-fit: cover;
  object-position: center;
}
.founder-tag {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(5,5,5,0.5);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.founder-tag .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-gold); }

/* Rechte Spalte: kompakter Content-Bereich */
.founder-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1rem, 3vw, 2rem);
}

/* Name als große H2 — Display-Schrift, weiß */
.founder-title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-white);
  margin: 0.75rem 0 0.5rem;
}
/* Untertitel: GOLD + Serif-Italic — die Rolle, im Stil der ursprünglichen Vorgabe */
.founder-subtitle {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.3;
  color: var(--c-gold);
  letter-spacing: -0.005em;
  margin: 0 0 1.5rem;
}

/* Bio-Text-Absätze: kompakter, knapp */
.founder-text {
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0 0 0.85rem;
}
.founder-text-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.88);
}

/* Tagline auf EINER Zeile — nowrap auf Desktop, mit Shimmer-Effekt */
.founder .tagline,
.founder-tagline-shimmer,
.tagline-shimmer {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-top: 1.25rem;
  /* Trennlinie über der Tagline entfernt */
  padding-top: 0;
  border-top: 0;
  max-width: none;
  white-space: nowrap;
  /* Schimmer-Effekt: animierter Goldverlauf, der über den Text wandert */
  background: linear-gradient(
    90deg,
    var(--c-gold) 0%,
    var(--c-gold) 30%,
    #f4d690 50%,
    var(--c-gold) 70%,
    var(--c-gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: tagline-shimmer 6s linear infinite;
}
@keyframes tagline-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .founder-tagline-shimmer,
  .tagline-shimmer { animation: none; background: none; -webkit-text-fill-color: var(--c-gold); color: var(--c-gold); }
}
@media (max-width: 1100px) {
  /* Auf engeren Screens darf der Slogan umbrechen, sonst läuft er aus dem Container */
  .founder .tagline,
  .founder-tagline-shimmer,
  .tagline-shimmer { white-space: normal; }
}

.bg-ink .founder .tagline { border-color: transparent; }

/* Tagline-Block: Container für Slogan + Signatur */
.founder-tagline-block {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line-on-dark);
}
.founder-tagline-block .tagline,
.founder-tagline-block .founder-tagline-shimmer {
  margin-top: 0;
}

/* Signature — kleine elegante Attribution direkt unter der Tagline,
   rechtsbündig wie eine typografische Unterschrift */
.signature {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 0.4rem;
  margin-bottom: 0;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.01em;
  text-align: right;
}
.bg-ink .signature { color: rgba(255,255,255,0.45); }

/* Founder-Socials Block — clean, ohne Label und ohne Trennlinie */
.founder-socials {
  margin-top: 0.85rem;
  padding-top: 0;
  border-top: 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  position: relative;
}

/* Label im Brand-Voice — etwas größer und prominenter als der alte Eyebrow */
.founder-socials-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-display);
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--c-white);
  font-weight: 500;
  /* Reveal-Animation: opazität + slide */
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1),
              transform 0.7s cubic-bezier(.2,.7,.2,1);
  transition-delay: 0.1s;
}
/* Pfeil hinter dem Label — wandert leicht nach rechts beim Hover über die Icon-Liste */
.follow-arrow {
  display: inline-block;
  color: var(--c-gold-bright);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.founder-socials:hover .follow-arrow {
  transform: translateX(6px);
}

/* Social-Icons im Brand-Stil — einzeln gestaffelt einblenden mit Bounce */
.founder-socials-list { margin-top: 0; }
.founder-socials-list li {
  position: relative;
  /* Reveal: kleine Verzögerung pro Icon, mit Bounce */
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  transition: opacity 0.55s cubic-bezier(.2,.9,.3,1.4),
              transform 0.55s cubic-bezier(.2,.9,.3,1.4);
}
.founder-socials-list li:nth-child(1) { transition-delay: 0.25s; }
.founder-socials-list li:nth-child(2) { transition-delay: 0.35s; }
.founder-socials-list li:nth-child(3) { transition-delay: 0.45s; }
.founder-socials-list li:nth-child(4) { transition-delay: 0.55s; }

.founder-socials-list a {
  width: 42px;
  height: 42px;
  color: rgba(255,255,255,0.92);
  background: rgba(193,154,63,0.08);
  box-shadow: inset 0 0 0 1px rgba(193,154,63,0.4);
  position: relative;
  overflow: visible; /* Tooltip darf rausragen */
}
/* Subtiler Gold-Glow-Pulse beim Hover */
.founder-socials-list a::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(193,154,63,0.5) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
/* Tooltip wurde entfernt — Icons stehen ohne Hover-Text */
.founder-socials-list a > svg {
  position: relative;
  z-index: 1;
}
.founder-socials-list a:hover::before,
.founder-socials-list a:focus-visible::before {
  opacity: 1;
}
.founder-socials-list a:hover,
.founder-socials-list a:focus-visible {
  color: var(--c-onyx);
  background: var(--c-gold-bright);
  box-shadow: inset 0 0 0 1px var(--c-gold-bright), 0 6px 18px rgba(193,154,63,0.35);
  transform: translateY(-3px);
}

/* Reveal-Trigger: wenn der gesamte .founder-content sichtbar wird */
.founder-content.is-visible .founder-socials-label,
.founder-content.is-visible .founder-socials-list li {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* Reduced-Motion: alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .founder-socials-label,
  .founder-socials-list li {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .follow-arrow,
  .founder-socials:hover .follow-arrow { transform: none; }
}

@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; gap: 0; }
  .founder-image {
    /* Mobile: Aspect-Ratio aufheben, fixe Höhe damit Bild nicht ~715px hoch wird */
    aspect-ratio: auto;
    height: clamp(360px, 55vh, 480px);
    /* Bild bündig zum darunterliegenden Eyebrow ohne Gap */
    margin-bottom: 0;
  }
  .founder-image img {
    /* contain: ganzes Bild sichtbar — KEIN Beschnitt oben/unten/seitlich.
       Das Bild wird proportional in den Container skaliert. */
    object-fit: contain;
    object-position: center bottom;
  }
  .founder-content {
    padding-block: 0;
    /* Kein Top-Spacing — der Eyebrow-Strich beginnt direkt unter dem Bild */
    margin-top: 0;
  }
}

/* ---------- KENNZAHLEN / FUNDAMENT ----------
   Neue Struktur: Eyebrow oben (gold mono), Headline mittig (Display-Schrift, weiß mit Italic-Akzenten),
   Sub-Label unten (mono grau). Keine horizontalen Striche mehr — stattdessen reine Typo-Hierarchie. */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(193,154,63,0.08) 0%, transparent 70%),
    var(--c-onyx);
  border-top: 1px solid rgba(193,154,63,0.18);
  border-bottom: 1px solid rgba(193,154,63,0.18);
  position: relative;
}
.metric {
  background: transparent;
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.75rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: left;
  position: relative;
  transition: background 0.35s ease;
  /* Pro Karte: Hover bringt einen subtilen Goldverlauf-Glow */
}
.metric:hover {
  background: radial-gradient(ellipse at 50% 100%, rgba(193,154,63,0.06) 0%, transparent 70%);
}
/* Goldene Vertikallinien zwischen Spalten — der einzige Trenner, dezent als Gradient */
.metric:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(193,154,63,0.35) 30%,
    rgba(193,154,63,0.35) 70%,
    transparent 100%
  );
}

/* EYEBROW — kleine Mono-Caps in Gold, oben */
.metric-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.85;
}

/* HEADLINE — der Hero-Text, große Display-Schrift, weiß */
.metric-headline {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.05;
  font-weight: 500;
  color: var(--c-paper);
  letter-spacing: -0.02em;
  margin: 0.15rem 0;
  /* Subtle text-gradient von hell nach leicht gedämpft — gibt der Headline „Tiefe" */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.82) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter 0.4s ease;
}
.metric:hover .metric-headline {
  filter: drop-shadow(0 0 24px rgba(193,154,63,0.30));
}

/* Akzent-Span: Zahlen oder Schlüsselwörter in Gold (kein Italic) */
.metric-accent {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--c-gold-bright);
  -webkit-text-fill-color: var(--c-gold-bright);
}

/* Akzent-Span: Schlüsselwörter in Serif-Italic Gold (für Worte wie „Positionen", „Ganzheitlich") */
.metric-accent-italic {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold-bright);
  -webkit-text-fill-color: var(--c-gold-bright);
}

/* Kleines (MCI) als Subtle Tag direkt neben M.A. — macht den Kontext klar */
.metric-mci {
  font-family: var(--ff-mono);
  font-size: 0.55em;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.55);
  -webkit-text-fill-color: rgba(255,255,255,0.55);
  vertical-align: 0.25em;
  margin-left: 0.1em;
}

/* SUB — Untertext: Mono-Caps in dezentem Grau, etwas größer als das alte Label */
.metric-sub {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
  transition: color 0.35s ease;
}
.metric:hover .metric-sub {
  color: rgba(255,255,255,0.85);
}

@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2)::after { display: none; }
}
@media (max-width: 600px) {
  .metrics { grid-template-columns: 1fr; }
  .metric::after { display: none; }
}

/* ---------- METHOD / GANZHEITLICH ---------- */
.method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.method-visual {
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.method-visual svg { width: 100%; height: 100%; max-width: 480px; }
@media (max-width: 800px) {
  .method { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 1px solid var(--c-line-on-light);
  padding: 1.75rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--c-line-on-light); }
.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  font-family: var(--ff-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: -0.005em;
  cursor: pointer;
}
.faq-q .icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--c-line-on-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}
.faq-q .icon::before, .faq-q .icon::after {
  content: '';
  position: absolute;
  width: 12px; height: 1.5px;
  background: var(--c-ink);
  transition: transform 0.3s ease;
}
.faq-q .icon { position: relative; }
.faq-q .icon::after { transform: rotate(90deg); }
.faq-item.open .faq-q .icon { background: var(--c-ink); }
.faq-item.open .faq-q .icon::before, .faq-item.open .faq-q .icon::after { background: var(--c-paper); }
.faq-item.open .faq-q .icon::after { transform: rotate(0deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding-top 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.faq-item.open .faq-a {
  max-height: 800px;
  padding-top: 1.25rem;
  opacity: 1;
}
.faq-a p {
  color: var(--c-ink-soft);
  line-height: 1.6;
  max-width: 70ch;
}
/* Inline-Link IN einem Absatz — Goldakzent, dezente Unterstreichung */
.faq-a p a {
  color: var(--c-gold);
  text-decoration: underline;
  text-decoration-color: rgba(193,154,63,0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
  /* Reset gegen den Standard-Link-Block-Style unten */
  display: inline;
  margin-top: 0;
  border-bottom: 0;
  padding-bottom: 0;
  font-family: inherit;
  font-size: inherit;
  gap: 0;
}
.faq-a p a:hover {
  color: var(--c-gold-bright);
  text-decoration-color: var(--c-gold-bright);
  border-bottom: 0;
}
/* Standalone-CTA-Link (z.B. „Erstgespräch buchen") — nicht in <p> */
.faq-a > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--c-line-on-light);
  padding-bottom: 2px;
  transition: gap 0.25s ease, border-color 0.25s ease;
}
.faq-a > a:hover { gap: 0.85rem; border-color: var(--c-ink); }
@media (max-width: 850px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ CLUSTER (coaching page) ---------- */
.faq-cluster + .faq-cluster { margin-top: 3rem; }
.faq-cluster-label {
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.faq-cluster-label::before { content: '/'; color: var(--c-gold); font-size: 1rem; }

/* ---------- FINAL CTA ---------- */
.final-cta {
  text-align: center;
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--c-onyx);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 120%; height: 80%;
  background: radial-gradient(ellipse, rgba(193,154,63,0.10), transparent 60%);
  pointer-events: none;
}
.final-cta h2 {
  color: var(--c-white);
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: var(--tk-display);
  max-width: 22ch;
  margin: 0 auto 2rem;
  position: relative;
}
.final-cta p {
  max-width: 50ch;
  margin: 0 auto 2.5rem;
  font-size: var(--fs-lead);
  color: rgba(255,255,255,0.82);
  position: relative;
}
.final-cta .signature-line {
  margin-top: 2rem;
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-gold-bright);
  font-size: 1.25rem;
  letter-spacing: 0;
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: clamp(2rem, 4vw, 3rem) 0 1rem;
  border-top: 1px solid var(--c-line-on-dark);
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  /* footer-bottom existiert nicht mehr, also kein padding-bottom nötig */
  padding-bottom: 0;
  align-items: stretch;
}
/* Linke Spalte: Logo + Socials oben, Copyright unten — alles in einer Spalte gestapelt.
   space-between sorgt dafür, dass das Copyright auf gleicher Höhe sitzt wie das letzte Item
   der Navi-Liste (FAQ) in der mittleren Spalte. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
/* Logo + Socials nebeneinander oben */
.footer-brand-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
/* Aber: aktuell sind Logo und ul nicht in einem Container. Wir wenden Flex auf footer-brand selbst an,
   und stellen sicher dass Logo + Socials eine eigene "Reihe" bilden via wrapper-Logik */
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.footer-brand img {
  height: 48px;
  width: auto;
  margin-bottom: 0;
  filter: brightness(0) invert(1);
  transition: opacity 0.25s ease;
}
.footer-logo-link:hover img,
.footer-logo-link:focus-visible img { opacity: 0.75; }
/* Socials sitzen direkt rechts vom Logo, beide in derselben oberen Reihe */
.footer-brand .footer-socials {
  margin-top: 0;
}
/* Copyright unten in der Spalte — sitzt automatisch auf Höhe des letzten Navi-Items.
   Normale Schrift, keine Großbuchstaben. */
.footer-copyright {
  font-family: var(--ff-body);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.45);
  margin-top: auto;
  /* Visuelle Feinjustierung: leicht nach unten verschoben, um auf gleicher Baseline-Höhe wie FAQ zu sitzen */
  line-height: 1;
}
.footer h4 {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: 0.7rem; }
/* Letztes Navi-Item ohne margin-bottom — damit FAQ exakt am Spalten-Bottom anliegt
   und das Copyright daneben (in der linken Spalte) auf gleicher Höhe sitzt */
.footer ul li:last-child { margin-bottom: 0; }
.footer ul a {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.72);
  transition: color 0.2s ease;
}
.footer ul a:hover { color: var(--c-white); }

/* Footer Social-Icons — runde dezente Icons mit Hover-Akzent in Gold */
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0;
  list-style: none;
  padding: 0;
}
.footer-socials li { margin: 0; }
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px var(--c-line-on-dark);
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.footer-socials a:hover,
.footer-socials a:focus-visible {
  color: var(--c-white);
  background: rgba(193,154,63,0.12);
  box-shadow: inset 0 0 0 1px var(--c-gold-bright);
  transform: translateY(-1px);
}
.footer-socials svg { display: block; }
/* Screen-Reader-only Text */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 800px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { gap: 1.5rem; }
}

/* ---------- COACHING PAGE: PROGRAMS ---------- */
.programs {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--c-line-on-light);
}
.program {
  border-bottom: 1px solid var(--c-line-on-light);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.program.reverse { grid-template-columns: 1.2fr 1fr; }
.program.reverse .program-image { order: 2; }
.program-image {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-paper);
}
.program-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.program:hover .program-image img { transform: scale(1.04); }
.program-image .number-tag {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--ff-display);
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--c-paper);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.program-image .program-tag {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(10,10,10,0.85);
  color: var(--c-paper);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.program-content .program-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  margin-bottom: 1.5rem;
}
.program-content h2 { margin-bottom: 1.5rem; }
.program-trigger {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--c-ink);
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--c-gold);
}
.program-content p { color: var(--c-ink-soft); margin-bottom: 1rem; }
.program-cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .program, .program.reverse { grid-template-columns: 1fr; }
  .program.reverse .program-image { order: 0; }
}

/* USP cards */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line-on-light);
  border: 1px solid var(--c-line-on-light);
  border-radius: 4px;
  overflow: hidden;
}
.usp-card {
  background: var(--c-paper);
  padding: clamp(2rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.usp-num {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--c-gold-deep);
  margin-bottom: 0.25rem;
}
.usp-card h3 {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.usp-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.usp-card ul li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.85rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.usp-card ul li::before {
  content: '›';
  color: var(--c-gold-deep);
  font-family: var(--ff-display);
  font-size: 1.1rem;
  margin-top: -2px;
}
@media (max-width: 800px) { .usp-grid { grid-template-columns: 1fr; } }

/* ----- USP Flip-Cards (gleiche Mechanik UND gleiches Design wie .case-card auf der Hauptseite) -----
   Wenn .usp-grid Flip-Cards enthält, neutralisieren wir die alten Statik-Card-Container-Styles.
   Außerdem darf KEIN overflow:hidden auf den Eltern-Containern sein — sonst bricht 3D. */
.usp-grid.usp-grid-flip {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  gap: clamp(1rem, 1.5vw, 1.5rem);
}
.usp-flip-card {
  perspective: 1400px;
  background: transparent;
  height: clamp(280px, 28vw, 340px);
  cursor: pointer;
  outline: none;
}
.usp-flip-card:focus-visible .usp-flip-inner {
  box-shadow: 0 0 0 2px var(--c-gold);
  border-radius: 8px;
}
.usp-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.85s cubic-bezier(.7,.05,.2,.95);
  transform-style: preserve-3d;
  will-change: transform;
}
.usp-flip-card:hover .usp-flip-inner,
.usp-flip-card:focus-visible .usp-flip-inner,
.usp-flip-card.is-flipped .usp-flip-inner {
  transform: rotateY(180deg);
}
.usp-flip-front, .usp-flip-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
}

/* VORDERSEITE — Luxus-Look identisch zur Hauptseite:
   cremiger Gradient, Gold-Hairline-Border, sanfter Schatten, Goldene Eckakzente */
.usp-flip-front {
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F0 100%);
  border: 1px solid rgba(193,154,63,0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 4px 20px -8px rgba(0,0,0,0.08);
}
/* Goldene Eckakzente — wie auf der Hauptseite (oben links + unten rechts) */
.usp-flip-front::before,
.usp-flip-front::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.55;
}
.usp-flip-front::before {
  top: 14px; left: 14px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
.usp-flip-front::after {
  bottom: 14px; right: 14px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
.usp-flip-front h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.2;
  margin: auto 0;
  position: relative;
  z-index: 1;
}
.usp-flip-front .usp-num {
  position: relative;
  z-index: 1;
}
.usp-flip-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  opacity: 0.55;
  align-self: flex-end;
  position: relative;
  z-index: 1;
}
.usp-flip-hint svg { transition: transform 0.5s ease; }
.usp-flip-card:hover .usp-flip-hint svg,
.usp-flip-card:focus-visible .usp-flip-hint svg,
.usp-flip-card.is-flipped .usp-flip-hint svg {
  transform: rotate(180deg);
}

/* RÜCKSEITE — wie auf der Hauptseite: Onyx-BG, Gold-Border, Goldakzente in den Ecken */
.usp-flip-back {
  transform: rotateY(180deg);
  background: var(--c-onyx);
  color: var(--c-white);
  border: 1px solid rgba(193,154,63,0.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 4px 20px -8px rgba(0,0,0,0.35);
  justify-content: flex-start;
  gap: 0.85rem;
}
/* Goldene Eckakzente auf der Rückseite — heller (0.7) für Kontrast auf Dunkel */
.usp-flip-back::before,
.usp-flip-back::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.7;
}
.usp-flip-back::before {
  top: 14px; left: 14px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
.usp-flip-back::after {
  bottom: 14px; right: 14px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
.usp-flip-back .usp-num {
  margin-bottom: 0.25rem;
  color: var(--c-gold);
  position: relative;
  z-index: 1;
}
.usp-flip-back ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  z-index: 1;
}
.usp-flip-back ul li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.7rem;
  font-size: 0.93rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}
/* Italic-Zitate (z.B. „I got you.") als untrennbare Einheit — verhindert ungewollte Lücken
   bei einem Whitespace vor dem Zitat am Zeilenende */
.usp-flip-back ul li em {
  white-space: nowrap;
  font-style: italic;
}
.usp-flip-back ul li::before {
  content: '›';
  color: var(--c-gold-bright);
  font-family: var(--ff-display);
  font-size: 1.05rem;
  margin-top: -2px;
}

@media (max-width: 800px) {
  .usp-flip-card { height: auto; min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .usp-flip-inner { transition: none; transform: rotateY(180deg); }
}

/* TESTIMONIALS GRID */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.testi-card {
  background: var(--c-white);
  border: 1px solid var(--c-line-on-light);
  border-radius: 4px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(10,10,10,0.18);
}
.stars {
  color: var(--c-gold);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
}
.testi-card blockquote {
  margin: 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.testi-card cite {
  font-style: normal;
  font-family: var(--ff-display);
  font-size: 0.95rem;
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-top: 1px solid var(--c-line-on-light);
  padding-top: 1rem;
  margin-top: auto;
}
.testi-card cite .role {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
@media (max-width: 1000px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .testi-grid { grid-template-columns: 1fr; } }

/* MID-CTA on coaching page */
.mid-cta {
  background: var(--c-paper);
  padding: clamp(3rem, 6vw, 5rem);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  border: 1px solid var(--c-line-on-light);
}
.mid-cta h2 { margin-bottom: 1rem; max-width: 22ch; }
.mid-cta p { color: var(--c-ink-soft); }
.mid-cta-action { display: flex; align-items: center; justify-content: flex-end; }
@media (max-width: 800px) {
  .mid-cta { grid-template-columns: 1fr; padding: 2rem; }
  .mid-cta-action { justify-content: flex-start; }
}

/* ZIELGRUPPEN tabelle */
.zg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-line-on-light);
  border: 1px solid var(--c-line-on-light);
  border-radius: 4px;
  overflow: hidden;
}
.zg-col {
  background: var(--c-white);
  padding: clamp(2rem, 4vw, 2.75rem);
}
.zg-col h3 {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.zg-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.zg-col ul li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.85rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.zg-col .check {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--c-paper);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.zg-col .check svg { color: var(--c-gold-deep); }
@media (max-width: 800px) { .zg-grid { grid-template-columns: 1fr; } }

/* CLOSING-PITCH */
.closing-pitch {
  text-align: center;
}
.closing-pitch h2 { max-width: 18ch; margin: 0 auto 0.75rem; }
.closing-pitch h3 {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--c-gold);
  margin-bottom: 2rem;
  letter-spacing: -0.005em;
}
.closing-pitch p {
  max-width: 60ch;
  margin: 0 auto 2rem;
  color: rgba(255,255,255,0.78);
  font-size: var(--fs-lead);
}
.closing-pitch blockquote {
  max-width: 60ch;
  margin: 2.5rem auto;
  padding: 2rem;
  border-left: 2px solid var(--c-gold);
  background: rgba(255,255,255,0.04);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: left;
  letter-spacing: -0.005em;
}
.closing-pitch blockquote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.closing-line {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-gold);
  margin-bottom: 2rem !important;
}

/* ---------- PAGE HERO (coaching page, legal pages) ---------- */
.page-hero {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 5vw, 5rem);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line-on-light);
}
.page-hero-inner {
  max-width: 80ch;
}
.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
}
/* .accent inherits from global rule */
.page-hero .lead { margin-bottom: 2rem; }

/* ---------- LEGAL PAGES ---------- */
.legal-content {
  max-width: 78ch;
}
.legal-content h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 3rem 0 1rem;
  font-weight: 700;
  font-family: var(--ff-display);
  letter-spacing: -0.005em;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-size: 1.2rem;
  margin: 2rem 0 0.75rem;
  font-family: var(--ff-display);
  font-weight: 700;
}
.legal-content p, .legal-content li {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink-soft);
}
.legal-content p { margin-bottom: 1rem; }
.legal-content ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.legal-content ul li { margin-bottom: 0.5rem; }
.legal-content strong { color: var(--c-ink); font-weight: 700; }
.legal-content a {
  color: var(--c-gold-deep);
  border-bottom: 1px solid var(--c-line-on-light);
  transition: border-color 0.2s ease;
  word-break: break-word;
}
.legal-content a:hover { border-color: var(--c-gold); }

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse { animation: pulse 2s ease-in-out infinite; }

/* ---------- UTIL ---------- */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: 1rem; }
.mb-md { margin-bottom: 2rem; }
.mb-lg { margin-bottom: 3rem; }
.mt-md { margin-top: 2rem; }
.mt-lg { margin-top: 3rem; }
.no-wrap { white-space: nowrap; }
.gold { color: var(--c-gold-deep); }
.bg-ink .gold { color: var(--c-gold); }

/* Arrow icon — 32px Linie + 7px Spitze (Brand-System) */
.arrow {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  position: relative;
  margin-left: 0.4rem;
  flex-shrink: 0;
}
.arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- DAS EIGENTLICHE PROBLEM — Pin-Reveal-Section ---------- */
/*
  Aufbau wie process-pin: Section ist 280vh hoch (Track), Stage ist 100vh sticky.
  Phasen-Logik via JS: progress 0-1 wird auf body-Klasse data-phase=A/B/C/D gemappt.
  Inhalte sind absolut positioniert über einander; werden via opacity + transform animiert.
*/
.truth-pin {
  position: relative;
  background: var(--c-white);
  height: 280vh;
}
.truth-pin-track {
  position: relative;
  height: 100%;
}
.truth-pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* dezenter Verlauf nach unten zur Synthese-Phase hin */
  background: linear-gradient(180deg, var(--c-white) 0%, #FAFAF7 100%);
}
.truth-pin-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Headline — bleibt durch alle Phasen sichtbar, oben zentriert */
.truth-pin-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  z-index: 1;
}
.truth-pin-head .eyebrow {
  justify-content: center;
  margin-bottom: 1rem;
  display: inline-flex;
}
.truth-pin-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  max-width: 22ch;
  margin: 0 auto;
}

/* Body: zwei Spalten + Overlay, alle übereinander */
.truth-pin-body {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  /* Min-Höhe damit es nicht zu klein wird */
  min-height: clamp(280px, 40vh, 380px);
}

/* Spalten: Default unsichtbar, sliden bei aktiver Phase rein */
.truth-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1),
    transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.truth-col-left {
  transform: translateX(-40px);
}
.truth-col-right {
  transform: translateX(40px);
}
.truth-col .mono-label {
  margin-bottom: 0.5rem;
  color: var(--c-gold);
}
.truth-col p {
  color: var(--c-ink);
  line-height: 1.6;
  font-size: 1rem;
  margin: 0;
}

/* Aktivierungen via Phasen-Klasse auf .truth-pin-stage */
.truth-pin-stage.phase-b .truth-col-left,
.truth-pin-stage.phase-c .truth-col-left,
.truth-pin-stage.phase-d .truth-col-left {
  opacity: 1;
  transform: translateX(0);
}
.truth-pin-stage.phase-c .truth-col-right,
.truth-pin-stage.phase-d .truth-col-right {
  opacity: 1;
  transform: translateX(0);
}

/* In Phase D werden die Spalten gedimmt (zurückgesetzt) — die Wahrheit dominiert */
.truth-pin-stage.phase-d .truth-col {
  opacity: 0.18;
  transition-delay: 0.1s;
}

/* Synthese-Overlay — überlagert die Spalten von unten in Phase D */
.truth-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1),
    transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.truth-pin-stage.phase-d .truth-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.truth-overlay .problem-truth-synth {
  margin: 0;
  width: 100%;
  max-width: 720px;
}

/* Phasen-Indikator (Dots) — unten zentriert, zeigen Fortschritt */
.truth-pin-progress {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  z-index: 2;
  position: relative;
}
.truth-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-gold);
  opacity: 0.22;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.truth-pin-stage.phase-a .truth-dot[data-dot="a"],
.truth-pin-stage.phase-b .truth-dot[data-dot="a"],
.truth-pin-stage.phase-b .truth-dot[data-dot="b"],
.truth-pin-stage.phase-c .truth-dot[data-dot="a"],
.truth-pin-stage.phase-c .truth-dot[data-dot="b"],
.truth-pin-stage.phase-c .truth-dot[data-dot="c"],
.truth-pin-stage.phase-d .truth-dot { opacity: 1; }

.truth-pin-stage.phase-a .truth-dot[data-dot="a"],
.truth-pin-stage.phase-b .truth-dot[data-dot="b"],
.truth-pin-stage.phase-c .truth-dot[data-dot="c"],
.truth-pin-stage.phase-d .truth-dot[data-dot="d"] {
  transform: scale(1.4);
}

/* Synthese-Block — dunkler Hintergrund, zentriert, dramatisch (wiederverwendet im Overlay) */
.problem-truth-synth {
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--c-onyx);
  color: var(--c-paper);
  border-radius: 6px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.35);
}
.problem-truth-synth::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(193,154,63,0.12), transparent 60%);
  pointer-events: none;
}
.truth-synth-label {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-bright);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.truth-synth-lead {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  color: var(--c-white);
  max-width: 60ch;
  margin: 0 auto 1rem;
  position: relative;
  z-index: 1;
}
.truth-synth-lead strong { color: var(--c-gold-bright); font-weight: 500; }
.truth-synth-body {
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  font-size: 0.95rem;
  max-width: 64ch;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.truth-synth-body strong { color: var(--c-white); font-weight: 600; }

.truth-synth-tagline {
  /* Layout-Eigenschaften — color/background kommen von .tagline-shimmer */
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line-on-dark);
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.truth-synth-igy {
  color: var(--c-gold-bright);
  font-weight: 500;
  /* Wenn die Tagline geshimmert wird (background-clip: text), würde der Span 
     auch transparent. Deshalb hier explizit die eigene Farbe wieder setzen,
     außerhalb des Shimmer-Gradients. */
  -webkit-text-fill-color: var(--c-gold-bright);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
}

/* Mobile / reduced-motion: kein Pin, alles untereinander */
@media (max-width: 900px) {
  .truth-pin { height: auto; padding-block: clamp(3rem, 6vw, 5rem); }
  .truth-pin-track { position: static; height: auto; }
  .truth-pin-stage { position: static; height: auto; padding: 0; display: block; }
  .truth-pin-container { padding-block: 0; }
  .truth-pin-body {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
  }
  .truth-col { opacity: 1 !important; transform: none !important; }
  .truth-overlay {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    margin-top: 2.5rem;
  }
  .truth-pin-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .truth-pin { height: auto; padding-block: clamp(3rem, 6vw, 5rem); }
  .truth-pin-track { position: static; height: auto; }
  .truth-pin-stage { position: static; height: auto; padding: 0; display: block; }
  .truth-pin-container { padding-block: 0; }
  .truth-pin-body { grid-template-columns: 1fr 1fr; margin-top: 1.5rem; }
  .truth-col { opacity: 1 !important; transform: none !important; transition: none; }
  .truth-overlay {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    margin-top: 2.5rem;
    pointer-events: auto;
  }
  .truth-pin-progress { display: none; }
}


/* ===================== COOKIE-BANNER (DSGVO) =====================
   Erscheint unten am Bildschirm beim ersten Besuch. Wird nach Klick auf
   einen der Buttons ausgeblendet — Auswahl wird in localStorage gespeichert. */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--c-onyx);
  border-top: 1px solid rgba(193,154,63,0.35);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
  color: var(--c-paper);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2.5rem);
  /* Slide-in Animation beim Erscheinen */
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.cookie-banner.is-visible {
  transform: translateY(0);
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}
.cookie-banner-content {
  min-width: 0;
}
.cookie-banner-title {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-gold-bright);
  margin: 0 0 0.4rem 0;
}
.cookie-banner-desc {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 70ch;
}
.cookie-banner-desc a {
  color: var(--c-gold-bright);
  text-decoration: underline;
  text-decoration-color: rgba(193,154,63,0.4);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.cookie-banner-desc a:hover {
  color: #E0B85A;
  text-decoration-color: #E0B85A;
}
.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.cookie-btn {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 1.25rem;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
.cookie-btn-decline {
  background: transparent;
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.25);
}
.cookie-btn-decline:hover {
  color: var(--c-white);
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
}
.cookie-btn-accept {
  background: linear-gradient(135deg, #D4AC4F 0%, var(--c-gold-bright) 50%, #C19A3F 100%);
  color: var(--c-onyx);
  box-shadow: 0 0 0 1px rgba(193,154,63,0.2), 0 0 16px rgba(193,154,63,0.18);
}
.cookie-btn-accept:hover {
  background: linear-gradient(135deg, #E0B85A 0%, #D4AC4F 50%, #C19A3F 100%);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(193,154,63,0.3), 0 0 24px rgba(193,154,63,0.28);
}
@media (max-width: 720px) {
  .cookie-banner-inner {
    grid-template-columns: 1fr;
  }
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
    text-align: center;
    padding: 0.8rem 1rem;
  }
}