/* ============================================================
   Outlead Studio — Design-System (verbindlich: DESIGN.md)
   Brand: MP072-Palette · Feel: dunkler Instrument-Raum
   Glas-Sprache (Log #17) · Atmosphäre (Log #18)
   ============================================================ */

:root {
  /* Farben — Brand (MP072) */
  --abyssal: #1B2632;
  --abyssal-deep: #151E28;
  --blue-fantastic: #2C3B4D;
  --palladian: #EEE9DF;
  --oatmeal: #C9C1B1;
  --burning-flame: #F2A263;
  --burning-flame-hover: #F7B57E;
  --truffle: #A35139;
  /* Facetten-Palette aus dem Logo (Log #24) — nur für kleine geometrische Marker */
  --facet-pale: #F0AC70;
  --facet-sand: #E79A5D;
  --facet-mid: #D97F42;
  --facet-deep: #C56A38;
  --facet-dark: #8E4630;
  --ink: #1B2632;
  --ink-muted: rgba(27, 38, 50, .74);
  --ink-faint: rgba(27, 38, 50, .55);
  --hairline: rgba(238, 233, 223, .14);
  --hairline-strong: rgba(238, 233, 223, .28);

  /* Typo */
  --font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Jost', 'IBM Plex Mono', ui-monospace, sans-serif; /* seit 07.07. abends: Jost ersetzt Plex Mono in allen Label-Rollen (Daisy) */

  /* Layout */
  --maxw: 1160px;
  --section-gap: 56px; /* 07.07. spät (Daisy): Leerraum an allen Umbruch-Linien einheitlich = Hero-Übergang (56/56), vorher 112 */

  /* Radii (DESIGN §4; Buttons seit Log #28 als Rounded-Rects nach CTA-Inspo) */
  --radius-btn: 14px;
  --radius-input: 10px;
  --radius-badge: 4px;
  --radius-card: 14px;
  --radius-panel: 20px;

  /* Glas-Sprache (Log #17, verfeinert #22 — leichter, moderner) */
  --glass-fill: linear-gradient(165deg, rgba(238, 233, 223, .045), rgba(238, 233, 223, .012) 55%, rgba(44, 59, 77, .10));
  --glass-edge: rgba(238, 233, 223, .10);
  --glass-highlight: inset 0 1px 0 rgba(238, 233, 223, .09);
  --glass-halo: 0 18px 40px -26px rgba(4, 9, 15, .55);
  --light-halo: inset 0 1px 0 rgba(255, 255, 255, .5), 0 24px 48px -28px rgba(4, 9, 15, .7);

  /* Motion (DESIGN §7 — mechanisch; §7b Reveals gleiten aus, Log #45) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.18s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--abyssal);
  /* Atmosphäre (Log #18): dunkler Verlauf + zwei dezente Glows als Raumlicht */
  background-image:
    radial-gradient(900px 560px at 88% -12%, rgba(242, 162, 99, .10), transparent 62%),
    radial-gradient(1100px 720px at -14% 106%, rgba(163, 81, 57, .08), transparent 60%),
    linear-gradient(180deg, #16202B 0%, #1B2632 45%, #17212D 100%);
  background-attachment: fixed;
  color: var(--palladian);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { padding: var(--section-gap) 0; }
[id] { scroll-margin-top: 78px; }

h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--palladian); }
body { text-wrap: pretty; } /* erbt auf alle Textelemente — keine hässlichen Einzelwort-Umbrüche */
h1, h2, h3, h4, .kicker, .rr-unit { text-wrap: balance; }
h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 600; }
h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -0.012em; font-weight: 600; }
h3 { font-size: 24px; line-height: 1.25; letter-spacing: -0.005em; font-weight: 500; }
p, li, summary, figcaption, .ans, .tile-cap, .quote-pending, .by, .trust, .reassure { text-wrap: pretty; }
p  { color: var(--oatmeal); max-width: 60ch; }
p b, p strong { color: var(--palladian); font-weight: 600; }
a  { color: inherit; }
::selection { background: var(--burning-flame); color: var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--burning-flame);
  outline-offset: 3px;
  border-radius: var(--radius-badge);
}

/* --- Instrument-Stimme: Kicker / Mono-Labels ------------------ */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); /* Jost — Inter-Test 08.07. verworfen (schlechter lesbar) */
  font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--burning-flame);
}
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; flex: 0 0 auto; }

.mono-label {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--oatmeal);
}

/* Sektions-Kopf: Kicker → H2 → optionales Intro */
.sec-head .kicker + h2 { margin-top: 22px; } /* = Hero-Abstand Kicker→H1 (Daisy 07.07.) */
.sec-head h2 { max-width: 26ch; }
.sec-head .sec-intro { margin-top: 14px; font-size: 18px; max-width: none; } /* volle Breite (Daisy 08.07.), globales p-60ch gilt hier nicht */
#methode .sec-head h2 { max-width: none; } /* Zeilenfall fix via br.lb: „…dein" ⏎ „System für warme Leads und Termine." (Daisy 08.07.) */
#warum .sec-head h2 { max-width: none; } /* „Wir füllen die Pipeline. Dein Team schließt ab." einzeilig am Desktop (Daisy 10.07.) */

