/* =============================================================================
   VSL-Landingpage — strategie.fachkraft-jetzt.de
   Light-Mode Ableitung aus Fachkraft-Jetzt Styleguide v1 (15.04.2026)
   Design-Prinzip: Weißer Hintergrund, Brand-Akzente Gold + Teal, Gradient-CTA
   mit Glow bleibt Signature. Glass-Cards als weiße Panels mit weichem Schatten.
   Mobile-First. One-CTA. Keine Nav.
   ============================================================================= */

/* ------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------ */
:root {
  /* Brand */
  --color-gold:         #F2CD5C;
  --color-gold-light:   #F6D988;
  --color-gold-soft:    rgba(242, 205, 92, 0.14);
  --color-gold-bg:      rgba(242, 205, 92, 0.08);
  --color-gold-border:  rgba(242, 205, 92, 0.55);
  --color-gold-glow:    rgba(242, 205, 92, 0.28);

  --color-teal:         #6FBFB1;
  --color-teal-light:   #9EE0D2;
  --color-teal-dark:    #4EA094;
  --color-teal-soft:    rgba(111, 191, 177, 0.16);
  --color-teal-bg:      rgba(111, 191, 177, 0.08);
  --color-teal-border:  rgba(111, 191, 177, 0.55);
  --color-teal-glow:    rgba(111, 191, 177, 0.22);

  --color-petrol:       #2C5B70;
  --color-petrol-dark:  #1B3E4F;
  --warning:            #EF7850;
  --warning-soft:       rgba(239, 120, 80, 0.10);
  --warning-border:     rgba(239, 120, 80, 0.35);

  /* Surfaces (Dark-Mode, aus Relaunch übernommen 20.04.) */
  --bg:                 #081520;
  --bg-soft:            #050E16;
  --bg-tint:            rgba(242, 205, 92, 0.04);
  --bg-card:            rgba(255, 255, 255, 0.035);
  --bg-card-alt:        rgba(255, 255, 255, 0.055);
  --bg-featured:        rgba(242, 205, 92, 0.06);

  /* Text (Weiß-Hierarchie auf Dunkel) */
  --text:               rgba(255, 255, 255, 0.96);
  --text-bright:        rgba(255, 255, 255, 0.96);
  --text-body:          rgba(255, 255, 255, 0.78);
  --text-muted:         rgba(255, 255, 255, 0.62);
  --text-dim:           rgba(255, 255, 255, 0.42);
  --text-on-brand:      #0B1D2A;

  /* Borders */
  --border:             rgba(255, 255, 255, 0.08);
  --border-bright:      rgba(255, 255, 255, 0.14);
  --border-hover:       rgba(111, 191, 177, 0.55);
  --border-gold:        rgba(242, 205, 92, 0.55);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid Skala */
  --fs-h1:    clamp(34px, 4.8vw, 62px);
  --fs-h2:    clamp(28px, 3.6vw, 46px);
  --fs-h3:    clamp(22px, 2.2vw, 30px);
  --fs-h4:    clamp(18px, 1.6vw, 22px);
  --fs-lead:  clamp(17px, 1.3vw, 20px);
  --fs-body:  17px;
  --fs-small: 15px;
  --fs-micro: 13px;
  --fs-label: 12px;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 120px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows (Light) */
  --shadow-xs:   0 1px 2px rgba(11, 29, 42, 0.04);
  --shadow-sm:   0 2px 6px rgba(11, 29, 42, 0.06), 0 1px 2px rgba(11, 29, 42, 0.04);
  --shadow-md:   0 8px 24px rgba(11, 29, 42, 0.08), 0 2px 6px rgba(11, 29, 42, 0.04);
  --shadow-lg:   0 18px 48px rgba(11, 29, 42, 0.10), 0 4px 12px rgba(11, 29, 42, 0.06);
  --shadow-gold:
    0 4px 20px rgba(242, 205, 92, 0.45),
    0 0 48px rgba(242, 205, 92, 0.25),
    0 0 90px rgba(111, 191, 177, 0.18),
    0 0 130px rgba(242, 205, 92, 0.10);
  --shadow-gold-hover:
    0 8px 32px rgba(242, 205, 92, 0.55),
    0 0 70px rgba(242, 205, 92, 0.35),
    0 0 110px rgba(111, 191, 177, 0.24),
    0 0 160px rgba(242, 205, 92, 0.14);

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1160px;
  --container-narrow: 880px;
}

/* ------------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-petrol);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(44, 91, 112, 0.35);
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

a:hover {
  color: var(--color-teal-dark);
  text-decoration-color: var(--color-teal);
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--s-4); color: var(--text-body); }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--text); font-weight: 700; }

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
li { margin-bottom: var(--s-2); color: var(--text-body); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-10) 0;
}

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

/* ------------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: clamp(56px, 8vw, 96px) 0;
  position: relative;
}

/* Section-Modifier transparent — Body-Glow kommt durch (20.04.) */
.section--soft {
  background: transparent;
  border-top: none;
  border-bottom: none;
}

.section--tint {
  background: transparent;
}

.section__header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

.section__kicker {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--color-teal-bg);
  border: 1px solid var(--color-teal-border);
  margin-bottom: var(--s-4);
}

.section__kicker--warn {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.section__kicker--gold {
  color: #8A6B14;
  background: var(--color-gold-bg);
  border-color: var(--color-gold-border);
}

/* ------------------------------------------------------------------
   4. BRAND PRIMITIVES
   ------------------------------------------------------------------ */
.grad-text {
  background: linear-gradient(110deg, #F2CD5C 0%, #6FBFB1 35%, #F6D988 50%, #6FBFB1 65%, #F2CD5C 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: grad-shine 6s linear infinite;
}

@keyframes grad-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}

@media (prefers-reduced-motion: reduce) {
  .grad-text { animation: none; }
}

.highlight-gold {
  background: linear-gradient(180deg, transparent 58%, var(--color-gold) 58%);
  padding: 0 3px;
}

/* ------------------------------------------------------------------
   5. PRIMARY CTA — Gradient + Glow + Shine (SIGNATURE)
   ------------------------------------------------------------------ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  background: linear-gradient(135deg, #F2CD5C 0%, #6FBFB1 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #0B1D2A;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: var(--shadow-gold);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-hover);
  color: #0B1D2A;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  animation: shine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%, 100% { left: -100%; }
  50%      { left: 150%; }
}

.btn-primary svg {
  transition: transform var(--t-fast);
}

.btn-primary:hover svg {
  transform: translateX(3px);
}

.btn-primary--xl {
  padding: 22px 48px;
  font-size: 19px;
}

/* Secondary (Text-Link-Button) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--bg);
  border: 1.5px solid var(--border-bright);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.btn-secondary:hover {
  border-color: var(--color-teal);
  color: var(--color-teal-dark);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   6. HEADER (Logo only, keine Nav)
   ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  padding: 0;
  background: transparent;
  border-bottom: none;
}

.site-header .container {
  display: flex;
  justify-content: center;
}

.site-header__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: 10px 22px;
  background: rgba(8, 21, 32, 0.45);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: calc(var(--container-max) - 16px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Nach Scroll: stärker gesättigt */
.site-header.is-scrolled .site-header__pill {
  background: rgba(8, 21, 32, 0.72);
  border-color: rgba(255, 255, 255, 0.18);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__icon {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__main {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-gold);
}

.brand__sub {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-top: 1px;
}

@media (max-width: 600px) {
  .brand__icon { height: 32px; width: 32px; }
  .brand__main { font-size: 15px; }
  .brand__sub { font-size: 9.5px; }
}

.site-header__meta {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-weight: 600;
}

/* ------------------------------------------------------------------
   7. HERO mit Video + Kapitel-Liste
   ------------------------------------------------------------------ */
.hero {
  padding: clamp(88px, 11vw, 110px) 0 clamp(56px, 8vw, 96px);
  background: transparent;
  position: relative;
}

.hero__kicker {
  display: block;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  letter-spacing: 0.01em;
}

.hero__headline {
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 auto var(--s-5);
  max-width: 22ch;
  text-align: center;
}

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--text-body);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 auto var(--s-8);
  text-align: center;
}

.hero__sub p { margin: 0 0 var(--s-3); }

.hero__video-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: flex-start;
}

.hero__video-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

@media (min-width: 900px) {
  .hero__video-row {
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
    gap: var(--s-8);
  }
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0B1D2A 0%, #1B3E4F 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-bright);
}

/* Selbst gehostetes Hero-Video (10.08.2026). Fuellt den 16:9-Rahmen komplett.
   object-fit: cover schneidet lieber ab, als schwarze Balken zu zeigen. Das
   Quellvideo ist selbst 16:9, es wird also faktisch nichts abgeschnitten. */
.video-frame__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0B1D2A;
}

/* Ton-an-Knopf, OBEN RECHTS (Niklaas 10.08.: "der ist ja ueber der Schrift,
   das ist natuerlich auch Kaese, der muesste oben rechts sein").
   Autoplay ist browserseitig auf stumm gezwungen, ohne diesen Knopf saehe der
   Besucher jemanden reden und hoerte nichts.

   Warum oben rechts die einzige freie Ecke ist:
   - Mitte  = die Textkarten der ersten 7 Sekunden
   - unten links = die Sprecher-Blase
   - unten quer  = die native Steuerleiste UND der Cookie-Banner
   Oben rechts kollidiert mit keinem davon, auf keiner Fensterbreite.

   ⛔ Damit ist auch die Consent-Kopplung hinfaellig geworden: der Knopf lag
   vorher mittig und wurde vom Banner verdeckt, deshalb war er bis zum
   Cookie-Klick versteckt. Oben rechts gibt es keine Ueberlappung mehr, also
   erscheint er sofort. Ein Besucher, der den Banner ignoriert, kann den Ton
   jetzt trotzdem anschalten. */
.video-frame__sound {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: #F2CD5C;
  color: #0B1D2A;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease;
}
.video-frame__sound:hover { transform: scale(1.05); }
.video-frame__sound:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.video-frame__sound[hidden] { display: none; }

@media (max-width: 620px) {
  .video-frame__sound { font-size: 13px; padding: 9px 13px; gap: 6px; min-height: 36px; top: 10px; right: 10px; }
  .video-frame__sound svg { width: 16px; height: 16px; }
}

.video-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  text-align: center;
  padding: var(--s-6);
  gap: var(--s-4);
}

.video-frame__play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 40px rgba(242, 205, 92, 0.35), 0 0 80px rgba(111, 191, 177, 0.25);
  cursor: pointer;
  border: none;
}

.video-frame__play svg {
  margin-left: 5px;
}

.video-frame__label {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.02em;
}

.video-frame__note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 36ch;
}

.video-frame__meta {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}

.video-frame__meta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
}

.checklist {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--s-2) 0 0 0;
  box-shadow: none;
}

.checklist__title {
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  margin-bottom: var(--s-4);
}

.checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-body);
}

.checklist__item:last-child { border-bottom: none; }

.checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  box-shadow: 0 2px 8px rgba(242, 205, 92, 0.25);
}

.hero__trustbar {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) clamp(24px, 4.5vw, 56px);
  padding: 0;
  border: none;
  max-width: none;
}

.hero__trustbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.hero__trustbar-value {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.hero__trustbar-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 22ch;
}

/* .hero__mini-text ("Kein Opt-In, keine Email-Wall") ist am 10.08. komplett
   entfallen (Niklaas: erst mobil raus, dann auch auf dem Desktop). Regeln
   ersatzlos entfernt, Rollback ueber Git. */

.hero__proof {
  margin: var(--s-7) auto 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4) clamp(28px, 5vw, 56px);
}

.reviews-bar {
  margin: var(--s-5) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* Zeilenabstand 0, weil die Badges ihn ueber ihre eigene Polsterung mitbringen */
  gap: 0 20px;
}

.reviews-bar__sep {
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.12);
}

.reviews-bar__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-body);
  font-size: 13px;
  transition: color var(--t-fast);
  /* WCAG 2.5.5: Tap-Target mindestens 44x44 */
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  box-sizing: border-box;
}

.reviews-bar__badge:hover {
  color: var(--color-teal-dark);
}

.reviews-bar__badge strong {
  color: var(--text);
  font-weight: 700;
}

.reviews-bar__stars {
  display: inline-flex;
  gap: 1px;
}

.hero__proof-label { font-weight: 700; color: var(--text-body); }

.hero__proof-logos {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
}

.hero__proof-logo {
  height: 28px;
  width: auto;
  opacity: 0.72;
  /* Dark-Mode: farbige/dunkle PNG-Logos in Weiß-Monochrom umfärben */
  filter: brightness(0) invert(1);
  transition: opacity var(--t-fast);
}

.hero__proof-logo:hover {
  opacity: 1;
}

/* ------------------------------------------------------------------
   8. PROBLEM-AGITATION
   ------------------------------------------------------------------ */
.prob {
  max-width: 820px;
  margin: 0 auto;
}

.prob__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
  margin: var(--s-8) 0;
}

.prob__stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warning);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}

.prob__stat-value {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--warning);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--s-2);
}

.prob__stat-label {
  font-size: var(--fs-small);
  color: var(--text-body);
  font-weight: 600;
}

.prob__source {
  font-size: var(--fs-micro);
  color: var(--text-dim);
  margin-top: var(--s-6);
}

.prob__kicker-big {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin: var(--s-8) 0 var(--s-3);
}

/* ------------------------------------------------------------------
   9. MOAT
   ------------------------------------------------------------------ */
.moat {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}

@media (min-width: 900px) {
  .moat { grid-template-columns: 1.4fr 1fr; gap: var(--s-10); }
}

.moat__quote {
  position: relative;
  padding: var(--s-9) var(--s-8) var(--s-8);
  background:
    radial-gradient(ellipse at top right, rgba(111, 191, 177, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(242, 205, 92, 0.08) 0%, transparent 55%),
    #FFFFFF;
  border: 1px solid var(--color-gold-border);
  border-radius: var(--r-xl);
  box-shadow:
    0 24px 60px rgba(11, 29, 42, 0.10),
    0 8px 18px rgba(11, 29, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.moat__quote::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border-radius: var(--r-xl);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.moat__quote-mark {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  left: clamp(20px, 3vw, 32px);
  width: clamp(44px, 5vw, 60px);
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px rgba(242, 205, 92, 0.25));
  pointer-events: none;
}

.moat__quote-text {
  position: relative;
  margin: clamp(48px, 6vw, 64px) 0 var(--s-6) 0;
  padding: 0;
  font-family: 'Syne', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  font-style: normal;
  color: var(--text);
  line-height: 1.22;
  letter-spacing: -0.012em;
  quotes: none;
}

.moat__quote-text::before,
.moat__quote-text::after {
  content: "";
}

.moat__quote-attrib {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.moat__quote-attrib-rule {
  display: inline-block;
  width: 36px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-teal) 100%);
  flex-shrink: 0;
}

.moat__quote-attrib-text {
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------
   10. VALUE STACK
   ------------------------------------------------------------------ */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

@media (min-width: 680px) { .vs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vs-grid { grid-template-columns: repeat(3, 1fr); } }

.vs-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  position: relative;
}

.vs-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-teal);
  box-shadow: var(--shadow-md);
}

.vs-card--featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--color-gold), var(--color-teal)) border-box;
}

