/* ==========================================================================
   AUF DAS LEBEN — Webinar-Landingpage
   Design-System aus der Analyse von aufdasleben.de (Schritt 0):
     · Schrift Roboto (self-hosted). H1 ~42px/700, H2 ~35px/700, H3 ~25px/700,
       Fließtext 16–17px/400, Zeilenhöhe ~1.6 — die Werte der Referenzseite.
     · Eyebrow-Labels in Versalien über jeder Headline (durchgängiges Muster
       auf aufdasleben.de: "ZERTIFIZIERTE TRAUERREDNER-AUSBILDUNG",
       "AUSBILDUNGSTERMINE", "HÄUFIGE FRAGEN" …).
     · CTA = Pill-Button, gelb mit DUNKLEM Text, Radius 30–50px, 17px/500–600.
     · Flächenwechsel Weiß → Creme (#FFFDD9) → Gelbtöne → Dunkel (#111921).
   Struktur/Interaktion (Countdown, Formularkarte, FAQ, Reveal) analog zur
   Schwesterseite webinar.martinredet.de.

   HARTE REGEL: niemals weißer Text auf gelbem Grund — auf Gelb immer #111921.
   ========================================================================== */

:root {
  /* Farben — Dunkel (Primärfarbe) */
  --ink-900: #111921;
  --ink-800: #1b242e;
  --ink-700: #2b3540;
  --ink-600: #48525d;

  /* Farben — Gelb (Akzentfarbe) */
  --yellow-500: #FCEE4F;   /* Akzent-/CTA-Gelb */
  --yellow-600: #f2e02c;   /* Hover */
  --yellow-200: rgba(252, 238, 79, 0.4);
  --yellow-100: rgba(252, 238, 79, 0.2);

  /* Farben — helle Flächen */
  --cream-100: #fffef7;
  --cream-200: #FFFDD9;    /* von aufdasleben.de übernommen */
  --cream-300: #f4f1e2;
  --white: #ffffff;

  /* Text */
  --text-on-dark: #f7f7f4;
  --text-on-dark-muted: rgba(247, 247, 244, 0.72);
  --text-on-light: #111921;
  --text-on-light-muted: #5a636d;

  /* Typografie */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Radien & Schatten */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 40px rgba(17, 25, 33, 0.10);
  --shadow-lift: 0 18px 50px rgba(17, 25, 33, 0.18);

  /* Layout */
  --container-w: 1180px;
  --section-pad-y: clamp(56px, 8vw, 112px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text-on-light);
  background: var(--cream-100);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(30px, 6.4vw, 46px); letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 4.6vw, 35px); }
h3 { font-size: clamp(20px, 2.6vw, 25px); }

.container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

/* Screenreader-only */
.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;
}

/* Skip-Link für Tastatur-Navigation */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--yellow-500); color: var(--ink-900);
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Sichtbarer Fokus-Ring — Barrierefreiheit */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--ink-900);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible, .on-dark input:focus-visible {
  outline-color: var(--yellow-500);
}

/* ==========================================================================
   BUTTONS — Pill, gelb, dunkler Text (aufdasleben.de-Muster)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 500; font-size: 17px; line-height: 1.25;
  padding: 15px 30px;
  min-height: 52px;                 /* Touch-Ziel ≥ 48px (Mobile-First-Vorgabe) */
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  background: var(--yellow-500);
  color: var(--ink-900);            /* NIEMALS Weiß auf Gelb */
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(17, 25, 33, 0.14);
}
.btn-primary:hover { background: var(--yellow-600); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.7; cursor: default; transform: none; }
.btn-ghost {
  background: transparent; color: var(--ink-900);
  border-color: rgba(17, 25, 33, 0.25);
}
.btn-ghost:hover { border-color: var(--ink-900); transform: translateY(-2px); }
.on-dark .btn-ghost { color: var(--text-on-dark); border-color: rgba(247, 247, 244, 0.4); }
.on-dark .btn-ghost:hover { border-color: var(--yellow-500); color: var(--yellow-500); }
.btn-block { width: 100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 254, 247, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 18px rgba(17, 25, 33, 0.10); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding-top: 10px; padding-bottom: 10px;
}
.logo-badge { display: inline-flex; align-items: center; min-height: 48px; }
.logo-badge img { height: 38px; width: auto; }
@media (min-width: 768px) { .logo-badge img { height: 46px; } }
.header-cta { font-size: 15px; padding: 11px 22px; min-height: 48px; }
/* Auf sehr schmalen Screens würde der Header-CTA umbrechen — dort ausblenden,
   der Hero-CTA sitzt ohnehin direkt darunter im Sichtfeld. */
