/* =========================================================================
   Schermal Mechatronik — Standalone Landing Page (landing.html)
   Eigenständige Lead-Conversion-Seite. Lädt NACH styles.css (Tokens),
   site.css (Komponenten) und hero-b.css (Burst-Visuals) und überschreibt
   bzw. ergänzt punktuell. Kein app.js — alle Behaviours in landing.js.
   Neue Bausteine: Conversion-Hero, Preis-Block, Anker-Kontaktbereich und
   der mehrstufige Anfrage-Funnel (inline + Overlay, gleicher Code).
   ========================================================================= */

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

/* sanftes Scrollen für die Anker-Navigation (Motion-sensibel) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* =========================================================================
   HERO — Conversion-Layout über dem Burst
   ========================================================================= */
.heroB--lp { height: auto; min-height: 100vh; }
.heroB--lp .heroB__stage {
  height: auto; min-height: 100vh;
  padding: 104px 0 64px;            /* Platz für den fixierten Header */
  box-sizing: border-box;
}
.heroB--lp .heroB__inner { align-items: center; }
.heroB--lp .heroB__copy {
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.heroB__eyebrow { margin: 0; }
.heroB--lp .heroB__title { margin: 0; }
.heroB__sub {
  font-family: var(--font-sans); font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62; color: var(--text-on-dark-soft); margin: 0; max-width: 33em;
}
.heroB__sub strong { color: #fff; font-weight: 600; }
.heroB__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.heroB__trust {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; gap: 10px 22px; flex-wrap: wrap;
}
.heroB__trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-on-dark-soft);
}
.heroB__trust .icon { flex-shrink: 0; }

/* Gestaffelte Hero-Einblendung beim Laden: zuerst die H1, danach Akku, Eyebrow,
   Subtext, Buttons und Trust nacheinander rein. Läuft automatisch via CSS (kein
   Flash, kein JS nötig); das Scroll-Lock dazu setzt landing.js (armed-Delay). */
@media (prefers-reduced-motion: no-preference) {
  .heroB--lp .heroB__title   { animation: heroBrise 0.6s var(--ease-out) 0.15s both; }
  .heroB--lp .heroB__media   { animation: heroBrise 0.7s var(--ease-out) 0.40s both; }
  .heroB--lp .heroB__eyebrow { animation: heroBrise 0.55s var(--ease-out) 0.80s both; }
  .heroB--lp .heroB__sub     { animation: heroBrise 0.55s var(--ease-out) 1.00s both; }
  .heroB--lp .heroB__cta     { animation: heroBrise 0.55s var(--ease-out) 1.20s both; }
  .heroB--lp .heroB__trust   { animation: heroBrise 0.55s var(--ease-out) 1.40s both; }
  @keyframes heroBrise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}

/* Scroll-Hinweis als klickbarer Anker */
.heroB__hint { text-decoration: none; }
.heroB__hint:hover { color: var(--cyan-400); }

/* Blauer Strich unter „Ingenieur" — zeichnet sich NACH dem Burst von links ein,
   leicht schräg (links tiefer als rechts), damit er das „g" nicht schneidet.
   Stellschrauben: bottom (tiefer ansetzen) + rotate (Neigung). */