/* Facetten-Hintergrund (wie #problem, Fokus rechts unten) auch in „So funktioniert's" + „Warum Outlead" (Daisy 10.07.) */
#methode, #warum { position: relative; overflow: hidden; }
#methode::after, #warum::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(70% 95% at 96% 4%, rgba(242, 162, 99, .055) 0%, rgba(217, 127, 66, .03) 34%, rgba(163, 81, 57, .015) 55%, transparent 75%),
    url("assets/tri-facets.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top right, top right;
  background-size: auto, 2688px 1164px;
  -webkit-mask-image: radial-gradient(103% 150% at 100% 0%, #000 0%, rgba(0, 0, 0, .42) 38%, transparent 84%);
  mask-image: radial-gradient(103% 150% at 100% 0%, #000 0%, rgba(0, 0, 0, .42) 38%, transparent 84%);
  opacity: .5;
  pointer-events: none;
}
#methode .wrap, #warum .wrap { position: relative; z-index: 1; }

/* --- Platzhalter-Markierung (NIE live!) ----------------------- */
.ph {
  display: inline; padding: 1px 8px;
  border: 1px dashed var(--burning-flame);
  border-radius: var(--radius-badge);
  background: rgba(242, 162, 99, .08);
  color: var(--burning-flame);
  font-family: var(--font-mono); font-size: .82em; font-weight: 400;
  letter-spacing: 0; text-transform: none;
}

/* --- Buttons (weiche Chips ohne Rahmen, Log #27 — Inspo Metric-Badges) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-sans); font-weight: 500; font-size: 15.5px;
  letter-spacing: -0.008em;
  border-radius: var(--radius-btn);
  padding: 12px 24px;
  text-decoration: none; cursor: pointer;
  border: none; box-shadow: none; outline: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--burning-flame); outline-offset: 3px; }
.btn-primary {
  background: var(--burning-flame); color: var(--ink);
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(242, 162, 99, .55);
}
.btn-primary:hover {
  background: var(--burning-flame-hover);
  box-shadow: 0 12px 34px -10px rgba(242, 162, 99, .65);
}
.btn .arr { transition: transform var(--dur) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-ghost {
  background: rgba(238, 233, 223, .10);
  color: var(--palladian);
}
.btn-ghost:hover { background: rgba(238, 233, 223, .15); }
.btn-on-light { background: var(--ink); color: var(--palladian); }
.btn-on-light:hover { background: #26364a; }

/* --- Header (DESIGN §5 Nav) ------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(27, 38, 50, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid transparent;
  transition: border-color .25s var(--ease);
}
header.site.scrolled { border-color: var(--hairline); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand {
  display: inline-flex; align-items: center;
  font-family: 'Barlow Logo', var(--font-sans); font-weight: 500; font-size: 16px;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; color: var(--palladian);
}
.brand .dot { color: var(--burning-flame); }
.brand-mark { height: 24px; width: auto; display: block; flex: 0 0 auto; margin-right: 7px; }
.foot-brand .brand-mark { height: 24px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--oatmeal); font-size: 14px; font-weight: 400;
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--palladian); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.header-cta { padding: 8px 18px; font-size: 14px; }

/* --- Hero --------------------------------------------------------- */
.hero { --hero-pb: 56px; padding: 96px 0 var(--hero-pb); position: relative; overflow: hidden; }
.hero::before { /* Brand-Glow — rechts hinter der Kachel, nie über der Textspalte */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(46% 60% at 84% 28%, rgba(242, 162, 99, .09), transparent 68%);
  pointer-events: none;
}
.hero::after { /* Facetten-Fläche (Log #36): am Rand nur Umrisse, Farb-Fills verdichten sich zur rechten oberen Ecke */
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(70% 95% at 96% 4%, rgba(242, 162, 99, .055) 0%, rgba(217, 127, 66, .03) 34%, rgba(163, 81, 57, .015) 55%, transparent 75%),
    url("assets/tri-facets.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top right, top right;
  background-size: auto, 2688px 1164px;
  /* Muster-Start ca. bei „Neukundengewinnung" bzw. „ohne dass" — weich zur Ecke verdichtend */
  -webkit-mask-image: radial-gradient(103% 150% at 100% 0%, #000 0%, rgba(0, 0, 0, .42) 38%, transparent 84%);
  mask-image: radial-gradient(103% 150% at 100% 0%, #000 0%, rgba(0, 0, 0, .42) 38%, transparent 84%);
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.32fr .68fr; gap: 40px;
  align-items: stretch; position: relative; z-index: 1;
}
.hero .kicker {
  /* Jost (geometrische Sans, self-hosted) — minimalistischere, elegantere All-Caps (Daisy 07.07.) */
  font-family: 'Jost', var(--font-sans);
  font-size: 14.5px; font-weight: 500;
  letter-spacing: .16em; word-spacing: normal;
}
.hero h1 {
  margin-top: 22px;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.012em; word-spacing: 0.02em;
  line-height: 1.22;
  width: max-content; max-width: none;
}
.hero .sub {
  /* Referenz-Proportion (branding/DESIGN*.md): Subs 16–21px absolut, Median 18 — bei 52px-H1 → 19px */
  font-size: clamp(17px, 1.35vw, 19px); line-height: 1.48; margin-top: 24px;
  max-width: 36em;
}
/* Feste Zeilenfälle nur auf Desktop — Mobile bricht natürlich (pretty) */
.lb { display: none; }
@media (min-width: 941px) { .lb { display: inline; } }
@media (max-width: 940px) {
  .hero .sub { font-size: 19px; max-width: 56ch; }
  /* 27.07.2026: width:max-content (fixer Desktop-Zeilenfall) schnitt die H1 auf
     Mobile ab („Planbar Termine im Kal…") — mobil bricht sie natürlich */
  .hero h1 { width: auto; }
}
.hero-cta { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-micro { margin-top: 16px; font-size: 15px; color: var(--oatmeal); max-width: 52ch; line-height: 1.5; }
.proof-anchor {
  margin-top: 34px; padding-top: 22px; border-top: 0.5px solid var(--hairline);
  display: flex; align-items: baseline; gap: 10px;
  font-size: 15.5px; color: var(--oatmeal); max-width: 48ch;
}
.proof-anchor .tick { color: var(--burning-flame); font-size: .8rem; }
.proof-anchor b { color: var(--palladian); }

/* Instrument-Kachel (Hero-Chart, Potenzial-Schema) — Glas */
.tile {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  padding: 24px 24px 18px;
  box-shadow: var(--glass-highlight), var(--glass-halo);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tile svg { display: block; width: 100%; height: auto; }
.tile-cap {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 16px; padding-top: 14px; border-top: 0.5px solid var(--hairline);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--oatmeal); text-align: center;
}
.tile-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--burning-flame); flex: 0 0 auto; }

.dash { stroke-dasharray: 460; stroke-dashoffset: 460; animation: draw 1.6s .25s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- Bänder (leicht abgesetzte Full-bleed-Sektionen) --------------- */
.band {
  background: rgba(11, 17, 24, .34);
  border-top: 0.5px solid rgba(238, 233, 223, .05);
  border-bottom: 0.5px solid rgba(238, 233, 223, .05);
}

/* --- Glow-Ergebnis-Banner (nach Hero) -------------------------------- */
.glow-banner { border-bottom: none; padding: 80px 0; }
.glow-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 0; align-items: start; }
.glow-grid > .reveal { align-self: start; } /* kürzeres v2-Dashboard oben bündig, Copy-Karte bleibt zentriert */
.proof-shot.glow-shot { max-width: none; margin-top: 0; }
.glow-shot .glow-dash { display: block; width: 100%; height: auto; }
.glow-copy {
  position: relative; z-index: 2;
  margin-left: -40px; margin-right: 0; /* Karte ragt leicht über das Dashboard, rechtsbündig mit dem Raster */
  margin-top: 10.4%; /* Oberkante auf Höhe des (entfernten) 90-Tage-Chips im Dashboard-Bild (y≈150/2880-Crop, umgerechnet auf Spaltenbreite) */
  background: rgba(16, 24, 32, .78);
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  box-shadow: var(--glass-highlight), var(--glass-halo), 0 0 44px rgba(242, 162, 99, .11); /* ganz leichter Amber-Glow */
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 29px 30px 31px;
}
.client-word {
  font-family: var(--font-sans); font-size: 17.5px; font-weight: 600;
  line-height: 1; letter-spacing: -0.01em; color: var(--palladian);
}
/* Zwei Testimonial-Bänder: nahtlos (keine Trennlinie) + eng verzahnt.
   Abstände an den Umbruch-Linien symmetrisch (Daisy 07.07.):
   Hero-Unterkante 56px | 56px Band-Oberkante · Band-Unterkante 112px | 112px ROI-Sektion */
#glow-ergebnis { padding-top: 56px; padding-bottom: 20px; }
#catapult-ergebnis { border-top: none; padding-top: 20px; padding-bottom: 56px; border-bottom: 0.5px solid rgba(238, 233, 223, .05); } /* Band-Linie zurück, da Kennst-du-das jetzt hell ist */
/* Catapult gespiegelt: Karte links (bündig am Raster), Dashboard rechts.
   Versetzung = exakt gespiegeltes Glow-Verhältnis: Karte ragt nach OBEN raus —
   Unterkante sitzt 18,3 % der Bildhöhe über der Dashboard-Unterkante
   (= 10,4 % Spaltenbreite Offset im Glow-Band, nur vertikal gespiegelt). */
#catapult-ergebnis .glow-grid { grid-template-columns: 1fr 2fr; position: relative; }
#catapult-ergebnis .glow-grid > .reveal { grid-column: 2; }
#catapult-ergebnis .glow-copy {
  position: absolute; left: 28px; bottom: 18.9%; /* rekalibriert auf 2880×786-Crop */
  width: calc((100% - 56px) / 3 + 40px);
  margin: 0;
}
#catapult-ergebnis .glow-head { justify-content: flex-end; } /* ohne Lead-in bleibt das Logo rechts */
.glow-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.glow-logo { display: block; width: min(146px, 38%); height: auto; margin-bottom: 3px; /* Baseline-Ausgleich zum Text */ }
.glow-lead {
  font-family: var(--font-sans); font-size: 17.5px; font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em; color: var(--burning-flame); max-width: none;
}
.glow-list { list-style: none; margin-top: 12px; }
.glow-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 0.5px solid var(--hairline);
  font-size: 15.5px; color: var(--palladian);
}
.glow-list .mk {
  flex: 0 0 auto; width: 10px; height: 9px; transform: translateY(-1px);
  background: var(--burning-flame);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.glow-metric { margin-top: 19px; max-width: none; }
.glow-metric .num {
  display: block;
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(32px, 3vw, 44px); line-height: 1; letter-spacing: -0.02em;
  color: var(--burning-flame);
}
.glow-metric .unit {
  display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--oatmeal);
}
@media (max-width: 940px) {
  .glow-grid { grid-template-columns: 1fr; gap: 0; }
  .glow-copy { margin-left: 20px; margin-right: 20px; margin-top: -44px; }
  /* Catapult: gestapelt wieder Dashboard zuerst, Karte ragt von unten rein */
  #catapult-ergebnis .glow-grid { grid-template-columns: 1fr; }
  #catapult-ergebnis .glow-grid > .reveal { grid-column: auto; }
  #catapult-ergebnis .glow-copy { position: static; width: auto; margin: -44px 20px 0; }
}

/* Glow-Animationen (einmalig beim Einscrollen).
   Versteckt wird NUR unter .ganim — die Klasse setzt das aktuelle site.js beim Init.
   Ohne (oder mit gecachtem) JS bleibt die Sektion vollständig sichtbar. */
.glow-banner.ganim .glow-head,
.glow-banner.ganim .glow-list li,
.glow-banner.ganim .glow-metric {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s cubic-bezier(0.22, 1, 0.36, 1), transform .7s cubic-bezier(0.22, 1, 0.36, 1);
}
.glow-banner.ganim.gin .glow-head { opacity: 1; transform: none; }
.glow-banner.ganim.gin .glow-list li:nth-child(1) { opacity: 1; transform: none; transition-delay: 140ms; }
.glow-banner.ganim.gin .glow-list li:nth-child(2) { opacity: 1; transform: none; transition-delay: 260ms; }
.glow-banner.ganim.gin .glow-metric { opacity: 1; transform: none; transition-delay: 420ms; }
.glow-shot .redline { position: relative; overflow: hidden; }
.glow-shot .redline::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(238, 233, 223, .12), transparent);
}
.glow-banner.ganim.gin .glow-shot .redline::after { animation: gsweep 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.glow-banner.ganim.gin .glow-shot .redline:nth-child(2)::after { animation-delay: 100ms; }
.glow-banner.ganim.gin .glow-shot .redline:nth-child(3)::after { animation-delay: 200ms; }
.glow-banner.ganim.gin .glow-shot .redline:nth-child(4)::after { animation-delay: 300ms; }
.glow-banner.ganim.gin .glow-shot .redline:nth-child(5)::after { animation-delay: 400ms; }
.glow-banner.ganim.gin .glow-shot .redline:nth-child(6)::after { animation-delay: 500ms; }
@keyframes gsweep { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  .glow-banner.ganim .glow-head, .glow-banner.ganim .glow-list li, .glow-banner.ganim .glow-metric {
    opacity: 1; transform: none; transition: none;
  }
  .glow-banner.ganim.gin .glow-shot .redline::after { animation: none; }
}

/* --- Problem-Spiegel ------------------------------------------------ */
#problem { position: relative; overflow: hidden; }
#problem::after {
  /* Facetten-Flaeche wie im Hero, vertikal gespiegelt: Fokus rechts UNTEN */
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(70% 95% at 96% 4%, rgba(242, 162, 99, .055) 0%, rgba(217, 127, 66, .03) 34%, rgba(163, 81, 57, .015) 55%, transparent 75%),
    url("assets/tri-facets.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top right, top right;
  background-size: auto, 2688px 1164px;
  -webkit-mask-image: radial-gradient(103% 150% at 100% 0%, #000 0%, rgba(0, 0, 0, .42) 38%, transparent 84%);
  mask-image: radial-gradient(103% 150% at 100% 0%, #000 0%, rgba(0, 0, 0, .42) 38%, transparent 84%);
  transform: scaleY(-1);
  opacity: .5; /* dezenter als im Hero (Daisy 07.07.) */
  pointer-events: none;
}
#problem .wrap { position: relative; z-index: 1; }
.problem-head { max-width: 20ch; }
.problem-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; list-style: none; }
.problem-grid li {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--glass-highlight), var(--glass-halo);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}
/* Hover-Spotlight: Glow + Rahmen-Highlight folgen der Mausposition (--mx/--my aus site.js),
   weich ein-/ausgeblendet statt hartem Wechsel */
.problem-grid li > * { position: relative; z-index: 1; }
.problem-grid li::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(242, 162, 99, .09), rgba(217, 127, 66, .045) 45%, rgba(163, 81, 57, .02) 65%, transparent 75%);
  opacity: 0; transition: opacity .25s var(--ease);
  pointer-events: none;
}
.problem-grid li:hover::after { opacity: 1; }
.problem-grid li::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 0;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(242, 162, 99, .45), rgba(163, 81, 57, .16) 50%, transparent 78%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0; transition: opacity .25s var(--ease);
  pointer-events: none;
}
.problem-grid li:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .problem-grid li::before, .problem-grid li::after { transition: none; }
}
.problem-grid .mk {
  flex: 0 0 auto; width: 11px; height: 10px; margin-top: 9px;
  background: var(--burning-flame);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.problem-grid li:nth-child(1) .mk { background: var(--facet-pale); }
.problem-grid li:nth-child(2) .mk { background: var(--burning-flame); }
.problem-grid li:nth-child(3) .mk { background: var(--facet-mid); }
.problem-grid li:nth-child(4) .mk { background: var(--facet-deep); }
.problem-grid p { font-size: 17px; }

/* --- Kundenstimmen v4 (09.07.) — 3 Karten nebeneinander: Foto + Zitat + 3 Highlights */
#stimmen .cases {
  margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
.case-card2 {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-panel);
  padding: 22px;
  box-shadow: var(--glass-highlight), var(--glass-halo);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* Foto */
.case-photo {
  position: relative; width: 100%; aspect-ratio: 4/3;
  border-radius: 14px; overflow: hidden; background: #1D2937;
}
.case-photo > img:first-child {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(1.22) translate(-5%, 9%); transform-origin: 50% 50%; display: block;
}
/* Bereits auf 4:3 vorgeschnittene Fotos: kein generischer Zoom nötig */
#stimmen .case-photo > img.is-fitted {
  transform: none; object-position: 50% 50%;
}
.case-photo.is-placeholder {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 30% 12%, rgba(242,162,99,.16), transparent 60%),
    linear-gradient(155deg, #22303e, #1a2531);
  border: 1px solid var(--glass-edge);
}
.case-photo.is-placeholder > span {
  font-family: var(--font-sans); font-weight: 600; font-size: 52px;
  letter-spacing: -0.02em; color: var(--burning-flame); opacity: .82;
}

