/* =============================================================================
   rk-wow.css — Wow-Baukasten für Verkaufs- und Inhaltsseiten (rauMKult)
   Version: 1.1 | 2026-09-30 | Runde 8b: + K bento, L reasons, N promise (Startseite, Academy, Kursseite).
   Version: 1.0 | 2026-09-30 | Runde 8 (Kai: „zu flach, lau, immer dasselbe Schema“).
   Regel: .claude/Rules/wow-statt-flach.md · Doku + Markup: docs/design-aenderungen-fuer-skill.md
   „Runde 8 — Wow-Baukasten“. Verhalten: src/assets/js/rk-wow.js (beide global in base.njk).

   Grundsätze
   - Eigene Werte NUR als Token (--rk-wow-*) in :root / [data-theme="dark"]; sonst zentrale Token.
   - Hell/Dunkel folgt dem Besucher. .rk-wow-dark = bewusst dunkle Bühne (in beiden Modi dunkel).
   - Gold nur als Text/Linie/Leuchten, Orange nur als feine Akzentlinie bzw. Punkt; Knöpfe zentral (.rk-btn).
   - Bewegung nur, wenn rk-wow.js <html class="rk-wow-motion"> setzt (nicht bei reduzierter Bewegung,
     nicht bei A11y-Schalter). Ohne JS / reduziert: alles sofort sichtbar, Endzustand.
   - Nie zwei gleiche Bausteine direkt hintereinander (Regel wow-statt-flach).

   Bausteine
   A statement   B versus   C stack   D numbers   E cta   F audience
   G invite      H timeline I bars (Balkenvergleich)   J feature (Bild-Split mit Plakette)
   K bento (Raster mit übergroßer Ankerkarte)   L reasons (nummerierte Gründe, Riesenziffern)
   N promise (Zusage-Karte mit großer Zahl + Wege-Liste, neben Formularen)
   ============================================================================= */

/* ─── T. Token ─────────────────────────────────────────────────────────────── */
:root {
  --rk-wow-card: var(--surface-card, #ffffff);
  --rk-wow-line: rgba(17, 18, 16, .10);
  --rk-wow-line-strong: rgba(17, 18, 16, .22);
  --rk-wow-tint: #fafafa;
  --rk-wow-sh-1: 0 1px 2px rgba(17, 18, 16, .05), 0 2px 6px rgba(17, 18, 16, .04);
  --rk-wow-sh-2: 0 1px 2px rgba(17, 18, 16, .04), 0 24px 48px -24px rgba(17, 18, 16, .20);
  --rk-wow-sh-3: 0 1px 2px rgba(17, 18, 16, .05), 0 18px 36px -18px rgba(17, 18, 16, .24), 0 48px 90px -30px rgba(17, 18, 16, .32);
  --rk-wow-sh-4: 0 2px 4px rgba(17, 18, 16, .06), 0 30px 60px -20px rgba(17, 18, 16, .34), 0 70px 120px -40px rgba(17, 18, 16, .38);

  /* Wertung: rot = schlecht/teuer, grün = gut (WCAG AA auf Weiß: 6,6:1 / 6,9:1) */
  --rk-wow-neg: #b3261e;
  --rk-wow-neg-bg: rgba(179, 38, 30, .05);
  --rk-wow-neg-line: rgba(179, 38, 30, .26);
  --rk-wow-pos: #0a6b34;
  --rk-wow-pos-bg: rgba(10, 122, 58, .06);
  --rk-wow-pos-line: rgba(10, 122, 58, .38);
  --rk-wow-strike: #e5484d;
  --rk-wow-strike-glow: rgba(229, 72, 77, .45);

  /* Hervorhebung: Goldverlauf (hell: tiefes Gold, jede Stufe ≥ 3:1 für Großschrift) */
  --rk-wow-hl: linear-gradient(100deg, #5f4512 0%, #8c6d2f 38%, #a3854a 58%, #6e5116 100%);
  --rk-wow-hl-solid: #7a5a1c;
  --rk-wow-accent-line: var(--accent-orange, #ff6600);

  /* Dunkle Bühne (in beiden Modi dunkel) */
  --rk-wow-dark-bg: #0e0e0f;
  --rk-wow-dark-card: #18181a;
  --rk-wow-dark-raised: #202022;
  --rk-wow-dark-line: rgba(255, 255, 255, .10);
  --rk-wow-dark-line-strong: rgba(255, 255, 255, .24);
  --rk-wow-dark-ink: #f4f4f2;
  --rk-wow-dark-text: #d2d2ce;
  --rk-wow-dark-muted: #a6a6a1;
  --rk-wow-dark-gold: #c1b783;
  --rk-wow-dark-hl: linear-gradient(100deg, #c1b783 0%, #efe6bd 45%, #d4c896 70%, #b8a86e 100%);
  --rk-wow-dark-glow: rgba(193, 183, 131, .16);
  --rk-wow-dark-sh: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 70px -18px rgba(0, 0, 0, .55);

  /* Schrift (nur Regular vorhanden: Wirkung über Größe + enge Laufweite) */
  --rk-wow-fs-statement: clamp(2.6rem, 1.4rem + 5.6vw, 6.25rem);
  --rk-wow-fs-giant: clamp(5.5rem, 2.4rem + 14vw, 11rem);
  --rk-wow-fs-number: clamp(3.2rem, 1.8rem + 5vw, 6rem);
  --rk-wow-fs-big: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  --rk-wow-fs-title: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  --rk-wow-fs-lead: clamp(1.2rem, 1rem + .8vw, 1.45rem);
  --rk-wow-fs-body: var(--rk-fs-body, 1.125rem);
  --rk-wow-fs-meta: .9375rem;
  --rk-wow-fs-tag: .875rem; /* Runde 10: Mindestschrift 14 px */
  --rk-wow-sticky-top: 110px; /* Abstand mitlaufender Karten unter der Kopfleiste (wie Kontaktseite) */
  --rk-wow-ls-tight: -.035em;

  /* Form */
  --rk-wow-r-card: 24px;
  --rk-wow-r-md: 16px;
  --rk-wow-r-sm: 10px;
  --rk-wow-r-pill: 999px;

  /* Bewegung */
  --rk-wow-ease: cubic-bezier(.23, 1, .32, 1);
  --rk-wow-dur: .7s;
  --rk-wow-stagger: 70ms;
}

[data-theme="dark"] {
  --rk-wow-line: rgba(255, 255, 255, .09);
  --rk-wow-line-strong: rgba(255, 255, 255, .22);
  --rk-wow-tint: #1c1c1e;
  --rk-wow-sh-1: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .35);
  --rk-wow-sh-2: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -24px rgba(0, 0, 0, .7);
  --rk-wow-sh-3: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 36px -18px rgba(0, 0, 0, .7), 0 56px 100px -30px rgba(0, 0, 0, .85);
  --rk-wow-sh-4: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .8), 0 70px 120px -40px rgba(0, 0, 0, .9);
  --rk-wow-neg: #ff8a80;
  --rk-wow-neg-bg: rgba(255, 120, 100, .07);
  --rk-wow-neg-line: rgba(255, 140, 120, .32);
  --rk-wow-pos: #7ddc9f;
  --rk-wow-pos-bg: rgba(90, 200, 130, .08);
  --rk-wow-pos-line: rgba(120, 210, 150, .42);
  --rk-wow-hl: linear-gradient(100deg, #c1b783 0%, #efe6bd 45%, #d4c896 70%, #b8a86e 100%);
  --rk-wow-hl-solid: #c1b783;
  --rk-wow-dark-bg: #141416;
  --rk-wow-dark-card: #1c1c1f;
  --rk-wow-dark-raised: #232326;
}

/* ─── 0. Gemeinsames ───────────────────────────────────────────────────────── */
/* Bewusst dunkle Bühne: setzt Text- und Knopf-Token lokal um */
.rk-wow-dark {
  --text-primary: var(--rk-wow-dark-ink);
  --text-secondary: var(--rk-wow-dark-text);
  --text-muted: var(--rk-wow-dark-muted);
  --rk-gold-text: var(--rk-wow-dark-gold);
  --rk-wow-card: var(--rk-wow-dark-card);
  --rk-wow-line: var(--rk-wow-dark-line);
  --rk-wow-line-strong: var(--rk-wow-dark-line-strong);
  --rk-wow-hl: var(--rk-wow-dark-hl);
  --rk-wow-hl-solid: var(--rk-wow-dark-gold);
  --rk-wow-neg: #ff8a80;
  --rk-wow-pos: #7ddc9f;
  --rk-btn-primary-bg: var(--rk-wow-dark-ink);
  --rk-btn-primary-fg: var(--rk-wow-dark-bg);
  --rk-btn-primary-hover: var(--rk-wow-dark-ink);
  --rk-btn-secondary-bg: var(--rk-wow-dark-bg);
  --rk-btn-secondary-fg: var(--rk-wow-dark-ink);
  --rk-btn-secondary-brd: var(--rk-wow-dark-line-strong);
  --rk-btn-secondary-hover: var(--rk-wow-dark-raised);
  --rk-focus-color: var(--rk-wow-dark-ink);
  background: var(--rk-wow-dark-bg);
  color: var(--text-secondary);
  color-scheme: dark;
}
.rk-wow-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--rk-fs-eyebrow, 1rem); letter-spacing: var(--rk-ls-eyebrow, .18em); text-transform: uppercase;
  color: var(--rk-gold-text);
}
.rk-wow-kicker::before { content: ""; width: 28px; height: 2px; background: var(--rk-wow-accent-line); border-radius: 2px; }
/* Hervorgehobene Wortgruppe: Goldverlauf als Schrift + feine orange Linie darunter.
   R9 D1: Linie sitzt knapp unter der Grundlinie (nicht am Kastenrand), damit sie bei Umbruch und enger Zeilenhöhe
   nie in die Umlautpunkte der nächsten Zeile läuft; Kasten hat Platz für Oberlängen/Umlautpunkte (background-clip). */
.rk-wow-hl {
  position: relative; display: inline-block; font-style: normal; line-height: 1.02;
  background: var(--rk-wow-hl); background-size: 200% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding: .06em .04em 0 0; margin: -.06em -.04em 0 0;
}
.rk-wow-hl::after {
  content: ""; position: absolute; left: .02em; right: .06em; bottom: .05em; height: max(2px, .04em);
  border-radius: 3px; background: var(--rk-wow-accent-line); transform-origin: left center;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .rk-wow-hl { color: var(--rk-wow-hl-solid); -webkit-text-fill-color: currentColor; background: none; }
}
/* Rote Streichlinie (eigenes Element, leicht schräg, wie Everlast) */
.rk-wow-strike { position: relative; display: inline-block; color: var(--text-muted); text-decoration: none; }
.rk-wow-strike::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: max(3px, .09em);
  border-radius: 3px; background: var(--rk-wow-strike); box-shadow: 0 0 12px var(--rk-wow-strike-glow);
  transform: rotate(-6deg); transform-origin: left center;
}
/* R9 D5/D6: Verlaufsschrift (background-clip: text) wird an der Kastenkante beschnitten — enge Zeilenhöhe und negativer
   Buchstabenabstand lassen Ober-/Unterlängen und die letzte Ziffer überstehen. Zentraler Innenabstand, per negativem
   Außenabstand ausgeglichen, damit das Layout gleich bleibt. */
