/* ==========================================================================
   Finanzgoals · Titan / Chrom
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}

:root {
  /* Titan (dunkel) */
  --bg: #060708;
  --bg-2: #0b0d10;
  --titan: #14171b;
  --titan-2: #1c2025;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #eceef1;
  --muted: #8d949d;

  /* Silberchrom (hell) */
  --silver: #e4e7eb;
  --silver-2: #d3d7dc;
  --ink: #0a0b0d;
  --ink-muted: #545b64;
  --ink-line: rgba(10, 11, 13, .12);

  --chrome: linear-gradient(180deg, #ffffff 0%, #e4e8ec 18%, #a3aab3 44%, #5e656e 50%, #d4d9df 56%, #f7f8fa 74%, #9aa1aa 100%);
  --chrome-soft: linear-gradient(180deg, #f6f7f9 0%, #c9ced5 48%, #8b929b 52%, #e3e6ea 100%);
  --chrome-dark: linear-gradient(180deg, #2a2e34 0%, #0d0f12 46%, #3a3f46 54%, #121418 100%);
  --sheen: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%);

  --display: "Archivo", "Arial Narrow", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 22px;
  --slant: -11deg;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 clamp(16px, 1.05vw, 17.5px)/1.6 var(--body);
  font-stretch: 96%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
p { margin: 0; }
em { font-style: normal; color: var(--text); font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: #d9dde2; color: var(--ink); }
:focus-visible { outline: 2px solid #cfd5dc; outline-offset: 3px; border-radius: 6px; }
a, button, summary { -webkit-tap-highlight-color: transparent; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Filmkorn über allem */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typografie ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: clamp(2.6rem, 5.6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.04em;
}
.h2 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: clamp(2.1rem, 4.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.h3 {
  font-family: var(--display);
  font-weight: 750;
  font-stretch: 108%;
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  line-height: 1.05;
  letter-spacing: -.015em;
}
.lead { font-size: clamp(1.06rem, 1.35vw, 1.24rem); line-height: 1.55; color: var(--muted); max-width: 36em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font: 600 .74rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }

/* Chrom-Schrift mit wanderndem Glanz */
.chrome {
  background-image: var(--sheen), var(--chrome);
  background-size: 260% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 7s var(--ease) infinite;
  padding-right: .08em; /* kursive Kante nicht abschneiden */
}
.chrome--late { animation-delay: 1.4s; }
.on-silver .chrome, .chrome--ink {
  background-image: var(--sheen), linear-gradient(180deg, #2b3036 0%, #050607 45%, #4a5059 52%, #0b0c0e 100%);
}
@keyframes sheen {
  0%, 55% { background-position: 150% 0, 0 0; }
  85%, 100% { background-position: -60% 0, 0 0; }
}
.outline { color: #5f666f; }

/* ---------- Buttons ---------- */
.btn {
  --h: 54px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: var(--h); padding: 0 1.55em; border-radius: 999px;
  font: 600 .98rem/1 var(--body); letter-spacing: .01em; white-space: nowrap;
  transition: transform .4s var(--ease-spring), translate .35s var(--ease), box-shadow .3s, background-color .3s, color .3s;
  isolation: isolate; overflow: hidden;
}
.btn .ico { width: 1.2em; height: 1.2em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--sm { --h: 44px; padding: 0 1.2em; font-size: .9rem; }

.btn--chrome {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #dfe3e8 45%, #b3bac3 52%, #eef0f3 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 30px -10px rgba(220, 226, 233, .45);
}
.btn--chrome::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sheen); background-size: 250% 100%; background-position: 160% 0;
  transition: background-position .9s var(--ease);
}
.btn--chrome:hover::after { background-position: -70% 0; }
.btn--chrome:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.25), 0 16px 40px -10px rgba(220, 226, 233, .65); }

.btn--glass {
  color: var(--text);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--glass:hover { background: rgba(255,255,255,.08); }
.btn--glass .ico { transition: transform .35s var(--ease); }
.btn--glass:hover .ico { transform: translateX(4px); }

.btn--ink { color: #fff; background: linear-gradient(180deg, #2a2f35, #0b0c0e); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 30px -12px rgba(0,0,0,.6); }

/* ---------- Header ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.is-scrolled {
  background: rgba(8, 9, 11, .72);
  backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 78px; transition: height .4s var(--ease); }
.nav.is-scrolled .nav__inner { height: 66px; }
.nav__links { display: flex; gap: 30px; margin-left: auto; font-size: .93rem; color: #b9bfc6; white-space: nowrap; }
.nav__links a { position: relative; padding: 6px 0; transition: color .25s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--chrome-soft);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__burger { display: none; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 34px; height: 31px; flex: none;
  -webkit-mask: url("../img/fg-mark.svg") center / contain no-repeat; mask: url("../img/fg-mark.svg") center / contain no-repeat;
  background-image: var(--sheen), var(--chrome);
  background-size: 300% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat;
  animation: sheen 7s var(--ease) infinite 2s;
}
.brand__word {
  font: 600 1.02rem/1 var(--display); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase;
}

/* Mobiles Menü */
.nav__burger {
  display: none; position: relative; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line-2);
}
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 1.6px; background: #e6e9ec; border-radius: 2px; transition: transform .4s var(--ease), top .4s var(--ease); }
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 25px; }
.menu-open .nav__burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .nav__burger span:last-child { top: 21px; transform: rotate(-45deg); }
.menu-open .nav { background: rgba(8, 9, 11, .9); }
.mnav {
  position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  padding: 100px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  background: rgba(6, 7, 8, .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; overflow-y: auto;
}
.menu-open .mnav { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.mnav__links { display: grid; }
.mnav__links a {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font: 700 clamp(1.6rem, 7vw, 2.2rem)/1.1 var(--display); letter-spacing: -.03em;
  opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s var(--ease);
}
.menu-open .mnav__links a { opacity: 1; transform: none; }
.menu-open .mnav__links a:nth-child(2) { transition-delay: .03s; } .menu-open .mnav__links a:nth-child(3) { transition-delay: .06s; }
.menu-open .mnav__links a:nth-child(4) { transition-delay: .09s; } .menu-open .mnav__links a:nth-child(5) { transition-delay: .12s; }
.menu-open .mnav__links a:nth-child(6) { transition-delay: .15s; } .menu-open .mnav__links a:nth-child(7) { transition-delay: .18s; }
.menu-open .mnav__links a:nth-child(8) { transition-delay: .21s; }
.mnav__cta { display: grid; gap: 10px; }
.menu-open { overflow: hidden; }
.menu-open .wa-float { opacity: 0; pointer-events: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 130px 0 90px; overflow: hidden;
  background:
    radial-gradient(60% 55% at 72% 42%, rgba(190, 198, 208, .16), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(120, 128, 140, .10), transparent 70%),
    var(--bg);
}
.hero::before { /* feines Raster, nach außen ausgeblendet */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 70% at 60% 45%, #000 20%, transparent 75%);
  opacity: .55;
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: center; }
.hero__copy .eyebrow { margin-bottom: 26px; }
.hero__copy .display { margin-bottom: 28px; }
.hero__copy .lead { margin-bottom: 40px; max-width: 31em; text-wrap: pretty; font-size: clamp(1.08rem, 1.3vw, 1.25rem); color: #a3aab2; }
.hero__copy .lead strong { color: var(--text); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
.hero__stats {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: 0;
  padding-top: 26px; border-top: 1px solid var(--line); max-width: 560px;
}
.hero__stats div { padding: 0 34px; border-left: 1px solid var(--line); }
.hero__stats div:first-child { padding-left: 0; border-left: 0; }
.hero__stats dt { font: 700 clamp(1.5rem, 2.2vw, 2rem)/1 var(--display); letter-spacing: -.03em; margin-bottom: 8px; }
.hero__stats dd { margin: 0; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .88rem; color: var(--muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: 9px; }
.hero__trust .ico { width: 16px; height: 16px; color: #cfd4da; }

.hero__stage { position: relative; aspect-ratio: 1 / 1.02; perspective: 1100px; }

/* 3D-Chrom-FG */
.logo3d {
  position: absolute; inset: 9% 6% 13% 8%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -16deg));
  transition: transform .9s var(--ease);
}
.logo3d__layer {
  position: absolute; inset: 0;
  -webkit-mask: url("../img/fg-mark.svg") center / contain no-repeat; mask: url("../img/fg-mark.svg") center / contain no-repeat;
  background: linear-gradient(135deg, #3b4047, #121417 60%, #2a2e33);
  transform: translateZ(calc(var(--i) * -2.2px));
}
.logo3d__face {
  position: absolute; inset: 0; transform: translateZ(1px);
  -webkit-mask: url("../img/fg-mark.svg") center / contain no-repeat; mask: url("../img/fg-mark.svg") center / contain no-repeat;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.95) 46%, rgba(255,255,255,.2) 52%, transparent 64%) var(--shine-x, 120%) 0 / 260% 100% no-repeat,
    linear-gradient(172deg, #ffffff 0%, #e8ebef 20%, #9ea6b0 42%, #4d535b 49.5%, #c8cdd4 51%, #f5f6f8 70%, #8b929c 100%);
}
.logo3d__face--anim { animation: faceShine 6s var(--ease) infinite 1s; }
@keyframes faceShine { 0%, 50% { --shine-x: 120%; background-position: 120% 0, 0 0; } 80%, 100% { background-position: -40% 0, 0 0; } }
.logo3d__glow {
  position: absolute; left: 10%; right: 10%; bottom: -16%; height: 22%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(210, 216, 224, .35), transparent 70%);
  filter: blur(18px); transform: translateZ(-60px) rotateX(80deg);
}

/* Echtes 3D-Logo (WebGL) ersetzt das CSS-Logo, sobald es bereit ist */
.logo3d-canvas { position: absolute; inset: -6% -10%; width: 120% !important; height: 112% !important; z-index: 1; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.hero__stage.is-webgl .logo3d-canvas { opacity: 1; }
.hero__stage.is-webgl .logo3d { opacity: 0; transition: opacity .6s; }
.hero__stage::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 2%; height: 14%; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(210, 216, 224, .28), transparent 70%); filter: blur(16px);
}

/* Schwebende Glas-Chips */
.chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(40, 44, 50, .62), rgba(16, 18, 21, .62));
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07), 0 24px 50px -20px rgba(0,0,0,.8);
  font-size: .84rem; line-height: 1.25; white-space: nowrap;
  animation: float 7s ease-in-out infinite;
}
.chip b { display: block; font-weight: 600; color: var(--text); }
.chip div > span { color: var(--muted); font-size: .78rem; }
.chip__ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--chrome-soft); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(0,0,0,.6);
}
.chip__ico .ico { width: 17px; height: 17px; }
.chip--1 { top: 6%; left: -4%; animation-delay: -1s; }
.chip--2 { top: 30%; right: -3%; animation-delay: -3.5s; }
.chip--3 { bottom: 20%; left: -8%; animation-delay: -2s; }
.chip--4 { bottom: 3%; right: 6%; animation-delay: -5s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ---------- Marquee ---------- */
.marquee {
  position: relative; padding: 34px 0 40px; border-block: 1px solid var(--line); background: var(--bg-2);
}
.marquee__label { text-align: center; margin-bottom: 26px; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 72px; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img { height: 30px; width: auto; opacity: .55; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); transition: opacity .3s; }
.marquee__track img:hover { opacity: .95; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sektionen ---------- */
.section { position: relative; padding: clamp(90px, 12vw, 160px) 0; }
.section__head { display: grid; gap: 22px; margin-bottom: clamp(48px, 6vw, 80px); max-width: 860px; }
.section__head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section__head--split { max-width: none; grid-template-columns: 1fr 1fr; align-items: end; gap: 22px 60px; }
.section__head--split .eyebrow { grid-column: 1 / -1; }

.on-silver {
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #eef0f2 0%, var(--silver) 40%, var(--silver-2) 100%);
}
.on-silver .eyebrow, .on-silver .lead { color: var(--ink-muted); }

/* Schräge Übergänge zwischen dunkel und hell */
.slant-top { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); margin-top: -4vw; padding-top: calc(clamp(90px, 12vw, 160px) + 4vw); }

/* ---------- Bento / Leistungen ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--titan-2), var(--titan) 60%, #101215);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .5s var(--ease);
}
.tile::before { /* Lichtkegel folgt der Maus */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(225, 230, 236, .11), transparent 60%);
}
.tile::after { /* Chrom-Rand im Lichtkegel */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tile:hover::before, .tile:hover::after { opacity: 1; }
.tile p { color: var(--muted); }
.tile__icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--chrome-soft); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.3), 0 10px 24px -10px rgba(0,0,0,.8);
}
.tile__icon .ico { width: 24px; height: 24px; }
.tile__num { position: absolute; top: 26px; right: 30px; font: 600 .8rem/1 var(--body); color: #4a5058; letter-spacing: .1em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.tags li {
  padding: 7px 12px; border-radius: 999px; font-size: .8rem; color: #c3c9cf;
  background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line);
}
.tile--konzept { grid-column: span 6; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; min-height: 380px; }
.tile--konzept .h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -.03em; }
.tile--vers { grid-column: span 3; grid-row: span 2; }
.tile--inv { grid-column: span 3; }
.tile--vor { grid-column: span 3; }
.tile--fin { grid-column: span 6; flex-direction: row; align-items: center; gap: 32px; }
.tile--fin .tile__body { display: grid; gap: 12px; flex: 1; }
.tile--fin .tags { margin: 0; padding: 0; flex: 1; justify-content: flex-end; }

