/* ============================================================
   RANDORI-PRO · Design Tokens
   Single source of truth: colors, type, spacing, radii, shadows.
   Derived from CI Foundation Document v2.0 (Mai 2026).
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */

:root {
  /* ===== COLORS — Anker (80 % der Markenpräsenz) ===== */
  --rp-rot-dunkel:      #6D1723;  /* Markenanker — Headlines, Logo, primary brand */
  --rp-rot-dunkel-deep: #4F0D19;  /* Hover-State / press */
  --rp-tiefschwarz:     #1A1414;  /* Body copy on light */

  /* ===== COLORS — Bühne (neutral) ===== */
  --rp-beige-hell:      #FAF6EE;  /* Hauptfläche / page bg */
  --rp-beige-tief:      #D4C9B5;  /* Tiefe Fläche / cards inverted */
  --rp-weiss:           #FFFFFF;
  --rp-grau:            #575E62;  /* Sekundärtext — Grau RAL 7012 */
  --rp-border:          #D8D2C2;
  --rp-border-soft:     #E8E2D2;

  /* ===== COLORS — Akzent (max 5 % Fläche) ===== */
  --rp-rot-hell:        #DC0D1D;  /* CTA / Energie / Fight Night / Fehler */
  --rp-rot-hell-hover:  #C20A1A;

  /* ===== COLORS — Funktional ===== */
  --rp-success:         #2E5E3E;  /* Tannengrün */
  --rp-warning:         #B45F0E;  /* Bernstein */
  --rp-info:            #2E587D;  /* Stahlblau */
  --rp-error:           var(--rp-rot-hell);

  /* ===== COLORS — Sepia (Bildbehandlung) ===== */
  --rp-sepia-shadow:    #2D2E27;
  --rp-sepia-mid:       #918878;
  --rp-sepia-hi:        #D6CCB5;

  /* ===== DEPRECATED ALIASES — v2.0 names → v2.1 values ===== */
  /* Do not use in new code. Kept for backwards-compat with v2.0 consumers. */
  --rp-weinrot:         var(--rp-rot-dunkel);
  --rp-weinrot-deep:    var(--rp-rot-dunkel-deep);
  --rp-hellrot:         var(--rp-rot-hell);
  --rp-hellrot-hover:   var(--rp-rot-hell-hover);
  --rp-warmgrau:        var(--rp-grau);

  /* ===== SEMANTIC ALIASES ===== */
  --rp-bg:              var(--rp-beige-hell);
  --rp-bg-deep:         var(--rp-beige-tief);
  --rp-bg-card:         var(--rp-weiss);
  --rp-bg-dark:         var(--rp-tiefschwarz);
  --rp-fg:              var(--rp-tiefschwarz);
  --rp-fg-on-dark:      var(--rp-beige-hell);
  --rp-fg-muted:        var(--rp-grau);
  --rp-fg-anchor:       var(--rp-rot-dunkel);
  --rp-accent:          var(--rp-rot-hell);
  --rp-link:            var(--rp-rot-dunkel);
  --rp-link-hover:      var(--rp-rot-dunkel-deep);

  /* ===== TYPE — Families ===== */
  --rp-font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rp-font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rp-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== TYPE — Scale (modular 1.250) ===== */
  --rp-fs-display-l: 56px;   /* Hero, Event-Names */
  --rp-fs-display-m: 38px;   /* Section Title */
  --rp-fs-display-s: 28px;   /* Sub-Headline */
  --rp-fs-body-l:    20px;   /* Lede */
  --rp-fs-body-r:    17px;   /* Standard */
  --rp-fs-body-s:    14px;   /* Caption / Meta */
  --rp-fs-micro:     12px;   /* Kicker / label */

  /* ===== TYPE — Weights ===== */
  --rp-fw-light:     300;    /* Geist Display L */
  --rp-fw-thin:      350;    /* Geist Display M (between light + book) */
  --rp-fw-regular:   400;    /* body */
  --rp-fw-medium:    500;    /* Display S, sub-emphasis */
  --rp-fw-semibold:  600;    /* strong, h4-h5 */
  --rp-fw-bold:      700;    /* CTA, register B headlines */

  /* ===== TYPE — Letter-spacing ===== */
  --rp-ls-display:   -0.02em;   /* Geist headlines */
  --rp-ls-tight:    -0.015em;
  --rp-ls-body:     normal;
  --rp-ls-eyebrow:   0.18em;    /* uppercase eyebrows / kickers */
  --rp-ls-button:    0.05em;

  /* ===== TYPE — Line-height ===== */
  --rp-lh-display:  1.05;
  --rp-lh-heading:  1.2;
  --rp-lh-body:     1.65;
  --rp-lh-tight:    1.3;

  /* ===== SPACING — 8 px grid (Layout-Prinzip) ===== */
  --rp-space-0:    0;
  --rp-space-1:    4px;
  --rp-space-2:    8px;
  --rp-space-3:   12px;
  --rp-space-4:   16px;
  --rp-space-5:   24px;
  --rp-space-6:   32px;
  --rp-space-7:   48px;
  --rp-space-8:   64px;
  --rp-space-9:   96px;
  --rp-space-10: 128px;

  /* ===== RADII ===== */
  --rp-radius-0:    0;       /* hard edge — default for cards, forms */
  --rp-radius-xs:   2px;     /* inline code, tags */
  --rp-radius-sm:   4px;     /* primary buttons (soft enough to not feel "Behörde") */
  --rp-radius-md:   8px;
  --rp-radius-lg:  16px;
  --rp-radius-pill: 999px;

  /* ===== BORDERS ===== */
  --rp-border-w:        1px;
  --rp-border-w-accent: 3px;   /* Rot dunkel rule (PDF, slide kicker line) */

  /* ===== SHADOWS — used sparingly (the brand is flat-ish) ===== */
  --rp-shadow-0: none;
  --rp-shadow-1: 0 1px 2px rgba(26, 20, 20, 0.04);
  --rp-shadow-2: 0 4px 12px rgba(109, 23, 35, 0.06);
  --rp-shadow-3: 0 4px 12px rgba(109, 23, 35, 0.04),
                 0 24px 48px -12px rgba(109, 23, 35, 0.12);  /* map / hero image */

  /* ===== MOTION ===== */
  --rp-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);  /* Reveal default */
  --rp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rp-dur-fast:   150ms;
  --rp-dur-base:   200ms;
  --rp-dur-slow:   600ms;

  /* ===== TOUCH ===== */
  --rp-touch-min:  44px;     /* button min-height */
}