/* Name / Org + Logo rechts */
.case-who { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.case-who .case-name { display: flex; flex-direction: column; gap: 2px; }
.case-who .q-name {
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--palladian);
}
.case-who .q-org {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--oatmeal);
}
.case-who .case-logo { flex: 0 0 auto; height: 20px; width: auto; opacity: .9; }
.case-who .case-logo--stack { height: 40px; }
.case-who .case-logo--wide { height: 36px; }

/* Zitat */
.case-card2 blockquote {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 16.5px; line-height: 1.45; letter-spacing: -0.006em;
  color: var(--palladian);
}

/* 1 Highlight — große Kennzahl */
.case-highlights {
  margin-top: auto; padding-top: 18px;
  border-top: 0.5px solid var(--hairline);
}
.case-highlights .hl { display: flex; flex-direction: column; gap: 6px; }
.case-highlights .hl b {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(30px, 3vw, 38px); line-height: 1; letter-spacing: -0.02em;
  color: var(--burning-flame);
}
.case-highlights .hl span {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--oatmeal); line-height: 1.35;
}

@media (max-width: 860px) {
  #stimmen .cases { grid-template-columns: 1fr; gap: 20px; max-width: 520px; margin-inline: auto; }
  .case-photo { aspect-ratio: 16/9; }
}