.heroB__ul { position: relative; display: inline-block; white-space: nowrap; }
.heroB__ul::after {
  content: ""; position: absolute; left: -0.02em; right: -0.04em; bottom: -0.15em;
  height: 0.085em; min-height: 3px; border-radius: 999px;
  background: var(--cyan-400);
  transform: rotate(-2.4deg) scaleX(0); transform-origin: left center;
}
.heroB.is-burst .heroB__ul::after { animation: heroBunderline 0.55s var(--ease-out) 1.1s both; }
@keyframes heroBunderline { from { transform: rotate(-2.4deg) scaleX(0); } to { transform: rotate(-2.4deg) scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .heroB__ul::after { transform: rotate(-2.4deg) scaleX(1); animation: none; }
}

@media (max-width: 860px) {
  .heroB--lp .heroB__stage { padding: 92px 0 40px; }
  .heroB--lp .heroB__inner { text-align: left; justify-items: stretch; gap: 22px; }
  .heroB--lp .heroB__copy { order: 1; align-items: flex-start; max-width: none; }
  .heroB--lp .heroB__media { order: 2; height: 23vh; min-height: 165px; }
  .heroB__cta .btn { flex: 1 1 auto; }
}
@media (max-width: 460px) {
  .heroB__cta { width: 100%; }
  .heroB__cta .btn { width: 100%; }
  .heroB--lp .heroB__media { height: 19vh; min-height: 140px; }
}

/* =========================================================================
   Generische Section-CTA (mittig, mit Notiz)
   ========================================================================= */
.section-cta {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 44px; text-align: center;
}
.section-cta__note { font-family: var(--font-sans); font-size: 13.5px; color: var(--text-muted); }

/* Pillar bekommt einen eigenen Textlink-CTA */
.pillar__cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--navy-900);
  transition: color var(--dur-base);
}
.pillar__cta:hover { color: var(--cyan-700); }
.pillar { transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base); }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--cyan-100); }

.feature__quote {
  font-family: var(--font-display); font-style: italic; font-size: 18px;
  color: var(--navy-900); margin: 6px 0 0;
}

/* =========================================================================
   Preis-Block (Reparatur-Logik + €/kWh-Rechner nebeneinander)
   ========================================================================= */
.priceblock { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 24px; align-items: stretch; }
.priceblock__repair {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); padding: 30px; display: flex; flex-direction: column; gap: 16px;
}
.priceblock__title {
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  color: var(--navy-900); margin: 0; letter-spacing: -0.3px; line-height: 1.2;
}
.priceline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.priceline li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--border-subtle);
}
.priceline li:first-child { border-top: none; }
.priceline__svc { font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary); }
.priceline__val {
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--cyan-700);
  font-feature-settings: "tnum"; white-space: nowrap;
}
.priceline__val small { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--text-muted); }
.priceblock__honest {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--cyan-050); border: 1px solid var(--cyan-100); border-radius: var(--radius-md);
  padding: 13px 15px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55;
  color: var(--navy-900); margin: 0;
}
.priceblock__honest .icon { flex-shrink: 0; margin-top: 1px; }
.priceblock__repair .todo--block { margin: auto 0 0; }
.calc__inputs .chip { align-self: flex-start; margin-bottom: 4px; }

@media (max-width: 960px) { .priceblock { grid-template-columns: 1fr; } }

/* =========================================================================
   Kontakt-Bereich (navy) — Intro + Funnel nebeneinander
   ========================================================================= */