.vs-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-teal-bg);
  color: var(--color-teal-dark);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}

.vs-card--featured .vs-card__num {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  color: #0B1D2A;
}

.vs-card__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: var(--s-3);
  line-height: 1.25;
}

.vs-card__body {
  font-size: var(--fs-small);
  color: var(--text-body);
  line-height: 1.55;
}

.vs-card__tag {
  position: absolute;
  top: -11px;
  right: var(--s-5);
  display: inline-block;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  color: #0B1D2A;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 3px 10px rgba(242, 205, 92, 0.35);
}

.vs-footer-note {
  text-align: center;
  margin-top: var(--s-8);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--text);
}

/* ------------------------------------------------------------------
   11. METHODE (5-Schlüssel)
   ------------------------------------------------------------------ */
.method {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: flex-start;
}

@media (min-width: 960px) {
  .method { grid-template-columns: 2.2fr 1fr; gap: var(--s-9); }
}

.method__intro {
  font-size: var(--fs-lead);
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: var(--s-7);
  max-width: 62ch;
}

.keys-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.keys-table th,
.keys-table td {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.keys-table th {
  background: var(--bg-tint);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}

.keys-table tr:last-child td { border-bottom: none; }

.keys-table td:first-child {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--color-teal-dark);
  font-size: 18px;
  width: 64px;
}

.keys-table strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 2px;
}

.method__book {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.method__book img {
  width: 280px;
  max-width: 80%;
  margin: 0 auto var(--s-4);
  box-shadow: 0 24px 48px rgba(11, 29, 42, 0.18), 0 8px 16px rgba(11, 29, 42, 0.08);
  border-radius: 6px;
}

.method__book-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: var(--s-2);
}

.method__book-sub {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

.method__outro {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
  font-size: var(--fs-body);
  color: var(--text-body);
  max-width: 70ch;
}

/* ------------------------------------------------------------------
   12. CASES
   ------------------------------------------------------------------ */
.cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media (min-width: 800px) { .cases { grid-template-columns: repeat(2, 1fr); } }

/* Schliefke als 5. Card über volle Breite */
.case--wide { grid-column: 1 / -1; }

/* Sichtbarer Platzhalter für noch zu verifizierende Zahlen */
.case__stat-value[data-verify] {
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px dashed var(--warning-border);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  display: inline-block;
  -webkit-text-fill-color: var(--warning); /* grad-text override */
}
.case__stat-value[data-verify]::after {
  content: "";
}

.case {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  box-shadow: var(--shadow-md);
  position: relative;
}

.case__logo {
  height: 36px;
  width: auto;
  margin-bottom: var(--s-4);
  opacity: 0.88;
  /* Dark-Mode: Weiß-Monochrom */
  filter: brightness(0) invert(1);
}

.case__name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}

.case__role {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--s-6);
}

.case__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin: var(--s-5) 0;
  padding: var(--s-5) var(--s-4);
  background: linear-gradient(135deg, rgba(242, 205, 92, 0.08) 0%, rgba(111, 191, 177, 0.08) 100%);
  border-radius: var(--r-md);
  border: 1px solid var(--color-gold-border);
}

.case__stat-value {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}

.case__stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.case__text {
  font-size: var(--fs-small);
  color: var(--text-body);
  line-height: 1.6;
}

.cases__more {
  margin-top: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-body);
}

.cases__more strong { color: var(--text); }

.cases__note {
  margin-top: var(--s-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* ------------------------------------------------------------------
   13. FÜR WEN (Fit-Check)
   ------------------------------------------------------------------ */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

@media (min-width: 800px) { .fit-grid { grid-template-columns: repeat(2, 1fr); } }

.fit-col {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: var(--shadow-sm);
}

.fit-col--yes {
  position: relative;
  border-top: none;
  background:
    radial-gradient(ellipse at top right, rgba(111, 191, 177, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(242, 205, 92, 0.08) 0%, transparent 55%),
    #FFFFFF;
  box-shadow:
    0 24px 56px rgba(11, 29, 42, 0.10),
    0 8px 18px rgba(242, 205, 92, 0.18),
    0 0 0 1px rgba(242, 205, 92, 0.20);
  isolation: isolate;
  overflow: hidden;
}
.fit-col--yes::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  padding: 2.5px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 50%, var(--color-gold) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.fit-col--yes::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(242, 205, 92, 0.20) 50%, transparent 100%);
  animation: shine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.fit-col--yes > * { position: relative; z-index: 2; }
.fit-col--yes h3 {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.fit-col--no {
  border-top: 4px solid #B6B8BB;
  background: var(--bg-soft);
}

.fit-col h3 {
  font-size: 20px;
  margin-bottom: var(--s-5);
}

.fit-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fit-col li {
  padding-left: 30px;
  position: relative;
  margin-bottom: var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-body);
  line-height: 1.55;
}

.fit-col--yes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-teal-bg);
  border: 1.5px solid var(--color-teal);
}

.fit-col--yes li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--color-teal-dark);
  border-bottom: 2px solid var(--color-teal-dark);
  transform: rotate(-45deg);
}

.fit-col--no li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 14px;
  height: 2px;
  background: #9AA3AC;
  border-radius: 2px;
}

.fit__intro {
  max-width: 62ch;
  margin: 0 auto var(--s-7);
  text-align: center;
  font-size: var(--fs-lead);
  color: var(--text-body);
}

.fit__outro {
  margin-top: var(--s-7);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------
   14. GARANTIEN
   ------------------------------------------------------------------ */
.guarantees {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media (min-width: 900px) { .guarantees { grid-template-columns: repeat(2, 1fr); } }

.gcard {
  position: relative;
  padding: var(--s-8) var(--s-7);
  background: var(--bg-card);
  border: 1px solid var(--color-gold-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

.gcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  padding: 2px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.gcard__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: var(--s-4);
  line-height: 1.25;
}

.gcard__body {
  font-size: var(--fs-small);
  color: var(--text-body);
  line-height: 1.6;
}

.gcard__body p { margin-bottom: var(--s-3); }

.gcard__note {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--s-4);
}

.anti-guarantee {
  margin-top: var(--s-7);
  padding: var(--s-7);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.anti-guarantee__title {
  font-size: var(--fs-h4);
  font-weight: 800;
  color: var(--text);
  margin-bottom: var(--s-4);
}

.anti-guarantee__body {
  font-size: var(--fs-small);
  color: var(--text-body);
  line-height: 1.65;
}

.anti-guarantee__body p { margin-bottom: var(--s-3); }

/* ------------------------------------------------------------------
   15. EFFORT-SPLIT (Was Sie / Was ich)
   ------------------------------------------------------------------ */
.effort {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.effort table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.effort th,
.effort td {
  padding: var(--s-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

.effort th {
  background: var(--bg-tint);
  font-weight: 800;
  color: var(--text);
  font-size: var(--fs-body);
}

.effort tr:last-child td { border-bottom: none; }

.effort td:first-child {
  background: var(--bg-soft);
  width: 42%;
  color: var(--text-body);
}

.effort td:last-child {
  color: var(--text-body);
}

.effort__time {
  margin-top: var(--s-6);
  padding: var(--s-6);
  background: linear-gradient(135deg, rgba(242, 205, 92, 0.12) 0%, rgba(111, 191, 177, 0.12) 100%);
  border: 1px solid var(--color-gold-border);
  border-radius: var(--r-md);
  text-align: center;
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--text);
}

/* ------------------------------------------------------------------
   16. ÜBER NIKLAAS
   ------------------------------------------------------------------ */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}

@media (min-width: 900px) { .about { grid-template-columns: 1fr 1.6fr; gap: var(--s-10); } }

.about__photo {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.about__body p { margin-bottom: var(--s-4); font-size: var(--fs-body); }

.about__book-row {
  margin-top: var(--s-6);
  display: flex;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5);
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.about__book-cover {
  width: 140px;
  height: auto;
  box-shadow: 0 16px 32px rgba(11, 29, 42, 0.15), 0 4px 8px rgba(11, 29, 42, 0.06);
  border-radius: 5px;
  flex-shrink: 0;
}

.about__book-link {
  font-size: var(--fs-small);
  color: var(--text-body);
  font-weight: 600;
}

.about__book-link strong { color: var(--text); }

/* ------------------------------------------------------------------
   17. MACHBARKEITS-CHECK
   ------------------------------------------------------------------ */
.mc-card {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-8);
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.mc-card h2 { margin-bottom: var(--s-5); }
.mc-card p { text-align: left; }
.mc-card p + p { margin-top: var(--s-3); }

/* ------------------------------------------------------------------
   18. FAQ (native details/summary)
   ------------------------------------------------------------------ */
.faq {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--t-fast);
}

.faq-item[open] {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  padding: var(--s-5) var(--s-6);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  line-height: 1.4;
  transition: background var(--t-fast);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-soft); }

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-teal-bg);
  color: var(--color-teal-dark);
  font-weight: 700;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform var(--t-base), background var(--t-fast);
}

.faq-item[open] summary::after {
  content: "−";
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  color: #0B1D2A;
}

.faq-item__body {
  padding: 0 var(--s-6) var(--s-5);
  font-size: var(--fs-small);
  color: var(--text-body);
  line-height: 1.65;
}

/* ------------------------------------------------------------------
   19. FINALE SURVEY-CTA
   ------------------------------------------------------------------ */
.final-cta {
  padding: clamp(72px, 10vw, 120px) 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(111, 191, 177, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(242, 205, 92, 0.16), transparent 55%),
    var(--bg-tint);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.final-cta h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  max-width: 22ch;
  margin: 0 auto var(--s-5);
}

.final-cta__body {
  max-width: 58ch;
  margin: 0 auto var(--s-8);
  font-size: var(--fs-lead);
  color: var(--text-body);
  line-height: 1.6;
}

.final-cta__body p { margin-bottom: var(--s-3); }

.final-cta__sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--text-muted);
  margin-top: calc(var(--s-3) * -1);
  margin-bottom: var(--s-5);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.final-cta__shortcut {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.final-cta__shortcut a {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.final-cta__shortcut a:hover {
  color: var(--color-gold);
}

.final-cta__reassurance {
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-weight: 600;
}

/* ------------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------------ */
.footer {
  padding: var(--s-8) 0 var(--s-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  align-items: center;
}

.footer a {
  color: var(--text-body);
  text-decoration: none;
  margin-right: var(--s-4);
}

.footer a:hover { color: var(--color-teal-dark); text-decoration: underline; }

/* ------------------------------------------------------------------
   21. COOKIE-CONSENT (minimal, DSGVO)
   ------------------------------------------------------------------ */
.cookie-consent {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  font-size: var(--fs-small);
  color: var(--text-body);
  display: none;
}

.cookie-consent.is-visible { display: block; }

/* ⛔ AB 861 px RECHTS ANDOCKEN STATT MITTIG (10.08.2026, beim Video-Einbau gefunden).
   Mittig unten lag der Banner exakt auf dem Hero-Video: gemessen bei 1440 px
   verdeckte er 32 % der Videoflaeche und 70 % des "Ton einschalten"-Knopfes.
   Der Knopf war per elementFromPoint nicht mehr erreichbar, das heisst der
   Erstbesucher haette den Ton gar nicht anschalten koennen, denn auch die
   native Steuerleiste am unteren Videorand lag darunter.
   Rechts angedockt laeuft der Banner an der Checkliste, die verdeckt er
   voruebergehend, das ist Begleittext und kein Bedienelement.
   ⚠️ Mobil NICHT anfassen: dort sitzt der Banner ohnehin unten quer und das
   Video liegt hoeher, gemessene Ueberlappung 0. */
/* ⚠️ 901 und nicht 861. Der Hero wechselt erst um 900 px auf zwei Spalten,
   darunter ist das Video fast fensterbreit (bei 880 px: 840 von 880). Dort
   hilft keine horizontale Position, deshalb greift die Regel erst darueber,
   wo sie messbar etwas bringt: Videoflaeche verdeckt 32 % -> 0 % bei 1440. */
@media (min-width: 901px) {
  .cookie-consent {
    left: auto;
    right: 24px;
    margin: 0;
  }
}

.cookie-consent__title {
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.cookie-consent__body { margin-bottom: var(--s-4); line-height: 1.55; }

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.cookie-consent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--t-fast);
}

.cookie-consent__btn--accept {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  color: #0B1D2A;
}

.cookie-consent__btn--decline {
  background: transparent;
  color: var(--text-body);
  text-decoration: underline;
  padding-left: 8px;
  padding-right: 8px;
}

.cookie-consent__btn:hover { transform: translateY(-1px); }

.cookie-consent a {
  color: var(--color-teal-dark);
  text-decoration: underline;
}

/* Cookie-Banner: Lang-Text Desktop + Short-Text Mobile (Default-Visibility) */
.cookie-consent__body-full { display: inline; }
.cookie-consent__body-short { display: none; }

/* Mobile-kompakter Cookie-Banner */
@media (max-width: 560px) {
  .cookie-consent {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 10px 12px;
    font-size: 12px;
    border-radius: var(--r-md);
    max-height: 22vh;
  }
  .cookie-consent__title {
    font-size: 12.5px;
    margin-bottom: 2px;
  }
  .cookie-consent__body-full { display: none; }
  .cookie-consent__body-short { display: inline; }
  .cookie-consent__body {
    margin-bottom: 8px;
    line-height: 1.35;
    font-size: 11.5px;
  }
  .cookie-consent__btn {
    padding: 7px 12px;
    font-size: 12px;
    min-height: 32px;
  }
  .cookie-consent__actions { gap: 6px; }
}

/* ------------------------------------------------------------------
   22. ACCESSIBILITY
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn-primary:focus-visible {
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------
   23. MOBILE TWEAKS
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .hero__headline { font-size: clamp(28px, 8vw, 40px); }
  .case__stats { grid-template-columns: 1fr; }
  .case__stat { text-align: left; }
  .effort td { padding: var(--s-4); }
  .effort td:first-child { width: auto; }
  .btn-primary--xl { padding: 18px 34px; font-size: 17px; }
  .about__book-row { flex-direction: column; text-align: center; }
}

/* ------------------------------------------------------------------
   24. PRINT (light, kein PDF-Ziel aber sauberer Druck)
   ------------------------------------------------------------------ */
@media print {
  .cookie-consent, .final-cta, .site-header__meta { display: none; }
  body { background: #FFF; color: #000; }
  .btn-primary { box-shadow: none; }
}

/* ============================================================================
   25. PROCESS TIMELINE — Dark-Mode-Spotlight-Section (1:1 aus Relaunch)
   "Darum endet mein System nicht bei der Einstellung."
   Eingebettet als Dark-Section in Light-Mode-Page. Variable-Override im Scope.
   ============================================================================ */

.fkj-process {
  /* Light-Mode Wrapper für Process-Timeline (Ergänzung zur Moat-Section) */
  margin-top: var(--s-9);
}

.fkj-process__intro {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-7);
}

.fkj-process__intro strong {
  color: var(--text);
  font-weight: 700;
}

/* Dark-Mode: Light-Mode-Overrides entfernt 20.04.2026.
   Die Base-.ptl-* Styles unten greifen — hatten ursprünglich Relaunch-Dark-Look. */

/* Process-Timeline Wrapper */
.process-timeline {
  max-width: 1200px;
  margin: 0 auto;
}

.process-timeline__claim {
  text-align: center;
  max-width: 880px;
  margin: 0 auto var(--s-9);
}

.claim__headline {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-bright);
  margin: 0 0 var(--s-3);
}

.claim__sub {
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.claim__sub strong {
  color: var(--color-gold-light);
  font-weight: 700;
}

/* Card */
.ptl-card {
  margin: 0 auto;
  max-width: 1180px;
  padding: var(--s-6) var(--s-7) var(--s-7);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-gold-border);
  background:
    radial-gradient(ellipse at top left, rgba(242, 205, 92, 0.06), transparent 60%),
    var(--bg-card);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.4);
  position: relative;
}