/* --- Einwand-Block: Prüfstand v4 (Log #47) — Sticky-Rail + Kanal-Index ---
   Links bleibt der Sektionskopf mit Kanal-Index stehen (Scrollspy markiert den
   gelesenen Kanal), rechts laufen die Einträge als ruhige Spec-Sheet-Zeilen.
   Keine Schema-Kurven mehr (ersetzt #46), keine Chips (#43), keine Nummern (#44). */
.objection-layout {
  display: grid; grid-template-columns: minmax(300px, .82fr) 1.3fr;
  gap: clamp(48px, 7vw, 104px); align-items: start;
}
.objection-rail { position: sticky; top: 92px; }
.objection .sec-head h2 { max-width: 20ch; }
.kanal-index { margin-top: 40px; display: flex; flex-direction: column; }
.kanal-index a {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 0; text-decoration: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(201, 193, 177, .58);
  transition: color var(--dur) var(--ease);
}
.kanal-index .mk {
  flex: 0 0 auto; width: 9px; height: 8px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--hairline-strong);
  opacity: .55;
  transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Facetten-Farben je Kanal (Log #48) — gleiche Reihenfolge wie die Labels rechts */
.kanal-index a:nth-child(1) .mk { background: var(--facet-pale); }
.kanal-index a:nth-child(2) .mk { background: var(--facet-sand); }
.kanal-index a:nth-child(3) .mk { background: var(--burning-flame); }
.kanal-index a:nth-child(4) .mk { background: var(--facet-mid); }
.kanal-index a:hover { color: var(--palladian); }
.kanal-index a:hover .mk { opacity: 1; }
.kanal-index a.active { color: var(--palladian); }
.kanal-index a.active .mk { opacity: 1; box-shadow: 0 0 8px rgba(242, 162, 99, .55); }

.pruefstand { border-top: 0.5px solid var(--hairline); margin-top: 18.5px; /* Hairline fluchtet mit der Kicker-Linie links (Log #49) */ }
.pruef-row { padding: 38px 0 42px; border-bottom: 0.5px solid var(--hairline); }
.pruef-name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(201, 193, 177, .62);
}
/* Kanal-Labels in Facetten-Tönen (Log #48) — hell → tief wie die Logo-Facetten;
   alle ≥5:1 auf Abyssal (facet-deep/-dark bewusst ausgelassen, zu dunkel für 12px) */
.pruefstand .pruef-row:nth-of-type(1) .pruef-name { color: var(--facet-pale); }
.pruefstand .pruef-row:nth-of-type(2) .pruef-name { color: var(--facet-sand); }
.pruefstand .pruef-row:nth-of-type(3) .pruef-name { color: var(--burning-flame); }
.pruefstand .pruef-row:nth-of-type(4) .pruef-name { color: var(--facet-mid); }
.pruef-row h3 { margin-top: 14px; color: var(--palladian); }
.pruef-row p { margin-top: 14px; max-width: 58ch; }
.objection-note {
  margin-top: 44px; font-size: clamp(19px, 2vw, 22px); line-height: 1.4;
  color: var(--palladian); max-width: 52ch;
  font-family: var(--font-sans); letter-spacing: -0.014em; font-weight: 500;
}
@media (max-width: 940px) {
  .objection-layout { grid-template-columns: 1fr; gap: 36px; }
  .objection-rail { position: static; }
  .kanal-index { display: none; } /* gestapelt direkt lesbar — Index wäre redundant */
  .pruefstand { margin-top: 0; } /* Flucht-Offset nur nebeneinander sinnvoll */
  .pruef-row { padding: 28px 0 32px; }
}

/* Beweis-Screenshot-Rahmen (Altitude-Fenster) — genutzt von den Dashboard-Figuren.
   Die Platzhalter-Innereien (.bar/.redline/.reply) wurden mit dem Mail-Screenshot
   aus dem Einwand-Block entfernt (Kanal-Direktive, 08.07.2026). */
.proof-shot {
  margin-top: 24px; border: 1px solid var(--glass-edge);
  border-radius: 12px; overflow: hidden; background: var(--glass-fill);
  box-shadow: var(--glass-highlight), var(--glass-halo);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  max-width: 560px;
}

/* --- Methode / Outlead Engine: Flow v3 (Log #51, ersetzt Zeilen-Layout #50) ---
   Wieder nebeneinander (Daisy: „viel übersichtlicher") — 5 Spalten, breakpoint-frei
   via auto-fit. Behalten aus #50: Facetten-Nummern-Progression + „Dein Part"-Meta
   (ein Gespräch → nichts → nichts → terminieren, closen → nichts). */
