/* =========================================================================
   Brandwatcher — Website
   Dunkle Fläche, weiße Display-Typo mit harter negativer Laufweite, weiße
   Pillen als Primär-CTA, Blau nur als Signalfarbe (Links, Fokus, Auswahl),
   Gradient-Spotlight-Karten. Display-Schrift: Geist.
   ========================================================================= */

/* ------------------------------- SCHRIFTEN ----------------------------- */
/* Lokal gehostet (keine Verbindung zu Google Fonts): Variable Fonts, Latin-Subset. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------- TOKENS -------------------------------- */
:root {
  color-scheme: dark;

  /* Farben — laut DESIGN.md */
  --primary:          #ffffff;
  --on-primary:       #000000;
  --accent-blue:      #0099ff;
  --ink:              #ffffff;
  --ink-muted:        #999999;
  --canvas:           #0f0f0f;
  --surface-1:        #161616;
  --surface-2:        #1e1e1e;
  --hairline:         #262626;
  --hairline-soft:    #1a1a1a;
  --gradient-magenta: #d44df0;
  --gradient-violet:  #6a4cf5;
  --gradient-orange:  #ff7a3d;
  --gradient-coral:   #ff5577;
  --success:          #22c55e;
  /* Brandwatcher-Mint aus der ersten Version — Headline-Akzent und Grafiken */
  --mint:             #7cebcb;
  --mint-strong:      #00d4a4;

  /* Radien */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;
  --r-lg: 15px; --r-xl: 20px; --r-xxl: 30px; --r-pill: 100px; --r-full: 9999px;

  /* Abstände — 5er-Raster laut DESIGN.md */
  --s-xxs: 4px;  --s-xs: 8px;   --s-sm: 12px;  --s-md: 15px;
  --s-lg: 20px;  --s-xl: 30px;  --s-xxl: 40px; --s-xxxl: 50px;
  --s-section-sm: 64px; --s-section: 96px; --s-section-lg: 120px; --s-hero: 140px;

  /* Elevation */
  --e-edge: inset 0 0.5px 0 rgba(255,255,255,.10);
  --e-float: inset 0 0.5px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.25);
  --e-focus: 0 0 0 1px rgba(0,153,255,.15);

  /* Typografie */
  --font-display: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;
  --track: -0.05em;          /* Display-Laufweite: 5 % der Größe */

  /* Layout */
  --container: 1200px;
  --gutter: 30px;

  --t: 200ms cubic-bezier(.2,.6,.2,1);
}

/* ------------------------------- RESET --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--canvas);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-feature-settings: "cv01", "cv05", "cv09", "cv11", "ss03", "ss07";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--primary); color: var(--on-primary);
  padding: 10px 20px; border-radius: 0 0 var(--r-md) 0;
  font-size: 14px; font-weight: 500;
}
.skip-link:focus { left: 0; }

/* ------------------------------ LAYOUT --------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: calc(880px + 2 * var(--gutter)); }

.band { padding-block: var(--s-section-lg); }
.band-tight { padding-block: var(--s-section-sm); }
/* Kein heller Wechsel — Sektionen trennen sich über eine Haarlinie. */
.band-surface { background: var(--canvas); border-top: 1px solid var(--hairline-soft); }

/* ---------------------------- TYPOGRAFIE ------------------------------- */
.hero-title, .section-title, .cta-title, .testimonial-quote,
.bento-figure, .tier-price, .proof-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-feature-settings: "ss02";
}

.hero-title {
  font-size: 85px; line-height: .95;
  letter-spacing: var(--track); color: var(--ink);
  max-width: 15ch;
}

.section-title {
  font-size: clamp(34px, 4.4vw, 62px); line-height: 1;
  letter-spacing: var(--track); color: var(--ink);
  max-width: 18ch;
}
.muted-title { color: var(--ink-muted); }

.section-sub {
  font-size: 18px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink-muted);
  max-width: 58ch; margin-top: var(--s-lg);
}

.section-head { margin-bottom: var(--s-xxxl); }
.section-head .section-title { max-width: 20ch; }

.eyebrow, .section-eyebrow {
  font-size: 13px; font-weight: 500; line-height: 1.2;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: var(--s-xs);
}
.section-eyebrow { margin-bottom: var(--s-lg); }
.section-eyebrow.on-dark { color: var(--ink-muted); }

.eyebrow-dot {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--success); flex: none;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}

.prose p { font-size: 17px; line-height: 1.4; color: var(--ink-muted); }
.prose p + p { margin-top: var(--s-md); }

