/* ==========================================================================
   NIKKI MEDIA — Clipping-Agentur (DACH)
   Design-System
   ========================================================================== */

:root {
  /* Brand */
  --brand: #2563eb;
  --brand-2: #3f7bff;
  --brand-light: #8ab0ff;
  --brand-soft: #eef3ff;
  --brand-ring: rgba(37, 99, 235, .35);

  /* Dark surfaces */
  --ink: #0a0f1e;
  --ink-deep: #070c1a;
  --ink-2: #0c1230;
  --panel: #151d33;
  --panel-2: #182034;
  --panel-3: #1e2536;
  --line-dark: #2b3245;

  /* Light surfaces */
  --paper: #ffffff;
  --surface: #f6f8fb;
  --surface-2: #eef1f6;
  --line: #dfe4ee;

  /* Text */
  --text: #0a0f1e;
  --text-muted: #5b6577;
  --text-soft: #7b8798;
  --on-dark: #ffffff;
  --on-dark-muted: #9aa4b5;
  --on-dark-soft: #8592ab;

  /* Accents */
  --green: #22c55e;
  --whatsapp: #25d366;
  --red: #ef4444;

  /* Shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 15, 30, .06), 0 4px 12px rgba(10, 15, 30, .05);
  --shadow-md: 0 8px 30px rgba(10, 15, 30, .09), 0 2px 6px rgba(10, 15, 30, .05);
  --shadow-lg: 0 30px 70px rgba(10, 15, 30, .16), 0 6px 16px rgba(10, 15, 30, .06);
  --shadow-dark: 0 30px 80px rgba(0, 0, 0, .55);

  --wrap: 1200px;
  --gutter: 24px;

  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --nav-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Grid-Kinder haben per Default min-width:auto — dadurch sprengt breiter
   Inhalt (z. B. ein nicht umbrechender Button oder ein langer @handle) die
   Spalte. min-width:0 zwingt den Inhalt stattdessen zum Umbruch. */
.problem__layout > *, .fcard__inner > *, .case__inner > *,
.founder > *, .footer__top > *, .steps > *, .feedcompare > *,
.livebar__stats > *, .igw__meta > *, .case__stats > *, .vs__row > * { min-width: 0; }
.section { padding: 88px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--surface { background: var(--surface); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }

@media (max-width: 860px) { .section { padding: 60px 0; } :root { --gutter: 18px; } }

/* ---------- Typography scale ---------- */
.h-display { font-size: clamp(2.35rem, 5.4vw, 4.15rem); }
.h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
.h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); }
.h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.lead { font-size: clamp(1.02rem, 1.35vw, 1.18rem); color: var(--text-muted); line-height: 1.65; }
.section--dark .lead { color: var(--on-dark-muted); }
.muted { color: var(--text-muted); }
.section--dark .muted { color: var(--on-dark-muted); }

/* ---------- Eyebrow / pill ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  padding: 7px 15px 7px 12px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid rgba(37, 99, 235, .16);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.section--dark .eyebrow, .card-dark .eyebrow {
  background: rgba(255, 255, 255, .06); color: var(--brand-light);
  border-color: rgba(138, 176, 255, .18);
}

.section-head { max-width: 760px; }
.section-head .h2 { margin-top: 18px; }
.section-head .lead { margin-top: 16px; }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .96rem; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn svg { flex: none; }

.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 8px 24px rgba(37, 99, 235, .28); }
.btn--primary:hover { background: #1d55d0; box-shadow: 0 12px 32px rgba(37, 99, 235, .36); }



.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface); border-color: #c9d2e2; }
.section--dark .btn--ghost, .card-dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .18); }
.section--dark .btn--ghost:hover, .card-dark .btn--ghost:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); }

.btn--sm { padding: 10px 18px; font-size: .88rem; }
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Auf schmalen Displays dürfen Buttons umbrechen und volle Breite nehmen —
   sonst erzwingt ihre nowrap-Breite ein zu breites Layout. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .btn--lg { width: 100%; padding: 15px 22px; }
  .btn-row { gap: 10px; }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 90;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(10, 15, 30, .05); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.03em; }
.logo__mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--brand-2), var(--brand) 60%, #1740a8);
  display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 800;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
.logo__text small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-top: -3px; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  padding: 9px 14px; border-radius: var(--r-pill); font-size: .92rem; font-weight: 500; color: var(--text-muted);
  transition: color .18s ease, background-color .18s ease;
}
.nav__links a:hover { color: var(--text); background: var(--surface-2); }
.nav__actions { display: flex; align-items: center; gap: 10px; }

.nav__burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.nav__burger span { display: block; width: 17px; height: 1.8px; background: var(--text); margin: 4px auto; border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

.nav__mobile {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 89;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 14px var(--gutter) 22px; display: none;
  box-shadow: var(--shadow-md);
}
.nav__mobile.is-open { display: block; }
.nav__mobile a { display: block; padding: 13px 4px; font-weight: 600; font-size: 1.02rem; border-bottom: 1px solid var(--surface-2); }
.nav__mobile .btn { width: 100%; margin-top: 16px; }

/* Über dem dunklen Hero steht die Leiste am Seitenanfang transparent und
   hell — ab dem ersten Scrollen (.is-stuck) übernimmt wieder das weiße Glas.
   Der :has()-Teil nimmt die Sonderbehandlung zurück, solange das mobile Menü
   offen ist; Browser ohne :has() lassen die ganze Regelgruppe fallen und
   zeigen durchgehend die weiße Leiste — ebenfalls lesbar. */