.flow {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px;
}
.flow .node {
  display: flex; flex-direction: column;
  border-top: 0.5px solid var(--hairline); padding-top: 18px;
}
.flow .node .ic {
  font-family: var(--font-mono); font-size: 24px; font-weight: 500;
  letter-spacing: .04em; line-height: 1.1;
}
/* Facetten-Progression hell → tief (24px = Large Text, alle ≥3:1 auf Abyssal) */
.flow .node:nth-child(1) .ic { color: var(--facet-pale); }
.flow .node:nth-child(2) .ic { color: var(--facet-sand); }
.flow .node:nth-child(3) .ic { color: var(--burning-flame); }
.flow .node:nth-child(4) .ic { color: var(--facet-mid); }
.flow .node:nth-child(5) .ic { color: var(--facet-deep); }
.flow .node h4 { font-size: 17px; font-weight: 500; letter-spacing: 0; margin-top: 12px; }
.flow .node p { font-size: 15px; line-height: 1.55; margin-top: 8px; }
.flow-note {
  margin-top: 48px; font-size: clamp(19px, 2vw, 22px); line-height: 1.4;
  color: var(--palladian); max-width: none; /* volle Breite — globales p-60ch explizit aufgehoben (Daisy 08.07.) */
  font-family: var(--font-sans); letter-spacing: -0.014em; font-weight: 500;
}
.flow-note b { font-weight: 600; }

/* --- Fallstudien (helle Beweis-Karten — das Spotlight) --------------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.case {
  display: flex; flex-direction: column;
  background: var(--palladian); color: var(--ink);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--light-halo);
}
.case .ch {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 0.5px solid rgba(27, 38, 50, .14);
}
.case .tagline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--truffle); }
.case .client { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.case .res { margin-top: 28px; color: var(--ink); max-width: none; }
.case .res .metric-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--truffle); margin-bottom: 8px;
}
.case .res .metric {
  display: block; font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(38px, 4vw, 52px); line-height: 1; letter-spacing: -0.02em;
}
.case .res .metric-sub {
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--truffle); line-height: 1.6;
}
.case .body { margin-top: 20px; color: var(--ink-muted); font-size: 16.5px; max-width: 58ch; }
.case .quote { font-size: 18px; color: var(--ink); margin-top: 26px; line-height: 1.5; font-style: italic; }
.case .by { margin-top: 12px; font-size: 14px; color: var(--ink-faint); font-weight: 500; }
.case .ph { background: rgba(163, 81, 57, .08); border-color: var(--truffle); color: var(--truffle); }
.quote-pending {
  display: block; margin-top: auto; padding: 16px 18px;
  border: 1px dashed var(--truffle); border-radius: var(--radius-badge);
  background: rgba(163, 81, 57, .07);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em;
  color: var(--truffle); line-height: 1.5;
}
.case .body + .quote-pending { margin-top: 28px; }
.quote-pending .qp-tag { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }

/* --- DFY-Prozess ------------------------------------------------------ */
.steps { margin-top: 48px; border-top: 0.5px solid var(--hairline); }
.step { display: grid; grid-template-columns: 84px 1fr; gap: 28px; padding: 32px 0; border-bottom: 0.5px solid var(--hairline); align-items: baseline; }
.step .n { font-family: var(--font-mono); font-size: 14px; color: var(--burning-flame); letter-spacing: .08em; }
.step:nth-child(1) .n { color: var(--facet-pale); }
.step:nth-child(2) .n { color: var(--burning-flame); }
.step:nth-child(3) .n { color: var(--facet-mid); }
.step:nth-child(4) .n { color: var(--facet-deep); }
.step h3 { font-size: 22px; }
.step p { margin-top: 8px; max-width: 60ch; }

/* --- Differenzierer ---------------------------------------------------- */
.diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; margin-top: 48px; }
.diff .item { border-top: 2px solid var(--burning-flame); padding-top: 24px; }
.diff .item:nth-child(1) { border-top-color: var(--burning-flame); }
.diff .item:nth-child(2) { border-top-color: var(--facet-mid); }
.diff .item:nth-child(3) { border-top-color: var(--truffle); }
.diff h3 { margin-bottom: 10px; font-size: 20px; }
.diff p { font-size: 16px; }

/* --- FAQ ---------------------------------------------------------------- */
.faq-head { text-align: center; max-width: 20ch; margin: 0 auto; }
.faq { max-width: 780px; margin: 44px auto 0; }
.faq-more { max-width: 780px; margin: 26px auto 0; text-align: center; font-size: 15px; color: var(--oatmeal); }
details { border-bottom: 0.5px solid var(--hairline); }
summary {
  cursor: pointer; list-style: none; padding: 24px 44px 24px 0;
  font-family: var(--font-sans); font-size: 20px; font-weight: 500;
  color: var(--palladian); position: relative;
  transition: color var(--dur) var(--ease);
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--burning-flame); }
summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 20px; color: var(--burning-flame);
}
details[open] summary::after { content: "–"; }
details .ans { padding: 0 44px 26px 0; font-size: 17px; color: var(--oatmeal); animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- Meta-Proof-Band (der dunkelste Moment — direkt vor dem hellsten) ---- */
.meta-panel {
  position: relative; overflow: hidden;
  background: var(--abyssal-deep);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-panel);
  padding: 80px 56px; text-align: center;
  box-shadow: var(--glass-highlight), var(--glass-halo);
}
.meta-panel::before { /* Spotlight-Halo oben */
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 90%;
  background: radial-gradient(50% 60% at 50% 0%, rgba(242, 162, 99, .11), transparent 70%);
  pointer-events: none;
}
.meta-panel > * { position: relative; }
.meta-panel .kicker { justify-content: center; }
.meta-panel h2 { max-width: 20ch; margin: 18px auto 0; }
.meta-panel p { max-width: 52ch; margin: 22px auto 0; font-size: 19px; }

/* --- Leitfaden (Opt-in) --------------------------------------------------- */
/* Sektion: Premium-Flaeche NUR aus Marken-Tokens (abyssal/abyssal-deep/blue-fantastic),
   dezent aus dem Rest gehoben + Facetten-Artwork (Daisy 10.07., vor der FAQ) */