/* Rechtstexte (Impressum, Datenschutz) */
.legal { padding-top: calc(64px + var(--s-section)); padding-bottom: var(--s-section-lg); }
.legal h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 44px; line-height: 1; letter-spacing: var(--track);
  margin-bottom: var(--s-xxl);
}
.legal h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 26px; line-height: 1.1; letter-spacing: var(--track);
  margin-top: var(--s-xxxl); margin-bottom: var(--s-md);
}
.legal h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: var(--s-xl); margin-bottom: var(--s-sm); }
.legal p, .legal li, .legal address { font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.legal p + p, .legal address + p { margin-top: var(--s-md); }
.legal address { font-style: normal; color: var(--ink); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul { list-style: disc; padding-left: 1.2em; margin: var(--s-md) 0; }
.legal li + li { margin-top: var(--s-xs); }
.legal a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal .legal-back { display: inline-block; margin-bottom: var(--s-xl); font-size: 14px; color: var(--ink-muted); text-decoration: none; }
.legal .legal-back:hover { color: var(--ink); }
.legal .legal-updated { font-size: 14px; color: var(--ink-muted); margin-top: var(--s-xxxl); }
@media (max-width: 767px) {
  .legal h1 { font-size: 34px; }
  .legal h2 { font-size: 22px; }
}

/* ------------------------------ BUTTONS -------------------------------- */
/* Jede CTA ist eine Pille. Primär = weiß, sekundär = Anthrazit, nie umrandet. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-xs);
  min-height: 44px;
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.01em;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), opacity var(--t), box-shadow var(--t), transform var(--t);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-primary, .btn-on-dark, .btn-accent { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover, .btn-on-dark:hover, .btn-accent:hover {
  opacity: .92;
  box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 8px 24px rgba(255,255,255,.14);
}

.btn-secondary, .btn-outline-light { background: var(--surface-2); color: var(--ink); }
.btn-secondary:hover, .btn-outline-light:hover {
  background: #262626;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.btn-outline-light {
  background: rgba(28,28,28,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.btn-sm { min-height: 36px; padding: 8px 15px; }
.btn-lg { min-height: 48px; padding: 14px 22px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }

.btn-meta {
  font-size: 12px; font-weight: 500; opacity: .55;
  padding-left: var(--s-xs);
  border-left: 1px solid currentColor;
  margin-left: var(--s-xxs);
}

/* ------------------------------ HEADER --------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background-color var(--t);
}
.site-header.is-stuck, .site-header.is-open {
  background: rgba(15,15,15,.82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--hairline-soft);
}
/* Bei offenem Drawer ohne Scroll-Kontext (z.B. im Hero) deckend statt halbtransparent,
   sonst scheint das Video hinter der Kopfzeile durch. */
.site-header.is-open:not(.is-stuck) { background: rgba(15,15,15,.97); }

.header-inner {
  height: 64px;
  display: flex; align-items: center; gap: var(--s-xxl);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 20px; width: auto; color: var(--ink); display: block; }

.nav-desktop { display: flex; gap: var(--s-xs); margin-left: auto; }
/* Über dem Hero-Video ohne Hintergrund: weiß und leicht fetter; den Kontrast liefert die Hero-Blende oben. */
.nav-desktop a {
  position: relative;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.92);
  padding: 8px 12px; border-radius: var(--r-pill);
  transition: color var(--t);
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a.is-active { color: var(--ink); }
.nav-desktop a.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 1.5px; border-radius: 1px; background: currentColor;
}
/* Sobald der Header seinen dunklen Hintergrund hat, dürfen die Links wieder dezenter sein. */
.site-header.is-stuck .nav-desktop a { color: rgba(255,255,255,.78); }
.site-header.is-stuck .nav-desktop a:hover,
.site-header.is-stuck .nav-desktop a.is-active { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: var(--s-sm); margin-left: var(--s-md); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent; border: 0;
  border-radius: var(--r-full);
  padding: 0; cursor: pointer;
  place-items: center; align-content: center; gap: 4px;
}
.nav-toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--ink);
  transition: transform var(--t), opacity var(--t);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-drawer[hidden] { display: none; }
.nav-drawer {
  display: none; flex-direction: column; gap: var(--s-xxs);
  padding: 0 var(--gutter);
  max-height: 0; opacity: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  background: var(--canvas);
  transition:
    max-height .5s cubic-bezier(.4,0,.2,1),
    padding-block .5s cubic-bezier(.4,0,.2,1),
    opacity .3s ease,
    border-color .3s ease;
}
.nav-drawer.is-open {
  max-height: 640px; opacity: 1;
  padding-block: var(--s-md) var(--s-xxl);
  border-top-color: var(--hairline-soft);
}
.nav-drawer a, .nav-drawer .btn {
  font-size: 17px; font-weight: 500; color: var(--ink);
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--hairline-soft);
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.nav-drawer.is-open a, .nav-drawer.is-open .btn { opacity: 1; transform: translateY(0); }
.nav-drawer a:nth-child(1) { transition-delay: .06s; }
.nav-drawer a:nth-child(2) { transition-delay: .1s; }
.nav-drawer a:nth-child(3) { transition-delay: .14s; }
.nav-drawer a:nth-child(4) { transition-delay: .18s; }
.nav-drawer a:nth-child(5) { transition-delay: .22s; }
.nav-drawer a:nth-child(6) { transition-delay: .26s; }
.nav-drawer a:nth-child(7) { transition-delay: .3s; }
.nav-drawer .btn { transition-delay: .34s; }
.nav-drawer .btn { margin-top: var(--s-md); border-bottom: 0; color: var(--on-primary); }

/* -------------------------------- HERO --------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(64px + clamp(24px, 7vh, 96px));
  --logos-gap: 3.5vh;
  padding-bottom: calc(var(--logos-gap) + 76px);
  overflow: hidden;
  color: var(--ink);
  background: var(--canvas);
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media-video {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% center;
  filter: grayscale(.4) contrast(1.05);
}
.hero-media-video { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-media-video { display: none; }
}
/* Schwarzer Schleier statt Petrol: das Foto wird zur Bühne, die Typo trägt. */
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(15,15,15,1) 0%, rgba(15,15,15,.55) 25%, rgba(15,15,15,.15) 60%, rgba(15,15,15,.2) 82%, rgba(15,15,15,.55) 100%),
    linear-gradient(to right, rgba(15,15,15,.92) 0%, rgba(15,15,15,.5) 30%, rgba(15,15,15,.08) 55%, rgba(15,15,15,0) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; margin-block: auto; }

/* Eyebrow als Ankündigungs-Pille */
.hero .eyebrow {
  color: var(--ink);
  background: rgba(28,28,28,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  padding: 7px 14px 7px 12px;
  box-shadow: var(--e-edge);
}
.hero-title { margin-top: var(--s-xl); color: var(--ink); }
.hero-title-accent { color: var(--mint); }

.hero-sub {
  font-size: 18px; line-height: 1.35; letter-spacing: -0.01em;
  color: rgba(255,255,255,.78);
  max-width: 54ch; margin-top: var(--s-xl);
}

.hero-cta {
  display: flex; flex-wrap: wrap; gap: var(--s-sm);
  margin-top: var(--s-xxl);
}

.proof-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
  margin-top: clamp(24px, 5vh, 64px);
  max-width: 880px;
}
.proof-item { display: flex; flex-direction: column; gap: 4px; }
.proof-value { font-size: 30px; line-height: 1; letter-spacing: var(--track); color: var(--ink); }
.proof-label { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-muted); max-width: 28ch; }
.proof-source { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }

/* ------------------------------ LOGO WALL ------------------------------ */
.logo-marquee {
  --logo-h: 32px;
  --logo-space: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex; width: max-content;
  animation: logo-marquee 80s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-group {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.logo-item {
  display: grid; place-items: center; flex: none;
  padding: var(--s-md) var(--logo-space);
  min-height: calc(var(--logo-h) + 32px);
}
.logo-item img {
  height: var(--logo-h); width: auto; max-width: 220px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .5;
  transition: opacity var(--t);
}
.logo-item img:hover { opacity: 1; }
.hero-logos {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: var(--logos-gap);
}
.hero-logos .logo-item { min-height: calc(var(--logo-h) + 16px); padding-block: var(--s-xs); }
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none !important; width: auto; justify-content: center; }
  .logo-group { justify-content: center; }
  .logo-group[aria-hidden="true"] { display: none; }
}

