/* ==========================================================================
   KAPITALWERK — Premium Website
   Design System: "Private Wealth / Editorial" — Gold & Navy Luxe
   Fonts: Playfair Display (Headlines) · Inter (UI/Body)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand — Navy */
  --navy-950: #0a0e18;
  --navy-900: #0e1320;
  --navy-800: #141927;   /* kw-navy */
  --navy-700: #1c2236;   /* kw-navy-light */
  --navy-600: #28304a;
  --navy-500: #3b4572;   /* kw-navy-500 */

  /* Brand — Gold (champagne) */
  --gold: #c9a84c;
  --gold-400: #d8bd6a;
  --gold-300: #e6d29a;
  --gold-600: #b08e36;
  --gold-soft: rgba(201, 168, 76, 0.12);
  --gold-line: rgba(201, 168, 76, 0.35);

  /* Brand secondary — from logo (used sparingly) */
  --sky: #41a0f0;
  --green: #5ac346;

  /* Neutrals — warm */
  --cream: #f7f5f0;
  --cream-200: #efeae0;
  --cream-300: #e6dfd1;
  --paper: #ffffff;
  --ink: #1a1e2a;
  --ink-soft: #4a4f5e;
  --muted: #767a86;
  --line: rgba(20, 25, 39, 0.10);
  --line-strong: rgba(20, 25, 39, 0.16);

  /* On-dark text (faint ≥ 0.56 → hält 4.5:1 auf Navy für Kleintext) */
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-soft: rgba(255, 255, 255, 0.72);
  --on-dark-faint: rgba(255, 255, 255, 0.56);
  --on-dark-line: rgba(255, 255, 255, 0.14);

  /* Feiner Film-Korn-Layer gegen sterile Flächen (Foto-/Navy-Ebenen) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

  /* Type */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(13, 18, 32, 0.06), 0 2px 8px rgba(13, 18, 32, 0.05);
  --shadow-md: 0 8px 24px rgba(13, 18, 32, 0.10), 0 2px 6px rgba(13, 18, 32, 0.06);
  --shadow-lg: 0 24px 60px rgba(13, 18, 32, 0.16), 0 8px 20px rgba(13, 18, 32, 0.08);
  --shadow-gold: 0 14px 40px rgba(176, 142, 54, 0.30);

  /* Layout */
  --container: 1240px;
  --container-narrow: 880px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --header-h: 84px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. Reset / base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scrollleiste immer reservieren: verhindert horizontalen Versatz des Headers
   (Lupe/Buttons) zwischen kurzen und langen Seiten. overflow-y:scroll wirkt
   zuverlaessig ueberall; scrollbar-gutter allein reserviert am Root nicht. */
html { overflow-x: clip; overflow-y: scroll; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }

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

/* ---------- 3. Typography ------------------------------------------------ */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; color: var(--navy-800); }

.h-display { font-size: clamp(2.7rem, 6.2vw, 5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
h1, .h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
h2, .h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3, .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }
h4, .h4 { font-size: 1.12rem; line-height: 1.3; }

.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 500; }

p { color: var(--ink-soft); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.62; color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 600; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* ---------- 4. Layout helpers ------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.container.narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(72px, 10vw, 140px); position: relative; }
.section.tight { padding-block: clamp(48px, 6vw, 84px); }

.bg-cream { background: var(--cream); }
.bg-paper { background: var(--paper); }
.bg-navy { background-color: var(--navy-900); background-image: var(--grain); color: var(--on-dark); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-navy p, .bg-navy .lead { color: var(--on-dark-soft); }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxw-60 { max-width: 60ch; }
.maxw-50 { max-width: 50ch; }

/* Kicker — „Goldstimme": serifenkursive Zwischenstimme statt Tracked-Uppercase.
   Bewusstes Marken-System (greift den kursiven Gold-Akzent der H1 auf). */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem); letter-spacing: 0;
  text-transform: none; color: var(--gold-600); line-height: 1.3;
}
.eyebrow::before { content: "— "; color: var(--gold); font-style: normal; }
.eyebrow.center-line { justify-content: center; }
.bg-navy .eyebrow { color: var(--gold-300); }

.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 { margin-bottom: 18px; }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --b-bg: var(--gold); --b-fg: var(--navy-900);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em;
  background: var(--b-bg); color: var(--b-fg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s var(--ease), color .3s;
  position: relative; overflow: hidden; will-change: transform;
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }

.btn--gold { --b-bg: var(--gold); --b-fg: var(--navy-900); }
.btn--gold::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45), transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn--gold:hover::after { transform: translateX(120%); }

.btn--navy { --b-bg: var(--navy-800); --b-fg: #fff; }
.btn--navy:hover { box-shadow: var(--shadow-lg); }

.btn--outline { background: transparent; color: var(--navy-800); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--navy-800); transform: translateY(-2px); }
.bg-navy .btn--outline, .hero .btn--outline, .immo-hero .btn--outline, .pagehero .btn--outline, .cta-band .btn--outline, .mobile-nav .btn--outline {
  color: #fff; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.bg-navy .btn--outline:hover, .hero .btn--outline:hover, .immo-hero .btn--outline:hover, .pagehero .btn--outline:hover, .cta-band .btn--outline:hover, .mobile-nav .btn--outline:hover {
  color: var(--gold-300); background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1.5px var(--gold); transform: translateY(-2px);
}

.btn--ghost { background: transparent; color: var(--gold-600); padding-inline: 4px; }
.btn--ghost:hover { color: var(--gold); transform: none; box-shadow: none; }
.bg-navy .btn--ghost, .hero .btn--ghost, .immo-hero .btn--ghost, .pagehero .btn--ghost, .cta-band .btn--ghost { color: var(--gold-300); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gold-600); transition: gap .3s var(--ease); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover { gap: 12px; }
.bg-navy .link-arrow { color: var(--gold-300); }

/* ---------- 6. Header / Nav --------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1400px; padding-inline: clamp(20px, 3vw, 40px); }

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm); height: 70px;
  border-bottom: 1px solid var(--line);
}
/* transparent-over-hero variant (dark hero) */
.site-header.on-dark:not(.scrolled) { color: #fff; }
.site-header.on-dark:not(.scrolled) .nav-link { color: var(--on-dark); }
.site-header.on-dark:not(.scrolled) .logo-text { color: #fff; }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 56px; width: auto; transition: height .4s var(--ease); display: block; }
.site-header.scrolled .brand img { height: 47px; }
.brand .logo-ondark { display: none; }
.site-header.on-dark:not(.scrolled) .brand .logo-color { display: none; }
.site-header.on-dark:not(.scrolled) .brand .logo-ondark { display: block; }

.main-nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 10px 11px; font-size: 0.95rem; font-weight: 500; color: var(--navy-700);
  border-radius: 10px;
  transition: color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
/* animierter Unterstrich, wächst aus der Mitte */
.nav-link::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--gold-400), var(--gold));
  transform: scaleX(0); transform-origin: center;
  transition: transform .32s var(--ease); pointer-events: none;
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-link.active { color: var(--gold-600); }
.nav-link:hover, .nav-item:hover > .nav-link { background: var(--gold-soft); transform: translateY(-1px); }
.nav-link:hover::after, .nav-item:hover > .nav-link::after, .nav-link.active::after { transform: scaleX(1); }

/* dunkle Hero-Variante (transparenter Header über dem Bild) */
.site-header.on-dark:not(.scrolled) .nav-link.active { color: var(--gold-300); }
.site-header.on-dark:not(.scrolled) .nav-link:hover,
.site-header.on-dark:not(.scrolled) .nav-item:hover > .nav-link { color: var(--gold-300); background: rgba(255, 255, 255, .12); }
.site-header.on-dark:not(.scrolled) .nav-link::after { background: linear-gradient(90deg, var(--gold-300), var(--gold-400)); }

.nav-link .chev { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav-item:hover .chev { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-link, .nav-link::after { transition: color .25s, background-color .25s; }
  .nav-link:hover, .nav-item:hover > .nav-link { transform: none; }
}

/* Mega dropdown */
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px);
  width: min(680px, 88vw); background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: 14px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 18px; }
.mega-link { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 12px; transition: background-color .25s; }
.mega-link:hover { background: var(--cream); }
.mega-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-600);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .3s var(--ease), color .3s var(--ease), box-shadow .35s var(--ease); }
.mega-ico svg { width: 22px; height: 22px; overflow: visible; }
.mega-link:hover .mega-ico, .mega-link:focus-visible .mega-ico {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: #fff; transform: translateY(-3px) scale(1.07);
  box-shadow: 0 10px 20px -8px rgba(176, 142, 54, .55);
}

/* Mega-Menü: animierte Icons ---------------------------------------------- */
.mi { transition: transform .4s var(--ease); }
.mi-leafL, .mi-leafR, .mi-head, .mi-tw, .mi-heart, .mi-bubble, .mi-qdot,
.mi-door, .mi-roof, .mi-ribbon, .mi-pgL, .mi-pgR { transform-box: fill-box; }
.mi-line, .mi-check, .mi-q, .mi-door, .mi-roof, .mi-ribbon, .mi-pgL, .mi-pgR { transition: transform .4s var(--ease), stroke-dashoffset .5s var(--ease); }

/* Altersvorsorge — Blätter wachsen */
.mi-leafL { transform-origin: bottom right; }
.mi-leafR { transform-origin: bottom left; }
.mega-link:hover .mi--vorsorge .mi-leafL { animation: mi-grow .55s var(--ease) .04s backwards; }
.mega-link:hover .mi--vorsorge .mi-leafR { animation: mi-grow .55s var(--ease) .12s backwards; }

/* Vermögensaufbau — Linie zeichnet, Pfeil ploppt */
.mi--trend .mi-line { stroke-dasharray: 30; }
.mega-link:hover .mi--trend .mi-line { animation: mi-draw .6s var(--ease); }
.mi-head { transform-origin: center; }
.mega-link:hover .mi--trend .mi-head { animation: mi-popin .4s var(--ease) .34s backwards; }

/* Immobilien — Dach hebt, Tür öffnet */
.mi-roof { transform-origin: center; }
.mega-link:hover .mi--home .mi-roof { transform: translateY(-2px); }
.mi--home .mi-door { transform-origin: bottom; }
.mega-link:hover .mi--home .mi-door { transform: scaleY(.55); }

/* Immobiliensuche — Kompassnadel dreht */
.mi-needle { transform-box: view-box; transform-origin: 12px 12px; }
.mega-link:hover .mi--compass .mi-needle { animation: mi-spin .8s var(--ease); }

/* Absicherung — Haken zeichnet */
.mi--shield .mi-check { stroke-dasharray: 12; }
.mega-link:hover .mi--shield .mi-check { animation: mi-draw .5s var(--ease) .05s backwards; }

/* Generationen — Herz pulsiert */
.mi-heart { transform-origin: center; }
.mega-link:hover .mi--users .mi-heart { animation: mi-pulse .8s var(--ease) .05s; }

/* Seltene Erden — Funkeln */
.mi-tw { transform-origin: center; opacity: 0; }
.mega-link:hover .mi--gem .mi-tw { animation: mi-tw .75s var(--ease) .1s forwards; }

/* Berater finden — Pin hüpft */
.mi-pin { transform-box: view-box; transform-origin: 12px 20px; }
.mega-link:hover .mi--pin .mi-pin { animation: mi-bounce .65s var(--ease); }

/* Ratgeber — Buch öffnet */
.mi-pgL { transform-origin: right center; }
.mi-pgR { transform-origin: left center; }
.mega-link:hover .mi--book .mi-pgL { transform: scaleX(1.09) rotate(-2deg); }
.mega-link:hover .mi--book .mi-pgR { transform: scaleX(1.09) rotate(2deg); }

/* Finanzlexikon — Lesezeichen fährt aus */
.mi-ribbon { transform-origin: top center; }
.mega-link:hover .mi--lexikon .mi-ribbon { transform: translateY(2.5px) scaleY(1.18); }

/* Häufige Fragen — Blase ploppt, Fragezeichen zeichnet */
.mi-bubble { transform-origin: center; }
.mega-link:hover .mi--faq .mi-bubble { animation: mi-pop .5s var(--ease); }
.mi--faq .mi-q { stroke-dasharray: 11; }
.mega-link:hover .mi--faq .mi-q { animation: mi-draw .5s var(--ease) .12s backwards; }
.mega-link:hover .mi--faq .mi-qdot { animation: mi-popin .3s var(--ease) .42s backwards; }

@keyframes mi-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes mi-grow { 0% { transform: scale(.25); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mi-popin { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes mi-spin { to { transform: rotate(360deg); } }
@keyframes mi-pulse { 0%,100% { transform: scale(1); } 40% { transform: scale(1.35); } 70% { transform: scale(.92); } }
@keyframes mi-tw { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 60% { transform: scale(1.2) rotate(0); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mi-bounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 55% { transform: translateY(0); } 78% { transform: translateY(-1.5px); } }
@keyframes mi-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .mega-ico, .mi, .mi * { transition: none !important; animation: none !important; }
  .mi-tw { opacity: 1 !important; }
}
.mega-link b { display: block; font-size: 0.98rem; color: var(--navy-800); font-weight: 600; margin-bottom: 2px; }
.mega-link span { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-cta > .btn { padding: 12px 22px; }
/* Kundenbereich-Login (Header, passt sich transparentem/gescrolltem Header an) */
.nav-login { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 0.9rem; padding: 9px 17px; border-radius: var(--radius-pill); color: var(--navy-800); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow .25s, color .25s, background .25s, transform .25s; }
.nav-login svg { width: 17px; height: 17px; }
.nav-login:hover { color: var(--gold-600); box-shadow: inset 0 0 0 1.5px var(--gold); transform: translateY(-1px); }
.site-header.on-dark:not(.scrolled) .nav-login { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.38); }
.site-header.on-dark:not(.scrolled) .nav-login:hover { color: var(--gold-300); box-shadow: inset 0 0 0 1.5px var(--gold-300); }
@media (max-width: 1300px) { .nav-login { padding: 9px 11px; } .nav-login .nl-txt { display: none; } }
/* Enger Desktop (≤1240): volle Nav + Login weichen dem Burger, Logo + Haupt-CTA bleiben */
@media (max-width: 1240px) { .main-nav, .nav-login { display: none; } }

/* Burger — <button> erbt die Header-color NICHT (UA-Stylesheet), daher explizit setzen */
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; place-items: center; color: var(--navy-800); background: none; border: 0; cursor: pointer; }
/* Über dunklem Hero (Bild/Video, ungescrollt): weiß. Nach dem Scrollen wieder dunkel. */
.site-header.on-dark:not(.scrolled) .burger { color: #fff; }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: .3s var(--ease); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: .3s var(--ease); }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .burger span::after { top: 0; transform: rotate(-45deg); }
/* Bei geöffnetem Menü liegt der Burger über dem dunklen Drawer → X immer weiß,
   auch wenn der Header (gescrollt) sonst dunkle Icons hätte */
body.menu-open .burger { color: #fff; }
/* nach der Basis-Regel, damit display:grid gewinnt (Kaskade) */
@media (max-width: 1240px) { .burger { display: grid; } }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99; background: var(--navy-900); color: #fff;
  padding: calc(var(--header-h) + 20px) clamp(24px, 7vw, 56px) 40px;
  transform: translateX(100%); transition: transform .5s var(--ease); overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
body.menu-open .mobile-nav { transform: translateX(0); }
.mobile-nav a.m-link { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: #fff; padding: 12px 0; border-bottom: 1px solid var(--on-dark-line); }
.mobile-nav .m-sub { font-size: 0.95rem; color: var(--gold-300); padding: 10px 0 10px 14px; font-family: var(--sans); border: 0; }
.mobile-nav .btn { margin-top: 24px; }

/* ---------- 7. Hero ------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--navy-950); }
.hero__media { position: absolute; inset: 0; z-index: 0; background-color: var(--navy-950); background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__video { background: transparent; }

/* ---- Hero-Rotation: 3 Varianten, gewählt via <html data-hero> (FOUC-frei im <head>) ---- */
/* Poster jeder Variante als CSS-Background — sichtbar bis das Video lädt, auf Mobile/reduced-motion dauerhaft. */
.hero__media { background-image: url(../img/hero/hero-video-poster.jpg); }          /* Default / kein JS: Variante 0 */
html[data-hero="1"] .hero__media { background-image: url(../img/hero/hero-familie-poster.jpg); }
html[data-hero="2"] .hero__media { background-image: url(../img/hero/hero-gipfel-poster.jpg); }
.hero__variant { display: none; }
.hero__variant[data-variant="0"] { display: block; }                                /* Fallback ohne JS */
html[data-hero] .hero__variant { display: none; }
html[data-hero="0"] .hero__variant[data-variant="0"],
html[data-hero="1"] .hero__variant[data-variant="1"],
html[data-hero="2"] .hero__variant[data-variant="2"] { display: block; }
.hero__media img.kenburns { animation: kenburns 24s ease-in-out infinite alternate; transform-origin: 62% 38%; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.18) translateY(-1.5%); } }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    var(--grain),
    linear-gradient(100deg, rgba(10,14,24,0.74) 0%, rgba(10,14,24,0.52) 38%, rgba(10,14,24,0.14) 72%, rgba(10,14,24,0.30) 100%),
    linear-gradient(0deg, rgba(10,14,24,0.68) 0%, transparent 38%);
}
/* Lesbarkeit auf hellerem Video/Foto: sanfter Schatten statt dunkler Fläche */
.hero h1, .hero .eyebrow { text-shadow: 0 2px 28px rgba(10, 14, 24, 0.55); }
.hero__sub, .hero__proof { text-shadow: 0 1px 18px rgba(10, 14, 24, 0.6); }
.hero__content { position: relative; z-index: 2; padding-top: var(--header-h); width: 100%; }
.hero__inner { max-width: 760px; }
.hero .eyebrow { color: var(--gold-300); margin-bottom: 26px; }
.hero h1 { color: #fff; margin-bottom: 26px; }
.hero h1 .accent { color: var(--gold-300); font-style: italic; font-weight: 500; }
.hero__sub { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--on-dark-soft); max-width: 56ch; margin-bottom: 40px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--on-dark-faint); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.scroll-cue .mouse { width: 24px; height: 38px; border: 1.5px solid var(--on-dark-line); border-radius: 14px; position: relative; }
.scroll-cue .mouse::after { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 3px; height: 7px; border-radius: 2px; background: var(--gold-300); animation: scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 12px); } 100% { opacity: 0; } }

/* ---------- 8. Marquee (partners) --------------------------------------- */
.marquee-wrap { padding-block: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.marquee-label { text-align: center; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 34px; }
.marquee { display: flex; gap: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(40px, 6vw, 80px); padding-right: clamp(40px, 6vw, 80px); animation: marquee 50s linear infinite; flex-shrink: 0; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img { height: 30px; width: auto; opacity: 0.5; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.marquee__track img:hover { opacity: 1; filter: grayscale(0); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 9. Pillars / theme cards ------------------------------------ */
.grid { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.pillar {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate;
  box-shadow: var(--shadow-md); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.pillar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,24,0.05) 0%, rgba(10,14,24,0.45) 55%, rgba(10,14,24,0.92) 100%); transition: background .5s; }
.pillar:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.pillar:hover img { transform: scale(1.07); }
.pillar__body { position: relative; padding: clamp(24px, 3vw, 34px); }
.pillar__no { font-family: var(--serif); font-size: 0.9rem; color: var(--gold-300); letter-spacing: 0.1em; margin-bottom: 12px; display: block; }
.pillar h3 { color: #fff; margin-bottom: 10px; }
.pillar p { color: rgba(255,255,255,0.78); font-size: 0.96rem; margin-bottom: 18px; }
.pillar .link-arrow { color: var(--gold-300); }
.pillar.tall { min-height: 100%; }

/* feature row (image + text) */
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.feature.reverse .feature__media { order: 2; }
.feature__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.feature__media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .9s var(--ease); }
.feature__media:hover img { transform: scale(1.04); }
.feature__media .badge-float { position: absolute; }
.feature__caption { margin: 0; padding: 14px 20px 16px; background: var(--paper); border-top: 1px solid var(--line); text-align: center; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.feature__caption strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; letter-spacing: .01em; }
.feature__text h2 { margin-bottom: 22px; }

/* Freigestelltes Teamfoto (auf Weiss) — nahtlos auf bg-paper, mit weicher Standflaeche */
.team-photo { position: relative; margin: clamp(38px, 5vw, 60px) auto 0; max-width: 1100px; }
.team-photo__frame { position: relative; display: block; }
.team-photo__frame img { width: 100%; height: auto; }
/* Weicher Auslauf: nimmt der harten Unterkante des Freistellers die Schaerfe */
.team-photo__fade { position: absolute; left: 0; right: 0; bottom: -1px; height: 26px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper)); pointer-events: none; }
/* Standlinie + weicher Bodenschatten, auf dem das Team „steht" */
.team-photo__base { position: relative; display: block; height: 2px; margin: 6px auto 0; width: min(86%, 1100px);
  border-radius: 2px;
  background: linear-gradient(to right, transparent, rgba(0,70,125,.20) 20%, rgba(0,70,125,.20) 80%, transparent); }
.team-photo__base::before { content: ""; position: absolute; left: 50%; top: -15px; transform: translateX(-50%);
  width: 66%; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,70,125,.18), rgba(0,70,125,0) 72%);
  filter: blur(5px); pointer-events: none; }