#leitfaden {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% -15%, rgba(44, 59, 77, .55) 0%, rgba(44, 59, 77, .18) 42%, transparent 70%),
    radial-gradient(70% 110% at 90% 118%, rgba(163, 81, 57, .06), transparent 60%),
    linear-gradient(180deg, var(--abyssal-deep) 0%, #202D3B 50%, var(--abyssal-deep) 100%);
  border-top: 0.5px solid rgba(238, 233, 223, .06);
  border-bottom: 0.5px solid rgba(238, 233, 223, .06);
  box-shadow: inset 0 1px 0 rgba(238, 233, 223, .045);
}
/* Facetten-Glasflaeche (wie Hero/Methode) statt gekacheltem Raster */
#leitfaden::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(56% 80% at 88% 6%, rgba(242, 162, 99, .05) 0%, rgba(217, 127, 66, .022) 40%, transparent 72%),
    url("assets/tri-facets.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top right, top right;
  background-size: auto, 2688px 1164px;
  -webkit-mask-image: radial-gradient(125% 135% at 92% 0%, #000 0%, rgba(0, 0, 0, .45) 42%, transparent 82%);
  mask-image: radial-gradient(125% 135% at 92% 0%, #000 0%, rgba(0, 0, 0, .45) 42%, transparent 82%);
  opacity: .45;
  pointer-events: none;
}
#leitfaden > .wrap { position: relative; z-index: 1; }
.lead-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.lead-card {
  background: var(--palladian); color: var(--ink);
  border-radius: var(--radius-card); padding: 40px;
  box-shadow: var(--light-halo);
}
.lead-card .kicker { color: var(--truffle); }
.lead-card h1, .lead-card h2 { color: var(--ink); margin-top: 14px; }
.lead-card .promise { font-size: 18px; color: var(--ink-muted); margin-top: 16px; max-width: 46ch; }
.incl { margin: 28px 0 22px; display: grid; gap: 13px; list-style: none; }
.incl li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; color: var(--ink); line-height: 1.45; }
.incl .ck {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(163, 81, 57, .12); color: var(--truffle);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 3px;
}
.trust { font-size: 14.5px; color: var(--ink-faint); max-width: 46ch; margin-bottom: 16px; }
.optin .field-row { display: flex; gap: 12px; margin-bottom: 12px; }
.field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.field input {
  font-family: var(--font-body); font-size: 16px; padding: 13px 14px;
  border: 1px solid rgba(27, 38, 50, .22); border-radius: var(--radius-input);
  background: #fff; color: var(--ink); outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus { border-color: var(--burning-flame); box-shadow: 0 0 0 3px rgba(242, 162, 99, .2); }
.optin .btn { width: 100%; }
.reassure { margin-top: 13px; font-size: 13.5px; color: var(--ink-faint); text-align: center; }
.reassure a { color: var(--truffle); }
.optin-danke h2, .optin-danke h3 { color: var(--ink); margin-top: 24px; }
.optin-danke p { color: var(--ink-muted); margin-top: 10px; max-width: 52ch; }
.optin-cta { margin-top: 8px; }
.optin-cta .btn { width: 100%; }

/* Leitfaden-Modal */
.lead-modal {
  width: min(440px, calc(100vw - 32px));
  border: none; padding: 0; background: transparent; color: var(--ink);
  margin: auto; /* Reset (§ *{margin:0}) killt die native Modal-Zentrierung */
}
.lead-modal::backdrop {
  background: rgba(4, 9, 15, .55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
dialog.lead-modal:not([open]) { display: none; }
.lead-modal .optin {
  position: relative;
  background: var(--palladian);
  border-radius: var(--radius-card);
  padding: 34px 30px 30px;
  box-shadow: var(--light-halo);
  display: grid; gap: 14px;
}
.lead-modal .kicker { color: var(--truffle); }
.lead-modal h3 { color: var(--ink); font-size: 22px; margin: 2px 0 4px; max-width: 24ch; }
.lead-modal .btn { width: 100%; margin-top: 6px; }
.lead-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(27, 38, 50, .07); color: var(--ink-muted);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lead-modal-close:hover { background: rgba(27, 38, 50, .14); color: var(--ink); }
.wa-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-muted); margin-top: 2px;
}
.wa-note .wa-ico { color: #25D366; flex: 0 0 auto; display: inline-flex; }

/* Leitfaden-Cover — der EINZIGE erlaubte Gradient (DESIGN §6 / Log #11) */
.cover-wrap { display: flex; justify-content: center; position: relative; }
.cover { position: relative; width: 300px; max-width: 100%; }
.cover::before, .cover::after { /* gestapelte Seiten hinter dem Cover */
  content: ""; position: absolute; inset: 0; border-radius: 11px;
  border: 1px solid var(--hairline);
  background: rgba(44, 59, 77, .4);
}
.cover::before { transform: translate(14px, 14px); opacity: .5; }
.cover::after  { transform: translate(7px, 7px); opacity: .75; }
.cover .front {
  position: relative; z-index: 1;
  /* Stop bei 100% (nicht 106%) — Chrome malt sonst eine Wrap-Artefakt-Linie an der Oberkante.
     Verlauf über die Logo-Facetten-Töne (Log #24). */
  background: linear-gradient(170deg, var(--abyssal-deep) 0%, var(--abyssal) 28%, var(--blue-fantastic) 50%, var(--truffle) 72%, var(--facet-deep) 86%, var(--burning-flame) 100%) no-repeat;
  color: var(--palladian);
  border-radius: 11px; border: 1px solid var(--hairline);
  padding: 34px 30px; aspect-ratio: 3 / 4;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 80px -36px rgba(4, 9, 15, .9);
}
.cover .ey { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cover .ct { font-family: var(--font-sans); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; margin-top: auto; }
.cover .cb { margin-top: 14px; font-size: 13.5px; opacity: .9; line-height: 1.4; }
.cover .cw { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-top: 0.5px solid rgba(238, 233, 223, .25); padding-top: 12px; }

/* --- Potenzial-Check ------------------------------------------------------- */
.consult-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.consult-grid h2 { margin-top: 14px; max-width: 18ch; }
.consult .body-copy { font-size: 18px; margin-top: 18px; max-width: 54ch; }
.consult-cta { margin-top: 32px; }
.consult-cta .hero-micro { margin-top: 14px; }
.takeaways { margin-top: 32px; list-style: none; }
.takeaways li { padding: 22px 0; border-top: 0.5px solid var(--hairline); display: flex; gap: 16px; align-items: baseline; }
.takeaways .tn { font-family: var(--font-mono); font-size: 12px; color: var(--burning-flame); letter-spacing: .08em; flex: 0 0 32px; }
.takeaways li:nth-child(1) .tn { color: var(--facet-pale); }
.takeaways li:nth-child(2) .tn { color: var(--burning-flame); }
.takeaways li:nth-child(3) .tn { color: var(--facet-mid); }
.takeaways p { font-size: 16.5px; }
.takeaways b { color: var(--palladian); }
.embed-slot {
  background: var(--glass-fill);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-card); min-height: 420px;
  display: grid; place-items: center; text-align: center; padding: 32px;
  box-shadow: var(--glass-highlight);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.embed-slot .slot-inner { display: grid; gap: 14px; max-width: 34ch; }
.embed-slot .ph { white-space: normal; }
/* Live-Zustand: Cal.com-Inline-Embed statt Platzhalter */
.embed-slot.embed-live {
  display: block; place-items: stretch; text-align: left;
  border-style: solid; padding: 10px; min-height: 0;
}
.embed-slot.embed-live .cal-inline {
  width: 100%; max-width: 460px; margin: 0 auto;
  height: 600px; overflow-y: auto; overflow-x: hidden;
  border-radius: 10px;
}

/* --- Rechtsseiten ------------------------------------------------------------ */
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(32px, 4vw, 48px); }
.legal .lead-in { margin-top: 20px; color: var(--oatmeal); }
.legal h2 { margin-top: 44px; font-size: 21px; color: var(--palladian); }
.legal h3 { margin-top: 26px; font-size: 17px; color: var(--palladian); }
.legal p { margin-top: 16px; color: var(--oatmeal); line-height: 1.7; }
.legal ul { margin-top: 14px; padding-left: 22px; display: grid; gap: 9px; color: var(--oatmeal); }
.legal li { line-height: 1.6; }
.legal a { color: var(--burning-flame); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--palladian); font-weight: 600; }
.legal address { font-style: normal; margin-top: 14px; line-height: 1.75; color: var(--palladian); }
.legal .updated { margin-top: 48px; font-size: 14px; color: var(--ink-faint); }
.legal .back { margin-top: 8px; }

/* --- Footer -------------------------------------------------------------------- */
footer.site {
  background: var(--abyssal-deep);
  border-top: 0.5px solid var(--hairline);
  padding: var(--section-gap) 0 40px; /* 26.07.2026 (Daisy): vorher 80px — Abstand vor dem Footer jetzt im Sektions-Raster (2x section-gap wie überall) */
}
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand p { margin-top: 12px; color: var(--oatmeal); max-width: 52ch; font-size: 15px; }
.foot-col h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--oatmeal); margin-bottom: 14px; font-weight: 500; }
.foot-col a { display: block; text-decoration: none; color: var(--palladian); font-size: 15px; margin-bottom: 10px; transition: color var(--dur) var(--ease); }
.foot-col a:hover { color: var(--burning-flame); }
.foot-legal { display: flex; gap: 20px; }
.foot-legal a { margin-bottom: 0; }
.foot-contact { margin-top: 16px; display: grid; gap: 6px; }
.foot-contact a { color: var(--palladian); text-decoration: none; font-size: 15px; transition: color var(--dur) var(--ease); }
.foot-contact a:hover { color: var(--burning-flame); }
.foot-bottom {
  margin-top: 56px; padding-top: 24px; border-top: 0.5px solid var(--hairline);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--oatmeal);
}
.foot-bottom a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.foot-bottom a:hover { color: var(--burning-flame); }
.foot-bottom.bare { margin-top: 0; padding-top: 0; border-top: none; }
footer.site.slim { margin-top: var(--section-gap); }

