/* ============================================================
   IEE SOLAR — Landing Page Styles
   Gabriele Adriano Chochol · Gifhorn / Wolfsburg
   Built on tokens from colors_and_type.css (DS handoff)
   ============================================================ */

/* ---------- Layout primitives ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }

/* Einheitlicher vertikaler Rhythmus für ALLE Sections — Master-Regel jetzt unten im Background-System */
/* (Alte .section-alt-Background-Definition entfernt — wird vom Theme-System unten gesetzt) */
.section-dark { background: var(--green-700); color: var(--fg-on-inverse); }
.section-dark .h1, .section-dark .h2, .section-dark .h3, .section-dark h1, .section-dark h2, .section-dark h3 { color: var(--on-dark); }
.section-dark .eyebrow { color: var(--sun-400); }
.section-dark p { color: var(--on-dark-2); }

/* ---------- Eyebrow ornament ---------- */
.eyebrow-ornament::before,
.eyebrow-ornament::after {
  content: "✦";
  margin: 0 8px;
  color: var(--sun-500);
  opacity: 0.7;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  font: var(--fw-medium) 15px/1 var(--font-body);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
  white-space: nowrap;
  text-decoration: none;
}
.btn .arrow { opacity: 0.75; transition: transform var(--dur-fast) var(--ease-soft); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-bright { background: var(--sun-500); color: #fff; }
.btn-bright:hover { background: var(--sun-400); }

.btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-ghost:hover { background: var(--green-50); }

.btn-ghost-dark {
  background: transparent;
  color: var(--on-dark);
  border: 1px solid var(--border-inverse);
}
.btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.06); }

.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-lg { padding: 18px 28px; font-size: 16px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
.card:hover { box-shadow: var(--shadow-md); }
.card .eyebrow { display: block; margin-bottom: 12px; }
.card h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 22px;
  color: var(--accent);
}
.card p {
  margin: 0;
  font: var(--fw-regular) 14px/1.55 var(--font-body);
  color: var(--ink-2);
}
.card.card-cream { background: var(--cream); border-color: var(--line); }

/* ---------- Form Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field .lbl {
  font: var(--fw-medium) 12px/1 var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.input {
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-cool);
  background: var(--paper);
  font: var(--fw-regular) 15px/1.2 var(--font-body);
  color: var(--ink);
  width: 100%;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
.input::placeholder { color: var(--ink-disabled); }
.input.on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-inverse);
  color: var(--on-dark);
}
.input.on-dark::placeholder { color: var(--on-dark-3); }

/* ============================================================
   NAVIGATION
   ============================================================ */
/* ============================================================
   GLOBAL BACKGROUND SYSTEM — durchgehender Träger, Sections fließen
   ============================================================
   Konzept (neu):
   • Body trägt einen großen, fixed-attachment Aurora-Gradient
     (Blau-Gold-Blau über die ganze Seite). Wirkt durchgehend.
   • Sections setzen ihren Theme-Ton als gefadete Layer DARÜBER —
     oben + unten via mask-image transparent, sodass Body durchscheint.
   • Resultat: keine harten Section-Kanten mehr, alles wirkt wie
     eine zusammenhängende Slide-Komposition.
   ============================================================ */

html, body {
  background: var(--bg-paper);
}
body {
  /* Eine einzige, ruhige Bühne. Keine Aurora, keine Section-Zonen.
     Page = durchgehend Paper, dann ein dunkler Kontakt-Anker am Ende. */
  background: var(--bg-paper);
  color: var(--text-on-paper);
  min-height: 100vh;
}

/* Einheitliches Section-Padding für alle Sections */
section {
  padding: clamp(56px, 7vw, 104px) 0;
  position: relative;
}
section.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

/* Reset: alte Section-Backgrounds neutralisieren */
.section-alt,
.stats-section,
.referral-section,
.showcase-section,
.intro-personal {
  background: transparent;
}

/* ===== THEME-KLASSEN — radikal vereinfacht =====
   Alle "light" Themes (paper/mist/cool) sind identisch = Paper.
   Nur Deep ist ein eigenständiges Theme (für Kontakt am Ende).
   Keine Fade-Masken, kein Section-Overlap — alles ist Paper bis
   der einzige Übergang zu Deep kommt, der durch einen sanften
   Gradient AM TOP von .section--deep gemacht wird.
*/

.section--paper,
.section--mist,
.section--cool,
.section--deep {
  position: relative;
  isolation: isolate;
}

/* Light-Themes: Text + transparenter BG (Body trägt die Paper-Fläche) */
.section--paper,
.section--mist,
.section--cool { color: var(--text-on-paper); }
.section--paper p, .section--paper .lead, .section--paper .p,
.section--mist  p, .section--mist  .lead, .section--mist  .p,
.section--cool  p, .section--cool  .lead, .section--cool  .p {
  color: var(--text-on-paper-muted);
}

/* Deep-Theme: ein einziger cinematic Anker. Top-Gradient blendet
   sanft von Paper-Hell in tiefes Navy — das ist der einzige
   Farbübergang der ganzen Seite. */
.section--deep {
  color: var(--text-on-deep);
}
.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4 { color: var(--text-on-deep); }
.section--deep p,
.section--deep .lead,
.section--deep .p { color: var(--text-on-deep-muted); }
.section--deep .eyebrow { color: var(--text-on-deep-muted); }

/* Deep-Section: harter Schnitt zum vorherigen Paper, in sich ein
   leicht vertikaler Navy-Verlauf mit zartem Blau-Glow oben-links —
   identischer Look wie der CTA-Block, jetzt wiederverwendbar für
   alle Sections die als "Navy-Kachel" gerendert werden sollen. */
.section--deep {
  background:
    radial-gradient(70% 60% at 12% 18%, rgb(var(--rgb-blue) / 0.22) 0%, transparent 60%),
    linear-gradient(180deg,
      var(--bg-deep) 0%,
      color-mix(in oklab, var(--bg-deep) 92%, #000) 100%);
}
.section--deep::before { content: none; }

/* Weiße "Insel-Karten" innerhalb einer Navy-Section behalten ihre
   eigenen dunklen Textfarben — sonst werden sie unleserlich, weil
   .section--deep p/li auf hellgrau (für Navy) eingestellt ist. */
.section--deep .foerder-card,
.section--deep .foerder-card *,
.section--deep .foerder-note {
  color: var(--ink-3);
}
.section--deep .foerder-card h3,
.section--deep .foerder-card strong,
.section--deep .foerder-note strong {
  color: var(--ink) !important;
}
.section--deep .foerder-card .foerder-col-h {
  color: var(--sun-500) !important;
}
.section--deep .foerder-list strong {
  color: var(--ink) !important;
}
.section--deep .foerder-note em {
  color: var(--brand-500) !important;
  -webkit-text-fill-color: var(--brand-500) !important;
}

/* Legacy-Klassen — keine Wirkung mehr nötig */
.has-bleed-top > .container,
.has-bleed-bottom > .container { position: relative; z-index: 1; }

/* ============================================================
   THEME-OVERRIDES — pro Section sicherstellen, dass die
   sekundären Akzente (Section-No, Eyebrow, Links, Section-Head)
   mit der Cool-Palette zusammenspielen.
   ============================================================ */

/* --- Light Themes (paper / mist / cool): Hierarchie ---
   Eyebrow:   brand-blue (Akzent oben)
   Section-No: blue text + cyan border + cyan tint bg
   Headline:  brand-blue (kräftig)
   Lead:      ink-2 (muted)
   Body:      ink-2 (muted) */
.section--paper .eyebrow,
.section--mist  .eyebrow,
.section--cool  .eyebrow {
  color: var(--sun-500);
}
.section--paper a:not(.btn):not(.nav-link),
.section--mist  a:not(.btn):not(.nav-link),
.section--cool  a:not(.btn):not(.nav-link) {
  color: var(--sun-500);
  text-decoration: none;
  transition: color 180ms var(--ease-soft);
}
.section--paper a:not(.btn):not(.nav-link):hover,
.section--mist  a:not(.btn):not(.nav-link):hover,
.section--cool  a:not(.btn):not(.nav-link):hover {
  color: rgb(var(--rgb-blue-2));
}

/* --- Deep Theme: Cyan als hauptsächlicher Akzent ---
   Headline:    text-on-deep (fast weiß)
   Section-No:  Cyan-Pill (Text + BG + Border in Cyan)
   Eyebrow:     Cyan (statt grau)
   Links:       Cyan
   Body:        text-on-deep-muted (helles Grau)
   Buttons:     btn-bright bleibt brand-blue (Kontrast-Pop) */
.section--deep .section-no {
  color: var(--accent-100);
  background: var(--accent-12);
  border-color: var(--accent-45);
}
.section--deep .section-no .ornament,
.section--deep .section-no::before { color: var(--accent-100); }
.section--deep .eyebrow {
  color: var(--accent-100);
}
.section--deep a:not(.btn):not(.nav-link) {
  color: var(--accent-100);
  text-decoration: none;
  transition: color 180ms var(--ease-soft);
}
.section--deep a:not(.btn):not(.nav-link):hover {
  color: rgb(var(--rgb-gold-2));
}
.section--deep .check,
.section--deep .hero-trust .check {
  color: var(--accent-100);
}

/* --- Section-No im Light-Theme: dezenter cyan-tint outline ---
   Vorher unklar; jetzt explizit gleicher Stil über alle Sections */
.section--paper .section-no,
.section--mist  .section-no,
.section--cool  .section-no {
  color: var(--sun-500);
  background: var(--accent-08);
  border-color: var(--accent-45);
}

/* --- Stats / Statement-Sections auf Deep-Theme ---
   Glass-Cards bekommen Dark-Variant, Werte+Labels werden hell.
   Cyan bleibt der Akzent, Brand-Blau nur für Hover-Highlight. */
.section--deep .stat {
  background: rgb(var(--rgb-paper) / 0.06);
  border: 1px solid rgb(var(--rgb-paper) / 0.14);
  box-shadow:
    0 1px 0 rgb(var(--rgb-paper) / 0.10) inset,
    0 24px 60px -24px rgba(0, 0, 0, 0.55),
    0 8px 22px -10px rgb(var(--rgb-accent) / 0.12);
}
.section--deep .stat:hover {
  box-shadow:
    0 1px 0 rgb(var(--rgb-paper) / 0.14) inset,
    0 32px 70px -22px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--accent-45);
}
.section--deep .stat-val {
  color: var(--text-on-deep);
}
.section--deep .stat-val .sun { color: var(--accent-100); }
.section--deep .stat-lbl {
  color: var(--text-on-deep-muted);
}
.section--deep .stat-num[data-prefix="bis"]::before {
  color: var(--text-on-deep-subtle);
}

/* --- Section-Head auf Deep ---
   H2 wird hell, Body wird hell-grau, Lead bleibt cyan-betont
   (die em-italic Highlights) */
.section--deep .section-head h2 {
  color: var(--text-on-deep);
}
.section--deep .section-head p {
  color: var(--text-on-deep-muted);
}

/* --- Glass-Cards (z.B. Empfehlung-Card) auf Deep ---
   Generelle .glass-Klasse braucht Dark-Variant wenn in Deep-Section */
.section--deep .glass {
  background: rgb(var(--rgb-paper) / 0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgb(var(--rgb-paper) / 0.14);
  box-shadow:
    0 1px 0 rgb(var(--rgb-paper) / 0.10) inset,
    0 20px 60px -20px rgba(0, 0, 0, 0.6),
    0 8px 24px -12px rgb(var(--rgb-accent) / 0.10);
  color: var(--text-on-deep);
}

/* --- Empfehlung-Card auf Deep ---
   Border + Background + Text werden dark-tauglich */
.section--deep .empfehlung-card-wide {
  background:
    radial-gradient(60% 50% at 100% 0%, var(--accent-12) 0%, transparent 70%),
    radial-gradient(50% 60% at 0% 100%, var(--blue-12) 0%, transparent 70%),
    rgb(var(--rgb-paper) / 0.04);
  border: 1.5px solid var(--accent-45);
  color: var(--text-on-deep);
}
.section--deep .empfehlung-card-wide h3,
.section--deep .empfehlung-card-wide h4 { color: var(--text-on-deep); }
.section--deep .empfehlung-card-wide p { color: var(--text-on-deep-muted); }
.section--deep .empfehlung-card-wide strong { color: var(--accent-100); }

/* --- Stat-Section: stat-num & ähnliche Komponenten ---
   sicherstellen dass alle Texte hell sind */
.section--deep .stats-section,
.section--deep .stats { color: var(--text-on-deep); }

/* --- Process / Timeline auf Deep ---
   Step-Cards als glasige Panels auf Navy, Bubbles + Text dark-tauglich */
.section--deep .step-card {
  background: linear-gradient(180deg,
    rgb(var(--rgb-paper) / 0.06) 0%,
    rgb(var(--rgb-paper) / 0.03) 100%);
  border: 1px solid rgb(var(--rgb-paper) / 0.12);
  box-shadow:
    0 1px 0 rgb(var(--rgb-paper) / 0.08) inset,
    0 12px 30px -18px rgba(0, 0, 0, 0.55);
  color: var(--text-on-deep);
}
.section--deep .step-card h3 { color: var(--text-on-deep); }
.section--deep .step-card h3 em { color: var(--accent-100); }
.section--deep .step-card p { color: var(--text-on-deep-muted); }
.section--deep .step-tag { color: var(--accent-100); }
.section--deep .step-meta { color: var(--text-on-deep-subtle); }

/* Bubble auf Deep: bleibt mit Border sichtbar, Zahl hell */
.section--deep .step-bubble {
  background: rgb(var(--rgb-paper) / 0.05);
  border-color: rgb(var(--rgb-paper) / 0.22);
  color: var(--text-on-deep);
}
.section--deep .step-num { color: var(--text-on-deep); }

/* Passed / Final / Hover Bubble bleiben farbig — Zahl weiß ist bereits gesetzt */
.section--deep .timeline-step:hover .step-card {
  border-color: var(--accent-45);
  box-shadow:
    0 1px 0 rgb(var(--rgb-paper) / 0.10) inset,
    0 22px 44px -22px rgba(0, 0, 0, 0.7);
}

/* Track auf Deep: weniger sichtbar */
.section--deep .timeline-track {
  background: rgb(var(--rgb-paper) / 0.10);
}

/* --- Footer (sitzt unter deep-section, eigener bg-deep-2) ---
   Cyan-Akzent statt grau für Headings und Links */
.site-footer h4,
.site-footer .footer-title { color: var(--text-on-deep); }
.site-footer a:not(.btn) {
  color: var(--text-on-deep-muted);
  text-decoration: none;
  transition: color 180ms var(--ease-soft);
}
.site-footer a:not(.btn):hover { color: var(--accent-100); }
.site-footer .footer-accent { color: var(--accent-100); }

/* Container — einheitliche max-width, einheitliche Gutters */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

/* Footer-Übergang: weicher Schatten von oben für visuelle Trennung CTA→Footer */
.site-footer {
  background: var(--bg-deep-2);
  color: var(--on-dark-2);
  position: relative;
}

/* ============================================================
   BRIGHTSALES DESIGN-TOOLS — Mouse-Spotlight, Parallax, Timeline-Progress
   ============================================================ */

/* Scroll-Progress-Bar — fix oben, golden */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.scroll-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--grad-solar);
  box-shadow: 0 0 14px var(--gold-60), 0 0 4px var(--gold-80);
  transform-origin: left center;
  transition: width 80ms linear;
}

/* Custom Cursor-Glow — folgt dem Cursor global */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--gold-18) 0%,
    var(--gold-12) 28%,
    var(--gold-04) 50%,
    transparent 72%);
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 400ms var(--ease-soft);
  filter: blur(12px);
  will-change: transform, opacity;
}
.cursor-glow.is-active { opacity: 0.85; }
@media (hover: none), (max-width: 900px) {
  .cursor-glow { display: none; }
}

/* 3D-Tilt-Cards: parametrisierter rotateX/Y via CSS-Variablen */
.tilt-card {
  --tx: 0deg;
  --ty: 0deg;
  --tz: 0;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)) translateZ(var(--tz));
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tilt-card.is-tilting {
  transition: transform 60ms ease-out;
}
.tilt-card > * { transform-style: preserve-3d; }

/* Cursor-Spotlight innerhalb von Cards (Brightsales-Mentor-Card-Effekt) */
.card-spot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --cx: 50%;
  --cy: 50%;
}
.card-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 220px at var(--cx) var(--cy),
    var(--gold-24) 0%,
    var(--gold-08) 30%,
    transparent 60%);
  opacity: 0;
  transition: opacity 280ms var(--ease-soft);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.card-spot.is-hover::before { opacity: 1; }
.card-spot > * { position: relative; z-index: 1; }

/* Magnetic Buttons — JS setzt --mtx, --mty */
.magnetic {
  --mtx: 0px;
  --mty: 0px;
  transform: translate(var(--mtx), var(--mty));
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* Mouse-Spotlight (auf Sections die JS-tracked werden) */
.hero,
.cta-section,
.intro-personal {
  --hmx: 50%; --hmy: 50%;
  --mx: 50%;  --my: 50%;
  --amx: 50%; --amy: 50%;
}

/* Hero: subtle radial Spotlight folgt der Maus */
.hero {
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 520px at var(--hmx) var(--hmy), var(--gold-12) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-soft);
  z-index: 0;
}
.hero.is-hover::after { opacity: 1; }
.hero > .container { position: relative; z-index: 1; }

/* CTA-Section: kräftigeres Spotlight (dunkle Section, da knallt's) */
.cta-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 680px at var(--mx) var(--my), var(--gold-18) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease-soft);
  z-index: 0;
}
.cta-section.is-hover::after { opacity: 1; }
.cta-section > .container { position: relative; z-index: 1; }

/* Personal-Intro: dezenter heller Spotlight */
.intro-personal::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 540px at var(--amx) var(--amy), var(--gold-12) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease-soft);
  z-index: 0;
}
.intro-personal.is-hover::after { opacity: 1; }

/* Timeline scroll-driven Progress — Brightsales-Style */
.timeline { --tl-progress: 0%; }
.timeline-track {
  position: relative;
}
.timeline-track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--tl-progress);
  background: linear-gradient(180deg,
      rgb(var(--rgb-blue))   0%,
      rgb(var(--rgb-blue-2)) 40%,
      rgb(var(--rgb-gold))   80%,
      transparent            100%);
  border-radius: 3px;
  /* Glow dezenter — bleed-Effekt auf Bubbles + Numbers verhindern */
  box-shadow: 0 0 10px var(--accent-32);
  transition: height 240ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
.timeline-step.is-passed .step-bubble {
  background: var(--sun-500);
  border-color: var(--sun-500);
  box-shadow:
    0 0 0 5px var(--accent-12),
    0 0 18px var(--accent-32),
    inset 0 -2px 4px rgba(0, 0, 0, 0.08);
  transform: scale(1.04);
}
.timeline-step.is-passed .step-num {
  /* Bubble ist jetzt brand-blau gefüllt → Zahl muss weiß sein */
  color: #fff;
}
.timeline-step.is-passed .step-card {
  border-color: var(--gold-32);
}

/* Stagger-Entrance für Reveal-Childs */
.timeline-step.reveal { transition-delay: calc(var(--i, 0) * 90ms); }
.stats-grid .stat.reveal { transition-delay: calc(var(--i, 0) * 110ms); }

/* ============================================================
   GLASSMORPHISM + AURORA UTILITIES
   ============================================================ */