.feature ul.ticks { margin: 24px 0 30px; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.ticks li svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--gold-600); margin-top: 2px; }
.bg-navy .ticks li { color: var(--on-dark-soft); }
.bg-navy .ticks li svg { color: var(--gold-300); }
.bg-navy ul.ticks { margin-top: 6px; }

/* Nacheinander von links einblendende Häkchen-Liste (seriös, dezent) */
.ticks--stagger li { opacity: 0; transform: translateX(-26px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.ticks--stagger li svg { opacity: 0; transform: scale(.4) rotate(-8deg); transform-origin: center; transition: opacity .5s var(--ease), transform .55s var(--ease); }
.ticks--stagger.in li { opacity: 1; transform: none; }
.ticks--stagger.in li svg { opacity: 1; transform: none; }
.ticks--stagger.in li:nth-child(1) { transition-delay: .05s; }
.ticks--stagger.in li:nth-child(2) { transition-delay: .19s; }
.ticks--stagger.in li:nth-child(3) { transition-delay: .33s; }
.ticks--stagger.in li:nth-child(4) { transition-delay: .47s; }
.ticks--stagger.in li:nth-child(1) svg { transition-delay: .20s; }
.ticks--stagger.in li:nth-child(2) svg { transition-delay: .34s; }
.ticks--stagger.in li:nth-child(3) svg { transition-delay: .48s; }
.ticks--stagger.in li:nth-child(4) svg { transition-delay: .62s; }

/* ---------- 10. Stats ---------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); }
.stat { text-align: center; position: relative; padding: 8px 12px; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 18%; height: 64%; width: 1px; background: var(--on-dark-line); }
.stat b { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 700; line-height: 1; color: #fff; display: block; white-space: nowrap; }
.stat b .suffix { color: var(--gold-300); }
.stat span { display: block; margin-top: 12px; font-size: 0.92rem; color: var(--on-dark-soft); }

/* Premium-Kennzahlen (Startseite) — animierter Count-up + interaktive Kacheln */
.stats2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.stat2 { position: relative; text-align: center; padding: clamp(26px, 3vw, 40px) 16px clamp(24px, 2.6vw, 34px); border-radius: var(--radius-lg); border: 1px solid var(--on-dark-line); background: rgba(255,255,255,0.03); overflow: hidden; transition: transform .45s var(--ease), background .4s, border-color .4s, box-shadow .45s; }
.stat2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% 0%, rgba(201,168,76,0.18), transparent 68%); opacity: 0; transition: opacity .45s; pointer-events: none; }
.stat2:hover { transform: translateY(-7px); border-color: var(--gold-line); background: rgba(255,255,255,0.05); box-shadow: 0 26px 60px rgba(0,0,0,0.34); }
.stat2:hover::before { opacity: 1; }
.stat2__ico { position: relative; width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 15px; display: grid; place-items: center; color: var(--gold-300); background: rgba(201,168,76,0.10); border: 1px solid var(--gold-line); transition: background .4s var(--ease), color .4s, transform .5s var(--ease); }
.stat2__ico svg { width: 26px; height: 26px; }
.stat2:hover .stat2__ico { background: var(--gold); color: var(--navy-900); transform: translateY(-2px) scale(1.07); }
.stat2__num { position: relative; font-family: var(--serif); font-size: clamp(2.7rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1; color: #fff; white-space: nowrap; display: block; }
.stat2__num i { font-style: normal; color: var(--gold-300); font-size: 0.58em; font-weight: 700; margin-left: 3px; vertical-align: 0.18em; }
.stat2__label { position: relative; display: block; margin-top: 15px; font-size: 0.92rem; color: var(--on-dark-soft); line-height: 1.42; max-width: 22ch; margin-inline: auto; }
.stat2__bar { position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); border-radius: 3px 3px 0 0; transform: translateX(-50%); transition: width .55s var(--ease); }
.stat2:hover .stat2__bar { width: 62%; }
@media (max-width: 860px) { .stats2 { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 440px) { .stats2 { grid-template-columns: 1fr; } }

/* ---------- 11. Process (sticky) ---------------------------------------- */
.process { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 90px); align-items: start; }
.process__aside { position: sticky; top: calc(var(--header-h) + 30px); }
.process__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.process__steps { display: grid; gap: 18px; }
.pstep { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 28px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.pstep:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }
.pstep__no { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--gold-600); width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); flex-shrink: 0; }
.pstep h4 { margin-bottom: 8px; }
.pstep p { font-size: 0.96rem; }

/* ---------- 12. Tool / leadmagnet cards --------------------------------- */
.tool-card { display: flex; flex-direction: column; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; height: 100%; }
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }
.tool-card__ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--navy-800); color: var(--gold-300); margin-bottom: 18px; transition: background .4s; }
.tool-card:hover .tool-card__ico { background: var(--gold); color: var(--navy-900); }
.tool-card__ico svg { width: 24px; height: 24px; }
.tool-card__ico.gloss-letter { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--gold-300); }
.tool-card:hover .tool-card__ico.gloss-letter { color: var(--navy-900); }
.gloss-related { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); line-height: 2.4; }
.gloss-related .badge-chip { margin: 0 6px 6px 0; }
.gloss-related .badge-chip:hover { background: var(--gold); color: var(--navy-900); }
.tool-card h4 { margin-bottom: 8px; font-size: 1.08rem; }
.tool-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.5; margin-bottom: 18px; flex-grow: 1; }
.tool-card .tool-go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--gold-600); letter-spacing: 0.02em; }
.tool-card .tool-go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.tool-card:hover .tool-go svg { transform: translateX(4px); }
/* Echte Tool-Screenshots als Vorschau (ersetzen das Icon) */
.tool-card__shot { display: block; margin: -26px -26px 18px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--cream); }
.tool-card__shot img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.tool-card:hover .tool-card__shot img { transform: scale(1.045); }

/* Ratgeber-Lead-Magnet */
.magnet { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; background: var(--navy-800); background-image: var(--grain); color: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); margin: 44px 0 28px; box-shadow: var(--shadow-lg); }
.magnet__ico { width: 54px; height: 54px; border-radius: 14px; background: var(--gold); color: var(--navy-900); display: grid; place-items: center; }
.magnet__ico svg { width: 26px; height: 26px; }
.magnet__txt h3 { color: #fff; font-size: 1.35rem; margin-bottom: 6px; }
.magnet__txt p { color: var(--on-dark-soft); font-size: 0.95rem; margin: 0; }
.magnet__form { grid-column: 1 / -1; display: grid; gap: 12px; }
.magnet__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.magnet__form input[type=text], .magnet__form input[type=email] { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--on-dark-line); background: rgba(255,255,255,.07); color: #fff; }
.magnet__form input::placeholder { color: var(--on-dark-faint); }
.magnet__form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.22); }
.magnet__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; color: var(--on-dark-faint); }
.magnet__consent a { color: var(--gold-300); text-decoration: underline; }
.magnet__consent input { margin-top: 3px; }
.magnet .form-status.ok { color: #8fd19e; }
.magnet .form-status.err { color: #f2a29a; }
@media (max-width: 640px) { .magnet__row { grid-template-columns: 1fr; } }
.tool-badge { align-self: flex-start; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--gold-600); background: var(--gold-soft); padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 16px; }

/* pillar tab filter */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 48px; }
.tab { padding: 10px 20px; border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--line-strong); transition: .3s var(--ease); }
.tab:hover { border-color: var(--navy-800); }
.tab.active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* Tool-Gruppen (Beratungstools-Hub) — nach Kategorie strukturiert */
.tool-group + .tool-group { margin-top: 60px; }
.tool-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tool-group__head h3 { margin: 0; font-size: 1.45rem; }
.tool-group__count { flex: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ---------- 13. Testimonials -------------------------------------------- */
.quote-card { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); box-shadow: var(--shadow-md); border: 1px solid var(--line); display: flex; flex-direction: column; height: 100%; }
.quote-card .stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 18px; }
.quote-card .stars svg { width: 18px; height: 18px; }
.quote-card blockquote { font-family: var(--serif); font-size: 1.22rem; line-height: 1.5; color: var(--navy-800); font-weight: 500; margin-bottom: 24px; flex-grow: 1; }
.quote-card .who { display: flex; align-items: center; gap: 14px; }
.quote-card .who .av { width: 46px; height: 46px; border-radius: 50%; background: var(--navy-800); color: var(--gold-300); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; }
.quote-card .who b { display: block; font-size: 0.95rem; color: var(--navy-800); }
.quote-card .who span { font-size: 0.84rem; color: var(--muted); }

/* ---------- 14. Awards / trust badges ----------------------------------- */
.awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.award { text-align: center; padding: 30px 18px; border-radius: var(--radius); border: 1px solid var(--on-dark-line); background: rgba(255,255,255,0.03); transition: .4s var(--ease); }
.award:hover { border-color: var(--gold-line); background: rgba(201,168,76,0.06); transform: translateY(-4px); }
.award .ico { color: var(--gold-300); margin-bottom: 14px; display: flex; justify-content: center; }
.award .ico svg { width: 34px; height: 34px; }
.award b { font-family: var(--serif); display: block; color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.award span { font-size: 0.82rem; color: var(--on-dark-faint); }

/* ---------- 15. FAQ ------------------------------------------------------ */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; text-align: left; font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; color: var(--navy-800); }
.faq-q .pm { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; position: relative; transition: .3s var(--ease); }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--gold-600); border-radius: 2px; transition: .3s var(--ease); }
.faq-q .pm::before { width: 14px; height: 2px; } .faq-q .pm::after { width: 2px; height: 14px; }
.faq-item.open .faq-q .pm { background: var(--gold); border-color: var(--gold); }
.faq-item.open .faq-q .pm::before, .faq-item.open .faq-q .pm::after { background: var(--navy-900); }
.faq-item.open .faq-q .pm::after { transform: scaleY(0); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease); }
.faq-a__inner { padding: 0 4px 28px; color: var(--ink-soft); line-height: 1.7; max-width: 68ch; }

/* ---------- 16. CTA band ------------------------------------------------- */
.cta-band { position: relative; border-radius: clamp(20px, 3vw, 34px); overflow: hidden; isolation: isolate; padding: clamp(48px, 7vw, 96px); color: #fff; }
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain), linear-gradient(105deg, rgba(10,14,24,0.94), rgba(20,25,39,0.7) 60%, rgba(176,142,54,0.35)); }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: var(--on-dark-soft); max-width: 52ch; margin: 18px 0 34px; }

/* ---------- 17. Forms ---------------------------------------------------- */
.form-card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--navy-800); margin-bottom: 8px; letter-spacing: 0.01em; }
.field .req { color: var(--gold-600); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line-strong);
  background: var(--cream); color: var(--ink); transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px var(--gold-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--gold-600); }
.checkbox a { color: var(--gold-600); text-decoration: underline; }
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 14px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form-status { display: none; padding: 16px 18px; border-radius: 12px; font-size: 0.92rem; margin-bottom: 20px; }
.form-status.ok { display: block; background: rgba(90,195,70,0.12); color: #2e7d24; border: 1px solid rgba(90,195,70,0.4); }
.form-status.err { display: block; background: rgba(220,60,60,0.1); color: #b42424; border: 1px solid rgba(220,60,60,0.35); }

/* ---------- 18. Quiz (multi-step) --------------------------------------- */
.contact-grid { grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.quiz { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }
.quiz__bar { height: 5px; background: var(--cream-200); }
.quiz__bar i { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--gold-600), var(--gold)); transition: width .5s var(--ease); }
.quiz__body { padding: clamp(28px, 4vw, 48px); }
.quiz__step { display: none; animation: fadeUp .5s var(--ease); }
.quiz__step.active { display: block; }
.quiz__count { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600); font-weight: 600; margin-bottom: 14px; }
.quiz__q { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--navy-800); margin-bottom: 28px; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.opt { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; border: 1.5px solid var(--line-strong); transition: .3s var(--ease); text-align: left; }
.opt:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-2px); }
.opt.selected { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.opt .opt-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--navy-800); color: var(--gold-300); display: grid; place-items: center; flex-shrink: 0; }
.opt .opt-ico svg { width: 20px; height: 20px; }
.opt b { font-size: 0.98rem; color: var(--navy-800); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }

/* ---------- 19. Footer --------------------------------------------------- */
.disclaimer { background: var(--navy-950); color: var(--on-dark-faint); border-top: 1px solid var(--on-dark-line); }
.disclaimer .container { padding-block: 30px; }
.disclaimer p { font-size: 0.8rem; line-height: 1.7; color: var(--on-dark-faint); max-width: none; }
.disclaimer b { color: var(--on-dark-soft); font-weight: 600; }

.site-footer { background: var(--navy-900); color: var(--on-dark-soft); padding-block: clamp(56px, 7vw, 88px) 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 56px; border-bottom: 1px solid var(--on-dark-line); }
.footer-brand img { height: 40px; margin-bottom: 22px; }
.footer-brand p { color: var(--on-dark-faint); font-size: 0.92rem; max-width: 34ch; }
.footer-col h5 { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 20px; font-weight: 600; }
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { color: var(--on-dark-soft); font-size: 0.94rem; transition: color .25s; }
.footer-col a:hover { color: var(--gold-300); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 28px; font-size: 0.84rem; color: var(--on-dark-faint); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-bottom a:hover { color: var(--gold-300); }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--on-dark-line); display: grid; place-items: center; transition: .3s var(--ease); }
.footer-social a:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-300); }
.footer-social svg { width: 18px; height: 18px; }

/* ---------- 20. Reveal animations --------------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); filter: blur(4px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }

/* ---------- 21h. Scroll-FX: Parallax-Tiefe (gap-sicher via Übergröße) --- */
/* Hintergrund-Ebenen 20% übergroß, damit die Parallax-Drift nie eine Kante zeigt. */
.hero__media, .pagehero__bg { top: -10%; bottom: -10%; will-change: transform; }
.cta-band img { top: -10%; height: 120%; will-change: transform; }
.hero__content { will-change: transform, opacity; }

/* ---------- 21i. Premium-Pass: Fokus, Proof, Conversion ------------------ */
/* Sichtbarer Tastatur-Fokus (WCAG) — nur bei :focus-visible, nie bei Maus */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.bg-navy :focus-visible, .hero :focus-visible, .pagehero :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-300); }

/* Skip-Link (per JS injiziert) */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 500; background: var(--navy-900); color: #fff; padding: 12px 22px; border-radius: var(--radius-pill); font-weight: 600; transform: translateY(-200%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); }
.skip-link:focus-visible { transform: none; outline-offset: 0; }

/* Hero-Proof: eine ruhige Zeile statt Kennzahlen-Raster */
.hero__proof { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 6px; margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--on-dark-line); font-size: 0.98rem; color: var(--on-dark-soft); }
.hero__proof b { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: #fff; }
.hero__proof .sep { color: var(--gold); font-size: 1.05rem; }

/* Entlastungs-Notiz unter CTAs — Conversion ohne Druck */
.cta-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 0.88rem; color: var(--on-dark-faint); }
.cta-note svg { width: 15px; height: 15px; color: var(--gold-300); flex: none; }
/* Im cta-band liegt der Hinweis über einem Foto → kräftiger + Schatten für Lesbarkeit.
   Selektor muss die generische .bg-cream/.bg-paper .cta-note-Regel schlagen (höhere Spezifität). */
.cta-band .cta-note,
.bg-cream .cta-band .cta-note,
.bg-paper .cta-band .cta-note { color: rgba(255, 255, 255, 0.92); font-size: 0.94rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.bg-cream .cta-band .cta-note svg,
.bg-paper .cta-band .cta-note svg { color: var(--gold-300); }
.bg-cream .cta-note, .bg-paper .cta-note { color: var(--muted); }
.bg-cream .cta-note svg, .bg-paper .cta-note svg { color: var(--gold-600); }

/* Tool-Ledger: redaktionelle Zeilen statt Icon-Karten-Raster */
.ledger { margin-top: 48px; border-top: 1px solid var(--line-strong); }
.ledger__row { display: grid; grid-template-columns: auto minmax(170px, 0.9fr) 2fr auto; gap: clamp(16px, 3vw, 44px); align-items: center; padding: clamp(20px, 2.6vw, 30px) 4px; border-bottom: 1px solid var(--line-strong); transition: background .3s, padding-left .35s var(--ease); }
.ledger__thumb { width: 112px; height: 70px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease); }
.ledger__row:hover .ledger__thumb { transform: scale(1.06) rotate(-1deg); }
.ledger__row:hover { background: rgba(201, 168, 76, 0.06); padding-left: 14px; }
.ledger__row h4 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin: 0; transition: color .3s; }
.ledger__row:hover h4 { color: var(--gold-600); }
.ledger__row p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }
.ledger__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: var(--gold-600); white-space: nowrap; }
.ledger__go svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.ledger__row:hover .ledger__go svg { transform: translate(3px, -3px); }
@media (max-width: 720px) {
  .ledger__row { grid-template-columns: auto 1fr; }
  .ledger__row p { grid-column: 1 / -1; order: 3; }
  .ledger__go { grid-column: 1 / -1; order: 4; }
  .ledger__thumb { width: 86px; height: 56px; }
}

/* Sticky-CTA-Leiste (mobil, per JS injiziert) */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 220; display: none; gap: 10px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 14, 24, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--on-dark-line); transform: translateY(110%); transition: transform .45s var(--ease); }
.sticky-cta.show { transform: none; }
.sticky-cta .btn { flex: 1; padding: 13px 18px; font-size: 0.98rem; }
.sticky-cta__alt { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.5); color: #fff; }
.sticky-cta__alt svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .sticky-cta { display: flex; } }