/* ============================================================
   SEMANTIC TEXT STYLES (apply by element OR by class)
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body, .rp-body {
  font-family: var(--rp-font-body);
  font-size: var(--rp-fs-body-r);
  line-height: var(--rp-lh-body);
  color: var(--rp-fg);
  background: var(--rp-bg);
  font-weight: var(--rp-fw-regular);
}

h1, .rp-h1 {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-display-l);
  font-weight: var(--rp-fw-light);          /* 300 — Geist Light */
  line-height: var(--rp-lh-display);
  letter-spacing: var(--rp-ls-display);
  color: var(--rp-fg-anchor);
  margin: 0 0 var(--rp-space-5);
}

h2, .rp-h2 {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-display-m);
  font-weight: var(--rp-fw-thin);           /* 350 */
  line-height: var(--rp-lh-heading);
  letter-spacing: var(--rp-ls-display);
  color: var(--rp-fg-anchor);
  margin: 0 0 var(--rp-space-5);
}

h3, .rp-h3 {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-display-s);
  font-weight: var(--rp-fw-medium);         /* 500 */
  line-height: var(--rp-lh-heading);
  letter-spacing: var(--rp-ls-tight);
  color: var(--rp-fg);
  margin: var(--rp-space-7) 0 var(--rp-space-3);
}

h4, .rp-h4 {
  font-family: var(--rp-font-body);
  font-size: var(--rp-fs-body-r);
  font-weight: var(--rp-fw-semibold);
  color: var(--rp-fg);
  margin: var(--rp-space-5) 0 var(--rp-space-2);
}

h5, .rp-eyebrow {
  font-family: var(--rp-font-body);
  font-size: 13px;
  font-weight: var(--rp-fw-semibold);
  color: var(--rp-fg);
  text-transform: uppercase;
  letter-spacing: var(--rp-ls-eyebrow);
  margin: var(--rp-space-5) 0 var(--rp-space-2);
}

/* Kicker (orange/red-anchor eyebrow used before section titles) */
.rp-kicker {
  font-family: var(--rp-font-body);
  font-size: var(--rp-fs-micro);
  font-weight: var(--rp-fw-semibold);
  color: var(--rp-fg-anchor);
  text-transform: uppercase;
  letter-spacing: var(--rp-ls-eyebrow);
}

p, .rp-p { margin: 0 0 var(--rp-space-3); }
.rp-lede {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-body-l);
  font-weight: var(--rp-fw-thin);
  line-height: 1.4;
  letter-spacing: var(--rp-ls-tight);
  color: var(--rp-fg);
}

a, .rp-link {
  color: var(--rp-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--rp-link-hover); }

strong, b, .rp-strong { font-weight: var(--rp-fw-semibold); color: var(--rp-fg); }

code, .rp-code {
  font-family: var(--rp-font-mono);
  font-size: 0.85em;
  background: var(--rp-bg-deep);
  padding: 0.1em 0.35em;
  border-radius: var(--rp-radius-xs);
}