/* --- Hero-Quiz (Hybrid-Widget, brainstorms/2026-07-07-hero-quiz-requirements.md) --- */
.js .tile[data-quiz] { min-height: 420px; display: flex; flex-direction: column; }
.js .tile[data-quiz] > [data-quiz-panel] { display: flex; flex-direction: column; flex: 1; }
.tile[data-quiz] > [data-quiz-panel][hidden] { display: none; }
.qlead { margin-top: 16px; padding-top: 16px; border-top: 0.5px solid var(--hairline); }
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.qchip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 10px 12px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.3;
  color: var(--palladian); text-decoration: none; text-wrap: pretty;
  background: rgba(238, 233, 223, .04);
  border: 1px solid var(--hairline); border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.qchip:hover { border-color: var(--hairline-strong); background: rgba(238, 233, 223, .07); }
.qchip[aria-checked="true"] { border-color: var(--burning-flame); background: rgba(242, 162, 99, .1); }
.qhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.qback {
  background: none; border: none; cursor: pointer;
  color: var(--oatmeal); font-size: 17px; line-height: 1; padding: 4px 8px; border-radius: 6px;
  transition: color var(--dur) var(--ease);
}
.qback:hover { color: var(--palladian); }
.qstep { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--oatmeal); }
.qbody { margin-top: 14px; }
[tabindex="-1"]:focus { outline: none; }
.js .tile[data-quiz] [data-quiz-panel="engpass"] .qbody { margin: auto 0; }
.js .tile[data-quiz] [data-quiz-panel="ergebnis"] .q-mirror { margin-top: auto; }
.js .tile[data-quiz] [data-quiz-panel="ergebnis"] .q-links { margin-bottom: auto; }
.q-mirror { margin-top: 14px; font-size: 16.5px; line-height: 1.5; color: var(--palladian); }
.q-cta { margin-top: auto; width: 100%; }
[data-quiz-panel="ergebnis"] .q-cta { margin-top: 18px; }
.q-links { display: flex; gap: 18px; margin-top: 13px; align-items: baseline; }
.q-links a, .q-links button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; color: var(--oatmeal);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-strong);
  transition: color var(--dur) var(--ease);
}
.q-links a:hover, .q-links button:hover { color: var(--burning-flame); }

/* --- ROI-Rechner ------------------------------------------------------------------ */
.roi-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.roi-grid h1 { font-size: clamp(36px, 4.6vw, 56px); }
.roi-grid .sub { font-size: 19px; line-height: 1.5; margin-top: 20px; max-width: 44ch; }
.roi-controls { margin-top: 36px; padding: 8px 26px 20px; }
.rrow { padding: 20px 0 16px; border-bottom: 0.5px solid var(--hairline); }
.rrow:last-child { border-bottom: none; }
.rlab { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.rlab label { font-family: var(--font-sans); font-size: 15.5px; font-weight: 500; color: var(--palladian); }
.rval {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; white-space: nowrap;
  color: var(--burning-flame); background: rgba(242, 162, 99, .1);
  padding: 3px 10px; border-radius: 6px;
  min-width: 92px; text-align: right; /* Felder gleichmäßig ausgerichtet */
}
.rhint { margin-top: 4px; font-size: 12.5px; color: var(--oatmeal); }
.rrow input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin-top: 10px; background: transparent; cursor: pointer;
}
.rrow input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--burning-flame) var(--fill, 30%), rgba(238, 233, 223, .15) var(--fill, 30%));
}
.rrow input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; background: var(--burning-flame); border: none;
  box-shadow: 0 0 0 4px rgba(242, 162, 99, .18);
}
.rrow input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(238, 233, 223, .15); }
.rrow input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--burning-flame); }
.rrow input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--burning-flame); border: none; box-shadow: 0 0 0 4px rgba(242, 162, 99, .18); }
.rrow input[type="range"]:focus-visible { outline: 2px solid var(--burning-flame); outline-offset: 4px; border-radius: 4px; }
.roi-note { margin-top: 18px; font-size: 13.5px; color: var(--oatmeal); }