.section--navy-lead { background: var(--navy-900); overflow: hidden; }  /* dekorativen Glow (right:-6%) clippen → kein horizontaler Scroll */
.kontakt-lp {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: start;
}
.kontakt-lp__intro { padding-top: 4px; }
.kontakt-lp__title {
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600;
  letter-spacing: -1px; color: #fff; margin: 14px 0 14px; line-height: 1.12;
}
.kontakt-lp__lead {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.6;
  color: var(--text-on-dark-soft); margin: 0 0 26px; max-width: 440px;
}
.reassure { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.reassure li {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; color: var(--text-on-dark-soft);
}
.reassure li b { color: #fff; font-weight: 600; }
.reassure__icon {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: rgba(22, 202, 212, 0.10); border: 1px solid rgba(22, 202, 212, 0.22);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.reassure__contact { display: flex; flex-direction: column; gap: 11px; padding-top: 22px; border-top: 1px solid var(--border-on-dark); }
.reassure__line {
  display: inline-flex; align-items: center; gap: 10px; color: #fff;
  font-family: var(--font-sans); font-size: 14.5px; text-decoration: none;
}
.reassure__line .tnum { font-feature-settings: "tnum"; }
a.reassure__line:hover { color: var(--cyan-300); }

.funnel-noscript {
  background: #fff; border-radius: var(--radius-lg); padding: 24px;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text-secondary);
}
.funnel-noscript a { color: var(--cyan-700); font-weight: 600; }

@media (max-width: 960px) { .kontakt-lp { grid-template-columns: 1fr; gap: 32px; } }

/* =========================================================================
   MEHRSTUFIGER ANFRAGE-FUNNEL  (inline-Karte + Overlay teilen sich diesen Code)
   ========================================================================= */
.funnel {
  position: relative; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
}
/* im Overlay liefert der Dialog selbst die Rahmen-Optik → Funnel flach */
.overlay .funnel { border: none; box-shadow: none; border-radius: 0; }

/* ---- Fortschritt: Balken + 3 beschriftete Punkte ---- */
.funnel__progress { padding: 20px 26px 16px; background: var(--surface-subtle); border-bottom: 1px solid var(--border-subtle); }
.funnel__bar { height: 6px; border-radius: 999px; background: var(--grey-200); overflow: hidden; }
.funnel__bar-fill {
  display: block; height: 100%; width: 33%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-600), var(--cyan-400));
  transition: width var(--dur-slow) var(--ease-out);
}
.funnel__dots { list-style: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: space-between; gap: 8px; }
.funnel__dot { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.funnel__dot-bubble {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--border-strong); color: var(--text-muted);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.funnel__dot-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.funnel__dot.is-active .funnel__dot-bubble {
  border-color: var(--cyan-500); color: var(--navy-900); transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(22, 202, 212, 0.16);
}
.funnel__dot.is-active .funnel__dot-label { color: var(--cyan-700); }
.funnel__dot.is-done .funnel__dot-bubble { background: var(--cyan-500); border-color: var(--cyan-500); color: var(--navy-900); }
.funnel__dot.is-done .funnel__dot-bubble .icon { animation: dotCheck var(--dur-base) var(--ease-out); }
@keyframes dotCheck { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 420px) {
  .funnel__dot:not(.is-active) .funnel__dot-label { display: none; }
}

/* ---- Schritte ---- */
.funnel__main { padding: 24px 26px 26px; }
.funnel-step { display: none; }
.funnel-step.is-active { display: block; animation: stepIn var(--dur-slow) var(--ease-out); }
.funnel-step.is-active.from-back { animation-name: stepInBack; }
/* Step-Container wird nur programmatisch (Screenreader-Ansage) fokussiert (tabindex=-1): kein sichtbarer Fokusrahmen ums Formular */
.funnel-step:focus, .funnel-success__title:focus { outline: none; }
@keyframes stepIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .funnel-step.is-active { animation: none; } }

.funnel-step__head { margin-bottom: 16px; }
.funnel-step__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--navy-900); margin: 0 0 4px; letter-spacing: -0.3px; }
.funnel-step__hint { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }

.funnel__group { margin-bottom: 16px; }
.funnel__group:last-of-type { margin-bottom: 0; }
.funnel__legend { display: block; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 9px; }

/* ---- Auswahl-Karten (Schritt 1) ---- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice__inner {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 13px 14px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: #fff;
  transition: border-color var(--dur-base), background var(--dur-base), transform var(--dur-fast);
}
.choice__icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--cyan-050); border: 1px solid var(--cyan-100); color: var(--cyan-700);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.choice__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.choice__title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--navy-900); letter-spacing: -0.2px; }
.choice__desc { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); }
.choice__check {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--cyan-500); color: var(--navy-900); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.3); transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.choice:hover .choice__inner { border-color: var(--cyan-300); }
.choice input:focus-visible + .choice__inner { border-color: var(--cyan-500); box-shadow: var(--focus-ring); }
.choice input:checked + .choice__inner { border-color: var(--cyan-500); background: var(--cyan-050); }
.choice input:checked + .choice__inner .choice__icon { background: var(--cyan-500); border-color: var(--cyan-500); color: var(--navy-900); }
.choice input:checked + .choice__inner .choice__check { opacity: 1; transform: scale(1); }
.choice.just-picked .choice__inner { animation: choicePop var(--dur-base) var(--ease-out); }
@keyframes choicePop { 0% { transform: scale(1); } 45% { transform: scale(0.96); } 100% { transform: scale(1); } }

/* Shake bei fehlender Auswahl / Fehler */
.funnel__shake { animation: funnelShake 0.42s var(--ease-standard); }
@keyframes funnelShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .funnel__shake { animation: none; } }