/* ------------------------------- SPLIT --------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-section);
  align-items: start;
}
.split-left { position: sticky; top: 104px; }

.lead-hook {
  font-family: var(--font-display);
  font-size: 32px !important; font-weight: 500; line-height: 1.1;
  letter-spacing: var(--track);
  color: var(--ink) !important;
  margin-top: var(--s-xxl) !important;
}

.check-list {
  display: flex; flex-direction: column; gap: var(--s-sm);
  margin-top: var(--s-lg);
}
.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px; line-height: 1.4; color: var(--ink);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--surface-2);
}
.check-list li::after {
  content: ""; position: absolute; left: 5.5px; top: 8.5px;
  width: 7px; height: 3.5px;
  border-left: 1.6px solid var(--success);
  border-bottom: 1.6px solid var(--success);
  transform: rotate(-45deg);
}

.pull {
  margin-top: var(--s-xl) !important;
  padding: var(--s-lg) var(--s-xl);
  background: var(--surface-1);
  border-radius: var(--r-xl);
  box-shadow: var(--e-edge);
  font-size: 19px !important; line-height: 1.35;
  color: var(--ink) !important;
}

/* ------------------------ ECHO-METHODE (STAGES) ------------------------ */
.stages {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-md);
}
.stage {
  position: relative;
  background: var(--surface-1);
  border-radius: var(--r-xl);
  box-shadow: var(--e-edge);
  padding: 0 var(--s-lg) var(--s-lg);
  display: flex; flex-direction: column; gap: var(--s-xs);
  overflow: hidden;
  transition: background-color var(--t), transform var(--t);
}
.stage:hover { background: var(--surface-2); transform: translateY(-2px); }

.stage-media {
  display: block;
  margin: 0 calc(var(--s-lg) * -1) var(--s-md);
  background: var(--surface-1);
}
.stage-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}

.stage-num {
  font-size: 13px; font-weight: 500; font-feature-settings: "tnum";
  color: var(--ink-muted);
}
.stage-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: var(--track);
  color: var(--ink);
}
.stage-lead { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); margin-top: var(--s-xxs); }
.stage-body { font-size: 14px; line-height: 1.4; color: var(--ink-muted); margin-top: var(--s-xxs); }

.stages-foot {
  margin-top: var(--s-xxl);
  font-size: 14px; line-height: 1.4; color: var(--ink-muted);
  max-width: 78ch;
}

/* ------------------------------ FEATURES ------------------------------- */
.feats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-md);
}
.feat {
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border-radius: var(--r-xl);
  box-shadow: var(--e-edge);
  overflow: hidden;
}
.feat-media {
  position: relative;
  background: var(--canvas); margin: 8px 8px 0; border-radius: 14px; overflow: hidden;
}
/* Dezentes Punktraster hinter den animierten Illustrationen, zu den Rändern hin ausgeblendet. */
.feat-media::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 38% 50%, #000 40%, transparent 90%);
  mask-image: radial-gradient(70% 70% at 38% 50%, #000 40%, transparent 90%);
  pointer-events: none;
}
.feat-svg { position: relative; display: block; width: 100%; height: auto; }
.feat-text {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--s-sm);
  padding: var(--s-xl);
}
.feat-kicker { font-size: 13px; font-weight: 500; color: var(--ink-muted); font-feature-settings: "tnum"; }
.feat-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: var(--track);
  color: var(--ink);
}
.feat-body { font-size: 15px; line-height: 1.4; color: var(--ink-muted); }

.feat--wide { grid-column: 1 / -1; flex-direction: row; }
.feat--wide .feat-media {
  order: 2; flex: 0 0 58%;
  display: flex; align-items: center;
  margin: 8px 8px 8px 0;
}
.feat--wide .feat-text { justify-content: center; padding: var(--s-xxxl); }
.feat--wide .feat-title { font-size: 44px; line-height: 1; }
.feat--wide .feat-body { font-size: 17px; max-width: 42ch; }

/* Schritt-Chips — Auswahl = Lift (surface-2), aktueller Schritt = weiße Pille */
.feat-steps {
  list-style: none; margin: auto 0 0; padding: var(--s-sm) 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.feat--wide .feat-steps { margin-top: var(--s-md); }
.feat-steps li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--ink-muted); background: var(--canvas);
  border-radius: var(--r-pill);
  cursor: default;
  transition: background .3s, color .3s;
}
.feat-steps li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint-strong);
  transition: background .3s, box-shadow .3s;
}
.feat.is-live .feat-steps li::before { background: var(--hairline); }
.feat.is-live .feat-steps li.is-on { background: var(--surface-2); color: var(--ink); }
.feat.is-live .feat-steps li.is-on::before { background: var(--mint-strong); }
.feat.is-live .feat-steps li.is-cur { background: var(--primary); color: var(--on-primary); }
.feat.is-live .feat-steps li.is-cur::before { background: var(--mint-strong); box-shadow: 0 0 0 3px rgba(0,212,164,.3); }

/* Grafik: Texte (Farben der SVGs sind im Markup auf Dunkel umgestellt) */
.feat-svg text { font-family: inherit; }
.svg-label { font-size: 12px; font-weight: 500; fill: var(--ink-muted); }
.svg-label--strong { font-size: 13px; font-weight: 600; fill: var(--ink); }
.svg-label--mint { fill: var(--ink); font-weight: 600; }
.svg-title { font-size: 16px; font-weight: 600; fill: var(--ink); }
.svg-tiny { font-size: 10px; font-weight: 500; fill: var(--ink-muted); }
.svg-tiny--light { fill: var(--ink); font-weight: 600; font-size: 9px; }
.svg-tiny--alert { fill: var(--gradient-coral); font-weight: 600; }
.svg-status { font-size: 12px; font-weight: 600; fill: var(--ink); }
.svg-halo { paint-order: stroke; stroke: var(--canvas); stroke-width: 4px; stroke-linejoin: round; }

/* Grafik: Schritt-Zustände (identisch zur Originalseite) */
.feat-svg [data-s] {
  transform-box: fill-box; transform-origin: center;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.feat.is-live .feat-svg [data-s]:not(.is-on) { opacity: .12; transform: scale(.94); }

.feat-svg .st-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; }
.feat.is-live .feat-svg [data-s]:not(.is-on) .st-draw { stroke-dashoffset: 1; }