/* Aurora-Blobs als Hintergrund-Layer für Sections — mit Mouse-Parallax */
.has-aurora {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --pmx: 0px; --pmy: 0px;  /* Parallax-Offset, von JS gesetzt */
}
.has-aurora::before,
.has-aurora::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  animation: auroraFloat 18s ease-in-out infinite alternate;
  /* `translate`-Property trennt sich von `transform` — kombinierbar mit animation */
  transition: translate 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.has-aurora::before {
  width: 480px;
  height: 480px;
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(53, 104, 207, 0.35), rgba(53, 104, 207, 0) 70%);
  translate: var(--pmx) var(--pmy);
}
.has-aurora::after {
  width: 560px;
  height: 560px;
  bottom: -160px;
  right: -160px;
  background: radial-gradient(circle, var(--gold-45), transparent 70%);
  animation-delay: -8s;
  /* Gegen-Richtung für mehr Tiefe */
  translate: calc(var(--pmx) * -0.6) calc(var(--pmy) * -0.6);
}
@keyframes auroraFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}

/* Helper: Aurora-Variant mit anderer Position */
.aurora-tr-bl::before { top: auto; left: auto; bottom: -120px; right: -120px; }
.aurora-tr-bl::after  { bottom: auto; right: auto; top: -160px; left: -160px; }

/* Glas-Card-Klasse: Frosted Glass */
.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 60px -20px rgba(11, 29, 69, 0.18),
    0 8px 24px -12px rgba(11, 29, 69, 0.1);
}
.glass-dark {
  background: rgba(11, 29, 69, 0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 20px 60px -20px rgba(0, 0, 0, 0.5);
  color: var(--on-dark);
}
.glass-warm {
  /* Variant-Name bleibt für Backward-Compat — Farbe ist jetzt Cyan-Tint */
  background: rgb(var(--rgb-paper) / 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--gold-32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 24px 70px -24px rgb(var(--rgb-accent) / 0.20),
    0 8px 28px -12px rgba(11, 29, 69, 0.08);
}

/* Tilt-Hover für Cards */
.tilt-hover {
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tilt-hover:hover {
  transform: translateY(-6px);
}

/* Shimmer-Sweep auf Glass-Cards */
.glass-shimmer { position: relative; overflow: hidden; }
.glass-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 900ms ease;
  pointer-events: none;
}
.glass-shimmer:hover::after { transform: translateX(100%); }

/* ============================================================
   NAV — Frosted Glass mit Glow
   ============================================================ */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(253, 253, 253, 0.72);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 28px -10px rgba(11, 29, 69, 0.08);
  transition: background var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft);
}
.nav-shell.scrolled {
  background: rgba(253, 253, 253, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 40px -10px rgba(11, 29, 69, 0.14);
}
.nav-shell.scrolled { border-color: var(--line-cool); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark { width: 36px; height: 30px; }
/* Logo-Variante: PNG-Logo (House-Mark mit Verlauf) statt SVG-Platzhalter.
   Breite wird über das natürliche Seitenverhältnis bestimmt. */
.brand-mark--img {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.brand-mark--img img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: left center;
}
/* Volles Logo (House + Schriftzug) ersetzt den Textbrand. */
.brand--logo-only { gap: 0; }
.brand-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}
.brand-logo--lg { height: 56px; }
@media (max-width: 640px) {
  .brand-logo { height: 36px; }
  .brand-logo--lg { height: 44px; }
}
.brand-stack { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.brand-word {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.brand-word .blue { color: var(--sun-500); }
.brand-tag {
  font: var(--fw-medium) 10px/1.2 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.nav-links a {
  font: var(--fw-medium) 14px/1 var(--font-body);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-cool);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  margin: 3px 0;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: var(--s-32) 0 var(--s-24);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-10);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--fw-medium) 12px/1 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--r-pill);
  margin-bottom: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 18px -8px rgba(11, 29, 69, 0.18);
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sun-500);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 18px;
}
.hero h1 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero h1 .sun { color: var(--sun-500); }
.hero-lead {
  font: var(--fw-regular) 15px/1.55 var(--font-body);
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 0 32px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  font: 13px/1.4 var(--font-body);
  color: var(--ink-3);
}
.hero-trust .check { color: var(--sun-500); font-weight: 700; }

/* Unified Trust-Row v3 — drei gleichwertige Items in einer Reihe,
   getrennt durch subtile Vertikallinien. Einheitliche Typografie
   für eine ruhige, geschlossene Optik. */
.hero-trust.hero-trust-v3 {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 0 !important;
  font: var(--fw-medium) 14px/1.3 var(--font-body);
  color: var(--ink-2);
}
.hero-trust-v3 .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-left: 1px solid var(--line-cool);
  min-height: 28px;
}
.hero-trust-v3 .trust-item:first-child {
  padding-left: 0;
  border-left: 0;
}
.hero-trust-v3 .trust-num {
  font: var(--fw-bold) 18px/1 var(--font-display);
  color: var(--brand-700);
  letter-spacing: -0.01em;
}
.hero-trust-v3 .check {
  color: var(--sun-500);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.hero-trust-v3 .trust-label {
  color: var(--ink-2);
}

.hero-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft-portrait);
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-portrait iframe.hero-yt {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}
/* Klick-zum-Abspielen-Vorschau (lädt YouTube erst beim Klick) */
.hero-yt-facade {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  margin: 0;
  background: #000;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.hero-yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-yt-facade .hero-yt-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hero-yt-facade .hero-yt-play svg {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
  transition: transform 0.18s var(--ease-soft, ease);
}
.hero-yt-facade:hover .hero-yt-play svg,
.hero-yt-facade:focus-visible .hero-yt-play svg { transform: scale(1.09); }
/* YouTube-Embed: 16:9, gleiche Breite wie das Original-Portrait, aber proportional */
.hero-portrait.hero-portrait-yt {
  aspect-ratio: 16 / 9;
  background: #000;
  width: 100%;
  max-width: none;
  box-shadow:
    0 20px 50px -22px rgba(11, 26, 71, 0.35),
    0 10px 20px -12px rgba(11, 26, 71, 0.18);
}
@media (max-width: 900px) {
  .hero-portrait.hero-portrait-yt { max-width: 640px; margin: 0 auto; }
}
.hero-portrait .badge,
.intro-portrait-card .badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: #fff;
  border: 1px solid var(--line-cool);
  border-radius: 14px;
  padding: 10px 14px 10px 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 30px -14px rgba(11, 29, 69, 0.28),
    0 4px 12px -6px rgba(11, 29, 69, 0.10);
  max-width: 290px;
}
.hero-portrait .badge .monogram,
.intro-portrait-card .badge .monogram {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--fw-bold) 14px/1 var(--font-display);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(11, 29, 69, 0.45);
}
.hero-portrait .badge .txt,
.intro-portrait-card .badge .txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hero-portrait .badge .name-row,
.intro-portrait-card .badge .name-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: var(--fw-semibold) 14px/1.2 var(--font-body);
  color: var(--ink);
  white-space: nowrap;
}
.hero-portrait .badge .verified,
.intro-portrait-card .badge .verified {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.hero-portrait .badge small,
.intro-portrait-card .badge small {
  font: var(--fw-medium) 11px/1.2 var(--font-body);
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
/* intro-portrait-card braucht position:relative damit das absolute Badge sitzt */
.intro-portrait-card { position: relative; }

/* Sanftes Floating + Glow-Puls auf dem Intro-Badge */
.intro-portrait-card .badge {
  will-change: transform, box-shadow;
  animation: badgeFloat 4.5s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 14px 30px -14px rgba(11, 29, 69, 0.28),
      0 4px 12px -6px rgba(11, 29, 69, 0.10);
  }
  50% {
    transform: translateY(-6px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 22px 40px -16px rgba(11, 29, 69, 0.38),
      0 8px 18px -8px rgba(11, 29, 69, 0.16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-portrait-card .badge { animation: none; }
}

/* ============================================================
   TRUSTBAR
   ============================================================ */
.trustbar {
  border-top: 1px solid var(--line-cool);
  border-bottom: 1px solid var(--line-cool);
  padding: var(--s-8) 0;
  background: var(--cream);
}
.trustbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
}
.trustbar-eyebrow {
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trustbar-items {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
}
.trustbar-item {
  font: var(--fw-medium) 14px/1.2 var(--font-body);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trustbar-item .marker { color: var(--sun-500); }

/* ============================================================
   REGION — Niedersachsen-Karte mit Beratungsstädten
   ============================================================ */
.region-section {
  position: relative;
  padding-top: var(--s-20);
  padding-bottom: var(--s-20);
}

.region-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--s-12);
  align-items: stretch;
  margin-top: var(--s-12);
}

/* ---------- Karten-Card ---------- */
.region-map {
  position: relative;
  background:
    radial-gradient(120% 80% at 0% 0%, #FFFFFF 0%, #FAFCFF 60%, #F2F6FD 100%);
  border: 1px solid rgba(11, 26, 71, 0.08);
  border-radius: 24px;
  padding: var(--s-5) var(--s-6) var(--s-4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 28px 70px -28px rgba(11, 26, 71, 0.22);
  overflow: hidden;
}
.region-map::before {
  /* sehr subtiler diagonaler Schimmer */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(90,125,238,0.05) 0%, rgba(255,255,255,0) 35%);
  pointer-events: none;
}

.region-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed rgba(11, 26, 71, 0.12);
  margin-bottom: var(--s-2);
  position: relative;
  z-index: 1;
}
.region-map-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.region-map-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-800, #0C2055);
}
.region-map-coords {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--ink-3, #6A7282);
  letter-spacing: 0.04em;
}
.region-map-header-right {
  display: flex;
  align-items: center;
}
.region-map-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1E4FB0;
  padding: 4px 10px;
  border: 1px solid rgba(30, 79, 176, 0.2);
  border-radius: 999px;
  background: rgba(90, 125, 238, 0.08);
}
.region-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2E5BE8;
  box-shadow: 0 0 8px rgba(46,91,232,0.7);
  animation: regionStatusPulse 2.4s ease-in-out infinite;
}
@keyframes regionStatusPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

.region-svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.region-shape {
  filter: drop-shadow(0 4px 0 rgba(11, 26, 71, 0.04));
}
.region-shape-back {
  /* sitzt schon im SVG mit transform — hier nur Styling-Hook */
}
.region-islands {
  opacity: 0.85;
}

/* Glow-Halos pulsierend */
.region-glow-halos circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: regionGlowPulse 3.6s ease-in-out infinite;
}
.region-glow-halos circle:nth-child(2) { animation-delay: 0.4s; }
.region-glow-halos circle:nth-child(3) { animation-delay: 0.8s; }
.region-glow-halos circle:nth-child(4) { animation-delay: 1.2s; }
.region-glow-halos circle:nth-child(5) { animation-delay: 1.6s; }
.region-glow-halos circle:nth-child(6) { animation-delay: 2.0s; }

@keyframes regionGlowPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* Wolfsburg Heimat-Ring rotiert leise */
.region-pin-home-ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: regionHomeRingSpin 22s linear infinite;
}
@keyframes regionHomeRingSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .region-glow-halos circle,
  .region-pin-home-ring,
  .region-status-dot { animation: none; }
}

/* Labels mit weißem Outline */
.region-label {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
  fill: var(--green-800, #0C2055);
  letter-spacing: 0.02em;
  paint-order: stroke fill;
  stroke: #FFFFFF;
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.region-label-strong {
  font-size: 14px;
  font-weight: 800;
}
.region-label-sub {
  font-size: 9.5px;
  font-weight: 700;
  fill: #1E4FB0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  paint-order: stroke fill;
  stroke: #FFFFFF;
  stroke-width: 3;
}

/* Kompass */
.region-compass-label {
  font-size: 11px;
  font-weight: 800;
  fill: var(--green-800, #0C2055);
  letter-spacing: 0.1em;
}

/* Maßstabsleiste */
.region-scale-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px;
  fill: rgba(11, 26, 71, 0.55);
  letter-spacing: 0.04em;
}

/* Signatur */
.region-sig-label {
  font-size: 9px;
  font-weight: 800;
  fill: rgba(11, 26, 71, 0.4);
  letter-spacing: 0.18em;
}
.region-sig-sub {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8.5px;
  fill: rgba(11, 26, 71, 0.32);
  letter-spacing: 0.06em;
}

/* ---------- Copy-Spalte ---------- */
.region-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  align-self: stretch;
  justify-content: space-between;
}

/* Stats oben */
.region-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.region-stat {
  background: #FFFFFF;
  border: 1px solid rgba(11, 26, 71, 0.08);
  border-radius: 14px;
  padding: var(--s-3) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 24px -16px rgba(11,26,71,0.18);
}
.region-stat-num {
  font-family: var(--font-display, var(--font-sans));
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--green-800, #0C2055);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
}
.region-stat-num small {
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 2px;
  color: var(--green-600, #1E4FB0);
}
.region-stat-lbl {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-2, #3A4254);
}

/* City-Grid */
.region-cities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
.region-city {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  background: #FFFFFF;
  border: 1px solid rgba(11, 26, 71, 0.06);
  border-radius: 12px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.region-city:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 91, 232, 0.22);
  box-shadow: 0 12px 28px -16px rgba(11, 26, 71, 0.2);
}
.region-city .region-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sun-500, #2E5BE8);
  box-shadow:
    0 0 0 4px rgba(46, 91, 232, 0.15),
    0 0 12px rgba(90, 125, 238, 0.5);
}
.region-city-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.region-city-name {
  font-weight: 700;
  color: var(--ink, #0E1322);
  font-size: 0.95rem;
}
.region-city-sub {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--ink-3, #6A7282);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.region-city--home {
  background: linear-gradient(135deg, #F4F7FE 0%, #FFFFFF 100%);
  border-color: rgba(30, 79, 176, 0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 32px -20px rgba(30, 79, 176, 0.35);
}
.region-city--home .region-dot {
  background: var(--green-800, #0C2055);
  box-shadow:
    0 0 0 5px rgba(46, 91, 232, 0.18),
    0 0 18px rgba(90, 125, 238, 0.75);
}
.region-city--home .region-city-sub {
  color: var(--green-600, #1E4FB0);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Note unten */
.region-note {
  color: var(--ink-2, #3A4254);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid rgba(11, 26, 71, 0.08);
}
.region-note em {
  font-style: italic;
  color: var(--green-800, #0C2055);
  font-weight: 700;
}

@media (max-width: 960px) {
  .region-grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}
@media (max-width: 600px) {
  .region-stats { grid-template-columns: 1fr; }
  .region-cities { grid-template-columns: 1fr; }
  .region-map { padding: var(--s-4); }
}

/* ============================================================
   STATS — Bläuliche Section mit Glas-Cards + Counter-Animation
   ============================================================ */
.stats-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Background + Glow kommen vom .section--cool.section--with-glow Theme */
}
/* Dot-Pattern + Glow: kommen jetzt aus dem .section--cool.section--with-glow Theme */
.stats-section > * { position: relative; z-index: 1; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 24px 60px -24px rgba(11, 29, 69, 0.18),
    0 8px 22px -10px rgba(53, 104, 207, 0.12);
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    translate 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stat.in {
  opacity: 1;
  translate: 0 0;
}
.stat:nth-child(1) { transition-delay: 0ms, 0ms, 0ms, 0ms; }
.stat:nth-child(2) { transition-delay: 110ms, 110ms, 0ms, 0ms; }
.stat:nth-child(3) { transition-delay: 220ms, 220ms, 0ms, 0ms; }
.stat:nth-child(4) { transition-delay: 330ms, 330ms, 0ms, 0ms; }
@media (prefers-reduced-motion: reduce) {
  .stat { opacity: 1; translate: 0 0; transition: none; }
}
.stat:hover {
  /* translate koexistiert mit dem 3D-Tilt transform der .tilt-card-Klasse */
  translate: 0 -6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 32px 70px -22px rgba(11, 29, 69, 0.26),
    0 0 0 1px var(--gold-32);
}

/* Counter-Number Styling */
.stat-num {
  display: inline-block;
  min-width: 0;
}
.stat-num[data-prefix="bis"]::before {
  content: "bis ";
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 0.5em;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-right: 4px;
  vertical-align: top;
}
.stat-val {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.stat-val small { font-size: 0.5em; vertical-align: super; margin-left: 2px; font-weight: 500; }
.stat-val .sun { color: var(--sun-500); }
.stat-val .italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.stat-lbl {
  font: var(--fw-regular) 14px/1.45 var(--font-body);
  color: var(--ink-2);
  max-width: 240px;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: var(--s-12);
  max-width: 760px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0;
}
.section-head h2 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.section-head p {
  font: var(--fw-regular) 15px/1.6 var(--font-body);
  color: var(--ink-2);
  max-width: 600px;
}
.section-head .eyebrow { display: inline-block; }

/* Brightsales-Style: kleines Section-Nummer-Badge oben (überall einsetzbar) */
.section-no {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--sun-500);
  padding: 6px 12px;
  border: 1px solid var(--gold-45);
  border-radius: 999px;
  background: var(--gold-08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -4px;
  align-self: flex-start;
  width: max-content;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.section-no::before {
  content: "✦";
  font-size: 10px;
  opacity: 0.8;
}
.section-no-dark {
  background: var(--gold-12);
  border-color: var(--gold-60);
  color: var(--sun-400);
}
.intro-personal-body .section-no { margin-bottom: 12px; }
.referral-copy .section-no { margin-bottom: 12px; }
.cta-section .section-no { margin-bottom: 12px; }

/* ============================================================
   PROCESS — Clean Timeline (5 Steps)
   ============================================================ */
.timeline {
  position: relative;
  max-width: 760px;
  margin: var(--s-12) auto 0;
}

/* Dicke vertikale Linie — Brightsales-Style */
.timeline-track {
  position: absolute;
  left: 27px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: linear-gradient(180deg,
    rgba(11, 26, 71, 0.10) 0%,
    rgba(11, 26, 71, 0.18) 50%,
    rgba(11, 26, 71, 0.05) 100%);
  border-radius: 3px;
  pointer-events: none;
}
.timeline-glow {
  display: none;
}

/* Steps-Liste */
.timeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.timeline-step {
  position: relative;
  padding-left: 84px;
  min-height: 56px;
}

/* Step-Bubble: groß, prominent, gefüllt — Brightsales-Style */
.step-bubble {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid rgba(11, 26, 71, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3; /* über Progress-Track + Glow */
  box-shadow:
    0 4px 12px rgba(11, 26, 71, 0.06),
    inset 0 -2px 4px rgba(11, 26, 71, 0.04);
  transition:
    background 320ms var(--ease-soft),
    border-color 320ms var(--ease-soft),
    box-shadow 320ms var(--ease-soft),
    transform 320ms var(--ease-soft);
}
.step-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1;
}
.step-bubble-final {
  background: var(--sun-500);
  border-color: var(--sun-500);
  box-shadow:
    0 0 0 6px var(--accent-12),
    0 0 24px var(--accent-45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.10);
}
.step-bubble-final .step-num { color: #fff; }

/* Step-Card: glassiges Panel mit subtilem Border — Brightsales-Card-Feel */
.step-card {
  padding: 18px 22px 20px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.42) 100%);
  border: 1px solid rgba(11, 26, 71, 0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 24px -16px rgba(11, 26, 71, 0.18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    transform 320ms var(--ease-soft),
    border-color 320ms var(--ease-soft),
    box-shadow 320ms var(--ease-soft);
}
.step-tag {
  font: var(--fw-medium) 10.5px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sun-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.step-tag::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.step-card h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 21px;
  line-height: 1.22;
  color: var(--accent);
  margin: 0;
  letter-spacing: -0.01em;
}
.step-card h3 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.step-card p {
  margin: 0;
  font: var(--fw-regular) 14.5px/1.6 var(--font-body);
  color: var(--ink-2);
  max-width: 56ch;
}
.step-meta {
  margin-top: 4px;
  font: var(--fw-medium) 12px/1 var(--font-body);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Hover: Card hebt ab, Bubble pulst — Brightsales-Mentor-Card-Feel */
.timeline-step:hover .step-bubble {
  background: var(--sun-500);
  border-color: var(--sun-500);
  box-shadow:
    0 0 0 5px var(--accent-18),
    0 0 22px var(--accent-32);
  transform: scale(1.06);
}
.timeline-step:hover .step-bubble .step-num {
  /* Bubble wird auf Hover blau gefüllt → Zahl weiß */
  color: #fff;
}
.timeline-step:hover .step-card {
  border-color: var(--gold-32);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 36px -20px rgba(11, 26, 71, 0.25);
}

/* Mobile */
@media (max-width: 640px) {
  .timeline-track { left: 21px; }
  .timeline-step { padding-left: 68px; }
  .step-bubble { width: 44px; height: 44px; }
  .step-num { font-size: 14px; }
  .step-card { padding: 14px 16px 16px; }
  .step-card h3 { font-size: 18px; }
}

/* ============================================================
   LEAD MAGNETS — "Playing card" packages
   ============================================================ */
.magnets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
}
.pkg {
  background: var(--green-600);
  border-radius: var(--r-lg);
  padding: 36px;
  color: var(--on-dark);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  min-height: 460px;
}
.pkg-alt { background: var(--green-800); }
.pkg .frame {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(246, 242, 234, 0.22);
  border-radius: var(--r-md);
  pointer-events: none;
}
.pkg .frame::before, .pkg .frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(246, 242, 234, 0.32);
}
.pkg .frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.pkg .frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.pkg-eyebrow {
  font: var(--fw-medium) 10px/1 var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  z-index: 1;
}
.pkg h3 {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  margin: 0;
  color: var(--on-dark);
  z-index: 1;
}
.pkg h3 .sans {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--fw-medium);
}
.pkg-desc {
  font: var(--fw-regular) 15px/1.55 var(--font-body);
  color: var(--on-dark-2);
  max-width: 320px;
  z-index: 1;
}
.pkg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}
.pkg-list li {
  font: 14px/1.45 var(--font-body);
  color: var(--on-dark-2);
  padding-left: 22px;
  position: relative;
}
.pkg-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sun-400);
  font-weight: 700;
}
.pkg-form {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}
.pkg-form .input { background: rgba(255, 255, 255, 0.95); color: var(--ink); }
.pkg-disclaimer {
  font: 11px/1.4 var(--font-body);
  color: var(--on-dark-3);
  z-index: 1;
}

/* Calculator package */
.calc-form { display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.calc-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Handy: zwei Felder untereinander statt nebeneinander (sonst verrutschen die
   Labels durch unterschiedlichen Umbruch) */
@media (max-width: 640px) {
  .calc-form .row { grid-template-columns: 1fr; gap: 12px; }
}
.calc-form .lbl { color: var(--on-dark-2); }
.calc-form .lbl small {
  font: 10.5px/1 var(--font-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-left: 4px;
}

/* ============================================================
   WIZARD — Step-by-Step Rechner
   ============================================================ */
.calc-wizard { gap: 18px; }

/* Stepper indicator */
.wizard-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  position: relative;
}
.wizard-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  color: var(--on-dark-3);
  font: var(--fw-medium) 10.5px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.wizard-steps li .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.wizard-steps li .lbl { line-height: 1.2; }
.wizard-steps li::after {
  content: "";
  position: absolute;
  top: 4px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.wizard-steps li:last-child::after { display: none; }
.wizard-steps li.is-done .dot { background: var(--sun-500); }
.wizard-steps li.is-done { color: var(--on-dark-2); }
.wizard-steps li.is-active .dot {
  background: var(--sun-500);
  transform: scale(1.4);
  box-shadow: 0 0 0 4px var(--gold-18);
}
.wizard-steps li.is-active { color: var(--sun-400); }

/* Step container — only the active one is shown */
.wizard-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: stepFadeIn 280ms var(--ease-out);
}
.wizard-step[hidden] { display: none; }
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Step header */
.step-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 2px;
}
.step-tag {
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun-400);
}
.step-head h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--on-dark);
}
.step-head h4 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-400);
}
.step-head p {
  font: 14px/1.5 var(--font-body);
  color: var(--on-dark-2);
  margin: 0;
  max-width: 46ch;
}
.step-head p em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--sun-400);
}
.step-hint {
  font: 13px/1.5 var(--font-body);
  color: var(--on-dark-3);
  margin: 0 0 4px;
}
.step-hint em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--on-dark);
}