/* Rückruf-Widget (Desktop, per JS injiziert) */
.cb-fab { position: fixed; right: 26px; bottom: 26px; z-index: 240; display: none; align-items: center; gap: 10px; padding: 15px 24px; border-radius: var(--radius-pill); background: var(--navy-800); color: #fff; font-weight: 600; font-size: 0.95rem; box-shadow: var(--shadow-lg); border: 1px solid var(--navy-600); transition: transform .3s var(--ease), box-shadow .3s; }
.cb-fab:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-gold); }
.cb-fab svg { width: 18px; height: 18px; color: var(--gold-300); }
@media (min-width: 861px) { .cb-fab { display: inline-flex; } body.has-fab .to-top { bottom: 92px; } }
.cb-panel { position: fixed; right: 26px; bottom: 92px; z-index: 241; width: min(390px, calc(100vw - 52px)); background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 28px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.cb-panel.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cb-panel h4 { font-size: 1.3rem; margin-bottom: 6px; }
.cb-panel > p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 18px; }
.cb-panel .cb-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: background .25s, color .25s; }
.cb-panel .cb-close:hover { background: var(--cream); color: var(--ink); }
.cb-panel form { display: grid; gap: 12px; }
.cb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cb-panel input, .cb-panel select { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.cb-panel input:focus, .cb-panel select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.cb-panel .form-status { font-size: 0.88rem; }
.cb-panel .form-status.ok { color: #2c7a3f; }
.cb-panel .form-status.err { color: #c0392b; }
.cb-note { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 860px) { .cb-panel { left: 14px; right: 14px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom)); } }
.cb-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 13px; color: var(--muted); font-size: 0.76rem; letter-spacing: .03em; text-transform: uppercase; }
.cb-or::before, .cb-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cb-phone { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; border-radius: 12px; border: 1.5px solid var(--navy-800); color: var(--navy-800); font-family: var(--serif); font-weight: 700; font-size: 1.16rem; white-space: nowrap; transition: background .25s, color .25s; }
.cb-phone svg { width: 19px; height: 19px; color: var(--gold-600); transition: color .25s; }
.cb-phone:hover { background: var(--navy-800); color: #fff; }
.cb-phone:hover svg { color: var(--gold-300); }

/* Footer-Telefon (Markenspalte) */
.footer-phone { display: inline-flex; align-items: center; gap: 13px; margin-top: 20px; color: #fff; transition: color .25s; }
.footer-phone:hover { color: var(--gold-300); }
.footer-phone > svg { width: 22px; height: 22px; color: var(--gold-300); flex: none; }
.footer-phone > span { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.footer-phone small { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; color: var(--on-dark-faint); letter-spacing: .03em; margin-bottom: 2px; }
.footer-mail { display: inline-flex; align-items: center; gap: 13px; margin-top: 14px; color: #fff; transition: color .25s; }
.footer-mail:hover { color: var(--gold-300); }
.footer-mail > svg { width: 22px; height: 22px; color: var(--gold-300); flex: none; }
.footer-mail > span { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; white-space: nowrap; line-height: 1.2; }
.footer-mail small { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; color: var(--on-dark-faint); letter-spacing: .03em; margin-bottom: 2px; }

/* ---------- 21j. Scroll-Story: Ein Zuhause entsteht ---------------------- */
.build { position: relative; height: 340vh; background: var(--cream); }
.build__stage { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: calc(var(--header-h) + 10px) 30px; }
.build__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.build__svg { width: 100%; height: auto; max-height: 74svh; }
.hs { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hs.on { opacity: 1; transform: none; }
.hs-smoke { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1.2s var(--ease) .3s; }
.hs.on .hs-smoke { stroke-dashoffset: 0; }
.build__steps h2 { margin: 10px 0 26px; }
.bstep { position: relative; padding: 16px 0 16px 24px; border-left: 2px solid var(--line); opacity: .38; transform-origin: left center; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.bstep::before { content: ""; position: absolute; left: -2px; top: 50%; width: 2px; height: 0; background: var(--gold); border-radius: 2px; transform: translateY(-50%); transition: height .55s var(--ease); }
.bstep h3 { font-size: 1.18rem; margin-bottom: 6px; transform-origin: left center; transition: color .45s var(--ease), transform .5s var(--ease); }
.bstep p { font-size: 0.96rem; margin: 0; transform-origin: left center; transition: transform .5s var(--ease); }
.bstep.active { opacity: 1; transform: translateX(8px); }
.bstep.active::before { height: 100%; }
.bstep.active h3 { color: var(--gold-600); transform: scale(1.06); }
.bstep.active p { transform: scale(1.015); }
.build__cta { margin-top: 28px; }
@media (max-width: 860px) {
  .build { height: auto; background: var(--cream); }
  .build__stage { position: static; min-height: 0; padding-block: clamp(64px, 10vw, 100px); }
  .build__grid { grid-template-columns: 1fr; gap: 34px; }
  .build__svg { max-height: none; }
  .hs { opacity: 1; transform: none; }
  .hs .hs-smoke { stroke-dashoffset: 0; }
  /* Mobil: aktiver Schritt hebt sich hervor + vergrößert sich beim Scrollen */
  .bstep { opacity: .5; }
  .bstep.active { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .build { height: auto; }
  .build__stage { position: static; }
  .hs { opacity: 1 !important; transform: none !important; }
  .hs-smoke { stroke-dashoffset: 0 !important; }
  .bstep { opacity: 1 !important; }
}

/* ---------- 21k. Selbstzeichnende Schaubilder (Themenseiten) ------------ */
/* Animation hängt am Reveal-Observer: .schaubild ist .reveal, Kinder starten
   „ungezeichnet" und laufen los, sobald .in gesetzt wird. --d = Stagger-Delay. */
/* Schaubild-Überschrift bleibt am Desktop einzeilig (längster Titel:
   „Die Lücke, um die es wirklich geht.") — darunter normaler Umbruch. */
@media (min-width: 1101px) {
  .sb-head { max-width: none; }
  .sb-head h2 { white-space: nowrap; font-size: clamp(2.2rem, 3.2vw, 2.7rem); }
}
.schaubild { margin: 54px auto 0; max-width: 760px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(20px, 3.4vw, 40px); }
.schaubild svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.schaubild .sb-draw { stroke-dasharray: var(--len, 600px); stroke-dashoffset: var(--len, 600px); transition: stroke-dashoffset 1.5s var(--ease) var(--d, 0s); }
.schaubild.in .sb-draw { stroke-dashoffset: 0; }
.schaubild .sb-grow { transform: scaleX(0); transform-origin: left center; transform-box: fill-box; transition: transform 1.1s var(--ease) var(--d, 0s); }
.schaubild .sb-growY { transform: scaleY(0); transform-origin: center bottom; transform-box: fill-box; transition: transform 1.1s var(--ease) var(--d, 0s); }
.schaubild.in .sb-grow, .schaubild.in .sb-growY { transform: none; }
.schaubild .sb-pop { opacity: 0; transform: translateY(9px); transform-box: fill-box; transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s); }
.schaubild.in .sb-pop { opacity: 1; transform: none; }
.schaubild.in .sb-pulse { animation: sbPulse 2.4s var(--ease) 2.2s 3; }
@keyframes sbPulse { 0%, 100% { stroke-width: 3; } 50% { stroke-width: 7; } }
@media (prefers-reduced-motion: reduce) {
  .schaubild .sb-draw { stroke-dashoffset: 0 !important; }
  .schaubild .sb-grow, .schaubild .sb-growY, .schaubild .sb-pop { transform: none !important; opacity: 1 !important; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* page intro fade */
.page-fade { animation: pageFade .6s var(--ease); }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 20b. View Transitions (MPA, progressive) --------------------
   Butterweiche Seitenwechsel in unterstützenden Browsern (Chrome/Edge 126+).
   Ältere Browser ignorieren die at-rule und navigieren normal — kein Bruch. */
@view-transition { navigation: auto; }

/* App-Shell: Header & Footer bleiben beim Wechsel stehen statt zu überblenden
   — dadurch fühlt sich die statische Multi-Page-Seite wie eine App an. */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

/* Ruhig dosiertes Crossfade des Seiteninhalts (nur die Root-Ebene) */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .42s; animation-timing-function: var(--ease); }

/* Wenn View Transitions greifen, den JS-Ladefade weglassen (sonst doppelt) */
@supports (view-transition-name: none) { .page-fade { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- 21. Misc ----------------------------------------------------- */
.pagehero { position: relative; padding: calc(var(--header-h) + clamp(60px, 9vw, 120px)) 0 clamp(50px, 7vw, 90px); background: var(--navy-900); color: #fff; overflow: hidden; }
.pagehero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 50%; height: 160%; background: radial-gradient(circle, rgba(201,168,76,0.18), transparent 65%); z-index: 0; }
.pagehero .container { position: relative; z-index: 1; }
.pagehero .crumbs { font-size: 0.85rem; color: var(--on-dark-faint); margin-bottom: 22px; }
.pagehero .crumbs a:hover { color: var(--gold-300); }
.pagehero h1 { color: #fff; max-width: 18ch; margin-bottom: 18px; }
.pagehero p { color: var(--on-dark-soft); max-width: 56ch; font-size: 1.1rem; }
.pagehero.has-img { display: flex; align-items: center; min-height: clamp(440px, 62vh, 640px); }
.pagehero.has-img::before { display: none; }
.pagehero__bg { position: absolute; inset: 0; z-index: 0; }
.pagehero__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehero__bg::after { content: ""; position: absolute; inset: 0;
  background:
    var(--grain),
    linear-gradient(100deg, rgba(10,14,24,0.80) 0%, rgba(10,14,24,0.60) 40%, rgba(10,14,24,0.28) 100%),
    linear-gradient(0deg, rgba(10,14,24,0.60), transparent 50%); }
.pagehero.has-img h1, .pagehero.has-img .crumbs { text-shadow: 0 2px 24px rgba(10, 14, 24, 0.55); }
.pagehero.has-img p { text-shadow: 0 1px 16px rgba(10, 14, 24, 0.6); }
.pagehero.has-img .container { position: relative; z-index: 1; width: 100%; }

.badge-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--gold-600); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.bg-navy .badge-chip { background: rgba(201,168,76,0.14); color: var(--gold-300); }

.divider-gold { width: 64px; height: 3px; background: var(--gold); border-radius: 3px; }

/* ---------- 21c. Ratgeber / Article ------------------------------------- */
.article { padding-block: clamp(50px, 7vw, 96px); background: var(--paper); }
.article__body { max-width: 760px; margin-inline: auto; }
.article__lead { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; color: var(--navy-800); margin-bottom: 30px; }
.article__body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 44px 0 14px; }
.article__body h3 { font-size: 1.22rem; margin: 28px 0 8px; color: var(--navy-700); }
.article__body p { margin-bottom: 18px; font-size: 1.06rem; line-height: 1.8; color: var(--ink-soft); }
.article__body strong { color: var(--ink); }
.article__body a:not(.btn) { color: var(--gold-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Glossar-Auto-Verlinkung im Fließtext: dezent (keine CTA-Optik), nur feine Punktlinie */
.gloss-link { color: inherit; font-weight: inherit; text-decoration: none; border-bottom: 1px dotted var(--gold-line); }
.gloss-link:hover { color: var(--gold-600); border-bottom-color: currentColor; }
.article__body a.gloss-link { color: inherit; font-weight: 500; text-decoration: none; border-bottom: 1px dotted var(--gold-line); }
.article__body a.gloss-link:hover { color: var(--gold-600); }
.feature .lead a.gloss-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--gold-line); }

/* ---- Wissen-Dropdown: kompakt + rechtsbündig (sonst Overflow am rechten Nav-Rand) ---- */
.mega--wissen { grid-template-columns: 1fr; width: min(420px, 92vw); left: auto; right: 0; transform: translateX(0) translateY(10px); }
.nav-item:hover .mega--wissen, .nav-item:focus-within .mega--wissen { transform: translateX(0) translateY(0); }

/* ---- Such-Button + Overlay ---- */
.nav-search-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: transparent; border: 0; color: inherit; cursor: pointer; transition: background-color .25s, color .25s; }
.nav-search-btn svg { width: 20px; height: 20px; }
.nav-search-btn:hover { color: var(--gold-600); background: rgba(0,0,0,.05); }
.site-header.on-dark:not(.scrolled) .nav-search-btn:hover { background: rgba(255,255,255,.12); color: var(--gold-300); }
.search-modal { position: fixed; inset: 0; z-index: 300; background: rgba(9,13,24,.55); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 11vh 20px 20px; }
.search-modal[hidden] { display: none; }
.search-modal__panel { width: min(640px, 100%); background: var(--paper); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.42); overflow: hidden; animation: searchIn .24s var(--ease); }
@keyframes searchIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.search-modal__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.search-modal__ico { width: 22px; height: 22px; color: var(--muted); flex: none; }
.search-modal__input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 1.1rem; font-family: inherit; color: var(--ink); background: transparent; }
.search-modal__close { flex: none; border: 1px solid var(--line); background: var(--cream); color: var(--muted); font-size: .72rem; font-weight: 700; padding: 5px 9px; border-radius: 7px; cursor: pointer; letter-spacing: .04em; }
.search-modal__results { max-height: 58vh; overflow-y: auto; padding: 8px; }
.search-res { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; text-decoration: none; color: inherit; }
.search-res:hover, .search-res.is-active { background: var(--cream); }
.search-res__badge { flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-600); background: var(--gold-soft); padding: 5px 8px; border-radius: 6px; min-width: 76px; text-align: center; }
.search-res__txt { min-width: 0; }
.search-res__txt b { display: block; font-size: .98rem; color: var(--navy-800); font-weight: 600; }
.search-res__txt span { display: block; font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-note { padding: 26px 18px; text-align: center; color: var(--muted); font-size: .92rem; }
.search-note b { color: var(--navy-800); }
.search-note a { color: var(--gold-600); font-weight: 600; }

/* ---- A–Z-/Filter-Tabs sticky beim Scrollen (Glossar, Ratgeber, Tools) ---- */
.tabs { position: sticky; top: calc(var(--header-h) + 6px); z-index: 40; background: var(--cream); padding-block: 8px; border-radius: 12px; }

/* ---- Ratgeber-Hub: Sortierleiste ---- */
.rat-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.rat-sort__lbl { font-size: .85rem; color: var(--muted); margin-right: 4px; }
.rat-sort__btn { border: 1px solid var(--line); background: var(--paper); color: var(--navy-700); font: inherit; font-size: .85rem; font-weight: 600; padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
.rat-sort__btn:hover { border-color: var(--gold); color: var(--gold-600); }
.rat-sort__btn.is-active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* ---- /suche-Ergebnisseite ---- */
.suche-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.suche-h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 6px 0 20px; }
.suche-bar { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; box-shadow: 0 2px 12px rgba(15,23,42,.05); }
.suche-bar svg { width: 22px; height: 22px; color: var(--muted); flex: none; }
.suche-bar input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1.1rem; color: var(--ink); background: transparent; }
.suche-count { margin: 14px 2px 0; color: var(--muted); font-size: .9rem; }
.suche-results { max-width: 720px; margin: 4px auto 0; display: grid; gap: 4px; }
.suche-results .search-res:hover { background: var(--cream); }

/* ---- Verwandte Ratgeber (Glossar-Begriffsseiten) ---- */
.gloss-verwandt { margin-top: 40px; }
.gloss-verwandt h2 { font-size: 1.3rem; margin-bottom: 16px; }
.gloss-rat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.gloss-rat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s; }
.gloss-rat:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.gloss-rat__cat { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-600); }
.gloss-rat b { font-family: var(--serif); color: var(--navy-800); font-size: 1.02rem; line-height: 1.3; }
.gloss-rat .tool-go { margin-top: 2px; font-size: .85rem; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gold-600); }
.gloss-rat .tool-go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.gloss-rat:hover .tool-go svg { transform: translateX(4px); }
.article__body ul { margin: 0 0 22px; display: grid; gap: 11px; }
.article__body ul li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.article__body ul li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--gold); }
/* Magnet-Box liegt im Artikel-Prosa-Kontext → dessen dunkle h3/p-Farben dort auf Hell zurücksetzen (sonst navy-auf-navy) */
.article__body .magnet__txt h3 { color: #fff; }
.article__body .magnet__txt p { color: var(--on-dark-soft); }
.article__body .magnet .form-status { color: var(--on-dark-faint); }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 18px; }
.article-toolbox { margin: 38px 0; padding: 26px 30px; border-radius: var(--radius-lg); background: var(--cream); border: 1px solid var(--gold-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.article-toolbox b { font-family: var(--serif); font-size: 1.2rem; color: var(--navy-800); display: block; margin-bottom: 4px; }
.article-toolbox p { margin: 0; font-size: .94rem; }
.article-share { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }

.rcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); height: 100%; color: inherit; }
.rcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.rcard__img { aspect-ratio: 16 / 10; overflow: hidden; }
.rcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.rcard:hover .rcard__img img { transform: scale(1.06); }
.rcard__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.rcard__cat { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold-600); margin-bottom: 12px; }
.rcard h3 { font-size: 1.18rem; line-height: 1.25; margin-bottom: 10px; }
.rcard p { font-size: .93rem; color: var(--muted); line-height: 1.55; flex-grow: 1; margin-bottom: 16px; }
.rcard .tool-go { font-size: .85rem; font-weight: 600; color: var(--gold-600); display: inline-flex; align-items: center; gap: 8px; }
.rcard .tool-go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.rcard:hover .tool-go svg { transform: translateX(4px); }

/* ---------- 21d. WOW: Auszeichnung, Glow, Interaktion ------------------- */
/* Scroll-Fortschritt */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--gold-600), var(--gold), var(--gold-300)); transition: width .1s linear; }

/* Hero-Auszeichnung */
.hero__award { position: absolute; right: clamp(16px, 4vw, 60px); bottom: clamp(96px, 12vh, 140px); z-index: 3; width: clamp(98px, 11vw, 148px); height: auto; filter: drop-shadow(0 18px 42px rgba(0,0,0,.55)); animation: awardIn 1s var(--ease) .7s both, awardFloat 6s ease-in-out 1.7s infinite; }
@keyframes awardIn { from { opacity: 0; transform: translateY(28px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes awardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Hero-Lichtschein folgt der Maus */
.hero__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(440px circle at var(--mx, 72%) var(--my, 26%), rgba(201,168,76,.16), transparent 62%); }

/* Gestaffelter Hero-Auftritt */
.hero .eyebrow, .hero h1, .hero__sub, .hero__actions, .hero__proof { animation: heroRise .9s var(--ease) both; }
.hero h1 { animation-delay: .10s; } .hero__sub { animation-delay: .22s; }
.hero__actions { animation-delay: .34s; } .hero__proof { animation-delay: .46s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Prozess: aktiver Schritt leuchtet */
.pstep.active { border-color: var(--gold-line); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pstep.active .pstep__no { background: var(--gold); color: var(--navy-900); }

/* Zurück nach oben */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; background: var(--navy-800); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(12px); transition: .4s var(--ease); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: var(--navy-900); }
.to-top svg { width: 20px; height: 20px; }

/* Interaktiver Rentenlücken-Rechner */
.rl-widget { max-width: 720px; margin: 50px auto 0; background: rgba(255,255,255,.04); border: 1px solid var(--on-dark-line); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 44px); }
.rl-control label { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; color: var(--on-dark-soft); font-size: .95rem; margin-bottom: 16px; }
.rl-control label b { color: #fff; font-family: var(--serif); font-size: 1.15rem; }
.rl-control input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 5px; background: rgba(255,255,255,.18); outline: none; }
.rl-control input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); cursor: pointer; box-shadow: 0 4px 14px rgba(201,168,76,.5); border: 3px solid #fff; }
.rl-control input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); cursor: pointer; border: 3px solid #fff; }
.rl-bars { display: grid; gap: 18px; margin: 30px 0 6px; }
.rl-bar__track { height: 14px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 8px; }
.rl-bar__fill { height: 100%; border-radius: 8px; width: 0; transition: width .6s var(--ease); }
.rl-bar__fill.rl-need { background: linear-gradient(90deg, var(--sky), #7cc4f7); }
.rl-bar__fill.rl-pension { background: linear-gradient(90deg, var(--gold-600), var(--gold)); }
.rl-bar > span { display: flex; justify-content: space-between; gap: 10px; color: var(--on-dark-soft); font-size: .9rem; }
.rl-bar > span b { color: #fff; }
.rl-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 24px; margin-top: 20px; border-radius: var(--radius); background: rgba(201,168,76,.1); border: 1px solid var(--gold-line); }
.rl-result span { color: var(--on-dark-soft); font-size: .92rem; letter-spacing: .02em; }
.rl-result b { font-family: var(--serif); font-size: clamp(3rem, 8vw, 4.6rem); color: var(--gold-300); line-height: 1.1; display: inline-flex; align-items: baseline; gap: .12em; }
.rl-result b span { font-size: 1em; letter-spacing: normal; }
.rl-result b .rl-euro { font-size: .45em; }
.rl-cta { text-align: center; margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
.rl-cta .rl-note { flex-basis: 100%; }
.rl-note { color: var(--on-dark-faint); font-size: .8rem; margin-top: 14px; max-width: 52ch; margin-inline: auto; }

/* Interaktiver Baufinanzierungs-Schnellrechner (Immobilien-Seite) */
.bf-widget { max-width: 720px; margin: 50px auto 0; background: rgba(255,255,255,.04); border: 1px solid var(--on-dark-line); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 44px); }
.bf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 34px; }
.bf-grid .rl-control label { margin-bottom: 12px; }
.bf-meta { display: flex; justify-content: center; margin: 26px 0 4px; }
.bf-meta span { display: inline-flex; gap: 8px; align-items: baseline; color: var(--on-dark-soft); font-size: .92rem; letter-spacing: .02em; }
.bf-meta b { color: #fff; font-family: var(--serif); font-size: 1.15rem; }
@media (max-width: 560px) { .bf-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Banken-Scroll-Story (Immobilien-/Finanzierungsseite) --------
   Sticky-Scrub: [data-banks] ist hoch, .bankstory__stage klebt 100vh mittig.
   main.js -> bankStory() setzt [data-phase]=0..3 und Klasse .is-live.
   Ohne JS (kein .is-live) bleibt der fertige Endzustand sichtbar. */
.bankstory { position: relative; }
/* Der SCROLL-Träger: dieses Element ist hoch und ist zugleich der direkte
   Eltern-Container der Sticky-Bühne — nur so hat die Bühne Scroll-Weg zum
   Kleben (vorher kollabierte height:100% auf ~100vh -> Bühne klebte nicht). */
.bankstory__track { position: relative; min-height: 340vh; }
.bankstory__stage { position: sticky; top: 0; min-height: 100vh; display: grid; place-items: center;
  padding: calc(var(--header-h) + 1.5vh) 0 3vh; }
.bankstory__inner { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(12px, 1.9vh, 24px); width: 100%; }
.bankstory__head { max-width: 760px; }
.bankstory__head h2 { color: #fff; margin: 0; }

/* Phasentext-Schiene: alle Phasen liegen übereinander, nur die aktive ist sichtbar */
.bankstory__rail { position: relative; width: min(680px, 92vw); min-height: clamp(96px, 13vh, 124px); }
.bphase { position: absolute; inset: 0; display: flex; gap: clamp(14px, 2vw, 22px); align-items: center;
  justify-content: center; text-align: left; }
.bphase__no { font-family: var(--serif); color: var(--gold-300); font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: .9; flex: none; }
.bphase__tx { max-width: 44ch; }
.bphase h3 { color: #fff; font-size: clamp(1.12rem, 2.3vw, 1.5rem); margin-bottom: 6px; }
.bphase p { color: var(--on-dark-faint); font-size: clamp(.92rem, 1.4vw, 1rem); margin: 0; line-height: 1.55; }

/* Logo-Wand */
.bankgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.3vw, 18px); width: min(940px, 94vw); }
.banktile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; }
/* Chip mit DEFINITER Höhe (nicht via aspect-ratio!): so füllt das Logo den
   Innenraum zuverlässig aus. Padding = einheitlicher Sicherheitsabstand. */
.banktile__logo { width: 100%; height: clamp(60px, 6.6vw, 88px); background: #fff; border-radius: 12px;
  display: block; padding: 15px 20px; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
/* Einheitliche Logo-Größe: jedes Logo füllt denselben Innenrahmen und wird
   darin zentriert eingepasst (object-fit) — Logo-Wand-Standard. */
.banktile__logo img { width: 100%; height: 100%; object-fit: contain; }
.banktile__rate { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.banktile__rate i { font-style: normal; color: var(--on-dark-faint); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.banktile__rate b { font-family: var(--serif); font-size: 1rem; }
.banktile__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--gold); color: var(--navy-900); font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.3); }

.bankstory__dots { display: flex; gap: 10px; justify-content: center; }
.bdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); transition: background .45s var(--ease), transform .45s var(--ease); }