.page-home .nav:not(.is-stuck):not(:has(+ .nav__mobile.is-open)) {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: #fff;
}
.page-home .nav:not(.is-stuck):not(:has(+ .nav__mobile.is-open)) .logo__text small { color: rgba(255, 255, 255, .55); }
.page-home .nav:not(.is-stuck):not(:has(+ .nav__mobile.is-open)) .nav__links a { color: rgba(255, 255, 255, .78); }
.page-home .nav:not(.is-stuck):not(:has(+ .nav__mobile.is-open)) .nav__links a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.page-home .nav:not(.is-stuck):not(:has(+ .nav__mobile.is-open)) .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .24); }
.page-home .nav:not(.is-stuck):not(:has(+ .nav__mobile.is-open)) .btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.page-home .nav:not(.is-stuck):not(:has(+ .nav__mobile.is-open)) .nav__burger { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.page-home .nav:not(.is-stuck):not(:has(+ .nav__mobile.is-open)) .nav__burger span { background: #fff; }

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 520px) {
  .nav__actions .btn span.hide-xs { display: none; }
}
/* Auf schmalen Displays konkurriert der Schriftzug mit CTA und Burger und
   bricht sonst mehrzeilig aus der Leiste heraus — erst fällt die Zeile
   darunter weg, dann der Schriftzug; die Wortmarke trägt die Marke weiter. */
@media (max-width: 620px) {
  .logo__text { white-space: nowrap; }
  .logo__text small { display: none; }
}
@media (max-width: 470px) {
  .logo__text { display: none; }
}

/* ==========================================================================
   HERO — dunkle Bühne, auf der das Stepper-Formular zentriert im
   Vordergrund steht. Alles andere ordnet sich darunter an.
   ========================================================================== */
/* Der Hero zieht sich unter die klebende Navigation — nur so steht die
   Leiste am Seitenanfang transparent auf dunklem Grund statt auf Weiß. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + 44px) 0 108px;
  color: var(--on-dark);
  background:
    radial-gradient(120% 74% at 50% -12%, #16244f 0%, transparent 58%),
    linear-gradient(180deg, #070c1a 0%, #0a1024 46%, #0b1330 100%);
}
/* Weicher Auslauf in den weißen Abschnitt darunter — keine harte Kante. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 0;
  background: linear-gradient(180deg, transparent, var(--paper));
  pointer-events: none;
}

.hero__glow {
  position: absolute; inset: -24% -16% auto -16%; height: 900px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 42% at 26% 28%, rgba(63, 123, 255, .36), transparent 68%),
    radial-gradient(34% 40% at 76% 20%, rgba(37, 99, 235, .30), transparent 70%),
    radial-gradient(32% 38% at 50% 64%, rgba(88, 138, 255, .16), transparent 72%);
  filter: blur(14px);
  animation: heroDrift 19s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(-1.6%, 0, 0) scale(1); }
  to   { transform: translate3d(1.6%, 2%, 0) scale(1.06); }
}

.hero__grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(64% 56% at 50% 32%, #000 22%, transparent 100%);
  -webkit-mask-image: radial-gradient(64% 56% at 50% 32%, #000 22%, transparent 100%);
}

/* Lichtkegel von oben — führt das Auge auf die Formularkarte. */
.hero__beam {
  position: absolute; top: -160px; left: 50%; transform: translateX(-50%); z-index: 0;
  width: min(940px, 98vw); height: 860px; pointer-events: none;
  background: radial-gradient(50% 52% at 50% 0%, rgba(150, 185, 255, .17), transparent 72%);
  clip-path: polygon(37% 0%, 63% 0%, 100% 100%, 0% 100%);
  filter: blur(26px);
}

.hero .wrap { position: relative; z-index: 1; }

/* ---------- Kopf ---------- */
.hero__head { max-width: 880px; margin-inline: auto; text-align: center; }
.hero .eyebrow {
  background: rgba(255, 255, 255, .07); color: var(--brand-light);
  border-color: rgba(138, 176, 255, .22);
}
.hero h1 { margin-top: 20px; }
.hero h1 .grad {
  background: linear-gradient(100deg, #a6c6ff 0%, var(--brand-2) 46%, #6f9bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__kicker {
  max-width: 520px; margin: 20px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--brand-light);
}
.hero__kicker::before, .hero__kicker::after { content: ""; flex: 1; height: 1px; }
.hero__kicker::before { background: linear-gradient(90deg, transparent, rgba(138, 176, 255, .5)); }
.hero__kicker::after { background: linear-gradient(270deg, transparent, rgba(138, 176, 255, .5)); }

/* ---------- Bühne mit dem Formular ---------- */
.hero__stage { position: relative; z-index: 1; max-width: 780px; margin: 44px auto 0; }

.hero__stage-halo {
  position: absolute; inset: -52px -44px -34px; z-index: -1; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(52% 50% at 50% 42%, rgba(89, 143, 255, .55), rgba(37, 99, 235, .16) 56%, transparent 72%);
  filter: blur(40px);
  animation: haloBreathe 7.5s ease-in-out infinite;
}
@keyframes haloBreathe {
  0%, 100% { opacity: .82; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

.hero__stage-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 17px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: linear-gradient(100deg, var(--brand-2), var(--brand));
  box-shadow: 0 10px 26px rgba(37, 99, 235, .45);
}
.hero__stage-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: none;
  animation: badgeDot 2.2s ease-in-out infinite;
}
@keyframes badgeDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

.hero__note {
  margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: .86rem; color: var(--on-dark-muted); text-align: center;
}

/* ---------- Belege unter dem Formular ---------- */
.hero__support { position: relative; z-index: 1; max-width: 880px; margin: 48px auto 0; text-align: center; }
.hero__lead { color: var(--on-dark-muted); max-width: 730px; margin-inline: auto; }

.hero__usps { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero__usps li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 17px 9px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(138, 176, 255, .16);
  font-size: .88rem; font-weight: 500; color: #dbe4f5;
}
.tick {
  width: 21px; height: 21px; border-radius: 50%; flex: none; margin-top: 1px;
  background: rgba(37, 99, 235, .1); color: var(--brand);
  display: grid; place-items: center;
}
.tick svg { width: 12px; height: 12px; }
.hero .tick { background: rgba(99, 148, 255, .2); color: var(--brand-light); margin-top: 0; width: 19px; height: 19px; }

/* ---------- Live-Leiste ---------- */
.livebar {
  position: relative; z-index: 1; max-width: 1000px; margin: 44px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.05fr);
  gap: 30px; align-items: center;
  padding: 20px 26px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(138, 176, 255, .16);
  box-shadow: 0 24px 60px rgba(2, 6, 20, .38);
}
.livebar > * { min-width: 0; }
.live-dot { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.live-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); animation: pulse 2.1s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.livebar__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.livebar__net { font-size: .72rem; color: var(--on-dark-soft); }
.livebar__num {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em;
  font-size: clamp(1.9rem, 3.3vw, 2.6rem); line-height: 1.05; margin-top: 7px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #b9cdf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.livebar__label { color: var(--on-dark-soft); font-size: .8rem; margin-top: 4px; }

.livebar__bars { display: flex; align-items: flex-end; gap: 5px; height: 58px; }
.livebar__bars i {
  flex: 1; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, var(--brand-2), rgba(37, 99, 235, .22));
  transform-origin: bottom; animation: barpulse 2.6s ease-in-out infinite;
}
@keyframes barpulse { 0%, 100% { transform: scaleY(.62); opacity: .75; } 50% { transform: scaleY(1); opacity: 1; } }