/* Wizard nav buttons */
.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.wizard-nav .btn { flex: 0 0 auto; }
.wizard-nav .wizard-next { margin-left: auto; }
.wizard-nav .arrow.back { transform: translateX(-2px); }
.wizard-nav-result { justify-content: flex-start; margin-top: 4px; }

/* Choice cards (Heizung step) */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.choice input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color var(--dur-fast);
}
.choice input::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sun-500);
  transform: scale(0);
  transition: transform 200ms var(--ease-out);
}
.choice input:checked::after { transform: scale(1); }
.choice input:checked { border-color: var(--sun-500); }
.choice:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.choice:has(input:checked) {
  border-color: var(--sun-500);
  background: var(--gold-08);
}
.choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 15px;
  color: var(--on-dark);
  letter-spacing: -0.005em;
}
.choice-sub {
  font: 12px/1.3 var(--font-body);
  color: var(--on-dark-3);
}

.heizung-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
  animation: stepFadeIn 240ms var(--ease-out);
}
.heizung-detail[hidden] { display: none; }

/* Result step: result block always visible, no .show toggle needed */
.wizard-step-result .calc-result { display: flex; flex-direction: column; gap: 14px; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .wizard-steps li .lbl { display: none; }
  .wizard-steps { gap: 4px; }
  .wizard-steps li::after { left: calc(50% + 10px); right: calc(-50% + 10px); }
  .step-head h4 { font-size: 22px; }
  .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
  .wizard-nav .wizard-next { margin-left: 0; }
  .wizard-nav .btn { width: 100%; justify-content: center; }
}
.calc-form select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%230B1D45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

/* Stepped blocks inside the calculator */
.calc-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.calc-block:first-of-type {
  border-top: none;
  padding-top: 0;
}
.calc-block-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun-400);
  margin-bottom: 2px;
}
.calc-block-eyebrow .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sun-500);
  color: var(--accent);
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.calc-block-eyebrow em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--on-dark-3);
  margin-left: 2px;
}

/* Collapsible heating block */
.calc-block-collapsible { padding: 0; }
.calc-block-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.calc-block-toggle:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); }
.calc-block-toggle .calc-block-eyebrow { margin: 0; }
.calc-block-toggle .toggle-ic {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  line-height: 1;
  color: var(--sun-400);
  transition: transform 300ms var(--ease-out);
}
.calc-block-toggle[aria-expanded="true"] .toggle-ic { transform: rotate(45deg); }
.calc-block-toggle[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.calc-block-body {
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top: none;
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-block-body[hidden] { display: none; }
.calc-block-hint {
  font: 12.5px/1.5 var(--font-body);
  color: var(--on-dark-3);
  margin: 0 0 4px;
}

/* Results */
.calc-result {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-inverse);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: none;
}
.calc-result.show {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calc-result-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calc-result-group[hidden] { display: none; }
.calc-result-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 6px;
}
.calc-result-head .bar {
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
}
.calc-result-head .bar-sun { background: var(--sun-500); }
.calc-result-head .bar-accent { background: #6E9DFF; }
.calc-result .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font: 14px/1.4 var(--font-body);
  color: var(--on-dark-2);
}
.calc-result .row strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 20px;
  color: var(--sun-400);
}
.calc-result-sum {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 2px;
}
.calc-result-sum .sum-row {
  padding: 4px 0;
  font-size: 15px;
  color: var(--on-dark);
}
.calc-result-sum .sum-row strong {
  font-size: 28px;
  color: var(--sun-500);
  letter-spacing: -0.02em;
}
/* Förderungs-Zeile: zeigt eine subtrahierte Position */
.calc-result .negative-row strong {
  color: #7BD89A; /* grünlich = Vorteil */
}
/* Sum-Trennlinie zwischen Brutto-Posten und Netto-Summe */
.calc-result .sum-line {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.calc-result .sum-line strong {
  color: var(--sun-400);
}
.calc-result .netto-line {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  margin-top: 6px;
}
.calc-result .netto-line strong {
  font-size: 22px;
  color: var(--sun-500);
  letter-spacing: -0.02em;
}

/* Förderungs-Block: eingerückt mit Akzent-Strich */
.foerderung-block {
  margin: 6px 0 4px;
  padding: 10px 12px 8px;
  border-left: 2px solid #7BD89A;
  background: rgba(123, 216, 154, 0.05);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.foerderung-block .sub-heading-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7BD89A;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.foerderung-block .sub-heading-inline small {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--on-dark-3);
}
.foerderung-block .bonus-total {
  color: #7BD89A !important;
  font-size: 18px !important;
}
.foerderung-block .sum-line {
  border-top-color: rgba(123, 216, 154, 0.3);
}

/* Step Sub-Section (Förderung + Finanzierung) */
.step-sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.sub-heading {
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun-400);
}

/* Förderungs-Checkbox-Karten */
.fp-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.fp-check:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.fp-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.fp-check input[type="checkbox"]:checked {
  background: var(--sun-500);
  border-color: var(--sun-500);
}
.fp-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fp-check:has(input:checked) {
  border-color: var(--sun-500);
  background: var(--gold-08);
}
.fp-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.fp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.fp-row strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--on-dark);
}
.fp-row .pct {
  font: var(--fw-medium) 11px/1 var(--font-body);
  color: var(--sun-400);
  letter-spacing: 0.04em;
  padding: 5px 9px;
  background: var(--gold-12);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.fp-body small {
  font: 12px/1.4 var(--font-body);
  color: var(--on-dark-3);
}

/* ----- Hero: Vorher vs Nachher Vergleich ----- */
.calc-hero {
  margin: -2px -2px 8px;
  padding: 18px 18px 16px;
  border-radius: var(--r-md);
  background:
    radial-gradient(140% 100% at 0% 0%, var(--gold-18) 0%, transparent 60%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid var(--gold-24);
  position: relative;
  overflow: hidden;
}
.calc-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.hero-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hero-col .hero-lbl {
  font: var(--fw-medium) 10.5px/1.1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.hero-col strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.hero-col small {
  font: 11px/1.3 var(--font-body);
  color: var(--on-dark-3);
  letter-spacing: 0.02em;
}
.hero-before strong { color: var(--on-dark); opacity: 0.7; text-decoration: line-through; text-decoration-color: rgba(255, 100, 100, 0.5); text-decoration-thickness: 2px; }
.hero-after  strong { color: var(--sun-400); }
.hero-arrow {
  color: var(--sun-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-18);
  flex-shrink: 0;
}
.hero-diff {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--gold-32);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  text-align: center;
  flex-wrap: wrap;
}
.hero-diff .diff-lbl,
.hero-diff .diff-suffix {
  font: var(--fw-medium) 12px/1.2 var(--font-body);
  color: var(--on-dark-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-diff strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(24px, 3.8vw, 34px);
  letter-spacing: -0.02em;
  color: var(--sun-500);
}

/* ----- Energie-Bilanz: Autarkie-Bar ----- */
.calc-result-head .bar-mix { background: linear-gradient(90deg, var(--sun-500), #6E9DFF); }
.calc-result-head .bar-fin { background: #B0C2E8; }
.autarkie-row strong {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.autarkie-row strong small {
  font-size: 0.55em;
  font-weight: var(--fw-medium);
  color: var(--on-dark-2);
  letter-spacing: 0;
}
.autarkie-row small {
  font-size: 11px;
  color: var(--on-dark-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
}
.autarkie-bar {
  position: relative;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 6px;
  overflow: hidden;
}
.autarkie-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--sun-500), var(--sun-400));
  border-radius: 4px;
  transition: width 600ms var(--ease-out);
}

/* small inline label inside row labels */
.calc-result .row span small {
  font: 11px/1.2 var(--font-body);
  color: var(--on-dark-3);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-left: 2px;
}
.calc-result .row strong small {
  font-size: 0.55em;
  font-weight: var(--fw-medium);
  color: var(--on-dark-2);
  letter-spacing: 0;
  margin-left: 1px;
}

/* ----- Lead-CTA-Button im Result ----- */
.calc-cta-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  margin-top: 4px;
  background: var(--sun-500);
  color: var(--accent);
  border-radius: var(--r-md);
  text-decoration: none;
  border: 1px solid var(--sun-400);
  box-shadow: 0 6px 22px var(--gold-18);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.calc-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px var(--gold-32); }
.calc-cta-top {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.calc-cta-bottom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--fw-medium) 12px/1 var(--font-body);
  color: rgba(11, 29, 69, 0.75);
  letter-spacing: 0.04em;
}
.calc-cta-bottom .arrow {
  transition: transform 250ms var(--ease-out);
}
.calc-cta-btn:hover .calc-cta-bottom .arrow { transform: translateX(4px); }

/* Mobile: hero vergleich kompakter */
@media (max-width: 640px) {
  .calc-hero { padding: 14px; }
  .calc-hero-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .hero-arrow { transform: rotate(90deg); margin: 0 auto; width: 30px; height: 30px; }
  .hero-col strong { font-size: 30px; }
  .hero-diff { flex-direction: column; gap: 4px; margin-top: 12px; }
  .hero-diff strong { font-size: 26px; }
}

/* ============================================================
   LIGHT-CARD CONVERSION
   Beratungs-Karten (.pkg / .pkg-alt) und Empfehlungs-Karte
   (.referral-card) auf weißen Hintergrund umstellen.
   Dark-Bg-Tokens werden lokal auf Ink-Werte gemappt, damit alle
   Kind-Elemente (Eyebrows, Listen, Wizard, etc.) automatisch
   passende Lesefarben bekommen.
   ============================================================ */

.pkg,
.pkg-alt,
.referral-card {
  /* lokale Token-Überschreibung */
  --on-dark:    var(--ink);
  --on-dark-2:  var(--ink-2);
  --on-dark-3:  var(--ink-3);
  --border-inverse: rgba(11, 26, 71, 0.10);

  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid rgba(11, 26, 71, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 60px -24px rgba(11, 26, 71, 0.18);
}

/* Kleine Variation zwischen den beiden Beratungs-Karten — Rechner bekommt
   einen Hauch Cool-Tint, damit sie sich nebeneinander unterscheiden. */
.pkg-alt {
  background: #F7F9FD;
}

/* Frame-Ecken auf hell */
.pkg .frame { border-color: rgba(11, 26, 71, 0.08); }
.pkg .frame::before,
.pkg .frame::after { border-color: rgba(11, 26, 71, 0.18); }

/* Inputs auf hell — sichtbare Border statt nur Background-Kontrast */
.pkg .input,
.pkg-alt .input,
.pkg-form .input,
.calc-form .input {
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid rgba(11, 26, 71, 0.14);
}
.pkg .input:focus,
.pkg-alt .input:focus,
.calc-form .input:focus {
  border-color: var(--sun-500);
  outline: none;
}

/* Wizard-Steps: weiße-Alpha-Werte → dunkle-Alpha-Werte */
.pkg .wizard-steps li .dot { background: rgba(11, 26, 71, 0.10); }
.pkg .wizard-steps li::after { background: rgba(11, 26, 71, 0.08); }

/* Choice-Cards (Heizungs-Step) */
.pkg .choice {
  border-color: rgba(11, 26, 71, 0.12);
  background: rgba(11, 26, 71, 0.02);
}
.pkg .choice:hover {
  border-color: rgba(11, 26, 71, 0.22);
  background: rgba(11, 26, 71, 0.04);
}
.pkg .choice input { border-color: rgba(11, 26, 71, 0.28); }
.pkg .heizung-detail { border-top-color: rgba(11, 26, 71, 0.12); }

/* Calc-Blocks Trennlinien + Toggle-Border */
.pkg .calc-block { border-top-color: rgba(11, 26, 71, 0.08); }
.pkg .calc-block-toggle {
  border-color: rgba(11, 26, 71, 0.12);
}
.pkg .calc-block-toggle:hover {
  border-color: rgba(11, 26, 71, 0.22);
  background: rgba(11, 26, 71, 0.03);
}
.pkg .calc-block-body { border-color: rgba(11, 26, 71, 0.12); }

/* Result-Box */
.pkg .calc-result {
  background: rgba(11, 26, 71, 0.03);
  border-color: rgba(11, 26, 71, 0.10);
}

/* Eyebrow & Akzente: helleres Blau (sun-400) ist auf Weiß zu schwach
   → in den Karten alle Akzent-Stellen auf brand-blau (sun-500). */
.pkg .pkg-eyebrow,
.pkg .step-tag,
.pkg .calc-block-eyebrow,
.pkg .calc-block-eyebrow em,
.pkg .wizard-steps li.is-active,
.pkg .calc-block-toggle .toggle-ic,
.referral-card .card-eyebrow,
.referral-card .card-amount small,
.referral-card .card-amount strong,
.referral-card .card-foot em,
.referral-card .card-list .check {
  color: var(--sun-500);
}

/* Check-Häkchen in .pkg-list bekommt auch Brand-Blau (war sun-400 gold-warmth) */
.pkg .pkg-list li::before { color: var(--sun-500); }

/* === Referral-Card Glow auf hell === */
.referral-card::before {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(46, 91, 232, 0.10) 0%, transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(46, 91, 232, 0.06) 0%, transparent 70%);
}
.card-corner { border-color: rgba(46, 91, 232, 0.55); }
.referral-card .card-foot { border-top-color: rgba(11, 26, 71, 0.10); }
.referral-card .card-list li { color: var(--ink); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.about-image {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-body h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 20px;
}
.about-body h2 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.about-body p {
  font: var(--fw-regular) 17px/1.6 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 14px;
}
.about-signature {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line-cool);
}
.about-signature .name {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
  line-height: 1.1;
}
.about-signature .role {
  font: 13px/1.3 var(--font-body);
  color: var(--ink-3);
  margin-top: 2px;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
}
.q-card {
  background: var(--paper);
  border: 1px solid var(--line-cool);
  border-radius: var(--r-xl);
  padding: 32px;
}
.q-card .qt {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  color: var(--accent);
  margin: 0 0 22px;
}
.q-card .qt::before {
  content: "\201C";
  display: inline;
  margin-right: 2px;
}
.q-card .qt::after {
  content: "\201D";
  display: inline;
  margin-left: 2px;
}
.q-card-meta { display: flex; align-items: center; gap: 14px; }
.q-card-meta .av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cream-2);
  flex-shrink: 0;
}
.q-card-meta .nm {
  font: var(--fw-semibold) 14px/1.2 var(--font-body);
  color: var(--ink);
}
.q-card-meta .rl {
  font: 12px/1.3 var(--font-body);
  color: var(--ink-3);
  margin-top: 2px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}
.faq-item {
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 30px -16px rgba(11, 29, 69, 0.12);
  transition: border-color var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft),
              transform var(--dur) var(--ease-soft);
}
.faq-item:hover {
  border-color: var(--gold-45);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 20px 40px -16px rgba(11, 29, 69, 0.18);
}
.faq-item[open] {
  border-color: var(--gold-60);
  background: rgba(255, 251, 243, 0.7);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 18px;
  color: var(--accent);
  line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
  font-size: 18px;
  line-height: 1;
}
.faq-item[open] .toggle {
  transform: rotate(45deg);
  background: var(--green-50);
}
.faq-item .body {
  padding: 0 26px 24px;
  font: 16px/1.6 var(--font-body);
  color: var(--ink-2);
}

/* ============================================================
   CTA SECTION (dark)
   ============================================================ */