/* Compare-Section unten */
.ptl-compare {
  position: relative;
  padding: 0;
  margin-top: var(--s-7);
  opacity: 0.82;
}
.ptl-compare__header {
  text-align: left;
  padding-left: 6%;
  margin-bottom: var(--s-3);
}

/* Divider */
.ptl-card__divider {
  position: relative;
  margin: var(--s-7) auto var(--s-6);
  height: 1px;
  max-width: 92%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-gold-border) 20%,
    var(--color-gold-border) 80%,
    transparent 100%);
}
.ptl-card__divider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 var(--s-4);
  background: #0B1D2A;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  white-space: nowrap;
}

/* FKJ-Lane Header */
.ptl-main {
  position: relative;
}
.ptl-main__header {
  text-align: left;
  padding-left: 6%;
  margin-bottom: var(--s-4);
}

/* Lane-Tags */
.ptl-lane__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.ptl-lane__tag--gold {
  background: var(--color-gold-soft);
  color: var(--color-gold);
  border-color: var(--color-gold-border);
}

/* 8-Spalten-Grid für beide Lanes (1:1 Alignment) */
.ptl--agency,
.ptl--me {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s-2);
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  align-items: start;
}

/* Horizontale Linien */
.ptl--agency::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 6%;
  right: 6%;
  height: 0;
  border-top: 1px dashed var(--border-bright);
  -webkit-mask: linear-gradient(90deg, black 0%, black 44%, transparent 44%);
          mask: linear-gradient(90deg, black 0%, black 44%, transparent 44%);
}
.ptl--me::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 6%;
  right: 6%;
  height: 0;
  border-top: 2px solid var(--color-gold-border);
}

/* Step-Cell */
.ptl--agency .ptl-step,
.ptl--me .ptl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
  position: relative;
  width: auto;
  min-width: 0;
}

/* Agentur-Lane Steps */
.ptl--agency .ptl-step {
  padding-top: 0;
  min-height: 48px;
  justify-content: flex-start;
}
.ptl--agency .ptl-step__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid var(--border-bright);
  margin-bottom: 6px;
  margin-top: 7px;
  position: relative;
  z-index: 2;
}
.ptl--agency .ptl-step__label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
}
.ptl--agency .ptl-step--empty {
  min-height: 48px;
}

/* Sackgasse */
.ptl--agency .ptl-step--deadend .ptl-step__dot {
  width: 14px;
  height: 14px;
  background: rgba(239, 120, 80, 0.22);
  border: 1.5px solid rgba(239, 120, 80, 0.75);
  margin-top: 5px;
  margin-bottom: 5px;
}
.ptl--agency .ptl-step--deadend .ptl-step__label {
  color: rgba(239, 120, 80, 0.98);
  font-weight: 600;
}
.ptl-step__endmark {
  display: inline-block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(239, 120, 80, 0.98);
  background: rgba(239, 120, 80, 0.14);
  border: 1px solid rgba(239, 120, 80, 0.5);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* FKJ-Lane Steps */
.ptl--me .ptl-step {
  padding-top: 28px;
  min-height: 138px;
}
.ptl--me .ptl-step__num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.ptl--me .ptl-step__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gold);
  border: 2px solid var(--color-gold-light);
  box-shadow: 0 0 20px var(--color-gold-glow), 0 0 40px rgba(242, 205, 92, 0.18);
  margin-bottom: var(--s-3);
  position: relative;
  z-index: 2;
}
.ptl--me .ptl-step__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-gold-light);
  margin-bottom: 4px;
}
.ptl--me .ptl-step__sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
}

/* Milestone */
.ptl--me .ptl-step--milestone {
  padding-top: 28px;
}
.ptl-step__milestone-star {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #9EE0D2;
  text-shadow: 0 0 10px rgba(111, 191, 177, 0.7);
  z-index: 3;
}
.ptl--me .ptl-step--milestone .ptl-step__dot {
  width: 28px;
  height: 28px;
  background: #6FBFB1;
  border: 2px solid #9EE0D2;
  box-shadow: 0 0 24px rgba(111, 191, 177, 0.55), 0 0 48px rgba(111, 191, 177, 0.22);
  margin-bottom: var(--s-3);
}
.ptl--me .ptl-step--milestone .ptl-step__label {
  color: #C4EDE3;
  font-size: 13px;
  font-weight: 700;
}
.ptl--me .ptl-step--milestone .ptl-step__sub {
  color: var(--text-bright);
  font-weight: 600;
}

/* Hero-Milestone (Einstellung) */
.ptl-dot--gradient {
  width: 42px !important;
  height: 42px !important;
  background: linear-gradient(135deg, var(--color-gold), var(--color-teal), var(--color-gold)) !important;
  background-size: 300% 100% !important;
  animation: gradient-shift 9s linear infinite !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 28px rgba(242, 205, 92, 0.5), 0 0 52px rgba(111, 191, 177, 0.28) !important;
  overflow: hidden;
}
.ptl-dot--gradient::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  animation: shine 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: 50%;
}
.ptl-step--hero-milestone .ptl-step__milestone-star {
  font-size: 26px !important;
  top: -21px !important;
  background: linear-gradient(110deg, var(--color-gold) 0%, var(--color-gold-light) 25%, var(--color-teal-light) 55%, var(--color-teal) 75%, var(--color-gold) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-shift 9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(242, 205, 92, 0.5));
}
.ptl-step--hero-milestone .ptl-step__dot {
  margin-top: -9px;
}
.ptl-step--hero-milestone .ptl-step__label {
  font-size: 15px !important;
  font-weight: 800 !important;
  filter: drop-shadow(0 0 6px rgba(111, 191, 177, 0.4));
}

/* Extra-Meile Bracket */
.ptl-extra-mile {
  position: absolute;
  bottom: -24px;
  left: 44%;
  right: 4%;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}
.ptl-extra-mile::before {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1.5px dashed rgba(111, 191, 177, 0.45);
  border-left: 6px solid rgba(111, 191, 177, 0.55);
}
.ptl-extra-mile::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1.5px dashed rgba(111, 191, 177, 0.45);
  border-right: 6px solid rgba(111, 191, 177, 0.55);
}
.ptl-extra-mile__text {
  flex-shrink: 0;
  padding: 0 10px;
  font-size: 10px;
  font-style: italic;
  color: #9EE0D2;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Quote unter der Card */
.fkj-process__quote {
  text-align: center;
  margin: var(--s-9) auto 0;
  max-width: 720px;
}
.fkj-process__quote blockquote {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-bright);
  font-style: italic;
  margin: 0 0 var(--s-3);
  letter-spacing: -0.01em;
}
.fkj-process__quote figcaption {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Gradient-shift keyframe */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 280% 50%; }
}

/* Mobile: 2-Lane Timeline vertikal */
@media (max-width: 1100px) {
  .ptl--agency,
  .ptl--me {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    padding-left: 30px;
  }
  .ptl--agency::before,
  .ptl--me::before {
    top: 10px;
    bottom: 10px;
    left: 7px;
    right: auto;
    width: 0;
    height: auto;
    border-top: none;
    -webkit-mask: none;
            mask: none;
  }
  .ptl--agency::before { border-left: 1px dashed var(--border-bright); }
  .ptl--me::before { border-left: 2px solid var(--color-gold-border); }

  .ptl--agency .ptl-step,
  .ptl--me .ptl-step {
    width: 100%;
    max-width: none;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 0 0 0 30px;
    position: relative;
  }
  .ptl--agency .ptl-step__dot,
  .ptl--me .ptl-step__dot {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  .ptl--me .ptl-step__num {
    position: static;
    transform: none;
    margin-right: var(--s-3);
    order: -1;
  }
  .ptl--me .ptl-step__label { margin-bottom: 0; margin-right: var(--s-3); }
  .ptl--agency .ptl-step--empty { display: none; }
  .ptl--me .ptl-step--milestone { padding-top: 0; padding-left: 44px; }
  .ptl--me .ptl-step--milestone .ptl-step__dot { left: -44px; }
  .ptl-step__milestone-star { position: absolute; top: 50%; left: -48px; transform: translate(-50%, -50%); }
  .ptl-step__endmark { margin-top: 0; margin-left: var(--s-2); }
  .ptl-extra-mile { display: none; }
}

/* =============================================================================
   TESTIMONIALS (Scope: .testis) — Kundenstimm-Video + 6 Google-Reviews
   Light-Mode. Eingebaut zwischen Cases und Fit-Check.
   ============================================================================= */
.testis__subhead {
  max-width: 640px;
  margin: calc(-1 * var(--s-4)) auto var(--s-9);
  text-align: center;
  color: var(--text-body);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.testis__video {
  position: relative;
  max-width: 880px;
  margin: 0 auto var(--s-11);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #0B1D2A 0%, #13324A 100%);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(11, 29, 42, 0.35), 0 4px 16px rgba(11, 29, 42, 0.12);
  border: 1px solid rgba(242, 205, 92, 0.22);
}
.testis__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Click-to-Play-Layer (Vimeo laedt erst nach Klick, DSGVO) */
.video-click-to-play { cursor: pointer; }
.video-click-to-play__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.72;
  transition: opacity 0.25s ease, transform 0.4s ease;
}
.video-click-to-play:hover .video-click-to-play__poster { opacity: 0.85; transform: scale(1.02); }
.video-click-to-play__play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 76px; height: 76px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-left: 5px;
  color: #0B1D2A;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  box-shadow: 0 12px 40px rgba(242, 205, 92, 0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.video-click-to-play:hover .video-click-to-play__play-btn { transform: translate(-50%, -50%) scale(1.07); }
.video-click-to-play__play-btn:focus-visible { outline: 3px solid var(--color-gold-light); outline-offset: 4px; }
.video-click-to-play__hint {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(11, 29, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 600;
}
.video-click-to-play.is-playing .video-click-to-play__poster,
.video-click-to-play.is-playing .video-click-to-play__play-btn,
.video-click-to-play.is-playing .video-click-to-play__hint { display: none; }
@media (max-width: 560px) {
  .video-click-to-play__play-btn { width: 60px; height: 60px; }
  .video-click-to-play__hint { font-size: 11px; white-space: normal; max-width: 80%; text-align: center; }
}

.testis__video-meta {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(242, 205, 92, 0.35);
  border-radius: 999px;
  color: var(--color-gold-light);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.testis__video-meta::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 8px var(--color-gold);
}

.testis__video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
  text-align: center;
  color: rgba(255,255,255,0.92);
}

.testis__video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  background: var(--color-gold);
  color: var(--text-on-brand);
  cursor: pointer;
  box-shadow: 0 10px 40px var(--color-gold-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: var(--s-5);
}
.testis__video-play:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 48px var(--color-gold-glow);
}

.testis__video-label {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: var(--s-2);
  letter-spacing: -0.01em;
}

.testis__video-note {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.6);
  max-width: 520px;
}

/* Grid der Review-Cards */
.testis__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.t-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: 0 2px 8px rgba(11, 29, 42, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.t-card:hover {
  box-shadow: 0 12px 32px -8px rgba(11, 29, 42, 0.12);
  transform: translateY(-2px);
  border-color: var(--border-bright);
}

.t-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
}

.t-card__google-logo {
  width: 28px;
  height: 28px;
}

.t-card__stars {
  display: inline-flex;
  gap: 2px;
}

.t-card__quote {
  flex: 1;
  margin: 0 0 var(--s-6);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 500;
}

.t-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.t-card__name {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text);
}

.t-card__date {
  margin: 2px 0 0;
  font-size: var(--fs-micro);
  color: var(--text-dim);
}

.t-card__google-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.t-card__google-link:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--color-teal-bg);
}

.testis__footer {
  margin-top: var(--s-9);
  text-align: center;
  color: var(--text-body);
}
.testis__footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--s-2);
  color: var(--color-petrol);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.testis__footer a:hover { color: var(--color-teal-dark); }

/* Mobile */
@media (max-width: 960px) {
  .testis__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .testis__grid { grid-template-columns: 1fr; }
  .testis__video { border-radius: var(--r-lg); }
  .testis__video-play { width: 64px; height: 64px; }
  .t-card { padding: var(--s-6); }
}

/* =============================================================================
   URGENCY-SECTION (Problem vor Final-CTA) + PROJEKTVERLAUF-SVG
   ============================================================================= */

.section--urgency {
  background: linear-gradient(180deg, rgba(239, 120, 80, 0.06) 0%, rgba(239, 120, 80, 0.02) 100%);
  border-top: 3px solid var(--warning);
  padding-top: var(--s-10);
  padding-bottom: var(--s-10);
  position: relative;
}
.section--urgency::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 88px; height: 3px;
  background: var(--warning);
  box-shadow: 0 0 20px rgba(239, 120, 80, 0.5);
}

.prob__bridge {
  margin-top: var(--s-8) !important;
  padding: var(--s-6) var(--s-7);
  background: var(--bg-card);
  border: 1px solid var(--warning-border);
  border-left: 4px solid var(--warning);
  border-radius: var(--r-md);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
}
.prob__bridge strong { color: var(--warning); }

/* Projektverlauf-SVG responsive, randlos */
.projektverlauf-wrap {
  margin-top: var(--s-8);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.projektverlauf-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: transparent;
}

/* =============================================================================
   GLOBAL BODY-GLOW (Gold oben, Teal unten) — aus Relaunch übernommen 20.04.
   Wird auf allen Sektionen durchgereicht, da section--soft/--tint transparent.
   ============================================================================= */
body {
  position: relative;
  background: var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(242, 205, 92, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(111, 191, 177, 0.10), transparent 50%),
    linear-gradient(180deg,
      rgba(242, 205, 92, 0.05) 0%,
      transparent 30%,
      rgba(111, 191, 177, 0.06) 70%,
      rgba(111, 191, 177, 0.04) 100%
    );
}

/* Container über Body-Glow */
.container { position: relative; z-index: 2; }
section { position: relative; z-index: 1; }

/* =============================================================================
   DARK-MODE POLISH PASS (20.04.2026)
   Feinschliff nach Token-Swap: Kontraste, Disclosure-Icons, Card-Backgrounds.
   ============================================================================= */

/* --bg-soft war #050E16 (dunkler als body). Im Dark-Mode Card-BG = HELLER. */
:root {
  --bg-soft: rgba(255, 255, 255, 0.03);
}

/* Tabellen-Akzente: teal-dark #4EA094 ist auf dunkel kaum lesbar → teal-light */
.keys-table th,
.keys-table td:first-child {
  color: var(--color-teal-light);
}
.keys-table th {
  background: rgba(242, 205, 92, 0.06);
}