.funnel__error { font-family: var(--font-sans); font-size: 13px; color: var(--red-600); margin: 8px 0 0; display: none; }
.funnel__error.is-shown { display: block; }

/* ---- Navigation der Schritte ---- */
.funnel__nav { display: flex; gap: 10px; margin-top: 22px; }
.funnel__nav .btn { min-height: 50px; }
.funnel__next, .funnel__submit { flex: 1 1 auto; }
.funnel__prev { flex: 0 0 auto; }
.funnel__reassure-mini {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--text-faint); text-align: center;
}
.funnel__reassure-mini .icon { color: var(--cyan-700); flex-shrink: 0; }
.funnel__demo { margin: 12px 0 0; text-align: center; }

/* „Ohne Details weiter" (Schritt 2 ist bewusst überspringbar) */
.funnel__skip {
  display: block; margin: 12px auto 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; color: var(--text-faint);
  text-decoration: underline; text-underline-offset: 2px;
}
.funnel__skip:hover { color: var(--text-muted); }
/* Pflichtfeld-Hinweis (Schritt 3) + leiser Reset-Link im Erfolgszustand */
.funnel__req-note { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-faint); margin: 0 0 14px; }
.funnel__reset-link {
  background: none; border: none; cursor: pointer; padding: 4px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.funnel__reset-link:hover { color: var(--navy-900); }

/* <a>-Buttons: das globale a:hover (cyan) darf die Button-Textfarbe nicht überfärben
   — sonst verschwindet z. B. „Lieber sofort anrufen" auf dem cyanfarbenen Button. */
a.btn--accent:hover { color: var(--navy-900); }
a.btn--primary:hover, a.btn--on-dark:hover { color: #fff; }
a.btn--secondary:hover, a.btn--ghost:hover { color: var(--navy-900); }

/* ---- Erfolgs-Zustand ---- */
.funnel-success[hidden] { display: none; }   /* MUSS das display:flex unten schlagen, sonst ist die Bestätigung dauerhaft sichtbar (Author-CSS > UA-[hidden]) */
.funnel-success { padding: 44px 26px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.funnel-success__icon {
  width: 70px; height: 70px; border-radius: 50%; background: var(--green-100); color: var(--green-600);
  display: flex; align-items: center; justify-content: center; position: relative;
  animation: successPop 0.55s var(--ease-out);
}
.funnel-success__icon::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--green-600); opacity: 0; animation: successRing 0.7s var(--ease-out) 0.1s;
}
@keyframes successPop { 0% { transform: scale(0); } 62% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes successRing { 0% { opacity: 0.5; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .funnel-success__icon, .funnel-success__icon::after { animation: none; } .funnel-success__icon::after { display: none; } }
.funnel-success__title { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--navy-900); margin: 0; }
.funnel-success__text { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 380px; }
.funnel-success__recap {
  display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 6px;
}

@media (max-width: 460px) {
  .choice-grid { grid-template-columns: 1fr; }
  .funnel__main { padding: 22px 18px 22px; }
  .funnel__progress { padding: 18px 18px 14px; }
}

/* =========================================================================
   Footer (3 Spalten auf der LP)
   ========================================================================= */
.footer__top--lp { grid-template-columns: 1.6fr 1fr 1.5fr; }
@media (max-width: 960px) { .footer__top--lp { grid-template-columns: 1fr 1fr; } .footer__top--lp .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 720px) { .footer__top--lp { grid-template-columns: 1fr; } }

/* =========================================================================
   A11y-Override für geteilte Komponenten (nur auf der LP):
   site.css zeigt eingeklappte Panels mit [hidden]{display:block} an. Auf der LP
   blendet landing.js Panels beim Schließen wirklich aus → raus aus dem A11y-Baum
   und der Seitensuche, passend zu aria-expanded.
   ========================================================================= */
.acc-panel[hidden] { display: none; }

/* =========================================================================
   „So läuft's" — vertikale Timeline mit Strahl + durchlaufender Blau-Animation
   ========================================================================= */
.flow { position: relative; max-width: 720px; margin: 0 auto; }
.flow__beam {
  position: absolute; top: 12px; bottom: 12px; left: 27px; width: 3px;
  background: var(--border-strong); border-radius: 999px; overflow: hidden; pointer-events: none;
}
.flow__pulse {
  position: absolute; left: 50%; transform: translateX(-50%); top: -80px;
  width: 9px; height: 80px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(22,202,212,0) 0%, var(--cyan-500) 42%, var(--cyan-300) 55%, rgba(22,202,212,0) 100%);
  box-shadow: 0 0 16px 3px rgba(22,202,212,0.6);
  animation: flowPulse 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes flowPulse { 0% { top: -80px; } 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .flow__pulse { display: none; } }

.flow__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 36px; }
.flow__step:last-child { padding-bottom: 0; }
.flow__node {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy-900); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 7px var(--surface-subtle);   /* maskiert den Strahl hinter dem Node */
}
.flow__body { padding-top: 5px; display: flex; flex-direction: column; gap: 5px; }
.flow__num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-700); }
.flow__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--navy-900); margin: 0; letter-spacing: -0.3px; }
.flow__desc { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 520px; }
@media (max-width: 460px) {
  .flow__beam { left: 23px; }
  .flow__step { grid-template-columns: 48px 1fr; gap: 16px; }
  .flow__node { width: 48px; height: 48px; }
}