.cta-section {
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
  /* Background kommt vom .section--deep Theme */
}
.cta-section h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  margin: 0 0 16px;
  max-width: 820px;
}
.cta-section h2 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.cta-section p {
  font: 18px/1.6 var(--font-body);
  color: var(--on-dark-2);
  max-width: 560px;
  margin: 0 0 32px;
}
.cta-section .hero-ctas { gap: 14px; }
.cta-section .btn-ghost-dark { color: var(--on-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site-footer {
  background: var(--bg-deep-2);
  color: var(--on-dark-2);
  padding: var(--s-16) 0 var(--s-8);
  position: relative;
  overflow: hidden;
}
/* Soft glow from above — fließt visuell aus der CTA-Section */
footer.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--blue-32) 50%, transparent 100%);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-10);
  margin-bottom: var(--s-12);
}
.footer-grid h5 {
  font: var(--fw-medium) 12px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin: 0 0 16px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
/* auch Nicht-Link-Einträge (z. B. „Sitz …") gleiche Größe/Farbe wie die Links */
.footer-grid li { font: 14px/1.4 var(--font-body); color: var(--on-dark-2); }
.footer-grid a {
  color: var(--on-dark-2);
  text-decoration: none;
  font: 14px/1.4 var(--font-body);
}
.footer-grid a:hover { color: var(--on-dark); }
.footer-brand-blurb {
  font: 14px/1.6 var(--font-body);
  color: var(--on-dark-2);
  margin: 14px 0 0;
  max-width: 320px;
}
.footer-bottom {
  border-top: 1px solid var(--border-inverse);
  padding-top: var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 12px/1.4 var(--font-body);
  color: var(--on-dark-3);
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   SCRIBBLE DIVIDER
   ============================================================ */
.scribble-divider {
  height: 26px;
  background: url("../assets/divider-scribble.png") center/auto 100% no-repeat;
  opacity: 0.5;
  margin: 12px 0 24px;
}

/* ============================================================
   ANIMATION — fade + slide up on scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   TOAST (form feedback)
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--green-800);
  color: var(--on-dark);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font: var(--fw-medium) 14px/1 var(--font-body);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun-400); }
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 0.85fr; gap: var(--s-8); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-10); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:nth-child(4) { display: none; }
}

@media (max-width: 820px) {
  section { padding: var(--s-16) 0; }
  .hero { padding: var(--s-12) 0 var(--s-16); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .hero-portrait { max-width: 460px; margin: 0 auto; }
  .process-grid { grid-template-columns: 1fr; }
  .magnets-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 20px 24px;
    border-bottom: 1px solid var(--line-cool);
  }
  .nav-cta .nav-cta-btn { display: none; }
  .trustbar-inner { justify-content: flex-start; }
  .hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .stat-val { font-size: 48px; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; gap: var(--s-8); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .pkg { padding: 28px 22px; }
  .pkg h3 { font-size: 32px; }
  .q-card { padding: 24px; }
  .q-card .qt { font-size: 20px; }
}

/* ============================================================
   MOBILE FINE-TUNING (≤540px) — tighter hero, trust row,
   form inputs, sticky bar safe-area, comfortable tap targets
   ============================================================ */
@media (max-width: 540px) {
  /* iOS: prevent zoom on input focus (font-size ≥ 16px) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Section padding noch etwas knapper, damit weniger Scrollen */
  section { padding: 56px 0; }

  /* Hero: tighter spacing, klarere Hierarchie auf 375px */
  .hero { padding: 28px 0 56px; }
  .hero-grid { gap: 28px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; }
  .hero .hero-lead, .hero p { font-size: 16px; line-height: 1.55; }
  .hero-ctas { gap: 10px; margin-top: 22px; }
  .hero-ctas .btn { width: 100%; padding-block: 14px; font-size: 15px; }
  .hero-ctas .btn-lg { padding-block: 16px; }

  /* Hero-Portrait (YouTube + Badge) auf Mobile schmaler & ohne grossen Schatten */
  .hero-portrait.hero-portrait-yt { max-width: 100%; border-radius: 14px; }
  .hero-portrait iframe.hero-yt { border-radius: 14px; }

  /* Trust-V3: gestapelt statt nebeneinander auf Mobile, gleiche Optik */
  .hero-trust.hero-trust-v3 {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 22px;
    gap: 8px !important;
  }
  .hero-trust-v3 .trust-item {
    padding: 0;
    border-left: 0;
    min-height: 0;
  }
  .hero-trust-v3 .trust-num { font-size: 17px; }

  /* Intro-Personal: Bild-Karte etwas grösser, Badge kompakter */
  .intro-portrait-card .badge {
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 10px 12px;
  }
  .intro-portrait-card .badge .monogram { width: 38px; height: 38px; font-size: 14px; }
  .intro-portrait-card .badge .name-row { font-size: 14px; }
  .intro-portrait-card .badge small { font-size: 11px; }

  /* Buttons in Mobile: minTap 44px, gut greifbar */
  .btn { min-height: 44px; }
  .btn-lg { min-height: 50px; }

  /* Sticky-CTA-Bar mit Safe-Area für iPhone-Notch */
  .mobile-cta-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Karten/Cards (Stats, FAQ, Region) etwas knappere Polsterung */
  .stat-card, .accordion-item, .region-card { padding: 18px 18px; }

  /* Showcase-Galerie: ein Bild pro Reihe, leichter zu scrollen */
  .showcase-grid { grid-template-columns: 1fr !important; gap: 14px; }

  /* Timeline-Marker („01", „02", …) immer sichtbar zentriert */
  .timeline-step .step-num,
  .timeline .step-num { flex-shrink: 0; }

  /* Form-Felder: grosser Tap-Bereich */
  input[type=text], input[type=email], input[type=tel], input[type=number], textarea, select {
    padding: 14px 14px;
    border-radius: 10px;
  }

  /* WhatsApp FAB nicht zu nah am Sticky-Bar */
  .fab-whatsapp { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Blog-Cards: dichter zusammen */
  .blog-grid { grid-template-columns: 1fr !important; gap: 18px; }
}

/* Extra tight für iPhone SE (≤380px) — vermeidet Overflow */
@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .hero-trust-v3 .trust-num { font-size: 16px; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   MARQUEE — horizontal flow ticker (timkrasenbrink-style)
   ============================================================ */
.marquee {
  background: linear-gradient(180deg, var(--bg-paper) 0%, var(--bg-mist) 100%);
  border-top: 1px solid rgba(11, 26, 71, 0.06);
  border-bottom: 1px solid rgba(11, 26, 71, 0.06);
  overflow: hidden;
  padding: 22px 0;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg-paper), rgba(253,253,253,0)); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--bg-mist),  rgba(244,247,252,0)); }

.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: marqueeFlow 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.marquee-item.italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}
.marquee-sep {
  font-size: 18px;
  color: var(--sun-500);
  opacity: 0.7;
}
@keyframes marqueeFlow {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* ============================================================
   REVEAL — word-by-word headline animation
   ============================================================ */
.reveal-words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* keep natural word spacing */
}
.reveal-words .word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 720ms var(--ease-out);
  will-change: transform;
}
.reveal-words.in .word-inner { transform: translateY(0); }

/* Underline scribble draws in once visible */
.sig-underline::after { transition: clip-path 700ms var(--ease-out) 200ms; clip-path: inset(0 100% 0 0); }
.sig-underline.in::after { clip-path: inset(0 0 0 0); }

/* ============================================================
   PARALLAX — hero portrait gets nudged by JS via --py
   ============================================================ */
.parallax-portrait { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); transition: transform 80ms linear; }

/* ============================================================
   CLIP-REVEAL — image clip-path slide-in (timkrasenbrink-style)
   ============================================================ */
.clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms var(--ease-out);
}
.clip-reveal.in { clip-path: inset(0 0 0 0); }

/* ============================================================
   PORTRAIT PLACEHOLDER — sehr subtiler Fallback, fällt nicht auf
   ============================================================ */
.portrait-placeholder {
  position: absolute;
  inset: 0;
  display: none; /* via onerror auf 'flex' gesetzt */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: var(--cream);
  border-radius: var(--r-xl);
  color: var(--ink-3);
  z-index: 1;
}
.portrait-placeholder .placeholder-icon {
  color: var(--sun-500);
  opacity: 0.55;
  width: 28px;
  height: 28px;
}
.portrait-placeholder strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: -0.005em;
  opacity: 0.7;
}
.portrait-placeholder span {
  font: 11px/1.4 var(--font-body);
  color: var(--ink-3);
  opacity: 0.65;
}
.portrait-placeholder code {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--accent);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-top: 2px;
}

/* Hero-Portrait braucht relative für absoluten Platzhalter */
.hero-portrait { position: relative; }

/* ============================================================
   PERSONAL INTRO — IEE Brand (heller Cream-Blau-Tint, dunkler Text)
   ============================================================ */
.intro-personal {
  position: relative;
  color: var(--accent);
  overflow: hidden;
  isolation: isolate;
  /* Background kommt vom .section--mist Theme */
}
.intro-personal > * { position: relative; z-index: 1; }

/* Eck-Ornamente "G" — Buchstaben-Marken in 2 Ecken */
.intro-corner {
  position: absolute;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
  z-index: 2;
  pointer-events: none;
}
.intro-corner-tl { top: 56px; left: max(40px, calc((100vw - 1180px) / 2 + 320px)); }
.intro-corner-br { bottom: 56px; left: max(40px, calc((100vw - 1180px) / 2 + 320px)); top: auto; transform: translateY(0); }

@media (max-width: 1200px) {
  .intro-corner-tl, .intro-corner-br { left: 40px; }
}
@media (max-width: 720px) {
  .intro-corner { font-size: 44px; }
  .intro-corner-tl { top: 32px; left: 28px; }
  .intro-corner-br { bottom: 32px; left: auto; right: 28px; }
}

.intro-personal-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s-12);
  align-items: center;
}

/* ============================================================
   INTRO-FIGURES — 3 Milchglas-Karten
   ============================================================ */
.intro-figures {
  position: relative;
  margin-top: var(--s-12);
  background: transparent;
}

.intro-figures-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Milchglas-Karte */
.intro-figure {
  position: relative;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 18px;

  /* Milchglas / Frosted glass */
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(214, 225, 252, 0.32) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(11, 26, 71, 0.04),
    0 18px 40px -20px rgba(11, 26, 71, 0.18),
    0 4px 14px -6px rgba(11, 26, 71, 0.08);

  /* Reveal-Stagger */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 350ms ease;
  transition-delay: calc(var(--fig-delay, 0ms) + 250ms);
}
.intro-figures.in .intro-figure { opacity: 1; transform: none; }

/* Subtiler Glanz-Highlight oben links */
.intro-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(46, 91, 232, 0.10) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.intro-figure:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 0 0 1px rgba(11, 26, 71, 0.04),
    0 28px 56px -22px rgba(11, 26, 71, 0.22),
    0 6px 18px -6px rgba(11, 26, 71, 0.10);
}

/* Die Zahl — ruhige editorial-Größe */
.intro-figure-num {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display, var(--font-sans));
  font-weight: 600;
  font-size: clamp(44px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #6AA0FF;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.intro-figure-numtxt { color: inherit; }
.intro-figure-num sup {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-left: 4px;
  top: -0.55em;
  color: inherit;
}

/* Label — bold display, ruhig */
.intro-figure-label {
  display: block;
  font-family: var(--font-display, var(--font-sans));
  font-size: 15px;
  font-weight: 600;
  color: var(--ed-ink, #0B1A47);
  letter-spacing: -0.005em;
  margin-top: 4px;
}

/* Beschreibung */
.intro-figure-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ed-ink-body, #3A4254);
  max-width: 28ch;
}
.intro-figure-desc em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-zion, #0038B8);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .intro-figures::before,
  .intro-figure {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .intro-figures::before { transform: scaleX(1) !important; }
}

/* Mobile — kompakte, saubere Karten (gestapelt, ausgewogener Innenabstand) */
@media (max-width: 720px) {
  .intro-figures-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .intro-figure {
    padding: 18px 20px;
    gap: 6px;
    border-radius: 14px;
  }
  .intro-figure-num { font-size: 38px; }
  .intro-figure-label { margin-top: 2px; }
  .intro-figure-desc { max-width: 100%; }
}

/* Portrait Card mit notched corners */
.intro-portrait-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: #061334;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 50px -28px rgba(11, 26, 71, 0.30),
    0 8px 20px -12px rgba(11, 26, 71, 0.18);
}
.intro-portrait-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Notch-Cutouts entfernt — wirkten visuell wie „Bucks" am Portrait. */
.portrait-notch { display: none !important; }

/* Body / Story */
.intro-personal-body { max-width: 580px; }
.intro-tag {
  display: inline-block;
  font: var(--fw-medium) 11px/1.4 var(--font-body);
  letter-spacing: 0.12em;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(11, 29, 69, 0.12);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.intro-h {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 28px;
}
.intro-h em {
  display: block;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.intro-personal-body p {
  font: 15px/1.7 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 56ch;
}
.intro-personal-body p em {
  font-family: var(--font-italic);
  font-style: italic;
  /* Serifen-Kursive wirkt bei gleicher px-Größe kleiner — leicht hochskalieren,
     damit sie optisch gleich groß wie der Fließtext ist */
  font-size: 1.1em;
  color: var(--sun-500);
}

/* Mini-Quote mit Karten-Icon */
.intro-quote-mini {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 32px 0 36px;
  padding: 0;
}
.intro-quote-mini .quote-icon {
  flex-shrink: 0;
  width: 36px;
  height: 44px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--sun-500);
  padding-top: 4px;
}
.intro-quote-mini p {
  margin: 0;
  font: var(--fw-regular) 15px/1.6 var(--font-body);
  color: var(--accent);
  max-width: none;
}

/* Signatur — handgeschrieben (SVG) */
.intro-signature {
  margin-top: 12px;
  max-width: 280px;
  opacity: 0.95;
}
.intro-signature svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Dunkler Placeholder (wenn intro-portrait.jpg fehlt) */
.portrait-placeholder-dark {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: #061334;
  color: rgba(255, 251, 243, 0.55);
  z-index: 2;
}
.portrait-placeholder-dark svg { color: var(--sun-400); opacity: 0.65; }
.portrait-placeholder-dark strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 14px;
  color: rgba(255, 251, 243, 0.85);
}
.portrait-placeholder-dark span {
  font: 11px/1.4 var(--font-body);
  color: rgba(255, 251, 243, 0.55);
}
.portrait-placeholder-dark code {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255, 251, 243, 0.85);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-top: 2px;
}

@media (max-width: 900px) {
  .intro-personal-grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .intro-portrait-card { max-width: 420px; margin: 0 auto; }
  .intro-personal-body { max-width: none; margin: 0 auto; }
}

/* Legacy: alte intro-section bleibt für andere refs ungenutzt */
.intro-section {
  padding: var(--s-20) 0;
  background: var(--paper);
  position: relative;
}
.intro-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--s-10);
  align-items: center;
}
.intro-body { text-align: left; }
.intro-body > .eyebrow,
.intro-body > .eyebrow-ornament { display: inline-block; }

/* Portrait mit Frame + Corner-Markern */
.intro-portrait {
  position: relative;
  padding: 0;
}
.portrait-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream);
  box-shadow: 0 40px 80px -40px rgba(11, 29, 69, 0.3);
  isolation: isolate;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms var(--ease-out);
}
.intro-portrait:hover .portrait-frame img { transform: scale(1.03); }

.portrait-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: rgba(11, 29, 69, 0.85);
  backdrop-filter: blur(8px);
  color: var(--sun-400);
  font: var(--fw-medium) 11.5px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--gold-18);
}

.portrait-corner {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--sun-500);
  pointer-events: none;
}
.portrait-corner-tl {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
}
.portrait-corner-br {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
}

/* Body */
.intro-body h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 12px 0 16px;
  max-width: 22ch;
}
.intro-body h2 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.intro-body p {
  font: 14.5px/1.55 var(--font-body);
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 0 14px;
}
.intro-lead { font-size: 15.5px; }
.intro-lead strong { color: var(--accent); font-weight: var(--fw-medium); }
.intro-body p em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--accent);
}

/* Stats-Reihe */
.intro-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--line-cool);
  border-bottom: 1px solid var(--line-cool);
}
.intro-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intro-stat strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--sun-500);
}
.intro-stat span {
  font: 12.5px/1.4 var(--font-body);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.intro-stat span em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--accent);
}

/* Quote-Block */
.intro-quote {
  position: relative;
  margin: 0 0 28px;
  padding: 22px 24px 22px 64px;
  background: linear-gradient(135deg, var(--gold-08), var(--gold-04));
  border-left: 3px solid var(--sun-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.intro-quote .quote-mark {
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: var(--font-italic);
  font-size: 80px;
  line-height: 1;
  color: var(--sun-500);
  opacity: 0.5;
}
.intro-quote p {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.4;
  color: var(--accent);
  margin: 0 0 12px;
  max-width: none;
}
.quote-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quote-attribution strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 14px;
  color: var(--accent);
}
.quote-attribution span {
  font: 12px/1.3 var(--font-body);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.intro-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 960px) {
  .intro-grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .intro-portrait { max-width: 480px; margin: 0 auto; }
  .intro-stats { grid-template-columns: repeat(2, 1fr); }
  .intro-body h2 { max-width: none; }
}

/* ============================================================
   REFERRAL PAGE — Unterseite empfehlung.html
   ============================================================ */
.page-referral { background: var(--paper); }
.referral-hero {
  padding: var(--s-20) 0;
  background: var(--cream);
}
.referral-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-12);
  align-items: center;
}
.referral-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--accent);
  margin: 16px 0 22px;
}
.referral-hero h1 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.referral-hero h1 .sun { color: var(--sun-500); }
.referral-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  font: var(--fw-medium) 13px/1 var(--font-body);
  color: var(--ink-2);
}
.referral-hero-meta .check { color: var(--sun-500); font-weight: var(--fw-medium); margin-right: 6px; }

/* Form Section */
.referral-form-section { padding: var(--s-20) 0; }
.referral-form-wrap {
  max-width: 760px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: var(--r-xl);
  padding: 44px 44px 40px;
  border: 1px solid var(--line-cool);
  box-shadow: 0 40px 100px -50px rgba(11, 29, 69, 0.18);
}
.referral-form-wrap .section-head { text-align: left; }
.referral-form-wrap .section-head h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  margin-bottom: 10px;
}

.referral-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 28px;
}
.referral-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.referral-form legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--accent);
  margin-bottom: 4px;
  padding: 0;
}
.referral-form legend em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-3);
}
.referral-form legend .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sun-500);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 14px;
}
.referral-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.referral-form .lbl small {
  font: 10.5px/1 var(--font-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-left: 4px;
}
.referral-form .input {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.referral-form .input:focus {
  border-color: var(--sun-500);
  box-shadow: 0 0 0 3px var(--gold-18);
}
.referral-form textarea.input {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-body);
}
.referral-form .form-hint {
  font: 12.5px/1.45 var(--font-body);
  color: var(--ink-3);
  margin: 4px 0 0;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font: 13.5px/1.5 var(--font-body);
  color: var(--ink-2);
}
.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  cursor: pointer;
}
.consent input[type="checkbox"]:checked {
  background: var(--sun-500);
  border-color: var(--sun-500);
}
.consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-foot {
  font: 12px/1.5 var(--font-body);
  color: var(--ink-3);
  text-align: center;
  margin: 4px 0 0;
}
.form-foot a {
  color: var(--sun-500);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .referral-hero-grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .referral-form-wrap { padding: 28px 22px 24px; }
  .referral-form .row { grid-template-columns: 1fr; }
}

/* ============================================================
   REFERRAL — Empfehlungsprämie-Section
   ============================================================ */