.effort th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-bright);
}
.effort td:first-child {
  background: rgba(255, 255, 255, 0.03);
}

/* FAQ-Disclosure-Button prominenter im Dark-Mode */
.faq-item summary::after {
  background: var(--color-teal-soft);
  color: var(--color-teal-light);
  border: 1px solid rgba(111, 191, 177, 0.35);
}
.faq-item[open] summary::after {
  background: var(--color-teal);
  color: #0B1D2A;
  border-color: var(--color-teal-light);
}
.faq-item summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Projektverlauf-SVG: SVG ist bereits dark-designed, Card-Wrap raus */
.projektverlauf-img {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* About__book-row: nutzt --bg-soft → ist durch Token-Update jetzt automatisch hell */

/* Schliefke-Card ohne Logo-Asset: Card-Wide-Header ohne Image-Box */
.case--wide .case__logo {
  display: none;
}
.case--wide::before {
  content: "Kundenstimme";
  display: inline-block;
  padding: 5px 12px;
  background: var(--color-gold-bg);
  color: var(--color-gold-light);
  border: 1px solid var(--color-gold-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

/* Method-Book Card: Buchcover etwas heller gerahmt */
.method__book {
  background: rgba(255, 255, 255, 0.03);
}
.method__book img {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* MC-Card (Strategiegespraech-Sektion): prominenter Rahmen */
.mc-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(242, 205, 92, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Cases__more: kleiner Text soll besser lesbar bleiben */
.cases__more {
  color: var(--text-muted);
}
.cases__more em {
  color: var(--color-gold-light);
  font-style: normal;
  font-weight: 600;
}

/* =============================================================================
   ZONE-LIGHT — Mittel-Sektionen Light-Mode (Hero + Final-CTA bleiben Dark)
   ============================================================================= */
.zone-light {
  /* Surfaces Light */
  --bg:              #FFFFFF;
  --bg-soft:         #FAFBFC;
  --bg-tint:         #F6F9FA;
  --bg-card:         #FFFFFF;
  --bg-card-alt:     #FAFBFC;
  --bg-featured:     rgba(242, 205, 92, 0.05);

  /* Text Petrol-Hierarchie */
  --text:            #0B1D2A;
  --text-bright:     #0B1D2A;
  --text-body:       #34485A;
  --text-muted:      #556778;
  --text-dim:        #7C8B9A;
  --text-on-brand:   #0B1D2A;

  /* Borders */
  --border:          rgba(11, 29, 42, 0.08);
  --border-bright:   rgba(11, 29, 42, 0.14);

  background: var(--bg);
  color: var(--text);
  position: relative;
  z-index: 5; /* über Body::before Glow */
}

/* Kundenlogos im Light-Zone wieder in Originalfarbe/Grayscale */
.zone-light .case__logo {
  filter: none;
  opacity: 1;
}

/* Testimonials-Video bleibt absichtlich Dark (Peak-Moment-Island) */
/* .testis__video hat bereits hardcoded dunklen BG — nichts zu tun */

/* Tabellen-Overrides im Light-Zone: Polish-Pass-Werte revertieren */
.zone-light .keys-table th,
.zone-light .keys-table td:first-child {
  color: var(--color-teal-dark);
}
.zone-light .keys-table th {
  background: var(--bg-tint);
}
.zone-light .effort th {
  background: var(--bg-tint);
  color: var(--text);
}
.zone-light .effort td:first-child {
  background: var(--bg-soft);
}

/* FAQ-Disclosure im Light */
.zone-light .faq-item summary::after {
  background: var(--color-teal-bg);
  color: var(--color-teal-dark);
  border: 1px solid transparent;
}
.zone-light .faq-item[open] summary::after {
  background: var(--color-teal);
  color: #0B1D2A;
  border-color: transparent;
}
.zone-light .faq-item summary:hover {
  background: var(--bg-soft);
}

/* Process-Timeline (Moat) im Light wiederherstellen */
.zone-light .ptl-card {
  background:
    radial-gradient(ellipse at top left, rgba(242, 205, 92, 0.08), transparent 60%),
    #FAFBFC;
  border-color: var(--color-gold-border);
  box-shadow: 0 12px 40px rgba(11, 29, 42, 0.08);
}
.zone-light .ptl-lane__tag {
  background: rgba(11, 29, 42, 0.04);
  color: var(--text-muted);
}
.zone-light .ptl-lane__tag--gold {
  background: var(--color-gold-soft);
  color: #8A6B14;
  border-color: var(--color-gold-border);
}
.zone-light .ptl--agency .ptl-step__dot {
  background: rgba(11, 29, 42, 0.06);
  border-color: rgba(11, 29, 42, 0.18);
}
.zone-light .ptl--agency .ptl-step__label {
  color: var(--text-muted);
}
.zone-light .ptl--me .ptl-step__sub {
  color: var(--text-dim);
}
.zone-light .ptl--me .ptl-step--milestone .ptl-step__sub {
  color: var(--text-body);
  font-weight: 600;
}
.zone-light .ptl--me .ptl-step__label {
  color: #8A6B14;
}
.zone-light .ptl--me .ptl-step--milestone .ptl-step__label {
  color: var(--color-teal-dark);
}
.zone-light .ptl--me .ptl-step__num {
  color: #8A6B14;
}
.zone-light .ptl-card__divider-text {
  background: #FAFBFC;
  color: #8A6B14;
}
.zone-light .fkj-process__intro {
  color: var(--text-muted);
}
.zone-light .fkj-process__intro strong {
  color: var(--text);
}

/* Card-BGs im Light */
.zone-light .method__book,
.zone-light .mc-card {
  background: var(--bg-card);
  border-color: var(--border-bright);
  box-shadow: 0 8px 32px rgba(11, 29, 42, 0.06);
}

/* Projektverlauf SVG ist auf Light umgebaut — kein dunkler Card-Wrap mehr */
.zone-light .projektverlauf-img {
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* Urgency-Section im Light-Zone: Warning-Tönung bleibt, aber auf hellem BG */
.zone-light .section--urgency {
  background: linear-gradient(180deg, rgba(239, 120, 80, 0.05) 0%, rgba(239, 120, 80, 0.02) 100%);
}

/* Schliefke-Kundenstimme-Badge im Light */
.zone-light .case--wide::before {
  background: var(--color-gold-soft);
  color: #8A6B14;
  border-color: var(--color-gold-border);
}

/* Cases__more em im Light */
.zone-light .cases__more em {
  color: #8A6B14;
}

/* =============================================================================
   DARK↔LIGHT ÜBERGÄNGE — Gradient-Strich + Glow
   ============================================================================= */

/* Oben auf Zone-Light: Übergang Hero (Dark) → Mitte (Light) — Gradient-Strich + weicher Glow */
.zone-light {
  overflow: visible;
  position: relative;
}
.zone-light::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242, 205, 92, 0.55) 25%,
    var(--color-gold) 50%,
    rgba(111, 191, 177, 0.75) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  border-radius: 2px;
}

/* Oben auf Final-CTA: Übergang Mitte (Light) → Final-CTA (Dark) */
.final-cta {
  position: relative;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242, 205, 92, 0.55) 25%,
    var(--color-gold) 50%,
    rgba(111, 191, 177, 0.75) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  border-radius: 2px;
}

/* =============================================================================
   LEISTUNGSVERSPRECHEN — Premium Guarantee Cards (portiert aus Relaunch, Light)
   ============================================================================= */
.section__header--center { text-align: center; }
.section__header--center .section__kicker { margin: 0 auto var(--s-3); }
.section__sub {
  max-width: 640px;
  margin: var(--s-4) auto 0;
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--text-muted);
  line-height: 1.55;
}

.guarantees-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  margin-top: var(--s-8);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  .guarantees-grid { grid-template-columns: 1fr; }
}

.g-card--premium {
  position: relative;
  overflow: visible;
  padding: 52px 36px 36px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 30% 15%, rgba(242, 205, 92, 0.10), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(111, 191, 177, 0.10), transparent 55%),
    rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  box-shadow:
    0 16px 48px rgba(11, 29, 42, 0.08),
    0 4px 20px rgba(242, 205, 92, 0.06),
    0 4px 20px rgba(111, 191, 177, 0.06);
  isolation: isolate;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.g-card--premium::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--color-gold), var(--color-teal));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.g-card--premium:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 72px rgba(11, 29, 42, 0.12),
    0 12px 48px rgba(242, 205, 92, 0.14),
    0 12px 48px rgba(111, 191, 177, 0.14);
}

.g-card--premium > * {
  position: relative;
  z-index: 2;
}

.g-card--premium__visual {
  width: 180px;
  height: 180px;
  margin: 0 auto var(--s-6);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 20px rgba(242, 205, 92, 0.18)) drop-shadow(0 4px 20px rgba(111, 191, 177, 0.18));
}

.g-card--premium__visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.g-card--premium__pill {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: linear-gradient(135deg, var(--color-gold), var(--color-teal));
  color: #081520;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 99px;
  white-space: nowrap;
  box-shadow:
    0 8px 24px rgba(242, 205, 92, 0.30),
    0 8px 24px rgba(111, 191, 177, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.g-card--premium__title {
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 var(--s-4) 0;
  letter-spacing: -0.01em;
  text-align: center;
}

.g-card--premium__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 var(--s-5) 0;
  text-align: center;
}

.g-card--premium__footnote {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.55;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(11, 29, 42, 0.10);
  margin: 0;
  text-align: center;
}

@media (max-width: 560px) {
  .g-card--premium { padding: 40px 24px 28px; }
  .g-card--premium__visual { width: 150px; height: 150px; }
}

/* ============================================================
   REFINE 2026-05-01 — Konsistenz mit Relaunch + VSL-Best-Practices
   ============================================================ */

/* Reading Progress Bar (oben fixiert) */
.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 60;
  pointer-events: none;
}
.reading-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-teal) 100%);
  box-shadow: 0 0 12px rgba(242, 205, 92, 0.55);
  transition: width 80ms linear;
}