@media (max-width: 400px) { .header-cta { display: none; } }

/* ==========================================================================
   SEKTIONS-GRUNDLAGEN
   ========================================================================== */
.section { padding: var(--section-pad-y) 0; }
.section-cream { background: var(--cream-200); }
.section-white { background: var(--white); }
.section-dark { background: var(--ink-900); color: var(--text-on-dark); }
.section-dark h2, .section-dark h3 { color: var(--text-on-dark); }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: block;
  font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-on-light-muted);
  margin-bottom: 12px;
}
.section-dark .eyebrow, .section-bg-image .eyebrow, .on-dark .eyebrow { color: var(--yellow-500); }
.section-lead {
  margin-top: 16px; font-size: clamp(16px, 2.2vw, 18px);
  color: var(--text-on-light-muted); line-height: 1.7;
}
.section-dark .section-lead { color: var(--text-on-dark-muted); }

/* Hintergrundbild-Sektionen mit Overlay (Vorgabe-Pattern aus CLAUDE.md) */
.section-bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-on-dark);
}
.section-bg-image::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17, 25, 33, 0.55) 0%, rgba(17, 25, 33, 0.86) 100%);
}
.section-bg-image > .container { position: relative; z-index: 1; }
.section-bg-image h2, .section-bg-image h3 { color: var(--text-on-dark); }
.section-bg-image .section-lead { color: var(--text-on-dark-muted); }

/* ==========================================================================
   HERO
   Heller Hintergrund (Bogengänge, Weiß/Gelb) → KEIN dunkles Overlay, sondern
   dunkler Text auf einer hellen, halbtransparenten Fläche. Mobil liegt der
   Text über einem ruhigen Bildbereich (background-position angepasst).
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 7vw, 88px);
  background-color: var(--cream-200);
  background-image: url("../img/background-custom-1600x891.webp");
  background-size: cover;
  background-position: 72% top;   /* Kernmotiv bleibt mobil sichtbar */
  background-repeat: no-repeat;
}
@media (min-width: 900px) { .hero { background-position: center; } }
/* Sehr dezenter heller Schleier, damit Text auf jedem Bildausschnitt sitzt.
   Bewusst KEIN dunkles Overlay — das Hero-Bild ist hell und CI-konform. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 254, 247, 0.74) 0%, rgba(255, 254, 247, 0.90) 100%);
}
@media (min-width: 900px) {
  .hero::before {
    background: linear-gradient(90deg, rgba(255, 254, 247, 0.93) 0%, rgba(255, 254, 247, 0.78) 55%, rgba(255, 254, 247, 0.45) 100%);
  }
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: clamp(28px, 5vw, 48px); align-items: start; }
/* Mobil: Formular UNTER dem Headline-Text, volle Breite (Vorgabe) */
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; } }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--yellow-500); color: var(--ink-900);
  font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.hero-kicker .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-900);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero-sub {
  margin-top: 18px;
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.65;
  color: var(--ink-700);
  max-width: 44ch;
}
.hero-termin {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding: 12px 20px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(17, 25, 33, 0.12);
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 15px;
}
.hero-termin img { width: 20px; height: 20px; flex: 0 0 auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 480px) { .hero-actions .btn { width: 100%; } }

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.countdown-wrap { margin-top: 28px; }
.countdown {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; max-width: 420px;
}
/* Sehr schmale Screens: zweizeilig statt gequetscht (Vorgabe) */
@media (max-width: 359px) { .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.countdown-item {
  background: var(--ink-900); color: var(--text-on-dark);
  border-radius: var(--radius-md);
  padding: 12px 6px; text-align: center;
}
.section-dark .countdown-item, .section-bg-image .countdown-item {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(247, 247, 244, 0.18);
}
.countdown-num {
  font-size: clamp(22px, 5vw, 30px); font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--yellow-500);
}
.countdown-label {
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-on-dark-muted); margin-top: 4px;
}
.countdown-note {
  margin-top: 10px; font-size: 14px; color: var(--text-on-light-muted);
}
.section-dark .countdown-note, .section-bg-image .countdown-note { color: var(--text-on-dark-muted); }
/* Ein Hinweis-Kasten für zwei Zustände: "Termin folgt" (Platzhalter in der
   config.js) und "Anmeldung geschlossen" (Termin vorbei). Beide sind ruhig
   formuliert — nie ein Fehlertext. */