.referral-section {
  position: relative;
  overflow: hidden;
  /* Background kommt vom .section--cool Theme */
}
.referral-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-12);
  align-items: center;
}
.referral-copy h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 12px 0 16px;
}
.referral-copy h2 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.referral-copy > p {
  font: 14.5px/1.55 var(--font-body);
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: 28px;
}
.referral-copy > p strong {
  color: var(--ed-ink);
  background: none;
  padding: 0;
  font-weight: 600;
}

.referral-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.referral-steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.referral-steps .step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--sun-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 16px;
}
.referral-steps li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.referral-steps strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 17px;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.referral-steps strong em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--sun-500);
}
.referral-steps span {
  font: 14px/1.45 var(--font-body);
  color: var(--ink-3);
}
.referral-ctas {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
.referral-ctas .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .referral-ctas { flex-wrap: wrap; }
}

/* Prämien-Karte rechts — WEISSE Variante */
.referral-card {
  position: relative;
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid rgba(11, 26, 71, 0.08);
  border-radius: var(--r-xl);
  padding: 38px 32px 30px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 28px 70px -28px rgba(11, 26, 71, 0.22);
  overflow: hidden;
  isolation: isolate;
}
.referral-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(46, 91, 232, 0.10) 0%, transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(46, 91, 232, 0.06) 0%, transparent 70%);
  z-index: -1;
}
.card-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(46, 91, 232, 0.55);
}
.card-corner-tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.card-corner-br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

.referral-card .card-eyebrow {
  display: block;
  text-align: center;
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sun-500);
  margin-bottom: 22px;
}
.card-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.card-amount small {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 36px;
  color: var(--sun-500);
  line-height: 1;
}
.card-amount strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(80px, 11vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--sun-500);
}
.card-amount span {
  flex-basis: 100%;
  text-align: center;
  font: var(--fw-medium) 12px/1.3 var(--font-body);
  color: var(--ink-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
}

.referral-card .card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.referral-card .card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 14px/1.4 var(--font-body);
  color: var(--ink);
}
.referral-card .card-list .check {
  color: var(--sun-500);
  font-weight: var(--fw-medium);
  flex-shrink: 0;
  margin-top: 2px;
}
.referral-card .card-foot {
  font: 13px/1.5 var(--font-body);
  color: var(--ink-2);
  padding-top: 16px;
  border-top: 1px solid rgba(11, 26, 71, 0.10);
  margin: 0;
}
.referral-card .card-foot em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--sun-500);
}

@media (max-width: 900px) {
  .referral-grid { grid-template-columns: 1fr; gap: var(--s-10); }
  .referral-card { padding: 30px 24px 24px; }
}

/* ============================================================
   SHOWCASE — Anlagen-Carousel (full-bleed scroll-snap)
   ============================================================ */
.showcase-section { padding: var(--s-20) 0; }
.showcase {
  position: relative;
  margin: var(--s-10) 0 var(--s-12);
}

/* ============================================================
   SHOWCASE — Inline-Video in einem Slide (native HTML5-Controls)
   ============================================================ */
.showcase-photo--video {
  position: relative;
  background: #0B1A47;
}
/* Vignette unter dem Video unterdrücken, damit native Controls anklickbar bleiben */
.showcase-photo--video::after { display: none; }
.showcase-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0B1A47;
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Photo-Meta und Slide-Nummer ÜBER dem Video, aber nicht klickblockierend */
.showcase-photo--video .photo-meta,
.showcase-photo--video .slide-number {
  z-index: 2;
  pointer-events: none;
}

/* Top progress bar — fills as user moves through slides */
.showcase-progress {
  position: relative;
  height: 2px;
  background: var(--line-cool);
  max-width: var(--container-wide);
  margin: 0 auto var(--s-8);
  border-radius: 2px;
  overflow: hidden;
}
.showcase-progress > span {
  display: block;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--sun-400), var(--sun-500));
  border-radius: 2px;
  transition: width 500ms var(--ease-out);
}

/* Swipe hint — fades out after first interaction */
.showcase-swipe-hint {
  position: absolute;
  top: 18px;
  right: max(var(--gutter), 24px);
  z-index: 3;
  background: rgba(11, 29, 69, 0.06);
  border: 1px solid var(--line-cool);
  color: var(--ink-3);
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  pointer-events: none;
  opacity: 1;
  transition: opacity 400ms var(--ease-soft), transform 400ms var(--ease-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.showcase-swipe-hint .hand { font-size: 14px; animation: hintPulse 1.8s ease-in-out infinite; }
@keyframes hintPulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}
.showcase.hint-hide .showcase-swipe-hint { opacity: 0; transform: translateY(-4px); }

.showcase-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0;
}
.showcase-track::-webkit-scrollbar { display: none; }
.showcase-track:focus { outline: none; }
.showcase-track:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 4px; border-radius: 4px; }

.showcase-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: 0.45;
  transition: opacity 500ms var(--ease-out);
}
.showcase-slide.is-active { opacity: 1; }
.showcase-grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-12);
  align-items: stretch;
  min-height: 460px;
}
.showcase-photo {
  position: relative;
  aspect-ratio: auto; /* Desktop: keine feste Form -> füllt die Kartenhöhe (Mobile setzt 4/3 per Media-Query) */
  height: 100%;       /* gleich hoch wie die Inhalts-Karte -> bündig */
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow-md);
}
.showcase-photo::after {
  /* subtle vignette to anchor floating labels */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,29,69,0.18) 0%, rgba(11,29,69,0) 35%, rgba(11,29,69,0) 65%, rgba(11,29,69,0.22) 100%);
  pointer-events: none;
}
.showcase-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1200ms var(--ease-out);
}
.showcase-slide.is-active .showcase-photo img { transform: scale(1); }
.showcase-photo .photo-meta {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
}
.photo-tag {
  display: inline-block;
  background: rgba(11, 26, 71, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  box-shadow: 0 6px 18px -8px rgba(11, 29, 69, 0.35);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Big translucent slide-number in the photo corner */
.slide-number {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.32);
  text-shadow: 0 2px 18px rgba(11, 29, 69, 0.35);
  pointer-events: none;
}

.showcase-body {
  /* eigene Karte (wie das Foto links) — füllt den Slide, wirkt nicht leer */
  padding: clamp(28px, 3vw, 46px);
  background: linear-gradient(165deg, #FFFFFF 0%, var(--cream) 100%);
  border: 1px solid var(--line-cool);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.showcase-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.showcase-eyebrow {
  display: inline-block;
  font: var(--fw-medium) 12px/1 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sun-500);
}
.showcase-rating {
  color: var(--sun-500);
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
}
.showcase-tag-pill {
  display: inline-block;
  background: var(--green-50, rgba(40, 87, 60, 0.08));
  color: var(--accent);
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-cool);
}
.showcase-quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(23px, 2.7vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 0 0 24px;
  text-wrap: balance;
}
.showcase-quote em {
  /* bleibt im selben Kursiv-Schnitt — nur farblich betont, damit der Satz
     „rund" fließt statt mit einem Schrift-/Stilbruch zu stolpern */
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.showcase-quote::before { content: "\201C"; margin-right: 2px; opacity: 0.7; }
.showcase-quote::after { content: "\201D"; margin-left: 2px; opacity: 0.7; }

.showcase-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 28px;
  padding-left: 14px;
  border-left: 2px solid var(--sun-500);
}
.showcase-attribution strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 15px;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.showcase-attribution span {
  font: 12.5px/1.3 var(--font-body);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.showcase-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line-cool);
}
.showcase-facts div { display: flex; flex-direction: column; gap: 6px; }
.showcase-facts strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.showcase-facts strong small {
  font-size: 0.55em;
  font-weight: var(--fw-medium);
  color: var(--ink-2, var(--ink-3));
  letter-spacing: 0;
  margin-left: 1px;
}
.showcase-facts span {
  font: 11px/1.3 var(--font-body);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Carousel controls — new layout: arrows+play left, dots center, counter right */
.showcase-controls {
  margin-top: var(--s-10);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.showcase-controls-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.showcase-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-cool);
  background: var(--paper);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.showcase-arrow:hover { background: var(--accent); color: var(--on-dark); border-color: var(--accent); transform: translateY(-1px); }
.showcase-arrow:active { transform: translateY(0); }
.showcase-arrow:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.showcase-dots {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.showcase-dots .dot {
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast), width var(--dur-fast), transform var(--dur-fast);
}
.showcase-dots .dot:hover { background: var(--green-200); }
.showcase-dots .dot.is-active { background: var(--sun-500); width: 44px; }
.showcase-counter {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.showcase-counter #showcaseIdx { color: var(--accent); font-weight: var(--fw-medium); }
.showcase-counter .sep { opacity: 0.4; margin: 0 4px; }

/* ============================================================
   MOSAIC — placeholder grid for more installation photos
   ============================================================ */
.mosaic-head { margin-bottom: var(--s-8); max-width: 720px; }
.mosaic-head h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 12px 0 10px;
}
.mosaic-head h3 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.mosaic-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream);
  display: block;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
.mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 900ms var(--ease-out);
}
.mosaic-tile:hover img,
.mosaic-tile:focus-visible img { transform: scale(1.08); }

.mosaic-tile:focus-visible { outline: 2px solid var(--sun-500); outline-offset: 3px; }

/* Permanent gradient floor for legibility, deepens on hover */
.mosaic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.45) 78%, rgba(0,0,0,0.78) 100%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  opacity: 1;
  transition: opacity 300ms var(--ease-soft);
}
.mosaic-tile:hover .mosaic-overlay { opacity: 1; }

.mosaic-label {
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.1;
  transform: translateY(2px);
  transition: transform 300ms var(--ease-soft);
}
.mosaic-tile:hover .mosaic-label { transform: translateY(0); }
.mosaic-label em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}
.mosaic-label span {
  font: var(--fw-medium) 12px/1.2 var(--font-body);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Floating kWp badge top-right */
.mosaic-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 12px;
  border-radius: var(--r-md, 10px);
  background: var(--sun-500);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  line-height: 1;
}
.mosaic-badge strong {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.mosaic-badge strong small {
  font-size: 0.6em;
  margin-left: 1px;
}
.mosaic-badge small {
  font: var(--fw-medium) 9px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.92;
}
.mosaic-badge-alt {
  background: var(--accent);
  color: var(--on-dark);
}

.mosaic-add {
  background: var(--cream);
  border: 1.5px dashed var(--green-200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.mosaic-add:hover {
  background: var(--paper);
  border-color: var(--sun-500);
}
.mosaic-add-body { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 240px; }
.mosaic-add .plus {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: var(--fw-light);
  color: var(--sun-500);
  line-height: 1;
  transition: transform 400ms var(--ease-out);
}
.mosaic-add:hover .plus { transform: rotate(90deg) scale(1.1); }
.mosaic-add-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 18px;
  color: var(--accent);
  line-height: 1.2;
}
.mosaic-add-title em { font-family: var(--font-italic); font-style: italic; font-weight: 400; }
.mosaic-add-sub {
  font: 12.5px/1.45 var(--font-body);
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.mosaic-add-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--fw-medium) 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sun-500);
}
.mosaic-add-cta .arrow {
  transition: transform 300ms var(--ease-out);
}
.mosaic-add:hover .mosaic-add-cta .arrow { transform: translateX(3px); }

/* ============================================================
   RESPONSIVE — Showcase + Mosaic + Marquee
   ============================================================ */
@media (max-width: 1024px) {
  .showcase-grid { grid-template-columns: 1fr; gap: var(--s-8); min-height: auto; padding: 0 var(--gutter); }
  .showcase-photo { aspect-ratio: 4 / 3; }
  .showcase-quote { font-size: clamp(22px, 4.5vw, 32px); }
  .showcase-swipe-hint { top: 14px; right: 16px; padding: 6px 11px; font-size: 10px; }
  .slide-number { font-size: 64px; right: 12px; bottom: 6px; }
  .mosaic { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .marquee { padding: 14px 0; }
  .marquee-item { font-size: 22px; }

  .showcase-section { padding: var(--s-16) 0 var(--s-12); }
  .showcase-progress { margin-bottom: var(--s-6); }
  .showcase-swipe-hint { display: none; }
  .showcase-photo { aspect-ratio: 16 / 11; }
  .slide-number { font-size: 52px; }
  .showcase-meta { gap: 10px; margin-bottom: 14px; }
  .showcase-quote { margin-bottom: 18px; }
  .showcase-attribution { margin-bottom: 20px; padding-left: 12px; }
  .showcase-facts { grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; }
  .showcase-facts strong { font-size: 22px; }

  /* Stack controls cleanly on phone: arrows row + dots row + counter row */
  .showcase-controls {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
  }
  .showcase-controls-left {
    justify-content: center;
    gap: 8px;
  }
  .showcase-arrow { width: 44px; height: 44px; }
  .showcase-dots { justify-content: center; }
  .showcase-counter { justify-self: center; }

  /* Mosaic: zwei gleiche Spalten auf dem Handy */
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic-label em { font-size: 18px; }
  .mosaic-badge { padding: 6px 10px; top: 10px; right: 10px; }
  .mosaic-badge strong { font-size: 16px; }
}

/* Reduced motion: kill animations for users who don't want them */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal-words .word-inner { transform: none; transition: none; }
  .reveal, .reveal-words, .clip-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .parallax-portrait { transform: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  EDITORIAL DOCTRINE  —  ONE DESIGN LINE FOR THE ENTIRE PAGE       ║
   ║                                                                    ║
   ║  Diese Layer ist der Single Source of Truth für:                   ║
   ║   · Typografische Hierarchie (Eyebrow / H2 / Lead / Body / Meta)   ║
   ║   · Vertikalen Section-Rhythmus + Section-Head-Abstände            ║
   ║   · Card / Hairline / Button Maße                                  ║
   ║  Steht bewusst am Ende — hat damit höchste Cascade-Priorität       ║
   ║  bei gleicher Spezifität. Section-CSS oberhalb wird dadurch        ║
   ║  begradigt, nicht ersetzt.                                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  /* Editorial-Tokens — referenziert von der Doctrine unten */
  --ed-rule:        rgba(11, 26, 71, 0.10);   /* hairline soft */
  --ed-rule-2:      rgba(11, 26, 71, 0.14);   /* hairline clear */
  --ed-rule-3:      rgba(11, 26, 71, 0.18);   /* hairline strong */
  --ed-ink:         #0B1A47;                   /* deep navy headlines */
  --ed-ink-body:    #3A4254;                   /* body copy */
  --ed-ink-meta:    #6A7282;                   /* meta / subtle */
  --ed-brand:       #2E5BE8;                   /* brand accent */
  --ed-zion:        #0038B8;                   /* Zionsblau — Italic-Schreibschrift */
  --ed-readwidth:   60ch;                      /* default body max-width */
  --ed-leadwidth:   56ch;                      /* section-lead max-width */
  --ed-headwidth:   760px;                     /* section-head max-width */
}

/* ─── 1. Vertikaler Section-Rhythmus ──────────────────────────────── */
/* Mehr Atem zwischen Sections — editorial statt dicht gepackt        */
section.section--paper,
section.section--mist,
section.section--cool,
section.section-alt,
section.region-section,
section.stats-section,
section.intro-personal,
section.referral-section,
section.showcase-section {
  padding-top: clamp(88px, 10vw, 148px);
  padding-bottom: clamp(88px, 10vw, 148px);
}
section.cta-section { padding: clamp(96px, 11vw, 160px) 0; }
section.hero { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(80px, 9vw, 128px); }

/* ─── 2. Section-Head — einheitlicher editorial Block ─────────────── */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: var(--ed-headwidth);
}
.section-head > * + * { margin-top: 20px; }
.section-head .eyebrow + h2,
.section-head .eyebrow + .h2,
.section-head .eyebrow + h1 { margin-top: 22px; }
.section-head h2 + p,
.section-head .h2 + p,
.section-head h1 + p { margin-top: 24px; }

.section-head h1,
.section-head h2,
.section-head .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ed-ink);
  margin: 0;
}
.section-head h2 em,
.section-head .h2 em,
.section-head h1 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.section-head p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ed-ink-body);
  max-width: var(--ed-leadwidth);
  margin: 0;
}

/* ─── 3. Eyebrow / Kicker — editorial Mono ────────────────────────── */
/* Ersetzt das ✦-Sternchen-Ornament durch eine ruhige Mono-Variante.   */
.eyebrow,
.eyebrow-ornament {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ed-brand);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.eyebrow-ornament::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow-ornament::after { content: none; }

/* Auf Dark-Sections: heller Akzent */
.section--deep .eyebrow,
.section--deep .eyebrow-ornament,
.section-dark .eyebrow,
.section-dark .eyebrow-ornament { color: var(--sun-400); }

/* ─── 4. Body / Meta / Lead — Defaults für direkte Section-Children ── */
/* Bewusst NICHT generisch auf `section p` — würde Cards/Wizards treffen */
section > .container > p,
section > .container-narrow > p,
section > .container-wide > p,
.text-block p,
.prose p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ed-ink-body);
  max-width: var(--ed-readwidth);
}
.lead,
p.lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ed-ink-body);
  max-width: var(--ed-leadwidth);
}

.meta,
.meta-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-ink-meta);
}

/* ─── 5. Hairlines / Dividers — eine Farbe für die ganze Seite ────── */
hr,
.hairline {
  border: 0;
  height: 1px;
  background: var(--ed-rule-2);
  margin: clamp(32px, 4vw, 56px) 0;
}

/* ─── 6. Cards — einheitliches Maß, Radius, Border, Shadow ────────── */
/* Wirkt zusätzlich zur bestehenden .card-Definition; nur                */
/* harmonisiert Radius + Border-Farbe + Shadow.                          */
.card,
.faq-item,
.referral-card,
.wizard-card,
.intro-portrait-card,
.showcase-slide-card {
  border-radius: 18px;
}
.card {
  border-color: var(--ed-rule-2);
  padding: clamp(20px, 2vw, 32px);
}

/* ─── 7. Buttons — einheitliche Höhe & Tracking ───────────────────── */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 16px 26px;
  border-radius: 999px;
  min-height: 50px;
}
.btn-sm { padding: 11px 18px; font-size: 13px; min-height: 40px; }
.btn-lg { padding: 18px 30px; font-size: 16px; min-height: 56px; }

/* ─── 8. Numerals — überall tabular für Daten/Stats/KPIs ──────────── */
[data-count],
.stat-num,
.kpi-num,
.intro-figure-num,
.region-stat-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ─── 9. Container — einheitlich auf 1120 / Reading 720 ──────────── */
.container        { max-width: 1120px; padding: 0 clamp(20px, 3vw, 32px); }
.container-narrow { max-width: 720px;  padding: 0 clamp(20px, 3vw, 32px); }
.container-wide   { max-width: 1280px; padding: 0 clamp(20px, 3vw, 32px); }

/* ─── 10. Optional .text-block — pro Content max-readwidth ────────── */
.text-block,
.prose {
  max-width: var(--ed-readwidth);
}
.text-block p + p,
.prose p + p { margin-top: 1em; }

/* ─── 11. Center-Variant (für ausgewählte Section-Heads) ──────────── */
.section-head.is-center {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-head.is-center p { margin-left: auto; margin-right: auto; }

/* ─── 11b. Dark-Section overrides — Headlines & Body invertieren ──── */
.section--deep .section-head h1,
.section--deep .section-head h2,
.section--deep .section-head .h2,
.section-dark .section-head h1,
.section-dark .section-head h2,
.section-dark .section-head .h2 {
  color: var(--text-on-deep, #F5F7FB);
}
.section--deep .section-head p,
.section--deep > .container > p,
.section--deep .text-block p,
.section--deep .prose p,
.section-dark .section-head p,
.section-dark > .container > p,
.section-dark .text-block p,
.section-dark .prose p {
  color: var(--text-on-deep-muted, #B6C2DC);
}
.section--deep .meta,
.section--deep .meta-mono,
.section-dark .meta,
.section-dark .meta-mono {
  color: var(--text-on-deep-subtle, #8290B1);
}

/* ─── 11c. Hero — eigene Typo-Skala, größere Display-Headline ─────── */
.hero .hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ed-ink);
}
.hero .hero-copy h1 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
.hero .hero-lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ed-ink-body);
  max-width: var(--ed-leadwidth);
}