/* Paket: vier Verträge schieben sich zusammen */
.bundle { position: relative; flex: 1; min-width: 300px; height: 170px; }
.bundle::before { /* Paketrahmen, erscheint wenn alles gebündelt ist */
  content: ""; position: absolute; left: calc(40% - 12px); top: 50%; width: 160px; height: 158px; translate: 0 -50%;
  border-radius: 18px; border: 1px dashed rgba(255,255,255,.35);
  opacity: 0; transform: scale(1.08); transition: opacity .5s 1.3s, transform .6s var(--ease) 1.3s;
}
.tile--fin.is-in .bundle::before { opacity: 1; transform: none; }
.bundle span {
  position: absolute; top: 50%; left: calc(var(--k) * 24%); translate: 0 -50%; width: 136px; text-align: center;
  padding: 9px 12px; border-radius: 11px; font-size: .84rem; font-weight: 600; white-space: nowrap;
  color: #c9ced5; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line-2);
  transform: rotate(calc((var(--k) - 1.5) * 5deg)) translateY(calc((var(--k) - 1.5) * 10px));
  transition: left 1s var(--ease) calc(.4s + var(--k) * 90ms), top 1s var(--ease) calc(.4s + var(--k) * 90ms), transform 1s var(--ease) calc(.4s + var(--k) * 90ms), background .6s 1.2s, color .6s 1.2s;
}
.tile--fin.is-in .bundle span {
  left: 40%; top: calc(50% + (var(--k) - 1.5) * 35px);
  transform: none;
  color: var(--ink); background: linear-gradient(180deg, #fafbfc, #cfd4da 55%, #eceef1);
  box-shadow: inset 0 1px 0 #fff, 0 10px 20px -10px rgba(0,0,0,.8);
}
.bundle__badge {
  position: absolute; left: calc(40% + 146px); top: 2%;
  padding: 8px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); background: var(--chrome-soft); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -8px rgba(220,226,233,.45);
  opacity: 0; transform: scale(.6) rotate(-8deg);
  transition: opacity .5s 1.6s, transform .7s var(--ease-spring) 1.6s;
}
.tile--fin.is-in .bundle__badge { opacity: 1; transform: rotate(-4deg); }