.countdown-hint {
  margin-top: 4px; font-size: 15px; font-weight: 600;
  padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--yellow-100); color: var(--ink-900);
  border: 1px solid var(--yellow-200);
}
.section-dark .countdown-hint, .section-bg-image .countdown-hint {
  background: rgba(252, 238, 79, 0.14); color: var(--text-on-dark);
  border-color: rgba(252, 238, 79, 0.34);
}

/* ==========================================================================
   ANMELDE-KARTE / FORMULAR
   ========================================================================== */
.signup-card {
  background: var(--white);
  border: 1px solid rgba(17, 25, 33, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--shadow-lift);
}
.signup-eyebrow {
  display: inline-block;
  background: var(--yellow-500); color: var(--ink-900);
  font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.signup-card h3 { margin-bottom: 8px; }
.signup-meta { font-size: 15px; color: var(--text-on-light-muted); margin-bottom: 20px; }
.signup-form { display: grid; gap: 14px; }
.form-field { display: grid; gap: 6px; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--ink-700); }
.form-field input {
  width: 100%;
  font-size: 16px;                 /* mind. 16px — sonst zoomt iOS beim Fokus rein */
  padding: 14px 16px;
  min-height: 52px;                /* Touch-Ziel */
  color: var(--ink-900);
  background: var(--cream-100);
  border: 1.5px solid rgba(17, 25, 33, 0.18);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.form-field input::placeholder { color: #9aa2ab; }
.form-field input:focus {
  border-color: var(--ink-900); background: var(--white); outline: none;
  box-shadow: 0 0 0 3px var(--yellow-200);
}
.form-privacy {
  font-size: 12.5px; line-height: 1.55; color: var(--text-on-light-muted); margin-top: 2px;
}
.form-privacy a { text-decoration: underline; }
.signup-slots {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(17, 25, 33, 0.10);
  font-size: 13.5px; color: var(--text-on-light-muted);
}
.slots-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--yellow-600);
  flex: 0 0 auto;
}
/* Hinweisbox für den noch nicht verdrahteten Formular-Platzhalter.
   Verschwindet, sobald das Formular eine echte CleverReach-Action bekommt
   (siehe assets/js/main.js → initSignupForms). */
.form-notice {
  margin-top: 14px; padding: 11px 14px;
  font-size: 12.5px; line-height: 1.5;
  background: var(--yellow-100); border: 1px dashed var(--yellow-600);
  border-radius: var(--radius-sm); color: var(--ink-700);
}

/* ==========================================================================
   TRUST-LEISTE
   ========================================================================== */
.trust-bar { background: var(--white); padding: clamp(32px, 5vw, 56px) 0; }
.trust-label {
  text-align: center; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-on-light-muted); margin-bottom: 18px;
}
.trust-logos { margin: 0 auto; max-width: 768px; width: 100%; height: auto; opacity: 0.92; }
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-top: clamp(28px, 4vw, 44px);
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  text-align: center; padding: 20px 12px;
  background: var(--cream-200); border-radius: var(--radius-md);
}
.stat-value {
  font-size: clamp(26px, 5vw, 32px); font-weight: 800; line-height: 1.1;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--text-on-light-muted);
}
/* "max. 7" zählt bewusst NICHT hoch (keine sinnvoll zählbare Zahl) —
   wird stattdessen nur dezent eingeblendet. */