/* =========================================================================
   Persönliche Section — freigestelltes Gründer-Foto + Sprechblase
   ========================================================================= */
.founder { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.founder__photo {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 480px;
  filter: drop-shadow(0 26px 44px rgba(11, 17, 43, 0.30));   /* subtiler Schatten hinter dem freigestellten Foto */
}
.speech-bubble {
  position: absolute; top: 4px; right: -20px; max-width: 240px; margin: 0;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 14px 18px;
}
.speech-bubble p { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.4; color: var(--navy-900); margin: 0; }
.speech-bubble::after {
  content: ""; position: absolute; left: 14px; bottom: -8px; width: 16px; height: 16px;
  background: #fff; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  transform: rotate(45deg);
}
@media (max-width: 600px) {
  .speech-bubble { position: relative; top: auto; right: auto; max-width: none; margin: 4px auto 0; }
  .speech-bubble::after { left: 50%; margin-left: -8px; top: -8px; bottom: auto; transform: rotate(225deg); }
}

/* =========================================================================
   Overlay: breiter + zweispaltige Details, damit das Formular NICHT scrollt
   ========================================================================= */
#lpOverlay.overlay { width: min(880px, calc(100vw - 28px)); max-width: 880px; }
#lpOverlay .overlay__head { padding: 18px 26px 14px; }
#lpOverlay .overlay__body { max-height: 88vh; }
.funnel__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }       /* inline (schmal): einspaltig */
.overlay .funnel__grid { grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; }  /* Overlay (breit): zweispaltig → halbe Höhe */
@media (max-width: 620px) { .overlay .funnel__grid { grid-template-columns: 1fr; } }  /* schmales Overlay (Handy): wieder einspaltig, sonst quetscht es */

/* =========================================================================
   Bewertungen / Social Proof
   ========================================================================= */
.reviews__top { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; margin-bottom: 40px; }
@property --ring-fill { syntax: "<number>"; inherits: false; initial-value: 100; }
.reviews__ring {
  position: relative; width: 138px; height: 138px; border-radius: 50%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  --ring-fill: 100;
  background: conic-gradient(var(--cyan-500) calc(var(--ring-fill) * 1%), var(--grey-200) 0); box-shadow: var(--shadow-md);
}
.reviews__ring.is-animating { animation: ringFill 1.15s var(--ease-out) forwards; }
@keyframes ringFill { from { --ring-fill: 0; } to { --ring-fill: 100; } }
@media (prefers-reduced-motion: reduce) { .reviews__ring.is-animating { animation: none; --ring-fill: 100; } }
.reviews__ring::before { content: ""; position: absolute; inset: 11px; background: #fff; border-radius: 50%; }
.reviews__ring-num { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--navy-900); line-height: 1; letter-spacing: -1px; }
.reviews__ring-num small { font-size: 19px; }
.reviews__ring-cap { position: relative; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-700); margin-top: 5px; }
.reviews__intro { display: flex; flex-direction: column; gap: 12px; }
.reviews__meta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 4px; }
.reviews__stars { color: #f5a623; font-size: 19px; letter-spacing: 2px; }
.reviews__count { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); font-feature-settings: "tnum"; }
.reviews__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--cyan-700); }
.reviews__link:hover { color: var(--cyan-600); }