/* Pull-quote — Markenversprechen style */
.rp-pull {
  margin: var(--rp-space-7) 0;
  padding-left: var(--rp-space-5);
  border-left: var(--rp-border-w-accent) solid var(--rp-weinrot);
  font-family: var(--rp-font-display);
  font-size: 24px;
  line-height: 1.3;
  font-weight: var(--rp-fw-thin);
  color: var(--rp-fg);
  letter-spacing: var(--rp-ls-tight);
}
.rp-pull cite {
  display: block;
  margin-top: var(--rp-space-3);
  font-family: var(--rp-font-body);
  font-size: 12px;
  font-style: normal;
  color: var(--rp-fg-muted);
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
}

/* ============================================================
   PRIMITIVE COMPONENTS — Buttons (one Akzent per layout)
   ============================================================ */

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rp-font-body);
  font-weight: var(--rp-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--rp-ls-button);
  font-size: 14px;
  line-height: 1;
  min-height: var(--rp-touch-min);
  padding: 16px 36px;
  border-radius: var(--rp-radius-sm);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--rp-dur-base) var(--rp-ease-out),
              box-shadow var(--rp-dur-base) var(--rp-ease-out);
}

.rp-btn--primary {
  background: var(--rp-hellrot);
  color: var(--rp-weiss);
}
.rp-btn--primary:hover {
  background: var(--rp-hellrot-hover);
  box-shadow: 0 0 20px rgba(220, 13, 29, 0.25);
}

.rp-btn--secondary {
  background: transparent;
  color: var(--rp-weinrot);
  border: 1px solid var(--rp-weinrot);
}
.rp-btn--secondary:hover {
  background: var(--rp-weinrot);
  color: var(--rp-weiss);
}

.rp-btn--ghost {
  background: transparent;
  color: var(--rp-fg);
  padding: 12px 0;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rp-btn--ghost:hover { color: var(--rp-weinrot); }

/* ============================================================
   PRIMITIVE COMPONENTS — Form fields
   ============================================================ */

.rp-field { display: flex; flex-direction: column; gap: 6px; }
.rp-field__label {
  font-size: 13px;
  font-weight: var(--rp-fw-semibold);
  color: var(--rp-fg);
}
.rp-field__hint { font-size: 12px; color: var(--rp-fg-muted); }
.rp-input, .rp-textarea, .rp-select {
  font-family: var(--rp-font-body);
  font-size: 16px;
  background: var(--rp-bg-deep);
  border: 1px solid var(--rp-border);
  color: var(--rp-fg);
  padding: 12px 14px;
  border-radius: var(--rp-radius-sm);
  min-height: var(--rp-touch-min);
  width: 100%;
}
.rp-input:focus, .rp-textarea:focus, .rp-select:focus {
  outline: 2px solid var(--rp-weinrot);
  outline-offset: 1px;
  border-color: var(--rp-weinrot);
}

/* ============================================================
   PRIMITIVE COMPONENTS — Cards
   ============================================================ */

.rp-card {
  background: var(--rp-bg-card);
  border: 1px solid var(--rp-border-soft);
  padding: var(--rp-space-5);
  border-radius: var(--rp-radius-0);   /* hard edge by default */
}
.rp-card--soft {
  background: var(--rp-bg-deep);
  border: none;
}
.rp-card--anchor {
  border-top: var(--rp-border-w-accent) solid var(--rp-weinrot);
}

/* ============================================================
   RANDORI-PRO e.V. · LANDINGPAGE
   Whoop-inspired one-pager. Built on Randori-Pro v2 tokens.
   ============================================================ */


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--rp-font-body);
  color: var(--rp-fg);
  background: var(--rp-beige-hell);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.container--narrow { max-width: 920px; }
.container--wide { max-width: 1360px; }