.livebar__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.livebar__stats div { text-align: center; }
.livebar__stats span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.02em; color: #fff; }
.livebar__stats small { display: block; color: var(--on-dark-soft); font-size: .74rem; line-height: 1.35; }

@media (max-width: 900px) {
  .livebar { grid-template-columns: 1fr; gap: 20px; justify-items: center; text-align: center; }
  .livebar__now { display: grid; justify-items: center; }
  .livebar__bars { width: 100%; height: 46px; }
  .livebar__stats { width: 100%; }
}
@media (max-width: 720px) {
  .hero { padding: calc(var(--nav-h) + 26px) 0 84px; }
  .hero__stage { margin-top: 34px; }
  .hero__support { margin-top: 38px; }
  .hero__usps li { font-size: .84rem; padding: 8px 14px 8px 9px; }
}

/* ==========================================================================
   MARQUEE (Kunden)
   ========================================================================== */
.marquee { overflow: hidden; position: relative; padding: 6px 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.section--surface .marquee::before { background: linear-gradient(90deg, var(--surface), transparent); }
.section--surface .marquee::after { background: linear-gradient(270deg, var(--surface), transparent); }
.marquee__track { display: flex; gap: 12px; width: max-content; animation: scrollx 44s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }

.chip {
  display: flex; align-items: center; gap: 11px; padding: 11px 18px 11px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.chip__ini {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
  background: linear-gradient(140deg, var(--brand-2), var(--brand));
  position: relative; overflow: hidden;
}
/* Das Profilbild liegt über dem Verlauf — fällt es aus, bleiben die weißen
   Initialen auf blauem Grund lesbar. Deshalb hier kein eigener Hintergrund. */
.chip__ini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip b { font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.chip small { display: block; font-size: .72rem; color: var(--text-soft); font-weight: 500; margin-top: -2px; }

/* ==========================================================================
   CLIP-WALL — echte Reel-Cover, zwei Reihen gegenläufig
   ========================================================================== */
.clipwall { margin-top: 34px; display: grid; gap: 12px; }
.clipwall__row { overflow: hidden; position: relative; }
.clipwall__row::before, .clipwall__row::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.clipwall__row::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.clipwall__row::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.clipwall__track { display: flex; gap: 12px; width: max-content; animation: scrollx 68s linear infinite; }
.clipwall__row--rev .clipwall__track { animation: scrollx-rev 82s linear infinite; }
.clipwall:hover .clipwall__track, .clipwall:focus-within .clipwall__track { animation-play-state: paused; }
@keyframes scrollx-rev { from { transform: translateX(-50%); } to { transform: none; } }

.clipwall__card {
  position: relative; flex: none; width: 128px; aspect-ratio: 9 / 16; border-radius: 14px;
  overflow: hidden; background: linear-gradient(158deg, #1c2742, #0b1122);
  box-shadow: 0 6px 20px rgba(10, 15, 30, .12); isolation: isolate;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.clipwall__card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 46%, rgba(4, 8, 18, .72) 100%);
}
/* Nur das Cover selbst füllt die Karte — das Profilbild im Tag ist verschachtelt. */
.clipwall__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clipwall__card:hover, .clipwall__card:focus-visible {
  transform: translateY(-5px) scale(1.035); box-shadow: 0 16px 38px rgba(10, 15, 30, .26);
}
.clipwall__tag {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  display: flex; align-items: center; gap: 6px;
}
.clipwall__tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clipwall__av {
  width: 18px; height: 18px; border-radius: 50%; flex: none; object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, .75); box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.clipwall__card.is-coverless { background: linear-gradient(158deg, var(--brand-2), #101a3a 62%, #1b2c5e); }
.clipwall__note {
  margin-top: 18px; text-align: center; font-size: .82rem; color: var(--text-soft);
}
@media (max-width: 700px) {
  .clipwall__card { width: 104px; }
  .clipwall__row::before, .clipwall__row::after { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .clipwall__track, .clipwall__row--rev .clipwall__track { animation: none; }
  .clipwall__row { overflow-x: auto; }
}

/* ==========================================================================
   FEED-COMPARE (ForYou-Page)
   ========================================================================== */
.feedcompare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 34px; align-items: center; margin-top: 48px; }
@media (max-width: 900px) { .feedcompare { grid-template-columns: 1fr; gap: 22px; } }
.feedcompare__cap { text-align: center; font-weight: 600; font-size: .95rem; margin-bottom: 16px; }
.feedcompare__cap small { display: block; font-weight: 500; color: var(--text-soft); font-size: .82rem; margin-top: 3px; }
.feedcompare__arrow {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand); color: #fff; box-shadow: 0 10px 30px rgba(37, 99, 235, .35); margin-inline: auto;
}
@media (max-width: 900px) { .feedcompare__arrow { transform: rotate(90deg); } }

.phone {
  border-radius: 30px; padding: 9px; background: linear-gradient(160deg, #262e42, #12172a);
  box-shadow: var(--shadow-lg); position: relative; margin-inline: auto; width: 100%; max-width: 330px;
}
.phone__screen { border-radius: 23px; overflow: hidden; background: #05070f; position: relative; }
.phone__notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 74px; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .18); z-index: 4; }
.feedgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; }
.feedgrid .tile { aspect-ratio: 9 / 16; border-radius: 6px; position: relative; overflow: hidden; }
.feedgrid .tile span {
  position: absolute; left: 6px; bottom: 6px; z-index: 3; font-size: .58rem; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .45); padding: 2px 6px; border-radius: 5px; backdrop-filter: blur(3px);
}
/* „Nachher“-Feed: echtes Clip-Cover unter einem Marken-Farbschleier */
.feedgrid .tile--real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feedgrid .tile--real::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(165deg, rgba(63, 123, 255, .5), rgba(9, 20, 58, .68));
}

/* ==========================================================================
   PROBLEM (dark)
   ========================================================================== */
.problem__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 980px) { .problem__layout { grid-template-columns: 1fr; gap: 36px; } }
.problem__copy p + p { margin-top: 16px; }