.bankstory__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  max-width: min(820px, 92vw); margin-inline: auto; padding-bottom: clamp(48px, 8vh, 88px); }
/* Hinweis soll in zwei ausgewogene Zeilen umbrechen (nicht 3–4 zerklüftete). */
.bankstory__note { color: var(--on-dark-faint); font-size: .76rem; line-height: 1.5; margin: 0; text-wrap: balance; }
/* Pflichtangaben-Block (Quelle, PAngV-Beispiel, Markenhinweis): bewusst ruhig,
   aber vollständig lesbar — linksbündig, weil balancierte Zeilen bei langen
   Rechtstexten unruhig wirken. */
.bankstory__legal { display: flex; flex-direction: column; gap: 11px; width: 100%;
  text-align: left; border-top: 1px solid var(--on-dark-line); padding-top: 22px; margin-top: 6px; }
.bankstory__legal .bankstory__note { text-wrap: auto; max-width: 78ch; }
.bankstory__legal b { color: var(--on-dark-soft); font-weight: 600; }
.bankstory__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bankstory__legal a:hover { color: var(--gold); }

/* --- Live-Zustand (JS aktiv): Startzustand vor dem Scrubben --- */
.bankstory.is-live .banktile { opacity: .34; transform: translateY(16px) scale(.95);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.bankstory.is-live .banktile__logo img { filter: grayscale(1); opacity: .78; transition: filter .6s var(--ease), opacity .6s var(--ease); }
.bankstory.is-live .banktile__logo { box-shadow: 0 8px 22px rgba(0,0,0,.22); transition: box-shadow .5s var(--ease); }
.bankstory.is-live .banktile__rate { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease), background .5s, color .5s, border-color .5s; }
.bankstory.is-live .banktile__flag { opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
/* Alter Text verschwindet sofort (schneller Ausblend-Weg), der neue Text
   blendet leicht zeitversetzt ein — siehe aktive-Phase-Regel unten. */
.bankstory.is-live .bphase { opacity: 0; transform: translateY(8px); transition: opacity .12s var(--ease), transform .12s var(--ease); pointer-events: none; }

/* Phase 1+: Kacheln erscheinen & kolorieren (gestaffelt) */
.bankstory.is-live[data-phase="1"] .banktile,
.bankstory.is-live[data-phase="2"] .banktile,
.bankstory.is-live[data-phase="3"] .banktile { opacity: 1; transform: none; transition-delay: calc(var(--i) * .05s); }
.bankstory.is-live[data-phase="1"] .banktile__logo img,
.bankstory.is-live[data-phase="2"] .banktile__logo img,
.bankstory.is-live[data-phase="3"] .banktile__logo img { filter: none; opacity: 1; transition-delay: calc(var(--i) * .05s); }

/* Phase 2+: Konditionen kommen zurück (gestaffelt) */
.bankstory.is-live[data-phase="2"] .banktile__rate,
.bankstory.is-live[data-phase="3"] .banktile__rate { opacity: 1; transform: none; transition-delay: calc(var(--i) * .06s); }

/* Phase 3: die beste Bank gewinnt, der Rest tritt zurück */
.bankstory.is-live[data-phase="3"] .banktile:not(.banktile--best) { opacity: .32; }
.bankstory.is-live[data-phase="3"] .banktile:not(.banktile--best) .banktile__logo img { filter: grayscale(1); opacity: .7; }
.bankstory.is-live[data-phase="3"] .banktile--best { transform: scale(1.08); z-index: 2; }
.bankstory.is-live[data-phase="3"] .banktile--best .banktile__logo { box-shadow: 0 0 0 3px var(--gold), 0 18px 42px rgba(0,0,0,.4); }
.bankstory.is-live[data-phase="3"] .banktile--best .banktile__rate { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.bankstory.is-live[data-phase="3"] .banktile--best .banktile__rate i { color: rgba(14,19,32,.6); }
.bankstory.is-live[data-phase="3"] .banktile--best .banktile__flag { opacity: 1; transform: translateX(-50%); }

/* aktive Phase einblenden */
.bankstory.is-live[data-phase="0"] .bphase[data-p="0"],
.bankstory.is-live[data-phase="1"] .bphase[data-p="1"],
.bankstory.is-live[data-phase="2"] .bphase[data-p="2"],
.bankstory.is-live[data-phase="3"] .bphase[data-p="3"] { opacity: 1; transform: none;
  transition: opacity .5s var(--ease) .18s, transform .55s var(--ease) .18s; }

/* aktiver Fortschrittspunkt */
.bankstory.is-live[data-phase="0"] .bdot[data-d="0"],
.bankstory.is-live[data-phase="1"] .bdot[data-d="1"],
.bankstory.is-live[data-phase="2"] .bdot[data-d="2"],
.bankstory.is-live[data-phase="3"] .bdot[data-d="3"] { background: var(--gold); transform: scale(1.35); }

/* --- Ohne JS: statische Logo-Wand, die beste Bank bleibt markiert --- */
.bankstory:not(.is-live) .bphase { position: relative; inset: auto; }
.bankstory:not(.is-live) .bphase:not([data-p="1"]) { display: none; }

@media (max-width: 1100px) {
  .bankgrid { grid-template-columns: repeat(3, 1fr); width: min(620px, 94vw); }
}
/* Ab hier keine Sticky-Bühne mehr: 3-spaltige Wand würde nicht in 100vh passen.
   Statt eines flachen Textblocks werden die 4 Phasen zu einer sauberen,
   nummerierten Schritt-Timeline (Badge + Verbindungslinie) — so bleibt die
   „So läuft's"-Story auch ohne Scrub lesbar und wirkt bewusst gestaltet.
   Alles im finalen Zustand, normaler Dokumentfluss (JS-Breakpoint identisch). */
@media (max-width: 1100px) {
  .bankstory { min-height: 0; }
  .bankstory__track { min-height: 0; }
  .bankstory__stage { position: static; min-height: 0; padding: 0; }
  .bankstory__inner { gap: clamp(26px, 6vw, 40px); }
  /* Auf Mobil keine Sticky-Bühne: alles direkt im finalen Zustand zeigen */
  .bankstory.is-live .banktile { opacity: 1; transform: none; }
  .bankstory.is-live .banktile__logo img { filter: none; opacity: 1; }
  .bankstory.is-live .banktile__rate { opacity: 1; transform: none; }
  .bankstory.is-live .banktile--best .banktile__logo { box-shadow: 0 0 0 3px var(--gold), 0 14px 30px rgba(0,0,0,.4); }
  .bankstory.is-live .banktile--best .banktile__rate { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
  .bankstory.is-live .banktile--best .banktile__flag { opacity: 1; transform: translateX(-50%); }

  /* Phasen-Schiene -> vertikale Schritt-Timeline (linksbündig, konsistent) */
  .bankstory__rail { position: relative; inset: auto; min-height: 0;
    width: min(520px, 100%); display: flex; flex-direction: column; gap: 0; text-align: left; }
  .bankstory .bphase { position: relative; inset: auto; display: grid !important;
    grid-template-columns: 46px 1fr; column-gap: 16px; align-items: start;
    opacity: 1 !important; transform: none !important; text-align: left;
    padding-bottom: clamp(20px, 5.5vw, 30px); }
  .bankstory .bphase:last-child { padding-bottom: 0; }
  /* durchgehende Verbindungslinie zwischen den Nummern-Badges */
  .bankstory .bphase:not(:last-child)::before { content: ""; position: absolute;
    left: 22px; top: 50px; bottom: -2px; width: 2px; border-radius: 2px;
    background: linear-gradient(var(--gold-line), rgba(201, 168, 76, 0.06)); }
  /* Nummern-Badge */
  .bankstory .bphase__no { width: 46px; height: 46px; display: grid; place-items: center;
    font-size: 1.18rem; line-height: 1; color: var(--gold-300);
    border: 1px solid var(--gold-line); border-radius: 50%; background: var(--gold-soft); }
  .bankstory .bphase__tx { max-width: none; padding-top: 3px; }
  .bankstory .bphase h3 { font-size: 1.16rem; margin-bottom: 4px; }
  .bankstory .bphase p { font-size: .96rem; }

  .bankstory__dots { display: none; }
}
@media (max-width: 460px) {
  .bankgrid { grid-template-columns: repeat(2, 1fr); }
  /* Badge-Spalte etwas schmaler, damit die Textspalte auf kleinen Phones atmet */
  .bankstory .bphase { grid-template-columns: 42px 1fr; column-gap: 14px; }
  .bankstory .bphase__no { width: 42px; height: 42px; font-size: 1.1rem; }
  .bankstory .bphase:not(:last-child)::before { left: 20px; top: 46px; }
}

/* ---------- Zinseszins-Scroll-Story (Vermögensaufbau) ----------
   Sticky-Scrub analog zur Banken-Story: [data-growth] ist hoch, .growthstory__stage
   klebt 100vh mittig. main.js -> growthStory() setzt --p (0..1) + [data-phase]=0..3
   und schiebt Marker/Zähler. Ohne JS (kein .is-live) bleibt der Endzustand sichtbar. */
.growthstory { position: relative; }
.growthstory__track { position: relative; min-height: 360vh; }
.growthstory__stage { position: sticky; top: 0; min-height: 100vh; display: grid; place-items: center;
  padding: calc(var(--header-h) + 1.5vh) 0 3vh; }
.growthstory__inner { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(14px, 2vh, 26px); width: 100%; }
.growthstory__head { max-width: 780px; }
.growthstory__head h2 { color: #fff; margin: 0; }
/* Desktop-Scroll-Story: Titel bewusst einzeilig halten (genug Platz im Container) */
@media (min-width: 1101px) {
  .growthstory__head { max-width: none; }
  .growthstory__head h2 { white-space: nowrap; }
}

/* Phasentext-Schiene: alle Phasen übereinander, nur die aktive sichtbar */
.growthstory__rail { position: relative; width: min(680px, 92vw); min-height: clamp(92px, 12vh, 118px); }
.gphase { position: absolute; inset: 0; display: flex; gap: clamp(14px, 2vw, 22px); align-items: center;
  justify-content: center; text-align: left; opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.gphase__no { font-family: var(--serif); color: var(--gold-300); font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: .9; flex: none; }
.gphase__tx { max-width: 46ch; }
.gphase h3 { color: #fff; font-size: clamp(1.12rem, 2.3vw, 1.5rem); margin-bottom: 6px; }
.gphase p { color: var(--on-dark-faint); font-size: clamp(.92rem, 1.4vw, 1rem); margin: 0; line-height: 1.55; }

/* Chart-Panel */
.gs-panel { width: min(940px, 94vw); display: flex; flex-direction: column; gap: clamp(12px, 1.6vh, 20px); }
.gs-legend { display: flex; gap: clamp(18px, 3vw, 30px); justify-content: center; flex-wrap: wrap; }
.gs-leg { display: inline-flex; align-items: center; gap: 9px; color: var(--on-dark-soft); font-size: .86rem; letter-spacing: .01em; }
.gs-leg::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.gs-leg--dep::before { background: #41a0f0; }
.gs-leg--gain::before { background: var(--gold); }

.gs-chartwrap { position: relative; width: 100%; }
.gs-chart { width: 100%; height: auto; display: block; overflow: visible; }
.gs-grid { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.gs-axis { stroke: rgba(255,255,255,.26); stroke-width: 1.4; }
.gs-ylab { fill: var(--on-dark-faint); font-size: 15px; text-anchor: end; }
.gs-xlab { fill: var(--on-dark-faint); font-size: 15px; text-anchor: middle; }
.gs-fill-dep  { fill: url(#gs-depgrad); }
.gs-fill-gain { fill: url(#gs-gaingrad); }
.gs-line-dep { fill: none; stroke: #41a0f0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.gs-line-val { fill: none; stroke: var(--gold); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 4px 14px rgba(201,168,76,.42)); }
.gs-pen { stroke: rgba(230,210,154,.55); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: 0; }
.growthstory.is-live .gs-pen { opacity: 1; }
.gs-marker { fill: var(--gold); stroke: var(--navy-900); stroke-width: 3; filter: drop-shadow(0 4px 12px rgba(201,168,76,.6)); }

.gs-readout { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gs-readout__lab { color: var(--on-dark-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.gs-readout__lab b { color: var(--gold-300); font-family: var(--serif); font-style: normal; }
.gs-readout__val { font-family: var(--serif); color: #fff; font-size: clamp(2.2rem, 6.4vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.gs-readout__val span { color: var(--gold-300); }
.gs-readout__sub { color: var(--on-dark-soft); font-size: .92rem; }
.gs-readout__sub b { color: #fff; font-variant-numeric: tabular-nums; }
.gs-star { color: var(--gold-300); font-size: .5em; font-weight: 600; vertical-align: super; line-height: 0; margin-left: .05em; }

/* Abschluss-Merksatz: blendet erst in der Schluss-Phase ein */
.gs-caption { margin: clamp(6px, 1.4vh, 16px) auto 0; max-width: 640px; text-align: center;
  font-family: var(--serif); font-style: italic; color: var(--on-dark-soft);
  font-size: clamp(1.02rem, 2.2vw, 1.24rem); line-height: 1.5;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s var(--ease), transform .8s var(--ease); }
.gs-caption b { color: var(--gold-300); font-style: normal; font-weight: 600; }
.growthstory.is-live[data-phase="3"] .gs-caption { opacity: 1; transform: none; }
.growthstory:not(.is-live) .gs-caption { opacity: 1; transform: none; }

.growthstory__dots { display: flex; gap: 10px; justify-content: center; }
.gdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22);
  transition: background .45s var(--ease), transform .45s var(--ease); }

.growthstory__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  max-width: 900px; margin-inline: auto; padding-bottom: clamp(48px, 8vh, 88px); }
.growthstory__note { color: var(--on-dark-faint); font-size: .76rem; line-height: 1.55; margin: 0;
  max-width: 820px; margin-inline: auto; text-wrap: balance; }

/* aktive Phase / aktiver Fortschrittspunkt */
.growthstory.is-live[data-phase="0"] .gphase[data-p="0"],
.growthstory.is-live[data-phase="1"] .gphase[data-p="1"],
.growthstory.is-live[data-phase="2"] .gphase[data-p="2"],
.growthstory.is-live[data-phase="3"] .gphase[data-p="3"] { opacity: 1; transform: none; }
.growthstory.is-live[data-phase="0"] .gdot[data-d="0"],
.growthstory.is-live[data-phase="1"] .gdot[data-d="1"],
.growthstory.is-live[data-phase="2"] .gdot[data-d="2"],
.growthstory.is-live[data-phase="3"] .gdot[data-d="3"] { background: var(--gold); transform: scale(1.35); }

/* Ohne JS: nur die Schluss-Phase als statischer Text */
.growthstory:not(.is-live) .gphase { position: relative; inset: auto; opacity: 1; transform: none; }
.growthstory:not(.is-live) .gphase:not([data-p="3"]) { display: none; }

/* Mobil / schmale Viewports: kein Sticky-Scrub, alles im Endzustand.
   Phasen werden zur nummerierten Schritt-Timeline (identisch zur Banken-Story). */
@media (max-width: 1100px) {
  .growthstory__track { min-height: 0; }
  .growthstory__stage { position: static; min-height: 0; padding: 0; }
  .growthstory__inner { gap: clamp(26px, 6vw, 40px); }
  .growthstory.is-live .gs-pen { opacity: 0; }

  .growthstory__rail { position: relative; inset: auto; min-height: 0;
    width: min(520px, 100%); display: flex; flex-direction: column; gap: 0; text-align: left; }
  .growthstory .gphase { position: relative; inset: auto; display: grid !important;
    grid-template-columns: 46px 1fr; column-gap: 16px; align-items: start;
    opacity: 1 !important; transform: none !important; text-align: left;
    padding-bottom: clamp(20px, 5.5vw, 30px); }
  .growthstory .gphase:last-child { padding-bottom: 0; }
  .growthstory .gphase:not(:last-child)::before { content: ""; position: absolute;
    left: 22px; top: 50px; bottom: -2px; width: 2px; border-radius: 2px;
    background: linear-gradient(var(--gold-line), rgba(201, 168, 76, 0.06)); }
  .growthstory .gphase__no { width: 46px; height: 46px; display: grid; place-items: center;
    font-size: 1.18rem; line-height: 1; color: var(--gold-300);
    border: 1px solid var(--gold-line); border-radius: 50%; background: var(--gold-soft); }
  .growthstory .gphase__tx { max-width: none; padding-top: 3px; }
  .growthstory .gphase h3 { font-size: 1.16rem; margin-bottom: 4px; }
  .growthstory .gphase p { font-size: .96rem; }
  .growthstory__dots { display: none; }
}
@media (max-width: 460px) {
  .growthstory .gphase { grid-template-columns: 42px 1fr; column-gap: 14px; }
  .growthstory .gphase__no { width: 42px; height: 42px; font-size: 1.1rem; }
  .growthstory .gphase:not(:last-child)::before { left: 20px; top: 46px; }
}

/* ---------- Streuungs-Rad-Scroll-Story (Vermögensaufbau) ----------
   Sticky-Scrub: [data-strategy] ist hoch, .strategiestory__stage klebt 100vh
   mittig. main.js -> strategieStory() schaltet je .ss-ring .is-on/.is-active,
   setzt [data-phase] 0..5 (Begleittext) und --p (Schwankungs-Balken). Ohne JS
   bleibt der volle Endzustand (data-phase=5, alle Ringe) stehen. */
.strategiestory { position: relative; }
.strategiestory__track { position: relative; min-height: 460vh; }
.strategiestory__stage { position: sticky; top: 0; min-height: 100vh; display: grid; place-items: center;
  padding: calc(var(--header-h) + 1.2vh) 0 2.5vh; }
.strategiestory__inner { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(10px, 1.6vh, 22px); width: 100%; }
.strategiestory__head { max-width: 820px; }
.strategiestory__head h2 { color: #fff; margin: 0; }

.strategiestory__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: clamp(20px, 4vw, 56px); width: min(1060px, 94vw); }

/* --- Das Streuungs-Rad --- */
.ss-wheelwrap { display: grid; place-items: center; }
.ss-wheel { width: min(47vh, 100%); max-width: 470px; height: auto; overflow: visible; }
.ss-guide { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.2; }
.ss-spoke { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.ss-dot { fill: #41a0f0; }
.ss-core__halo { fill: rgba(201,168,76,.16); }
.ss-core__disc { fill: var(--gold); stroke: var(--gold-300); stroke-width: 2; }
.ss-core__lab { fill: var(--navy-900); font-family: var(--serif); font-weight: 700; font-size: 15px; }

/* --- Begleit-Panel --- */
.ss-panel { text-align: left; width: 100%; }
.strategiestory__rail { position: relative; min-height: clamp(290px, 42vh, 340px); }
.ss-phase { position: absolute; inset: 0; display: flex; gap: clamp(12px, 1.6vw, 20px); align-items: flex-start; }
.ss-phase__no { font-family: var(--serif); color: var(--gold-300); font-size: clamp(2rem, 4.6vw, 3rem); line-height: .9; flex: none; }
.ss-phase__tx { min-width: 0; flex: 1; }
.ss-phase h3 { color: #fff; font-size: clamp(1.15rem, 2.2vw, 1.55rem); margin-bottom: 8px; }
.ss-phase p { color: var(--on-dark-faint); font-size: clamp(.92rem, 1.35vw, 1.02rem); margin: 0 0 14px; line-height: 1.55; max-width: 42ch; }

/* Medien-Bereich je Phase (Kachel-Grid / Weltkarte / Cost-Average-Kurve) —
   jede Dimension füllt denselben Block → harmonisches, ruhiges Layout. */
.ss-media { min-height: clamp(172px, 24vh, 212px); display: flex; align-items: center; }
.ss-tiles { display: grid; gap: 10px; width: 100%; }
.ss-tiles--2 { grid-template-columns: repeat(2, 1fr); }
.ss-tiles--3 { grid-template-columns: repeat(3, 1fr); }
.ss-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px;
  min-height: 82px; padding: 12px 15px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid rgba(201,168,76,.24); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ss-tile__ic { width: 22px; height: 22px; color: var(--gold); }
.ss-tile__cur { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--gold); }
.ss-tile__lab { font-size: .92rem; font-weight: 600; color: #fff; }
.ss-tile__sub { font-size: .72rem; letter-spacing: .02em; color: var(--gold-300); }
.ss-tile__sub:empty { display: none; }

/* Regionen — Vektor-Weltkarte mit verorteten Markern */
.ss-map { position: relative; width: min(100%, 340px); aspect-ratio: 1010 / 666; margin-top: 2px; }
.ss-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-map__land { fill: rgba(150,180,220,.14); stroke: rgba(150,180,220,.10); stroke-width: .5; }
.ss-mk { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -50%);
  white-space: nowrap; }
.ss-mk--left { flex-direction: row-reverse; }
.ss-mk__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 0 4px rgba(201,168,76,.22); }
.ss-mk__lab { font-size: .72rem; font-weight: 600; letter-spacing: .01em; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* Zeit — animierte Cost-Average-Kurve */
.ss-cavg { width: 100%; }
.ss-cavg svg { width: 100%; height: auto; overflow: visible; }
.ss-cavg__line { fill: none; stroke: #8892ad; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ss-cavg__avg { stroke: #e5675f; stroke-width: 1.6; stroke-dasharray: 5 5; }
.ss-cavg__end { fill: #e5675f; }
.ss-cavg__lab rect { fill: rgba(20,25,39,.92); stroke: rgba(229,103,95,.55); stroke-width: 1; }
.ss-cavg__lab text { fill: #eda29c; font-size: 12.5px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.ss-pin__body { fill: var(--gold); }
.ss-pin__ring { fill: var(--navy-900); }
.ss-pin__eur { fill: var(--gold-300); font-family: var(--serif); font-weight: 700; font-size: 10px;
  text-anchor: middle; dominant-baseline: central; }

/* --- Schwankungs-Balken --- */
.ss-meter { margin-top: clamp(14px, 2.4vh, 26px); max-width: 380px; }
.ss-meter__lab { display: block; color: var(--on-dark-soft); font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 8px; }
.ss-meter__track { position: relative; height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.08); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.ss-meter__fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 999px;
  background: #d8a53a; transition: width .5s var(--ease), background-color .5s var(--ease); }
.ss-meter__scale { display: flex; justify-content: space-between; margin-top: 6px;
  color: var(--on-dark-faint); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }

.strategiestory__dots { display: flex; gap: 10px; justify-content: center; }
.ss-dotnav { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22);
  transition: background .45s var(--ease), transform .45s var(--ease); }

.strategiestory__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  max-width: min(820px, 92vw); margin-inline: auto; padding-bottom: clamp(48px, 8vh, 88px); }
.strategiestory__note { color: var(--on-dark-faint); font-size: .76rem; line-height: 1.55; margin: 0; text-wrap: balance; }

/* --- Live-Zustand (JS aktiv) --- Ring-Gerüst (alle Umrisse) IMMER sichtbar →
   konstanter Footprint, die linke Seite wirkt nie „winzig & leer". Nur Punkte +
   Speichen bauen sich pro aktivierter Dimension auf. */
.strategiestory.is-live .ss-guide { transition: stroke .5s var(--ease); }
.strategiestory.is-live .ss-spoke { opacity: 0; transition: opacity .6s var(--ease), stroke .5s var(--ease); }
.strategiestory.is-live .ss-dot { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--ease), transform .5s var(--ease), fill .5s var(--ease); }
.strategiestory.is-live .ss-ring.is-on .ss-spoke { opacity: 1; }
.strategiestory.is-live .ss-ring.is-on .ss-dot { opacity: 1; transform: none; transition-delay: calc(var(--i) * .05s); }

/* Aktueller Ring leuchtet gold, ältere Ringe bleiben ruhig-blau */
.strategiestory.is-live .ss-ring.is-active .ss-guide { stroke: var(--gold-line); }
.strategiestory.is-live .ss-ring.is-active .ss-spoke { stroke: rgba(201,168,76,.22); }
.strategiestory.is-live .ss-ring.is-active .ss-dot { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(201,168,76,.55)); }

/* Phase 0: Kern allein, warnendes Pulsieren */
.strategiestory.is-live[data-phase="0"] .ss-core__halo { animation: ssPulse 2.2s var(--ease) infinite; }
@keyframes ssPulse { 0%,100% { fill: rgba(216,120,72,.14); } 50% { fill: rgba(216,120,72,.34); } }

/* --- Medien-Animationen (Live-Zustand): Karte / Kurve / Pins einblenden --- */
/* Regionen-Marker poppen bei Phase 2 auf */
.strategiestory.is-live .ss-mk { opacity: 0; transform: translate(-50%, -50%) scale(.5);
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.strategiestory.is-live[data-phase="2"] .ss-mk { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Cost-Average-Kurve zeichnet sich, Pins fallen gestaffelt, Ø-Linie folgt (Phase 5) */
.strategiestory.is-live .ss-cavg__line { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.strategiestory.is-live[data-phase="5"] .ss-cavg__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease); }
.strategiestory.is-live .ss-pin { opacity: 0; transform: translateY(-12px); }
.strategiestory.is-live[data-phase="5"] .ss-pin { opacity: 1; transform: none;
  transition: opacity .45s var(--ease), transform .5s var(--ease); transition-delay: calc(.55s + var(--i) * .08s); }
/* Ø-Linie wischt zeitversetzt von links nach rechts (scaleX ab linker Kante);
   Endpunkt + „Ø Erwerbspreis“-Label folgen erst, wenn der Wisch rechts ankommt. */
.strategiestory.is-live .ss-cavg__avg { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
.strategiestory.is-live[data-phase="5"] .ss-cavg__avg { transform: scaleX(1); transition: transform 1s var(--ease) .9s; }
.strategiestory.is-live .ss-cavg__end, .strategiestory.is-live .ss-cavg__lab { opacity: 0; }
.strategiestory.is-live[data-phase="5"] .ss-cavg__end,
.strategiestory.is-live[data-phase="5"] .ss-cavg__lab { opacity: 1; transition: opacity .5s var(--ease) 1.75s; }
/* Kachel-Grids gestaffelt einblenden (jeweils aktive Phase) */
.strategiestory.is-live .ss-tile { opacity: 0; transform: translateY(10px); }
.strategiestory.is-live[data-phase="1"] .ss-phase[data-p="1"] .ss-tile,
.strategiestory.is-live[data-phase="3"] .ss-phase[data-p="3"] .ss-tile,
.strategiestory.is-live[data-phase="4"] .ss-phase[data-p="4"] .ss-tile { opacity: 1; transform: none;
  transition: opacity .4s var(--ease), transform .45s var(--ease); transition-delay: calc(.12s + var(--i) * .05s); }

/* Begleittext: nur aktive Phase sichtbar */
.strategiestory.is-live .ss-phase { opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .12s var(--ease), transform .12s var(--ease); }
.strategiestory.is-live[data-phase="0"] .ss-phase[data-p="0"],
.strategiestory.is-live[data-phase="1"] .ss-phase[data-p="1"],
.strategiestory.is-live[data-phase="2"] .ss-phase[data-p="2"],
.strategiestory.is-live[data-phase="3"] .ss-phase[data-p="3"],
.strategiestory.is-live[data-phase="4"] .ss-phase[data-p="4"],
.strategiestory.is-live[data-phase="5"] .ss-phase[data-p="5"] { opacity: 1; transform: none;
  transition: opacity .5s var(--ease) .16s, transform .55s var(--ease) .16s; }

/* Aktiver Fortschrittspunkt */
.strategiestory.is-live[data-phase="0"] .ss-dotnav[data-d="0"],
.strategiestory.is-live[data-phase="1"] .ss-dotnav[data-d="1"],
.strategiestory.is-live[data-phase="2"] .ss-dotnav[data-d="2"],
.strategiestory.is-live[data-phase="3"] .ss-dotnav[data-d="3"],
.strategiestory.is-live[data-phase="4"] .ss-dotnav[data-d="4"],
.strategiestory.is-live[data-phase="5"] .ss-dotnav[data-d="5"] { background: var(--gold); transform: scale(1.35); }

/* --- Ohne JS: statischer Endzustand, alle Ringe sichtbar --- */
.strategiestory:not(.is-live) .ss-phase { position: relative; inset: auto; }
.strategiestory:not(.is-live) .ss-phase:not([data-p="5"]) { display: none; }

/* Mobil / schmale Viewports: kein Sticky-Scrub, alles im Endzustand.
   Phasen werden zur nummerierten Schritt-Timeline (identisch zur Banken-Story);
   das Rad steht darüber, jede Dimension bekommt darunter ihren Schritt. */
@media (max-width: 1100px) {
  .strategiestory__track { min-height: 0; }
  .strategiestory__stage { position: static; min-height: 0; padding: 0; }
  .strategiestory__grid { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 40px); width: min(560px, 94vw); }
  .ss-wheel { width: min(74vw, 340px); }

  .strategiestory__rail { position: relative; inset: auto; min-height: 0;
    display: flex; flex-direction: column; gap: 0; }
  .strategiestory .ss-phase { position: relative; inset: auto; display: grid !important;
    grid-template-columns: 46px 1fr; column-gap: 16px; align-items: start;
    opacity: 1 !important; transform: none !important;
    padding-bottom: clamp(24px, 6vw, 34px); }
  .strategiestory .ss-phase:last-child { padding-bottom: 0; }
  .strategiestory .ss-phase:not(:last-child)::before { content: ""; position: absolute;
    left: 22px; top: 50px; bottom: -2px; width: 2px; border-radius: 2px;
    background: linear-gradient(var(--gold-line), rgba(201, 168, 76, 0.06)); }
  .strategiestory .ss-phase__no { width: 46px; height: 46px; display: grid; place-items: center;
    font-size: 1.18rem; line-height: 1; color: var(--gold-300); flex: none;
    border: 1px solid var(--gold-line); border-radius: 50%; background: var(--gold-soft); }
  .strategiestory .ss-phase__tx { padding-top: 3px; }
  .strategiestory .ss-phase h3 { font-size: 1.16rem; margin-bottom: 4px; }
  .strategiestory .ss-phase p { font-size: .96rem; max-width: none; }
  .strategiestory .ss-media { min-height: 0; }
  .strategiestory__dots { display: none; }
}
@media (max-width: 460px) {
  .strategiestory .ss-phase { grid-template-columns: 42px 1fr; column-gap: 14px; }
  .strategiestory .ss-phase__no { width: 42px; height: 42px; font-size: 1.1rem; }
  .strategiestory .ss-phase:not(:last-child)::before { left: 20px; top: 46px; }
}

/* ---------- Versicherungs-Check-Scroll-Story (Absicherung) ----------
   Sticky-Trichter: [data-check] ist hoch, .checkstory__stage klebt 100vh mittig.
   main.js -> checkStory() setzt [data-phase]=0..3 (+ .is-live) und zaehlt den
   Trichter herunter (150+ -> 12 -> 4). Die Phasenbilder haengen rein an
   [data-phase] -> ohne JS bleibt der Endzustand (data-phase="3") sichtbar,
   Mobil / reduced-motion springen direkt dorthin. */
.checkstory { position: relative; }
.checkstory__track { position: relative; min-height: 380vh; }
.checkstory__stage { position: sticky; top: 0; min-height: 100vh; display: grid; place-items: center;
  padding: calc(var(--header-h) + 1.5vh) 0 3vh; }
.checkstory__inner { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(14px, 2.2vh, 26px); width: 100%; }
.checkstory__head { max-width: 820px; }
.checkstory__head h2 { color: #fff; margin: 0; }
@media (min-width: 1101px) { .checkstory__head { max-width: none; } .checkstory__head h2 { white-space: nowrap; } }

/* Phasentext-Schiene: alle Phasen übereinander, nur die aktive sichtbar */
.checkstory__rail { position: relative; width: min(700px, 92vw); min-height: clamp(96px, 12.5vh, 122px); }
.vphase { position: absolute; inset: 0; display: flex; gap: clamp(14px, 2vw, 22px); align-items: center;
  justify-content: center; text-align: left; opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease); pointer-events: none; }
.vphase__no { font-family: var(--serif); color: var(--gold-300); font-size: clamp(2.3rem, 6vw, 3.4rem); line-height: .9; flex: none; }
.vphase__tx { max-width: 48ch; }
.vphase h3 { color: #fff; font-size: clamp(1.12rem, 2.3vw, 1.5rem); margin-bottom: 6px; }
.vphase p { color: var(--on-dark-faint); font-size: clamp(.92rem, 1.4vw, 1rem); margin: 0; line-height: 1.55; }
.checkstory[data-phase="0"] .vphase[data-p="0"],
.checkstory[data-phase="1"] .vphase[data-p="1"],
.checkstory[data-phase="2"] .vphase[data-p="2"],
.checkstory[data-phase="3"] .vphase[data-p="3"] { opacity: 1; transform: none; }

/* Trichter-Zähler: läuft mit den Phasen herunter */
.vc-stage { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vh, 26px); width: 100%; }
.vc-count { display: inline-flex; align-items: baseline; gap: 12px; padding: 9px 22px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.vc-count__lab { color: var(--on-dark-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; }
.vc-count__num { font-family: var(--serif); color: var(--gold-300); font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1; font-variant-numeric: tabular-nums; min-width: 2.6ch; text-align: center; }
.vc-count__unit { color: var(--on-dark-faint); font-size: .76rem; }

/* Trichter-Bühne: vier Sparten-Spalten mit Schild-Chips */
.vc-board { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.9vw, 30px);
  width: min(1000px, 94vw); padding: clamp(16px, 2.1vw, 28px); border-radius: 22px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.vc-col { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.vc-col + .vc-col::before { content: ""; position: absolute; left: calc(-1 * clamp(6px, .95vw, 15px)); top: 6%; bottom: 6%;
  width: 1px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0));
  opacity: 0; transition: opacity .6s var(--ease); }
.checkstory[data-phase="1"] .vc-col + .vc-col::before,
.checkstory[data-phase="2"] .vc-col + .vc-col::before,
.checkstory[data-phase="3"] .vc-col + .vc-col::before { opacity: 1; }

.vc-col__head { display: flex; flex-direction: column; gap: 1px; opacity: 0; transform: translateY(-6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.vc-col__head b { color: #fff; font-family: var(--serif); font-size: clamp(.98rem, 1.5vw, 1.2rem); line-height: 1; }
.vc-col__head i { color: var(--on-dark-faint); font-style: normal; font-size: clamp(.62rem, 1vw, .74rem); letter-spacing: .02em; }
.checkstory[data-phase="1"] .vc-col__head,
.checkstory[data-phase="2"] .vc-col__head,
.checkstory[data-phase="3"] .vc-col__head { opacity: 1; transform: none; }

.vc-col__stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(5px, .6vw, 8px); width: 100%; }
.vc-dot { position: relative; width: 100%; aspect-ratio: 5 / 6; background: rgba(255,255,255,.16);
  clip-path: polygon(50% 0%, 100% 22%, 100% 62%, 50% 100%, 0% 62%, 0% 22%);
  opacity: .4; transform: translateY(8px) scale(.9);
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .5s var(--ease), filter .5s var(--ease);
  transition-delay: calc(var(--i) * .022s); }
.vc-dot__mark { position: absolute; inset: 0; display: grid; place-items: center; color: var(--navy-900);
  opacity: 0; transform: scale(.5); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.vc-dot__mark svg { width: 56%; height: 56%; stroke-width: 3; }

/* Phase 1: nach Sparten geordnet, Chips hellen auf (gestaffelt) */
.checkstory[data-phase="1"] .vc-dot,
.checkstory[data-phase="2"] .vc-dot,
.checkstory[data-phase="3"] .vc-dot { opacity: .82; transform: none; background: rgba(255,255,255,.22); }

/* Phase 2: Shortlist + Beste leuchten (objektiver Vergleich) */
.checkstory[data-phase="2"] .vc-dot--short,
.checkstory[data-phase="3"] .vc-dot--short { background: rgba(230,210,154,.5); opacity: 1; }
.checkstory[data-phase="2"] .vc-dot--best,
.checkstory[data-phase="3"] .vc-dot--best { background: var(--gold-300); opacity: 1; }

/* Phase 3: je Sparte ein Gold-Sieger, der Rest tritt zurück */
.checkstory[data-phase="3"] .vc-dot:not(.vc-dot--best) { opacity: .12; }
.checkstory[data-phase="3"] .vc-dot--best { background: var(--gold); transform: scale(1.34); z-index: 2;
  filter: drop-shadow(0 6px 16px rgba(201,168,76,.55)); }
.checkstory[data-phase="3"] .vc-dot--best .vc-dot__mark { opacity: 1; transform: none; }

/* Sieger-Label unter der Spalte */
.vc-col__win { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  background: var(--gold); color: var(--navy-900); font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.vc-col__win svg { width: 13px; height: 13px; stroke-width: 2.6; }
.checkstory[data-phase="3"] .vc-col__win { opacity: 1; transform: none; transition-delay: calc(var(--c) * .08s); }

/* Scan-Balken der Prüf-Phase (läuft einmal über die Bühne) */
.vc-scan { position: absolute; left: 0; right: 0; top: -8%; height: 48px; pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(rgba(230,210,154,0), rgba(230,210,154,.14) 44%, rgba(230,210,154,.85) 50%, rgba(230,210,154,.14) 56%, rgba(230,210,154,0)); }
.checkstory[data-phase="2"] .vc-scan { animation: vcScan 1.5s var(--ease) both; }
@keyframes vcScan { 0% { opacity: 0; top: -8%; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; top: 100%; } }

/* Vertrauens-Badges (erscheinen ab der Prüf-Phase) */
.vc-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1.2vw, 16px); }
.vc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); color: var(--on-dark-soft);
  font-size: clamp(.76rem, 1.1vw, .86rem); opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--b) * .06s); }
.vc-badge svg { width: 16px; height: 16px; color: var(--gold-300); flex: none; }
.checkstory[data-phase="2"] .vc-badge,
.checkstory[data-phase="3"] .vc-badge { opacity: 1; transform: none; }

/* Ab Desktop-Breite: alle vier Badges in einer Zeile halten */
@media (min-width: 1101px) {
  .vc-badges { flex-wrap: nowrap; gap: clamp(8px, 1vw, 14px); }
  .vc-badge { padding: 7px 12px; gap: 7px; font-size: clamp(.73rem, 1.06vw, .86rem); white-space: nowrap; }
}

.checkstory__dots { display: flex; gap: 10px; justify-content: center; }
.vdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22);
  transition: background .45s var(--ease), transform .45s var(--ease); }
.checkstory[data-phase="0"] .vdot[data-d="0"],
.checkstory[data-phase="1"] .vdot[data-d="1"],
.checkstory[data-phase="2"] .vdot[data-d="2"],
.checkstory[data-phase="3"] .vdot[data-d="3"] { background: var(--gold); transform: scale(1.35); }

.checkstory__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  max-width: min(860px, 92vw); margin-inline: auto; padding-bottom: clamp(48px, 8vh, 88px); }
.checkstory__note { color: var(--on-dark-faint); font-size: .76rem; line-height: 1.55; margin: 0; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) { .vc-scan { display: none; } }

/* Mobil / schmale Viewports: kein Sticky-Scrub, alles im Endzustand.
   Phasen werden zur nummerierten Schritt-Timeline (identisch zur Banken-Story). */
@media (max-width: 1100px) {
  .checkstory__track { min-height: 0; }
  .checkstory__stage { position: static; min-height: 0; padding: 0; }

  .checkstory__rail { position: relative; inset: auto; min-height: 0;
    width: min(520px, 100%); display: flex; flex-direction: column; gap: 0; text-align: left; }
  .checkstory .vphase { position: relative; inset: auto; display: grid !important;
    grid-template-columns: 46px 1fr; column-gap: 16px; align-items: start;
    opacity: 1 !important; transform: none !important; text-align: left;
    padding-bottom: clamp(20px, 5.5vw, 30px); }
  .checkstory .vphase:last-child { padding-bottom: 0; }
  .checkstory .vphase:not(:last-child)::before { content: ""; position: absolute;
    left: 22px; top: 50px; bottom: -2px; width: 2px; border-radius: 2px;
    background: linear-gradient(var(--gold-line), rgba(201, 168, 76, 0.06)); }
  .checkstory .vphase__no { width: 46px; height: 46px; display: grid; place-items: center;
    font-size: 1.18rem; line-height: 1; color: var(--gold-300);
    border: 1px solid var(--gold-line); border-radius: 50%; background: var(--gold-soft); }
  .checkstory .vphase__tx { max-width: none; padding-top: 3px; }
  .checkstory .vphase h3 { font-size: 1.16rem; margin-bottom: 4px; }
  .checkstory .vphase p { font-size: .96rem; }
  .checkstory__dots { display: none; }
}
@media (max-width: 600px) {
  .vc-board { grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
  .vc-col + .vc-col::before { display: none; }
}
@media (max-width: 460px) {
  .checkstory .vphase { grid-template-columns: 42px 1fr; column-gap: 14px; }
  .checkstory .vphase__no { width: 42px; height: 42px; font-size: 1.1rem; }
  .checkstory .vphase:not(:last-child)::before { left: 20px; top: 46px; }
}

/* Footer-Auszeichnung */
.footer-award { margin-top: 24px; }
.footer-award img { width: 92px; height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }

@media (max-width: 860px) {
  .hero__award { position: static; display: block; width: 118px; margin: 30px 0 0; animation: awardIn 1s var(--ease) .5s both; }
  .to-top { right: 16px; bottom: 16px; }
}

/* ---------- 21e. Berater-Finder, Newsletter, Consent ------------------- */
.berater-finder { max-width: 700px; margin: 0 auto 52px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-md); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); }
.berater-finder form { display: flex; gap: 12px; flex-wrap: wrap; }
.berater-finder input { flex: 1; min-width: 160px; padding: 15px 18px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--cream); font-size: 1rem; }
.berater-finder input:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px var(--gold-soft); }
.finder-result { margin-top: 22px; }
.finder-result__hit { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 22px 24px; border-radius: var(--radius); background: var(--navy-800); color: #fff; animation: fadeUp .5s var(--ease); }
.finder-result__hit .who { display: flex; gap: 16px; align-items: center; }
.finder-result__hit .who b { display: block; font-family: var(--serif); font-size: 1.2rem; }
.finder-result__hit .who small { color: var(--on-dark-soft); font-size: .9rem; }

.advisors { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 24px); }
.advisor { display: flex; gap: 16px; padding: 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; scroll-margin-top: 120px; }
.advisor.match { border-color: var(--gold); box-shadow: var(--shadow-md); }
.advisor:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }
.advisor__av { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--navy-800); color: var(--gold-300); display: grid; place-items: center; object-fit: cover; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.advisor b { display: block; color: var(--navy-800); font-size: 1.05rem; }
.advisor__role { display: block; color: var(--muted); font-size: .84rem; margin: 2px 0 8px; }
.advisor__loc { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-soft); font-size: .9rem; margin-bottom: 12px; }
.advisor__loc svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gold-600); }
.advisor__contact { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .86rem; }
.advisor__contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-600); font-weight: 600; }
.advisor__contact svg { width: 14px; height: 14px; }
.kw-pop__addr { display: block; color: var(--muted); }

/* Newsletter */
.footer-news { border-bottom: 1px solid var(--on-dark-line); padding-bottom: 40px; margin-bottom: 44px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
.footer-news h4 { font-family: var(--serif); color: #fff; font-size: 1.4rem; margin-bottom: 6px; }
.footer-news p { color: var(--on-dark-faint); font-size: .92rem; max-width: 44ch; }
.news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.news-form input[type=email] { flex: 1; min-width: 180px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--on-dark-line); background: rgba(255,255,255,.06); color: #fff; }
.news-form input[type=email]::placeholder { color: var(--on-dark-faint); }
.news-form input[type=email]:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.1); }
.news-consent { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: var(--on-dark-faint); margin-top: 12px; }
.news-consent input { margin-top: 2px; accent-color: var(--gold-600); }
.news-consent a { color: var(--gold-300); text-decoration: underline; }
.footer-news .form-status { margin-top: 10px; }

/* Cookie-Consent */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; max-width: 560px; margin-inline: auto; background: var(--navy-900); color: var(--on-dark-soft); border: 1px solid var(--on-dark-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px 24px; transform: translateY(160%); transition: transform .5s var(--ease); }
.consent.show { transform: none; }
.consent p { font-size: .9rem; line-height: 1.6; margin-bottom: 16px; color: rgba(255, 255, 255, 0.9); }
.consent strong { color: #fff; font-weight: 600; }
.consent a { color: var(--gold-300); text-decoration: underline; }
.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent__actions .btn { padding: 11px 22px; font-size: .9rem; }

/* SFO-Vorschaltseite (Haftungsdachhinweis-Gate) — main.js: entryGate().
   Solange html.kw-gate-pending gesetzt ist, bleibt der Rest der Seite
   unsichtbar & nicht fokussierbar; einzige Interaktion ist das Gate selbst. */
html.kw-gate-pending body { overflow: hidden; }
html.kw-gate-pending body > *:not(#kw-gate) { visibility: hidden; }
#kw-gate { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; background: var(--navy-950); background-image: var(--grain); }
.kw-gate__card { position: relative; width: 100%; max-width: 620px; margin: auto; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(26px, 5vw, 42px); }
.kw-gate__card img { height: 30px; margin-bottom: 18px; }
.kw-gate__card h2 { font-size: 1.25rem; margin-bottom: 8px; }
.kw-gate__lead { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; }
.kw-gate__block { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; margin-bottom: 12px; }
.kw-gate__block b { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 6px; }
.kw-gate__block p { font-size: .8rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.kw-gate__check { margin: 18px 0 20px; }
.kw-gate__card > .btn { width: 100%; justify-content: center; }
.kw-gate__card > .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.kw-gate__card > .btn:disabled::after { display: none; }

@media (max-width: 860px) {
  .advisors { grid-template-columns: 1fr; }
  .footer-news { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- 21f. Interaktive Karte (Leaflet/OSM) ------------------------ */
.map-wrap { position: relative; min-height: clamp(420px, 60vh, 560px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.map-wrap:has(.map--compact) { min-height: clamp(340px, 46vh, 440px); }
.map { height: clamp(420px, 60vh, 560px); width: 100%; background: var(--cream-200); }
.map--compact { height: clamp(340px, 46vh, 440px); }
.map-consent { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 32px; }
.map-consent .map-pin { color: var(--gold-300); display: flex; justify-content: center; }
.map-consent .map-pin svg { width: 44px; height: 44px; }
.map-consent b { font-family: var(--serif); font-size: 1.5rem; display: block; margin: 16px 0 8px; }
.map-consent p { color: var(--on-dark-soft); max-width: 44ch; margin: 0 auto 22px; font-size: .92rem; }
.kw-photo-marker { background: transparent; border: 0; }
.kw-pin-photo { display: block; width: 46px; height: 46px; border-radius: 50%; background-size: cover; background-position: center top; border: 3px solid var(--gold); box-shadow: 0 4px 12px rgba(13,18,32,.45); background-color: var(--navy-700); transition: transform .25s var(--ease); }
.leaflet-marker-icon:hover .kw-pin-photo { transform: scale(1.09); }
.kw-pin-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--navy-800); color: var(--gold-300); font-size: .72rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; font-style: normal; }
.leaflet-popup-content-wrapper { border-radius: 14px !important; box-shadow: var(--shadow-lg) !important; }
.leaflet-popup-content { margin: 16px 18px !important; font-family: var(--sans) !important; }
.kw-pop b { font-family: var(--serif); color: var(--navy-800); font-size: 1.1rem; }
.kw-pop__a { display: flex; gap: 11px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.kw-pop__a img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; border: 2px solid var(--gold-soft); }
.kw-pop__a > div > span { display: block; color: var(--navy-800); font-weight: 600; font-size: .92rem; }
.kw-pop__a small { color: var(--muted); font-size: .8rem; display: block; margin-bottom: 2px; }
.kw-pop__c a { color: var(--gold-600); font-weight: 600; font-size: .84rem; }

/* ---------- 21g. Themen-Rad (interaktive Blüte, drehbar) -------------- */
.wheel-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 54px; }
/* Perspektive für das Aufstellen der Blüte; nur das SVG kippt (rotateX), die
   Figuren bleiben aufrecht. Startzustand ohne JS = aufrecht sichtbar. */
.flower { position: relative; width: min(500px, 94vw); margin-inline: auto; perspective: 1400px; }
.wheel-panel { will-change: transform, opacity; }
.flower__svg { width: 100%; height: auto; display: block; overflow: visible; transform-origin: 50% 58%; will-change: transform; }
/* Handschlag-Figuren in der Mitte: bleiben aufrecht, skalieren beim Scrollen groß→klein */
.flower__figures { position: absolute; left: 50%; bottom: 44%; width: 42%; z-index: 3; transform: translate(-50%, 0) scale(0.5); transform-origin: 50% 100%; pointer-events: none; will-change: transform; filter: drop-shadow(0 8px 14px rgba(20,25,39,.12)); }
/* Klick-Rotation läuft über das SVG-transform-Attribut (JS): CSS-transform mit
   var() kollabiert in manchen Engines zu identity und überschreibt Attribute. */
.petal { cursor: pointer; transition: opacity .45s var(--ease); }
.petal__main, .petal__accent { transition: fill .4s; }
.petal:not(.is-active) { opacity: .72; }
.petal:hover { opacity: 1; }
.petal__label { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 21px; fill: #fff; pointer-events: none; user-select: none; letter-spacing: .01em; transition: font-size .4s var(--ease); }
/* Aktives Feld: Beschriftung größer + hervorgehoben (bleibt aufrecht = gerade) */
.petal.is-active .petal__label { font-size: 23.5px; font-weight: 800; letter-spacing: .01em; }
.petal.is-active .petal__main { filter: brightness(1.06) saturate(1.06); }

/* ---------- 21m. Brand-Film (Startseite) -------------------------------- */
.brandfilm { position: relative; margin-top: 46px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; background: #05070d; }
.brandfilm video { width: 100%; height: 100%; object-fit: cover; display: block; }
.brandfilm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.12) 0%, rgba(5,7,13,.10) 55%, rgba(5,7,13,.42) 100%); pointer-events: none; transition: opacity .4s var(--ease); }
.brandfilm.is-playing::after { opacity: 0; }
.brandfilm__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; background: var(--gold); color: var(--navy-900); display: grid; place-items: center; box-shadow: var(--shadow-gold); transition: transform .3s var(--ease), background .3s, opacity .3s; }
.brandfilm__play::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); animation: filmPulse 2.6s var(--ease) infinite; }
.brandfilm__play svg { width: 34px; height: 34px; margin-left: 4px; }
.brandfilm__play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--gold-400); }
.brandfilm.is-playing .brandfilm__play { opacity: 0; visibility: hidden; }
@keyframes filmPulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brandfilm__play::before { animation: none; } }
/* Panel-Inhalt bei jedem Klick dynamisch von rechts einblenden (fightet nicht mit
   dem Scroll-Transform des Containers – animiert wird der Inhalt, nicht die Hülle) */
@keyframes panelSwap { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.wheel-panel.swap > .eyebrow, .wheel-panel.swap > h3, .wheel-panel.swap > p, .wheel-panel.swap > a { animation: panelSwap .5s var(--ease) both; }
.wheel-panel.swap > h3 { animation-delay: .06s; }
.wheel-panel.swap > p { animation-delay: .12s; }
.wheel-panel.swap > a { animation-delay: .18s; }
/* Beim Klick: alter Inhalt smooth ausblenden — der neue kommt erst, wenn sich das
   Blatt nach rechts gedreht hat (dann greift .swap = Einblenden von rechts). */
.wheel-panel.leaving > .eyebrow, .wheel-panel.leaving > h3, .wheel-panel.leaving > p, .wheel-panel.leaving > a {
  opacity: 0; transform: translateX(-12px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .wheel-panel.swap > *, .wheel-panel.leaving > * { animation: none; transition: none; opacity: 1; transform: none; } }
/* Palette aus der Mediolanum-Blüte, auf Premium getrimmt */
.petal[data-i="0"] .petal__main { fill: #2C8C86; } .petal[data-i="0"] .petal__accent { fill: #56A8A1; }
.petal[data-i="1"] .petal__main { fill: #D9A53C; } .petal[data-i="1"] .petal__accent { fill: #E8C079; }
.petal[data-i="2"] .petal__main { fill: #D67E3A; } .petal[data-i="2"] .petal__accent { fill: #E4A772; }
.petal[data-i="3"] .petal__main { fill: #D2654F; } .petal[data-i="3"] .petal__accent { fill: #E1947F; }
.petal[data-i="4"] .petal__main { fill: #6A4C93; } .petal[data-i="4"] .petal__accent { fill: #957BB6; }
.petal[data-i="5"] .petal__main { fill: #4889C2; } .petal[data-i="5"] .petal__accent { fill: #84B0DA; }
.wheel-panel .eyebrow { margin-bottom: 14px; }
.wheel-panel h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.wheel-panel p { margin-bottom: 24px; }
@media (max-width: 860px) {
  .wheel-wrap { grid-template-columns: 1fr; gap: 26px; }
  .flower { width: min(380px, 86vw); }
  .wheel-panel { text-align: center; }
  .wheel-panel .btn { margin-inline: auto; }
}

/* ---------- 22. Responsive ----------------------------------------------- */
@media (max-width: 1040px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr; }
  .process__aside { position: static; }
}
@media (max-width: 860px) {
  :root { --header-h: 70px; }
  .main-nav, .nav-cta .btn, .nav-login { display: none; }
  .burger { display: grid; }
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature.reverse .feature__media { order: 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .stat:nth-child(2)::after { display: none; }
  .awards { grid-template-columns: repeat(2, 1fr); }
  .opt-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero__proof { gap: 22px 30px; }
  .hero__media::after {
    background:
      var(--grain),
      linear-gradient(180deg, rgba(10,14,24,0.60) 0%, rgba(10,14,24,0.42) 32%, rgba(10,14,24,0.74) 100%);
  }
}
@media (max-width: 767px) {
  /* Kennzahlen-Zeile (15 Berater · 85+ Gesellschaften · 15 Analysen) auf dem
     Handy ausblenden — bricht dort unschoen um und ueberladet die Hero. */
  .hero__proof { display: none; }
}
@media (max-width: 520px) {
  .grid-4, .awards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat::after { display: none !important; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- 22. Beratungsseiten: Editorial · 3D-Schaubild · Ratgeber ----- */

/* Redaktioneller Fließtext mit Serifen-Pullquote (mehr Text, ruhig gesetzt) */
.editorial { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(30px, 5vw, 76px); align-items: start; }
.editorial__body p { margin-bottom: 20px; }
.editorial__body p:last-child { margin-bottom: 0; }
.editorial__body .eyebrow { margin-bottom: 16px; }
.editorial__body h2 { margin-bottom: 22px; }
.editorial__body p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 700; float: left; font-size: 3.5em;
  line-height: 0.82; padding: 6px 12px 0 0; color: var(--navy-800);
}
.pullquote { position: relative; padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 40px) clamp(26px, 3vw, 38px); background: var(--cream); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pullquote::before { content: "\201C"; position: absolute; top: 0.06em; left: 0.24em; font-family: var(--serif); font-size: 5rem; line-height: 1; color: var(--gold-line); pointer-events: none; }
.pullquote blockquote { position: relative; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.28rem, 2vw, 1.62rem); line-height: 1.42; color: var(--navy-800); }
.pullquote cite { display: block; margin-top: 20px; font-style: normal; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pullquote cite::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 11px; }
/* Autorenzeile mit rundem Portraitfoto (z.B. Thomas Simmet in der Zitat-Kachel) */
.pq-author { display: flex; align-items: center; gap: 15px; margin-top: 22px; }
.pq-author__photo { flex: none; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top center; border: 1px solid var(--gold-line); box-shadow: var(--shadow-sm); }
.pq-author cite { margin-top: 0; }
.pq-author cite::before { display: none; }
/* Rundes Effizienzkurve-Medaillon (frei nach Markowitz) — oben rechts in der
   Zitat-Kachel; --medal reserviert dafür Kopf-Raum, damit der Text frei bleibt. */
.pullquote--medal { padding-top: clamp(84px, 8.5vw, 104px); }
.pq-medal {
  position: absolute; top: clamp(24px, 3vw, 32px); right: clamp(24px, 3vw, 36px);
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--gold-line); box-shadow: var(--shadow-sm);
}
@media (max-width: 820px) { .editorial { grid-template-columns: 1fr; gap: 34px; } }

/* KPI-Band der Themenseiten nutzt .stats2/.stat2 (Icon-Karten wie Startseite);
   lange Zahlen (z. B. 400.000) dürfen die Kartenbreite nicht sprengen. */
.stats2 .stat2__num { font-size: clamp(2.3rem, 3.6vw, 3.4rem); }

/* Schaubild-Bühne: dezente 3D-Perspektive, JS richtet die Figur beim Scrollen auf */
.sb-stage { perspective: 1700px; perspective-origin: 50% 42%; }
.sb-stage .schaubild { transform-style: preserve-3d; will-change: transform; backface-visibility: hidden; }

/* Ratgeber-Teaser: großes Artikel-Feature + PDF-/Zweitartikel-Karte */
.rteaser { display: grid; grid-template-columns: 1.42fr 1fr; gap: clamp(20px, 2.6vw, 32px); margin-top: 52px; }
.rt-main { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s; }
.rt-main:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-line); }
.rt-main__img { position: relative; overflow: hidden; min-height: 240px; }
.rt-main__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.rt-main:hover .rt-main__img img { transform: scale(1.06); }
.rt-main__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 55%, rgba(20,25,39,0.18)); }
.rt-main__body { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; }
.rt-cat { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600); background: var(--gold-soft); border: 1px solid var(--gold-line); padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 18px; }
.rt-cat svg { flex: none; width: 14px; height: 14px; }
.rt-main__body h3 { font-family: var(--serif); font-weight: 600; margin-bottom: 14px; }
.rt-main__body p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; margin-bottom: 22px; }
.rt-main__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rt-read { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; color: var(--muted); }
.rt-read svg { width: 15px; height: 15px; }
.rt-side { position: relative; overflow: hidden; background: var(--navy-800); background-image: var(--grain); color: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 38px); display: flex; flex-direction: column; box-shadow: var(--shadow-md); border: 1px solid rgba(255,255,255,0.06); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.rt-side::before { content: ""; position: absolute; top: -40%; right: -30%; width: 70%; height: 90%; background: radial-gradient(circle, rgba(201,168,76,0.22), transparent 70%); pointer-events: none; }
.rt-side:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.rt-side__ico { position: relative; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: rgba(201,168,76,0.12); border: 1px solid var(--gold-line); color: var(--gold-300); margin-bottom: 22px; }
.rt-side__ico svg { width: 27px; height: 27px; }
.rt-side__kind { position: relative; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 10px; }
.rt-side h3 { position: relative; color: #fff; font-family: var(--serif); font-weight: 600; margin-bottom: 12px; }
.rt-side p { position: relative; color: var(--on-dark-soft); font-size: 0.94rem; line-height: 1.58; margin-bottom: 26px; }
.rt-side .btn { position: relative; margin-top: auto; }
@media (max-width: 980px) { .rteaser { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .rt-main { grid-template-columns: 1fr; } .rt-main__img { min-height: 0; height: 200px; } }

/* ---------- 22c. Fallgeschichten (anonyme Fallbeispiele) ----------------- */
.cases { margin-top: 52px; align-items: stretch; }
.case-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 2.8vw, 38px); box-shadow: var(--shadow-md);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s; }
.case-card::before { content: ""; position: absolute; top: -35%; right: -30%; width: 62%; height: 78%;
  background: radial-gradient(circle, var(--gold-soft), transparent 70%); pointer-events: none; }
.case-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-line); }
.case-card > * { position: relative; }
.case-topic { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gold-600); background: var(--gold-soft); border: 1px solid var(--gold-line);
  padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 24px; }