.section { padding: clamp(96px, 14vw, 176px) 0; position: relative; }
.section--tight { padding: clamp(72px, 9vw, 120px) 0; }
.section--dark { background: #0F0B0B; color: var(--rp-beige-hell); }
.section--bordeaux { background: var(--rp-rot-dunkel); color: #F4E9DC; }
.section--beige { background: var(--rp-beige-tief); }
.section--paper { background: var(--rp-beige-hell); }

/* Reveal on scroll (set initial state; observer flips .is-in) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--rp-ease-out), transform .9s var(--rp-ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"].is-in { transition-delay: .07s; }
.reveal[data-delay="2"].is-in { transition-delay: .14s; }
.reveal[data-delay="3"].is-in { transition-delay: .21s; }
.reveal[data-delay="4"].is-in { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   TYPOGRAPHY — Whoop scale (big!) on top of Geist
   ============================================================ */
.eyebrow {
  font-family: var(--rp-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-rot-hell);
  margin: 0 0 var(--rp-space-5);
  display: inline-block;
}
.eyebrow--light { color: var(--rp-rot-hell); }
.eyebrow--beige { color: var(--rp-beige-tief); }

.display-xl {
  font-family: var(--rp-font-display);
  font-weight: 300;
  font-size: clamp(48px, 8.4vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
}
.display-l {
  font-family: var(--rp-font-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
}
.display-m {
  font-family: var(--rp-font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.display-s {
  font-family: var(--rp-font-display);
  font-weight: 350;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}
.lede {
  font-family: var(--rp-font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.55;
  color: inherit;
  max-width: 620px;
  margin: 0;
}
.lede--dim { opacity: 0.72; }
.copy { font-size: 17px; line-height: 1.65; margin: 0 0 1.1em; }
.copy:last-child { margin-bottom: 0; }
.copy strong { font-weight: 600; }

/* Hero/dark contexts use light text */
.section--dark .display-xl,
.section--dark .display-l,
.section--dark .display-m,
.section--dark .display-s,
.section--bordeaux .display-xl,
.section--bordeaux .display-l,
.section--bordeaux .display-m,
.section--bordeaux .display-s {
  color: #fff;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--rp-font-body);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 20px 36px;
  min-height: 56px;
  border: 0;
  border-radius: 9px;
  text-decoration: none;
  transition: background .2s var(--rp-ease-out), color .2s var(--rp-ease-out),
              box-shadow .25s var(--rp-ease-out), transform .15s var(--rp-ease-out);
  white-space: nowrap;
}
.btn--primary { background: var(--rp-rot-hell); color: #fff; }
.btn--primary:hover { background: var(--rp-rot-hell-hover); box-shadow: 0 0 32px rgba(220, 13, 29, 0.4); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost-light {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.btn--ghost-dark {
  background: transparent; color: var(--rp-rot-dunkel);
  border: 1px solid var(--rp-rot-dunkel);
}
.btn--ghost-dark:hover { background: var(--rp-rot-dunkel); color: #fff; }
.btn--large { padding: 24px 44px; min-height: 64px; font-size: 15px; }

.btn__arrow { display: inline-block; font-size: 12px; transform: translateX(0); transition: transform .2s var(--rp-ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Anchor link (text-only) */
.link-anchor {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: inherit; text-decoration: none; padding: 8px 0;
  border-bottom: 1px solid currentColor;
  transition: color .2s var(--rp-ease-out), gap .2s var(--rp-ease-out);
}
.link-anchor:hover { gap: 12px; color: var(--rp-rot-hell); }

/* ============================================================
   HEADER (slim, dark-tinted, on Hero only — sticky)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: transparent;
  transition: background .3s var(--rp-ease-out), backdrop-filter .3s var(--rp-ease-out),
              border-color .3s var(--rp-ease-out);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  width: 100%; max-width: 1240px;
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between;
}
.site-header.is-scrolled {
  background: rgba(15, 11, 11, 0.85);
  backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.06);
}
.site-header__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.site-header__logo img { height: 38px; width: auto; display: block; }
.site-header__ev {
  font-family: var(--rp-font-display);
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.24em; text-transform: uppercase;
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.18);
}
.site-header__cta {
  background: var(--rp-rot-hell); color: #fff;
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 12px 22px; border-radius: 9px; border: 0;
  transition: background .2s var(--rp-ease-out);
  cursor: pointer;
}
.site-header__cta:hover { background: var(--rp-rot-hell-hover); }
@media (max-width: 640px) { .site-header__ev { display: none; } }

/* ============================================================
   SECTION 1 — HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  background: #0F0B0B;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 68%;
  z-index: 0;
  overflow: hidden;
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center center;
  filter: saturate(0.9) brightness(0.85) contrast(1.05);
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,11,11,0.90) 0%, rgba(15,11,11,0.78) 12%, rgba(15,11,11,0.35) 28%, rgba(15,11,11,0.03) 48%, transparent 65%),
    linear-gradient(to top, rgba(15,11,11,0.45) 0%, transparent 35%);
}
@media (max-width: 920px) {
  .hero__bg {
    width: 100%;
  }
  .hero__bg img {
    object-position: center 20%;
    filter: saturate(0.85) brightness(0.7) contrast(1.05);
  }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(15,11,11,0.35) 0%, rgba(15,11,11,0.55) 45%, rgba(15,11,11,0.92) 100%);
  }
}
.hero__placeholder {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 70% 30%, #3a1a20 0%, transparent 50%),
    linear-gradient(135deg, #1a0e10 0%, #2a0f14 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero__placeholder::after {
  content: 'BILDPLATZHALTER · Wettkampf- oder Trainingsszene · Querformat · Reserve links';
  font-family: var(--rp-font-mono); font-size: 11px;
  color: rgba(255,255,255,0.22); letter-spacing: 0.12em;
  padding: 8px 16px; border: 1px dashed rgba(255,255,255,0.18);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: end;
  padding: 140px 0 88px;
}
.hero__text { max-width: 720px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--rp-beige-hell); opacity: 0.85;
  font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  margin: 0 0 28px;
}
.hero__eyebrow::before {
  content: ''; display: block; width: 32px; height: 1px; background: var(--rp-rot-hell);
}
.hero__headline {
  font-family: var(--rp-font-display);
  font-weight: 300;
  font-size: clamp(48px, 7.2vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 32px;
}
.hero__headline em {
  font-style: normal; color: var(--rp-rot-hell); font-weight: 350;
}
.hero__sub {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--rp-beige-hell); opacity: 0.78;
  max-width: 540px;
  margin: 0 0 40px;
}
.hero__cta-row {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.hero__scroll {
  position: absolute; bottom: 32px; left: clamp(20px, 5vw, 64px);
  z-index: 3;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--rp-font-body);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
}
.hero__scroll::after {
  content: ''; width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
}
.hero__scroll:hover { color: #fff; }

/* Hero side meta column */
.hero__meta {
  display: flex; flex-direction: column; gap: 24px; padding-bottom: 4px;
  border-left: 1px solid rgba(255,255,255,0.14);
  padding-left: 32px;
}
.hero__meta-item {
  display: flex; flex-direction: column; gap: 4px;
}
.hero__meta-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rp-rot-hell);
}
.hero__meta-value {
  font-family: var(--rp-font-display);
  font-size: 22px; font-weight: 350; letter-spacing: -0.015em;
  color: #fff;
}
@media (max-width: 920px) {
  .hero__content { grid-template-columns: 1fr; padding: 120px 0 96px; gap: 48px; }
  .hero__meta { flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,0.14); padding-top: 24px; gap: 32px; }
  .hero__scroll { display: none; }
}

/* ============================================================
   SECTION 2 — UNSER AUFTRAG (dark)
   ============================================================ */
.mission__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.mission__statement {
  position: sticky; top: 120px;
}
.mission__pillars { display: flex; flex-direction: column; gap: 64px; }
.mission__pillar {
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.mission__pillar-num {
  font-family: var(--rp-font-mono);
  font-size: 12px; color: var(--rp-rot-hell);
  letter-spacing: 0.18em; margin: 0 0 14px;
}
.mission__pillar h3 {
  font-family: var(--rp-font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px;
}
.mission__pillar p {
  font-size: 17px; line-height: 1.65;
  color: var(--rp-beige-hell); opacity: 0.78;
  margin: 0;
}
@media (max-width: 880px) {
  .mission__grid { grid-template-columns: 1fr; gap: 48px; }
  .mission__statement { position: static; }
}

/* ============================================================
   SECTION 3 — VORTEILE (light, big 2x2 cards)
   ============================================================ */
.benefits__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 48px; margin-bottom: 80px; flex-wrap: wrap;
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 780px) { .benefits__grid { grid-template-columns: 1fr; } }
.benefit {
  background: var(--rp-weiss);
  border: 1px solid var(--rp-border-soft);
  border-radius: 18px;
  padding: clamp(40px, 4.5vw, 64px);
  display: flex; flex-direction: column; gap: 24px;
  position: relative;
  transition: border-color .3s var(--rp-ease-out), box-shadow .3s var(--rp-ease-out), transform .3s var(--rp-ease-out);
}
.benefit:hover { border-color: var(--rp-rot-hell); box-shadow: 0 8px 32px rgba(109,23,35,0.06); transform: translateY(-2px); }
.benefit__top {
  display: flex; justify-content: space-between; align-items: start; gap: 24px;
}
.benefit__num {
  font-family: var(--rp-font-mono);
  font-size: 12px; color: var(--rp-rot-hell);
  letter-spacing: 0.2em;
}
.benefit__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rp-rot-dunkel);
}
.benefit__metric {
  font-family: var(--rp-font-display);
  font-size: clamp(48px, 6.4vw, 88px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--rp-rot-dunkel);
  margin: 0;
}
.benefit__metric small {
  font-size: 0.28em; font-weight: 500; letter-spacing: 0; color: var(--rp-fg-muted);
  display: block; margin-top: 12px; line-height: 1.3;
  font-family: var(--rp-font-body);
  text-transform: uppercase; letter-spacing: 0.16em;
}
.benefit__body { font-size: 16px; line-height: 1.6; color: var(--rp-fg); margin: 0; max-width: 380px; }
.benefit__note { font-size: 13px; color: var(--rp-fg-muted); font-style: italic; margin: 0; }

.benefits__foot {
  margin-top: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center;
}
.benefits__disclaimer {
  font-size: 14px; color: var(--rp-fg-muted); font-style: italic;
  max-width: 640px; margin: 0 0 16px; line-height: 1.55;
}
.benefits__cta-note {
  font-size: 13px; color: var(--rp-fg-muted); margin: 0;
  letter-spacing: 0.05em;
}

/* ============================================================
   SECTION 4 — BEITRAG (bordeaux, two huge price cards)
   ============================================================ */
.pricing__head { text-align: center; margin-bottom: 80px; }
.pricing__head .display-l { color: #fff; }
.pricing__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 780px) { .pricing__grid { grid-template-columns: 1fr; } }
.price-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: clamp(40px, 4.5vw, 64px);
  display: flex; flex-direction: column;
  position: relative;
  transition: background .3s var(--rp-ease-out), border-color .3s var(--rp-ease-out), transform .3s var(--rp-ease-out);
}
.price-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-2px);
}
.price-card__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rp-rot-hell);
  margin: 0 0 32px;
}
.price-card__price {
  font-family: var(--rp-font-display);
  font-size: clamp(72px, 11vw, 144px);
  font-weight: 300; line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0 0 12px;
  display: flex; align-items: baseline; gap: 8px;
}
.price-card__price-unit {
  font-size: 0.22em; font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 0;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.price-card__monthly {
  font-size: 17px; color: rgba(255,255,255,0.65); margin: 0 0 40px;
}
.price-card__monthly strong { color: #fff; font-weight: 600; }
.price-card .btn { width: 100%; }
.pricing__note {
  margin-top: 64px; max-width: 720px; margin-left: auto; margin-right: auto;
  text-align: center;
}
.pricing__note p {
  font-size: 14px; line-height: 1.65;
  color: rgba(255,255,255,0.7); margin: 0 0 12px;
}
.pricing__note p:last-child { margin: 0; color: rgba(255,255,255,0.85); }

/* ============================================================
   SECTION 5 — FÜR ELTERN (light, 2-col with photo)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.split--flip { grid-template-columns: 1fr 1fr; }
.split__text { max-width: 540px; }
.split__head { margin-bottom: 32px; }
.split__body p { font-size: 17px; line-height: 1.65; margin: 0 0 1.1em; }
.split__list {
  list-style: none; padding: 0; margin: 32px 0;
  display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--rp-border);
  padding-top: 24px;
}
.split__list li {
  font-size: 16px; line-height: 1.5;
  padding-left: 28px; position: relative;
}
.split__list li::before {
  content: ''; position: absolute;
  left: 0; top: 12px; width: 16px; height: 1px;
  background: var(--rp-rot-hell);
}
.section--dark .split__body p,
.section--bordeaux .split__body p { color: rgba(255,255,255,0.85); }
.section--dark .split__list,
.section--bordeaux .split__list { border-top-color: rgba(255,255,255,0.16); }
.section--dark .split__list li,
.section--bordeaux .split__list li { color: rgba(255,255,255,0.85); }

.quote {
  margin: 40px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--rp-border);
}
.quote__text {
  font-family: var(--rp-font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--rp-fg);
  margin: 0 0 16px;
}
.quote__text::before { content: '„'; color: var(--rp-rot-hell); }
.quote__text::after  { content: '"'; color: var(--rp-rot-hell); }
.quote__cite {
  font-size: 12px; font-style: normal; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rp-fg-muted);
}
.section--dark .quote, .section--bordeaux .quote { border-top-color: rgba(255,255,255,0.16); }
.section--dark .quote__text, .section--bordeaux .quote__text { color: #fff; }
.section--dark .quote__cite, .section--bordeaux .quote__cite { color: rgba(255,255,255,0.6); }

.split__photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--rp-beige-tief);
  border-radius: 18px;
  margin: 0;
}
.split__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.split__photo--wide { aspect-ratio: 5/4; }
.split__photo-tag {
  position: absolute; left: 16px; bottom: 16px;
  font-family: var(--rp-font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.55);
  padding: 6px 10px;
}
.split__photo--empty {
  background:
    linear-gradient(135deg, var(--rp-beige-tief) 0%, #b8ad99 100%);
  display: flex; align-items: center; justify-content: center;
}
.split__photo--empty::after {
  content: attr(data-tag);
  font-family: var(--rp-font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-align: center; padding: 10px 16px;
  border: 1px dashed rgba(0,0,0,0.25); color: rgba(0,0,0,0.45);
  max-width: 70%; line-height: 1.5;
}
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 2; }
}

/* ============================================================
   SECTION 7 — FÖRDERER (light, body + 3 mini-boxes)
   ============================================================ */
.supporters__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
@media (max-width: 980px) { .supporters__grid { grid-template-columns: 1fr; } }
.supporters__boxes {
  display: flex; flex-direction: column; gap: 0;
}
.support-box {
  display: grid; grid-template-columns: 88px 1fr;
  gap: 32px; padding: 32px 0;
  border-top: 1px solid var(--rp-border);
  align-items: start;
}
.support-box:last-child { border-bottom: 1px solid var(--rp-border); }
.support-box__num {
  font-family: var(--rp-font-display);
  font-size: 56px; font-weight: 300;
  line-height: 1; letter-spacing: -0.03em;
  color: var(--rp-rot-hell);
}
.support-box__body h4 {
  font-family: var(--rp-font-display);
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  margin: 0 0 12px; color: var(--rp-fg);
}
.support-box__body p { font-size: 16px; line-height: 1.6; margin: 0; color: var(--rp-fg); }

/* ============================================================
   SECTION 8 — ZAHLEN (bordeaux, huge numbers)
   ============================================================ */
.stats__head { max-width: 720px; margin-bottom: 96px; }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 880px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background .3s var(--rp-ease-out), border-color .3s var(--rp-ease-out);
}
.stat:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.24); }
.stat__num {
  font-family: var(--rp-font-display);
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 300; line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
}
.stat__num-suffix { font-size: 0.55em; color: var(--rp-rot-hell); }
.stat__label {
  font-size: 14px; line-height: 1.45;
  color: rgba(255,255,255,0.78);
  max-width: 220px;
}
.stats__foot {
  margin-top: 48px; font-size: 17px; line-height: 1.6;
  color: rgba(255,255,255,0.78); max-width: 640px;
}

/* ============================================================
   SECTION 9 — FAQ
   ============================================================ */
.faq__head { margin-bottom: 64px; }
.faq__list { max-width: 940px; }
.faq__row { border-bottom: 1px solid var(--rp-border); }
.faq__row:first-child { border-top: 1px solid var(--rp-border); }
.faq__btn {
  width: 100%; background: transparent; border: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  padding: 28px 0; text-align: left; color: var(--rp-fg);
}
.faq__q {
  font-family: var(--rp-font-display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.faq__plus {
  flex-shrink: 0;
  width: 32px; height: 32px;
  position: relative;
  transition: transform .3s var(--rp-ease-out);
}
.faq__plus::before, .faq__plus::after {
  content: ''; position: absolute;
  background: var(--rp-rot-hell);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq__plus::before { width: 20px; height: 2px; }
.faq__plus::after  { width: 2px; height: 20px; transition: transform .3s var(--rp-ease-out); }
.faq__row.is-open .faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--rp-ease-out);
}
.faq__row.is-open .faq__body { grid-template-rows: 1fr; }
.faq__body-inner { overflow: hidden; }
.faq__a {
  font-size: 16px; line-height: 1.7;
  color: var(--rp-fg);
  max-width: 720px;
  margin: 0 0 28px;
  padding-top: 4px;
}
.faq__foot {
  margin-top: 48px; font-size: 16px; color: var(--rp-fg-muted);
}
.faq__foot a { color: var(--rp-rot-dunkel); font-weight: 600; }

/* ============================================================
   SECTION 10 — FINAL CTA
   ============================================================ */
.final {
  padding: clamp(120px, 18vw, 200px) 0;
  text-align: center;
  position: relative; isolation: isolate; overflow: hidden;
}
.final::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(220,13,29,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.4) 0%, transparent 60%);
  pointer-events: none;
}
.final__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
  max-width: 820px; margin: 0 auto;
}
.final__headline {
  font-family: var(--rp-font-display); font-weight: 300;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 1.0; letter-spacing: -0.035em;
  color: #fff; margin: 0;
}
.final__sub {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  max-width: 600px; margin: 0;
}
.final__email {
  margin-top: 16px;
  font-size: 14px; color: rgba(255,255,255,0.6);
}
.final__email a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.final__cta-note { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0; letter-spacing: 0.06em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #0a0707; color: rgba(255,255,255,0.7);
  padding: 96px 0 32px;
}
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand img { height: 56px; width: auto; margin: 0 0 24px; }
.footer__brand-name {
  font-family: var(--rp-font-display); font-size: 18px; color: #fff; margin: 0 0 8px; font-weight: 500;
}
.footer__brand-tag { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.55); font-style: italic; }