.st-plan-row { transition: opacity .4s ease, transform .4s ease; }
.feat.is-live .feat-svg .st-plan:not(.is-on) .st-plan-row { opacity: 0; transform: translateX(-8px); }

.mk-fill {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.feat.is-live .mk-fill { transform: scaleY(calc(var(--k, 0) / 6)); }

.v-prog {
  transform-box: fill-box; transform-origin: 0 50%;
  transition: transform .8s cubic-bezier(.5,0,.2,1);
}
.feat.is-live .v-prog { transform: scaleX(calc(max(var(--k, 0) - 1, 0) / 4)); }
.v-token {
  transform: translateX(360px);
  transition: transform .8s cubic-bezier(.5,0,.2,1), opacity .4s ease;
}
.feat.is-live .v-token { transform: translateX(calc(max(var(--k, 0) - 1, 0) * 90px)); }
.feat.is-live[data-step="0"] .v-token { opacity: 0; }
.v-status { opacity: 0; transition: opacity .3s ease; }
.v-status.is-final { opacity: 1; }
.feat.is-live .feat-svg .v-status[data-s] { opacity: 0; transform: none; }
.feat.is-live .feat-svg .v-status[data-s].is-cur { opacity: 1; }

.w-bar {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.feat.is-live .feat-svg .st-bars:not(.is-on) .w-bar { transform: scaleY(0); }

.cards-foot, .cases-foot {
  margin-top: var(--s-xxl);
  display: inline-flex; align-items: center; gap: var(--s-xs);
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.cases-foot { color: var(--ink-muted); font-weight: 400; font-size: 14px; }
.foot-icon { width: 18px; height: 18px; color: var(--success); flex: none; }

/* ------------------------------- BENTO --------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: var(--s-md);
}
.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform var(--t), background-color var(--t);
}
.bento-card:hover { transform: translateY(-2px); }
.bento-content { position: relative; z-index: 2; display: flex; flex-direction: column; }

/* Spotlight-Karte 1 von 2: Violett → Magenta (Signatur laut DESIGN.md) */
.bento-hero {
  grid-column: span 2; grid-row: span 2;
  border-radius: var(--r-xxl);
  background:
    radial-gradient(90% 80% at 85% 10%, rgba(212,77,240,.95) 0%, rgba(212,77,240,0) 60%),
    radial-gradient(80% 90% at 10% 100%, rgba(255,122,61,.55) 0%, rgba(255,122,61,0) 55%),
    linear-gradient(160deg, var(--gradient-violet) 0%, #3b22b8 100%);
  color: var(--ink);
  padding: var(--s-xxl);
  justify-content: flex-end;
}
.bento-bg { position: absolute; inset: 0; z-index: 0; }
.bento-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .2; filter: grayscale(1);
  transition: transform 700ms cubic-bezier(.2,.6,.2,1);
}
.bento-hero .bento-bg img { mix-blend-mode: soft-light; opacity: .55; }
.bento-bg.is-subtle img { opacity: .1; }
.bento-bg.is-glow img { opacity: .16; }
.bento-hero:hover .bento-bg img { transform: scale(1.04); }
.bento-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%);
}

.bento-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--s-xs);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  margin-bottom: var(--s-lg);
}
.badge-dot {
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--success); flex: none;
  animation: bento-pulse 2.4s ease-in-out infinite;
}
@keyframes bento-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  50%      { opacity: .7; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

.bento-head { margin-bottom: var(--s-md); }
.bento-client { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.bento-sector { font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-top: 2px; }
.bento-hero .bento-sector { color: rgba(255,255,255,.75); }
.bento-figure { font-size: 48px; line-height: 1; letter-spacing: var(--track); }
.bento-hero .bento-figure { font-size: 85px; line-height: .95; }
.bento-figure-label {
  font-size: 14px; line-height: 1.35; color: var(--ink-muted);
  margin-top: var(--s-xs); max-width: 34ch;
}
.bento-hero .bento-figure-label { font-size: 17px; color: rgba(255,255,255,.85); }
.bento-body {
  font-size: 15px; line-height: 1.4;
  color: rgba(255,255,255,.85);
  max-width: 54ch;
  margin-top: var(--s-lg);
}

.bento-light { background: var(--surface-1); color: var(--ink); box-shadow: var(--e-edge); }
.bento-light:hover { background: var(--surface-2); }
.bento-light .bento-figure { color: var(--ink); }

.bento-icon {
  position: relative; z-index: 2;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--ink);
  flex: none;
}
.bento-icon svg { width: 20px; height: 20px; }

.bento-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500; line-height: 1.05;
  letter-spacing: var(--track); color: inherit;
}
.bento-list { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-top: var(--s-md); }
.bento-list li {
  font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}

.bento-dark { background: var(--surface-2); color: var(--ink); justify-content: flex-end; box-shadow: var(--e-edge); }
.bento-figure-accent { color: var(--ink); }
.bento-ping { position: absolute; top: var(--s-lg); right: var(--s-lg); z-index: 2; width: 10px; height: 10px; }
.ping-wave, .ping-dot { position: absolute; inset: 0; border-radius: var(--r-full); }
.ping-wave { background: var(--success); opacity: .7; animation: bento-ping 2s cubic-bezier(0,0,.2,1) infinite; }
.ping-dot { background: var(--success); }
@keyframes bento-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* CTA-Karte: invertiert (weiße Fläche) — die große weiße Pille als Kachel */
.bento-cta { background: var(--primary); color: var(--on-primary); cursor: pointer; }
.bento-cta:hover { background: #ececec; }
.bento-cta-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-md); }
.bento-tag {
  font-size: 13px; font-weight: 500;
  background: rgba(0,0,0,.07);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}
.bento-arrow {
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--on-primary); color: var(--primary);
  display: grid; place-items: center; flex: none;
  transition: transform var(--t);
}
.bento-arrow svg { width: 18px; height: 18px; }
.bento-cta:hover .bento-arrow { transform: rotate(45deg); }
.bento-cta .bento-title { font-size: 34px; }
.bento-cta-sub { font-size: 14px; line-height: 1.4; color: rgba(0,0,0,.6); margin-top: var(--s-sm); }