.rk-wow-stack__big, .rk-wow-numbers__n, .rk-wow-bento__big b, .rk-wow-promise__n b, .rk-wow-invite__date b,
.rk-wow-bars__row--hl .rk-wow-bars__val, .kp-about__badge b, .kp-topics--wow li:last-child span {
  padding: .1em .14em .06em 0; margin: -.1em -.14em -.06em 0;
}
.rk-wow-mark { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rk-wow-cta__row, .rk-wow-btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ─── A. Statement — Riesen-Kernaussage ───────────────────────────────────── */
.rk-wow-statement { display: grid; gap: clamp(16px, 2.4vw, 28px); max-width: 1100px; }
.rk-wow-statement--center { margin-inline: auto; text-align: center; justify-items: center; }
.rk-wow-statement__kicker { font-size: var(--rk-wow-fs-lead); line-height: 1.35; color: var(--text-secondary); letter-spacing: -.01em; max-width: 40ch; }
.rk-wow-statement .rk-wow-statement__title {
  margin: 0; font-size: var(--rk-wow-fs-statement); line-height: .98; letter-spacing: var(--rk-wow-ls-tight);
  color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); text-wrap: balance;
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal;
}
.rk-wow-statement__sub { font-size: var(--rk-wow-fs-lead); line-height: 1.5; color: var(--text-secondary); max-width: 58ch; text-wrap: pretty; }
.rk-wow-w { display: inline-block; }

/* ─── B. Versus — zwei Spalten, rot gegen grün ───────────────────────────── */
.rk-wow-versus { position: relative; display: grid; gap: 14px; align-items: stretch; }
.rk-wow-versus__col {
  position: relative; display: grid; align-content: start; gap: 16px;
  padding: clamp(22px, 3vw, 34px); border-radius: var(--rk-wow-r-card); border: 1px solid var(--rk-wow-line);
}
.rk-wow-versus__col--neg { background: var(--rk-wow-neg-bg); border-color: var(--rk-wow-neg-line); box-shadow: var(--rk-wow-sh-1); }
.rk-wow-versus__col--pos { background: linear-gradient(var(--rk-wow-pos-bg), var(--rk-wow-pos-bg)), var(--rk-wow-card); border-color: var(--rk-wow-pos-line); box-shadow: var(--rk-wow-sh-4); }
.rk-wow-versus__lbl { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; }
.rk-wow-versus__col--neg .rk-wow-versus__lbl { color: var(--rk-wow-neg); }
.rk-wow-versus__col--pos .rk-wow-versus__lbl { color: var(--rk-wow-pos); }
.rk-wow-versus__badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid currentColor; }
.rk-wow-versus__badge .rk-wow-mark { width: 22px; height: 22px; }
.rk-wow-versus__title { margin: 0; font-size: var(--rk-wow-fs-title); line-height: 1.2; letter-spacing: -.015em; color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); }
.rk-wow-versus ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.rk-wow-versus li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; line-height: 1.45; }
.rk-wow-versus li .rk-wow-mark { margin-top: 2px; }
.rk-wow-versus__col--neg li { color: var(--text-muted); }
.rk-wow-versus__col--neg li .rk-wow-mark { color: var(--rk-wow-neg); stroke-width: 2; }
.rk-wow-versus__col--pos li { color: var(--text-primary); font-size: 1.06em; }
.rk-wow-versus__col--pos li .rk-wow-mark { color: var(--rk-wow-pos); stroke-width: 2.6; }
.rk-wow-versus__vs {
  justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; margin: -34px 0; z-index: 1;
  border-radius: 50%; background: var(--rk-wow-card); border: 1px solid var(--rk-wow-line-strong); box-shadow: var(--rk-wow-sh-2);
  font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--text-primary);
}
@media (min-width: 900px) {
  .rk-wow-versus { grid-template-columns: 1fr auto 1.15fr; gap: 0; align-items: center; }
  .rk-wow-versus__col--neg { margin-right: -14px; padding-right: 48px; }
  .rk-wow-versus__col--pos { margin-left: -14px; padding: 44px 44px 44px 52px; }
  .rk-wow-versus__vs { margin: 0; width: 64px; height: 64px; }
}