.case-topic svg { width: 14px; height: 14px; flex: none; }
.case-result { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.case-num { font-family: var(--serif); font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 4.4vw, 3.3rem); color: var(--navy-800); font-variant-numeric: tabular-nums; }
.case-num .euro { font-size: 0.44em; font-weight: 700; color: var(--gold-600); margin-left: 6px; vertical-align: 0.42em; }
.case-unit { font-size: 0.9rem; line-height: 1.4; color: var(--muted); font-weight: 500; }
.case-story { font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: var(--navy-700);
  font-weight: 500; margin-bottom: 24px; flex-grow: 1; }
.case-story b { color: var(--navy-800); font-weight: 700; }
.case-who { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--ink-soft);
  padding-top: 4px; border-top: 1px solid transparent; }
.case-who svg { width: 18px; height: 18px; color: var(--gold-600); flex: none; }
.case-who b { color: var(--navy-800); font-weight: 600; }
.cases-note { margin-top: 32px; text-align: center; font-size: 0.82rem; color: var(--muted);
  max-width: 74ch; margin-inline: auto; line-height: 1.6; }

/* ---------- 23. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ticks--stagger li, .ticks--stagger li svg { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .hero__media video { display: none; }
  .sb-stage .schaubild { transform: none !important; }
}

/* ---------- 21m. Immobiliensuche-Landingpage (ThinkImmo) --------------- */
/* Cinematischer Hero mit mehrschichtiger Parallax-Tiefe. Die Ebenen sind
   eigenstaendige HTML-Bloecke (keine SVG-<g>-Transforms -> keine Matrix-Falle),
   werden per JS translate3d gedriftet. Reduced-Motion/Touch bleibt statisch. */