.reviews__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.review-card {
  position: relative; display: flex; flex-direction: column; gap: 11px; padding: 24px 22px 20px;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.review-card__mark { position: absolute; top: 2px; right: 16px; font-family: var(--font-display); font-size: 92px; line-height: 1; color: var(--cyan-050); pointer-events: none; user-select: none; }
.review-card__stars { position: relative; color: #f5a623; font-size: 15px; letter-spacing: 1.5px; }
.review-card__text { position: relative; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.58; color: var(--text-secondary); margin: 0; font-style: normal; }
.review-card__author { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.review-card__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--green-600); font-weight: 500; }
@media (max-width: 960px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .reviews__top { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; }
  .reviews__intro { align-items: center; }
  .reviews__meta { justify-content: center; }
  .reviews__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Kalkulator — einfache Variante (Typ-Buttons + ein Regler)
   ========================================================================= */
.calc-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-preset {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; cursor: pointer;
  padding: 12px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--border-strong);
  background: #fff; color: var(--text-secondary); transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}
.calc-preset .icon { color: var(--text-faint); transition: color var(--dur-base); }
.calc-preset:hover { border-color: var(--cyan-300); }
.calc-preset:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--cyan-500); }
.calc-preset.is-active { border-color: var(--cyan-500); background: var(--cyan-050); color: var(--cyan-700); font-weight: 600; }
.calc-preset.is-active .icon { color: var(--cyan-600); }
.calc__scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-faint); }
.calc--simple .calc__big { font-size: 42px; }
@media (max-width: 420px) { .calc-presets { grid-template-columns: 1fr; } }

/* =========================================================================
   Preis-Block: gestapelt + kompakt (Rechner & Reparaturkosten UNTEREINANDER)
   ========================================================================= */
.priceblock { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; gap: 18px; }
.priceblock__repair { padding: 26px 28px; gap: 14px; }
.priceblock__title { font-size: 20px; }

/* =========================================================================
   Rechner-Ergebnis im Ingenieur-/Messgerät-Look (statt SaaS-Balken)
   ========================================================================= */
.calc__result--instrument {
  gap: 15px;
  background: radial-gradient(125% 80% at 85% -10%, rgba(22,202,212,0.14), transparent 60%), var(--navy-900);
}
.calc__grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(125% 92% at 50% 0%, #000 32%, transparent 80%);
          mask-image: radial-gradient(125% 92% at 50% 0%, #000 32%, transparent 80%);
}
.calc__readout-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc__readout-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-400);
}
.calc__readout-led {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-400);
  box-shadow: 0 0 0 0 rgba(22,202,212,0.55); animation: ledPulse 2.6s ease-out infinite;
}
@keyframes ledPulse { 0% { box-shadow: 0 0 0 0 rgba(22,202,212,0.5); } 70% { box-shadow: 0 0 0 7px rgba(22,202,212,0); } 100% { box-shadow: 0 0 0 0 rgba(22,202,212,0); } }
@media (prefers-reduced-motion: reduce) { .calc__readout-led { animation: none; } }
.calc__readout-chip {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-on-dark-soft);
  border: 1px solid var(--border-on-dark); border-radius: 999px; padding: 4px 11px; white-space: nowrap; font-feature-settings: "tnum";
}
.calc__big-wrap { position: relative; display: flex; flex-direction: column; gap: 3px; padding-bottom: 13px; border-bottom: 1px dashed var(--border-on-dark); }
.calc__big-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-faint); }
.calc__spec { position: relative; margin: 0; display: flex; flex-direction: column; }
.calc__spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.calc__spec-row:first-child { border-top: none; }
.calc__spec-row dt { margin: 0; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-on-dark-soft); }
.calc__spec-row dd { margin: 0; font-family: var(--font-mono); font-size: 13px; color: #fff; font-feature-settings: "tnum"; white-space: nowrap; }
.calc__gauge { position: relative; display: flex; flex-direction: column; gap: 7px; }
.calc__gauge-track {
  position: relative; height: 8px; border-radius: 999px; overflow: visible;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 100%), rgba(255,255,255,0.08);
  background-size: 10% 100%, 100% 100%;
}
.calc__gauge-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan-600), var(--cyan-400)); transition: width var(--dur-slow) var(--ease-out); }
.calc__gauge-tick {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--cyan-400); transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(22,202,212,0.65); transition: left var(--dur-slow) var(--ease-out);
}
.calc__gauge-ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.calc__delta { position: relative; margin: 0; font-family: var(--font-sans); font-size: 14px; color: var(--text-on-dark-soft); }
.calc__delta b { color: var(--cyan-400); font-weight: 700; font-feature-settings: "tnum"; }