/* ─── C. Stack — Kosten-/Wertstapel mit Streichwert und Riesenzahl ───────── */
.rk-wow-stack { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
.rk-wow-stack__table {
  margin: 0; padding: 8px clamp(18px, 2.4vw, 28px); list-style: none;
  border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-3);
}
.rk-wow-stack__row { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rk-wow-line); }
.rk-wow-stack__row:last-child { border-bottom: 0; }
.rk-wow-stack__what { color: var(--text-primary); line-height: 1.35; }
.rk-wow-stack__what small { display: block; margin-top: 4px; font-size: var(--rk-wow-fs-meta); color: var(--text-muted); line-height: 1.45; }
.rk-wow-stack__amt { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); letter-spacing: -.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rk-wow-stack__row--neg .rk-wow-stack__amt { color: var(--rk-wow-neg); }
.rk-wow-stack__row--pos .rk-wow-stack__amt { color: var(--rk-wow-pos); }
.rk-wow-stack__tag { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: var(--rk-wow-r-pill); border: 1px solid var(--rk-wow-line-strong); font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.rk-wow-stack__hero { display: grid; gap: 10px; justify-items: start; }
.rk-wow-stack__lbl { font-size: var(--rk-wow-fs-tag); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.rk-wow-stack__was { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1; letter-spacing: var(--rk-wow-ls-tight); font-variant-numeric: tabular-nums; }
.rk-wow-stack__big {
  display: inline-flex; align-items: flex-start; gap: .04em; margin: 4px 0 0;
  font-size: var(--rk-wow-fs-giant); line-height: .86; letter-spacing: -.055em; font-weight: var(--rk-fw-regular, 400);
  font-variant-numeric: tabular-nums;
  background: var(--rk-wow-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.rk-wow-stack__big sup { font-size: .32em; line-height: 1; margin-top: .16em; letter-spacing: 0; }
.rk-wow-stack__per { font-size: var(--rk-wow-fs-lead); color: var(--text-primary); line-height: 1.35; }
.rk-wow-stack__per small { display: block; margin-top: 4px; font-size: var(--rk-wow-fs-meta); color: var(--text-muted); }
.rk-wow-stack__note { grid-column: 1 / -1; margin: 0; font-size: var(--rk-wow-fs-meta); line-height: 1.5; color: var(--text-muted); max-width: 76ch; }
@media (min-width: 900px) {
  .rk-wow-stack { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .rk-wow-stack__hero { padding-left: 8px; }
}

/* ─── D. Numbers — Zahlenband ─────────────────────────────────────────────── */
.rk-wow-numbers {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 8px clamp(18px, 3vw, 40px);
  border-radius: var(--rk-wow-r-card); overflow: hidden; box-shadow: var(--rk-wow-dark-sh);
  background: radial-gradient(60% 120% at 12% 0%, var(--rk-wow-dark-glow), transparent 60%), var(--rk-wow-dark-bg);
  border: 1px solid var(--rk-wow-dark-line);
}
/* R9 D4: Das Zahlenband hat immer eine dunkle Bühne — Schrift und Trennlinien folgen deshalb den Dunkel-Token,
   nicht dem Hell/Dunkel-Modus der Seite (vorher dunkelgrau auf Schwarz im Hellmodus). */
.rk-wow-numbers {
  --text-primary: var(--rk-wow-dark-ink); --text-secondary: var(--rk-wow-dark-text); --text-muted: var(--rk-wow-dark-muted);
  --rk-wow-line: var(--rk-wow-dark-line); --rk-wow-hl: var(--rk-wow-dark-hl); --rk-wow-hl-solid: var(--rk-wow-dark-gold);
}
.rk-wow-numbers__n--word { font-size: var(--rk-wow-fs-big); line-height: 1; letter-spacing: -.035em; align-self: end; }
.rk-wow-numbers__item { display: grid; gap: 6px; padding: 24px 4px; border-bottom: 1px solid var(--rk-wow-line); }
.rk-wow-numbers__item:last-child { border-bottom: 0; }
.rk-wow-numbers__n {
  font-size: var(--rk-wow-fs-number); line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  background: var(--rk-wow-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.rk-wow-numbers__lbl { color: var(--text-primary); font-size: var(--rk-wow-fs-lead); line-height: 1.3; }
.rk-wow-numbers__lbl small { display: block; margin-top: 2px; font-size: var(--rk-wow-fs-meta); color: var(--text-muted); }
@media (min-width: 760px) {
  .rk-wow-numbers { grid-template-columns: repeat(var(--rk-wow-cols, 3), 1fr); padding: 12px 8px; }
  .rk-wow-numbers__item { padding: 36px 32px; border-bottom: 0; border-right: 1px solid var(--rk-wow-line); }
  .rk-wow-numbers__item:last-child { border-right: 0; }
}

/* ─── E. CTA — Handlungsband unterwegs ────────────────────────────────────── */
.rk-wow-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 20px; align-items: center; margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3.4vw, 40px); border-radius: var(--rk-wow-r-card);
  box-shadow: var(--rk-wow-dark-sh); border: 1px solid var(--rk-wow-dark-line);
  background: radial-gradient(70% 140% at 100% 0%, var(--rk-wow-dark-glow), transparent 62%), var(--rk-wow-dark-bg);
}
.rk-wow-cta:first-child { margin-top: 0; }
/* Lichtstreif, der langsam über das Band zieht */
.rk-wow-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .06) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0;
}
/* Deko-Viereck (Markenzeichen), dreht langsam */
.rk-wow-cta::after {
  content: ""; position: absolute; z-index: -1; right: -38px; top: -38px; width: 96px; height: 96px;
  border: 1px solid var(--rk-wow-dark-gold); opacity: .22; transform: rotate(18deg); pointer-events: none;
}
.rk-wow-cta__text { margin: 0; font-size: var(--rk-wow-fs-big); line-height: 1.08; letter-spacing: -.03em; color: var(--text-primary); text-wrap: balance; }
.rk-wow-cta__text small { display: block; margin-top: 10px; font-size: var(--rk-wow-fs-body); line-height: 1.5; letter-spacing: 0; color: var(--text-secondary); text-wrap: pretty; }
.rk-wow-cta__side { display: grid; gap: 14px; justify-items: start; }
.rk-wow-cta__chip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 16px; border-radius: var(--rk-wow-r-pill);
  border: 1px solid var(--rk-wow-line-strong); color: var(--text-primary); font-size: var(--rk-wow-fs-meta); white-space: nowrap;
}
.rk-wow-cta__chip b { font-weight: var(--rk-fw-regular, 400); font-size: 1.45em; letter-spacing: -.02em; }
.rk-wow-cta .rk-btn { min-height: 56px; }
@media (max-width: 599px) { .rk-wow-cta .rk-btn { width: 100%; } .rk-wow-cta__side { justify-items: stretch; } .rk-wow-cta__chip { justify-self: start; } }
@media (min-width: 860px) {
  .rk-wow-cta { grid-template-columns: 1fr auto; gap: 40px; }
  .rk-wow-cta__side { justify-items: end; }
}
/* Variante: Goldleuchten (dunkel mit Goldrand + stärkerem Glow) */
.rk-wow-cta--gold {
  border: 1px solid transparent;
  background:
    radial-gradient(80% 160% at 0% 100%, var(--rk-wow-dark-glow), transparent 60%) padding-box,
    radial-gradient(70% 140% at 100% 0%, var(--rk-wow-dark-glow), transparent 62%) padding-box,
    linear-gradient(var(--rk-wow-dark-bg), var(--rk-wow-dark-bg)) padding-box,
    linear-gradient(120deg, rgba(193, 183, 131, .7), rgba(193, 183, 131, .08) 40%, rgba(193, 183, 131, .55)) border-box;
}
/* Variante: hell (weiße Karte mit tiefem Schatten) — für den Wechsel neben dunklen Bändern */
.rk-wow-cta--light {
  background: var(--rk-wow-card); border-color: var(--rk-wow-line-strong); box-shadow: var(--rk-wow-sh-4); color-scheme: normal;
}
.rk-wow-cta--light .rk-wow-cta__text { color: var(--text-primary); }
.rk-wow-cta--light::before { display: none; }
.rk-wow-cta--light::after { border-color: var(--rk-wow-hl-solid); opacity: .3; }

/* ─── F. Audience — Für wen (mit Bild/Symbol) ─────────────────────────────── */
.rk-wow-audience { display: grid; gap: 18px; }
.rk-wow-audience__card {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-2);
  transition: transform .5s var(--rk-wow-ease), box-shadow .5s var(--rk-wow-ease), border-color .5s var(--rk-wow-ease);
}
.rk-wow-audience__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rk-wow-tint); }
.rk-wow-audience .rk-wow-audience__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--rk-wow-ease); }
.rk-wow-audience__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); }
.rk-wow-audience__tag {
  position: absolute; left: 16px; bottom: 14px; z-index: 1; padding: 6px 12px; border-radius: var(--rk-wow-r-pill);
  background: rgba(10, 10, 9, .72); color: var(--rk-wow-dark-ink); font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rk-wow-audience__body { display: grid; align-content: start; gap: 14px; padding: 22px 22px 26px; }
.rk-wow-audience__body h3 { margin: 0; font-size: var(--rk-wow-fs-title); line-height: 1.2; letter-spacing: -.015em; color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); }
.rk-wow-audience__body dl { margin: 0; display: grid; gap: 12px; }
.rk-wow-audience__body dt { font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
.rk-wow-audience__body dd { margin: 2px 0 0; color: var(--text-secondary); line-height: 1.5; }
.rk-wow-audience__body dd strong { color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); }
@media (hover: hover) {
  .rk-wow-audience__card:hover { transform: translateY(-6px); box-shadow: var(--rk-wow-sh-4); border-color: var(--rk-wow-line-strong); }
  .rk-wow-audience__card:hover .rk-wow-audience__media img { transform: scale(1.06); }
}
/* Für wen NICHT: ohne Bild, rote Tönung, Kreuz-Symbol */
.rk-wow-audience__card--not { grid-template-rows: auto; grid-template-columns: auto 1fr; align-items: start; gap: 18px; padding: 24px; background: var(--rk-wow-neg-bg); border-color: var(--rk-wow-neg-line); box-shadow: var(--rk-wow-sh-1); }
.rk-wow-audience__card--not .rk-wow-audience__body { padding: 0; }
.rk-wow-audience__card--not dt { color: var(--rk-wow-neg); }
.rk-wow-audience__no { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--rk-wow-neg); color: var(--rk-wow-neg); }
@media (min-width: 720px) { .rk-wow-audience { grid-template-columns: repeat(2, 1fr); } .rk-wow-audience__card--not { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .rk-wow-audience { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* ─── G. Invite — einladende Teaser-Karte (kommt bald) ────────────────────── */
.rk-wow-invite {
  position: relative; display: grid; overflow: hidden;
  border: 1px solid var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-4);
}
.rk-wow-invite__main { display: grid; align-content: start; gap: 18px; padding: clamp(24px, 3.4vw, 44px); }
.rk-wow-invite__live { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 6px 14px 6px 12px; border-radius: var(--rk-wow-r-pill); border: 1px solid var(--rk-wow-line-strong); font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--text-primary); }
.rk-wow-invite__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--rk-wow-accent-line); }
.rk-wow-invite__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rk-wow-accent-line); opacity: 0; }
.rk-wow-invite__title { margin: 0; font-size: var(--rk-wow-fs-big); line-height: 1.06; letter-spacing: -.03em; color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); text-wrap: balance; }
.rk-wow-invite__main p { margin: 0; color: var(--text-secondary); max-width: 56ch; }
.rk-wow-invite__faces { display: flex; align-items: center; margin-top: 4px; }
.rk-wow-invite__face {
  width: 44px; height: 44px; margin-left: -10px; border-radius: 12px; border: 3px solid var(--rk-wow-card);
  background: var(--rk-wow-tint); box-shadow: var(--rk-wow-sh-1); transform: rotate(var(--r, 0deg));
}
.rk-wow-invite__face:first-child { margin-left: 0; }
.rk-wow-invite__face--a { --r: -8deg; background: var(--text-primary); }
.rk-wow-invite__face--b { --r: 6deg; background: var(--rk-wow-hl); }
.rk-wow-invite__face--c { --r: -4deg; background: var(--rk-wow-line-strong); }
.rk-wow-invite__face--d { --r: 10deg; background: transparent; border: 2px solid var(--rk-wow-line-strong); }
.rk-wow-invite__you { margin-left: 14px; font-size: 1.15rem; color: var(--text-primary); }
.rk-wow-invite__you b { font-weight: var(--rk-fw-regular, 400); color: var(--rk-gold-text); }
.rk-wow-invite__date {
  position: relative; display: grid; align-content: center; gap: 4px; padding: clamp(24px, 3.4vw, 44px);
  background: radial-gradient(90% 90% at 80% 10%, var(--rk-wow-dark-glow), transparent 60%), var(--rk-wow-dark-bg);
  color: var(--rk-wow-dark-text);
}
.rk-wow-invite__date span { font-size: var(--rk-wow-fs-tag); letter-spacing: .16em; text-transform: uppercase; color: var(--rk-wow-dark-muted); }
.rk-wow-invite__date b {
  font-weight: var(--rk-fw-regular, 400); font-size: var(--rk-wow-fs-number); line-height: .95; letter-spacing: -.045em;
  background: var(--rk-wow-dark-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.rk-wow-invite__date em { font-style: normal; font-size: var(--rk-wow-fs-big); color: var(--rk-wow-dark-ink); letter-spacing: -.02em; }
@media (min-width: 860px) { .rk-wow-invite { grid-template-columns: 1.45fr 1fr; } }

/* ─── H. Timeline — Ablauf, zeichnet sich beim Scrollen ───────────────────── */
.rk-wow-timeline { --rk-wow-p: 1; position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(22px, 3vw, 34px); max-width: 980px; }
.rk-wow-timeline::before, .rk-wow-timeline::after {
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px;
}
.rk-wow-timeline::before { background: var(--rk-wow-line); }
.rk-wow-timeline::after { background: linear-gradient(var(--rk-wow-accent-line), var(--rk-wow-hl-solid)); transform-origin: top; transform: scaleY(var(--rk-wow-p)); }
.rk-wow-timeline__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.rk-wow-timeline__n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--rk-wow-card); border: 2px solid var(--rk-wow-line-strong); color: var(--text-primary);
  font-size: 1.15rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  transition: background-color .5s var(--rk-wow-ease), color .5s var(--rk-wow-ease), border-color .5s var(--rk-wow-ease), transform .5s var(--rk-wow-ease);
}
.rk-wow-timeline__step.is-in .rk-wow-timeline__n, .rk-wow-timeline:not(.is-live) .rk-wow-timeline__n { background: var(--text-primary); color: var(--rk-wow-card); border-color: var(--text-primary); }
.rk-wow-timeline__body {
  display: grid; gap: 8px; padding: 18px 22px 20px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md);
  background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-2);
}
.rk-wow-timeline__body h3 { margin: 0; font-size: var(--rk-wow-fs-title); line-height: 1.22; letter-spacing: -.015em; color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); }
.rk-wow-timeline__body p { margin: 0; color: var(--text-secondary); }
.rk-wow-timeline__big { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -.04em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .rk-wow-timeline::before, .rk-wow-timeline::after { left: 39px; top: 40px; bottom: 40px; }
  .rk-wow-timeline__step { grid-template-columns: 80px 1fr; gap: 28px; }
  .rk-wow-timeline__n { width: 80px; height: 80px; font-size: 1.6rem; }
  .rk-wow-timeline__body { grid-template-columns: 1fr 1.25fr; gap: 10px 32px; align-items: baseline; padding: 24px 30px; }
}