.vs { display: grid; gap: 14px; }
.vs__row {
  display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-md); padding: 16px 18px;
}
.vs__row b { font-size: .92rem; font-weight: 600; }
.vs__bar { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.vs__bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4b5570, #6b768f); width: 0; transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }
.vs__row--win { background: rgba(37, 99, 235, .12); border-color: rgba(138, 176, 255, .3); }
.vs__row--win .vs__bar i { background: linear-gradient(90deg, var(--brand-2), var(--brand-light)); }
.vs__val { font-family: var(--font-display); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .vs__row { grid-template-columns: 92px 1fr auto; gap: 11px; padding: 13px 14px; } }

/* ==========================================================================
   FEATURE CARDS (Warum Clipping) — dark rounded cards on white
   ========================================================================== */
.fcards { display: grid; gap: 24px; margin-top: 52px; }
.card-dark {
  background: linear-gradient(165deg, #0c1230 0%, var(--ink) 52%, #070c1c 100%);
  border: 1px solid rgba(138, 176, 255, .12);
  border-radius: var(--r-xl); color: #fff; overflow: hidden; position: relative;
  box-shadow: var(--shadow-dark);
}
.card-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 8% 0%, rgba(63, 123, 255, .13), transparent 60%);
}
.fcard__inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: 44px; padding: 52px; position: relative; z-index: 1; }
.fcard--rev .fcard__viz { order: -1; }
.fcard__copy h3 { margin-top: 18px; font-size: clamp(1.55rem, 2.7vw, 2.15rem); }
.fcard__copy p { margin-top: 15px; color: var(--on-dark-muted); font-size: 1rem; line-height: 1.68; }
.fcard__viz { position: relative; min-height: 300px; display: grid; place-items: center; }

@media (max-width: 980px) {
  .fcard__inner { grid-template-columns: 1fr; gap: 32px; padding: 34px 24px 40px; }
  .fcard__viz, .fcard--rev .fcard__viz { order: 2; min-height: 0; }
  .fcard__copy { order: 1; }
}
@media (max-width: 520px) { .fcard__inner { padding: 26px 18px 32px; } }