.tile .tile__ghost {
  margin-top: auto; padding-top: 20px;
  font: 700 clamp(3rem, 5.4vw, 5.2rem)/.92 var(--display); letter-spacing: -.04em;
  color: rgba(220, 225, 231, .07);
}
.tile--vers .tags { margin-top: 0; }
.tile__note { font-size: .78rem; color: #6c737c; }

/* Konzept-Orbit */
.orbit { position: relative; aspect-ratio: 1; width: min(100%, 380px); justify-self: center; }
.orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255,255,255,.16); animation: spin 60s linear infinite; }
.orbit__ring--2 { inset: 17%; border-style: solid; border-color: rgba(255,255,255,.08); animation-direction: reverse; animation-duration: 45s; }
.orbit__core {
  position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #3a3f46, #0d0f12 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px var(--line), 0 0 60px -10px rgba(210, 216, 224, .35);
}
.orbit__core .brand__mark { width: 46%; height: 46%; }
.orbit__sat {
  position: absolute; display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--ink);
  background: linear-gradient(180deg, #fafbfc, #c9ced5 55%, #e9ecef);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -10px rgba(0,0,0,.9);
  transform: translate(-50%, -50%); /* zentriert; die Schwebe-Animation nutzt "translate" */
  animation: float 6s ease-in-out infinite;
}
.orbit__sat:nth-of-type(1) { left: 50%; top: 2%; }
.orbit__sat:nth-of-type(2) { left: 98%; top: 50%; animation-delay: -1.5s; }
.orbit__sat:nth-of-type(3) { left: 50%; top: 98%; animation-delay: -3s; }
.orbit__sat:nth-of-type(4) { left: 2%; top: 50%; animation-delay: -4.5s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mini-Chart in Investment-Kachel */
.spark { width: 100%; height: 86px; margin-top: auto; }
.spark path.line { fill: none; stroke: url(#chromeStroke); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.spark path.area { fill: url(#chromeFill); opacity: 0; transition: opacity 1.2s ease 1.2s; }
.is-in .spark path.line { stroke-dashoffset: 0; }
.is-in .spark path.area { opacity: 1; }

/* ---------- Chaos → Ordnung ---------- */
.chaos__head { display: grid; gap: 18px; justify-items: center; text-align: center; margin-bottom: 40px; }
/* Doppelknopf „Ohne | Mit Finanzgoals“: eine Chrom-Pille gleitet unter die aktive Seite */
.switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 10px; padding: 5px;
  border: 0; border-radius: 999px; cursor: pointer; user-select: none; -webkit-user-select: none;
  font: 600 .95rem/1 var(--body); color: var(--ink-muted);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--ink-line), 0 18px 36px -24px rgba(10, 11, 13, .55);
  -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
  transition: transform .3s var(--ease-spring);
}
.switch:active { transform: scale(.97); }
.switch:focus { outline: none; }
.switch:focus-visible { outline: 2px solid #2a2f35; outline-offset: 4px; }
.switch::after { /* lädt zum Klicken ein, bis umgeschaltet wurde */
  content: ""; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(10, 11, 13, .18);
  animation: switchPulse 2.4s var(--ease) infinite;
}
.chaos.is-ordered .switch::after { animation: none; opacity: 0; }
@keyframes switchPulse { 0% { opacity: .9; transform: scale(.98); } 70%, 100% { opacity: 0; transform: scale(1.08); } }
.switch__opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; white-space: nowrap; transition: color .45s var(--ease);
}
.switch__opt .ico { width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s var(--ease-spring); }
.switch__pill {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #dfe3e8 50%, #c7ccd3 52%, #eef0f2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -6px rgba(10, 11, 13, .45), 0 0 0 1px rgba(10, 11, 13, .08);
  transition: transform .6s var(--ease-spring), background .45s, box-shadow .45s;
}
.chaos:not(.is-ordered) .switch__opt--off { color: var(--ink); }
.chaos.is-ordered .switch__opt--on { color: #fff; }
.chaos.is-ordered .switch__opt--on .ico { opacity: 1; transform: none; }
.chaos.is-ordered .switch__pill {
  transform: translateX(100%);
  background: linear-gradient(180deg, #3a3f46 0%, #16191d 50%, #0a0b0d 52%, #24282d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -8px rgba(10, 11, 13, .6);
}
.chaos__hint { font-size: .85rem; color: var(--ink-muted); margin-top: 6px; transition: opacity .4s; }
.chaos.is-ordered .chaos__hint { opacity: 0; }

.stage { position: relative; height: 560px; max-width: 1080px; margin: 0 auto; }
.stage__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .5s; }
.stage__lines line { stroke: rgba(10, 11, 13, .25); stroke-width: 1.3; stroke-dasharray: 5 6; }
.chaos.is-ordered .stage__lines { opacity: 0; }
.pcard {
  position: absolute; width: 31%; left: var(--cx); top: var(--cy);
  transform: rotate(var(--cr));
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 16px;
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -18px rgba(10, 11, 13, .45), 0 0 0 1px rgba(10,11,13,.06);
  transition: left .9s var(--ease), top .9s var(--ease), transform .9s var(--ease-spring), background .5s, box-shadow .5s;
  transition-delay: calc(var(--n) * 45ms);
}
.pcard__ico {
  position: relative; width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: #eef0f2; color: #3b4148;
  transition: background .5s, color .5s;
}
.pcard__ico .ico { width: 19px; height: 19px; transition: opacity .3s, transform .5s var(--ease-spring); }
.pcard__ico .ico--ok { position: absolute; opacity: 0; transform: scale(.4); }
.pcard__txt { display: grid; grid-template-areas: "t" "s"; min-width: 0; }
.pcard__txt b { grid-area: t; }
.pcard__txt .bad, .pcard__txt .good { grid-area: s; }
.pcard__txt b { font-weight: 650; font-size: .95rem; line-height: 1.25; }
.pcard__txt span { font-size: .8rem; line-height: 1.3; }
.pcard .bad { color: #b3261e; }
.pcard .good { color: #3d434a; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.pcard .bad { transition: opacity .4s, transform .4s; }

.chaos.is-ordered .pcard { left: var(--ox); top: var(--oy); transform: rotate(0); }
.chaos.is-ordered .pcard__ico { background: linear-gradient(180deg, #2a2f35, #0b0c0e); color: #fff; }
.chaos.is-ordered .pcard__ico .ico--base { opacity: 0; transform: scale(.4); }
.chaos.is-ordered .pcard__ico .ico--ok { opacity: 1; transform: scale(1); }
.chaos.is-ordered .pcard .bad { opacity: 0; transform: translateY(-6px); }
.chaos.is-ordered .pcard .good { opacity: 1; transform: none; }

.chaos__result {
  margin: 34px auto 0; max-width: 620px; text-align: center;
  opacity: 0; transform: translateY(14px); transition: opacity .6s .5s, transform .6s .5s var(--ease);
}
.chaos.is-ordered .chaos__result { opacity: 1; transform: none; }
.chaos__result .h3 { margin-bottom: 10px; }
.chaos__result p { color: var(--ink-muted); }

/* ---------- Was uns ausmacht ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.pillar { position: relative; padding: 40px 30px 10px 0; display: grid; gap: 14px; align-content: start; }
.pillar + .pillar { padding-left: 30px; border-left: 1px solid var(--line); }
.pillar__k { font: 700 clamp(2.6rem, 4.4vw, 4rem)/.95 var(--display); letter-spacing: -.04em; }
.pillar p { color: var(--muted); font-size: .96rem; }
.pillar::before { /* Chrom-Linie, die beim Reinscrollen aufzieht */
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, #fff, #8d949d);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) calc(var(--d, 0) * 120ms);
}
.pillar.is-in::before { transform: scaleX(1); }

.vs { margin-top: clamp(60px, 8vw, 110px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs__col { padding: 34px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); }
.vs__col h3 { font: 600 .78rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.vs__col li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); color: #9ba2aa; }
.vs__col li::before { content: "—"; color: #555b63; }
.vs__col--win {
  background: linear-gradient(180deg, #22262b, #121418);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px var(--line-2), 0 40px 80px -40px rgba(200, 206, 214, .25);
}
.vs__col--win h3 { color: #dfe3e8; }
.vs__col--win li { color: var(--text); }
.vs__col--win li::before { content: "✓"; color: #e7eaee; font-weight: 700; }

/* ---------- Ablauf ---------- */
.steps { position: relative; display: grid; gap: 0; max-width: 980px; margin-inline: auto; }
.steps__rail { position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; background: var(--ink-line); border-radius: 2px; overflow: hidden; }
.steps__fill { position: absolute; inset: 0; background: linear-gradient(180deg, #0a0b0d, #5a616a); transform-origin: top; transform: scaleY(var(--p, 0)); }
.step { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 34px; padding: 28px 0; }
.step__num {
  position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.8rem/1 var(--display);
  background: linear-gradient(180deg, #ffffff, #cfd4da 55%, #eef0f2);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.12), 0 14px 30px -14px rgba(10,11,13,.5);
  transition: background .5s, color .5s;
}
.step.is-active .step__num { background: linear-gradient(180deg, #30353c, #0a0b0d); color: #fff; }
.step__body { padding-top: 12px; display: grid; gap: 10px; }
.step__body p { color: var(--ink-muted); max-width: 40em; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.team__media { position: relative; }
.team__frame {
  position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 4.6;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(214, 220, 228, .22), transparent 70%),
    linear-gradient(180deg, #23272d, #0c0e11);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -50px rgba(0,0,0,.9);
}
.team__emblem {
  position: absolute; left: 50%; top: 46%; width: 46%; aspect-ratio: 1416 / 1288; translate: -50% -50%;
  -webkit-mask: url("../img/fg-mark.svg") center / contain no-repeat; mask: url("../img/fg-mark.svg") center / contain no-repeat;
  background-image: var(--sheen), linear-gradient(172deg, #ffffff 0%, #e8ebef 20%, #9ea6b0 42%, #4d535b 49.5%, #c8cdd4 51%, #f5f6f8 70%, #8b929c 100%);
  background-size: 300% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.6));
  animation: sheen 7s var(--ease) infinite 3s;
}
.team__badge {
  position: absolute; left: 22px; bottom: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: 16px;
  background: rgba(14, 16, 19, .66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px var(--line);
}
.team__badge b { display: block; font: 600 .95rem/1.1 var(--display); font-stretch: 112%; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; }
.team__badge span { font-size: .82rem; color: var(--muted); }
.team__badge .brand__mark { width: 30px; height: 27px; }
.team__copy { display: grid; gap: 22px; }
.team__copy > p { color: var(--muted); }
.team__copy > p strong { color: var(--text); font-weight: 600; }
.creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.creds li { padding: 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 6px; }
.creds b { font: 700 1.35rem/1 var(--display); letter-spacing: -.02em; }
.creds span { font-size: .8rem; color: var(--muted); line-height: 1.35; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.faq__aside { position: sticky; top: 110px; display: grid; gap: 22px; }
.faq__list { border-top: 1px solid var(--ink-line); }
.faq__list details { border-bottom: 1px solid var(--ink-line); interpolate-size: allow-keywords; }
.faq__list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font: 700 clamp(1.05rem, 1.4vw, 1.22rem)/1.3 var(--display); font-stretch: 105%;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--ink-line); transition: background .3s, transform .5s var(--ease); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.6px; background: currentColor; translate: -50% -50%; transition: transform .4s var(--ease); }
.faq__plus::after { transform: rotate(90deg); }
details[open] .faq__plus { background: var(--ink); color: #fff; transform: rotate(180deg); }
details[open] .faq__plus::after { transform: rotate(0); }
.faq__list details::details-content { height: 0; overflow: hidden; transition: height .5s var(--ease), content-visibility .5s allow-discrete; }
.faq__list details[open]::details-content { height: auto; }
.faq__list details p { padding: 0 60px 28px 0; color: var(--ink-muted); }

/* ---------- Kontakt ---------- */
.cta {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(110px, 14vw, 190px) 0;
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(200, 207, 216, .18), transparent 70%),
    var(--bg);
}
.cta__mark {
  position: absolute; left: 50%; top: 50%; width: min(80vw, 760px); aspect-ratio: 1.1; translate: -50% -50%;
  -webkit-mask: url("../img/fg-mark.svg") center / contain no-repeat; mask: url("../img/fg-mark.svg") center / contain no-repeat;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 80%);
  pointer-events: none;
}
.cta .wrap { position: relative; display: grid; justify-items: center; gap: 26px; }
.cta .lead { margin-inline: auto; text-wrap: balance; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }


/* ---------- Hero: Licht folgt der Maus ---------- */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--hx, 70%) var(--hy, 40%), rgba(220, 226, 233, .09), transparent 60%);
  transition: background .2s;
}

.link-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-weight: 600; font-size: .92rem; color: #e3e7eb;
}
.link-more .ico { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link-more:hover .ico { transform: translateX(4px); }

/* ---------- Alle Sparten ---------- */
.tabs {
  display: flex; gap: 8px; padding: 6px; border-radius: 20px; margin-bottom: 26px;
  background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px var(--ink-line), 0 20px 40px -30px rgba(10,11,13,.4);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px; border: 0; border-radius: 15px; cursor: pointer; overflow: hidden;
  font: 600 .92rem/1.1 var(--body); color: var(--ink-muted); background: transparent; white-space: nowrap;
  transition: color .3s, background .4s, box-shadow .4s;
}
.tab .ico { width: 18px; height: 18px; flex: none; }
.tab em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: rgba(10,11,13,.07); color: inherit; }
.tab:hover { color: var(--ink); }
.tab.is-active {
  color: #fff; background: linear-gradient(180deg, #2c3137, #0b0c0e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -12px rgba(0,0,0,.6);
}
.tab.is-active em { background: rgba(255,255,255,.14); }
.tab__bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.75); transform: scaleX(0); transform-origin: left; }
.sparten.is-playing .tab.is-active .tab__bar { animation: tabbar var(--tab-time, 5s) linear forwards; }
@keyframes tabbar { to { transform: scaleX(1); } }

.spgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.spgrid li {
  position: relative; display: grid; gap: 4px; padding: 18px 18px 18px 50px; border-radius: 16px;
  background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(10,11,13,.06), 0 14px 30px -22px rgba(10,11,13,.45);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.spgrid li::before {
  content: ""; position: absolute; left: 16px; top: 19px; width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(180deg, #30353c, #0a0b0d) ; box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.spgrid li::after {
  content: ""; position: absolute; left: 22px; top: 25px; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.spgrid li:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(10,11,13,.1), 0 22px 40px -22px rgba(10,11,13,.5); }
.spgrid b { font-weight: 650; font-size: .98rem; line-height: 1.25; }
.spgrid span { font-size: .82rem; color: var(--ink-muted); line-height: 1.3; }
.panel.is-active .spgrid li { animation: chipIn .6s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes chipIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Lebensphasen (horizontal beim Scrollen) ---------- */
.phases { position: relative; background: var(--bg); }
.phases__sticky { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4vh, 44px); padding: 96px 0 clamp(24px, 4vh, 56px); overflow: hidden; }
.phases__head { display: grid; gap: 16px; }
.phases__head .h2 { font-size: clamp(2rem, min(4.2vw, 6.4vh), 4rem); }
.phases__viewport { width: 100%; }
.phases__track {
  display: flex; gap: 18px; width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  will-change: transform;
}
.phase {
  position: relative; width: clamp(290px, 30vw, 380px); min-height: min(400px, 54vh); flex: none;
  display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3.4vh, 32px); border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, var(--titan-2), var(--titan) 60%, #0f1114);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line);
  transition: transform .5s var(--ease);
}
.phase:nth-child(even) { background: linear-gradient(180deg, #e9ecef, #cdd2d8); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 30px 60px -40px rgba(0,0,0,.9); }
.phase:nth-child(even) .phase__sub, .phase:nth-child(even) .phase__list li { color: var(--ink-muted); }
.phase:nth-child(even) .phase__list li { border-color: var(--ink-line); }
.phase:nth-child(even) .phase__num { color: rgba(10,11,13,.08); }
.phase:nth-child(even) .phase__icon { background: linear-gradient(180deg, #2c3137, #0b0c0e); color: #fff; }
.phase__num { position: absolute; right: 20px; top: 6px; font: 700 6.5rem/1 var(--display); letter-spacing: -.05em; color: rgba(255,255,255,.05); }
.phase__icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--chrome-soft); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -10px rgba(0,0,0,.8);
}
.phase__icon .ico { width: 24px; height: 24px; }
.phase .h3 { margin-top: clamp(4px, 1.6vh, 18px); font-size: 1.5rem; }
.phase__sub { color: var(--muted); }
.phase__list { margin-top: auto; display: grid; }
.phase__list li { padding: clamp(6px, 1.1vh, 10px) 0; border-top: 1px solid var(--line); font-size: .92rem; color: #c3c9cf; }
.phases__progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.phases__progress span { display: block; height: 100%; background: linear-gradient(90deg, #6b727c, #fff); transform-origin: left; transform: scaleX(var(--pp, 0)); }

/* ---------- Laufschrift ---------- */
.bigline { overflow: hidden; padding: clamp(40px, 6vw, 80px) 0; background: var(--bg); border-block: 1px solid var(--line); }
.bigline__track { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 48px); width: max-content; animation: marquee 55s linear infinite; will-change: transform; }
.bigline__track span { font: 700 clamp(3.4rem, 9vw, 8.5rem)/1 var(--display); letter-spacing: -.045em; white-space: nowrap; color: #2a2e34; }
.bigline__track span.chrome { color: transparent; }
.bigline__track i { width: clamp(18px, 2vw, 30px); aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--chrome-soft); }

/* ---------- Scroll-Fortschritt ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, #5d646d, #ffffff 70%, #cfd4da); box-shadow: 0 0 10px rgba(255,255,255,.35); }

/* ---------- Sparplan-Rechner ---------- */
.calc { background: radial-gradient(60% 50% at 80% 30%, rgba(200, 207, 216, .10), transparent 70%), var(--bg); }
.calc__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; }
.calc__controls, .calc__result {
  position: relative; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--titan-2), var(--titan) 60%, #0f1114);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line);
}
.calc__controls { display: grid; gap: 30px; align-content: start; }
.range { display: grid; gap: 14px; cursor: pointer; }
.range__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--muted); font-size: .92rem; }
.range__top output { font: 700 1.5rem/1 var(--display); color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.range__scale { display: flex; justify-content: space-between; font-size: .75rem; color: #5f666f; }
.range input {
  --p: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 8px 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, #8d949d, #ffffff) 0 0 / var(--p) 100% no-repeat, rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px var(--line);
  -webkit-tap-highlight-color: transparent;
}
.range input:focus { outline: none; }
.range input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: linear-gradient(180deg, #ffffff, #cdd2d8 55%, #f4f5f7);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.06);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.range input::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: linear-gradient(180deg, #ffffff, #cdd2d8 55%, #f4f5f7);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,0,0,.6);
}
.range input:hover::-webkit-slider-thumb, .range input:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,0,0,.6), 0 0 0 10px rgba(255,255,255,.08); }
.range input:active::-webkit-slider-thumb { transform: scale(.95); }
.calc__note { font-size: .78rem; line-height: 1.5; color: #6c737c; }
.calc__result { display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.calc__label { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.calc__total { font: 700 clamp(2.8rem, 6vw, 5rem)/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.calc__split { display: flex; flex-wrap: wrap; gap: 10px 34px; color: var(--muted); font-size: .9rem; }
.calc__split div { display: flex; align-items: center; gap: 8px; }
.calc__split b { margin-left: 4px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--paid { background: #5f666f; }
.dot--gain { background: linear-gradient(180deg, #fff, #b9c0c8); }
.calc__bar { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #ffffff, #b9c0c8); overflow: hidden; }
.calc__bar span { display: block; height: 100%; width: 40%; background: #5f666f; transition: width .6s var(--ease); }
.calc__chart { width: 100%; height: clamp(150px, 20vw, 220px); margin-top: auto; overflow: visible; }
.calc__chart path { transition: d .6s var(--ease); }
.calc__area { fill: url(#calcFill); }
.calc__paid { fill: none; stroke: #5f666f; stroke-width: 2; stroke-dasharray: 5 6; }
.calc__line { fill: none; stroke: url(#calcLine); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255,255,255,.25)); }
.calc__cta { align-self: flex-start; }
.calc__plus { margin-top: -6px; font-size: .95rem; color: var(--muted); }
.calc__plus span {
  display: inline-block; margin-right: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 700; color: var(--ink);
  background: var(--chrome-soft); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -10px rgba(220,226,233,.5);
  font-variant-numeric: tabular-nums;
}
.dot--classic { background: transparent; box-shadow: inset 0 0 0 2px #8d949d; }
.calc__classic { fill: none; stroke: #8d949d; stroke-width: 2; }

/* Strategie-Auswahl */
.strat { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.strat legend { padding: 0; margin-bottom: 12px; color: var(--muted); font-size: .92rem; }
.strat__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.strat__opt { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.strat__opt input { position: absolute; opacity: 0; pointer-events: none; }
.strat__opt span {
  display: grid; gap: 4px; padding: 14px 12px; border-radius: 16px; text-align: center;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line);
  transition: background .35s, box-shadow .35s, transform .35s var(--ease-spring), color .35s;
}
.strat__opt b { font-size: .9rem; font-weight: 600; color: var(--text); }
.strat__opt em { font-style: normal; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.strat__opt:hover span { box-shadow: inset 0 0 0 1px var(--line-2); }
.strat__opt input:checked + span {
  background: linear-gradient(180deg, #ffffff, #d8dce1 52%, #eef0f2);
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px -12px rgba(220,226,233,.45);
  transform: translateY(-2px);
}
.strat__opt input:checked + span b, .strat__opt input:checked + span em { color: var(--ink); }
.strat__opt input:focus-visible + span { outline: 2px solid #cfd5dc; outline-offset: 3px; }

/* Laufzeilen: zwei ruhige, gerade Bänder in Gegenrichtung */
.ribbons {
  position: relative; overflow: hidden; display: grid; gap: 14px;
  padding: clamp(34px, 4.5vw, 56px) 0; background: var(--bg-2); border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ribbon { overflow: hidden; }
.ribbon__track { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 40px); padding-right: clamp(22px, 2.6vw, 40px); width: max-content; animation: marquee 40s linear infinite; }
.ribbon--dark .ribbon__track { animation-duration: 46s; animation-direction: reverse; }
.ribbon__track span { font: 700 clamp(1.35rem, 2.5vw, 2.15rem)/1.15 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.ribbon--dark .ribbon__track span { font-weight: 600; font-size: clamp(1rem, 1.7vw, 1.4rem); color: #5c636c; letter-spacing: 0; }
.ribbon__track i {
  width: 18px; height: 16px; flex: none; opacity: .9;
  -webkit-mask: url("../img/fg-mark.svg") center / contain no-repeat; mask: url("../img/fg-mark.svg") center / contain no-repeat;
  background: var(--chrome-soft);
}
.ribbon--dark .ribbon__track i { width: 13px; height: 12px; background: #3a3f46; }

/* Kennzahl-Karten */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { gap: 10px; min-height: 290px; }
.stat__ico {
  position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: #cfd4da; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .5s var(--ease-spring), background .4s, color .4s;
}
.stat__ico .ico { width: 19px; height: 19px; }
.stat:hover .stat__ico { transform: rotate(-8deg) scale(1.08); background: var(--chrome-soft); color: var(--ink); }
.stat__num { margin-top: 38px; font: 700 clamp(2.6rem, 3.4vw, 3.9rem)/.95 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat__title { font: 700 1.15rem/1.2 var(--display); letter-spacing: -.01em; }
.stat p { font-size: .9rem; }
.stat__line { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #fff, transparent); transform: scaleX(0); transition: transform 1.4s var(--ease) calc(var(--d, 0) * 150ms + .3s); }
.stat.is-in .stat__line { transform: scaleX(1); }

/* Team */
.team__lead { font-size: clamp(1.08rem, 1.4vw, 1.28rem); line-height: 1.55; color: #c9ced4; }
.perks { display: grid; gap: 12px; margin-top: 6px; }
.perks li {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 18px;
  background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--line);
  transition: background .35s, box-shadow .35s, transform .45s var(--ease);
}
.perks li:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateX(6px); }
.perks__ico {
  width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--ink);
  background: var(--chrome-soft); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -8px rgba(0,0,0,.8);
}
.perks__ico .ico { width: 21px; height: 21px; }
.perks b { display: block; font-weight: 650; font-size: 1.02rem; margin-bottom: 4px; }
.perks div > span { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.team__sign { font-size: .85rem; color: #757c85; }
.team__sign strong { color: #cfd4da; font-weight: 600; }

/* ---------- Kfz-Anfrage ---------- */
.kfz { padding: 120px 0 90px; background: radial-gradient(60% 40% at 80% 0%, rgba(200, 207, 216, .12), transparent 70%), var(--bg); }
.kfz__wrap { max-width: 860px; }
.kfz__head { display: grid; gap: 18px; margin-bottom: 34px; }
.kfz__head .lead { max-width: 40em; }
.kfz__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .86rem; color: var(--muted); }
.kfz__privacy { display: inline-flex; align-items: center; gap: 8px; }
.kfz__privacy .ico { width: 16px; height: 16px; color: #cfd4da; }

.wizard {
  position: relative; padding: clamp(22px, 4vw, 40px); border-radius: 26px;
  background: linear-gradient(180deg, var(--titan-2), var(--titan) 50%, #0f1114);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(0,0,0,.9);
}
.wizard__bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 16px; }
.wizard__bar span { display: block; height: 100%; transform-origin: left; transform: scaleX(.16); background: linear-gradient(90deg, #6b727c, #fff); transition: transform .6s var(--ease); }
.wizard__steps { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 30px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #5f666f; }
.wizard__steps li { transition: color .3s; }
.wizard__steps li.is-done { color: #9aa1aa; }
.wizard__steps li.is-active { color: #fff; font-weight: 600; }
.panel-step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.panel-step.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; animation: stepIn .5s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.step__title { grid-column: 1 / -1; padding: 0; margin-bottom: 4px; font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--display); letter-spacing: -.02em; color: var(--text); float: left; width: 100%; }
.step__hint { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; margin-top: -6px; }

.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field[hidden] { display: none; }
.field__label { font-size: .86rem; font-weight: 600; color: #d6dadf; }
.field__label em { font-style: normal; font-weight: 400; color: #6c737c; margin-left: 4px; }
.field__hint { font-size: .78rem; color: #6c737c; }
.field input:not([type=radio]):not([type=checkbox]):not([type=file]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 13px; border: 0;
  font: 500 1rem/1.3 var(--body); color: var(--text); color-scheme: dark;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .25s, background .25s; -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, #9aa1aa 50%), linear-gradient(135deg, #9aa1aa 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field select option { color: #111; }
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: #565d66; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px #cfd5dc, 0 0 0 4px rgba(207,213,220,.12); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid .choice span { box-shadow: inset 0 0 0 1px #e0706a; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 10px 16px; border-radius: 999px; font-size: .92rem; color: #c9ced4;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--ease-spring);
}
.choice:hover span { background: rgba(255,255,255,.06); }
.choice input:checked + span { color: var(--ink); background: linear-gradient(180deg, #ffffff, #d6dae0 52%, #eef0f2); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -12px rgba(220,226,233,.5); transform: translateY(-1px); }
.choice input:focus-visible + span { outline: 2px solid #cfd5dc; outline-offset: 3px; }
.choices--cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.choices--cards .choice span { display: grid; gap: 4px; height: 100%; padding: 16px; border-radius: 16px; font-size: .8rem; line-height: 1.35; color: var(--muted); }
.choices--cards .choice span b { font-size: 1rem; color: var(--text); }
.choices--cards .choice input:checked + span, .choices--cards .choice input:checked + span b { color: var(--ink); }

.photo__drop {
  display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line-2); border: 1px dashed rgba(255,255,255,.18);
  transition: background .3s;
}
.photo__drop:hover { background: rgba(255,255,255,.06); }
.photo__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo__drop .ico { width: 30px; height: 30px; flex: none; color: #e6e9ec; }
.photo__drop span { display: grid; gap: 3px; font-size: .84rem; color: var(--muted); }
.photo__drop b { font-size: .98rem; color: var(--text); }
.photo__list { display: flex; flex-wrap: wrap; gap: 10px; }
.photo__item { position: relative; margin: 0; width: 110px; height: 80px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.photo__item img { width: 100%; height: 100%; object-fit: cover; }
.photo__item button { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(0,0,0,.65); }
.photo__item .ico { width: 14px; height: 14px; }

.consent { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; color: var(--muted); cursor: pointer; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: #e6e9ec; }
.consent a { color: #e6e9ec; text-decoration: underline; text-underline-offset: 3px; }
.consent.is-invalid { box-shadow: inset 0 0 0 1px #e0706a; }

.wizard__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.wizard__nav [hidden] { display: none; }
.wizard__nav [data-next] { margin-left: auto; }
.ico--flip { transform: rotate(180deg); }
.wizard__error { min-height: 1.2em; margin-top: 14px; font-size: .9rem; color: #f0a19c; }
.wizard__error.is-info { color: #cfd4da; }

.done.is-active { display: block; }
.done__head { display: grid; gap: 12px; justify-items: start; margin-bottom: 26px; }
.done__head p { color: var(--muted); max-width: 36em; }
.done__check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--chrome-soft); box-shadow: inset 0 1px 0 #fff, 0 12px 30px -10px rgba(220,226,233,.5); }
.done__check .ico { width: 26px; height: 26px; }
.done__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.done__help { margin: 14px 0 30px; font-size: .84rem; color: #6c737c; max-width: 44em; }
.done__summary { display: grid; gap: 14px; }
.sum { padding: 18px; border-radius: 16px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--line); }
.sum h3 { font: 600 .74rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.sum dl { margin: 0; display: grid; gap: 8px; }
.sum dl div { display: grid; grid-template-columns: 220px 1fr; gap: 12px; font-size: .9rem; }
.sum dt { color: #7d848d; }
.sum dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 50px 0 40px; font-size: .88rem; color: var(--muted); }
.footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: center; }
.footer__links { display: flex; flex-wrap: wrap; gap: 26px; justify-content: flex-end; }
.footer__links a:hover { color: var(--text); }
.footer__legal { grid-column: 1 / -1; padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; font-size: .8rem; color: #6a717a; }

/* WhatsApp schwebend (mobil) */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; display: none; place-items: center; color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #cdd2d8 55%, #eef0f2);
  box-shadow: inset 0 1px 0 #fff, 0 14px 30px -8px rgba(0,0,0,.7);
}
.wa-float .ico { width: 27px; height: 27px; }

.ico { display: inline-block; vertical-align: middle; }

/* ---------- Reveal-Animationen ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-right: .06em; margin-right: -.06em; }
.js .split .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--wi) * 70ms + 120ms); }
.js .split.is-in .w > span { transform: none; }

/* ---------- Rechtsseiten ---------- */
.legal { padding: 150px 0 110px; }
.legal .wrap { max-width: 860px; }
.legal h1 { margin-bottom: 18px; }
.legal .lead { margin-bottom: 50px; }
.legal h2 { font: 700 1.35rem/1.2 var(--display); letter-spacing: -.01em; margin: 46px 0 14px; color: #f2f4f6; }
.legal h3 { font: 700 1.02rem/1.3 var(--body); margin: 26px 0 8px; color: #e1e4e8; }
.legal p, .legal li { color: #a9b0b8; }
.legal p + p { margin-top: 12px; }
.legal ul { list-style: disc; padding-left: 1.2em; margin: 10px 0; }
.legal a { color: #e6e9ec; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: currentColor; }
.legal .card { padding: 28px; border-radius: var(--radius); background: var(--titan); box-shadow: inset 0 0 0 1px var(--line); margin-top: 16px; }
.legal .card p { color: #c5cad0; }
.legal .back { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 40px; font-size: .9rem; color: var(--muted); text-decoration: none; }
.legal .back:hover { color: var(--text); }

/* ---------- Responsive ---------- */
@media (min-width: 1081px) { .mnav { display: none; } }
@media (max-width: 1080px) {
  .calc__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .nav__links { display: none; }
  .nav__inner > .btn { margin-left: auto; }
  .nav__inner { gap: 10px; }
  .nav__burger { display: block; }
}
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { max-width: 560px; width: 100%; margin: 10px auto 0; }
  .tile--konzept { grid-template-columns: 1fr; }
  .orbit { width: min(100%, 340px); margin-top: 20px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(3) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--line); }
  .team, .faq { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .team__media { max-width: 520px; }
}

@media (max-width: 860px) {
  .phases { height: auto !important; }
  .phases__sticky { position: static; min-height: 0; padding: 90px 0 70px; }
  .phases__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .phases__viewport::-webkit-scrollbar { display: none; }
  .phases__track { transform: none !important; }
  .phase { scroll-snap-align: center; width: 82vw; min-height: 380px; }
  .phases__progress { display: none; }
  .tab { flex: none; }
  .nav__links { display: none; }
  .nav__inner > .btn { margin-left: auto; }
  .nav__inner { gap: 10px; }
  .nav__burger { display: block; }
  .section__head--split { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .tile--vers, .tile--inv, .tile--vor, .tile--konzept, .tile--fin { grid-column: auto; grid-row: auto; }
  .tile--fin { flex-direction: column; align-items: flex-start; }
  .tile--fin .tags { justify-content: flex-start; }
  .bundle { flex: none; width: 100%; min-width: 0; height: 170px; margin-top: 8px; }
  .bundle span { left: calc(var(--k) * 18%); }
  .tile--fin.is-in .bundle span { left: 12px; }
  .bundle::before { left: 0; }
  .bundle__badge { left: 158px; }
  .vs { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr 1fr 1fr; }
  .stage { height: 760px; }
  .pcard { width: 47%; left: var(--mcx); top: var(--mcy); }
  .chaos.is-ordered .pcard { left: var(--mox); top: var(--moy); }
  .wa-float { display: grid; }
}

@media (max-width: 560px) {
  .panel-step.is-active { grid-template-columns: 1fr; }
  .choices--cards { grid-template-columns: 1fr; }
  .wizard__steps li:not(.is-active) { display: none; }
  .wizard__nav .btn { flex: 1; }
  .sum dl div { grid-template-columns: 1fr; gap: 2px; }
  .done__actions .btn { flex: 1 1 100%; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .hero__stats div { padding: 0 12px; }
  .hero__stats dd { font-size: .72rem; white-space: normal; }
  .stats { grid-template-columns: 1fr; }
  .stat { min-height: 230px; }
  .strat__opt span { padding: 12px 6px; }
  .strat__opt b { font-size: .82rem; }
  .calc__cta { align-self: stretch; }
  .range__top output { font-size: 1.3rem; }
  .switch { font-size: .88rem; }
  .switch__opt { padding: 12px 15px; }
  .orbit { width: min(100%, 290px); }
  .orbit__sat { font-size: .74rem; padding: 7px 11px; }
  .orbit__sat:nth-of-type(2) { left: 88%; }
  .orbit__sat:nth-of-type(4) { left: 12%; }
  .spgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .spgrid li { padding: 13px 12px 13px 38px; border-radius: 13px; }
  .spgrid li::before { left: 11px; top: 14px; width: 19px; height: 19px; border-radius: 6px; }
  .spgrid li::after { left: 16px; top: 19px; width: 9px; height: 5px; }
  .spgrid b { font-size: .84rem; hyphens: auto; }
  .spgrid span { font-size: .72rem; }
  .nav__inner > .btn span { display: none; }
  .nav__inner > .btn { width: 44px; padding: 0; }
  .hero { padding-top: 110px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .chip { font-size: .76rem; padding: 9px 12px 9px 9px; }
  .chip__ico { width: 28px; height: 28px; }
  .chip div > span { display: none; }
  .chip--1 { left: 0; } .chip--3 { left: 0; } .chip--2, .chip--4 { right: 0; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding-left: 0; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--line); }
  .stage { height: 980px; }
  .pcard { width: 100%; left: 0 !important; top: var(--scy); transform: rotate(var(--cr)); padding: 13px 14px; }
  .chaos.is-ordered .pcard { top: calc(var(--soy) - 110px); }
  .pcard:nth-child(odd) { --cr: -2deg; } .pcard:nth-child(even) { --cr: 2.5deg; }
  .stage__lines { display: none; }
  .creds { grid-template-columns: 1fr; }
  .step { grid-template-columns: 56px 1fr; gap: 20px; }
  .step__num { width: 56px; height: 56px; font-size: 1.4rem; }
  .steps__rail { left: 27px; }
  .faq__list details p { padding-right: 0; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer { padding-bottom: 96px; }
  .footer__links { justify-content: flex-start; }
  .cta__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  .brand { gap: 9px; }
  .brand__word { font-size: .88rem; letter-spacing: .14em; }
  .brand__mark { width: 28px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none !important; }
  .phases { height: auto !important; }
  .phases__sticky { position: static; }
  .phases__viewport { overflow-x: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .split .w > span { opacity: 1; transform: none; filter: none; }
}