/* Hero Authority Pills */
.hero__authority {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin: 0 auto var(--s-7);
  max-width: 880px;
}
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-pill);
  color: var(--text-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.hero__pill svg { color: var(--color-teal-light); flex-shrink: 0; }

/* CTA direkt unter dem Video. Das Video verweist im Ton darauf
   ("den Termin buchen Sie direkt hier unter dem Video"). */
.hero__cta {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero__cta-sub {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  max-width: 46ch;
  line-height: 1.5;
}

/* DSGVO Trust-Hint unter Video */
.video-frame__privacy {
  margin: var(--s-3) 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* Sliding Trust-Bar */
.trust-bar {
  margin: var(--s-7) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  max-width: 1100px;
}
@media (min-width: 800px) {
  .trust-bar {
    flex-direction: row;
    gap: var(--s-6);
  }
}
.trust-bar__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1.35;
}
.trust-bar__sep {
  display: none;
  width: 1px;
  height: 36px;
  background: var(--border);
}
@media (min-width: 800px) { .trust-bar__sep { display: block; } }
.trust-track-wrap {
  flex: 1;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.trust-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  width: max-content;
  animation: trust-track-scroll 40s linear infinite;
}
.trust-track img {
  height: 38px;
  width: auto;
  opacity: 1;
  filter: none;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.trust-track img:hover { transform: translateY(-2px); }
@keyframes trust-track-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Laufband laeuft bewusst auch bei "Bewegung reduzieren".
   Entscheidung Niklaas 27.07.2026, projektweit einheitlich. */

/* Schmerz Section (Light-Zone) */
.zone-light .section-h2 {
  font-size: var(--fs-h2);
  color: var(--text-on-brand);
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 var(--s-5);
}
.zone-light .schmerz__warn { color: #C13C0F; }
.zone-light .schmerz__warn-soft { color: #B7461E; }
.schmerz__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 900px) {
  .schmerz__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-9); }
}
.schmerz__text > .section__kicker { margin-bottom: var(--s-4); }
.schmerz__desc { font-size: var(--fs-lead); line-height: 1.65; color: var(--text-on-brand); opacity: 0.85; }
.schmerz__second-line {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  margin: var(--s-6) 0 var(--s-4);
  color: var(--text-on-brand);
}

/* Cost-Box */
.cost-box {
  background: #FFFFFF;
  border: 1px solid rgba(11, 29, 42, 0.08);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-md);
}
.cost-box__title {
  margin: 0 0 var(--s-5);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.cost-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(11, 29, 42, 0.55);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(11, 29, 42, 0.10);
  font-weight: 700;
}
.cost-table th:last-child { text-align: right; }
.cost-table td {
  padding: 12px 0;
  border-bottom: 1px solid rgba(11, 29, 42, 0.06);
  color: var(--text-on-brand);
}
.cost-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cost-table tbody tr:last-child td { border-bottom: none; }
.cost-note--summary {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin: var(--s-5) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 2px solid var(--color-gold);
}
.cost-note__val {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.cost-note__sub { font-size: 13px; color: var(--text-on-brand); opacity: 0.7; }
.cost-note__source { margin: 0; font-size: 11px; color: rgba(11, 29, 42, 0.45); font-style: italic; }

/* Section Sub (für neue Sektionen) */
.section__sub {
  font-size: var(--fs-lead);
  color: var(--text-body);
  margin: var(--s-3) auto 0;
  max-width: 60ch;
  line-height: 1.6;
}
.zone-light .section__sub { color: var(--text-on-brand); opacity: 0.78; }
.zone-light .section__header h2 { color: var(--text-on-brand); }

/* Investitions-Section: Pricing-Cards */
.pricing__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-10);
}
@media (min-width: 720px) { .pricing__cards { grid-template-columns: repeat(3, 1fr); } }
.p-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(11, 29, 42, 0.08);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 32px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.p-card--featured {
  border: 1.5px solid var(--color-gold-border);
  background: linear-gradient(180deg, rgba(242, 205, 92, 0.04) 0%, #FFFFFF 60%);
  box-shadow: var(--shadow-md);
}
.p-card__badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  display: inline-block;
  padding: 5px 14px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  color: #0B1D2A;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.p-card__when {
  margin: 0 0 var(--s-4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
}
.p-card__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: nowrap; }
.p-card__unit { line-height: 1.3; }
/* Werbebudget klein direkt unter den Preis, Niklaas 10.08. */
.p-card__budget {
  margin: 0 0 var(--s-3);
  text-wrap: balance;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal-dark);
  opacity: 0.85;
  letter-spacing: 0.005em;
}
/* Werbebudget unter der grossen Zahl im Vergleichsblock */
.vstack__compare-budget {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-teal-dark);
  opacity: 0.9;
  text-wrap: balance;
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}
.p-card__amount {
  white-space: nowrap;
  font-size: clamp(34px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.p-card__unit { font-size: 13px; color: var(--text-on-brand); opacity: 0.6; font-weight: 600; }
.p-card__title { font-size: clamp(20px, 2vw, 24px); margin: 0 0 var(--s-3); color: var(--text-on-brand); }
.p-card__note { font-size: 14px; line-height: 1.55; color: var(--text-on-brand); opacity: 0.8; margin: 0 0 var(--s-5); }
.p-card__divider { height: 1px; background: rgba(11, 29, 42, 0.08); margin: var(--s-4) 0; }
.p-card__feat-label {
  margin: 0 0 var(--s-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 29, 42, 0.55);
}
.feat-list { list-style: none; padding: 0; margin: 0; }
.feat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-on-brand);
  line-height: 1.5;
  margin: 0;
}
.feat-item .chk { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.p-card__feat-muted { color: rgba(11, 29, 42, 0.65); }

/* Bonus-Variant: Wert-Anker mit Strikethrough */
.p-card--bonus {
  border: 1.5px solid rgba(111, 191, 177, 0.45);
  background:
    radial-gradient(ellipse at top right, rgba(111, 191, 177, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(111, 191, 177, 0.04) 0%, #FFFFFF 70%);
  box-shadow: 0 14px 38px rgba(11, 29, 42, 0.06), 0 4px 10px rgba(11, 29, 42, 0.04);
}
.p-card__badge--bonus {
  background: linear-gradient(135deg, #6FBFB1 0%, #4EA094 100%);
  color: #FFFFFF;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.p-card__price--bonus {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--s-3);
}
.p-card__amount-strike {
  display: inline-block;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  color: rgba(11, 29, 42, 0.32);
  text-decoration: line-through;
  text-decoration-color: rgba(200, 84, 26, 0.6);
  text-decoration-thickness: 2.5px;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.p-card__price-arrow {
  color: var(--color-teal-dark);
  flex-shrink: 0;
  opacity: 0.7;
}
.p-card__amount-included {
  display: inline-flex;
  align-items: center;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 800;
  color: var(--color-teal-dark);
  letter-spacing: -0.005em;
  background: rgba(111, 191, 177, 0.14);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(111, 191, 177, 0.35);
  white-space: nowrap;
}

/* CPH-Tabelle */
.cph-wrap {
  background: #FFFFFF;
  border: 1px solid rgba(11, 29, 42, 0.08);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px);
  margin-bottom: var(--s-10);
  box-shadow: var(--shadow-sm);
}
.cph-intro { margin: 0 0 var(--s-5); color: var(--text-on-brand); font-size: 15px; line-height: 1.65; }
.cph-table-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.cph-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 540px; }
.cph-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid rgba(11, 29, 42, 0.10);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(11, 29, 42, 0.55);
  font-weight: 700;
}
.cph-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(11, 29, 42, 0.06);
  color: var(--text-on-brand);
}
.cph-gold {
  color: var(--color-teal-dark);
  font-weight: 700;
  background: rgba(242, 205, 92, 0.06);
}
.cph-featured td { background: rgba(111, 191, 177, 0.04); }

/* Erwartbar-Zeile (3 Einstellungen): Glass-Style mit Gradient-Border + Shine-Animation */
.cph-typical {
  position: relative;
}
/* Subtle Glass-Hintergrund auf den Zellen, KEIN crasser Gradient-Fill */
.cph-typical td {
  background: rgba(111, 191, 177, 0.04);
  font-weight: 600;
  position: relative;
  border-top: none;
  border-bottom: none;
}
.cph-typical td:first-child { padding-left: 14px; }

/* Gradient-Border um die ganze Zeile via outline-Trick auf der ersten Zelle (table-rows kann man nicht direkt outline-stylen) */
.cph-typical::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 50%, var(--color-gold) 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
/* Tabelle muss display:block-mode rein damit ::after auf <tr> wirkt — Workaround: position:relative auf row */
@supports not (selector(:has(*))) {
  .cph-typical::after { display: none; }
}

/* Stattdessen Border via Box-Shadow-Trick (funktioniert besser bei <tr>) */
.cph-typical td:first-child {
  box-shadow:
    inset 0 2.5px 0 0 var(--color-gold),
    inset 0 -2.5px 0 0 var(--color-teal),
    inset 2.5px 0 0 0 var(--color-gold);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.cph-typical td:not(:first-child):not(:last-child) {
  box-shadow:
    inset 0 2.5px 0 0 var(--color-gold),
    inset 0 -2.5px 0 0 var(--color-teal);
}
.cph-typical td:last-child {
  box-shadow:
    inset 0 2.5px 0 0 var(--color-gold),
    inset 0 -2.5px 0 0 var(--color-teal),
    inset -2.5px 0 0 0 var(--color-teal);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
  overflow: hidden;
}
.cph-typical .cph-gold {
  background: rgba(242, 205, 92, 0.14);
}

/* Shine-Animation: Glanz wandert von links nach rechts ueber die ganze Zeile alle 4s */
.cph-typical td:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  animation: cph-shine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
@keyframes cph-shine {
  0% { left: -60%; }
  60%, 100% { left: 460%; }
}

/* "Erwartbar"-Pill rechts in der letzten Zelle */
.cph-typical-cell {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.cph-typical-text {
  font-weight: 700;
}
.cph-typical-badge {
  display: inline-block;
  padding: 4px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  color: #0B1D2A;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(242, 205, 92, 0.45);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile: Pill bleibt rechts mit angepasstem Spacing */
@media (max-width: 600px) {
  .cph-typical-cell { width: auto; gap: 8px; }
  .cph-typical-badge { font-size: 9px; padding: 3px 8px; }
  .cph-typical td:first-child { box-shadow: none; border-radius: 0; }
  .cph-typical td:last-child { box-shadow: none; border-radius: 0; }
  .cph-typical td:not(:first-child):not(:last-child) { box-shadow: none; }
  /* Im Card-Layout: einfacher Gradient-Border um die ganze Card */
  .cph-typical {
    border: 2px solid transparent !important;
    background:
      linear-gradient(rgba(111, 191, 177, 0.04), rgba(111, 191, 177, 0.04)) padding-box,
      linear-gradient(135deg, var(--color-gold), var(--color-teal)) border-box !important;
    border-radius: 10px !important;
  }
}
.cph-row-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-left: 6px;
}

/* Vstack-Subtitle */
.vstack__subtitle {
  margin: 12px auto 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  max-width: 600px;
  line-height: 1.5;
}
.cph-callout {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  background: rgba(242, 205, 92, 0.10);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-on-brand);
}

/* CPH-Tabelle Mobile: Card-Layout statt horizontal-Scroll */
@media (max-width: 600px) {
  .cph-table-scroll { overflow-x: visible; margin: 0; padding: 0; }
  .cph-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .cph-table thead { display: none; }
  .cph-table tbody { display: flex; flex-direction: column; gap: 12px; }
  .cph-table tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(11, 29, 42, 0.10);
    border-radius: var(--r-md);
    box-shadow: 0 4px 12px rgba(11, 29, 42, 0.04);
  }
  .cph-table tr.cph-featured {
    border-color: rgba(111, 191, 177, 0.40);
    background: linear-gradient(180deg, rgba(111, 191, 177, 0.05) 0%, #FFFFFF 60%);
  }
  .cph-table td {
    border: none;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.4;
  }
  .cph-table td:first-child {
    font-weight: 800;
    font-size: 16px;
    color: var(--text);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(11, 29, 42, 0.06);
    margin-bottom: 6px;
  }
  .cph-table td:not(:first-child)::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 110px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 8px;
  }
  .cph-table .cph-gold { background: transparent; }
  .cph-table .cph-gold::after {
    content: " ✓";
    color: var(--color-teal-dark);
    font-weight: 800;
  }
}

/* Transparenz-Grid */
.transparenz__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 720px) { .transparenz__grid { grid-template-columns: repeat(3, 1fr); } }
.trans-item {
  background: #FFFFFF;
  border: 1px solid rgba(11, 29, 42, 0.06);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--shadow-xs);
}
.trans-item__q { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-3); }
.trans-item__q h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-on-brand); }
.trans-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-on-brand); opacity: 0.85; }

/* Differenzierungs-Tabelle */
.diff-wrap {
  overflow-x: auto;
  margin: 0 -16px var(--s-9);
  padding: 0 16px;
}
.diff-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  min-width: 720px;
  background: #FFFFFF;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(11, 29, 42, 0.08);
}
.diff-table th {
  text-align: left;
  padding: 16px;
  background: rgba(11, 29, 42, 0.04);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-on-brand);
  font-weight: 800;
  border-bottom: 1px solid rgba(11, 29, 42, 0.10);
}
.diff-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(11, 29, 42, 0.06);
  color: var(--text-on-brand);
  vertical-align: top;
  line-height: 1.55;
}
.diff-table tr:last-child td { border-bottom: none; }
.diff-bad {
  color: rgba(11, 29, 42, 0.6);
  font-style: italic;
}
.diff-good {
  background: rgba(242, 205, 92, 0.06);
  color: var(--text-on-brand);
}
.diff-good strong { color: var(--color-teal-dark); }
.gegen-agenturen {
  background: linear-gradient(135deg, rgba(242, 205, 92, 0.06) 0%, rgba(111, 191, 177, 0.05) 100%);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-7);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-on-brand);
  max-width: 880px;
  margin: 0 auto;
}
.gegen-agenturen blockquote { margin: 0 0 var(--s-3); font-style: italic; }
.gegen-agenturen cite {
  display: block;
  font-size: 13px;
  color: var(--color-teal-dark);
  font-weight: 700;
  font-style: normal;
}

/* Call-Preview-Grid */
.call-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 700px) { .call-preview__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .call-preview__grid { grid-template-columns: repeat(4, 1fr); } }
.call-step {
  background: #FFFFFF;
  border: 1px solid rgba(11, 29, 42, 0.08);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: flex;
  flex-direction: column;
}
.call-step__num {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-teal-dark);
  margin-bottom: var(--s-3);
}
.call-step h3 { margin: 0 0 var(--s-3); font-size: 18px; color: var(--text-on-brand); }
.call-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-on-brand); opacity: 0.8; }

/* Footer-Trust-Closer */
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}
@media (min-width: 720px) {
  .footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.footer__col { display: flex; flex-direction: column; gap: 6px; }
.footer__brand { font-weight: 700; color: var(--text); font-size: 14px; }
.footer__trust { font-size: 12px; color: var(--text-muted); max-width: 60ch; }
.footer__col--links { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); }
/* WCAG 2.5.5: Tap-Target mindestens 44x44, deshalb inline-flex statt reinem Textlink */
.footer__col--links a {
  color: var(--text-body);
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}
.footer__col--links a:hover { color: var(--color-teal-light); text-decoration: underline; }

/* Pricing CTA-Inline + Werbebudget-Note */
.pricing__note {
  margin: var(--s-7) 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: rgba(242, 205, 92, 0.08);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-on-brand);
}
.pricing__cta {
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pricing__cta-sub { font-size: 13px; color: var(--text-on-brand); opacity: 0.65; }

/* Call-Preview Inline-CTA */
.call-preview__cta {
  margin-top: var(--s-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.call-preview__cta-sub { font-size: 13px; color: var(--text-on-brand); opacity: 0.65; }

/* Footer Consent-Reset Button */
.footer__consent-reset {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text-body);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* WCAG 2.5.5: Tap-Target mindestens 44x44 */
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}
.footer__consent-reset:hover { color: var(--color-teal-light); border-color: var(--color-teal-light); }

/* Sticky CTA-Bar */
.cta-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 21, 32, 0.92) 0%, rgba(8, 21, 32, 0.98) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-bright);
  transform: translateY(120%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.cta-sticky.is-visible { transform: translateY(0); pointer-events: auto; }
.cta-sticky__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.cta-sticky__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}
.cta-sticky__text strong { color: var(--text-bright); font-size: 14px; line-height: 1.3; }
.cta-sticky__text span { color: var(--text-muted); font-size: 12px; }
.cta-sticky__btn {
  padding: 12px 22px;
  font-size: 15px;
  flex-shrink: 0;
  min-height: 48px;
}
@media (max-width: 560px) {
  .cta-sticky__text span { display: none; }
  .cta-sticky__inner { gap: var(--s-3); flex-wrap: nowrap; }
  .cta-sticky__btn { padding: 10px 18px; font-size: 14px; }
}

/* ============================================================
   POST-REFACTOR 2026-05-01: Senior-Berater + Trust-Band
   ============================================================ */

/* Senior-Berater-Sektion (Personifizierung Michael Zander) */
.senior {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.senior__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.senior__portrait-frame {
  position: relative;
  width: 232px;
  height: 232px;
  border-radius: 999px;
  padding: 6px;
  background: conic-gradient(from 200deg at 50% 50%, #F2CD5C 0deg, #6FBFB1 140deg, #2C5B70 240deg, #F2CD5C 360deg);
  box-shadow:
    0 18px 44px rgba(11,29,42,0.16),
    0 6px 14px rgba(11,29,42,0.10),
    0 0 0 1px rgba(242,205,92,0.18);
  isolation: isolate;
}
.senior__portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 6px;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.senior__portrait {
  width: 220px;
  height: 220px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: #fff;
}
.senior__caption {
  font-size: 13px;
  font-weight: 700;
  color: rgba(11,29,42,0.7);
  text-align: center;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.senior__text h2 {
  margin: 8px 0 18px;
}
.senior__body {
  color: rgba(11,29,42,0.78);
  margin-bottom: 14px;
  line-height: 1.6;
  font-size: 17px;
}
@media (max-width: 720px) {
  .senior {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 24px;
  }
  .senior__visual {
    margin: 0 auto;
  }
  .senior__portrait-frame {
    width: 192px;
    height: 192px;
    padding: 5px;
  }
  .senior__portrait {
    width: 182px;
    height: 182px;
  }
  .senior__body { font-size: 16px; }
}

/* Trust-Band: Logo-Marquee + Reviews */
.section--trust-band {
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(40px, 6vw, 64px);
}
/* Trust-Band direkt unter Hero: kompakter, ohne grossen Top-Abstand */
.section--trust-band--top {
  padding-top: clamp(24px, 3.5vw, 40px);
  padding-bottom: clamp(28px, 4vw, 48px);
  margin-top: calc(-1 * clamp(8px, 1.5vw, 24px));
}
.section--trust-band--top .trust-bar--inline {
  margin-bottom: clamp(16px, 2vw, 22px);
  padding: clamp(16px, 2vw, 22px) clamp(20px, 3vw, 28px);
}
.section--trust-band--top .featured-in {
  margin-bottom: clamp(14px, 2vw, 20px);
}
.trust-bar--inline {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(11, 29, 42, 0.06);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px);
  margin-bottom: clamp(20px, 3vw, 28px);
}
.reviews-bar--centered {
  justify-content: center;
}

/* Vakanzkosten / Pain — Long-Form Narrative (VSL-spezifisch, NICHT auf Startseite) */
.pain-bridge {
  max-width: 720px;
  margin: 36px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(11,29,42,0.08);
  font-size: 17px;
  font-style: italic;
  color: rgba(11,29,42,0.7);
  text-align: center;
}
.section__kicker--warn {
  color: #C8541A;
}
@media (max-width: 720px) {
  .pain-bridge { font-size: 15px; }
}

/* Featured-In Buch-Stripe (Trust-Band, Authority via Buch-Cover) */
.featured-in {
  display: flex;
  justify-content: center;
  margin: clamp(20px, 3vw, 28px) 0 clamp(16px, 2vw, 20px);
}
.featured-in__book {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(11, 29, 42, 0.08);
  border-radius: 14px;
  padding: 14px 22px 14px 14px;
  text-decoration: none;
  color: rgba(11, 29, 42, 0.86);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.featured-in__book:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(11, 29, 42, 0.08);
  border-color: rgba(11, 29, 42, 0.16);
}
.featured-in__book-cover {
  width: 56px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(11, 29, 42, 0.18);
  display: block;
}
.featured-in__book-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.featured-in__book-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(11, 29, 42, 0.55);
}
.featured-in__book-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(11, 29, 42, 1);
}
.featured-in__book-source {
  font-size: 13px;
  color: rgba(11, 29, 42, 0.65);
}