.stat-static .stat-value { opacity: 0; transform: translateY(6px); transition: opacity 0.7s ease, transform 0.7s ease; }
.stat-static.is-visible .stat-value { opacity: 1; transform: none; }

/* ==========================================================================
   PAIN-RECOGNITION ("Vielleicht kennst du das")
   ========================================================================== */
.pain-list { display: grid; gap: 12px; max-width: 800px; margin: 0 auto; }
.pain-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--white);
  border: 1px solid rgba(17, 25, 33, 0.08);
  border-left: 4px solid var(--yellow-500);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 16px; line-height: 1.6;
}
.pain-item img { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 4px; opacity: 0.75; }
.reframe {
  max-width: 800px; margin: clamp(28px, 4vw, 40px) auto 0;
  background: var(--ink-900); color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 34px);
  text-align: center;
}
.reframe p { font-size: clamp(17px, 2.6vw, 21px); line-height: 1.55; font-weight: 500; }
.reframe strong { color: var(--yellow-500); }

/* ==========================================================================
   "WAS DICH IM WEBINAR ERWARTET" — nacheinander eingeblendete Punkte
   ========================================================================== */
.expect-list { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.expect-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(247, 247, 244, 0.16);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.expect-num {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--yellow-500); color: var(--ink-900);
  font-weight: 800; font-size: 15px;
}
.expect-item p { font-size: clamp(15.5px, 2.2vw, 17px); line-height: 1.6; }

/* ==========================================================================
   SINN-SÄULEN (4 bebilderte Kacheln)
   ========================================================================== */
.pillars { display: grid; gap: 20px; }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.pillar {
  background: var(--white);
  border: 1px solid rgba(17, 25, 33, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pillar img { width: 100%; height: 200px; object-fit: cover; }
@media (min-width: 1024px) { .pillar img { height: 180px; } }
.pillar-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.pillar-body h3 { font-size: 19px; line-height: 1.3; }
.pillar-body p { font-size: 15px; line-height: 1.6; color: var(--text-on-light-muted); }

/* ==========================================================================
   "WAS DU NICHT BRAUCHST"
   ========================================================================== */
.nothing-box {
  max-width: 820px; margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(17, 25, 33, 0.10);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-soft);
}
.nothing-list { display: grid; gap: 10px; }
@media (min-width: 640px) { .nothing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nothing-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: var(--cream-200);
  border-radius: var(--radius-md);
  font-size: 15.5px; font-weight: 500;
}
.nothing-item svg { flex: 0 0 auto; width: 20px; height: 20px; }
.nothing-close {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(17, 25, 33, 0.10);
  font-size: clamp(16px, 2.4vw, 18.5px); line-height: 1.6;
}

/* ==========================================================================
   GASTGEBER (Martin & Verena)
   ========================================================================== */
.hosts-grid { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; }
@media (min-width: 900px) { .hosts-grid { grid-template-columns: 1fr 1fr; } }
.hosts-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.hosts-photo img { width: 100%; height: auto; }
.hosts-portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.host-portrait {
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--white); border: 1px solid rgba(17, 25, 33, 0.08);
  margin: 0;
}
.host-portrait img { width: 100%; height: 190px; object-fit: cover; object-position: center top; }
.host-portrait figcaption {
  padding: 10px 12px; font-size: 13.5px; font-weight: 600; text-align: center;
}
.hosts-copy p + p { margin-top: 14px; }
.hosts-copy p { font-size: clamp(15.5px, 2.2vw, 17px); line-height: 1.7; }
/* Deutlich sichtbarer Platzhalter — die persönliche Geschichte liefert der Kunde */
.placeholder-box {
  margin-top: 20px; padding: 18px 20px;
  border: 2px dashed var(--yellow-600);
  background: var(--yellow-100);
  border-radius: var(--radius-md);
  font-size: 15px; line-height: 1.6; color: var(--ink-700);
}
.placeholder-box strong { display: block; margin-bottom: 4px; color: var(--ink-900); }