/* CTA-Karte im Orange/Coral-Verlauf statt der weißen Pille */
.bento-cta-orange {
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(255,85,119,.95) 0%, rgba(255,85,119,0) 60%),
    linear-gradient(135deg, var(--gradient-orange) 0%, #e8452c 100%);
  color: var(--ink);
}
.bento-cta-orange:hover { background: linear-gradient(135deg, #ff8a52 0%, #f04f34 100%); }
.bento-cta-orange .bento-tag { background: rgba(0,0,0,.15); }
.bento-cta-orange .bento-arrow { background: rgba(0,0,0,.85); color: var(--ink); }
.bento-cta-orange .bento-cta-sub { color: rgba(255,255,255,.85); }

/* ---------------------------- TESTIMONIAL ------------------------------ */
/* Spotlight-Karte 2 von 2: Orange → Coral */
.testimonial {
  margin-top: var(--s-md);
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(255,85,119,.95) 0%, rgba(255,85,119,0) 60%),
    linear-gradient(135deg, var(--gradient-orange) 0%, #e8452c 100%);
  color: var(--ink);
  border-radius: var(--r-xxl);
  padding: var(--s-section) var(--s-section);
}
.testimonial-quote { font-size: 44px; line-height: 1.02; letter-spacing: var(--track); max-width: 22ch; }
.testimonial-by {
  display: flex; align-items: center; gap: var(--s-md);
  margin-top: var(--s-xxl);
  font-size: 14px; font-weight: 500;
}
.testimonial-avatar {
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: rgba(255,255,255,.25);
  border: 1px dashed rgba(255,255,255,.6);
  flex: none;
}
.testimonial-by strong { display: block; }
.testimonial-role { font-weight: 400; opacity: .82; }

/* ------------------------------ PARTNER -------------------------------- */
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); align-items: stretch; }
.partner {
  background: var(--surface-1);
  border-radius: var(--r-xl);
  box-shadow: var(--e-edge);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 8px;
}
.partner-photo { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.partner-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%;
}
.photo-flag {
  position: absolute; top: var(--s-sm); left: var(--s-sm);
  font-size: 12px; font-weight: 500;
  color: var(--ink);
  background: rgba(15,15,15,.65);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
.partner-body { padding: var(--s-lg) var(--s-md) var(--s-md); display: flex; flex-direction: column; flex: 1; }
.partner-name {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 500; line-height: 1.05; letter-spacing: var(--track);
  color: var(--ink);
}
.partner-role { font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-top: var(--s-xs); }
.partner-text { font-size: 15px; line-height: 1.4; color: var(--ink-muted); margin-top: var(--s-md); }
.partner-facts { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-top: auto; padding-top: var(--s-lg); }
.partner-facts li {
  font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}

.partners-note { margin-top: var(--s-xxl); padding-top: var(--s-xxl); border-top: 1px solid var(--hairline-soft); }
.partners-note-title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: var(--track);
  color: var(--ink); max-width: 30ch;
}
.partners-note-text { font-size: 17px; line-height: 1.4; color: var(--ink-muted); margin-top: var(--s-sm); max-width: 60ch; }
.people-foot { margin-top: var(--s-lg); font-size: 15px; font-weight: 500; color: var(--ink); }

/* -------------------------------- FIT ---------------------------------- */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.fit-col { background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--e-edge); padding: var(--s-xxl); }
.fit-title {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500; letter-spacing: var(--track); line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--s-lg);
}
.fit-title svg { width: 20px; height: 20px; color: var(--success); flex: none; }
.fit-col p { font-size: 16px; line-height: 1.45; color: var(--ink-muted); }
.fit-col p + p { margin-top: var(--s-md); }
.fit-col strong { color: var(--ink); font-weight: 600; }
.fit-plus { background: var(--surface-2); }
.fit-plus .fit-title { align-items: flex-start; margin-left: -4px; }

.fit-checklist { display: flex; flex-direction: column; gap: var(--s-sm); }
.fit-checklist li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.fit-checklist li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--success);
  border-bottom: 1.8px solid var(--success);
  transform: rotate(-45deg);
}

/* ----------------------------- SCROLL-VIDEO ----------------------------- */
.band-dark { background: var(--canvas); color: var(--ink); }
.scrollvid { background: var(--canvas); color: var(--ink); }
.scrollvid-stage {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
  display: flex; align-items: flex-start;
}
.scrollvid-media { position: absolute; inset: 0; z-index: 0; }
.scrollvid-poster, .scrollvid-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrollvid-video { opacity: 0; }
/* Nahtloser Übergang: keine Haarlinie unter dem Video, Bild 1px überstehend gegen Rundungsspalten. */
.scrollvid + section { border-top: 0; }
.scrollvid-media { bottom: -1px; }
.scrollvid.is-enhanced .scrollvid-video { opacity: 1; }
.scrollvid.is-enhanced .scrollvid-poster { visibility: hidden; }
.scrollvid-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(15,15,15,.94) 0%, rgba(15,15,15,.72) 28%, rgba(15,15,15,.25) 55%, rgba(15,15,15,0) 75%),
    linear-gradient(0deg, rgba(15,15,15,1) 0%, rgba(15,15,15,0) 25%),
    linear-gradient(180deg, rgba(15,15,15,1) 0%, rgba(15,15,15,0) 18%);
}
.scrollvid-copy { position: relative; z-index: 1; padding-top: calc(88px + var(--s-section)); }
.scrollvid-copy .section-title { color: var(--ink); max-width: 16ch; }
.scrollvid-accent { color: var(--mint); }
.scrollvid-sub { margin-top: var(--s-lg); max-width: 44ch; font-size: 18px; line-height: 1.35; color: rgba(255,255,255,.8); }

/* -------------------------------- TIERS --------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md); align-items: stretch; }
.tier {
  position: relative;
  background: var(--surface-1);
  border-radius: var(--r-xl);
  box-shadow: var(--e-edge);
  padding: var(--s-xl);
  display: flex; flex-direction: column;
}
/* Featured = eine Oberflächenstufe höher, keine farbige Kontur (DESIGN.md) */
.tier-featured { background: var(--surface-2); box-shadow: var(--e-float); }
.tier-flag {
  align-self: flex-start;
  background: var(--primary); color: var(--on-primary);
  font-size: 12px; font-weight: 500;
  border-radius: var(--r-pill); padding: 5px 11px;
  margin-bottom: var(--s-md);
}
.tier-name { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; color: var(--ink); }
.tier-price {
  font-size: 48px; line-height: 1; letter-spacing: var(--track);
  color: var(--ink);
  margin-top: var(--s-md);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-xs);
}
.tier-price-note { font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); }
.tier-lead { font-size: 15px; line-height: 1.4; color: var(--ink-muted); margin-top: var(--s-md); }
.tier-list {
  display: flex; flex-direction: column; gap: var(--s-sm);
  margin: var(--s-lg) 0 var(--s-xl);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--hairline);
}
.tier-list li { position: relative; padding-left: 26px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.tier-list li::before {
  content: ""; position: absolute; left: 2px; top: 5px;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--success);
  border-bottom: 1.8px solid var(--success);
  transform: rotate(-45deg);
}
.tier-list strong { color: var(--ink); }
.tier .btn { margin-top: auto; }
.tier-foot { font-size: 13px; color: var(--ink-muted); margin-top: var(--s-md); line-height: 1.4; }