/* Mini-Testimonial-Stripe (zwischen Sektionen, Trust-Sub-Layer) */
.mini-testimonial {
  background: rgba(242, 205, 92, 0.08);
  border-top: 1px solid rgba(11, 29, 42, 0.06);
  border-bottom: 1px solid rgba(11, 29, 42, 0.06);
  padding: clamp(18px, 2.5vw, 24px) 0;
  text-align: center;
}
.mini-testimonial__quote {
  display: block;
  font-size: clamp(15px, 1.5vw, 17px);
  font-style: italic;
  color: rgba(11, 29, 42, 0.86);
  line-height: 1.55;
  max-width: 720px;
  margin: 0 auto 6px;
}
.mini-testimonial__source {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(11, 29, 42, 0.6);
}
@media (max-width: 720px) {
  .featured-in__book { padding: 12px 16px 12px 12px; gap: 14px; }
  .featured-in__book-cover { width: 44px; }
  .featured-in__book-title { font-size: 14px; }
  .featured-in__book-source { font-size: 12px; }
}

/* ============================================================
   HORMOZI VALUE-STACK (Anchor vor Pricing-Cards)
   Marktwert-Tabelle + Strikethrough-Reveal-Block.
   Conversion-Hebel: Total Value zeigen, dann Investition als Steal.
   ============================================================ */
.vstack {
  margin: 0 auto clamp(40px, 5vw, 56px);
  max-width: 920px;
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px);
  background:
    radial-gradient(ellipse at top right, rgba(111, 191, 177, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(242, 205, 92, 0.05) 0%, transparent 60%),
    #FFFFFF;
  border: 1px solid var(--color-gold-border);
  border-radius: var(--r-xl);
  box-shadow:
    0 18px 46px rgba(11, 29, 42, 0.07),
    0 6px 14px rgba(11, 29, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  position: relative;
  isolation: isolate;
}
.vstack::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-xl);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

.vstack__header {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 32px);
  position: relative;
  z-index: 1;
}
.vstack__kicker {
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  background: rgba(111, 191, 177, 0.12);
  border: 1px solid rgba(111, 191, 177, 0.30);
  border-radius: 999px;
}
.vstack__title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.018em;
  color: var(--text);
}
.vstack__title-em {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.vstack__table-wrap {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  margin: 0 0 clamp(24px, 3vw, 32px);
}
.vstack__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.vstack__table thead th {
  padding: 12px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid rgba(11, 29, 42, 0.10);
  white-space: nowrap;
}
.vstack__th-num { text-align: right; }
.vstack__table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(11, 29, 42, 0.06);
  vertical-align: top;
  color: var(--text);
}
.vstack__table tbody tr:last-child td {
  border-bottom: none;
}
.vstack__table tbody tr:hover {
  background: rgba(242, 205, 92, 0.04);
}
.vstack__td-num {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-teal-dark);
  font-size: 15px;
  letter-spacing: -0.01em;
}
.vstack__td-num em {
  font-style: italic;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 13px;
}
/* Durchgestrichener Einzelwert ueber der Inklusive-Pille. Niklaas 10.08.:
   der Kunde soll sehen, woraus sich die 15.000 zusammensetzen, ohne dass
   die Preise wie eine Rechnung wirken. Deshalb klein, grau, durchgestrichen. */
.vstack__was {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: rgba(11, 29, 42, 0.45);
  text-decoration: line-through;
  text-decoration-color: rgba(200, 84, 26, 0.7);
  text-decoration-thickness: 2.5px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.vstack__was--none {
  text-decoration: none;
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
}
/* Summenzeile: macht den Anker nachrechenbar statt behauptet */
.vstack__sum-row td { border-top: 2px solid rgba(11, 29, 42, 0.14) !important; padding-top: 18px !important; }
.vstack__sum { display: block; font-size: clamp(21px, 2.4vw, 26px); font-weight: 800;
  color: rgba(11, 29, 42, 0.5); text-decoration: line-through;
  text-decoration-color: rgba(200, 84, 26, 0.7); text-decoration-thickness: 3px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Mindestlaufzeit als eigener, deutlicher Hinweis */
.vstack__mlt {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0 auto clamp(14px, 2vw, 20px);
  width: fit-content; max-width: 100%;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(44, 91, 112, 0.07);
  border: 1.5px solid rgba(44, 91, 112, 0.22);
  color: var(--color-teal-dark);
  font-size: 14.5px; font-weight: 700; text-align: center;
}
.vstack__mlt svg { flex-shrink: 0; }

/* "Inklusive"-Pille statt Einzelpreis. Niklaas 10.08.: oben duerfen keine
   zehn Preise als Rechnung stehen, der Anker kommt einmal im Vergleich. */
.vstack__incl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: rgba(111, 191, 177, 0.14);
  border: 1px solid rgba(111, 191, 177, 0.4);
  color: var(--color-teal-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.vstack__incl::before {
  content: "";
  width: 13px; height: 13px;
  flex-shrink: 0;
  background: var(--color-teal-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-10' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-10' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vstack__td-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 1px;
  letter-spacing: 0;
}
.vstack__total-row td {
  padding: 16px 14px;
  border-top: 2px solid rgba(11, 29, 42, 0.16);
  border-bottom: none !important;
  font-size: 16px;
}
.vstack__td-total {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.018em;
}

/* Compare-Block: Marktwert vs. Investition mit visuellen Balken */
.vstack__compare {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  padding: clamp(24px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(111, 191, 177, 0.04) 0%, rgba(242, 205, 92, 0.06) 100%);
  border-radius: var(--r-lg);
  border: 1px solid rgba(11, 29, 42, 0.08);
  margin-bottom: clamp(18px, 2.5vw, 24px);
}

.vstack__compare-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.vstack__compare-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}

.vstack__compare-amount {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.030em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vstack__compare-amount--was {
  color: rgba(11, 29, 42, 0.45);
  text-decoration: line-through;
  text-decoration-color: rgba(200, 84, 26, 0.65);
  text-decoration-thickness: 3px;
}
.vstack__compare-amount--now {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.vstack__compare-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-top: -2px;
}

/* Aufgesplitteter Pricing-Reveal: 2.000 €/Monat als Hero + 3.500 € Setup darunter */
.vstack__compare-amount-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
}
.vstack__compare-amount-suffix {
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.vstack__compare-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 14px;
  background: rgba(11, 29, 42, 0.04);
  border: 1px solid rgba(11, 29, 42, 0.10);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.01em;
  align-self: center;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.vstack__compare-plus strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-teal-dark);
}
.vstack__compare-plus-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(111, 191, 177, 0.20);
  color: var(--color-teal-dark);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.vstack__compare-bar {
  display: block;
  height: 12px;
  border-radius: 6px;
  margin-top: 6px;
  position: relative;
}
.vstack__compare-bar--was {
  width: 100%;
  background: rgba(11, 29, 42, 0.14);
}
.vstack__compare-bar--now {
  width: 45%;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-teal) 100%);
  box-shadow: 0 4px 12px rgba(242, 205, 92, 0.30);
  margin-left: auto;
  margin-right: auto;
}

.vstack__compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  border: 2px solid rgba(111, 191, 177, 0.35);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(11, 29, 42, 0.06);
  flex-shrink: 0;
}

/* Mobile: Compare-Block vertikal, Pfeil zeigt nach unten */
@media (max-width: 700px) {
  .vstack__compare {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 16px;
  }
  .vstack__compare-arrow {
    width: 38px;
    height: 38px;
    margin: 0 auto;
  }
  .vstack__compare-arrow svg {
    transform: rotate(90deg);
  }
  .vstack__compare-bar--was,
  .vstack__compare-bar--now { max-width: 280px; margin-left: auto; margin-right: auto; }
}

/* Savings-Banner: Glass-Teal-Style, sekundaere Hierarchie unter Haupt-CTA */
.vstack__savings-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  padding: 11px 22px;
  background:
    linear-gradient(135deg, rgba(111, 191, 177, 0.14) 0%, rgba(111, 191, 177, 0.06) 100%),
    rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1.5px solid rgba(111, 191, 177, 0.45);
  border-radius: 999px;
  box-shadow:
    0 6px 18px rgba(111, 191, 177, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--color-teal-dark);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 auto clamp(14px, 2vw, 18px);
  max-width: fit-content;
}
.vstack__savings-banner strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-teal-dark);
}
.vstack__savings-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, rgba(111, 191, 177, 0.22) 0%, rgba(111, 191, 177, 0.10) 100%);
  border: 1px solid rgba(111, 191, 177, 0.35);
  border-radius: 999px;
  flex-shrink: 0;
}
.vstack__savings-emoji svg { color: var(--color-teal-dark); width: 14px; height: 14px; }

.vstack__reveal-volume {
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(16px, 2.5vw, 22px);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: center;
  max-width: 640px;
}
.vstack__reveal-volume strong {
  color: var(--color-teal-dark);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vstack__cta-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.vstack__cta {
  font-size: 17px;
  padding: 18px 36px;
}

@media (max-width: 700px) {
  .vstack { padding: 22px 16px; }
  .vstack__table thead th { font-size: 10px; padding: 10px 10px; }
  .vstack__table tbody td { padding: 12px 10px; font-size: 13px; }
  .vstack__td-num { font-size: 14px; }
}

/* ============================================================
   MID-PAGE CTA: Loud Gradient-Sektion
   Volle Breite, Brand-Gradient als BG, weisse Schrift.
   Hierarchie-Stop fuer User waehrend Scroll.
   ============================================================ */
.section--cta-loud {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(242, 205, 92, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(111, 191, 177, 0.45) 0%, transparent 55%),
    linear-gradient(135deg, #2C5B70 0%, #0B1D2A 50%, #2C5B70 100%);
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
.section--cta-loud::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 24px);
  pointer-events: none;
  z-index: 0;
}
.section--cta-loud::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(242, 205, 92, 0.6) 50%, transparent 100%);
  height: 2px;
  top: 0;
  bottom: auto;
  z-index: 2;
  pointer-events: none;
}
.cta-loud__glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90%);
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(242, 205, 92, 0.30) 0%, transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.cta-loud {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.cta-loud__kicker {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: clamp(20px, 3vw, 28px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F2CD5C;
  background: rgba(242, 205, 92, 0.10);
  border: 1px solid rgba(242, 205, 92, 0.35);
  border-radius: 999px;
}

.cta-loud__title {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(16px, 2.4vw, 24px);
  color: #FFFFFF;
}
.cta-loud__title-em {
  display: inline-block;
  background: linear-gradient(135deg, #F2CD5C 0%, #6FBFB1 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.025em;
}

.cta-loud__sub {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto clamp(28px, 4vw, 40px);
  max-width: 640px;
}

.btn-cta-loud {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 40px;
  background: linear-gradient(135deg, #F2CD5C 0%, #6FBFB1 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #0B1D2A;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.012em;
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow:
    0 22px 56px rgba(242, 205, 92, 0.50),
    0 8px 18px rgba(11, 29, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  text-decoration: none;
  cursor: pointer;
}
.btn-cta-loud::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(242, 205, 92, 0.55) 50%, transparent 100%);
  animation: shine 4s ease-in-out infinite;
  pointer-events: none;
}
.btn-cta-loud:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 30px 68px rgba(242, 205, 92, 0.65),
    0 12px 26px rgba(11, 29, 42, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);
  color: #0B1D2A;
}
.btn-cta-loud svg { transition: transform .25s ease; position: relative; z-index: 1; }
.btn-cta-loud:hover svg { transform: translateX(4px); }

.cta-loud__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  list-style: none;
  padding: 0;
  margin: clamp(28px, 4vw, 36px) 0 0;
}
.cta-loud__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.01em;
}
.cta-loud__trust li svg { width: 18px; height: 18px; flex-shrink: 0; }

.hide-sm { display: inline; }
@media (max-width: 700px) {
  .hide-sm { display: none; }
  .btn-cta-loud { padding: 18px 28px; font-size: 16px; }
  .cta-loud__trust { gap: 14px; }
  .cta-loud__trust li { font-size: 12px; }
}

/* ============================================================
   STICKY-SCROLL METHODE (Bewerber-Code 5-Schluessel)
   2-Spalten: Sticky-Rail links + scrollbare Step-Cards rechts.
   Active-State via IntersectionObserver in script.js.
   ============================================================ */

.section--method { position: relative; }

.mts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(32px, 4vw, 48px);
  position: relative;
}
@media (min-width: 1000px) {
  .mts {
    grid-template-columns: 360px 1fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}

/* --- Sticky Rail --- */
.mts__rail { position: relative; }
@media (min-width: 1000px) {
  .mts__rail {
    position: sticky;
    top: 110px;
    align-self: start;
    z-index: 1;
  }
}

.mts__rail-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 26px 24px;
  background:
    radial-gradient(ellipse at top right, rgba(111, 191, 177, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(242, 205, 92, 0.08) 0%, transparent 55%),
    #FFFFFF;
  border: 1px solid var(--color-gold-border);
  border-radius: var(--r-xl);
  box-shadow:
    0 18px 46px rgba(11, 29, 42, 0.08),
    0 6px 14px rgba(11, 29, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  position: relative;
}
.mts__rail-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-xl);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

/* Buch-Card oben im Rail */
.mts__book {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(11, 29, 42, 0.03);
  border: 1px solid rgba(11, 29, 42, 0.06);
  text-decoration: none;
  color: inherit;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.mts__book:hover {
  background: rgba(242, 205, 92, 0.08);
  border-color: var(--color-gold-border);
  transform: translateY(-1px);
}
.mts__book img {
  width: 56px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(11, 29, 42, 0.18);
  flex-shrink: 0;
}
.mts__book-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mts__book-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mts__book-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.mts__book-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-teal-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Step-Liste */
.mts__steps {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mts__step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  position: relative;
  opacity: 0.5;
  transition: opacity .3s ease;
  cursor: default;
}
.mts__step + .mts__step::before {
  content: "";
  position: absolute;
  left: 16px;
  top: -1px;
  width: 1px;
  height: 12px;
  background: rgba(11, 29, 42, 0.12);
}
.mts__step.is-passed { opacity: 0.7; }
.mts__step.is-active { opacity: 1; }

.mts__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(11, 29, 42, 0.05);
  color: var(--text-muted);
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.mts__step.is-passed .mts__step-num {
  background: rgba(111, 191, 177, 0.15);
  color: var(--color-teal-dark);
}
.mts__step.is-active .mts__step-num {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-teal) 100%);
  color: #0B1D2A;
  box-shadow: 0 8px 22px rgba(242, 205, 92, 0.35);
  transform: scale(1.05);
}
.mts__step-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Progress-Bar */
.mts__progress {
  height: 4px;
  background: rgba(11, 29, 42, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.mts__progress-bar {
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-teal) 100%);
  border-radius: 4px;
  transition: width .4s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 0 12px rgba(242, 205, 92, 0.45);
}