.immo-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  background: radial-gradient(120% 92% at 50% -12%, #16203a 0%, var(--navy-900) 46%, var(--navy-950) 100%);
  background-color: var(--navy-950); color: var(--on-dark); }
.immo-hero__scene { position: absolute; inset: -8% -4%; z-index: 0; pointer-events: none; }
.immo-layer { position: absolute; inset: 0; will-change: transform; }
.immo-layer svg { position: absolute; width: 100%; height: 100%; }
.il-sky { background:
  radial-gradient(80% 60% at 78% 16%, rgba(201,168,76,.16), transparent 60%),
  radial-gradient(70% 50% at 18% 26%, rgba(65,160,240,.10), transparent 62%); }
.il-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,.7);
  box-shadow: 0 0 6px rgba(230,210,154,.7); animation: immoTwinkle 4.6s var(--ease) infinite; }
@keyframes immoTwinkle { 0%,100%{opacity:.25} 50%{opacity:.95} }
.il-skyline svg path, .il-mid svg path { fill: currentColor; }
.il-skyline { color: #10182b; opacity: .92; }
.il-mid { color: #182238; }
.il-grid { background-image: linear-gradient(rgba(201,168,76,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,.06) 1px, transparent 1px);
  background-size: 46px 46px; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%); mask-image: linear-gradient(to top, #000 0%, transparent 72%); opacity: .5; }
.immo-hero__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,74%) var(--my,30%), rgba(201,168,76,.16), transparent 60%); }