/* ─── I. Bars — Balkenvergleich (Zeit, Preis …) ───────────────────────────── */
.rk-wow-bars { display: grid; gap: 22px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-3); }
.rk-wow-bars__cap { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.rk-wow-bars__cap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rk-wow-bars__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.rk-wow-bars__row { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: baseline; }
.rk-wow-bars__lbl { color: var(--text-primary); line-height: 1.3; }
.rk-wow-bars__lbl small { display: block; font-size: var(--rk-wow-fs-meta); color: var(--text-muted); }
.rk-wow-bars__val { font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); letter-spacing: -.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-wow-bars__track { grid-column: 1 / -1; position: relative; height: 14px; border-radius: var(--rk-wow-r-pill); background: var(--rk-wow-tint); box-shadow: inset 0 0 0 1px var(--rk-wow-line); overflow: hidden; }
.rk-wow-bars__fill { position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); border-radius: inherit; background: var(--rk-wow-line-strong); transform-origin: left center; }
.rk-wow-bars__row--neg .rk-wow-bars__fill { background: var(--rk-wow-neg); opacity: .75; }
.rk-wow-bars__row--neg .rk-wow-bars__val { color: var(--rk-wow-neg); }
.rk-wow-bars__row--pos .rk-wow-bars__fill { background: var(--rk-wow-pos); }
.rk-wow-bars__row--pos .rk-wow-bars__val { color: var(--rk-wow-pos); }
.rk-wow-bars__row--hl .rk-wow-bars__fill { background: var(--rk-wow-hl); }
.rk-wow-bars__row--hl .rk-wow-bars__val { background: var(--rk-wow-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }
.rk-wow-bars__flag { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: var(--rk-wow-fs-tag); letter-spacing: .08em; text-transform: uppercase; }
.rk-wow-bars__row--neg .rk-wow-bars__flag { color: var(--rk-wow-neg); }
.rk-wow-bars__row--pos .rk-wow-bars__flag { color: var(--rk-wow-pos); }
.rk-wow-bars__flag .rk-wow-mark { width: 16px; height: 16px; }

/* ─── J. Feature — Bild-Split mit schwebender Plakette ────────────────────── */
.rk-wow-feature { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.rk-wow-feature__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; min-width: 0; } /* Runde 10: langes Wort in der Überschrift zog die Spalte über den Rand */
.rk-wow-feature > * { min-width: 0; }
.rk-wow-feature .rk-wow-feature__title { margin: 0; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); line-height: 1.04; letter-spacing: var(--rk-wow-ls-tight); color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.rk-wow-feature__lead { margin: 0; font-size: var(--rk-wow-fs-lead); line-height: 1.45; color: var(--text-primary); max-width: 40ch; }
.rk-wow-feature__point { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--rk-wow-line); }
.rk-wow-feature__point h3 { margin: 0; font-size: var(--rk-wow-fs-title); line-height: 1.22; color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); letter-spacing: -.015em; }
.rk-wow-feature__point p { margin: 0; color: var(--text-secondary); }
.rk-wow-feature__media { position: relative; padding-bottom: 0; }
.rk-wow-feature__img { position: relative; overflow: hidden; border-radius: var(--rk-wow-r-card); box-shadow: var(--rk-wow-sh-4); aspect-ratio: 16 / 10; background: var(--rk-wow-tint); }
.rk-wow-feature .rk-wow-feature__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk-wow-feature__badge {
  position: relative; z-index: 1; display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start;
  margin: -48px 12px 0; padding: 20px; border-radius: var(--rk-wow-r-md);
  border: 1px solid var(--rk-wow-line-strong); background: color-mix(in srgb, var(--rk-wow-card) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--rk-wow-sh-4);
}
.rk-wow-feature__badge-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--text-primary); color: var(--rk-wow-card); }
.rk-wow-feature__badge-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rk-wow-feature__badge h3 { margin: 0 0 6px; font-size: 1.2rem; line-height: 1.25; color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); }
.rk-wow-feature__badge p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text-secondary); }
.rk-wow-feature__stamp { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: var(--rk-wow-r-pill); border: 1px solid var(--rk-wow-line-strong); font-size: var(--rk-wow-fs-tag); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-gold-text); }
@media (min-width: 960px) {
  .rk-wow-feature { grid-template-columns: 1fr 1.05fr; }
  .rk-wow-feature--flip .rk-wow-feature__media { order: -1; }
  .rk-wow-feature__badge { width: min(470px, 90%); margin: -72px 24px 0 auto; }
}