/* =========================================================================
   Sprechblase: Pfeil zeigt schräg nach links-unten (Richtung Kopf)
   ========================================================================= */
.speech-bubble { top: -4px; right: -6px; }
.speech-bubble::after {
  content: ""; position: absolute; width: 0; height: 0; background: transparent;
  left: -12px; bottom: 14px; top: auto;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 14px solid #fff;
  border-left: none;
  transform: rotate(18deg); transform-origin: right center;
  filter: drop-shadow(-1.5px 1px 0 var(--border-subtle));
}
@media (max-width: 600px) {
  .speech-bubble::after {
    left: 50%; bottom: auto; top: -12px;
    border-top: none; border-right: 9px solid transparent; border-left: 9px solid transparent; border-bottom: 14px solid #fff;
    transform: translateX(-50%); filter: drop-shadow(0 -1.5px 0 var(--border-subtle));
  }
}

/* =========================================================================
   Manifest „Tonnenweise" — Scroll-Reveal-Statement
   ========================================================================= */
.manifest { position: relative; overflow: hidden; background: var(--navy-900); color: #fff; padding: clamp(60px, 9vw, 110px) 0; }
.manifest__glow {
  position: absolute; width: 64vw; max-width: 780px; aspect-ratio: 1; border-radius: 50%;
  left: 46%; top: 52%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(22,202,212,0.16), transparent 62%); pointer-events: none;
}
.manifest .container { position: relative; max-width: 1000px; }
.manifest__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan-400); margin: 0 0 20px; }
.manifest__line { font-family: var(--font-display); font-weight: 600; letter-spacing: -1px; line-height: 1.18; font-size: clamp(26px, 4.3vw, 46px); color: #fff; margin: 0; }
.manifest__word { display: inline-block; color: var(--cyan-400); font-size: 1.32em; line-height: 1; margin-right: 0.12em; }
.manifest__accent { color: var(--cyan-300); }

/* Generischer Scroll-Reveal */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.14s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.30s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.46s; }
.manifest__word[data-reveal] {
  transform: translateY(28px) scale(0.7); transform-origin: left bottom;
  transition: opacity 0.85s var(--ease-out), transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-shadow: 0 0 0 rgba(22,202,212,0);
}
.manifest__word[data-reveal].is-in { transform: none; text-shadow: 0 6px 30px rgba(22,202,212,0.45); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .manifest__word[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   B2B-Strip (dezenter Partner-Hinweis vor dem Footer)
   ========================================================================= */
.b2b-strip { border-top: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.b2b-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 18px 0; }
.b2b-strip__text { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-muted); max-width: 72ch; }
.b2b-strip__text b { color: var(--navy-900); font-weight: 600; }
.b2b-strip__link { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--cyan-700); }
.b2b-strip__link:hover { color: var(--cyan-600); }