.immo-hero .container { position: relative; z-index: 3; width: 100%; }
.immo-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: var(--header-h); }
.immo-hero__content { will-change: transform, opacity; }
.immo-hero h1, .immo-hero h2, .immo-hero h3 { color: #fff; }
.immo-hero h1 { text-shadow: 0 2px 30px rgba(10,14,24,.55); }
.immo-hero .eyebrow { color: var(--gold-300); }
.immo-hero__lead { color: var(--on-dark-soft); font-size: 1.12rem; max-width: 42ch; margin-top: 18px; }
.immo-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (min-width: 620px) { .immo-chips { flex-wrap: nowrap; } }
.immo-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.05); border: 1px solid var(--on-dark-line); color: var(--on-dark-soft);
  font-size: .8rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.immo-chip svg { width: 16px; height: 16px; color: var(--gold-300); flex: none; }

/* Schwebende 3D-Suchkarte (ThinkImmo-Mockup) */
.immo-hero__stage { perspective: 1500px; perspective-origin: 60% 40%; }
.immo-card { position: relative; border-radius: 20px; padding: 20px; transform-style: preserve-3d;
  transform: rotateY(-16deg) rotateX(7deg); transition: transform .25s ease-out; will-change: transform;
  background: linear-gradient(160deg, rgba(30,38,64,.92), rgba(16,22,38,.94));
  border: 1px solid rgba(201,168,76,.28); box-shadow: 0 40px 90px rgba(5,8,16,.6), inset 0 1px 0 rgba(255,255,255,.06);
  animation: immoFloat 7s ease-in-out infinite; }
@keyframes immoFloat { 0%,100%{ translate: 0 0 } 50%{ translate: 0 -14px } }
.immo-card__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-line); color: var(--on-dark-soft); font-size: .86rem; transform: translateZ(14px); }
.immo-card__bar svg { width: 18px; height: 18px; color: var(--gold-300); flex: none; }
.immo-card__filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 16px; transform: translateZ(10px); }
.immo-card__filters span { font-size: .72rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-300); border: 1px solid var(--gold-line); }
.immo-result { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 12px;
  border-radius: 13px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); margin-top: 10px;
  transform: translateZ(var(--rz, 14px)); }
.immo-result__img { width: 58px; height: 46px; border-radius: 8px; background: linear-gradient(135deg, #2a3556, #1a2035); position: relative; overflow: hidden; }
.immo-result__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(201,168,76,.25)); }
.immo-result b { display: block; font-size: .84rem; color: #fff; }
.immo-result small { color: var(--on-dark-faint); font-size: .72rem; }
.immo-result__yield { text-align: right; }
.immo-result__yield b { color: var(--gold-300); font-size: .96rem; }
.immo-result__yield small { color: var(--on-dark-faint); }
.immo-card__pulse { position: absolute; top: 16px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: #5AC346;
  box-shadow: 0 0 0 0 rgba(90,195,70,.6); animation: immoPulse 2.2s ease-out infinite; transform: translateZ(16px); }
@keyframes immoPulse { 0%{ box-shadow: 0 0 0 0 rgba(90,195,70,.55) } 70%{ box-shadow: 0 0 0 12px rgba(90,195,70,0) } 100%{ box-shadow: 0 0 0 0 rgba(90,195,70,0) } }

/* Stat-Band */
.immo-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.immo-stats > div { background: var(--paper); padding: 30px 24px; text-align: center; }
.immo-stats .num { font-family: var(--serif); font-size: clamp(1.9rem,3.4vw,2.6rem); color: var(--navy-800); line-height: 1; }
.immo-stats .num em { color: var(--gold-600); font-style: normal; }
.immo-stats .lbl { margin-top: 10px; font-size: .88rem; color: var(--ink-soft); }

/* 3D-Scroll-Story: Suchprozess auf angewinkeltem Geraet (nutzt houseStory-Mechanik) */
.immo-build { position: relative; min-height: 300vh; }
.immo-build__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,70px); align-items: start; }
.immo-build__stage { position: sticky; top: calc(var(--header-h) + 6vh); height: 76vh; display: grid; place-items: center; perspective: 1600px; }
.immo-device { position: relative; width: min(340px, 78%); aspect-ratio: 320 / 500; transform: rotateY(-17deg) rotateX(6deg); transform-style: preserve-3d;
  border-radius: 34px; padding: 14px; background: linear-gradient(155deg,#20283f,#0f1526);
  border: 1px solid rgba(201,168,76,.24); box-shadow: 0 50px 100px rgba(4,7,14,.6), inset 0 1px 0 rgba(255,255,255,.07); }
.immo-screen { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #0c1120; }
.immo-device .hs { position: absolute; inset: 0; padding: 20px 16px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg,#111830,#0b1020); transform: translateZ(-40px) translateY(22px); }
.immo-device .hs.on { transform: translateZ(0) translateY(0); }
.immo-scr-title { display: flex; align-items: center; gap: 8px; color: var(--gold-300); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.immo-scr-title svg { width: 16px; height: 16px; }
.immo-bar { height: 34px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-line); }
.immo-linebar { height: 12px; border-radius: 6px; background: rgba(255,255,255,.08); }
.immo-linebar.g { background: linear-gradient(90deg, var(--gold), var(--gold-300)); }
.immo-mini { display: grid; grid-template-columns: 42px 1fr; gap: 9px; align-items: center; padding: 9px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.immo-mini i { display: block; height: 34px; border-radius: 7px; background: linear-gradient(135deg,#2a3556,#1a2035); }
.immo-mini b { color: #fff; font-size: .8rem; display: block; }
.immo-mini small { color: var(--on-dark-faint); font-size: .68rem; }
.immo-scr-scan { position: relative; flex: 1; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.immo-scr-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, rgba(201,168,76,.28), transparent); animation: immoScan 2.4s var(--ease) infinite; }
@keyframes immoScan { 0%{ top: -40% } 100%{ top: 100% } }
.immo-badge-ok { align-self: center; margin-top: auto; margin-bottom: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: rgba(90,195,70,.14); color: #8fe07a; border: 1px solid rgba(90,195,70,.4); font-weight: 700; font-size: .82rem; }
.immo-badge-ok svg { width: 18px; height: 18px; }

/* ---- Animierte Screen-Inhalte: der Bildschirm füllt sich beim Aktivwerden ---- */
/* Suchfeld — Adresse „Berlin" wird eingetippt */
.immo-field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-line); color: #fff; font-size: .82rem; font-weight: 600; }
.immo-field__ico { display: inline-flex; color: var(--gold-300); flex: none; }
.immo-field__ico svg { width: 15px; height: 15px; }
.immo-field__txt { white-space: nowrap; overflow: hidden; max-width: 0; }
.immo-field__caret { width: 2px; height: 15px; background: var(--gold-300); opacity: 0; flex: none; }
.hs.on .immo-field__txt { animation: immoType 1s steps(7) .35s forwards; }
.hs.on .immo-field__caret { animation: immoCaret 1.9s .3s forwards; }
@keyframes immoType { to { max-width: 74px; } }
@keyframes immoCaret { 0%,10%{opacity:1} 15%{opacity:0} 27%{opacity:1} 42%{opacity:0} 55%{opacity:1} 70%{opacity:0} 82%{opacity:1} 100%{opacity:0} }

/* Filter-Chips — poppen nacheinander gold auf (der Cursor „setzt" sie) */
.immo-chips2 { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0; }
.immo-chip2 { font-size: .72rem; font-weight: 700; padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--on-dark-line); color: var(--on-dark-soft);
  opacity: 0; transform: translateY(6px) scale(.9); }
.hs.on .immo-chip2 { animation: immoChip .5s var(--ease) forwards; animation-delay: calc(1.15s + var(--ci) * .8s); }
@keyframes immoChip {
  0%   { opacity: 0; transform: translateY(6px) scale(.9); background: rgba(255,255,255,.05); border-color: var(--on-dark-line); color: var(--on-dark-soft); }
  60%  { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-300); }
}

/* Budget-Regler läuft hoch */
.immo-range { position: relative; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); margin: 6px 0 2px; }
.immo-range__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-300)); }
.immo-range__knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 2px solid var(--gold); transform: translate(-50%,-50%); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.hs.on .immo-range__fill { animation: immoRangeFill 1s var(--ease) 2.7s forwards; }
.hs.on .immo-range__knob { animation: immoRangeKnob 1s var(--ease) 2.7s forwards; }
@keyframes immoRangeFill { to { width: 62%; } }
@keyframes immoRangeKnob { to { left: 62%; } }

/* Mauszeiger — fährt herein und tippt über die Chips */
.immo-cursor { position: absolute; left: 0; top: 0; width: 20px; height: 20px; z-index: 6; color: #fff; pointer-events: none;
  opacity: 0; transform: translate(250px,330px); filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.immo-cursor svg { width: 100%; height: 100%; }
.hs.on .immo-cursor { animation: immoCursor 4.6s var(--ease) .2s both; }
@keyframes immoCursor {
  0%   { opacity: 0; transform: translate(250px,330px) scale(1); }
  9%   { opacity: 1; }
  25%  { transform: translate(60px,150px) scale(1); }
  29%  { transform: translate(60px,150px) scale(.8); }
  33%  { transform: translate(60px,150px) scale(1); }
  47%  { transform: translate(148px,150px) scale(1); }
  51%  { transform: translate(148px,150px) scale(.8); }
  55%  { transform: translate(148px,150px) scale(1); }
  67%  { transform: translate(214px,150px) scale(1); }
  71%  { transform: translate(214px,150px) scale(.8); }
  75%  { transform: translate(214px,150px) scale(1); }
  90%  { opacity: 1; transform: translate(150px,214px) scale(1); }
  100% { opacity: 0; transform: translate(250px,330px) scale(1); }
}

/* Scan-Screen — Portale werden nacheinander abgehakt */
.immo-portal { display: flex; align-items: center; gap: 9px; font-size: .76rem; font-weight: 600; color: var(--on-dark-soft);
  padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid var(--on-dark-line); }
.immo-portal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark-faint); flex: none; }
.immo-portal__ok { margin-left: auto; display: inline-flex; color: #8fe07a; opacity: 0; }
.immo-portal__ok svg { width: 15px; height: 15px; }
.hs.on .immo-portal { animation: immoMiniIn .5s var(--ease) both; animation-delay: calc(var(--pi) * .5s); }
.hs.on .immo-portal__dot { animation: immoDotScan 1.1s var(--ease) infinite; animation-delay: calc(var(--pi) * .5s); }
.hs.on .immo-portal__ok { animation: immoBadgePop .4s var(--ease) forwards; animation-delay: calc(1s + var(--pi) * .5s); }
@keyframes immoDotScan { 0%,100% { background: var(--on-dark-faint); box-shadow: none; } 50% { background: var(--gold-300); box-shadow: 0 0 8px var(--gold-300); } }

/* Treffer/Finanzierung — Objekte, Balken & Badge kommen gestaffelt herein */
.hs.on .immo-mini { animation: immoMiniIn .55s var(--ease) both; animation-delay: calc(var(--d,0) * .35s + .15s); }
.immo-device .immo-linebar { transform-origin: left; }
.hs.on .immo-linebar { animation: immoBarGrow .8s var(--ease) both; animation-delay: calc(var(--d,0) * .18s + .2s); }
.hs.on .immo-badge-ok { animation: immoBadgePop .55s var(--ease) both; animation-delay: var(--bd, .9s); }
@keyframes immoMiniIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes immoBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes immoBadgePop { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 60% { transform: translateY(0) scale(1.08); } 100% { opacity: 1; transform: none; } }

.immo-build__steps { display: flex; flex-direction: column; padding: 0; }
.immo-build__steps .bstep { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 26px; }
.immo-build__steps .bnum { font-family: var(--serif); color: var(--gold-600); font-size: .9rem; letter-spacing: .1em; }

/* Feature-Grid */
.immo-feat { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); overflow: hidden; }
.immo-feat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.immo-feat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-line); }
.immo-feat:hover::before { transform: scaleX(1); }
.immo-feat__ico { color: var(--gold-600); margin-bottom: 16px; }
.immo-feat__ico svg { width: 36px; height: 36px; stroke-width: 1.6; }
.immo-feat h3 { font-size: 1.16rem; margin-bottom: 8px; }
.immo-feat p { font-size: .95rem; margin: 0; color: var(--ink-soft); }