/* --- Cards rechts --- */
.mts__content {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 28px);
}

.mts__card {
  position: relative;
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 3.5vw, 40px) clamp(28px, 3.5vw, 40px) clamp(34px, 4vw, 48px);
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: 0 12px 30px rgba(11, 29, 42, 0.05), 0 2px 6px rgba(11, 29, 42, 0.03);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  scroll-margin-top: 110px;
}

.mts__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(28px, 3.5vw, 40px);
  bottom: clamp(28px, 3.5vw, 40px);
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-teal) 100%);
  opacity: 0.28;
  transition: opacity .35s ease;
}

.mts__card.is-active {
  border-color: rgba(242, 205, 92, 0.45);
  box-shadow:
    0 28px 60px rgba(11, 29, 42, 0.10),
    0 8px 18px rgba(11, 29, 42, 0.05),
    0 0 0 1px rgba(242, 205, 92, 0.18);
  transform: translateY(-2px);
}
.mts__card.is-active::before { opacity: 1; }

.mts__card-num {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(111, 191, 177, 0.12);
}

.mts__card-title {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--text);
}

.mts__card-question,
.mts__card-output {
  display: block;
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-body);
}
.mts__card-question::before,
.mts__card-output::before {
  content: "Kernfrage";
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  margin-bottom: 4px;
}
.mts__card-output::before { content: "Output"; }
.mts__card-question { font-style: italic; }
.mts__card-question::before { font-style: normal; }

.mts__card-detail {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px dashed rgba(11, 29, 42, 0.10);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Method-Outro: Closing-Statement unter dem Sticky-Block */
.section--method .method__outro {
  max-width: 820px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* Mobile Tweaks */
@media (max-width: 999px) {
  .mts__rail-inner {
    padding: 20px 18px 16px;
    gap: 16px;
  }
  .mts__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .mts__step { flex-direction: column; gap: 6px; padding: 6px 2px; }
  .mts__step + .mts__step::before { display: none; }
  .mts__step-name { font-size: 11px; text-align: center; line-height: 1.2; }
  .mts__step-num { width: 28px; height: 28px; font-size: 11px; }
  .mts__progress { display: none; }
  .mts__book { gap: 10px; }
  .mts__book img { width: 48px; }
}

/* ----------------------------------------------------------------
   Case-Videos (10.08.2026)
   Anzeigen-Clip pro Kundencase, unten in der Case-Karte. Nutzt den
   bestehenden .video-click-to-play-Layer, damit Vimeo erst nach Klick
   laedt. Kleinerer Play-Button als beim Hauptvideo, weil der Case
   das Zahlen-Grid nicht ueberstrahlen soll.
   ---------------------------------------------------------------- */
.case__video {
  position: relative;
  margin-top: var(--s-5);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #0B1D2A 0%, #13324A 100%);
  border: 1px solid rgba(242, 205, 92, 0.20);
  box-shadow: 0 10px 28px -12px rgba(11, 29, 42, 0.30);
}
.case__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.case__video .video-click-to-play__play-btn { width: 56px; height: 56px; }
.case__video .video-click-to-play__hint {
  bottom: 10px;
  font-size: 11px;
  padding: 5px 11px;
}
.case__video-caption {
  position: absolute;
  top: 12px; left: 14px;
  z-index: 3;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.video-click-to-play.is-playing .case__video-caption { display: none; }
@media (max-width: 560px) {
  .case__video .video-click-to-play__play-btn { width: 48px; height: 48px; }
  .case__video-caption { font-size: 11px; }
}

/* ----------------------------------------------------------------
   Video-Recruiting Add-on-Karte unter den Preis-Karten
   Design-Ueberarbeitung 10.08.2026 (Niklaas: "designmaessig auch noch
   nicht so gelungen"). Vorher ein breiter grauer Kasten mit
   gestricheltem Rand und Fliesstext, der wie ein Rechtshinweis wirkte.
   Jetzt zweispaltig: links das Angebot in scanbaren Punkten, rechts
   der Preis als eigener Block mit Trennlinie. Gedeckte Petrol-Toene
   statt Grau, aber bewusst ohne Gold-Akzent und schmaler als die
   Preis-Karten, damit die 4.000 die 3.000 nicht angreifen.
   ---------------------------------------------------------------- */
.addon {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  max-width: 840px;
  /* unten mehr Luft als oben, damit die Karte sich klar von den drei
     Transparenz-Karten darunter absetzt (Niklaas 10.08.2026). */
  margin: var(--s-9) auto var(--s-10);
  padding: var(--s-6) var(--s-7);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(44, 91, 112, 0.05), rgba(44, 91, 112, 0.02));
  border: 1px solid rgba(44, 91, 112, 0.16);
}

.addon__flag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(44, 91, 112, 0.10);
  border: 1px solid rgba(44, 91, 112, 0.20);
  color: #2C5B70;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.addon__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0B1D2A;
}
.addon__icon { color: #2C5B70; flex-shrink: 0; }

.addon__sub {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.58;
  color: rgba(11, 29, 42, 0.68);
}

.addon__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.addon__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(11, 29, 42, 0.82);
}
.addon__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
}

.addon__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--s-5);
  border-top: 1px solid rgba(44, 91, 112, 0.16);
}
.addon__price-num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #2C5B70;
}
.addon__price-unit {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(44, 91, 112, 0.78);
}
.addon__price-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(11, 29, 42, 0.55);
}

@media (min-width: 720px) {
  .addon {
    grid-template-columns: 1fr auto;
    gap: var(--s-8);
    align-items: start;
  }
  .addon__price {
    align-items: flex-end;
    text-align: right;
    max-width: 230px;
    padding-top: 0;
    padding-left: var(--s-7);
    border-top: none;
    border-left: 1px solid rgba(44, 91, 112, 0.16);
  }
}

/* Beleg-Bild statt Video (Ahnefeld, 10.08.2026).
   Gleiche Masse und Rundung wie .case__video, damit die Karten in einer Reihe
   gleich hoch bleiben. Bewusst OHNE Play-Button, damit es nicht wie ein
   kaputtes Video wirkt. */
.case__proof {
  position: relative;
  margin: var(--s-5) 0 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(44, 91, 112, 0.16);
  box-shadow: 0 10px 28px -12px rgba(11, 29, 42, 0.30);
  background: #F4F7F9;
}
.case__proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}
/* Pille rechts, damit sie links das Ahnefeld-Branding im Screenshot nicht verdeckt
   (Niklaas 10.08.2026). */
.case__proof-caption {
  position: absolute;
  top: 12px; right: 14px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(11, 29, 42, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
@media (max-width: 560px) {
  .case__proof-caption { font-size: 11px; }
}

/* ----------------------------------------------------------------
   Eskalations-Grafik in der Schmerz-Sektion
   Design-Ueberarbeitung 10.08.2026 (Niklaas: "layoutmaessig noch nicht
   so geil"). Vorher schwebte eine duenne SVG-Kurve ueber vier flachen
   weissen Kaesten und darunter stand tote Flaeche.
   Jetzt ein Steigungs-Diagramm, in dem die Karten selbst die Saeulen
   sind: jede sitzt hoeher als die vorige und steht auf einer getoenten
   Saeule bis zur gemeinsamen Grundlinie. Die nummerierten Marker auf
   den Kartenkanten bilden die Steigungslinie, es braucht keine
   separate Kurve mehr.
   ---------------------------------------------------------------- */
.pain-lead {
  max-width: 660px;
  margin: 0 auto var(--s-9);
  text-align: center;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0B1D2A;
}

/* Die Sektion laeuft in .container--narrow (880px). Fuer vier Spalten zu
   eng, deshalb bricht nur die Grafik auf volle Containerbreite aus. */
.pain-esc {
  position: relative;
  width: min(1160px, calc(100vw - 40px));
  margin-left: 50%;
  transform: translateX(-50%);
}

.pain-esc__plot { position: relative; }

.pain-esc__steps {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

.pain-esc__step {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pain-esc__card {
  position: relative;
  padding: 30px 22px 24px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(11, 29, 42, 0.08);
  box-shadow: 0 20px 44px -30px rgba(11, 29, 42, 0.55);
}

/* Stufen-Marker auf der Kartenkante. Die vier Kreise bilden zusammen
   die Steigung. */
.pain-esc__num {
  position: absolute;
  top: -17px;
  left: 22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--esc);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border: 3px solid #FFFFFF;
  box-shadow: 0 8px 18px -8px var(--esc);
}

.pain-esc__week {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--esc);
}
.pain-esc__title {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #0B1D2A;
}
.pain-esc__card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(11, 29, 42, 0.7);
}
.pain-esc__card p strong { color: #B02418; font-weight: 700; }

/* Letzte Stufe ist der Kipppunkt und darf sich abheben. */
.pain-esc__step--crit .pain-esc__card {
  background: linear-gradient(180deg, rgba(176, 36, 24, 0.08), rgba(176, 36, 24, 0.02));
  border-color: rgba(176, 36, 24, 0.34);
  box-shadow: 0 22px 48px -28px rgba(176, 36, 24, 0.55);
}

/* Saeule unter der Karte, nur im Diagramm-Layout */
.pain-esc__riser { display: none; }

@media (min-width: 860px) {
  .pain-esc__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    min-height: 440px;
  }
  /* Treppe: jede Stufe sitzt hoeher als die vorige. */
  .pain-esc__step:nth-child(1) { margin-top: 138px; }
  .pain-esc__step:nth-child(2) { margin-top: 92px; }
  .pain-esc__step:nth-child(3) { margin-top: 46px; }
  .pain-esc__step:nth-child(4) { margin-top: 0; }

  .pain-esc__riser {
    display: block;
    flex: 1 1 auto;
    min-height: 18px;
    margin: -6px 14px 0;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--esc) 30%, transparent),
      color-mix(in srgb, var(--esc) 3%, transparent)
    );
  }

  /* Gemeinsame Grundlinie, auf der alle Saeulen stehen */
  .pain-esc__plot::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
      rgba(237, 168, 28, 0.45) 0%,
      rgba(226, 117, 30, 0.55) 38%,
      rgba(207, 74, 29, 0.62) 70%,
      rgba(176, 36, 24, 0.75) 100%);
  }
}

/* Kosten-Angabe als Achsenbeschriftung unter der Grundlinie, statt als
   freistehende Pille daneben. */
.pain-esc__axis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  margin: var(--s-5) 0 0;
  text-align: center;
}
.pain-esc__axis-num {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #B02418;
}
.pain-esc__axis-txt {
  font-size: 14.5px;
  color: rgba(11, 29, 42, 0.62);
}

@media (max-width: 859px) {
  .pain-esc__card { padding: 28px 20px 20px; }
  .pain-esc__axis { justify-content: flex-start; text-align: left; }
}

/* ----------------------------------------------------------------
   Trust-/Authority-Sektion "Wer dahinter steht" (10.08.2026)
   Niklaas: "kannst du die nicht noch ein bisschen schoener machen,
   mehr Trust-, Authority-Signale, Bewertung nochmal". Vorbild ist die
   Ueber-mich-Sektion auf fachkraft-jetzt.de: Portrait mit Pills,
   Positions-Zitat, Fakten-Reihe, Buch-Badge, Bewertungen.
   Loest das alte .about ab (Foto plus zwei Absaetze).
   ---------------------------------------------------------------- */
.about2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 900px) {
  .about2 { grid-template-columns: 300px 1fr; gap: var(--s-10); }
}

/* --- Portrait mit Brand-Ring (gleiches Muster wie Senior-Berater) --- */
.about2__visual { display: flex; flex-direction: column; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .about2__visual { align-items: stretch; } }

.about2__photo-frame {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  padding: 6px;
  background: conic-gradient(from 210deg, var(--color-gold), var(--color-teal), var(--color-petrol), var(--color-gold));
  box-shadow: 0 24px 56px -30px rgba(11, 29, 42, 0.5);
}
.about2__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r-xl) - 5px);
  display: block;
  background: #FFFFFF;
}

.about2__pills { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; }
.about2__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(11, 29, 42, 0.09);
  box-shadow: 0 6px 18px -12px rgba(11, 29, 42, 0.4);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(11, 29, 42, 0.82);
}
.about2__pill svg { color: var(--color-teal-dark); flex-shrink: 0; }

/* --- Positions-Zitat --- */
.about2__quote {
  margin: 0 0 var(--s-6);
  padding: 0 0 0 var(--s-5);
  border-left: 3px solid var(--color-gold);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #0B1D2A;
}