.footer__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rp-rot-hell); margin: 0 0 20px;
}
.footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__list a, .footer__list span {
  color: rgba(255,255,255,0.78); text-decoration: none; font-size: 14px; line-height: 1.5;
}
.footer__list a:hover { color: var(--rp-rot-hell); }
.footer__list small { color: rgba(255,255,255,0.4); font-size: 11px; margin-left: 6px; }

.footer__board { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.footer__board-row { color: rgba(255,255,255,0.78); }
.footer__board-row strong { color: #fff; font-weight: 600; }
.footer__board-row span { display: block; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; letter-spacing: 0.06em; }

.footer__bottom {
  margin-top: 72px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: rgba(255,255,255,0.45);
}
.footer__bottom a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer__bottom a:hover { color: var(--rp-rot-hell); }
.footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }

/* ============================================================
   STICKY CTA (floating bottom)
   ============================================================ */
.sticky-cta {
  position: fixed;
  z-index: 55;
  bottom: 24px; right: 24px;
  opacity: 0; pointer-events: none;
  transform: translateY(20px);
  transition: opacity .35s var(--rp-ease-out), transform .35s var(--rp-ease-out);
}
.sticky-cta.is-visible {
  opacity: 1; pointer-events: auto; transform: none;
}
.sticky-cta .btn {
  box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
@media (max-width: 640px) {
  .sticky-cta { left: 12px; right: 12px; bottom: 12px; }
  .sticky-cta .btn { width: 100%; }
}

/* ============================================================
   PRODUKTION — Accessibility: sichtbarer Fokus-Indikator
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--rp-rot-hell);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--rp-tiefschwarz);
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* In-Text-Links (Partner-Verlinkungen) erben den Fließtext-Stil dezent */
.inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rp-rot-hell);
}
.inline-link:hover { color: var(--rp-rot-hell); }
.section--dark .inline-link,
.section--bordeaux .inline-link { color: inherit; }