.roi-report {
  background: var(--palladian); color: var(--ink);
  border-radius: var(--radius-card); padding: 36px;
  box-shadow: var(--light-halo);
  position: sticky; top: 90px;
}
.roi-report .tagline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--truffle); }
.rlines { margin-top: 22px; }
.rline {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 0.5px solid rgba(27, 38, 50, .12);
  font-size: 15px; color: var(--ink-muted);
}
.rline b { font-family: var(--font-sans); font-weight: 600; font-size: 16.5px; color: var(--ink); white-space: nowrap; }
.roi-metric { margin-top: 24px; }
.roi-metric .num { display: block; font-family: var(--font-sans); font-weight: 600; font-size: clamp(36px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.roi-metric .unit { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--truffle); }
.roi-cta { width: 100%; margin-top: 24px; }
.roi-cta:hover {
  /* dezenter Outlead-Verlauf beim Hover (wie Problem-Karten) */
  background: linear-gradient(135deg, rgba(242, 162, 99, .18), rgba(217, 127, 66, .10) 45%, rgba(163, 81, 57, .16)), #26364a;
}
.roi-reassure {
  margin-top: 13px; margin-left: -36px; margin-right: -36px; /* Zeile 1 des fixen Zeilenfalls braucht die volle Kartenbreite */
  max-width: none;
  font-size: 12px; color: var(--ink-faint); text-align: center;
}

/* Hero-Porträt (freigestellt) — oben bündig mit dem Kicker, unten bündig mit dem Hero-Ende */
.hero-visual { position: relative; }
.hero-portrait {
  position: absolute; margin: 0;
  top: 0; bottom: calc(-1 * var(--hero-pb)); left: 0; right: -24px;
  display: flex; justify-content: flex-end; align-items: flex-end;
}
.hero-portrait::before {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 130%; height: 86%; transform: translateX(-50%);
  background: radial-gradient(52% 58% at 50% 66%, rgba(242, 162, 99, .17), transparent 70%);
  pointer-events: none;
}
.hero-portrait img {
  position: relative; display: block;
  height: 108%; width: auto; max-width: none;
}
@media (max-width: 940px) {
  .hero-portrait { position: static; }
  .hero-portrait img { height: auto; width: min(320px, 78%); margin: 0 auto; margin-bottom: calc(-1 * var(--hero-pb)); }
}

/* Kompakte Hero-Variante (Rechner in der Hero-Kachel) */
.roi-hero { padding: 10px 26px 22px; }
.roi-hero .rrow { padding: 14px 0 10px; }
.roi-hero .rlab label { font-size: 14.5px; }
.roi-hero .rval { min-width: 84px; font-size: 12.5px; }
.roi-hero .rrow input[type="range"] { margin-top: 7px; height: 20px; }
.roi-hero-result {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-top: 18px; margin-top: 2px; border-top: 0.5px solid var(--hairline-strong);
}
.rr-unit {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--burning-flame);
}
.rr-num {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1; letter-spacing: -0.02em; color: var(--palladian); white-space: nowrap;
}

/* Dunkle Report-Variante (Startseiten-Sektion — helle Karten bleiben den Beweisen vorbehalten) */
.roi-report--dark {
  background: var(--glass-fill);
  color: var(--palladian);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-halo);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.roi-report--dark .tagline { color: var(--burning-flame); }
.roi-report--dark .rline { border-bottom-color: var(--hairline); color: var(--oatmeal); }
.roi-report--dark .rline b { color: var(--palladian); }
.roi-report--dark .roi-metric .num { color: var(--palladian); }
.roi-report--dark .roi-metric .unit { color: var(--burning-flame); }
.roi-report--dark .roi-reassure { color: var(--oatmeal); }
.roi-section .sec-head { margin-bottom: 8px; }
.roi-section .sec-intro { max-width: none; } /* Intro läuft über die gesamte Inhaltsbreite (Daisy 07.07.) */
/* Slider-Kachel + weiße Rechnung-Karte oben bündig und exakt gleich hoch */
#roi-rechner .roi-grid { align-items: stretch; }
#roi-rechner .roi-grid > .reveal { display: flex; flex-direction: column; min-width: 0; }
#roi-rechner .roi-controls { margin-top: 16px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
#roi-rechner .roi-report { margin-top: 16px; flex: 1; position: static; }

@media (max-width: 940px) {
  .roi-grid { grid-template-columns: 1fr; gap: 42px; }
  .roi-report { position: static; }
  .roi-controls { padding: 4px 20px 16px; }
}

/* --- Reveals (nur mit JS aktiv — ohne JS bleibt alles sichtbar) ------------------ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.js .reveal.in { opacity: 1; transform: none; }

/* Hero-Entrance beim Laden: Textspalte staffelt ihre Kinder, statt als Block zu faden */
.js .hero .hero-grid > .reveal:first-child { opacity: 1; transform: none; }
.js .hero .hero-grid > .reveal:first-child > .kicker,
.js .hero .hero-grid > .reveal:first-child > h1,
.js .hero .hero-grid > .reveal:first-child > .sub,
.js .hero .hero-grid > .reveal:first-child > .hero-cta {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
}
.js .hero .hero-grid > .reveal.in:first-child > .kicker { opacity: 1; transform: none; transition-delay: .05s; }
.js .hero .hero-grid > .reveal.in:first-child > h1 { opacity: 1; transform: none; transition-delay: .16s; }
.js .hero .hero-grid > .reveal.in:first-child > .sub { opacity: 1; transform: none; transition-delay: .3s; }
.js .hero .hero-grid > .reveal.in:first-child > .hero-cta { opacity: 1; transform: none; transition-delay: .44s; }

/* Kicker-Linie zeichnet sich beim Reveal von links */
.js .reveal .kicker::before { transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease-soft) .15s; }
.js .reveal.in .kicker::before { transform: scaleX(1); }

/* Dashboards setzen sich beim Einscrollen minimal (Settle-in statt reinem Fade) */
.js .glow-grid .reveal .glow-shot { transform: scale(.988); transform-origin: center bottom; transition: transform .9s var(--ease-soft); }
.js .glow-grid .reveal.in .glow-shot { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero .hero-grid > .reveal:first-child > .kicker,
  .js .hero .hero-grid > .reveal:first-child > h1,
  .js .hero .hero-grid > .reveal:first-child > .sub,
  .js .hero .hero-grid > .reveal:first-child > .hero-cta { opacity: 1; transform: none; transition: none; }
  .js .reveal .kicker::before { transform: none; transition: none; }
  .js .glow-grid .reveal .glow-shot { transform: none; transition: none; }
  .js .reveal .pruef-chart .ln { stroke-dashoffset: 0; transition: none; }
  .js .reveal .pruef-chart .area { opacity: 1; transition: none; }
  .dash { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* --- Responsive -------------------------------------------------------------------- */
.hero-grid > *, .lead-grid > *, .consult-grid > *, .objection-item > *,
.step > *, .ba > *, .flow > *, .case-grid > *, .problem-grid > * { min-width: 0; }

@media (max-width: 940px) {
  :root { --section-gap: 72px; }
  .hero { --hero-pb: 36px; padding-top: 56px; }
  .hero-grid, .lead-grid, .consult-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-visual { order: 2; }
  .problem-grid { grid-template-columns: 1fr; gap: 16px; }
  .objection-item { grid-template-columns: 1fr; gap: 12px; }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow .node { border-top: 0.5px solid var(--hairline); padding: 20px 0 20px 0; }
  .ba, .diff, .case-grid { grid-template-columns: 1fr; gap: 24px; }
  .nav-links { display: none; }
  .meta-panel { padding: 56px 26px; }
  .case { padding: 30px 24px; }
  .lead-card { padding: 30px 24px; }
  .step { grid-template-columns: 56px 1fr; gap: 18px; }
  .proof-shot { max-width: 100%; }
}
@media (max-width: 560px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { white-space: normal; text-align: center; }
  .optin .field-row { flex-direction: column; }
  .proof-shot .bar { flex-wrap: wrap; }
  .brand { font-size: 14px; white-space: nowrap; }
  .brand-mark { height: 20px; margin-right: 8px; }
  .header-cta { padding: 7px 13px; font-size: 13px; }
}

/* Optin-Fehlerhinweis (Netlify-POST fehlgeschlagen, z. B. lokal) — 26.07.2026 */
.optin-error { margin-top: 12px; font-size: 13.5px; color: var(--burning-flame); }
.optin-error a { color: inherit; }