/* --- Fakten-Reihe --- */
.about2__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding: var(--s-5) 0;
  border-top: 1px solid rgba(11, 29, 42, 0.1);
  border-bottom: 1px solid rgba(11, 29, 42, 0.1);
}
@media (min-width: 640px) { .about2__facts { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.about2__fact { display: flex; flex-direction: column; gap: 4px; }
.about2__fact-num {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(120deg, var(--color-gold) 0%, var(--color-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about2__fact-label { font-size: 12.5px; line-height: 1.4; color: rgba(11, 29, 42, 0.6); }

.about2__text {
  margin: 0 0 var(--s-6);
  font-size: 15.5px;
  line-height: 1.68;
  color: rgba(11, 29, 42, 0.74);
}

/* --- Buch-Badge --- */
.about2__book {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: #FFFFFF;
  border: 1px solid rgba(242, 205, 92, 0.5);
  box-shadow: 0 12px 32px -22px rgba(11, 29, 42, 0.5);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.about2__book:hover {
  transform: translateY(-2px);
  border-color: var(--color-gold);
  box-shadow: 0 18px 40px -22px rgba(242, 205, 92, 0.7);
}
.about2__book-cover {
  width: 60px; height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 16px -8px rgba(11, 29, 42, 0.6);
  flex-shrink: 0;
}
.about2__book-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.about2__book-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-teal-dark);
}
.about2__book-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #0B1D2A; }
.about2__book-sub { font-size: 12.5px; color: rgba(11, 29, 42, 0.58); }
.about2__book-arrow { margin-left: auto; color: var(--color-teal-dark); flex-shrink: 0; }

/* --- Bewertungen --- */
.about2__reviews { margin-top: var(--s-6); justify-content: flex-start; }
@media (max-width: 899px) { .about2__reviews { justify-content: center; } }

/* ================================================================
   MOBIL-HAERTE 10.08.2026
   Drei Befunde aus der Pruefung auf 390 / 360 / 320 px.
   ================================================================ */

/* --- 1) Play-Button war eine gequetschte Ellipse ---------------
   .video-frame__play liegt in einem Flex-Column-Container. Ohne
   flex-shrink:0 wird die Hoehe im schmalen 16:9-Rahmen zusammen-
   gedrueckt, aus dem Kreis wird ein Oval. Zusaetzlich lief der
   Button in die "2:21 Min folgt"-Pille oben links hinein. */
.video-frame__play { flex: 0 0 auto; }
@media (max-width: 560px) {
  .video-frame__play { width: 62px; height: 62px; }
  .video-frame__play svg { width: 24px; height: 24px; margin-left: 4px; }
  /* oben Platz lassen, damit die Meta-Pille frei steht */
  .video-frame__placeholder { padding: 52px var(--s-5) var(--s-5); gap: 10px; }
  .video-frame__label { font-size: 14px; }
  .video-frame__note { font-size: 12px; line-height: 1.45; }
}

/* --- 2) Hero-Reihenfolge auf dem Handy ------------------------
   Das Video stand erst bei 697 px, also nach einer vollen Bild-
   schirmhoehe Text. Die vier Authority-Pills brauchen allein vier
   Zeilen. Auf Mobil rutschen sie unter das Video, und der lange
   Mini-Text wandert unter den Player. Das Video liegt danach
   direkt unter Headline und Sub. */
@media (max-width: 860px) {
  .hero .container { display: flex; flex-direction: column; }
  .hero__kicker    { order: 1; }
  .hero__headline  { order: 2; }
  .hero__sub       { order: 3; }
  .hero__video-row { order: 4; }
  .hero__authority { order: 5; margin-top: var(--s-7); }

  .hero__video-col { display: flex; flex-direction: column; }
  .hero__video-col .video-frame          { order: 1; }
  .hero__video-col .hero__cta            { order: 3; }
  .hero__video-col .video-frame__privacy { order: 4; }
  .hero__video-row .checklist            { order: 5; }
}

/* --- 3) Horizontales Scrollen bei 360 und 320 px --------------
   .hero__pill hatte white-space:nowrap. "Telefonquali durch
   Senior-Berater (40 J. Logistik)" ist damit 368 px breit und
   sprengt das Viewport. Auf schmalen Geraeten darf umgebrochen
   werden. */
@media (max-width: 620px) {
  .hero__pill {
    white-space: normal;
    text-align: left;
    align-items: flex-start;
    line-height: 1.35;
  }
  .hero__pill svg { margin-top: 2px; }
}
/* Letzte Sicherung gegen Querscrollen.
   ⚠️ WICHTIG: hier MUSS `clip` stehen, nicht `hidden`.
   `overflow-x: hidden` macht aus dem Element einen Scroll-Container und
   setzt damit JEDES `position: sticky` auf der ganzen Seite ausser Kraft.
   Genau das ist am 10.08.2026 passiert: die Sticky-Rail der
   Bewerber-Code-Methode blieb nicht mehr stehen. `clip` schneidet ab,
   ohne einen Scroll-Container zu erzeugen, sticky funktioniert weiter. */
html, body { overflow-x: clip; max-width: 100%; }

/* --- 4) Grid-Blowout in der Methode-Sektion --------------------
   .mts ist auf dem Handy 320 px breit, die Spalte rechnete sich
   aber auf 349 px. Ursache ist das Standard-min-width:auto von
   Grid-Items: sie duerfen nicht unter ihre max-content-Breite
   schrumpfen und sprengen die Spur. Mit minmax(0,1fr) und
   min-width:0 bleibt alles im Container. */
.mts { grid-template-columns: minmax(0, 1fr); }
.mts__rail, .mts__content, .mts__card, .mts__rail-inner { min-width: 0; }
@media (min-width: 1000px) {
  .mts { grid-template-columns: 360px minmax(0, 1fr); }
}
/* Gleiche Absicherung fuer die uebrigen Grid-Container der Seite.
   Ueberall minmax(0,1fr) statt 1fr, damit kein Item die Spur sprengt. */
.moat { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .moat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.moat__text, .moat__visual, .moat__quote { min-width: 0; }
.about2, .pain-esc__steps, .cases, .addon { min-width: 0; }
.about2 > *, .pain-esc__step, .case, .addon > * { min-width: 0; }
.mts__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mts__step, .mts__step-num, .ptl-step, .ptl-step__sub { min-width: 0; }

/* --- 5) Play-Button lief in die Meta-Pille -------------------
   Der 16:9-Rahmen ist auf dem Handy nur rund 197 px hoch. Button,
   Label und Hinweistext brauchen mehr, deshalb wurde der Inhalt
   nach oben in die "2:21 Min folgt"-Pille geschoben.
   Solange der Platzhalter drin steht, bekommt der Rahmen auf
   Mobil 4:3. Sobald der echte Vimeo-Player eingebettet ist, faellt
   die Regel per :has() automatisch weg und es bleibt bei 16:9. */
@media (max-width: 560px) {
  /* KORREKTUR 10.08. (Niklaas: "das Format ist doch nicht Vimeo-Format"):
     Der Rahmen bleibt auch auf dem Handy bei 16:9, sonst sieht der
     Platzhalter nach falschem Videoformat aus und passt spaeter nicht
     zum echten Player. Damit der Inhalt in die dann nur ~197 px hohe
     Flaeche passt, wird der Platzhalter schlanker: kleinerer Button,
     kein Hinweistext. Der Text ist ohnehin nur Platzhalter-Prosa. */
  .video-frame__play { width: 54px; height: 54px; }
  .video-frame__play svg { width: 22px; height: 22px; margin-left: 3px; }
  .video-frame__placeholder { padding: 46px var(--s-4) var(--s-4); gap: 8px; }
  .video-frame__label { font-size: 13.5px; }
  .video-frame__note { display: none; }
}

/* --- 6) CTA-Button auf sehr schmalen Geraeten ------------------
   Bei 320 px sprengte .btn-primary mit 34 px Innenabstand und
   17 px Schrift das Viewport. Auf schmalen Geraeten weniger
   Polsterung, Umbruch erlaubt, und der Button darf nicht breiter
   werden als sein Container. */
@media (max-width: 400px) {
  .btn-primary {
    padding: 15px 20px;
    font-size: 16px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .btn-primary svg { flex-shrink: 0; }
}

/* ================================================================
   MOBIL-FEINSCHLIFF HERO 10.08.2026 (Niklaas)
   ================================================================ */

/* 1) Header brach mobil auf zwei Zeilen um. Die Video-Laenge steht
      ohnehin gleich darunter im Player, mobil also weg. */
@media (max-width: 700px) {
  .site-header__meta { display: none; }
  .site-header__pill { flex-wrap: nowrap; gap: var(--s-4); }
  .brand__text { white-space: nowrap; }
}

/* 2) Reihenfolge im Hero auf dem Handy:
      Video -> CTA direkt darunter -> Datenschutz-Hinweis.
      Die Checkliste "Was Sie in den 2:21 Minuten sehen" ist mobil
      ausgeblendet (Niklaas 10.08.: macht unter dem Video keinen Sinn
      mehr). Der Mini-Text "Kein Opt-In, keine Email-Wall" ist inzwischen
      komplett entfallen, also auch auf dem Desktop.
      Grund: die Checkliste ist ein Pre-Frame fuers Video. Auf dem Desktop
      steht sie daneben und wirkt vor dem Klick. Mobil steht sie hinter
      Video UND CTA, kann also nicht mehr vorbereiten, kostet dort aber
      524 px, also 62 % einer Bildschirmhoehe. Alle fuenf Inhalte stehen
      weiter unten ohnehin nochmal (280/4/658 in den Cases, 15 Bewerber +
      Nachbesetzungsschutz im Leistungsversprechen, die vier Filter in der
      Methode). Auf dem Desktop bleiben beide stehen. */
@media (max-width: 860px) {
  /* .checklist liegt NEBEN .hero__video-col, nicht darin. Mit order allein
     laesst sie sich deshalb nicht zwischen CTA und Datenschutz-Hinweis
     schieben. `display: contents` loest die Zwischenebene auf, danach sind
     alle Elemente Geschwister im selben Flex-Container und frei sortierbar. */
  /* align-items: stretch ist hier Pflicht. Die Zeile erbt sonst
     flex-start vom Desktop-Layout, und seit .hero__video-col auf
     display:contents steht, schrumpft der Video-Rahmen dadurch auf
     Inhaltsbreite: links 20 px Rand, rechts 56 px. */
  .hero__video-row { display: flex; flex-direction: column; align-items: stretch; }
  .hero__video-col { display: contents; }

  .hero__video-row .video-frame          { order: 1; }
  .hero__video-row .hero__cta            { order: 2; margin-top: var(--s-5); }
  .hero__video-row .video-frame__privacy { order: 3; margin-top: var(--s-4); }
  .hero__video-row .checklist            { display: none; }
}


/* --- Authority-Pills mobil vereinheitlichen (Niklaas 10.08.) ----
   Vorher: zwei Pillen 350 px breit und 53 px hoch (Text bricht um),
   zwei nur 291 bzw. 254 px breit und 36 px hoch. Sah unruhig aus.
   Jetzt Grid mit grid-auto-rows: 1fr, damit ALLE Zeilen auf die Hoehe
   der hoechsten gehen, und volle Breite fuer alle. Kein fester Wert,
   passt sich also an, wenn sich die Texte aendern. */
@media (max-width: 620px) {
  .hero__authority {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  .hero__pill {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
  }
}

/* --- Sticky-CTA-Leiste mobil: Button war abgeschnitten (10.08.) -----
   Ursache: .cta-sticky__text hatte min-width:200px, der Button
   flex-shrink:0 und 22px Innenabstand. Zusammen 403 px in einer
   358 px breiten Leiste. flex-wrap konnte nicht greifen, weil die
   200px-Untergrenze den Umbruchpunkt nie erreichen liess.
   Loesung: Text darf schrumpfen (min-width 0), Button wird kompakter
   und bleibt einzeilig. */
@media (max-width: 560px) {
  .cta-sticky { padding-left: 12px; padding-right: 12px; }
  .cta-sticky__inner { gap: 10px; flex-wrap: nowrap; align-items: center; }
  .cta-sticky__text { min-width: 0; flex: 1 1 auto; }
  .cta-sticky__text strong { font-size: 13px; line-height: 1.25; }
  .cta-sticky__btn {
    flex: 0 0 auto;
    padding: 11px 14px;
    font-size: 14px;
    white-space: nowrap;
    max-width: none;
  }
  .cta-sticky__btn svg { width: 14px; height: 14px; }
}

/* ================================================================
   PROJEKT-TIMELINE MOBIL NEU AUFGEBAUT (10.08.2026, Niklaas:
   "das ist im VSL-Funnel kaputt in der mobilen Version")
   Die Komponente wurde in Session 7 aus dem Relaunch portiert und ist
   im Kern ein 8-Spalten-Grid fuer Desktop. Die mobilen Regeln waren
   nur Flickwerk darauf: Punkte lagen bei x=53/60/65 statt auf dem
   Strang bei x=7, die Milestone-Sterne ragten links aus der Karte,
   und die vier .ptl-step--empty aus dem Desktop-Grid erschienen als
   sinnlose leere Punkte.
   Loesung: pro Schritt ein eigenes 2-Spalten-Grid. Spalte 1 traegt
   den Punkt, der Strang liegt exakt auf deren Mitte. Damit sitzt
   alles automatisch auf einer Achse, egal wie lang die Texte sind.
   ================================================================ */
/* ⚠️ BREAKPOINT AM 10.08. VON 720 AUF 1100 GEZOGEN (Fund Niklaas am iPad:
   "guck mal, das ist ja auch kaputt").
   Der Neubau unten war immer breitenunabhaengig (pro Schritt ein eigenes
   2-Spalten-Grid), er griff nur zu spaet. Zwischen 721 und 1100 px lief noch
   der alte Flickwerk-Block, und dort lagen die Punkte gemessen auf ZWEI
   Achsen: normale bei x=53, Meilensteine bei x=39, weil deren Regel
   `left: -44px` statt `-30px` setzt. 14 px Versatz, der Strang lag dazwischen.
   Unterhalb 720 war schon alles korrekt, deshalb war es nie aufgefallen. */
@media (max-width: 1100px) {
  .ptl--me,
  .ptl--agency {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
  }

  /* Strang: senkrecht, exakt auf der Mitte der Punkt-Spalte (17px) */
  .ptl--me::before,
  .ptl--agency::before {
    top: 14px;
    bottom: 14px;
    left: 17px;
    right: auto;
    width: 0;
    height: auto;
    border-top: none;
    -webkit-mask: none;
            mask: none;
  }
  .ptl--me::before     { border-left: 2px solid var(--color-gold-border); }
  .ptl--agency::before { border-left: 1px dashed var(--border-bright); }

  /* Jeder Schritt: Punkt links, Text rechts */
  .ptl--me .ptl-step,
  .ptl--agency .ptl-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
    align-items: start;
    text-align: left;
    padding: 0 0 20px;
    margin: 0;
    min-height: 0;
    width: auto;
    position: relative;
  }

  .ptl--me .ptl-step__dot,
  .ptl--agency .ptl-step__dot {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    position: relative;
    left: auto; top: auto;
    transform: none;
    margin: 0;
  }

  .ptl--me .ptl-step__num,
  .ptl--me .ptl-step__label,
  .ptl--me .ptl-step__sub,
  .ptl--agency .ptl-step__label,
  .ptl--agency .ptl-step__sub {
    grid-column: 2;
    position: static;
    transform: none;
    left: auto; top: auto;
    text-align: left;
    margin-left: 0;
  }
  .ptl--me .ptl-step__num  { grid-row: 1; margin-bottom: 2px; }
  .ptl--me .ptl-step__label,
  .ptl--agency .ptl-step__label { align-self: center; }

  /* Sterne ragten links aus der Karte heraus. Die Hervorhebung
     traegt auf dem Handy ohnehin der groessere, andersfarbige Punkt. */
  .ptl-step__milestone-star { display: none; }

  /* Platzhalter-Zellen aus dem Desktop-Grid: mobil sinnlos, weil sie
     nur leere Punkte ohne Text erzeugen. */
  .ptl--agency .ptl-step--empty,
  .ptl--me .ptl-step--empty { display: none; }
}

/* Nachtrag zur Timeline: die Milestone-Punkte trugen aus dem alten
   Mobil-Flickwerk noch `left: -44px` (Z. 2362) und ein `top: -21px
   !important`. Dadurch sassen genau sie 44 px links neben der Achse
   und ragten als einzige aus der Karte. Hier zurueckgesetzt, damit
   auch sie im Grid der Punkt-Spalte landen. */
@media (max-width: 1100px) {
  .ptl--me .ptl-step--milestone .ptl-step__dot,
  .ptl--me .ptl-step--hero-milestone .ptl-step__dot,
  .ptl--me .ptl-step__dot.ptl-dot--gradient {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    justify-self: center;
  }
  /* Der Hero-Punkt ist mit 42px breiter als die 34px-Spalte. Spalte
     entsprechend aufweiten, damit die Achse trotzdem stimmt. */
  .ptl--me .ptl-step--hero-milestone { grid-template-columns: 34px 1fr; }
  .ptl--me .ptl-step--hero-milestone .ptl-step__dot {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Letzte zwei Reste der Timeline:
   1. Die Agentur-Spur beginnt mit einem <li aria-hidden> das nur einen
      Punkt traegt. Auf dem Desktop verschiebt es die Spur um eine
      Rasterzelle, mobil war es ein Punkt ohne Text.
   2. Das ENDE-Etikett ist das dritte Kind und landete durch die
      automatische Platzierung in der Punkt-Spalte. Gehoert zum Text. */
@media (max-width: 1100px) {
  .ptl--agency > .ptl-step[aria-hidden="true"] { display: none; }
  .ptl-step__endmark {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
    margin-top: 4px;
  }
}