/* Footer-Block "Unsere Partner" — fünfte Spalte ergänzt */
.footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
.footer__partners { display: flex; flex-direction: column; gap: 10px; }
.footer__partners a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}
.footer__partners a:hover { color: var(--rp-rot-hell); }
.footer__partners span { display: block; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
@media (max-width: 880px) { .footer__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr !important; } }

/* ============================================================
   PRODUKTION — Hero Mobile-Fixes (nur Hero, index.html unverändert)
   ============================================================ */

/* Fix 1 — Horizontaler Innenabstand der Hero-Inhalte im gestapelten
   Mobil-/Tablet-Layout (≤ 920 px = einspaltig). .hero__content ist auch
   .container, dessen Padding wird hier von der Shorthand 0 überschrieben –
   diese Longhands setzen es wieder. Desktop (≥ 1024 px) bleibt unberührt. */
@media (max-width: 920px) {
  .hero__content {
    padding-left: clamp(20px, 5vw, 32px);
    padding-right: clamp(20px, 5vw, 32px);
  }
  /* CTAs bleiben inhaltsbreit innerhalb des Paddings, nie volle Bildschirmbreite */
  .hero__cta-row .btn { max-width: 100%; }
}

/* Fix 2 — Overlay über dem Hero-Foto je Viewport dezenter, damit das Bild
   durchscheint. Liegt nach der bestehenden @media(max-width:920px)-Regel,
   gewinnt also über das frühere, sehr dunkle Overlay (Peak 0.92). */