/* -------------------------------- STEPS -------------------------------- */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.step {
  display: grid; grid-template-columns: 40px 1fr; gap: var(--s-lg); align-items: start;
  background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--e-edge);
  padding: var(--s-xl);
}
.step-num {
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600; font-feature-settings: "tnum";
  flex: none;
}
.step-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500; line-height: 1.05; letter-spacing: var(--track);
  color: var(--ink); margin-bottom: var(--s-sm);
}
.step p { font-size: 15px; line-height: 1.4; color: var(--ink-muted); }

.need-box {
  margin-top: var(--s-md);
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--r-xl);
  padding: var(--s-xl) var(--s-xxl);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-md) var(--s-xl);
}
.need-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500; letter-spacing: var(--track); flex: none;
}
.need-box p { font-size: 15px; line-height: 1.4; color: rgba(0,0,0,.65); max-width: 60ch; }

/* --------------------------------- FAQ --------------------------------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--hairline-soft); }
.faq-item {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline-soft);
  padding: var(--s-xl) 0;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
  font-family: var(--font-display);
  font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -0.03em;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Plus-Icon in einem Anthrazit-Kreis */
.faq-item summary::after {
  content: "+"; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--surface-1);
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 20px; font-weight: 400; line-height: 1;
  color: var(--ink);
  transition: transform var(--t), background-color var(--t);
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--surface-2); }
.faq-body { padding-top: var(--s-md); }
.faq-body p { font-size: 16px; line-height: 1.45; color: var(--ink-muted); max-width: 70ch; }

/* ------------------------------ CTA BAND ------------------------------- */
/* Kein Verlauf als Sektionsgrund (DESIGN.md) — reines Canvas, Formular als Karte. */
.cta-band {
  position: relative;
  background: var(--canvas);
  border-top: 1px solid var(--hairline-soft);
  color: var(--ink);
  padding-block: var(--s-hero);
}
.cta-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-section);
  align-items: start;
}
.cta-title { font-size: 85px; line-height: .95; letter-spacing: var(--track); color: var(--ink); }
.cta-sub { font-size: 18px; line-height: 1.35; color: var(--ink-muted); max-width: 44ch; margin-top: var(--s-xl); }
.cta-points { display: flex; flex-direction: column; gap: var(--s-sm); margin-top: var(--s-xxl); }
.cta-points li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 500; color: var(--ink); }
.cta-points li::before {
  content: ""; position: absolute; left: 2px; top: 5px;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--success);
  border-bottom: 1.8px solid var(--success);
  transform: rotate(-45deg);
}

.calendar-slot {
  margin-top: var(--s-xxl);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  background: var(--surface-1);
}
.slot-tag {
  display: inline-block;
  font-size: 12px; font-weight: 500;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 4px 10px; margin-bottom: var(--s-sm);
}
.calendar-slot p { font-size: 14px; line-height: 1.4; color: var(--ink-muted); }

/* -------------------------------- FORM --------------------------------- */
.form {
  background: var(--surface-1);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  box-shadow: var(--e-float);
  display: flex; flex-direction: column; gap: var(--s-md);
}
.form-title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: var(--track);
  color: var(--ink);
}
.form-sub { font-size: 14px; line-height: 1.4; color: var(--ink-muted); margin-top: -6px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink); }
.field .opt { color: var(--ink-muted); font-weight: 400; }

.field input, .field select, .field textarea {
  background: var(--surface-2);
  color: var(--ink);
  font-size: 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 10px 14px;
  transition: border-color var(--t), box-shadow var(--t);
}
.field input::placeholder, .field textarea::placeholder { color: #666; }
.field input, .field select { height: 44px; }
.field textarea { resize: vertical; min-height: 96px; line-height: 1.4; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(0,153,255,.18);
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--gradient-coral); }

.consent {
  display: flex; align-items: flex-start; gap: var(--s-sm);
  font-size: 13px; line-height: 1.4; color: var(--ink-muted);
  margin-top: var(--s-xxs);
}
.consent input { margin-top: 2px; accent-color: var(--accent-blue); width: 16px; height: 16px; flex: none; }
.consent a { color: var(--accent-blue); }
.consent a:hover { text-decoration: underline; }

.form-note { font-size: 12px; color: var(--ink-muted); text-align: center; }
.form-note.is-ok { color: var(--success); }
.form-note.is-err { color: var(--gradient-coral); }

/* ------------------------------- FOOTER -------------------------------- */
.site-footer { background: var(--canvas); border-top: 1px solid var(--hairline-soft); padding-top: 64px; }
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--s-xxl);
  padding-bottom: 64px;
}
.footer-brand .brand { margin-bottom: var(--s-md); }
.footer-brand .brand-logo { height: 22px; }
.footer-claim { font-size: 14px; font-weight: 500; color: var(--ink); }
.footer-loc { font-size: 13px; color: var(--ink-muted); margin-top: var(--s-xs); }

.footer-col { display: flex; flex-direction: column; gap: 2px; }
.footer-head { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: var(--s-xs); }
.footer-col a { font-size: 13px; font-weight: 500; color: var(--ink-muted); padding: 4px 0; transition: color var(--t); }
.footer-col a:hover { color: var(--ink); }

.footer-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-sm);
  padding-block: var(--s-lg);
  border-top: 1px solid var(--hairline-soft);
  font-size: 12px; color: var(--ink-muted);
}
.footer-note { font-size: 12px; }

/* ============================ RESPONSIVE =============================== */
@media (max-width: 1279px) {
  .hero-title { font-size: 72px; }
  .cta-title { font-size: 72px; }
  .bento-hero .bento-figure { font-size: 72px; }
  .split, .cta-grid { gap: var(--s-xxxl); }
}