/* ==========================================================================
   FOMO ("Warum live dabei sein?")
   ========================================================================== */
.fomo-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .fomo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fomo-card {
  background: var(--white);
  border: 1px solid rgba(17, 25, 33, 0.08);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.fomo-icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--yellow-500); color: var(--ink-900);
}
.fomo-card h3 { font-size: 19px; }
.fomo-card p { font-size: 15px; line-height: 1.6; color: var(--text-on-light-muted); }

/* ==========================================================================
   FAQ — Akkordeon
   ========================================================================== */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item {
  background: var(--white);
  border: 1px solid rgba(17, 25, 33, 0.10);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item.is-open { border-color: var(--yellow-600); }
.faq-question {
  width: 100%; min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  background: transparent; border: 0; text-align: left;
  font-size: 16px; font-weight: 600; color: var(--ink-900);
}
.faq-question svg {
  flex: 0 0 auto; width: 20px; height: 20px;
  transition: transform 0.25s ease;
}
.faq-item.is-open .faq-question svg { transform: rotate(180deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer-inner {
  padding: 0 20px 18px;
  font-size: 15.5px; line-height: 1.7; color: var(--text-on-light-muted);
}

/* ==========================================================================
   FINALER CTA
   ========================================================================== */
.final-grid { display: grid; gap: clamp(28px, 5vw, 48px); align-items: center; }
@media (min-width: 900px) { .final-grid { grid-template-columns: 1fr 0.9fr; } }

/* ==========================================================================
   FOOTER
   Kein Standort-Claim, keine Tagline, keine Produktbeschreibung —
   nur Markenname, Links und Rechtliches (Vorgabe).
   ========================================================================== */
.site-footer { background: var(--ink-900); color: var(--text-on-dark); padding: 48px 0 28px; }
.footer-top {
  display: flex; flex-direction: column; gap: 24px;
  padding-bottom: 24px; border-bottom: 1px solid rgba(247, 247, 244, 0.14);
}
@media (min-width: 720px) { .footer-top { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-brand img { height: 40px; width: auto; }
.footer-brand p { margin-top: 10px; font-weight: 700; letter-spacing: 0.5px; font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-links a {
  font-size: 14.5px; color: var(--text-on-dark-muted);
  min-height: 48px; display: inline-flex; align-items: center;
}
.footer-links a:hover { color: var(--yellow-500); }
.footer-links button {
  font-size: 14.5px; color: var(--text-on-dark-muted);
  background: none; border: 0; padding: 0;
  min-height: 48px; display: inline-flex; align-items: center;
  font-family: inherit;
}
.footer-links button:hover { color: var(--yellow-500); }
.footer-bottom {
  padding-top: 20px; font-size: 13px; color: var(--text-on-dark-muted);
}

/* ==========================================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ========================================================================== */
.legal { padding: clamp(40px, 6vw, 72px) 0; background: var(--cream-100); }
.legal-inner { max-width: 820px; margin: 0 auto; }
.legal-inner h1 { margin-bottom: 24px; }
.legal-inner h2 {
  font-size: clamp(20px, 3vw, 24px);
  margin-top: 36px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--yellow-500);
}
.legal-inner h3 { font-size: 18px; margin-top: 22px; margin-bottom: 8px; }
.legal-inner p, .legal-inner li { font-size: 15.5px; line-height: 1.75; color: var(--ink-700); }
.legal-inner p + p { margin-top: 12px; }
.legal-inner ul { list-style: disc; padding-left: 22px; margin: 12px 0; }
.legal-inner li { margin-bottom: 6px; }
.legal-inner a { text-decoration: underline; }
.legal-back { margin-top: 40px; }
/* Platzhalter für noch fehlende Rechtsdaten — im Layout nicht zu übersehen */
.legal-placeholder {
  display: block; margin: 12px 0;
  padding: 16px 18px;
  border: 2px dashed var(--yellow-600);
  background: var(--yellow-100);
  border-radius: var(--radius-md);
  font-size: 15px; line-height: 1.7; color: var(--ink-700);
}

/* ==========================================================================
   DANKE-SEITE
   ========================================================================== */
.thanks-hero {
  min-height: 70vh; display: grid; align-items: center;
  padding: clamp(40px, 7vw, 80px) 0;
  background: var(--ink-900); color: var(--text-on-dark);
}
.thanks-card {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(247, 247, 244, 0.16);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 48px);
}
.thanks-check {
  width: 62px; height: 62px; margin: 0 auto 20px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--yellow-500);
}
.thanks-card h1 { margin-bottom: 16px; color: var(--text-on-dark); }
.thanks-card > p { font-size: 16.5px; line-height: 1.7; color: var(--text-on-dark-muted); }
.thanks-card > p + p { margin-top: 12px; }
.thanks-card strong { color: var(--text-on-dark); }
.thanks-steps { display: grid; gap: 12px; margin: 30px 0; text-align: left; }
@media (min-width: 720px) { .thanks-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.thanks-step {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(247, 247, 244, 0.14);
  border-radius: var(--radius-md);
  padding: 18px;
}
.step-num { font-size: 22px; font-weight: 800; color: var(--yellow-500); margin-bottom: 6px; }
.thanks-step p { font-size: 14.5px; line-height: 1.6; color: var(--text-on-dark-muted); }

/* ==========================================================================
   SCROLL-REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-1 { transition-delay: 0.08s; }
.reveal-2 { transition-delay: 0.16s; }
.reveal-3 { transition-delay: 0.24s; }
.reveal-4 { transition-delay: 0.32s; }
.reveal-5 { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   ERGÄNZUNGEN 23.09.2026 — Umbau auf Basis der Kundenfolien
   Neue Sektionen: Kernbotschaft/Haltung, Marktzahlen, Für-wen, Erfahrungen.
   Bewusst mit den bestehenden Tokens gebaut, keine neuen Farben.
   ========================================================================== */

/* Trust-Leiste: drei statt vier Kennzahlen (E20) ------------------------- */
@media (min-width: 720px) {
  .stats-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Zwischenzeile über den fünf Zweifeln ------------------------------------ */
.pain-intro {
  text-align: center;
  font-size: clamp(17px, 2.2vw, 19px);
  font-weight: 600;
  color: var(--text-on-light);
  margin: 0 0 22px;
}

/* Kategorie-Label auf den vier Säulen (Sinn/Erfüllung/…) ------------------ */
.pillar-tag {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: 8px;
}

/* Stimmen (Google-Rezensionen) auf dunklem Grund -------------------------- */
.voices { display: grid; gap: 18px; }
@media (min-width: 900px) { .voices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.voice {
  margin: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(252, 238, 79, 0.25);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.voice blockquote {
  margin: 0;
  font-size: 16px; line-height: 1.65;
  color: var(--text-on-dark);
}
.voice figcaption {
  margin-top: auto;
  font-size: 14px; font-weight: 700;
  color: var(--text-on-dark);
}
.voice figcaption span {
  display: block;
  font-size: 12.5px; font-weight: 400;
  color: var(--text-on-dark-muted);
  margin-top: 2px;
}

/* Marktzahlen ------------------------------------------------------------- */
.market-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.market-item {
  text-align: center;
  padding: 28px 18px;
  background: var(--cream-200);
  border-radius: var(--radius-md);
}
.market-value {
  font-size: clamp(30px, 5.5vw, 40px); font-weight: 800; line-height: 1.05;
  color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.market-item p {
  margin: 10px 0 0;
  font-size: 14.5px; line-height: 1.5;
  color: var(--text-on-light-muted);
}
.market-source {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-on-light-muted);
}

/* Mitbringen / nicht brauchen (zwei Spalten) ------------------------------ */
.need-grid { display: grid; gap: 18px; }
@media (min-width: 820px) { .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.need-col {
  background: var(--white);
  border: 1px solid rgba(17, 25, 33, 0.08);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.need-col h3 { margin: 0 0 16px; font-size: 20px; }
.need-col--yes { border-top: 3px solid var(--yellow-500); }
.need-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.need-list li {
  position: relative; padding-left: 30px;
  font-size: 16px; line-height: 1.5; color: var(--text-on-light);
}
.need-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 18px; height: 10px;
  border-left: 2.4px solid var(--ink-900);
  border-bottom: 2.4px solid var(--ink-900);
  transform: rotate(-45deg);
}

/* Für wen / eher nicht ----------------------------------------------------- */
.audience-grid { display: grid; gap: 18px; }
@media (min-width: 820px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.audience-col {
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.audience-col h3 { margin: 0 0 16px; font-size: 20px; }
.audience-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.audience-col li {
  position: relative; padding-left: 28px;
  font-size: 16px; line-height: 1.5;
}
.audience-col--yes { background: var(--cream-200); }
.audience-col--yes li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 15px; height: 8px;
  border-left: 2.4px solid var(--ink-900);
  border-bottom: 2.4px solid var(--ink-900);
  transform: rotate(-45deg);
}
.audience-col--no { background: var(--cream-300); }
.audience-col--no li { color: var(--text-on-light-muted); }
.audience-col--no li::before {
  content: "×"; position: absolute; left: 4px; top: -2px;
  font-size: 20px; font-weight: 600; color: var(--ink-600);
}

/* Erfahrungen / Testimonials ---------------------------------------------- */
.stories { display: grid; gap: 20px; }
@media (min-width: 820px) { .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story {
  margin: 0;
  background: var(--cream-200);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
@media (min-width: 560px) {
  .story { flex-direction: row; align-items: flex-start; gap: 22px; }
}
.story img {
  width: 88px; height: 88px; flex: 0 0 88px;
  border-radius: 50%; object-fit: cover; object-position: center top;
}
.story-body { display: flex; flex-direction: column; gap: 14px; }
.story blockquote {
  margin: 0;
  font-size: 16.5px; line-height: 1.6;
  color: var(--text-on-light);
}
.story figcaption {
  font-size: 14px; line-height: 1.4;
  color: var(--text-on-light-muted);
}
.story figcaption strong {
  display: block;
  font-size: 15.5px;
  color: var(--text-on-light);
  margin-bottom: 2px;
}

/* Gastgeber: Aufmacher-Zitat der persönlichen Geschichte ------------------- */
.hosts-quote {
  font-size: clamp(20px, 3vw, 25px);
  font-weight: 700; line-height: 1.35;
  color: var(--ink-900);
  margin: 0 0 18px;
}

/* BUGFIX 23.09.2026 — [hidden] wurde von Layout-Regeln überstimmt.
   Der Countdown-Block trägt im Platzhalter-Zustand (kein Termin in config.js)
   korrekt das hidden-Attribut, wurde aber trotzdem angezeigt: `.countdown`
   setzt `display: grid`, und eine Klassenregel schlägt das Browser-Default
   `[hidden] { display: none }`. Auf der Seite stand dadurch ein "00 00 00 00"
   direkt neben dem Hinweis "Der nächste Termin wird gerade festgelegt" —
   genau der Zustand, den die Countdown-Logik vermeiden soll.
   Gilt global, damit derselbe Konflikt bei künftigen Layout-Klassen
   (Flex/Grid auf einem per hidden gesteuerten Element) nicht wieder auftritt. */
[hidden] { display: none !important; }

/* Erzwungener Zeilenumbruch nur auf breiten Viewports — auf dem Handy führt er
   sonst zu einer sehr kurzen zweiten Zeile mitten im Satz. */
.br-wide { display: none; }
@media (min-width: 900px) { .br-wide { display: inline; } }

/* ==========================================================================
   HERO-META: Termin + Gastgeber (ersetzt die alte .hero-termin-Pill)
   Die alte Pill war auf dem Handy eine breite, fast leere Fläche. Diese Karte
   trägt zwei Informationen, die oben hingehören: wann es stattfindet und wer
   spricht — Letzteres mit Gesichtern, damit der Hero lebendiger wird.
   ========================================================================== */
.hero-meta {
  display: grid;
  gap: 2px;
  margin: 22px 0 26px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(17, 25, 33, 0.09);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(3px);
}
/* Bewusst KEINE zweispaltige Variante: Die Hero-Textspalte ist auf Desktop nur
   rund die halbe Containerbreite, dort brach "Mittwoch, 14.10. um 17:00 Uhr"
   dreizeilig um. Gestapelt bleibt die Karte auf jeder Breite ruhig lesbar. */

.hero-meta__date,
.hero-meta__hosts {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
}
.hero-meta__hosts { border-top: 1px solid rgba(17, 25, 33, 0.09); }

.hero-meta strong {
  display: block;
  font-size: 15.5px; font-weight: 700; line-height: 1.25;
  color: var(--ink-900);
}
.hero-meta span {
  display: block;
  font-size: 12.5px; line-height: 1.3;
  color: var(--text-on-light-muted);
  margin-top: 2px;
}
.hero-meta__leaf { width: 24px; height: 24px; flex: 0 0 24px; }

/* Zwei überlappende Porträts — kompakt, aber erkennbar */
.hero-meta__faces { display: flex; flex: 0 0 auto; }
.hero-meta__faces img {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
}
.hero-meta__faces img + img { margin-left: -12px; }

/* --------------------------------------------------------------------------
   LOGO — Seitenverhältnis 7,5:1. Bei 38px Höhe wurde es 285px breit und
   nahm auf einem 375px-Screen fast die volle Breite ein. Mobil deshalb
   kleiner; die Ausbildungsseite stellt es mit 34px ebenfalls kompakter dar.
   -------------------------------------------------------------------------- */
.logo-badge img { height: 30px; }
@media (min-width: 560px) { .logo-badge img { height: 34px; } }
@media (min-width: 768px) { .logo-badge img { height: 40px; } }

/* ==========================================================================
   NACHBESSERUNGEN 23.09.2026 (zweite Feedback-Runde)
   ========================================================================== */

/* Trust-Leiste: Bei drei Kennzahlen im Zweispalter stand die dritte Kachel
   allein und linksbündig in der zweiten Reihe. Sie läuft jetzt über beide
   Spalten und sitzt mittig, in der Breite einer normalen Kachel. */
@media (max-width: 719px) {
  .stats-three .stat:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 7px);   /* 7px = halbe Gitterlücke, damit die Kachel
                                 genauso breit ist wie die beiden darüber */
    min-width: 160px;
  }
}

/* Marktzahlen: Das Plus hinter "50%" etwas zurücknehmen, damit die Zahl
   die Hauptaussage bleibt. */
.market-plus { font-size: 0.72em; font-weight: 700; vertical-align: 0.12em; }

/* Trendlinie statt Pfeil-Schriftzeichen */
.market-value--icon { display: flex; justify-content: center; align-items: center; }
.market-value--icon svg {
  width: clamp(64px, 12vw, 80px);
  height: auto;
}

/* Resümee unter den Testimonial-Zitaten: stellt den Bezug zu AUF DAS LEBEN her */
.story-outcome {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: var(--text-on-light-muted);
}
.story-outcome span { color: var(--text-on-light); font-weight: 500; }

.stories-close {
  margin: 26px auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: 16.5px; line-height: 1.6;
  color: var(--text-on-light);
}


/* Gender-Schreibweise nicht am Schrägstrich-Bindestrich trennen: In der
   schmalen dritten Trust-Kachel brach "Redner/-innen" sonst zu "Redner/-"
   und "innen" um. */
.stat-label .nowrap, .market-item .nowrap { white-space: nowrap; }