/* Split "aus einer Hand" */
.immo-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,66px); align-items: center; }
.immo-pfig { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 5/4; }
.immo-pfig img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.immo-pfig__tag { position: absolute; left: 20px; bottom: 20px; right: 20px; display: flex; gap: 14px; }
.immo-pfig__tag span { flex: 1; background: rgba(14,19,32,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--on-dark-line);
  color: #fff; border-radius: 12px; padding: 12px 14px; font-size: .82rem; }
.immo-pfig__tag b { display: block; color: var(--gold-300); font-family: var(--serif); font-size: 1.4rem; }

/* Consent-gated ThinkImmo-Widget (datenschutzfreundlich, wie die Karte) */
.immo-embed { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(201,168,76,.22); min-height: clamp(560px, 82vh, 900px); background: #0c1120; }
.immo-embed__consent { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 40px;
  background: radial-gradient(90% 80% at 50% 0%, #16203a 0%, var(--navy-800) 55%, var(--navy-900) 100%); }
.immo-embed__consent .ico { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto; background: var(--gold-soft); color: var(--gold-300); }
.immo-embed__consent .ico svg { width: 30px; height: 30px; }
.immo-embed__consent b { font-family: var(--serif); font-size: 1.7rem; color: #fff; display: block; margin: 18px 0 10px; }
.immo-embed__consent p { color: var(--on-dark-soft); max-width: 52ch; margin: 0 auto 26px; font-size: .95rem; }
.immo-embed__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.immo-embed__note { color: var(--on-dark-faint); font-size: .78rem; margin-top: 20px; }
.immo-embed__note a { color: var(--gold-300); }
.immo-embed__frame { position: absolute; inset: 0; z-index: 1; }
.immo-embed__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.immo-embed__powered { position: absolute; z-index: 3; top: 14px; right: 16px; font-size: .72rem; color: var(--on-dark-faint); letter-spacing: .04em; }

@media (max-width: 980px) {
  .immo-hero__grid { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .immo-hero__stage { order: 2; margin: 0 auto; max-width: 380px; width: 100%; }
  .immo-stats { grid-template-columns: repeat(2,1fr); }
  .immo-build { min-height: 0; }
  .immo-build__grid { grid-template-columns: 1fr; }
  .immo-build__stage { position: relative; top: 0; height: auto; padding: 20px 0 8px; }
  .immo-build__steps .bstep { min-height: auto; padding: 18px 0 18px 24px; }
  .immo-device { transform: none; width: min(300px, 82%); }
  .immo-device .hs { position: relative; inset: auto; }
  .immo-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .immo-stats { grid-template-columns: 1fr 1fr; }
  .immo-card { transform: none; }
  .immo-pfig__tag { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .immo-card, .immo-card__pulse, .il-stars i { animation: none !important; }
  .immo-card { transform: rotateY(-10deg) rotateX(4deg) !important; }
  .immo-scr-scan::after { animation: none !important; display: none; }
  /* Animierte Screens: Endzustand statisch zeigen, kein Cursor-Ballett */
  .immo-cursor { display: none !important; }
  .hs .immo-field__txt { max-width: 74px !important; animation: none !important; }
  .hs .immo-field__caret { display: none !important; }
  .hs .immo-chip2 { opacity: 1 !important; transform: none !important; animation: none !important;
    background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-300); }
  .hs .immo-range__fill { width: 62% !important; animation: none !important; }
  .hs .immo-range__knob { left: 62% !important; animation: none !important; }
  .hs .immo-mini, .hs .immo-linebar, .hs .immo-badge-ok, .hs .immo-portal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hs .immo-portal__ok { opacity: 1 !important; animation: none !important; }
  .hs .immo-portal__dot { animation: none !important; }
}

/* ---------- 21n. Immobiliensuche v2: Video-Hero, Preis-Pins, Bilder, Portale, Galerie --- */
/* Hero-Video (Berlin-Überflug) + Navy-Scrim für Textkontrast */
.immo-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.immo-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,14,24,.94) 0%, rgba(10,14,24,.74) 40%, rgba(10,14,24,.32) 78%, rgba(10,14,24,.5) 100%),
    linear-gradient(180deg, rgba(10,14,24,.55) 0%, transparent 26%, transparent 62%, rgba(10,14,24,.7) 100%),
    var(--grain); }
.immo-hero .il-grid { z-index: 2; }
.immo-pinwrap { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* Preis-Pins: Punkt am Gebäude → Stiel wächst hoch → Preis-Bubble ploppt, gestaffelt loop */
.immo-pin { position: absolute; }
.immo-pin__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 0 rgba(201,168,76,.55); animation: immoDot 2.4s ease-out infinite; }
.immo-pin__stalk { position: absolute; left: -1px; bottom: 0; width: 2px; height: 0;
  background: linear-gradient(0deg, var(--gold), rgba(201,168,76,.15)); transform-origin: bottom;
  animation: immoStalk 7s var(--ease) var(--delay,0s) infinite; }
.immo-pin__tag { position: absolute; left: 0; bottom: 46px; transform: translate(-50%, 8px) scale(.9); opacity: 0;
  white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff;
  background: rgba(14,19,32,.9); border: 1px solid var(--gold-line); box-shadow: 0 10px 26px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: immoTag 7s var(--ease) var(--delay,0s) infinite; }
.immo-pin__tag--gold { color: var(--navy-900); background: var(--gold); border-color: var(--gold-400); }
@keyframes immoDot { 0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,.55) } 50% { box-shadow: 0 0 0 9px rgba(201,168,76,0) } }
@keyframes immoStalk { 0% { height: 0; opacity: 0 } 7% { opacity: 1 } 20% { height: 40px } 78% { height: 40px; opacity: 1 } 92%,100% { height: 40px; opacity: 0 } }
@keyframes immoTag {
  0%,13% { opacity: 0; transform: translate(-50%, 8px) scale(.9) }
  24% { opacity: 1; transform: translate(-50%, 0) scale(1) }
  78% { opacity: 1; transform: translate(-50%, 0) scale(1) }
  92%,100% { opacity: 0; transform: translate(-50%, -6px) scale(.96) } }

/* Echte Objektbilder in Hero-Karte + Story-Gerät */
.immo-result__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.immo-result__img::after { z-index: 1; }
.immo-mini i { position: relative; overflow: hidden; }
.immo-mini i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Portal-Wortmarken-Band */
.immo-portals__lead { text-align: center; color: var(--on-dark-soft); margin: 0 auto 24px; max-width: none; font-size: .96rem; white-space: nowrap; }
@media (max-width: 640px) { .immo-portals__lead { white-space: normal; } }
.immo-wmrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 18px; }
.immo-wm { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 22px;
  background: #fff; border-radius: 13px; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .35s var(--ease); }
.immo-wm:hover { transform: translateY(-3px); }
.immo-wm img { height: 26px; width: auto; max-width: 148px; display: block; }
.immo-wm--more { background: transparent; box-shadow: none; color: var(--gold-300); border: 1px dashed var(--gold-line);
  border-radius: 999px; height: 54px; padding: 0 20px; font-size: .92rem; font-weight: 600; }
@media (max-width: 560px) { .immo-wm { height: 46px; padding: 0 16px; } .immo-wm img { height: 22px; } .immo-wm--more { height: 46px; } }

/* Objekt-Galerie */
.immo-obj { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.immo-obj:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.immo-obj__img { position: relative; aspect-ratio: 3/2; overflow: hidden; }
.immo-obj__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.immo-obj:hover .immo-obj__img img { transform: scale(1.06); }
.immo-obj__tag { position: absolute; top: 12px; left: 12px; background: rgba(14,19,32,.82); color: #fff; font-size: .72rem;
  font-weight: 600; padding: 5px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.immo-obj__yield { position: absolute; bottom: 12px; right: 12px; background: var(--gold); color: var(--navy-900);
  border-radius: 11px; padding: 6px 11px; font-size: .64rem; font-weight: 600; text-align: center; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .04em; box-shadow: var(--shadow-gold); }
.immo-obj__yield b { display: block; font-family: var(--serif); font-size: 1.04rem; letter-spacing: 0; text-transform: none; }
.immo-obj__body { padding: 18px 20px 20px; }
.immo-obj__body h3 { font-size: 1.12rem; margin-bottom: 6px; }
.immo-obj__loc { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .86rem; margin: 0 0 14px; }
.immo-obj__loc svg { width: 15px; height: 15px; color: var(--gold-600); flex: none; }
.immo-obj__meta { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; }
.immo-obj__meta span { color: var(--ink-soft); font-size: .85rem; }
.immo-obj__meta b { font-family: var(--serif); font-size: 1.2rem; color: var(--navy-800); }
.immo-disclaimer { text-align: center; color: var(--ink-soft); font-size: .8rem; margin-top: 26px; opacity: .82; }

/* Widget-Consent: driftende Objektbild-Collage hinter dem Scrim */
.immo-embed__consent { background: transparent; position: relative; overflow: hidden; }
.immo-embed__consent::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(92% 82% at 50% 0%, rgba(22,32,58,.82), rgba(20,25,39,.9) 52%, rgba(14,19,32,.95)); }
.immo-embed__consent > div:not(.immo-embed__collage) { position: relative; z-index: 2; }
.immo-embed__collage { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; gap: 8px; padding: 8px; opacity: .2; }
.immo-embed__collage span { overflow: hidden; border-radius: 14px; }
.immo-embed__collage img { width: 100%; height: 100%; object-fit: cover;
  animation: immoDrift 20s ease-in-out infinite; animation-delay: calc(var(--i) * -3.1s); }
@keyframes immoDrift { 0%,100% { transform: scale(1.06) translateY(0) } 50% { transform: scale(1.14) translateY(-7px) } }
@media (max-width: 700px) { .immo-embed__collage { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .immo-hero__video { display: none; }
  .immo-hero__scene { background: #0a0e18 url(../img/immo/immo-hero-poster.jpg) center/cover; }
  .immo-pin__stalk { height: 40px !important; opacity: 1 !important; animation: none !important; }
  .immo-pin__tag { opacity: 1 !important; transform: translate(-50%, 0) !important; animation: none !important; }
  .immo-pin__dot, .immo-embed__collage img { animation: none !important; }
}

/* ---------- 21o. Immobiliensuche CTA-Felder --------------------------- */
.immo-inline-cta { text-align: center; margin-top: 44px; }
.immo-searchcta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(201,168,76,.14), rgba(201,168,76,.03)); border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); }
.immo-searchcta__txt { max-width: 58ch; }
.immo-searchcta__txt .eyebrow { margin-bottom: 12px; }
.immo-searchcta__txt h2 { margin-bottom: 10px; }
.immo-searchcta__txt p { margin: 0; }
.immo-searchcta__act { display: flex; flex-direction: column; gap: 12px; flex: none; }
@media (max-width: 760px) { .immo-searchcta__act { flex-direction: row; flex-wrap: wrap; } }

/* ==== Saisonale Hero-Varianten, Poster & Logo-Akzente ==== */
html[data-hero="3"] .hero__variant[data-variant="3"],
html[data-hero="valentinstag"] .hero__variant[data-variant="valentinstag"],
html[data-hero="ostern"] .hero__variant[data-variant="ostern"],
html[data-hero="muttertag"] .hero__variant[data-variant="muttertag"],
html[data-hero="vatertag"] .hero__variant[data-variant="vatertag"],
html[data-hero="erntedank"] .hero__variant[data-variant="erntedank"],
html[data-hero="weltspartag"] .hero__variant[data-variant="weltspartag"],
html[data-hero="halloween"] .hero__variant[data-variant="halloween"],
html[data-hero="blackfriday"] .hero__variant[data-variant="blackfriday"],
html[data-hero="weihnachten"] .hero__variant[data-variant="weihnachten"],
html[data-hero="silvester"] .hero__variant[data-variant="silvester"] { display: block; }

html[data-hero="3"] .hero__media { background-image: url(../img/hero/hero-sommer-poster.jpg); }
html[data-hero="valentinstag"] .hero__media { background-image: url(../img/hero/hero-valentinstag-poster.jpg); }
html[data-hero="ostern"] .hero__media { background-image: url(../img/hero/hero-ostern-poster.jpg); }
html[data-hero="muttertag"] .hero__media { background-image: url(../img/hero/hero-muttertag-poster.jpg); }
html[data-hero="vatertag"] .hero__media { background-image: url(../img/hero/hero-vatertag-poster.jpg); }
html[data-hero="erntedank"] .hero__media { background-image: url(../img/hero/hero-erntedank-poster.jpg); }
html[data-hero="weltspartag"] .hero__media { background-image: url(../img/hero/hero-weltspartag-poster.jpg); }
html[data-hero="halloween"] .hero__media { background-image: url(../img/hero/hero-halloween-poster.jpg); }
html[data-hero="blackfriday"] .hero__media { background-image: url(../img/hero/hero-blackfriday-poster.jpg); }
html[data-hero="weihnachten"] .hero__media { background-image: url(../img/hero/hero-weihnachten-poster.jpg); }
html[data-hero="silvester"] .hero__media { background-image: url(../img/hero/hero-silvester-poster.jpg); }

.brand { position: relative; }
.brand__acc { position: absolute; inset: 0; pointer-events: none; }
.logo-acc { position: absolute; top: 0; display: none; }
.logo-acc svg { display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
html[data-season="weihnachten"] .logo-acc--weihnachten,
html[data-season="halloween"] .logo-acc--halloween,
html[data-season="silvester"] .logo-acc--silvester,
html[data-season="ostern"] .logo-acc--ostern { display: block; }
.logo-acc--weihnachten { left: -3px; top: -10px; width: 34px; transform: rotate(8deg); }
.logo-acc--halloween  { left: 3px;  top: -11px; width: 27px; transform: rotate(-4deg); }
.logo-acc--silvester  { left: 1px;  top: -14px; width: 27px; transform: rotate(9deg); }
.logo-acc--ostern     { left: -1px; top: -16px; width: 32px; }


/* ---------- Checklisten (checklisten.html + <slug>.html) ----------------- */
.ukl-intro { margin-bottom: 18px; }
.ukl-hint { display: flex; align-items: center; gap: 10px; margin: 0 0 40px; padding: 12px 16px;
  border-radius: 12px; background: var(--gold-soft); border: 1px solid var(--gold-line);
  font-size: .88rem; color: var(--ink-soft); }
.ukl-hint svg { width: 18px; height: 18px; flex: none; color: var(--gold-600); }
.ukl-hint strong { color: var(--navy-800); }

/* Fortschrittsleiste - klebt unter dem Header mit */
.ukl-progress { position: sticky; top: 72px; z-index: 40;
  background: rgba(247, 245, 240, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.ukl-progress__in { display: flex; align-items: center; gap: 18px; padding: 14px 0; }
.ukl-progress__track { flex: 1; height: 6px; border-radius: 99px; background: var(--cream-300); overflow: hidden; }
.ukl-progress__track span { display: block; height: 100%; width: 0;
  border-radius: 99px; background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transition: width .45s cubic-bezier(.16,1,.3,1); }
.ukl-progress__txt { margin: 0; font-size: .88rem; color: var(--ink-soft); white-space: nowrap; }
.ukl-progress__txt strong { color: var(--navy-800); font-weight: 700; }
.ukl-reset { border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  padding: 7px 14px; border-radius: 99px; font: inherit; font-size: .82rem; color: var(--muted);
  transition: color .15s, border-color .15s; }
.ukl-reset:hover { color: var(--navy-800); border-color: var(--navy-500); }

/* Bloecke */
.ukl-block { margin-bottom: 40px; padding: 30px 32px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 40px -30px rgba(20, 25, 39, .45);
  transition: border-color .3s; }
.ukl-block.is-complete { border-color: var(--gold-line); }
.ukl-block__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ukl-block__txt { flex: 1; }
.ukl-block__no { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 600;
  color: var(--gold); line-height: 1; padding-top: 4px; }
.ukl-block__ico { display: flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-600);
  transition: background .3s, color .3s; }
.ukl-block.is-complete .ukl-block__ico { background: var(--gold-600); color: #fff; }
.ukl-block__ico svg { width: 21px; height: 21px; }
.ukl-block__head h2 { margin: 0 0 4px; font-size: 1.3rem; }
.ukl-block__head p { margin: 0; color: var(--muted); font-size: .92rem; }
.ukl-block__count { flex: none; padding: 5px 11px; border-radius: 99px; background: var(--cream);
  font-size: .78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: background .3s, color .3s; }
.ukl-block.is-complete .ukl-block__count { background: var(--gold-soft); color: var(--gold-600); }

/* Punkte */
.ukl-list { list-style: none; margin: 0; padding: 0; }
.ukl-item + .ukl-item { border-top: 1px solid var(--line); }
.ukl-row { display: flex; align-items: flex-start; gap: 8px; }
.ukl-check { display: flex; align-items: flex-start; gap: 14px; padding: 14px 6px; cursor: pointer; flex: 1; }
.ukl-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ukl-box { display: flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; margin-top: 2px; border-radius: 7px;
  border: 2px solid var(--line-strong); background: var(--paper);
  transition: background .18s, border-color .18s, transform .18s; }
.ukl-box svg { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(.5);
  transition: opacity .18s, transform .18s; }
.ukl-check:hover .ukl-box { border-color: var(--gold); }
.ukl-check:active .ukl-box { transform: scale(.9); }
.ukl-check input:focus-visible + .ukl-box { outline: 2px solid var(--gold); outline-offset: 2px; }
.ukl-item.is-done .ukl-box { background: var(--gold-600); border-color: var(--gold-600); }
.ukl-item.is-done .ukl-box svg { opacity: 1; transform: none; }
.ukl-text { display: flex; flex-direction: column; gap: 3px; }
.ukl-text strong { font-weight: 600; color: var(--ink); transition: color .18s; }
.ukl-text em { font-style: normal; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.ukl-item.is-done .ukl-text strong { color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--gold-line); }

/* Info-Ausklapper */
.ukl-info { flex: none; margin-top: 15px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--muted);
  transition: background .18s, color .18s, border-color .18s; }
.ukl-info svg { width: 17px; height: 17px; }
.ukl-info:hover { border-color: var(--gold); color: var(--gold-600); background: var(--gold-soft); }
.ukl-info.is-open { background: var(--gold-600); border-color: var(--gold-600); color: #fff; }
.ukl-info:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ukl-infobox { margin: 0 6px 16px 44px; padding: 15px 18px; border-radius: 12px;
  background: var(--cream); border-left: 3px solid var(--gold);
  animation: uklInfo .28s cubic-bezier(.16,1,.3,1); }
.ukl-infobox[hidden] { display: none; }
.ukl-infobox p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--ink-soft); }
@keyframes uklInfo { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Abschluss */
.ukl-done-note { display: flex; align-items: center; gap: 16px; margin: 8px 0 0; padding: 22px 24px;
  border-radius: 16px; background: var(--gold-soft); border: 1px solid var(--gold-line);
  animation: uklInfo .4s ease; }
.ukl-done-note[hidden] { display: none; }
.ukl-done-ic { display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold-600); color: #fff; }
.ukl-done-ic svg { width: 22px; height: 22px; }
.ukl-done-note > div { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ukl-done-note strong { font-size: 1.05rem; color: var(--navy-800); }
.ukl-done-note span { font-size: .88rem; color: var(--ink-soft); }
.ukl-disclaimer { margin: 34px 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted); text-align: center; }

@media (max-width: 700px) {
  .ukl-block { padding: 22px 18px; }
  .ukl-block__head { flex-wrap: wrap; }
  .ukl-block__count { order: -1; margin-left: auto; }
  .ukl-progress__in { flex-wrap: wrap; gap: 12px; }
  .ukl-progress__track { order: 3; flex-basis: 100%; }
  .ukl-infobox { margin-left: 6px; }
  .ukl-done-note { flex-direction: column; text-align: center; }
}
@media print {
  .site-header, .ukl-progress, .cta-band, .site-footer, .hero__actions, .ukl-info { display: none !important; }
  .ukl-block { break-inside: avoid; box-shadow: none; }
  .ukl-infobox[hidden] { display: block !important; }
}

/* Checklisten-Uebersicht */
.ckl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.ckl-card { display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 40px -32px rgba(20, 25, 39, .5);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s; }
.ckl-card:hover { transform: translateY(-4px); border-color: var(--gold-line);
  box-shadow: 0 26px 50px -28px rgba(20, 25, 39, .55); }
.ckl-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-200); }
.ckl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1); }
.ckl-card:hover .ckl-card__img img { transform: scale(1.05); }
.ckl-card__body { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 26px; flex: 1; }
.ckl-card__saeule { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); }
.ckl-card h3 { margin: 0; font-size: 1.22rem; color: var(--navy-800); }
.ckl-card p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.ckl-card__meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--gold-600); }
.ckl-card__meta svg { width: 15px; height: 15px; transition: transform .18s; }
.ckl-card:hover .ckl-card__meta svg { transform: translateX(3px); }

/* Hero-Teaser (saisonal, z.B. Sommer -> Urlaubs-Checkliste) - steht in der Button-Reihe */
.hero__teaser { display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 99px; text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--on-dark); font-size: .88rem; backdrop-filter: blur(6px);
  transition: background .18s, border-color .18s, transform .18s; }
.hero__teaser:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--gold-line);
  transform: translateY(-1px); }
.hero__teaser svg { width: 18px; height: 18px; flex: none; color: var(--gold-300); }
.hero__teaser strong { color: #fff; font-weight: 600; }
.hero__teaser-arr { transition: transform .18s; }
.hero__teaser:hover .hero__teaser-arr { transform: translateX(3px); }

/* Teaser steht in der Button-Reihe, erscheint aber nur beim Sommer-Hero */
.hero__teaser { display: none; }
html[data-hero="3"] .hero__teaser { display: inline-flex; }

/* Sommer-Hero: statt "Beratungstools entdecken" steht dort der Checklisten-Chip */
html[data-hero="3"] .hero__tools { display: none; }