/* ─── K. Bento — Raster mit einer übergroßen Ankerkarte ───────────────────── */
/* Ankerkarte (__cell--hero) ist eine dunkle Bühne mit Goldleuchten und Riesenzahl; die übrigen Zellen hell.
   Ab 960 px: Anker als breites Band oben (Zahl | Text), darunter zwei Zellen nebeneinander. */
.rk-wow-bento { display: grid; gap: 16px; }
.rk-wow-bento > * { min-width: 0; }
.rk-wow-bento__cell {
  position: relative; display: grid; align-content: start; gap: 14px; overflow: hidden;
  padding: clamp(22px, 2.8vw, 34px); border-radius: var(--rk-wow-r-card);
  border: 1px solid var(--rk-wow-line); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-2);
  transition: transform .5s var(--rk-wow-ease), box-shadow .5s var(--rk-wow-ease), border-color .5s var(--rk-wow-ease);
}
.rk-wow-bento__cell--hero {
  gap: 18px; padding: clamp(26px, 3.6vw, 48px); border: 1px solid transparent; box-shadow: var(--rk-wow-dark-sh);
  background:
    radial-gradient(70% 90% at 100% 0%, var(--rk-wow-dark-glow), transparent 60%) padding-box,
    radial-gradient(60% 70% at 0% 100%, var(--rk-wow-dark-glow), transparent 60%) padding-box,
    linear-gradient(var(--rk-wow-dark-bg), var(--rk-wow-dark-bg)) padding-box,
    linear-gradient(130deg, rgba(193, 183, 131, .65), rgba(193, 183, 131, .06) 45%, rgba(193, 183, 131, .5)) border-box;
}
/* Deko-Viereck (Markenzeichen) in der Ankerkarte */
.rk-wow-bento__cell--hero::after {
  content: ""; position: absolute; right: -44px; bottom: -44px; width: 150px; height: 150px; pointer-events: none;
  border: 1px solid var(--rk-wow-dark-gold); opacity: .18; transform: rotate(18deg);
}
.rk-wow-bento__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rk-wow-bento__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--rk-wow-line-strong); color: var(--text-primary); }
.rk-wow-bento__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rk-wow-bento__tag { padding: 5px 12px; border-radius: var(--rk-wow-r-pill); background: var(--rk-btn-primary-bg, var(--text-primary)); color: var(--rk-btn-primary-fg, var(--rk-wow-card)); font-size: var(--rk-wow-fs-tag); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.rk-wow-bento__eyebrow { font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--rk-gold-text); }
.rk-wow-bento__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.rk-wow-bento__big b {
  font-weight: var(--rk-fw-regular, 400); font-size: var(--rk-wow-fs-number); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: var(--rk-wow-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.rk-wow-bento__big > span { font-size: var(--rk-wow-fs-lead); color: var(--text-primary); letter-spacing: -.01em; }
.rk-wow-bento__cell--hero .rk-wow-bento__big b { font-size: var(--rk-wow-fs-giant); line-height: .82; letter-spacing: -.06em; }
.rk-wow-bento__cell h3 { margin: 0; font-size: var(--rk-wow-fs-title); line-height: 1.2; letter-spacing: -.015em; color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); text-wrap: balance; }
.rk-wow-bento__cell--hero h3 { font-size: var(--rk-wow-fs-big); line-height: 1.06; letter-spacing: -.03em; }
.rk-wow-bento__cell p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.rk-wow-bento__cell--hero p { font-size: var(--rk-wow-fs-lead); line-height: 1.5; max-width: 46ch; }
.rk-wow-bento__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rk-wow-bento__chips li { padding: 6px 14px; border-radius: var(--rk-wow-r-pill); border: 1px solid var(--rk-wow-line-strong); color: var(--text-primary); font-size: var(--rk-wow-fs-meta); }
@media (hover: hover) {
  .rk-wow-bento__cell:hover { transform: translateY(-5px); box-shadow: var(--rk-wow-sh-4); border-color: var(--rk-wow-line-strong); }
  .rk-wow-bento__cell--hero:hover { box-shadow: var(--rk-wow-dark-sh), 0 0 0 1px rgba(193, 183, 131, .25), 0 40px 90px -30px rgba(193, 183, 131, .28); }
}
@media (min-width: 720px) { .rk-wow-bento { grid-template-columns: 1fr 1fr; gap: 20px; } .rk-wow-bento__cell--hero { grid-column: 1 / -1; } }
@media (min-width: 960px) {
  /* Anker als breites Band oben (Zahl links, Text rechts), darunter zwei Zellen — keine Leerfläche bei langen Nachbartexten */
  .rk-wow-bento { grid-template-columns: 1fr 1fr; gap: 22px; }
  .rk-wow-bento__cell--hero { grid-column: 1 / -1; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; column-gap: clamp(32px, 4vw, 64px); }
  .rk-wow-bento__cell--hero > .rk-wow-bento__top { grid-column: 1 / -1; }
}

/* ─── L. Reasons — nummerierte Gründe mit Riesenziffern ───────────────────── */
/* Drei (bis vier) Gründe nebeneinander, getrennt durch Linien; Ziffer als Kontur im Goldton, oben eine Linie,
   die beim Einblenden von links wächst. Funktioniert hell und auf .rk-wow-dark. */
.rk-wow-reasons { counter-reset: rkr; margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.rk-wow-reasons__item { position: relative; display: grid; align-content: start; gap: 12px; padding: 30px 0 34px; }
.rk-wow-reasons__item::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rk-wow-line-strong);
}
.rk-wow-reasons__item::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 72px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--rk-wow-accent-line), var(--rk-wow-hl-solid)); transform-origin: left center;
}
.rk-wow-reasons__n {
  font-size: var(--rk-wow-fs-number); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px var(--rk-wow-hl-solid);
}
.rk-wow-reasons__lbl { font-size: var(--rk-wow-fs-tag); letter-spacing: .16em; text-transform: uppercase; color: var(--rk-gold-text); }
.rk-wow-reasons__item h3 { margin: 0; font-size: var(--rk-wow-fs-big); line-height: 1.04; letter-spacing: -.03em; color: var(--text-primary); font-weight: var(--rk-fw-regular, 400); text-wrap: balance; }
.rk-wow-reasons__item p { margin: 0; color: var(--text-secondary); line-height: 1.6; max-width: 46ch; }
.rk-wow-reasons__item .rk-btn { justify-self: start; margin-top: 8px; }
@media (min-width: 900px) {
  .rk-wow-reasons { grid-template-columns: repeat(var(--rk-wow-cols, 3), 1fr); gap: 0 clamp(24px, 3vw, 48px); }
}
@supports not (-webkit-text-stroke: 1px black) {
  .rk-wow-reasons__n { color: var(--rk-wow-hl-solid); -webkit-text-fill-color: currentColor; }
}