/* ─── 11c·1. Zionsblau — Italic-Schreibschrift in allen Headlines ─── */
/* Die kursive Instrument-Serif soll als Akzent in tiefem Zionsblau     */
/* leuchten — Gegenakzent zum Navy der restlichen Headline.             */
.section-head h1 em,
.section-head h2 em,
.section-head .h2 em,
.hero .hero-copy h1 em,
.intro-personal .intro-h em,
.h-display em,
.display .em,
.em-italic,
h1 em, h2 em, h3 em {
  color: var(--ed-zion) !important;
  -webkit-text-fill-color: var(--ed-zion) !important;  /* überschreibt Gradient-Clip-Tricks */
  background: none !important;
}

/* Dark-Sections: Zionsblau zu hell aufhellen, sonst zu dunkel auf Navy */
.section--deep h1 em,
.section--deep h2 em,
.section--deep .h2 em,
.section-dark h1 em,
.section-dark h2 em,
.section-dark .h2 em {
  color: #6AA0FF !important;
  -webkit-text-fill-color: #6AA0FF !important;
}

/* ─── 11d. Intro-Personal-Section — Display-Headline harmonisieren ── */
.intro-personal .intro-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--ed-ink);
}
.intro-personal .intro-h em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}
/* Intro-Tag: alten ✧-Stil auf editorial Mono ziehen */
.intro-personal .intro-tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ed-brand);
}

/* Section-Nummer-Badge — überall einheitlich */
.section-no {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ed-ink-meta);
  text-transform: uppercase;
}

/* ─── 11e. Restliche Eyebrow-Klassen auf Doctrine-Linie ziehen ────── */
/* Hero / Package / Card / Showcase-Eyebrow: einheitlich Mono 11px + */
/* Hairline-Strich, brand-blau. Sternchen/Sonne werden ausgeblendet.   */
.hero-eyebrow,
.pkg-eyebrow,
.card-eyebrow,
.showcase-eyebrow {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ed-brand) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.hero-eyebrow::before,
.pkg-eyebrow::before,
.card-eyebrow::before,
.showcase-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: 0 0 auto;
}
.hero-eyebrow::after,
.pkg-eyebrow::after,
.card-eyebrow::after,
.showcase-eyebrow::after { content: none !important; }
/* Hero-Eyebrow hat zusätzlich noch ein .dot — ausblenden, Hairline reicht */
.hero-eyebrow .dot { display: none; }

/* Intro-Tag — gleiche Linie */
.intro-tag {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ed-brand) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}
.intro-tag::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* ─── 11f. Referral- & CTA-H2 auf einheitliche Section-Größe ──────── */
.referral-copy h2,
.referral-form-wrap .section-head h2,
.cta-section h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ed-ink);
}
/* CTA-H2 auf gleicher Skala wie Section-Heads */
.cta-section h2 {
  color: var(--text-on-deep, #F5F7FB);
  font-size: clamp(30px, 4vw, 50px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.022em !important;
  max-width: 18ch;
}
.referral-copy h2 em,
.cta-section h2 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ─── 11f·0. Globaler Typo-Scale — eine Größe pro Rolle ───────────── */
/* Eine klare, knappe Skala, die über die ganze Seite gilt:             */
/*   Display H1 (Hero):       64 / 56 / 48                              */
/*   Section H2:              44 (clamp 28–44)                          */
/*   Subsection H3:           24 (clamp 20–26)                          */
/*   Card / Label H4:         17                                        */
/*   Body / Paragraph:        16                                        */
/*   Lead Body:               18                                        */
/*   Meta / Small / Caption:  13                                        */
/*   Mono Eyebrow / Tag:      11                                        */
/* Section-Head H2 / Hero H1 / Intro H2 sind oben in der Doctrine       */
/* bereits gesetzt — hier kommen die Card-/Body-Sizes.                   */

/* H3 — alle Card-/Sub-Headlines auf einheitliche Größe */
section h3,
.card h3,
.step-card h3,
.pkg h3,
.mosaic-head h3,
.faq-item h3,
.intro-portrait-card h3,
.wizard-step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ed-ink);
  margin: 0 0 12px;
}
section h3 em,
.card h3 em,
.step-card h3 em,
.pkg h3 em,
.mosaic-head h3 em,
.faq-item h3 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}

/* H4 — alle Card-Labels / Sub-Sub-Headlines */
section h4,
.card h4,
.step-head h4,
.referral-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ed-ink);
  margin: 0 0 8px;
}

/* Body p — innerhalb von Cards / Step-Cards / Pkg / Wizard */
.card p,
.step-card p,
.pkg p,
.faq-item p,
.intro-portrait-card p,
.wizard-step p,
.referral-card p,
.empfehlung-card-wide p,
.showcase-body p:not(.showcase-quote) {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ed-ink-body);
  margin: 0 0 12px;
}

/* Meta / Small / Tag / Caption / Step-Meta — alle 13px */
.step-meta,
.step-tag,
.showcase-tag-pill,
.photo-tag,
.mosaic-label span,
.showcase-attribution span,
.faq-item .faq-meta,
.tag-pill,
.region-city-sub,
small.meta,
.caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ed-ink-meta);
  font-weight: 500;
}

/* Inline strong in card-paragraphs nicht extra einfärben */
.card p strong,
.step-card p strong,
.pkg p strong,
.referral-card p strong { color: var(--ed-ink); font-weight: 600; }

/* Dark-Sections: Body-Text auf hellem Akzent halten */
.section--deep .card p,
.section--deep .step-card p,
.section--deep .pkg p,
.section--deep .referral-card p,
.section--deep .empfehlung-card-wide p,
.section-dark .card p,
.section-dark .step-card p,
.section-dark .pkg p {
  color: var(--text-on-deep-muted, #B6C2DC);
}
.section--deep section h3,
.section--deep section h4,
.section-dark section h3,
.section-dark section h4 {
  color: var(--text-on-deep, #F5F7FB);
}

/* ─── 11f·1. Referral-Steps — Number-Bubble wie im Ablauf ─────────── */
/* Vorher: kleine gefüllte Kreise (36px, accent-Background, gelbe Zahl).*/
/* Jetzt: identische Optik zur Ablauf-Timeline-Bubble — 56px weißes     */
/* Paper-Bubble mit Navy-Hairline, Mono-/Display-Number in Brand-Blau.  */
.referral-steps .step-num {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--paper, #FDFDFE) !important;
  border: 2px solid rgba(11, 26, 71, 0.18) !important;
  color: var(--ed-brand) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  box-shadow:
    0 4px 12px rgba(11, 26, 71, 0.06),
    inset 0 -2px 4px rgba(11, 26, 71, 0.04) !important;
}
.referral-steps li { gap: 20px; align-items: center; }

/* ─── 11f·2. FAQ-Liste zentriert ──────────────────────────────────── */
.faq-list--center {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── 11g. CTA → Footer als EINE durchgehende Dark-Fläche ─────────── */
/* Keine sichtbare Naht, kein Radial-Akzent an der Übergangskante.     */
/* Die CTA-Section ist .section--deep — ihr ::before-Gradient endet    */
/* unten in var(--bg-deep). Der Footer kriegt exakt diesen Wert, damit */
/* der Übergang optisch verschwindet.                                   */
.cta-section { background: var(--bg-deep) !important; }
.cta-section::before {
  /* CTA-eigener Gradient soll erst weit oberhalb starten und bis ganz */
  /* nach unten dasselbe Navy halten — kein Fade Richtung Footer.       */
  background: linear-gradient(180deg,
    var(--bg-paper)                                          0px,
    color-mix(in oklab, var(--bg-paper) 92%, var(--bg-deep)) 140px,
    color-mix(in oklab, var(--bg-paper) 78%, var(--bg-deep)) 280px,
    color-mix(in oklab, var(--bg-paper) 55%, var(--bg-deep)) 420px,
    color-mix(in oklab, var(--bg-paper) 28%, var(--bg-deep)) 560px,
    var(--bg-deep)                                           720px,
    var(--bg-deep)                                           100%) !important;
}
footer.site-footer {
  background: var(--bg-deep) !important;
  margin-top: 0 !important;
}
footer.site-footer::before { content: none !important; }
footer.site-footer::after  { content: none !important; }

/* ─── 11h. Unified Headline-Scale — alle H1/H2 auf gleicher Größe ─── */
/* Hero · Intro · alle Section-Heads · Referral · CTA: ein Maß.        */
.hero h1,
.intro-h,
.section-head h1,
.section-head h2,
.section-head .h2,
.referral-copy h2,
.referral-form-wrap .section-head h2,
.cta-section h2 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(30px, 4vw, 50px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.022em !important;
}
.hero h1 em,
.intro-h em,
.section-head h1 em,
.section-head h2 em,
.section-head .h2 em,
.referral-copy h2 em,
.cta-section h2 em {
  font-family: var(--font-italic) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
}

/* ─── 11i. Unified Rhythm — Headline-Block überall im selben Style ── */
/* H2-Spaltenbreite, Body-Lead, Vertikal-Abstände: ein einziges Maß.    */
.section-head h1,
.section-head h2,
.section-head .h2,
.intro-h,
.referral-copy h2,
.cta-section h2 {
  max-width: 22ch !important;
  text-wrap: balance;
  text-wrap-style: balance;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: keep-all;
}
.hero h1 {
  max-width: 18ch !important;
  text-wrap: balance;
  text-wrap-style: balance;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: keep-all;
}

.section-head p,
.referral-copy > p,
.cta-section p {
  font-family: var(--font-body) !important;
  font-size: clamp(17px, 1.4vw, 19px) !important;
  line-height: 1.55 !important;
  max-width: 56ch !important;
  margin: 0 !important;
  color: var(--ed-ink-body);
}
.section--deep .section-head p,
.cta-section p { color: var(--on-dark-2) !important; }

.section-head .eyebrow + h1,
.section-head .eyebrow + h2,
.section-head .eyebrow + .h2,
.referral-copy .eyebrow + h2,
.cta-section .eyebrow + h2,
.intro-personal-body .intro-tag + .intro-h {
  margin-top: 24px !important;
}
.referral-copy h2,
.cta-section h2 { margin-top: 24px !important; margin-bottom: 0 !important; }
.referral-copy .eyebrow,
.cta-section .eyebrow { margin-bottom: 0 !important; display: flex !important; }
.referral-copy .section-no,
.cta-section .section-no { display: flex !important; margin-bottom: 12px !important; }
.section-head h1 + p,
.section-head h2 + p,
.section-head .h2 + p,
.referral-copy h2 + p,
.cta-section h2 + p {
  margin-top: 28px !important;
}
.section-head { margin-bottom: clamp(56px, 6vw, 88px) !important; }

/* ─── 11p+1. Intro-Headline Signature-Variante ─────────────────────────
   "Ich bin Gabriele Chochol." komplett italic-serif, eine Zeile.
   Überschreibt die display:block-Regel von .intro-h em und die max-width
   von 22ch — kommt NACH allen anderen .intro-h-Regeln, daher gültig.
   ─────────────────────────────────────────────────────────────────────── */
.intro-h.intro-h--signature {
  max-width: none !important;
  text-wrap: nowrap !important;
  white-space: nowrap !important;
  font-size: clamp(26px, 3.2vw, 46px) !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
.intro-h.intro-h--signature em,
.intro-h.intro-h--signature .word,
.intro-h.intro-h--signature .word-inner {
  display: inline-block !important;
}
.intro-h.intro-h--signature em {
  font-family: var(--font-italic) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
/* Auf schmalen Screens darf die Zeile umbrechen, sonst läuft sie raus */
@media (max-width: 640px) {
  .intro-h.intro-h--signature {
    white-space: normal !important;
    text-wrap: balance !important;
    font-size: clamp(24px, 6.8vw, 36px) !important;
  }
}

/* ─── 11q. Anfrage-Subpage (/anfrage.html) — light, matched to main site ── */
.anfrage-body {
  background: var(--bg-paper, #FDFDFE);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* same subtle aurora glow as hero */
  background-image: var(--grad-aurora);
  background-repeat: no-repeat;
  background-size: 100% 1200px;
  background-position: top center;
}

/* Header — mirrors .site-header on the main page */
.anfrage-header {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-cool);
  background: rgba(253, 253, 254, 0.85);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  position: sticky;
  top: 0;
  z-index: 10;
}
.anfrage-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.anfrage-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  text-decoration: none;
  font: var(--fw-medium) 14px/1 var(--font-body);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-cool);
  background: var(--paper);
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.anfrage-back:hover {
  background: var(--cream);
  color: var(--accent);
  border-color: var(--brand-200);
}
.anfrage-back .arrow.back { display: inline-block; }
.anfrage-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.anfrage-brand .brand-mark {
  width: 36px;
  height: 30px;
  display: inline-flex;
  align-items: center;
}
.anfrage-brand .brand-mark svg { width: 100%; height: 100%; }
.anfrage-brand .brand-word .blue { color: var(--sun-500); }

/* Logo überall links (wie auf der Startseite): Header-Logo nach vorn,
   „Zurück" wandert nach rechts. Gilt für alle Unterseiten + Blog. */
.anfrage-header .anfrage-brand { order: -1; }

/* Main */
.anfrage-main {
  flex: 1 0 auto;
  padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px);
}
.anfrage-main .container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Card — paper with soft shadow, matches main-site card system */
.anfrage-card {
  background: var(--bg-card, #FDFDFE);
  border: 1px solid var(--line-cool);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-md);
}

/* Headline — same scale + color as main-site H1 */
.anfrage-h {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 16px;
}
.anfrage-h em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.anfrage-lead {
  font: var(--fw-regular) 16px/1.6 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 58ch;
}
.anfrage-lead em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--sun-500);
}

/* Rechner-Summary — cream card with brand-blue accent */
.anfrage-summary {
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sun-500);
  border-radius: var(--r-md);
  padding: 22px 26px;
  margin: 0 0 32px;
}
.anfrage-summary-h {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sun-500);
  margin: 0 0 16px;
}
.anfrage-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin: 0;
}
.anfrage-summary-grid .summary-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.anfrage-summary-grid dt {
  font: var(--fw-medium) 11px/1 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.anfrage-summary-grid dd {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 17px;
  color: var(--accent);
  margin: 0;
}
.anfrage-summary-note {
  font: 12.5px/1.5 var(--font-body);
  color: var(--ink-3);
  margin: 14px 0 0;
}
@media (max-width: 560px) {
  .anfrage-summary-grid { grid-template-columns: 1fr; gap: 4px; }
}

/* Form */
.anfrage-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.form-section {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-section-h {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sun-500);
  margin: 0 0 4px;
  padding: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.anfrage-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anfrage-form .field-full { grid-column: 1 / -1; }
.anfrage-form .field-half { grid-column: span 1; }
.anfrage-form .lbl {
  font: var(--fw-medium) 12px/1.2 var(--font-body);
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.anfrage-form .lbl small {
  font-weight: var(--fw-regular);
  color: var(--ink-3);
  margin-left: 4px;
}
.anfrage-form .input {
  background: var(--paper);
  border: 1px solid var(--line-cool);
  border-radius: var(--r-md);
  padding: 13px 15px;
  font: var(--fw-regular) 15px/1.4 var(--font-body);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft);
  width: 100%;
}
.anfrage-form .input::placeholder { color: var(--ink-disabled); }
.anfrage-form .input:focus {
  outline: none;
  border-color: var(--sun-500);
  box-shadow: var(--ring-focus);
}
.anfrage-form textarea.input {
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-body);
}
.anfrage-form select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%231E4FB0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

/* Consent + Honeypot */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 13px/1.55 var(--font-body);
  color: var(--ink-2);
  padding: 14px 0 0;
  border-top: 1px solid var(--line-cool);
}
.form-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--sun-500);
}
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Actions */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.anfrage-form .btn {
  align-self: flex-start;
  white-space: nowrap;
}
.form-error {
  font: 13px/1.5 var(--font-body);
  color: var(--danger);
  margin: 0;
}
.form-error a { color: var(--sun-500); font-weight: var(--fw-semibold); }
.form-fineprint {
  font: 13px/1.5 var(--font-body);
  color: var(--ink-3);
  margin: 14px 0 0;
}
.anfrage-call-link {
  color: var(--sun-500);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  margin-left: 4px;
}
.anfrage-call-link:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .anfrage-form .field-half { grid-column: 1 / -1; }
}

/* Success */
.anfrage-success {
  text-align: center;
  padding: clamp(40px, 6vw, 64px) clamp(28px, 4vw, 48px);
}
.anfrage-success .success-icon {
  display: inline-flex;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--sun-50);
  color: var(--sun-500);
  align-items: center;
  justify-content: center;
  margin: 0 0 24px;
  border: 1px solid var(--sun-100);
}
.anfrage-success .anfrage-h { margin: 0 0 14px; }
.anfrage-success .anfrage-lead {
  margin: 0 auto 32px;
  max-width: 50ch;
  color: var(--ink-2);
}
.success-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 26px;
}
.success-meta {
  font: 12.5px/1.5 var(--font-body);
  color: var(--ink-3);
  margin: 0;
}

/* Footer — matches main-site footer tone */
.anfrage-footer {
  border-top: 1px solid var(--line-cool);
  padding: 28px 0;
  flex-shrink: 0;
  background: var(--cream);
}
.anfrage-footer small {
  font: 12.5px/1.5 var(--font-body);
  color: var(--ink-3);
}

/* ─── 11p. CTA-Section „Lass uns reden" — Abstands-Rhythmus ─────── */
.cta-section .reveal { display: flex; flex-direction: column; align-items: flex-start; }
.cta-section .reveal h2 { margin: 0 !important; }
.cta-section .reveal h2 + p {
  margin: 28px 0 0 !important;
  max-width: 56ch;
}
.cta-section .reveal p + .hero-ctas,
.cta-section .reveal .hero-ctas {
  margin-top: 32px !important;
}
.cta-section .reveal .hero-ctas + .cta-fineprint,
.cta-section .reveal .cta-fineprint {
  margin-top: 22px !important;
}
@media (max-width: 720px) {
  .cta-section .reveal h2 + p { margin-top: 20px !important; }
  .cta-section .reveal .hero-ctas { margin-top: 24px !important; }
  .cta-section .reveal .cta-fineprint { margin-top: 18px !important; }
}

/* ─── 11o. Alle Eyebrow-Labels & Section-No-Pills ausblenden ─────── */
/* H2 führt jede Section direkt — kein Kicker, keine Pill drüber.     */
.section-head .eyebrow,
.section-head .eyebrow-ornament,
.section-head .section-no,
.hero-eyebrow,
.pkg-eyebrow,
.card-eyebrow,
.showcase-eyebrow,
.intro-tag,
.step-tag,
.referral-copy .eyebrow,
.referral-copy .eyebrow-ornament,
.referral-copy .section-no,
.cta-section   .eyebrow,
.cta-section   .eyebrow-ornament,
.cta-section   .section-no,
.intro-personal .eyebrow,
.intro-personal .eyebrow-ornament,
.intro-personal .section-no,
.wizard-step .step-tag {
  display: none !important;
}

/* Da Eyebrow + Pill weg sind: H2 wird Lead-Element jeder Section.    */
.section-head h1,
.section-head h2,
.section-head .h2,
.referral-copy h2,
.cta-section h2 {
  margin-top: 0 !important;
}
.section-head {
  gap: 18px !important;
  margin-bottom: clamp(40px, 5vw, 72px) !important;
}
.section-head h2 + p,
.section-head .h2 + p,
.section-head h1 + p,
.referral-copy h2 + p,
.cta-section h2 + p {
  margin-top: 20px !important;
}
@media (max-width: 720px) {
  .section-head { gap: 14px !important; }
  .section-head h2 + p,
  .section-head .h2 + p,
  .cta-section h2 + p { margin-top: 14px !important; }
}