/* --- viz 01: CPM chart --- */
.cpm { width: 100%; max-width: 420px; }
.cpm__legend { font-size: .74rem; color: var(--on-dark-soft); margin-bottom: 14px; }
.cpm__legend b { color: #fff; font-weight: 600; }
.cpm__chart { display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.cpm__axis { display: flex; flex-direction: column; justify-content: space-between; font-size: .68rem; color: var(--on-dark-soft); text-align: right; font-variant-numeric: tabular-nums; height: 230px; }
.cpm__bars { display: flex; align-items: flex-end; gap: 22px; height: 230px; border-bottom: 1px solid rgba(255, 255, 255, .12); position: relative; }
.cpm__bars::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 38.33px);
}
.cpm__bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.cpm__bar span { font-family: var(--font-display); font-weight: 700; font-size: .84rem; margin-bottom: 7px; }
.cpm__bar i { display: block; width: 100%; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #3b4358, #232a3b); height: 0; transition: height 1.2s cubic-bezier(.2, .7, .2, 1); }
.cpm__bar--win i { background: linear-gradient(180deg, var(--brand-2), var(--brand) 70%, #1a44b0); box-shadow: 0 0 30px rgba(37, 99, 235, .45); }
.cpm__bar--win span { color: var(--brand-light); }
.cpm__labels { display: flex; gap: 22px; margin-top: 11px; padding-left: 52px; }
.cpm__labels div { flex: 1; text-align: center; font-size: .78rem; color: var(--on-dark-muted); font-weight: 600; }
.cpm__labels div.is-win { color: #fff; }

/* --- viz 02: DACH map --- */
.dachmap { position: relative; width: 100%; max-width: 480px; margin-inline: auto; }
.dachmap__svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 46px rgba(37, 99, 235, .3)); }
.dach-r { fill: url(#dachFill); stroke: #a7c4ff; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dach-at .dach-r { fill: url(#dachFillAt); }
.dach-ch .dach-r { fill: url(#dachFillCh); }
.dach-city { fill: #eaf1ff; opacity: .82; }
.dach-city--glow { filter: drop-shadow(0 0 5px rgba(214, 231, 255, .95)); }

.mappin {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  width: 27px; height: 27px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 5px 16px rgba(0, 0, 0, .5);
}
.mappin svg, .mappin img { width: 100%; height: 100%; object-fit: cover; }

.maptag {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  background: rgba(14, 20, 38, .93); border: 1px solid rgba(138, 176, 255, .2);
  border-radius: 13px; padding: 9px 13px 9px 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55); backdrop-filter: blur(8px);
  white-space: nowrap;
}
.maptag__ic { width: 22px; height: 22px; border-radius: 7px; background: rgba(63, 123, 255, .18); color: var(--brand-light); display: grid; place-items: center; flex: none; }
.maptag__ic svg { width: 13px; height: 13px; }
.maptag b { display: block; font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.maptag small { display: block; font-size: .68rem; color: var(--on-dark-soft); line-height: 1.3; }
.maptag--live { padding: 8px 14px; }
.maptag--live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; animation: pulse 2.1s infinite; }
.maptag--live b { font-family: var(--font-body); font-size: .78rem; font-weight: 600; }

/* Positionen der Kennzahlen auf der Karte */
.maptag--de   { left: 24%; top: 10%; }
.maptag--at   { left: 84%; top: 54%; }
.maptag--ch   { left: 19%; top: 82%; }
.maptag--live { left: 63%; top: 97%; }

@media (max-width: 620px) {
  .maptag { padding: 7px 10px 7px 8px; border-radius: 11px; gap: 7px; }
  .maptag b { font-size: .8rem; }
  .maptag small { font-size: .6rem; }
  .maptag__ic { width: 18px; height: 18px; }
  .mappin { width: 21px; height: 21px; }
  /* enger stellen, damit nichts über den Kartenrand hinausläuft */
  .maptag--de   { left: 32%; }
  .maptag--at   { left: 71%; }
  .maptag--ch   { left: 28%; }
  .maptag--live { left: 55%; }
}

/* --- viz 03: Algorithmus-Triggering --- */
.targeting { width: 100%; max-width: 400px; display: grid; gap: 12px; }
.tmarket {
  border-radius: var(--r-md); padding: 15px 17px; border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03); display: flex; align-items: center; gap: 13px;
  opacity: .45; transition: opacity .4s ease, transform .4s ease;
}
.tmarket__av { display: flex; }
.tmarket__av i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #131a2e; margin-left: -9px; background: #39415a; }
.tmarket__av i:first-child { margin-left: 0; }
.tmarket b { font-size: .9rem; font-weight: 600; }
.tmarket small { display: block; font-size: .72rem; color: var(--on-dark-soft); }
.tmarket--you {
  opacity: 1; background: linear-gradient(100deg, rgba(37, 99, 235, .22), rgba(37, 99, 235, .07));
  border-color: rgba(138, 176, 255, .38); transform: scale(1.03);
  box-shadow: 0 14px 40px rgba(37, 99, 235, .25);
}
.targeting { padding-inline: 6px; }
.tmarket--you .tmarket__av i { background: linear-gradient(140deg, var(--brand-2), var(--brand)); border-color: #16204a; }
.tmarket__badge { margin-left: auto; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-light); background: rgba(63, 123, 255, .16); padding: 5px 10px; border-radius: var(--r-pill); }

/* --- viz 04: 16:9 -> 9:16 --- */
.reformat { width: 100%; max-width: 430px; }
.reformat__src { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1b2440, #101733); display: grid; place-items: center; }
.reformat__src::after { content: "Querformat-Rohmaterial"; position: absolute; bottom: 9px; left: 11px; font-size: .68rem; color: var(--on-dark-soft); }
.reformat__crop { position: absolute; top: 8%; bottom: 8%; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; border: 2px dashed rgba(138, 176, 255, .75); border-radius: 8px; background: rgba(37, 99, 235, .1); }
.reformat__flow { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 0; color: var(--on-dark-soft); font-size: .76rem; }
.reformat__flow span { width: 1px; height: 18px; background: linear-gradient(180deg, transparent, rgba(138, 176, 255, .6), transparent); }
.reformat__out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.reformat__clip { aspect-ratio: 9 / 16; border-radius: 10px; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); }
.reformat__clip b { position: absolute; top: 8px; left: 8px; font-size: .6rem; font-weight: 700; background: rgba(0, 0, 0, .5); padding: 3px 7px; border-radius: 6px; backdrop-filter: blur(4px); }
.reformat__clip em {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .17);
  display: grid; place-items: center; backdrop-filter: blur(4px); font-style: normal;
}

/* ==========================================================================
   CASE STUDIES + Instagram-Widget
   ========================================================================== */
.cases { display: grid; gap: 30px; margin-top: 52px; }

.case {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.case__inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; padding: 34px; align-items: center; }
.case--rev .case__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.case--rev .case__widget { order: -1; }
@media (max-width: 1040px) {
  .case__inner, .case--rev .case__inner { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .case--rev .case__widget { order: 0; }
}

.case__tag {
  display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  background: var(--brand-soft); padding: 6px 12px; border-radius: var(--r-pill);
}
.case__copy h3 { margin-top: 16px; font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.case__copy > p { margin-top: 14px; color: var(--text-muted); line-height: 1.68; }
.case__bullets { margin-top: 18px; display: grid; gap: 9px; }
.case__bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--text); }
.case__bullets .tick { width: 19px; height: 19px; }

.case__stats { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.case__stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 15px; }
.case__stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.42rem; letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
.case__stat small { display: block; font-size: .74rem; color: var(--text-soft); margin-top: 2px; line-height: 1.35; }
@media (max-width: 420px) { .case__stats { grid-template-columns: repeat(2, 1fr); } }

.case__link { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--brand); }
.case__link:hover { text-decoration: underline; }

/* --- Instagram widget --- */
.igw {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.igw__head { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-bottom: 1px solid var(--surface-2); }
.igw__av {
  width: 52px; height: 52px; border-radius: 50%; flex: none; padding: 2.5px;
  background: conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
}
.igw__av span {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: #fff; font-family: var(--font-display); font-weight: 800; font-size: .95rem;
  letter-spacing: -.03em; color: var(--text); border: 2px solid #fff;
  position: relative; overflow: hidden;
}
/* Echtes Profilbild liegt über den Initialen — fällt das Bild aus, bleiben
   die Initialen als Rückfallebene stehen. */
.igw__av img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.igw__id { min-width: 0; flex: 1; }
.igw__id b {
  display: flex; align-items: center; gap: 5px; font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.igw__id b svg { flex: none; }
.igw__id small { display: block; font-size: .8rem; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igw__ig { flex: none; color: #b6bfcf; }

.igw__meta { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--surface-2); }
.igw__meta div { padding: 12px 8px; text-align: center; border-right: 1px solid var(--surface-2); }
.igw__meta div:last-child { border-right: 0; }
.igw__meta b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.igw__meta small { font-size: .7rem; color: var(--text-soft); }

.igw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--surface-2); }
.igw__cell { position: relative; aspect-ratio: 9 / 16; background: #0d1424; overflow: hidden; }
.igw__cell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }

/* Vorschau-Kachel: verlinkt auf den echten Reel */
.igw__poster { position: absolute; inset: 0; display: block; overflow: hidden; }
.igw__poster::before {
  content: ""; position: absolute; inset: 0; opacity: .55; mix-blend-mode: screen;
  background:
    radial-gradient(38% 22% at 26% 20%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(26% 16% at 76% 38%, rgba(255, 255, 255, .3), transparent 72%),
    radial-gradient(46% 26% at 52% 82%, rgba(255, 255, 255, .18), transparent 74%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 9px);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.igw__cell:nth-child(2) .igw__poster::before { transform: scale(1.15) rotate(8deg); }
.igw__cell:nth-child(3) .igw__poster::before { transform: scale(1.25) rotate(-12deg); }
.igw__poster:hover::before { transform: scale(1.3) rotate(4deg); }
.igw__poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 8, 18, .28) 0%, transparent 34%, rgba(4, 8, 18, .84) 100%);
}

/* Kachel mit echtem Instagram-Cover: das Foto ersetzt Verlauf und Textur.
   Ältere Cover stammen aus dem og:image — dort ist der Play-Button bereits
   eingebrannt, die Kachel bringt dann kein eigenes .pl mit. Neuere Cover sind
   sauber, hier setzt die Kachel den Play-Button selbst. */
.igw__poster--photo::before { display: none; }
.igw__poster--photo::after {
  background: linear-gradient(180deg, rgba(4, 8, 18, .18) 0%, transparent 30%, rgba(4, 8, 18, .35) 100%);
}
.igw__poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.igw__poster--photo:hover img { transform: scale(1.06); }
.igw__poster .pl {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(5px); display: grid; place-items: center; z-index: 2;
  border: 1px solid rgba(255, 255, 255, .35); transition: transform .25s ease, background-color .25s ease;
}
.igw__poster:hover .pl { transform: translate(-50%, -50%) scale(1.1); background: rgba(255, 255, 255, .3); }
.igw__poster .vw {
  position: absolute; left: 9px; bottom: 8px; z-index: 2; color: #fff;
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; gap: 5px;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.igw__poster .vw svg { width: 13px; height: 13px; opacity: .9; }

/* Ausfallsicherung: fehlt ein Cover, bleibt eine gestaltete Fläche mit dem
   Account-Namen stehen — nie ein leerer oder kaputt wirkender Rahmen.
   Das Label sitzt unten, damit es nicht mit dem Play-Button kollidiert. */
.igw__poster.is-coverless {
  background: linear-gradient(158deg, var(--brand-2), #101a3a 62%, #1b2c5e);
}
.igw__fallback {
  position: absolute; left: 9px; right: 9px; bottom: 8px; z-index: 2;
  font-size: .66rem; font-weight: 700; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.igw__foot { padding: 13px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.igw__foot small { font-size: .74rem; color: var(--text-soft); min-width: 0; }
.igw__foot a { font-size: .84rem; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; }
.igw__foot a:hover { text-decoration: underline; }

/* live embed strip */
.iglive { margin-top: 46px; }
.iglive__scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(288px, 320px); gap: 18px;
  overflow-x: auto; padding: 4px 4px 20px; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: #c9d2e2 transparent;
}
.iglive__scroller > * { scroll-snap-align: start; }
.iglive__scroller::-webkit-scrollbar { height: 8px; }
.iglive__scroller::-webkit-scrollbar-thumb { background: #c9d2e2; border-radius: 4px; }
.igembed {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: #fff; box-shadow: var(--shadow-sm); height: 700px; position: relative;
}
@media (max-width: 560px) { .igembed { height: 620px; } }
.igembed iframe { width: 100%; height: 100%; border: 0; display: block; }
.igembed__ph {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  text-align: center; padding: 24px; color: var(--text-soft); font-size: .86rem; background: var(--surface);
}
.igembed__ph b { font-size: .95rem; color: var(--text); }
.igembed__ph.is-fallback { gap: 13px; }
.igembed__logo {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7);
  box-shadow: 0 10px 26px rgba(238, 42, 123, .28);
}
.igembed__logo svg { width: 25px; height: 25px; }
.igembed__ph.is-fallback span:not(.igembed__logo) { max-width: 230px; line-height: 1.55; }
.igembed__ph.is-fallback .btn { margin-top: 4px; }
.igembed__sp { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; }
/* Profilbild im Platzhalter: der Slot zeigt schon den Account, bevor
   Instagram antwortet — kein anonymer Spinner mehr. */
.igembed__av {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  padding: 2px; background: conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
  box-shadow: 0 0 0 2px #fff inset;
}
.igembed__ph.is-fallback .igembed__av { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   STEPS (So funktioniert's)
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; }
@media (max-width: 1040px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-lg); padding: 26px 24px 28px; position: relative; overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.step:hover { border-color: rgba(138, 176, 255, .35); transform: translateY(-3px); background: rgba(255, 255, 255, .06); }
.step__n {
  font-family: var(--font-display); font-weight: 700; font-size: 3.1rem; line-height: 1;
  letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 1.4px rgba(138, 176, 255, .38);
}
.step__meta { margin-top: 14px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-light); }
.step h3 { margin-top: 9px; font-size: 1.18rem; }
.step p { margin-top: 10px; font-size: .92rem; color: var(--on-dark-muted); line-height: 1.6; }
.step__cta { margin-top: 16px; }

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.founder { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 52px; align-items: center; }
@media (max-width: 980px) { .founder { grid-template-columns: 1fr; gap: 32px; } }

.founder__media { position: relative; }
.founder__frame {
  border-radius: var(--r-xl); overflow: hidden; position: relative; aspect-ratio: 4 / 4.4;
  background: linear-gradient(160deg, #223055, #101731);
  box-shadow: var(--shadow-lg);
}
.founder__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.founder__fallback {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 28px; color: #fff;
}
/* Ohne diese Regel gewinnt display:grid gegen das hidden-Attribut und der
   Platzhalter läge über dem Foto. */
.founder__fallback[hidden] { display: none; }
.founder__fallback .ini {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -.04em;
  background: linear-gradient(140deg, var(--brand-2), var(--brand) 65%, #14357f);
  box-shadow: 0 16px 40px rgba(37, 99, 235, .4);
}
.founder__fallback b { font-size: 1.1rem; }
.founder__fallback small { font-size: .8rem; color: var(--on-dark-muted); max-width: 230px; line-height: 1.5; }

.founder__badge {
  position: absolute; right: -14px; bottom: 26px; z-index: 3;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 17px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px;
}
.founder__badge b { display: block; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -.03em; }
.founder__badge small { display: block; font-size: .72rem; color: var(--text-soft); }
.founder__badge .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
@media (max-width: 520px) { .founder__badge { right: 8px; bottom: 12px; padding: 10px 13px; } }

.founder__copy h2 { margin-top: 18px; }
.founder__copy p { margin-top: 16px; color: var(--text-muted); line-height: 1.7; }
.founder__quote {
  margin-top: 24px; padding: 20px 24px; border-left: 3px solid var(--brand);
  background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; line-height: 1.5; letter-spacing: -.015em; color: var(--text);
}
.founder__sign { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.founder__sign b { font-family: var(--font-display); font-size: 1rem; }
.founder__sign small { display: block; font-size: .8rem; color: var(--text-soft); font-weight: 400; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px) { .statband { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
.statband__i { text-align: center; }
.statband__i b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.05rem); letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #a8c1f0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statband__i small { display: block; margin-top: 10px; font-size: .84rem; color: var(--on-dark-muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 880px; margin: 46px auto 0; display: grid; gap: 10px; }
.faq__i { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.faq__i[open] { border-color: rgba(37, 99, 235, .32); box-shadow: 0 10px 30px rgba(37, 99, 235, .07); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 22px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand); }
.faq__ic { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); color: var(--text-muted); display: grid; place-items: center; flex: none; transition: transform .25s ease, background-color .25s ease, color .25s ease; }
.faq__i[open] .faq__ic { transform: rotate(45deg); background: var(--brand); color: #fff; }
.faq__a { padding: 0 22px 21px; color: var(--text-muted); font-size: .95rem; line-height: 1.7; }
.faq__a p + p { margin-top: 12px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.finalcta { position: relative; overflow: hidden; }
.finalcta::before {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 620px; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(37, 99, 235, .34), transparent 70%);
}
.finalcta .wrap { position: relative; z-index: 1; }
.finalcta__box { max-width: 780px; margin-inline: auto; text-align: center; }
.finalcta__box h2 { margin-top: 20px; }
.finalcta__box p { margin-top: 18px; }
.finalcta .btn-row { justify-content: center; margin-top: 30px; }
.finalcta__mini { margin-top: 22px; font-size: .84rem; color: var(--on-dark-soft); }

/* ==========================================================================
   NICHES + FOOTER
   ========================================================================== */
.niches { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 40px; }
.niche {
  padding: 8px 15px; border-radius: var(--r-pill); font-size: .84rem; font-weight: 500;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: var(--on-dark-muted);
}

.footer { background: var(--ink-deep); color: var(--on-dark); padding: 58px 0 30px; border-top: 1px solid rgba(255, 255, 255, .07); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; gap: 30px; } }
.footer .logo { color: #fff; }
.footer .logo__text small { color: var(--on-dark-soft); }
.footer__about { margin-top: 16px; font-size: .9rem; color: var(--on-dark-muted); max-width: 380px; line-height: 1.65; }
.footer h4 { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark-soft); font-weight: 700; }
.footer__list { margin-top: 14px; display: grid; gap: 10px; }
.footer__list a, .footer__list span { font-size: .9rem; color: var(--on-dark-muted); transition: color .18s ease; }
.footer__list a:hover { color: #fff; }
.footer__bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--on-dark-soft);
}
.footer__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__bottom a:hover { color: #fff; }

/* ==========================================================================
   SCHWEBENDER CTA — mittig am unteren Rand
   Außen sitzt nur die Position und der Auftritt von unten, innen die Pille
   mit Schweben, Puls-Ring und Glanzstreifen. Getrennt, damit sich die
   transform-Animationen nicht gegenseitig überschreiben.
   ========================================================================== */
.cta-float {
  position: fixed; left: 50%; bottom: 26px; z-index: 80;
  display: inline-flex;
  transform: translate(-50%, 210%); opacity: 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .32s ease;
}
.cta-float.is-in { transform: translate(-50%, 0); opacity: 1; }

.cta-float__in {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px 16px 20px; border-radius: var(--r-pill);
  color: #fff; font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em; white-space: nowrap;
  background: linear-gradient(100deg, var(--brand-2) 0%, var(--brand) 52%, #1b47bd 100%);
  box-shadow: 0 18px 46px rgba(37, 99, 235, .48), 0 2px 0 rgba(255, 255, 255, .22) inset;
  animation: ctaBob 3.6s ease-in-out .8s infinite;
  transition: box-shadow .22s ease, filter .22s ease;
}
@keyframes ctaBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Puls-Ring nach außen */
.cta-float__in::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(63, 123, 255, .58);
  animation: ctaPulse 2.8s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 123, 255, .58); }
  70%  { box-shadow: 0 0 0 18px rgba(63, 123, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 123, 255, 0); }
}

/* Glanzstreifen, der über die Pille wandert */
.cta-float__in::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  clip-path: inset(0 round var(--r-pill));
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .42) 50%, transparent 66%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: ctaSheen 4.2s ease-in-out 1.2s infinite;
}
@keyframes ctaSheen {
  0%       { background-position: 180% 0; }
  45%, 100% { background-position: -80% 0; }
}

.cta-float__ic {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: rgba(255, 255, 255, .2);
}
.cta-float__ic svg { width: 16px; height: 16px; }
.cta-float__ar { display: grid; place-items: center; flex: none; transition: transform .22s ease; }
.cta-float__ar svg { width: 15px; height: 15px; }

.cta-float:hover .cta-float__in {
  box-shadow: 0 24px 58px rgba(37, 99, 235, .62), 0 2px 0 rgba(255, 255, 255, .3) inset;
  filter: brightness(1.06);
}
.cta-float:hover .cta-float__ar { transform: translateX(4px); }
.cta-float:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: var(--r-pill); }

@media (max-width: 560px) {
  .cta-float { bottom: 16px; width: calc(100% - 28px); justify-content: center; }
  .cta-float__in { width: 100%; justify-content: center; font-size: .98rem; padding: 15px 22px 15px 16px; }
}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal { max-width: 780px; margin-inline: auto; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.legal h2 { font-size: 1.22rem; margin-top: 38px; }
.legal p, .legal li { color: var(--text-muted); font-size: .96rem; line-height: 1.72; margin-top: 12px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal a { color: var(--brand); text-decoration: underline; }
.legal .note { margin-top: 26px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: .88rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   STEPPER — Anfrage-Formular im Hero
   ========================================================================== */
.stepper { margin-top: 26px; max-width: 640px; }

/* Die Karte ist eine helle Fläche und setzt ihre Textfarbe selbst — sonst
   erbt sie auf dunklem Grund (Hero) weiße Schrift auf Weiß. */
.stepper__card,
.stepper__done {
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 22px 22px 20px;
  margin: 0;
}

/* Auf der Hero-Bühne nimmt die Karte die volle Bühnenbreite ein und wird
   durch Tiefenschatten und Lichtkante klar vom dunklen Grund abgehoben. */
.hero .stepper { margin-top: 0; max-width: none; }
.hero .stepper__card,
.hero .stepper__done {
  padding: 34px 34px 28px;
  border-radius: var(--r-xl);
  border-color: rgba(255, 255, 255, .55);
  box-shadow:
    0 48px 110px rgba(2, 6, 20, .62),
    0 16px 36px rgba(2, 6, 20, .36),
    0 0 0 1px rgba(120, 160, 255, .16),
    0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hero .stepper__q { font-size: 1.3rem; }
/* In der breiten Karte stehen die Auswahllisten zweispaltig — einspaltig
   wirken sie auf 780px gedehnt und treiben die Karte unnötig in die Höhe.
   Die Chips regeln ihre Spalten selbst und bleiben ausgenommen.
   Die Mindesthöhe hält die Kartenhöhe über die Schritte hinweg ruhig; auf
   dem Handy würde sie die kurzen Schritte nur aufblähen. */
@media (min-width: 680px) {
  .hero .opts:not(.opts--chips) { grid-template-columns: repeat(2, 1fr); }
  .hero .opts--chips { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  /* Vierspaltig bleibt Schritt 1 sonst deutlich flacher als die übrigen
     Schritte — die größeren Kacheln füllen die gemeinsame Höhe aus. */
  .hero .plat__box { padding: 24px 12px 20px; }
  .hero .plat__logo { width: 54px; height: 54px; }
  .hero .plat__logo img { width: 40px; height: 40px; }
  .hero .stepper__panel { min-height: 248px; }
}
@media (max-width: 560px) {
  .hero .stepper__card, .hero .stepper__done { padding: 22px 18px 18px; border-radius: var(--r-lg); }
  .hero .stepper__q { font-size: 1.12rem; }
}

/* Fortschritt */
.stepper__head { margin-bottom: 18px; }
.stepper__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 10px;
}
.stepper__dots { display: inline-flex; gap: 5px; flex: none; }
.stepper__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .25s ease; }
.stepper__dots i.is-on { background: var(--brand); }
.stepper__bar { height: 5px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.stepper__bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width .35s cubic-bezier(.2, .8, .2, 1);
}

/* Panels */
.stepper__panel { border: 0; padding: 0; margin: 0; min-width: 0; animation: stepIn .28s ease both; }
.stepper__panel[hidden] { display: none; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stepper__q {
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; line-height: 1.25;
  letter-spacing: -.02em; color: var(--text); padding: 0; margin-bottom: 4px;
}
.stepper__hint { margin: 0 0 14px; font-size: .84rem; color: var(--text-soft); }
.stepper__q + .opts, .stepper__q + .plat, .stepper__q + .fields { margin-top: 14px; }

/* Schritt 1 — Plattform-Kacheln */
.plat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* In der breiten Hero-Karte stehen alle vier Plattformen nebeneinander —
   das hält Schritt 1 flach und die Karte bleibt im ersten Bildschirm. */
@media (min-width: 680px) { .hero .plat { grid-template-columns: repeat(4, 1fr); } }
.plat__tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.plat__box {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 18px 12px 14px; text-align: center; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.plat__box:hover { border-color: var(--brand-light); transform: translateY(-2px); }
.plat__logo { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; }
.plat__logo img { width: 34px; height: 34px; }
.plat__box b { font-family: var(--font-display); font-size: .98rem; font-weight: 700; }
.plat__box small { font-size: .78rem; color: var(--text-soft); }
.plat__check {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); color: transparent;
  transition: background .18s ease, color .18s ease;
}
.plat__check svg { width: 11px; height: 11px; }
.plat__tile input:checked + .plat__box {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.plat__tile input:checked + .plat__box .plat__check { background: var(--brand); color: #fff; }
.plat__tile input:focus-visible + .plat__box { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Schritte 2–4 — Auswahl */
.opts { display: grid; gap: 9px; }
.opts--chips { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt > span {
  display: block; padding: 13px 16px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.opt > span b { display: block; font-family: var(--font-display); font-size: .96rem; font-weight: 600; }
.opt > span small { display: block; font-size: .82rem; color: var(--text-soft); margin-top: 2px; }
.opt--chip > span { text-align: center; font-size: .9rem; font-weight: 600; padding: 11px 12px; }
.opt > span:hover { border-color: var(--brand-light); }
.opt input:checked + span {
  border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-ring);
}
.opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Schritt 5 — Felder */
.fields { display: grid; gap: 12px; }
@media (min-width: 560px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: block; }
.field__l { display: block; font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.field__l i { color: var(--brand); font-style: normal; }
.field__l em { font-style: normal; font-weight: 400; color: var(--text-soft); }
.field input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--text);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.field input::placeholder { color: #a9b2c1; }

/* Honeypot — für Menschen unsichtbar, für Bots ein offenes Feld */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: .87rem; color: var(--text-muted); cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--brand); }
.check a { color: var(--brand); text-decoration: underline; }
.check i { color: var(--brand); font-style: normal; }

/* Navigation + Fehler */
.stepper__nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.stepper__nav [data-next], .stepper__nav [data-submit] { margin-left: auto; }
.stepper__nav .btn[disabled] { opacity: .45; pointer-events: none; }
/* .btn setzt display:inline-flex und schlägt damit das display:none des
   Browsers für [hidden] — ohne diese Regel stünden „Zurück" und
   „Anfrage absenden" schon in Schritt 1 in der Leiste. */
.stepper__nav .btn[hidden] { display: none; }
.stepper__err {
  margin: 14px 0 0; padding: 10px 13px; font-size: .86rem; font-weight: 500;
  color: #7f1d1d; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r-sm);
}

/* Erfolg */
.stepper__done { text-align: center; }
.stepper__tick {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 4px auto 14px;
  border-radius: 50%; background: var(--green); color: #fff;
}
.stepper__tick svg { width: 20px; height: 20px; }
.stepper__done h3 { font-size: 1.3rem; margin-bottom: 8px; }
.stepper__done p { margin: 0 0 6px; font-size: .95rem; }
.stepper__done .muted { font-size: .86rem; color: var(--text-soft); }

@media (max-width: 480px) {
  .stepper__card, .stepper__done { padding: 18px 16px 16px; border-radius: var(--r-md); }
  .stepper__q { font-size: 1.06rem; }
  .plat { gap: 8px; }
  .plat__box { padding: 14px 8px 12px; }
}