@media (max-width: 1023px) {
  :root { --gutter: 24px; }
  html { scroll-padding-top: 80px; }

  .nav-desktop { display: none; }
  .nav-toggle { display: grid; }
  .nav-drawer:not([hidden]) { display: flex; }
  /* Tablet: Pille + Hamburger rechts; mobil nur Hamburger (Pille steckt im Drawer). */
  .header-actions { margin-left: auto; }

  .hero { padding-top: calc(64px + clamp(24px, 6vh, 64px)); }
  .hero-media img, .hero-media-video { object-position: 62% center; }
  .hero-title { font-size: 58px; max-width: 16ch; }
  .cta-title { font-size: 58px; }

  .split, .cta-grid { grid-template-columns: 1fr; gap: var(--s-xxl); }
  .split-left { position: static; }

  .stages { grid-template-columns: repeat(2, 1fr); }

  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
  .bento-hero { grid-column: span 2; grid-row: span 1; min-height: 440px; padding: var(--s-xl); }
  .bento-hero .bento-figure { font-size: 58px; }

  .feat--wide { flex-direction: column; }
  .feat--wide .feat-media { order: 0; flex: none; margin: 8px 8px 0; }
  .feat--wide .feat-text { padding: var(--s-xl); }
  .feat--wide .feat-title { font-size: 34px; }

  .tiers { grid-template-columns: 1fr; }
  .tier-featured { order: -1; }
  .steps { grid-template-columns: 1fr; }
  .logo-marquee { --logo-h: 28px; --logo-space: 28px; }

  .testimonial { padding: var(--s-xxl); }
  .testimonial-quote { font-size: 34px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s-xl); }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .header-actions .btn-primary { display: none; }
  .brand-logo { height: 15px; }
  .band { padding-block: var(--s-section); }
  /* Mobil: Video oben als eigener 4:3-Block, Inhalte darunter im normalen Fluss statt als Overlay.
     Proof-Bar und Logo-Laufband rutschen dadurch automatisch unter den Fold. */
  .hero {
    display: block;
    min-height: 0;
    overflow: visible;
    padding-top: 0;
    padding-bottom: var(--s-xxl);
  }
  .hero-media {
    position: relative; inset: auto;
    width: 100%; aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .hero-media img, .hero-media-video { object-position: 78% center; }
  /* Gleicher vertikaler Verlauf wie am Desktop: oben kurz & dunkler (Header-Lesbarkeit),
     unten länger & dunkler (Übergang in den Content-Bereich). */
  .hero-veil {
    background: linear-gradient(to top, rgba(15,15,15,1) 0%, rgba(15,15,15,.65) 35%, rgba(15,15,15,.15) 68%, rgba(15,15,15,.2) 84%, rgba(15,15,15,.55) 100%);
  }
  /* svh statt vh: bleibt stabil, auch wenn die Browser-Adressleiste beim Scrollen einklappt. */
  .hero-inner { margin-block: 0; padding-top: clamp(24px, 5svh, 40px); }
  /* Laufband folgt jetzt im normalen Fluss statt absolut am Viewport-Rand,
     damit es wie die Proof-Bar erst nach dem Scrollen erscheint. */
  .hero-logos { position: static; margin-top: var(--s-xxl); }

  .hero-title { font-size: 42px; }
  .hero-sub, .section-sub { font-size: 16px; }
  .section-title { font-size: 34px; }
  .cta-title { font-size: 46px; }
  .cta-band { padding-block: var(--s-section); }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  .proof-bar { gap: var(--s-sm); margin-top: var(--s-xxl); }
  .proof-value { font-size: 19px; }
  .proof-label { font-size: 11px; max-width: none; }
  .proof-source { font-size: 10px; }

  .stages, .feats, .fit-grid { grid-template-columns: 1fr; }
  .stage-title, .feat-title { font-size: 26px; }

  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: var(--s-sm); }
  .bento-card { padding: var(--s-lg); min-height: 240px; }
  .bento-hero { grid-column: span 1; min-height: 420px; padding: var(--s-lg); }
  .bento-hero .bento-figure { font-size: 52px; }
  .bento-figure { font-size: 40px; }
  .bento-figure-label, .bento-body { max-width: none; }
  .logo-marquee { --logo-h: 26px; --logo-space: 22px; }

  .field-row { grid-template-columns: 1fr; }
  .form, .fit-col, .tier { padding: var(--s-lg); }
  .partners { grid-template-columns: 1fr; }
  .partner-photo img { aspect-ratio: 16 / 9; }
  .partner-name, .partners-note-title { font-size: 28px; }

  /* Gleiches Prinzip wie beim mobilen Hero: Video oben als eigener 4:3-Block
     statt Vollbild-Hintergrund, Text darunter im normalen Fluss. */
  .scrollvid-stage {
    display: block; height: auto; min-height: 0;
    padding-bottom: var(--s-xxl);
  }
  .scrollvid-media {
    position: relative; inset: auto; bottom: auto;
    width: 100%; aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .scrollvid-shade {
    background: linear-gradient(to top, rgba(15,15,15,1) 0%, rgba(15,15,15,.65) 35%, rgba(15,15,15,.15) 68%, rgba(15,15,15,.2) 84%, rgba(15,15,15,.55) 100%);
  }
  /* 10% nach oben, damit der Text leicht über das Video geschoben wirkt statt nur knapp darunter zu kleben. */
  .scrollvid-copy { padding-top: var(--s-xxl); transform: translateY(-10%); }
  .scrollvid-sub { font-size: 16px; }

  .step { padding: var(--s-lg); gap: var(--s-md); }
  .step-title { font-size: 22px; }
  .need-box { flex-direction: column; gap: var(--s-xs); padding: var(--s-lg); }
  .faq-item summary { font-size: 19px; }

  .testimonial { padding: var(--s-xl); border-radius: var(--r-xl); }
  .testimonial-quote { font-size: 28px; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}

/* Niedrige Desktop-/Laptop-Screens: Hero verdichten, damit Laufband sichtbar bleibt. */
@media (min-width: 768px) and (max-height: 860px) {
  .hero-title { font-size: 62px; }
  .hero-sub { margin-top: var(--s-lg); }
  .hero-cta { margin-top: var(--s-xl); }
}
@media (min-width: 768px) and (max-height: 720px) {
  .hero-title { font-size: 50px; }
  .hero-sub { font-size: 16px; }
}

@media (max-width: 479px) {
  .hero-title { font-size: 38px; }
}

/* Bewusst keine max-height-Anpassungen mehr für den mobilen Hero-Text:
   Beim Scrollen blendet die Browser-Adressleiste aus, was die sichtbare
   Höhe vergrössert und diese Regeln sonst mitten im Scrollen neu greifen
   liessen -> Text sprang in der Grösse. Die neue Hero-Struktur braucht
   die Kompaktierung für niedrige Viewports ohnehin nicht mehr, da der
   Inhalt frei fliesst statt in eine feste Viewport-Höhe gepresst zu sein. */

/* ============================ GSAP-ANIMATIONEN ========================== */
/* Hero bis zum Intro-Start verstecken (Klasse nur mit JS + ohne Reduced Motion,
   mit Sicherheits-Timeout im <head>). */
.js-anim .hero-inner, .js-anim .hero-logos { visibility: hidden; }

/* Wort-Masken für die Überschriften (Polster, damit Umlaute/Unterlängen nicht abgeschnitten werden) */
.w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .12em 0 .14em; margin: -.12em 0 -.14em;
}
.w-i { display: inline-block; will-change: transform; }