/* Tablet 768–1023 px: ca. 35 % */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__bg::after {
    background:
      linear-gradient(180deg,
        rgba(15, 11, 11, 0.18) 0%,
        rgba(15, 11, 11, 0.28) 45%,
        rgba(15, 11, 11, 0.38) 100%);
  }
}

/* Mobile < 768 px: ca. 25 % + leichte Aufhellung des Foto-Filters */
@media (max-width: 767px) {
  .hero__bg::after {
    background:
      linear-gradient(180deg,
        rgba(15, 11, 11, 0.10) 0%,
        rgba(15, 11, 11, 0.18) 45%,
        rgba(15, 11, 11, 0.25) 100%);
  }
  .hero__bg img {
    filter: saturate(0.85) brightness(0.82) contrast(1.05);
  }
  /* Lesbarkeit bei leichterem Overlay sichern (nur Hero-Headline + Subline) */
  .hero__headline,
  .hero__sub {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }
}

/* ============================================================
   PRODUKTION — Mobile CTA-Overflow-Fix (Preiskarten + Header-CTA)
   Ursache: .btn hat white-space:nowrap → lange Uppercase-Labels
   ("KINDERMITGLIEDSCHAFT BEANTRAGEN") laufen über den Card-Rand.
   Nur Mobile; Desktop (≥ 769 px) bleibt unverändert.
   ============================================================ */
@media (max-width: 768px) {
  /* Lange CTA-Texte dürfen umbrechen statt überzulaufen */
  .btn {
    white-space: normal;
    overflow-wrap: break-word;   /* notfalls überlanges Wort brechen */
    text-align: center;
  }

  /* Preiskarten etwas schlankeres Innen-Padding → mehr Textbreite auf schmalen Phones */
  .price-card {
    padding-left: clamp(20px, 6vw, 32px);
    padding-right: clamp(20px, 6vw, 32px);
  }

  /* Preiskarten-CTA füllt exakt den Innenraum (box-sizing: border-box ist global) */
  .price-card .btn {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    letter-spacing: 0.03em;
  }

  /* Header-CTA kompakter, damit er nicht über den rechten Viewport-Rand ragt */
  .site-header__inner { gap: 12px; }
  .site-header__logo img { height: 32px; }
  .site-header__cta {
    padding: 10px 16px;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
}