/* ─── 11n. Eyebrows & Pills — über alle Sections konsistent ─────── */
/* Light-Sections: brand-blau, satt und klar lesbar.                  */
.section--paper .eyebrow,
.section--paper .eyebrow-ornament,
.section--mist  .eyebrow,
.section--mist  .eyebrow-ornament,
.section--cool  .eyebrow,
.section--cool  .eyebrow-ornament,
.intro-personal .eyebrow,
.intro-personal .eyebrow-ornament,
.showcase-section .eyebrow,
.showcase-section .eyebrow-ornament,
.region-section   .eyebrow,
.region-section   .eyebrow-ornament,
.stats-section    .eyebrow,
.stats-section    .eyebrow-ornament,
.timeline-section .eyebrow,
.timeline-section .eyebrow-ornament,
.magnets-section  .eyebrow,
.magnets-section  .eyebrow-ornament {
  color: var(--ed-brand, #2E5BE8) !important;
}
.section--paper .eyebrow-ornament::before,
.section--mist  .eyebrow-ornament::before,
.section--cool  .eyebrow-ornament::before,
.intro-personal .eyebrow-ornament::before,
.showcase-section .eyebrow-ornament::before,
.region-section   .eyebrow-ornament::before,
.stats-section    .eyebrow-ornament::before,
.timeline-section .eyebrow-ornament::before,
.magnets-section  .eyebrow-ornament::before {
  background: var(--ed-brand, #2E5BE8) !important;
  opacity: 0.7;
}

/* Dark-Sections (CTA + andere --deep / --dark): kräftiges Cyan-Akzent */
.section--deep .eyebrow,
.section--deep .eyebrow-ornament,
.section-dark  .eyebrow,
.section-dark  .eyebrow-ornament,
.cta-section   .eyebrow,
.cta-section   .eyebrow-ornament,
.referral-section.section--deep .eyebrow,
.referral-section.section--deep .eyebrow-ornament {
  color: var(--gold, #22D3EE) !important;
}
.section--deep .eyebrow-ornament::before,
.section-dark  .eyebrow-ornament::before,
.cta-section   .eyebrow-ornament::before {
  background: var(--gold, #22D3EE) !important;
  opacity: 0.85;
}

/* Pills (.section-no) — auf Dark sichtbar machen */
.section--deep .section-no,
.section-dark  .section-no,
.cta-section   .section-no {
  color: var(--gold, #22D3EE) !important;
  border-color: rgba(34, 211, 238, 0.45) !important;
  background: rgba(34, 211, 238, 0.10) !important;
}
.section--deep .section-no::before,
.section-dark  .section-no::before,
.cta-section   .section-no::before {
  color: var(--gold, #22D3EE) !important;
  opacity: 0.9;
}

/* Pills auf Light: brand-blau, dezent */
.section--paper .section-no,
.section--mist  .section-no,
.section--cool  .section-no,
.intro-personal .section-no,
.showcase-section .section-no,
.region-section   .section-no,
.timeline-section .section-no,
.magnets-section  .section-no {
  color: var(--ed-brand, #2E5BE8) !important;
  border-color: rgba(46, 91, 232, 0.30) !important;
  background: rgba(46, 91, 232, 0.06) !important;
}
.section--paper .section-no::before,
.section--mist  .section-no::before,
.section--cool  .section-no::before,
.intro-personal .section-no::before,
.showcase-section .section-no::before,
.region-section   .section-no::before,
.timeline-section .section-no::before,
.magnets-section  .section-no::before {
  color: var(--ed-brand, #2E5BE8) !important;
  opacity: 0.75;
}

/* Hero-Eyebrow: weniger transparent, mehr Substanz */
.hero-eyebrow {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(46, 91, 232, 0.18) !important;
  color: var(--ed-brand, #2E5BE8) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 8px 22px -10px rgba(11, 29, 69, 0.22) !important;
}
.hero-eyebrow .dot {
  background: var(--ed-brand, #2E5BE8) !important;
}

/* ─── 11m. Section-Header-Rhythmus (Pill ↔ Eyebrow ↔ H2) ─────────── */
/* Pill „+ 03" und Eyebrow „— Mein Einzugsgebiet" brauchen Atemraum. */
.section-head {
  gap: 14px !important;
}
.section-head .section-no {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
.section-head .section-no + .eyebrow,
.section-head .section-no + .eyebrow-ornament {
  margin-top: 4px !important;
}
.section-head .eyebrow + h1,
.section-head .eyebrow + h2,
.section-head .eyebrow + .h2,
.section-head .eyebrow-ornament + h1,
.section-head .eyebrow-ornament + h2,
.section-head .eyebrow-ornament + .h2 {
  margin-top: 18px !important;
}
/* Mobile: etwas enger, aber weiterhin sauber gestaffelt */
@media (max-width: 720px) {
  .section-head { gap: 12px !important; }
  .section-head .section-no + .eyebrow,
  .section-head .section-no + .eyebrow-ornament { margin-top: 2px !important; }
}

/* ─── 11l. Result-Step Polish (Calculator-Wizard, Schritt 4) ──────── */
.wizard-step-result .step-head {
  align-items: flex-start;
  gap: 12px !important;
  margin-bottom: 22px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(11, 26, 71, 0.08);
}
.wizard-step-result .step-head .step-tag {
  color: var(--sun-600, #C58A00) !important;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.wizard-step-result .step-head h4 {
  font-size: clamp(22px, 2.5vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ed-ink, var(--ink, #0B1A47)) !important;
  margin: 0 !important;
  max-width: 22ch;
  text-wrap: balance;
}
.wizard-step-result .step-head h4 em {
  font-family: var(--font-italic, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500, #2E5BE8) !important;
}
.wizard-step-result .step-head p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--ed-ink-body, var(--ink-2, rgba(11, 26, 71, 0.78))) !important;
  max-width: 50ch;
  margin: 0 !important;
}
.wizard-step-result .step-head p em {
  font-family: var(--font-italic, serif);
  font-style: italic;
  color: var(--sun-500, #2E5BE8) !important;
}

/* CTA-Block am Ende: dunkles Band mit weißer Schrift, durchgehend */
.wizard-step-result .calc-cta-btn {
  background: linear-gradient(135deg, #0B1A47 0%, #14245A 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--r-md, 12px) var(--r-md, 12px) 0 0 !important;
  padding: 18px 22px !important;
  margin-bottom: 0 !important;
  margin-top: 18px !important;
  box-shadow: 0 12px 32px rgba(11, 26, 71, 0.22) !important;
}
.wizard-step-result .calc-cta-btn:hover {
  background: linear-gradient(135deg, #0E2156 0%, #182E6E 100%) !important;
  box-shadow: 0 16px 40px rgba(11, 26, 71, 0.32) !important;
}
.wizard-step-result .calc-cta-btn .calc-cta-top {
  color: #FFFFFF !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
}
.wizard-step-result .calc-cta-btn .calc-cta-bottom {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12.5px !important;
}
.wizard-step-result .calc-cta-btn .arrow { color: var(--sun-400, #FFC94D) !important; }

/* Disclaimer-Streifen direkt am CTA dran, gleiche dunkle Welt */
.wizard-step-result .pkg-disclaimer {
  background: rgba(11, 26, 71, 0.96) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  padding: 14px 22px 16px !important;
  border-radius: 0 0 var(--r-md, 12px) var(--r-md, 12px);
  margin: 0 0 4px !important;
  max-width: none !important;
  text-align: left;
}
.wizard-step-result .pkg-disclaimer em {
  font-family: var(--font-italic, serif);
  font-style: italic;
  color: var(--sun-400, #FFC94D) !important;
}
@media (max-width: 640px) {
  .wizard-step-result .calc-cta-btn { padding: 16px 18px !important; }
  .wizard-step-result .pkg-disclaimer { padding: 12px 18px 14px !important; }
}

/* ─── 11k. Skip-Link (Accessibility) ──────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--ink, #0B1A47);
  color: #fff;
  font-family: var(--font-sans, system-ui);
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  transition: top 0.18s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--sun-500, #FFB400);
  outline-offset: 2px;
}

/* ─── 11j. CTA Fineprint ──────────────────────────────────────────── */
.cta-fineprint {
  margin-top: 22px !important;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em;
  color: var(--on-dark-3, rgba(255, 255, 255, 0.55)) !important;
  max-width: 52ch;
}
@media (max-width: 720px) {
  .cta-fineprint { font-size: 12px !important; margin-top: 18px !important; }
}

/* ─── 12. Mobile Schliff ──────────────────────────────────────────── */
@media (max-width: 720px) {
  section.section--paper,
  section.section--mist,
  section.section--cool,
  section.section-alt,
  section.region-section,
  section.stats-section,
  section.intro-personal,
  section.referral-section,
  section.showcase-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .section-head { margin-bottom: 40px; }
  .section-head > * + * { margin-top: 14px; }
  .section-head .eyebrow + h2,
  .section-head .eyebrow + .h2 { margin-top: 16px; }
  .section-head h2 + p,
  .section-head .h2 + p { margin-top: 18px; }
}

/* ─── 11r. Ratgeber-Subpage (/ratgeber.html) ─────────────────────── */
.ratgeber-body {
  background: var(--bg-paper, #FDFDFE);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: var(--grad-aurora);
  background-repeat: no-repeat;
  background-size: 100% 1200px;
  background-position: top center;
}
.ratgeber-header-bar .container { gap: 12px; }
.ratgeber-header-bar .anfrage-brand { flex: 1; min-width: 0; }
.ratgeber-header-bar .rg-print-btn {
  white-space: nowrap;
  min-height: 0;
  padding: 9px 14px;
  font-size: 13px;
}

.ratgeber-main {
  flex: 1 0 auto;
  padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
}
.ratgeber-main .container-narrow {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Cover */
.rg-cover {
  background: var(--paper);
  border: 1px solid var(--line-cool);
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 56px);
  box-shadow: var(--shadow-md);
  margin: 0 0 36px;
}
.rg-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  color: var(--sun-500);
}
.rg-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 20px;
}
.rg-h1 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.rg-lead {
  font: var(--fw-regular) 17px/1.6 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 60ch;
}
.rg-author {
  font: 13.5px/1.55 var(--font-body);
  color: var(--ink-3);
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-cool);
}
.rg-author strong { color: var(--ink); font-weight: var(--fw-semibold); }
.rg-author a { color: var(--sun-500); text-decoration: none; font-weight: var(--fw-semibold); }
.rg-author a:hover { text-decoration: underline; }

/* TOC */
.rg-toc {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin: 0 0 40px;
}
.rg-toc-h {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sun-500);
  margin: 0 0 14px;
}
.rg-toc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: rg-toc;
  display: grid;
  gap: 6px;
}
.rg-toc li {
  counter-increment: rg-toc;
  font: 15px/1.5 var(--font-body);
}
.rg-toc li::before {
  content: "0" counter(rg-toc) " · ";
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  font-weight: var(--fw-medium);
}
.rg-toc a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.rg-toc a:hover { color: var(--accent); text-decoration: underline; }

/* Sections */
.rg-section {
  position: relative;
  padding: 32px 0 28px;
  border-top: 1px solid var(--line-cool);
  page-break-inside: auto;
}
.rg-section:first-of-type { border-top: 0; }
.rg-section-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.rg-section > h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 18px;
}
.rg-section > h2 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--sun-500);
}
.rg-section > p {
  font: var(--fw-regular) 16px/1.65 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 22px;
  max-width: 64ch;
}
.rg-section > p em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--accent);
}
.rg-subh {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 24px 0 12px;
}

/* Check-Liste */
.rg-check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px;
}
.rg-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line-cool);
  border-radius: var(--r-md);
  font: 15px/1.5 var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur-fast),
              background var(--dur-fast),
              box-shadow var(--dur-fast);
}
.rg-check:hover {
  border-color: var(--brand-200);
  background: var(--sun-50);
}
.rg-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--sun-500);
  cursor: pointer;
}
.rg-check:has(input:checked) {
  background: var(--cream);
  border-color: var(--line);
}
.rg-check:has(input:checked) span { color: var(--ink-3); }
.rg-check strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.rg-check em { font-style: italic; }

/* Fact-Liste (für Förderung etc.) */
.rg-fact-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rg-fact-list li {
  position: relative;
  padding: 14px 18px 14px 42px;
  background: var(--paper);
  border: 1px solid var(--line-cool);
  border-radius: var(--r-md);
  font: 15px/1.55 var(--font-body);
  color: var(--ink-2);
}
.rg-fact-list li::before {
  content: "→";
  position: absolute;
  left: 16px;
  top: 14px;
  color: var(--sun-500);
  font-weight: var(--fw-bold);
}
.rg-fact-list strong { color: var(--ink); font-weight: var(--fw-semibold); }
.rg-fact-list em { font-style: italic; color: var(--accent); }
.rg-fact-list .rg-fact-highlight {
  background: var(--sun-50);
  border-color: var(--sun-100);
}
.rg-fact-list .rg-fact-highlight::before { color: var(--accent); }

/* Fail-Liste (häufige Fehler) */
.rg-fail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rg-fail;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rg-fail-list li {
  counter-increment: rg-fail;
  background: var(--paper);
  border: 1px solid var(--line-cool);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-md);
  padding: 18px 22px 18px 60px;
  position: relative;
}
.rg-fail-list li::before {
  content: counter(rg-fail, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--danger);
  letter-spacing: 0.05em;
}
.rg-fail-list h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.rg-fail-list p {
  font: 14.5px/1.55 var(--font-body);
  color: var(--ink-2);
  margin: 0;
}
.rg-fail-list strong { color: var(--ink); font-weight: var(--fw-semibold); }
.rg-fail-list em { font-style: italic; }

/* Question-Liste (12 Fragen) */
.rg-section--accent {
  background: linear-gradient(180deg, var(--sun-50) 0%, transparent 100%);
  border-top: 0;
  border-radius: var(--r-xl);
  padding: 36px clamp(20px, 3vw, 36px) 32px;
  margin: 16px 0;
}
.rg-section--accent > h2 { color: var(--accent); }
.rg-section--accent > p { color: var(--ink); }
.rg-q-list {
  list-style: none;
  counter-reset: rg-q;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.rg-q-list li {
  counter-increment: rg-q;
  position: relative;
  padding: 13px 18px 13px 52px;
  background: var(--paper);
  border: 1px solid var(--sun-100);
  border-radius: var(--r-md);
  font: 15px/1.5 var(--font-body);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.rg-q-list li::before {
  content: counter(rg-q, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--sun-500);
}
.rg-q-list li small {
  color: var(--ink-3);
  font-size: 12px;
  margin-left: 4px;
}

/* CTA-Section */
.rg-section--cta {
  /* Einfaches, klares Blau (Marken-Blau), weiße Schrift. */
  background: #1E4FB0;
  color: #fff;
  border-radius: var(--r-xl);
  box-shadow: 0 24px 64px -30px rgba(11, 26, 71, 0.55);
  padding: 44px clamp(26px, 4vw, 52px);
  margin: 24px 0 16px;
}
/* Auf dem blauen Grund: Telefon-Button weiß mit blauer Schrift (sticht hervor) */
.rg-section--cta .btn-bright { background: #fff; color: var(--green-600); }
.rg-section--cta .btn-bright:hover { background: rgba(255, 255, 255, 0.9); }
/* Fließtext + Fußzeile weiß — höhere Spezifität als die allgemeine
   `.rg-section > p`-Regel (die Absätze sonst dunkel färbt). */
.rg-section--cta .rg-cta-lead { color: #fff; }
.rg-section--cta .rg-cta-meta { color: rgba(255, 255, 255, 0.78); }
.rg-section--cta .rg-section-no { color: rgba(255, 255, 255, 0.7); }
.rg-section--cta .rg-section-no { color: rgba(255, 255, 255, 0.6); }
.rg-section--cta > h2 { color: #fff; }
.rg-cta-lead {
  font: 17px/1.65 var(--font-body);
  color: #fff;
  max-width: 58ch;
  margin: 0 0 28px;
}
.rg-cta-lead strong { color: #fff; font-weight: var(--fw-semibold); }
.rg-cta-lead em { font-style: italic; color: var(--gold); }
.rg-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.rg-section--cta .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  background: transparent;
}
.rg-section--cta .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}
.rg-cta-meta {
  font: 13px/1.5 var(--font-body);
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
/* E-Mail und Region nie mitten im Wort/Begriff umbrechen */
.rg-cta-meta .nowrap { white-space: nowrap; }

.rg-doc-footer {
  margin: 36px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line-cool);
  text-align: center;
}
.rg-doc-footer small {
  font: 12.5px/1.55 var(--font-body);
  color: var(--ink-3);
}

/* Mobile */
@media (max-width: 600px) {
  .rg-section--cta { padding: 32px 24px; }
  .rg-cta-row .btn { width: 100%; justify-content: center; }
  .ratgeber-header-bar .anfrage-brand .brand-tag { display: none; }
}

/* ─── 11s. PRINT: Ratgeber druckbar als PDF ──────────────────────── */
@media print {
  .anfrage-header,
  .ratgeber-header-bar,
  .skip-link,
  .rg-print-btn { display: none !important; }

  .ratgeber-body {
    background: #fff !important;
    background-image: none !important;
    color: #000;
  }
  .ratgeber-main { padding: 0 !important; }
  .ratgeber-main .container-narrow {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .rg-cover,
  .rg-toc,
  .rg-section,
  .rg-check,
  .rg-fact-list li,
  .rg-fail-list li,
  .rg-q-list li {
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  .rg-section { padding: 24px 0 18px; }
  .rg-section-no { color: #888; }
  .rg-section > h2 { color: #1E4FB0; }
  .rg-section > h2,
  .rg-subh,
  .rg-fail-list h4 { page-break-after: avoid; }

  .rg-section--accent,
  .rg-section--cta {
    background: #fff !important;
    background-image: none !important;
    color: #000;
    border: 1px solid #ccc;
    padding: 24px;
  }
  .rg-section--cta > h2,
  .rg-cta-lead,
  .rg-cta-lead strong,
  .rg-section--cta .rg-section-no { color: #000 !important; }
  .rg-cta-lead em { color: #1E4FB0 !important; }
  .rg-section--cta .btn { display: none !important; }
  .rg-doc-footer { border-top: 1px solid #ccc; }

  a { color: #000 !important; text-decoration: none; }
  body { font-size: 11pt; }
  @page { margin: 16mm 14mm; }

  /* Anfrage-Bestätigung druckbar — Beleg-Optik */
  .anfrage-body .anfrage-header,
  .anfrage-body .skip-link,
  .anfrage-body .anfrage-form,
  .anfrage-body .anfrage-aside,
  .anfrage-body .fab-whatsapp,
  .anfrage-body .mobile-cta-bar { display: none !important; }

  .anfrage-body { background: #fff !important; }
  .anfrage-body .anfrage-main { padding: 0 !important; background: #fff !important; }
  .anfrage-body .anfrage-grid { display: block !important; }

  .anfrage-body .anfrage-success,
  .anfrage-body #success,
  .anfrage-body #successRatgeber {
    background: #fff !important;
    border: 1px solid #ccc;
    padding: 28px !important;
    color: #000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .anfrage-body .anfrage-success h2,
  .anfrage-body .anfrage-success h3 { color: #1E4FB0 !important; }
  .anfrage-body .anfrage-success .btn,
  .anfrage-body .success-ratgeber .btn { display: none !important; }

  /* Hide CTA bars and FABs everywhere when printing */
  .fab-whatsapp,
  .mobile-cta-bar,
  .scroll-progress,
  .cursor-glow,
  .toast { display: none !important; }
}

/* ─── 11t. Lead-Magnet: zusätzliches Vorname-Feld im PDF-Formular ─ */
.pkg-form .field + .field { margin-top: 12px; }

/* ─── 11v. Polish-Hacks für die Hauptseite ───────────────────────── */

/* (a) Text-Selection in Brand-Blau — kleines Detail, großer Effekt */
::selection {
  background: rgb(46 91 232 / 0.22);
  color: var(--ink);
}
::-moz-selection {
  background: rgb(46 91 232 / 0.22);
  color: var(--ink);
}

/* (b) Nav-Link „Ratgeber" als Akzent — leicht hervorgehoben, ohne aufdringlich
       zu sein. Pille mit Brand-Hauch beim Hover. */
.nav-link-accent {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--sun-50);
  color: var(--accent) !important;
  font-weight: var(--fw-semibold) !important;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.nav-link-accent::before {
  content: "📖";
  font-size: 13px;
  filter: grayscale(0.15) saturate(1.1);
}
.nav-link-accent:hover {
  background: var(--sun-100);
  color: var(--accent) !important;
  transform: translateY(-1px);
}

/* (c) Lead-Magnet-Karten kriegen einen Hover-Lift — fühlt sich klickbar an */
.pkg {
  transition: transform var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft);
  will-change: transform;
}
.pkg:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px -20px rgba(11, 29, 69, 0.32),
              0 12px 22px -12px rgba(11, 29, 69, 0.22);
}
/* Innenrahmen mit-animieren, damit's nicht wackelt */
.pkg:hover .frame {
  border-color: rgba(246, 242, 234, 0.34);
}

/* (d) Hero-Trust-Indikatoren: Trennstriche zwischen den Items.
       Wird auf Mobile wieder als Flex-Column gestapelt. */
@media (min-width: 720px) {
  .hero-trust {
    flex-wrap: wrap;
    gap: 0 !important;
  }
  .hero-trust > span {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border-left: 1px solid var(--line-cool);
  }
  .hero-trust > span:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* (e) Hover auf normalen Nav-Links — sanfter underline-Akzent */
.nav-links a:not(.nav-link-accent) {
  position: relative;
}
.nav-links a:not(.nav-link-accent)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--sun-500);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-soft);
}
.nav-links a:not(.nav-link-accent):hover::after {
  transform: scaleX(0.8);
}

/* ─── 11u. Anfrage-Success: Ratgeber-Sofortzugriff ───────────────── */
.success-ratgeber {
  margin: 4px 0 28px;
  padding: 22px 24px;
  background: var(--sun-50);
  border: 1px solid var(--sun-100);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.success-ratgeber .btn { white-space: nowrap; }
.success-ratgeber-note {
  font: 13.5px/1.5 var(--font-body);
  color: var(--ink-2);
  margin: 0;
  max-width: 44ch;
  text-align: center;
}

/* ============================================================
   11y: FÖRDERUNGS-SNAPSHOT 2026
   ============================================================ */
.foerderung-section { padding: clamp(56px, 8vw, 100px) 0; }
.foerder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.foerder-card {
  background: #fff;
  border: 1px solid var(--line-cool);
  border-radius: var(--r-lg);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 14px 30px -16px rgba(11, 29, 69, 0.18);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.foerder-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200, #c7d4f0);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 22px 38px -16px rgba(11, 29, 69, 0.25);
}
.foerder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-cool);
}
.foerder-tag {
  font: var(--fw-semibold) 12px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-500);
}
.foerder-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.foerder-pv .foerder-icon { background: var(--sun-50); color: var(--sun-500); }
.foerder-wp .foerder-icon { background: #e8f4ff; color: var(--brand-500); }
.foerder-extra .foerder-icon { background: #eef7ed; color: #4a8050; }
.foerder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foerder-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 18px;
  position: relative;
}
.foerder-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-500);
}
.foerder-pv .foerder-list li::before { background: var(--sun-500); }
.foerder-extra .foerder-list li::before { background: #4a8050; }
.foerder-list strong {
  font: var(--fw-semibold) 15px/1.3 var(--font-body);
  color: var(--ink);
}
.foerder-list span {
  font: 13px/1.45 var(--font-body);
  color: var(--ink-2);
}
.foerder-note {
  margin: 28px auto 0;
  max-width: 64ch;
  text-align: center;
  font: 13.5px/1.55 var(--font-body);
  color: var(--ink-3);
  padding: 14px 20px;
  background: var(--bg-paper);
  border-left: 3px solid var(--sun-500);
  border-radius: 4px;
}
.foerder-note strong { color: var(--ink); }
.foerder-note em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brand-500);
}

/* ============================================================
   11z: LEGAL-SEITEN (Impressum, Datenschutz)
   ============================================================ */
.legal-main { padding: 56px 0 80px; background: var(--bg-paper); min-height: 60vh; }
.legal-container { max-width: 760px; }
.legal-main h1 {
  font: var(--fw-bold) clamp(28px, 4vw, 40px)/1.15 var(--font-display);
  color: var(--ink);
  margin: 0 0 8px;
}
.legal-main h2 {
  font: var(--fw-semibold) 19px/1.3 var(--font-display);
  color: var(--brand-600);
  margin: 36px 0 8px;
}
.legal-main p, .legal-main li {
  font: 15px/1.65 var(--font-body);
  color: var(--ink);
}
.legal-lead {
  color: var(--ink-2);
  margin: 0 0 20px;
}
.legal-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.legal-list li {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line-cool);
  border-radius: var(--r-md);
}
.legal-list small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 6px;
}
.legal-list a, .legal-main a { color: var(--brand-500); text-decoration: underline; text-underline-offset: 3px; }
.legal-foot {
  margin-top: 36px;
  padding: 14px 16px;
  background: var(--sun-50);
  border-left: 3px solid var(--sun-500);
  font: 14px/1.5 var(--font-body);
  color: var(--ink-2);
  border-radius: 4px;
}
.legal-foot em { font-family: var(--font-display); font-style: italic; color: var(--brand-500); }

/* ============================================================
   11x: 404-SEITE
   ============================================================ */
.notfound-main {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  padding: 60px 0;
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(11,29,69,0.05), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(252,184,52,0.10), transparent 60%),
    var(--bg-paper);
}
.notfound-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.notfound-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: var(--fw-bold) clamp(120px, 22vw, 200px)/1 var(--font-display);
  color: var(--brand-600);
  line-height: 1;
  letter-spacing: -0.04em;
}
.notfound-code .nf-sun {
  color: var(--sun-500);
  font-size: 0.85em;
  display: inline-block;
  animation: nf-spin 8s linear infinite;
}
@keyframes nf-spin { to { transform: rotate(360deg); } }
.notfound-title {
  margin: 18px 0 12px;
  font: var(--fw-bold) clamp(28px, 4vw, 40px)/1.15 var(--font-display);
  color: var(--ink);
}
.notfound-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brand-500);
}
.notfound-lead {
  font: 16px/1.55 var(--font-body);
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0 auto 28px;
}
.notfound-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.notfound-links {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  font: 13.5px/1.4 var(--font-body);
  color: var(--ink-3);
}
.notfound-links a {
  color: var(--brand-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.notfound-links a:hover { border-bottom-color: var(--brand-500); }

/* ============================================================
   11w: WHATSAPP-FAB + STICKY MOBILE-CTA
   ============================================================ */
.fab-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 24px -8px rgba(37, 211, 102, 0.55),
    0 4px 10px -4px rgba(0, 0, 0, 0.2);
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
}
.fab-whatsapp:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 14px 28px -8px rgba(37, 211, 102, 0.7),
    0 6px 14px -4px rgba(0, 0, 0, 0.22);
}
.fab-whatsapp svg {
  width: 30px;
  height: 30px;
}
@media (max-width: 720px) {
  .fab-whatsapp {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: 92px; /* above sticky CTA bar */
  }
  .fab-whatsapp svg { width: 26px; height: 26px; }
}

.mobile-cta-bar {
  display: none;
}
@media (max-width: 720px) {
  .mobile-cta-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 70;
    padding: 8px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--line-cool);
    border-radius: 16px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 18px 36px -14px rgba(11, 29, 69, 0.30),
      0 6px 14px -6px rgba(11, 29, 69, 0.12);
  }
  .mcta-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    font: var(--fw-semibold) 13px/1.1 var(--font-body);
  }
  .mcta-call {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line-cool);
  }
  .mcta-primary {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    border: 1px solid var(--brand-600);
  }
  .mcta-ico {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-paper);
    color: var(--brand-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  .mcta-primary .mcta-ico {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  .mcta-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .mcta-txt strong {
    font: var(--fw-bold) 13px/1.1 var(--font-body);
  }
  .mcta-txt small {
    font: 11px/1.1 var(--font-body);
    opacity: 0.8;
  }
  /* Avoid footer being hidden behind CTA */
  body { padding-bottom: 84px; }
}

/* ============================================================
   12: BLOG & ARTIKEL
   Hub (/blog/) + Einzelartikel — Typografie, Cover-Cards, Lese-Layout.
   ============================================================ */
.blog-main {
  padding: clamp(56px, 8vw, 96px) 0 clamp(80px, 10vw, 120px);
  background:
    radial-gradient(1100px 600px at 8% -10%, rgba(255, 200, 80, 0.10), transparent 60%),
    radial-gradient(1000px 600px at 100% 8%, rgba(11, 26, 71, 0.05), transparent 60%),
    var(--bg-paper);
  min-height: 100vh;
}

.blog-hero {
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.blog-hero h1 {
  font: var(--fw-bold) clamp(34px, 5.6vw, 56px) / 1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 18px;
}
.blog-hero h1 em {
  color: var(--accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
}
.blog-hero-lead {
  font: 18px/1.55 var(--font-body);
  color: var(--ink-2);
  max-width: 600px;
  margin: 0 auto;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.blog-card {
  background: #fff;
  border: 1px solid var(--line-cool);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 4px 16px rgba(11, 26, 71, 0.04);
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: 0 12px 36px rgba(11, 26, 71, 0.10);
}
.blog-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
  padding: 18px 20px;
  overflow: hidden;
}
.blog-card-cover.has-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.blog-card-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.25));
  pointer-events: none;
}
.blog-cover-pv {
  background:
    radial-gradient(600px 300px at 80% 20%, rgba(255, 255, 255, 0.30), transparent 60%),
    linear-gradient(135deg, #f59e0b, #d97706);
}
.blog-cover-wp {
  background:
    radial-gradient(600px 300px at 20% 30%, rgba(255, 255, 255, 0.20), transparent 60%),
    linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.blog-cover-mix {
  background:
    radial-gradient(600px 320px at 70% 30%, rgba(34, 211, 238, 0.45), transparent 60%),
    linear-gradient(135deg, var(--brand-900), var(--brand-700));
}
.blog-card-tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  font: var(--fw-semibold) 12px/1 var(--font-body);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.blog-card-icon {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.92);
  z-index: 1;
}

.blog-card-body {
  padding: 22px 24px 26px;
}
.blog-card-body h2 {
  font: var(--fw-semibold) 22px/1.25 var(--font-display);
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.blog-card-body p {
  font: 15px/1.55 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 14px;
}
.blog-card-meta {
  display: block;
  font: var(--fw-medium) 12px/1.4 var(--font-body);
  color: #6B7280;
  letter-spacing: 0.02em;
}

.blog-cta {
  margin-top: clamp(56px, 7vw, 88px);
}
.blog-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  background: #1E4FB0;
  color: #fff;
  border-radius: 22px;
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  box-shadow: 0 16px 50px rgba(11, 26, 71, 0.20);
}
.blog-cta-inner h3 {
  font: var(--fw-semibold) clamp(22px, 3vw, 28px)/1.2 var(--font-display);
  color: #fff;
  margin: 0 0 10px;
}
/* Kursive Hervorhebung auf ALLEN dunklen CTAs einheitlich hellblau (#6AA0FF) —
   genau wie auf den dunklen Abschnitten der Startseite (.section--deep).
   Überschreibt die globale `h..em { … !important }`-Regel inkl.
   -webkit-text-fill-color (sonst gewinnt auf WebKit die alte Farbe). */
.blog-cta-inner h3 em,
.article-cta h3 em {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Ratgeber-CTA: Kursiv-Hervorhebungen weiß (auf Wunsch) */
.rg-section--cta h2 em,
.rg-section--cta .rg-cta-lead em {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.blog-cta-inner p {
  font: 16px/1.55 var(--font-body);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 22px;
}
.blog-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------- Einzelartikel ---------- */
.article-main {
  padding: clamp(40px, 6vw, 72px) 0 clamp(80px, 10vw, 120px);
  background: var(--bg-paper);
}
.article-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

.breadcrumb {
  font: var(--fw-medium) 13px/1.4 var(--font-body);
  color: #6B7280;
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}
.breadcrumb a {
  color: var(--brand-600);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current="page"] {
  color: var(--ink-2);
}

.article-head {
  margin-bottom: clamp(32px, 5vw, 48px);
}
.article-tag {
  display: inline-block;
  padding: 6px 14px;
  background: var(--sun-50);
  color: var(--accent);
  border-radius: 999px;
  font: var(--fw-semibold) 12px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.article-head h1 {
  font: var(--fw-bold) clamp(30px, 4.6vw, 46px)/1.12 var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.article-lead {
  font: 19px/1.55 var(--font-body);
  color: var(--ink-2);
  margin: 0 0 18px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font: var(--fw-medium) 13px/1.4 var(--font-body);
  color: #6B7280;
  padding-top: 16px;
  border-top: 1px solid var(--line-cool);
}

.article-body {
  font: 17px/1.7 var(--font-body);
  color: var(--ink);
}
.article-body h2 {
  font: var(--fw-semibold) clamp(22px, 2.8vw, 28px)/1.25 var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: clamp(36px, 5vw, 52px) 0 16px;
}
.article-body h3 {
  font: var(--fw-semibold) 19px/1.3 var(--font-display);
  color: var(--ink);
  margin: 32px 0 12px;
}
.article-body p {
  margin: 0 0 18px;
}
.article-body ul,
.article-body ol {
  margin: 0 0 22px;
  padding-left: 24px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.article-body a {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover {
  color: var(--brand-700);
  text-decoration-thickness: 2px;
}
.article-body blockquote {
  margin: 24px 0;
  padding: 8px 0 8px 22px;
  border-left: 3px solid var(--accent);
  font: italic 17px/1.55 var(--font-body);
  color: var(--ink-2);
}

.lead-callout {
  background: linear-gradient(135deg, var(--sun-50), #fff);
  border: 1px solid var(--sun-100);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 28px;
}
.lead-callout strong {
  display: block;
  font: var(--fw-bold) 12px/1 var(--font-body);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lead-callout p {
  margin: 0;
  font: 16px/1.55 var(--font-body);
  color: var(--ink);
}

.article-fact-box {
  background: #fff;
  border: 1px solid var(--line-cool);
  border-left: 4px solid var(--brand-500);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 28px 0;
  box-shadow: 0 4px 14px rgba(11, 26, 71, 0.04);
}
.article-fact-box h3 {
  margin: 0 0 14px;
  font: var(--fw-semibold) 16px/1.3 var(--font-display);
  color: var(--brand-700);
  letter-spacing: 0.01em;
}
.article-fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.article-fact-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-cool);
  font: 15px/1.4 var(--font-body);
  color: var(--ink-2);
  margin: 0;
}
.article-fact-list li:last-child {
  border-bottom: none;
}
.article-fact-list li strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.article-cta {
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: clamp(28px, 4vw, 40px);
  background: #1E4FB0;
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 16px 50px rgba(11, 26, 71, 0.20);
}
.article-cta h3 {
  font: var(--fw-semibold) clamp(20px, 2.6vw, 26px)/1.25 var(--font-display);
  margin: 0 0 10px;
  color: #fff;
}
.article-cta p {
  font: 16px/1.55 var(--font-body);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 22px;
}
.article-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.article-related {
  margin: clamp(56px, 7vw, 80px) 0 0;
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line-cool);
}
.article-related h3 {
  font: var(--fw-semibold) 20px/1.3 var(--font-display);
  color: var(--ink);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.related-card {
  display: block;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line-cool);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.related-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: 0 8px 20px rgba(11, 26, 71, 0.06);
}
.related-tag {
  display: block;
  font: var(--fw-semibold) 11px/1 var(--font-body);
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.related-card strong {
  display: block;
  font: var(--fw-semibold) 16px/1.35 var(--font-display);
  color: var(--ink);
  margin-bottom: 8px;
}
.related-meta {
  display: block;
  font: 13px/1.4 var(--font-body);
  color: #6B7280;
}

@media (max-width: 720px) {
  .article-body { font-size: 16px; }
  .article-fact-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ============================================================
   13: EMPFEHLUNG — WhatsApp-Senden-Button + Submit-Row
   ============================================================ */
.referral-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 8px 0 4px;
}
.referral-submit-row .btn { flex: 1 1 240px; }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  border: 1px solid #1FBA58;
  border-radius: 999px;
  padding: 14px 22px;
  font: var(--fw-semibold) 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}
.btn-whatsapp:hover {
  background: #1FBA58;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.30);
}
.btn-whatsapp:active { transform: translateY(0); }
.btn-whatsapp svg { display: block; }

/* ============================================================
   SEITENÜBERGÄNGE — Cross-Document View Transitions
   ------------------------------------------------------------
   Weiches Überblenden beim Navigieren zwischen den Seiten
   (Start ↔ Anfrage ↔ Ratgeber ↔ Blog …). Reine CSS-Lösung,
   kein JavaScript.
   · Chrome / Edge / Safari: sanfter Übergang
   · Firefox & ältere Browser: normaler Seitenwechsel (kein Bruch)
   · Funktioniert nur über http(s) — also über den Vorschau-Server
     bzw. später live, NICHT beim direkten Öffnen einer Datei.
   ============================================================ */
@view-transition { navigation: auto; }

/* Die ganze Seite blendet kurz und ruhig über, mit minimalem Drift. */
::view-transition-old(root) {
  animation: vt-page-out 200ms var(--ease-soft, cubic-bezier(.4,0,.2,1)) both;
}
::view-transition-new(root) {
  animation: vt-page-in 320ms var(--ease-soft, cubic-bezier(.4,0,.2,1)) 70ms both;
}
@keyframes vt-page-out {
  to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Das Logo ist über alle Seiten dasselbe Element: es bleibt beim
   Wechsel ruhig stehen / gleitet sanft an seinen Platz, statt zu
   flackern. (Nav-Logo der Start-/Empfehlungsseite + Header-Logo
   der Unterseiten — das Footer-Logo bleibt bewusst außen vor.) */
.nav .brand-logo,
.anfrage-brand .brand-logo { view-transition-name: site-logo; }
::view-transition-group(site-logo) {
  animation-duration: 340ms;
  animation-timing-function: var(--ease-soft, cubic-bezier(.4,0,.2,1));
}

/* Barrierefreiheit: „Weniger Bewegung" → schlichtes Ein-/Ausblenden
   ohne Versatz. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-fade-simple 140ms ease both; }
  ::view-transition-new(root) { animation: vt-fade-simple 160ms ease both; }
  @keyframes vt-fade-simple { from { opacity: 0; } to { opacity: 1; } }
}

/* Blog-/Artikel-CTA auf blauem Grund: 'Anfrage senden' weiß mit blauer
   Schrift (sonst blau auf blau = unsichtbar) — passend zur Ratgeber-Box. */
.blog-cta-inner .btn-primary,
.article-cta .btn-primary { background: #fff; color: var(--green-600); }
.blog-cta-inner .btn-primary:hover,
.article-cta .btn-primary:hover { background: rgba(255, 255, 255, 0.9); }