/* Von GSAP bewegte Elemente: keine CSS-Transition auf transform/opacity (sonst ruckelt es) */
.gs-card { transition-property: background-color, box-shadow, border-color !important; }

/* Zahlen mit festen Ziffernbreiten, damit der Zähler nicht wackelt */
.proof-value, .bento-figure { font-variant-numeric: tabular-nums; }

/* Mint-Spotlight, das dem Cursor folgt (Position via --mx/--my aus animations.js) */
.has-spot { position: relative; }
.has-spot::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(124,235,203,.09), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
.has-spot:hover::after { opacity: 1; }
.bento-cta.has-spot::after { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(0,212,164,.14), transparent 60%); }

/* Kundenlogos: leichtes Anwachsen beim Überfahren */
.logo-item img { transition: opacity var(--t), transform .45s cubic-bezier(.2,.8,.2,1); }
.logo-item img:hover { transform: scale(1.08); }

/* ============================ NAVIGATION (7 Links) ====================== */
/* Nur solange die Desktop-Navigation sichtbar ist — darunter schiebt die
   Tablet/Mobil-Regel die Aktionen per margin-left:auto nach rechts. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-inner { gap: var(--s-lg); }
  .nav-desktop { gap: 2px; }
  .nav-desktop a { padding: 8px 9px; font-size: 13.5px; }
  .nav-desktop a.is-active::after { left: 9px; right: 9px; }
  .header-actions { margin-left: var(--s-xs); }
}

/* ============================ BUCHUNG (Calendly-Stil) =================== */
.booking {
  background: var(--surface-1);
  border-radius: var(--r-xl);
  box-shadow: var(--e-float);
  padding: var(--s-xl);
}
.booking .form { background: transparent; box-shadow: none; padding: 0; }
.bk-pick[hidden], .bk-form[hidden] { display: none; }

.bk-progress { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-bottom: var(--s-lg); }
.bk-progress li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-muted);
  padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: var(--canvas);
}
.bk-progress li span {
  width: 22px; height: 22px; border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-muted);
}
.bk-progress li.is-active { color: var(--ink); background: var(--surface-2); }
.bk-progress li.is-active span { background: var(--primary); color: var(--on-primary); }
.bk-progress li.is-done span { background: var(--mint-strong); color: var(--on-primary); }

.bk-meta { padding-bottom: var(--s-lg); margin-bottom: var(--s-lg); border-bottom: 1px solid var(--hairline); }
.bk-eyebrow { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.bk-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  letter-spacing: var(--track); line-height: 1.1; color: var(--ink); margin-top: 4px;
}
.bk-tz { font-size: 12px; color: var(--ink-muted); margin-top: 8px; }

.bk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-xl); }
.booking.has-day .bk-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

.bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-sm); }
.bk-month { font-size: 15px; font-weight: 600; color: var(--ink); }
.bk-nav {
  width: 36px; height: 36px; border-radius: var(--r-full); border: 0;
  background: var(--surface-2); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background-color var(--t), opacity var(--t);
}
.bk-nav:hover:not(:disabled) { background: #2a2a2a; }
.bk-nav:disabled { opacity: .3; cursor: default; }

.bk-dow, .bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.bk-dow { margin-bottom: 6px; }
.bk-dow span { font-size: 11px; font-weight: 500; color: var(--ink-muted); padding: 4px 0; }
.bk-day {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 46px; justify-self: center;
  border: 0; border-radius: var(--r-full);
  background: transparent; color: #5a5a5a;
  font-size: 14px; font-weight: 500; font-feature-settings: "tnum";
  transition: background-color var(--t), color var(--t);
}
.bk-day:not(:disabled) {
  background: rgba(0,212,164,.1); color: var(--mint); font-weight: 600; cursor: pointer;
}
.bk-day:not(:disabled):hover { background: rgba(0,212,164,.22); }
.bk-day.is-selected, .bk-day.is-selected:hover { background: var(--mint-strong); color: var(--on-primary); }
.bk-day.is-today::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: currentColor;
}

.bk-times { display: none; }
.booking.has-day .bk-times { display: block; }
.bk-day-label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: var(--s-sm); }
.bk-slots {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 330px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.bk-slot { display: flex; gap: 8px; }
.bk-time, .bk-go {
  flex: 1; min-height: 44px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t), flex-basis var(--t);
}
.bk-time { background: transparent; color: var(--mint); border: 1px solid rgba(0,212,164,.45); }
.bk-time:hover { border-color: var(--mint-strong); background: rgba(0,212,164,.08); }
.bk-slot.is-selected .bk-time { background: #3a3a3a; color: var(--ink); border-color: #3a3a3a; }
.bk-go { background: var(--mint-strong); color: var(--on-primary); border: 0; }
.bk-go:hover { opacity: .88; }

.bk-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
  padding: 12px 15px; border-radius: var(--r-md);
  background: rgba(0,212,164,.08); border: 1px solid rgba(0,212,164,.3);
  margin-bottom: var(--s-xs);
}
.bk-summary-label { font-size: 12px; color: var(--ink-muted); }
.bk-summary-value { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.bk-change {
  flex: none; background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--mint); text-decoration: underline; text-underline-offset: 3px;
}
.bk-noscript { font-size: 14px; color: var(--ink-muted); }

@media (max-width: 767px) {
  .booking { padding: var(--s-lg); }
  .booking.has-day .bk-body { grid-template-columns: minmax(0, 1fr); }
  .bk-slots { max-height: none; }
}