/* ─── N. Promise — Zusage-Karte mit großer Zahl (neben Formularen) ────────── */
/* Dunkle Karte: Kicker, Riesenzahl im Goldverlauf, Satz dazu, darunter Wege als Pfeil-Liste.
   Einträge ohne Ziel (in Planung) als <span class="rk-wow-promise__item is-soon">. */
.rk-wow-promise {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 16px;
  padding: clamp(24px, 3.2vw, 40px); border-radius: var(--rk-wow-r-card); box-shadow: var(--rk-wow-dark-sh);
  border: 1px solid var(--rk-wow-dark-line);
  background: radial-gradient(80% 70% at 100% 0%, var(--rk-wow-dark-glow), transparent 60%), var(--rk-wow-dark-bg);
}
.rk-wow-promise::after {
  content: ""; position: absolute; z-index: -1; right: -40px; top: -40px; width: 110px; height: 110px; pointer-events: none;
  border: 1px solid var(--rk-wow-dark-gold); opacity: .2; transform: rotate(18deg);
}
.rk-wow-promise__n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; }
.rk-wow-promise__n b {
  font-weight: var(--rk-fw-regular, 400); font-size: var(--rk-wow-fs-number); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: var(--rk-wow-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.rk-wow-promise__n > span { font-size: var(--rk-wow-fs-lead); color: var(--text-primary); }
.rk-wow-promise__lbl { margin: 0; color: var(--text-secondary); line-height: 1.5; max-width: 40ch; }
.rk-wow-promise__list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--rk-wow-line); }
.rk-wow-promise__list li { border-bottom: 1px solid var(--rk-wow-line); }
.rk-wow-promise__item {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; min-height: 56px; padding: 10px 0;
  color: var(--text-primary); text-decoration: none; transition: color .3s var(--rk-wow-ease), padding .4s var(--rk-wow-ease);
}
.rk-wow-promise__item i { font-style: normal; font-size: var(--rk-wow-fs-tag); letter-spacing: .08em; color: var(--rk-gold-text); font-variant-numeric: tabular-nums; }
.rk-wow-promise__item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--rk-wow-ease); }
.rk-wow-promise__item small { font-size: var(--rk-wow-fs-tag); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.rk-wow-promise__item.is-soon { color: var(--text-muted); }
a.rk-wow-promise__item:hover, a.rk-wow-promise__item:focus-visible { color: var(--rk-wow-dark-gold); padding-left: 6px; }
a.rk-wow-promise__item:hover svg, a.rk-wow-promise__item:focus-visible svg { transform: translateX(4px); }
a.rk-wow-promise__item:focus-visible { outline: 2px solid var(--rk-wow-dark-ink); outline-offset: 2px; border-radius: 6px; }

/* ─── O. Sticky — Karte läuft beim Scrollen mit (R9 D3) ───────────────────── */
/* Für jeden Baustein in einem zweispaltigen Raster mit ungleich hohen Spalten: Klasse an die Karte bzw. deren Hülle.
   Nur ab Tablet-breit (zweispaltig); einspaltig bleibt die Karte im Fluss. Abstand oben = Kopfleiste + Luft (Token).
   Voraussetzung: kein overflow:hidden/auto an einem Elternelement zwischen Karte und Seite. */
@media (min-width: 900px) {
  .rk-wow-sticky { position: sticky; top: var(--rk-wow-sticky-top); align-self: start; }
}

/* ─── M. Bewegung (nur mit html.rk-wow-motion) ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Allgemein: Block hebt sich ein */
  html.rk-wow-motion :is(.rk-wow-versus__col, .rk-wow-stack__table, .rk-wow-stack__hero, .rk-wow-numbers__item, .rk-wow-audience__card, .rk-wow-invite, .rk-wow-bars, .rk-wow-feature__img, .rk-wow-feature__badge, .rk-wow-feature__copy > *, .rk-wow-timeline__body, .rk-wow-cta__text, .rk-wow-cta__side) {
    transition: opacity var(--rk-wow-dur) var(--rk-wow-ease), transform var(--rk-wow-dur) var(--rk-wow-ease), box-shadow .5s var(--rk-wow-ease), border-color .5s var(--rk-wow-ease);
    transition-delay: calc(var(--rk-wow-i, 0) * var(--rk-wow-stagger));
  }
  html.rk-wow-motion .rk-wow-versus:not(.is-in) > .rk-wow-versus__col,
  html.rk-wow-motion .rk-wow-numbers:not(.is-in) > .rk-wow-numbers__item,
  html.rk-wow-motion .rk-wow-audience:not(.is-in) > .rk-wow-audience__card,
  html.rk-wow-motion .rk-wow-feature:not(.is-in) .rk-wow-feature__copy > *,
  html.rk-wow-motion .rk-wow-cta:not(.is-in) > :is(.rk-wow-cta__text, .rk-wow-cta__side),
  html.rk-wow-motion .rk-wow-stack:not(.is-in) > :is(.rk-wow-stack__table, .rk-wow-stack__hero),
  html.rk-wow-motion .rk-wow-feature:not(.is-in) .rk-wow-feature__img,
  html.rk-wow-motion .rk-wow-invite:not(.is-in),
  html.rk-wow-motion .rk-wow-bars:not(.is-in),
  html.rk-wow-motion .rk-wow-timeline__step:not(.is-in) .rk-wow-timeline__body { opacity: 0; transform: translateY(24px); }
  html.rk-wow-motion .rk-wow-feature:not(.is-in) .rk-wow-feature__badge { opacity: 0; transform: translate(-16px, 24px) scale(.96); }
  html.rk-wow-motion .rk-wow-versus:not(.is-in) > .rk-wow-versus__col--pos { transform: translateY(24px) scale(.97); }
  html.rk-wow-motion .rk-wow-feature__badge { transition-delay: .35s; }

  /* Statement: Wort für Wort */
  html.rk-wow-motion .rk-wow-statement .rk-wow-w { transition: opacity .8s var(--rk-wow-ease), transform .8s var(--rk-wow-ease), filter .8s var(--rk-wow-ease); transition-delay: calc(var(--w, 0) * 55ms); }
  html.rk-wow-motion .rk-wow-statement:not(.is-in) .rk-wow-w { opacity: 0; transform: translateY(.35em); filter: blur(6px); }
  html.rk-wow-motion .rk-wow-statement :is(.rk-wow-statement__kicker, .rk-wow-statement__sub) { transition: opacity .8s var(--rk-wow-ease) .1s, transform .8s var(--rk-wow-ease) .1s; }
  html.rk-wow-motion .rk-wow-statement:not(.is-in) :is(.rk-wow-statement__kicker, .rk-wow-statement__sub) { opacity: 0; transform: translateY(14px); }
  html.rk-wow-motion .rk-wow-statement.is-in .rk-wow-hl { animation: rk-wow-shine 3.2s var(--rk-wow-ease) .6s 1 both; }
  html.rk-wow-motion .rk-wow-hl::after { transition: transform 1s var(--rk-wow-ease) .7s; }
  html.rk-wow-motion :is(.rk-wow-statement, .rk-wow-feature):not(.is-in) .rk-wow-hl::after { transform: scaleX(0); }

  /* Häkchen/Kreuze zeichnen sich */
  html.rk-wow-motion .rk-wow-versus .rk-wow-mark path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--rk-wow-ease); transition-delay: calc(.35s + var(--rk-wow-i, 0) * 140ms); }
  html.rk-wow-motion .rk-wow-versus:not(.is-in) .rk-wow-mark path { stroke-dashoffset: 1; }

  /* Streichlinie zieht durch, Riesenzahl setzt sich */
  html.rk-wow-motion .rk-wow-strike::after { transition: transform .6s var(--rk-wow-ease) .5s; }
  html.rk-wow-motion :is(.rk-wow-stack, .rk-wow-bars):not(.is-in) .rk-wow-strike::after { transform: rotate(-6deg) scaleX(0); }
  html.rk-wow-motion .rk-wow-stack__big { transition: transform 1s var(--rk-wow-ease) .6s, opacity 1s var(--rk-wow-ease) .6s; }
  html.rk-wow-motion .rk-wow-stack:not(.is-in) .rk-wow-stack__big { opacity: 0; transform: scale(.86); }

  /* Balken wachsen */
  html.rk-wow-motion .rk-wow-bars__fill { transition: transform 1.2s var(--rk-wow-ease); transition-delay: calc(.2s + var(--rk-wow-i, 0) * 150ms); }
  html.rk-wow-motion .rk-wow-bars:not(.is-in) .rk-wow-bars__fill { transform: scaleX(0); }

  /* CTA: Lichtstreif + Deko dreht */
  html.rk-wow-motion .rk-wow-cta.is-in::before { animation: rk-wow-sweep 7s ease-in-out 1s infinite; }
  html.rk-wow-motion .rk-wow-cta::after { animation: rk-wow-spin 40s linear infinite; }

  /* Einladung: Punkt pulsiert */
  html.rk-wow-motion .rk-wow-invite__dot::after { animation: rk-wow-pulse 2s ease-out infinite; }
  html.rk-wow-motion .rk-wow-invite__face { transition: transform .6s var(--rk-wow-ease); transition-delay: calc(.3s + var(--rk-wow-i, 0) * 90ms); }
  html.rk-wow-motion .rk-wow-invite:not(.is-in) .rk-wow-invite__face { transform: translateY(12px) rotate(0deg) scale(.6); }

  /* Zeitleiste: Nummer springt an */
  html.rk-wow-motion .rk-wow-timeline__step.is-in .rk-wow-timeline__n { animation: rk-wow-pop .6s var(--rk-wow-ease) 1 both; }

  /* K Bento: Zellen heben sich gestaffelt ein, Ankerkarte setzt sich leicht vergrößert */
  html.rk-wow-motion .rk-wow-bento > .rk-wow-bento__cell { transition: opacity var(--rk-wow-dur) var(--rk-wow-ease), transform var(--rk-wow-dur) var(--rk-wow-ease), box-shadow .5s var(--rk-wow-ease), border-color .5s var(--rk-wow-ease); transition-delay: calc(var(--rk-wow-i, 0) * 110ms); }
  html.rk-wow-motion .rk-wow-bento:not(.is-in) > .rk-wow-bento__cell { opacity: 0; transform: translateY(28px); }
  html.rk-wow-motion .rk-wow-bento:not(.is-in) > .rk-wow-bento__cell--hero { transform: translateY(28px) scale(.97); }
  html.rk-wow-motion .rk-wow-bento__cell--hero .rk-wow-bento__big b { background-size: 200% 100%; }
  html.rk-wow-motion .rk-wow-bento.is-in .rk-wow-bento__cell--hero .rk-wow-bento__big b { animation: rk-wow-shine 3.2s var(--rk-wow-ease) .5s 1 both; }

  /* L Reasons: Linie wächst, Ziffer und Text steigen gestaffelt auf */
  html.rk-wow-motion .rk-wow-reasons__item::after { transition: transform 1s var(--rk-wow-ease); transition-delay: calc(.15s + var(--rk-wow-i, 0) * 160ms); }
  html.rk-wow-motion .rk-wow-reasons__item > * { transition: opacity var(--rk-wow-dur) var(--rk-wow-ease), transform var(--rk-wow-dur) var(--rk-wow-ease); transition-delay: calc(var(--rk-wow-i, 0) * 160ms); }
  html.rk-wow-motion .rk-wow-reasons:not(.is-in) .rk-wow-reasons__item::after { transform: scaleX(0); }
  html.rk-wow-motion .rk-wow-reasons:not(.is-in) .rk-wow-reasons__item > * { opacity: 0; transform: translateY(22px); }

  /* N Promise: Karte hebt sich ein, Wege folgen gestaffelt */
  html.rk-wow-motion .rk-wow-promise { transition: opacity var(--rk-wow-dur) var(--rk-wow-ease), transform var(--rk-wow-dur) var(--rk-wow-ease); }
  html.rk-wow-motion .rk-wow-promise:not(.is-in) { opacity: 0; transform: translateY(24px); }
  html.rk-wow-motion .rk-wow-promise__list li { transition: opacity .6s var(--rk-wow-ease), transform .6s var(--rk-wow-ease); transition-delay: calc(.3s + var(--rk-wow-i, 0) * 90ms); }
  html.rk-wow-motion .rk-wow-promise:not(.is-in) .rk-wow-promise__list li { opacity: 0; transform: translateX(-12px); }
}
@keyframes rk-wow-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes rk-wow-sweep { 0%, 55% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes rk-wow-spin { to { transform: rotate(378deg); } }
@keyframes rk-wow-pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
@keyframes rk-wow-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Reduzierte Bewegung: Endzustand, keine Dauerbewegung */
@media (prefers-reduced-motion: reduce) {
  .rk-wow-cta::before, .rk-wow-cta::after, .rk-wow-invite__dot::after { animation: none !important; }
  .rk-wow-audience__card, .rk-wow-audience__media img { transition: none !important; transform: none !important; }
  .rk-wow-bento__cell, .rk-wow-promise__item, .rk-wow-promise__item svg { transition: none !important; transform: none !important; }
}
html.no-motion :is(.rk-wow-cta, .rk-wow-invite__dot)::after, [data-motion="reduced"] :is(.rk-wow-cta, .rk-wow-invite__dot)::after,
html.no-motion .rk-wow-cta::before, [data-motion="reduced"] .rk-wow-cta::before { animation: none !important; }
html.no-motion .rk-wow-audience__card:hover, [data-motion="reduced"] .rk-wow-audience__card:hover,
html.no-motion .rk-wow-audience__card:hover img, [data-motion="reduced"] .rk-wow-audience__card:hover img { transform: none; }
html.no-motion .rk-wow-bento__cell:hover, [data-motion="reduced"] .rk-wow-bento__cell:hover { transform: none; }

@media print {
  .rk-wow-dark, .rk-wow-numbers, .rk-wow-cta, .rk-wow-bento__cell--hero, .rk-wow-promise { background: none !important; color: inherit; box-shadow: none; }
}