/* Schriften selbst gehostet (2026-08-31).

   Vorher kamen sie per <link> von api.fontshare.com. Das kostete im kritischen
   Ladepfad einen zusaetzlichen fremden Server: DNS-Auflösung, TLS-Handschlag,
   dann erst die CSS-Datei — und ERST DANN wusste der Browser ueberhaupt, welche
   Schriftdateien er von einem ZWEITEN fremden Server (cdn.fontshare.com) holen
   muss. Zwei Verbindungsaufbauten hintereinander, bevor der erste Buchstabe in
   der richtigen Schrift steht.

   Wichtiger Nebenbefund beim Umstellen: die kombinierte Fontshare-Anfrage lieferte
   Cabinet Grotesk UND Satoshi zurueck — aber KEIN General Sans, obwohl es
   angefordert war. Die Regel `--font-body: "General Sans"` lief damit ins Leere
   und der Fliesstext wurde in der Systemschrift dargestellt. Mit den Dateien hier
   stimmt die Schrift zum ersten Mal.

   woff2 reicht: jeder Browser, der diese Seite sonst darstellen kann, versteht es.
   Die frueher mitgelieferten woff- und ttf-Fassungen waren nur Ballast.
   font-display: swap bleibt — lieber sofort Text in der Systemschrift als
   unsichtbarer Text, bis die Schrift da ist. */

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('assets/fonts/general-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #131316;
  --bg-alt: #1c1c21;
  --bg-card: #1a1a1f;
  --border: #2a2a30;
  --text: #f5f5f2;
  /* Heller als frueher (#a3a3ab, 2026-09-02). Das war mit 7,4:1 auf dem
     Seitenhintergrund zwar regelkonform, aber gerade bei den kleinen
     Groessen (Feindruck 11 px, Ergebnis-Labels 11 px) schlecht zu lesen.
     Jetzt 10,5:1 — deutlich ueber der AA-Schwelle von 4,5 und auch ueber
     AAA (7), bleibt aber klar hinter --text zurueck, die Abstufung
     zwischen Flies- und Haupttext geht also nicht verloren. */
  --text-dim: #c2c2ca;
  --accent: #f5f5f2;
  --accent-dim: #a3a3ab;
  --gutter: 16px;
  --font-head: "Cabinet Grotesk", "General Sans", sans-serif;
  --font-body: "General Sans", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* scroll-behavior: smooth ist RAUS (2026-09-02).

     Es vertraegt sich nicht mit ScrollTrigger, und das ist keine Geschmacks-
     frage, sondern steht so in der GSAP-Dokumentation: ScrollTrigger merkt
     sich bei jedem refresh() den Scrollstand und setzt ihn danach zurueck.
     Mit "smooth" wird aus diesem Zuruecksetzen eine ANIMATION. Waehrend die
     laeuft, liest ScrollTrigger Zwischenstaende des Scrollstands — und alle
     scroll-gebundenen Animationen (scrub) springen auf einen Fortschritt, der
     nicht zur Stelle passt, an der man wirklich steht.

     Bis zum 01.09. ist das niemandem aufgefallen, weil normalizeScroll das
     Scrollen selbst uebernommen und damit scroll-behavior komplett umgangen
     hat. Ohne normalizeScroll (seit gestern, wegen der Performance) wirkt es
     wieder — das ist die Ursache fuer das Springen und dafuer, dass Karten und
     Steps beim Ankommen schon "fertig" aussehen.

     Das weiche Scrollen der Navigationslinks uebernimmt jetzt ein Klick-
     Handler in script.js. Der stoert nicht, weil er nur bei einem echten Klick
     laeuft und nicht mitten in einem refresh(). */

  /* Muss zusammen mit dem clip auf body stehen: solange html "visible" ist,
     reicht der Browser das overflow von body an den Viewport weiter und body
     selbst kappt dann gar nichts. Erst wenn html ebenfalls kappt, bleibt das
     clip auf body wirksam — und nur das haelt den riesigen .hero-circle im
     Dokument. Frueher erledigte das der #smooth-wrapper. */
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  /* clip statt hidden: beide kappen horizontalen Ueberlauf, aber `hidden` macht
     daraus einen Scroll-Container und killt damit position:sticky fuer alles
     darin (den Karten-Stack). `clip` nicht.
     position:relative gehoert zwingend dazu: .hero-circle ist absolut
     positioniert und mehrere tausend Pixel breit. Ohne einen positionierten
     Vorfahren ist sein Bezugsrahmen der Viewport-Ursprungsblock, und den kappt
     kein overflow — die Seite liess sich dann seitlich verschieben. Frueher
     uebernahm das der #smooth-wrapper, den es nicht mehr gibt. */
  position: relative;
  overflow-x: clip;
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

#flair-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  /* z-index 2: above the hero circle (1) so stars show over the green,
     but below the hero text/button (.hero .container is z-index 3) so
     the stars sit BEHIND the hero content — visible only where content
     is transparent/translucent (e.g. through the glass button).
     absolute (not fixed) so spawned stars are anchored to the page/document
     and scroll away naturally instead of staying pinned to the viewport.
     clip-path is set dynamically in script.js to match the hero circle's live position/size. */
}

.flair {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  aspect-ratio: 200 / 195;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  background-color: #FF2E5B;
  -webkit-mask-image: url("assets/star-flair.webp");
  mask-image: url("assets/star-flair.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Hero-Verweis in die naechste Sektion. War bis zum 2026-09-02 ein Glas-Knopf
   (.btn.btn-huge.btn-glass) und ist jetzt reiner Text: Der eigentliche
   Handlungsaufruf ist der schwebende Knopf und der in der Leiste — zwei
   konkurrierende Knoepfe im Hero haben sich gegenseitig entwertet.
   Die Unterstreichung waechst beim Darueberfahren von links ein; sie liegt als
   ::after-Balken darunter und wird skaliert, damit nur die Grafikkarte arbeitet
   und kein Layout neu gerechnet wird. */
.hero-link {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.01em;
  color: #0d0d0f;
}
.hero-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-link:hover::after,
.hero-link:focus-visible::after { transform: scaleX(1); }

/* A genuinely huge circle behind nav + full hero — only its bottom cap is visible */
.hero-circle {
  position: absolute;
  left: 50%;
  top: -140vw;
  width: 200vw;
  height: 200vw;
  border-radius: 50%;
  background: #f5f5f2;
  /* Perf (2026-09-02): war `filter: drop-shadow(...)`. Ein Filter zwingt den
     Browser, das GANZE Element vorher in eine eigene Zwischenflaeche zu
     rastern — hier gemessene 2379 x 2379 px = 5,7 Megapixel, auf einem Handy
     mit dreifacher Pixeldichte also rund 51 Megapixel. Sichtbar ist davon nur
     die untere Kappe von etwa 600 px; der Rest wird trotzdem gerechnet.
     box-shadow auf einem border-radius:50%-Element zeichnet Skia dagegen
     analytisch aus der Form heraus, ohne Zwischenflaeche. Optisch identisch:
     beide deuten den dritten Wert als Weichzeichnerradius (2x Streuung). */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  z-index: 1;
  pointer-events: none;
  transform: translateX(-50%);
  /* CSS above is just a fallback so the circle is visible immediately on
     paint, before script.js runs. width/height/top get overridden with
     exact px values in script.js so the visible cap always covers nav +
     hero, no matter the content height. */
}

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
}

h1, h2, h3, .logo {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  background: #f5f5f2;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Auto-hide: slides out on scroll down, comes back on scroll up (JS toggles
   the class and mirrors the state into --nav-h, see script.js). */
.nav.nav--hidden { transform: translateY(-100%); }
.nav.nav--scrolled {
  background: rgba(19, 19, 22, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* Perf (2026-08-31): Die Nav klebt waehrend des gesamten Scrollens oben, ein
   backdrop-filter muss also bei JEDEM Frame neu abbilden, was dahinter
   durchlaeuft. Zusammen mit normalizeScroll (Scroll laeuft auf dem
   Haupt-Thread) ist das der teuerste Posten auf Mobilgeraeten. Auf schmalen
   Viewports deshalb kein Blur, sondern eine (fast) deckende Farbe — optisch
   auf dem Handy praktisch identisch, weil dahinter ohnehin der dunkle
   Seitenhintergrund liegt. Desktop behaelt den Glas-Look. */
@media (max-width: 991px) {
  .nav.nav--scrolled {
    background: rgba(19, 19, 22, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  color: #0d0d0f;
  transition: color 0.3s ease;
}
.nav--scrolled .logo { color: var(--text); }

.logo-mark {
  display: inline-block;
  width: 134px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-image: url('assets/logo-wordmark.svg');
  mask-image: url('assets/logo-wordmark.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  color: rgba(13, 13, 15, 0.75);
  font-size: 15px;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: #0d0d0f; }
.nav--scrolled .nav-links a { color: var(--text-dim); }
.nav--scrolled .nav-links a:hover { color: var(--text); }

.nav-right { display: flex; align-items: center; gap: 20px; }

/* Menue-Knopf und Klappmenue — nur unterhalb von 861 px, also genau dort, wo
   die Verweise in der Leiste ausgeblendet sind (siehe unten). Bis dahin war
   die Navigation auf dem Handy gar nicht erreichbar; es gab nur den
   Aktions-Knopf. */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0d0d0f;
  cursor: pointer;
  transition: color 0.3s ease;
}
.nav-burger svg { width: 26px; height: 26px; display: block; fill: currentColor; }
.nav--scrolled .nav-burger { color: var(--text); }

.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px var(--gutter) 20px;
  /* Eigener dunkler Grund statt des Leisten-Hintergrunds: Die Leiste ist oben
     hell und weiter unten dunkel — ein mitlaufender Hintergrund haette je nach
     Scrollstand mal hellen, mal dunklen Text gebraucht. */
  background: rgba(19, 19, 22, 0.98);
  border-bottom: 1px solid var(--border);
}
.nav-menu[hidden] { display: none; }
.nav-menu.open { display: flex; }
.nav-menu a {
  padding: 14px 4px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.nav-menu a:last-of-type { border-bottom: 0; }
.nav-menu .btn { margin-top: 12px; width: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: #0d0d0f;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 25%, transparent);
}
.accent { color: var(--accent); }
.btn-ghost {
  color: var(--text-dim);
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
  border-radius: 0;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }

.btn-huge {
  padding: 20px 44px;
  font-size: 19px;
  border-radius: 999px;
}

.btn-glass {
  background: rgba(255, 255, 255, 0.01);
  color: #0d0d0f;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 24px rgba(13, 13, 15, 0.15);
}
/* Perf (2026-08-31): zweites backdrop-filter, sitzt im Hero auf dem flachen
   gruenen Kreis. Ein Blur ueber einer einfarbigen Flaeche verwischt Farbe mit
   sich selbst und ist damit optisch fast wirkungslos — kostet aber solange der
   Hero im Bild ist jeden Frame. Auf Mobile deshalb aus; Rahmen, Schatten und
   der weisse Innenglanz tragen den Glas-Eindruck allein. */
@media (max-width: 991px) {
  .btn-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 480px) {
  .btn-huge {
    width: 100%;
    max-width: 300px;
    padding: 15px 20px;
    font-size: 15px;
  }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  /* Auf dem Handy tritt der Menue-Knopf an die Stelle des Aktions-Knopfes —
     der steht jetzt im aufgeklappten Menue, zusammen mit den Verweisen. */
  .nav-right > .btn { display: none; }
  .nav-burger { display: flex; }
}

@media (max-width: 480px) {
  .nav { padding: 14px var(--gutter); }
  .nav-right .btn { padding: 9px 16px; font-size: 13px; }
  .logo { font-size: 17px; }
}

/* HERO */
.hero {
  padding: 140px var(--gutter) 100px;
  text-align: center;
  position: relative;
}
.hero .container {
  position: relative;
  z-index: 3;
}
.hero h1 {
  font-size: clamp(38px, 6vw, 76px);
  max-width: 900px;
  margin: 0 auto 24px;
  color: #0d0d0f;
  opacity: 0;
}
.hero-word-img {
  height: 1.15em;
  width: auto;
  vertical-align: -0.22em;
  margin: 0 0.02em;
}
.hero p {
  font-size: clamp(17px, 2vw, 20px);
  color: rgba(13, 13, 15, 0.72);
  max-width: 620px;
  margin: 0 auto 40px;
  opacity: 0;
}
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  opacity: 0;
}

.hero .accent { color: #0d0d0f; }

/* Single static star centered above the hero text — mobile-only stand-in
   for the desktop cursor-trail effect (no hover on touch, and it's not
   free performance-wise, so it's switched off below 861px in JS too). */
.hero-static-stars {
  display: none;
  text-align: center;
  margin: 0 auto 4px;
}
.static-star {
  pointer-events: none;
  /* Zwingend, seit das <img> width/height im HTML traegt (2026-08-31, gegen das
     Springen des Layouts beim Nachladen). Diese Angaben wirken zusaetzlich wie
     eine gesetzte Hoehe; da hier im CSS nur die Breite steht, blieb die Hoehe
     sonst auf den 195 px aus dem Attribut stehen und der Stern wurde lang
     gezogen. Mit height:auto gilt wieder das Seitenverhaeltnis aus den
     Attributen — Platzhalter bleibt erhalten, Form stimmt. */
  height: auto;
}
.static-star--big { width: 54px; transform: rotate(-8deg); }

@media (max-width: 860px) {
  .hero-static-stars { display: block; }
}

@media (max-width: 860px) {
  .hero { padding: 120px var(--gutter) 80px; }
}

@media (max-width: 480px) {
  .hero { padding: 104px var(--gutter) 60px; }
}

/* SECTION HEADERS */
.section {
  padding: 120px var(--gutter);
}
/* Achtung, Reihenfolge: Diese beiden Ueberschreibungen standen frueher weiter
   OBEN in der Datei — also vor der Basisregel. Bei gleicher Spezifitaet gewinnt
   die spaetere Regel, die 120 px haben die mobilen Werte damit still
   ueberschrieben und die Sektionen waren auf dem Handy genauso weit
   auseinander wie auf dem Desktop (gemessen 240 bis 292 px zwischen den
   Inhalten). Deshalb stehen sie jetzt direkt hinter der Basis.
   44 statt 88 px: Zwischen zwei Sektionen addieren sich unteres und oberes
   Polster, aus 44 werden also 88 px plus die Ueberschriften-Abstaende. */
@media (max-width: 860px) {
  .section { padding: 44px var(--gutter); }
}
@media (max-width: 480px) {
  .section { padding: 34px var(--gutter); }
}

/* Feinabstimmung einzelner Uebergaenge auf dem Handy (2026-09-03).
   Das gleichmaessige Sektionspolster passt fast ueberall; an diesen fuenf
   Stellen wurde es einzeln nachgezogen. Die Werte sind aus dem gemessenen
   Ist-Zustand zurueckgerechnet (Polster oben + Polster unten der Nachbarin +
   Ueberschriften-Abstaende), damit die Abstaende genau auf den gewuenschten
   Zahlen landen. Nur mobil — auf dem Desktop bleibt alles wie es ist. */
@media (max-width: 860px) {
  /* Zitat -> Loesungs-Kopf: 68 -> 104 */
  #loesung { padding-top: 70px; }
  /* Rechner -> Einsatzbereiche: 88 -> 104 */
  #einsatzbereiche { padding-top: 50px; }
  /* Akkordeon -> Foerderung: 88 -> 104 */
  #foerderung { padding-top: 50px; }
  /* Foerderung -> FAQ: 68 -> 88 */
  #faq { padding-top: 54px; }
}

.section-title {
  font-size: clamp(48px, 7.6vw, 92px);
  max-width: 780px;
  margin-bottom: 16px;
}
#faq .section-title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.lp-dark .section-title,
#einsatzbereiche .section-title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.lp-dark .section-lead,
#einsatzbereiche .section-lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-lead {
  color: var(--text-dim);
  font-size: 18px;
  max-width: 560px;
  margin-bottom: 64px;
}

/* FUNNEL STEPS */
.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.step {
  display: grid;
  grid-template-columns: 90px 120px 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step-num {
  font-family: var(--font-head);
  font-size: 40px;
  color: var(--border);
  font-weight: 700;
}
.step-icon {
  width: 64px;
  height: 64px;
}
.step-icon svg { width: 100%; height: 100%; overflow: visible; }
.step-body h3 {
  font-size: 22px;
  margin-bottom: 8px;
}
.step-body p {
  color: var(--text-dim);
  font-size: 16px;
  max-width: 520px;
}

@media (max-width: 700px) {
  .step { grid-template-columns: 50px 56px 1fr; gap: 20px; }
  .step-icon { width: 48px; height: 48px; }
  .step-num { font-size: 28px; }
}

@media (max-width: 380px) {
  .step {
    grid-template-columns: 44px 1fr;
    row-gap: 8px;
  }
  .step-num {
    grid-column: 1 / -1;
    font-size: 22px;
  }
  .step-icon { width: 40px; height: 40px; }
}


/* PROBLEM — single big statement, revealed word by word on scroll.

   Perf (2026-09-02): Das Stehenbleiben macht jetzt natives position:sticky
   statt eines GSAP-Pins. Der Pin war der Grund, warum ScrollTrigger.
   normalizeScroll auf Touch anbleiben musste — und das wiederum hat das
   Scrollen der GANZEN Seite vom Compositor auf den Haupt-Thread geholt.
   sticky braucht das nicht: Der Browser rechnet die Position selbst, im
   Layout, und kann beim Scrollen nicht danebenliegen. Damit entfaellt auch
   pinSpacing (GSAP schob dafuer einen Platzhalter ins Layout, der bei jeder
   Neumessung springen konnte).

   Die Section ist jetzt die Scrollstrecke, ihr Container die klebende Karte:
     100svh  Hoehe der klebenden Karte
   + 210svh  Weg, ueber den sich die Woerter aufdecken
   svh, nicht vh/dvh: dvh aendert sich, sobald die Adressleiste ein- oder
   ausfaehrt; svh ist fix. Das war schon vorher die richtige Wahl und bleibt es.

   Korrektur (2026-09-02): Der Weg kam bis eben zum Teil aus einer
   CSS-Variablen, die script.js aus der Wortzahl gerechnet und erst beim
   DOMContentLoaded gesetzt hat. Bis dahin war die Section 990 px NIEDRIGER als
   danach — die Seite ist also nach dem ersten Bild um fast eine
   Bildschirmhoehe gewachsen und alles darunter nach unten gerutscht. Wer in
   dem Moment schon scrollte (auf dem Handy die Regel, nicht die Ausnahme),
   bekam den Sprung mit, und ScrollTrigger konnte auf veralteten Positionen
   sitzen bleiben. Jetzt steht die Hoehe vollstaendig im Stylesheet und gilt
   damit ab dem allerersten Bild. */
.problem-section {
  padding-top: 0;
  padding-bottom: 0;
  display: block;
  height: 310vh;
  height: 310svh;
}
.problem-section > .container {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
}
.problem-text {
  position: relative;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.18;
  font-size: clamp(26px, 4.2vw, 56px);
  max-width: 1180px;
  text-align: left;
}
/* Word-by-word reveal internals — shared by .problem-text and any other
   [data-reveal-text] element (e.g. .lp-quote p) */
[data-reveal-text] .word-wrap {
  position: relative;
  display: inline-block;
}
[data-reveal-text] .word-ghost {
  opacity: 0.14;
}
[data-reveal-text] .word-fill {
  position: absolute;
  inset: 0;
  color: inherit;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

@media (max-width: 700px) {
  .problem-section .container { justify-content: center; }
}

/* CALCULATOR */
.lp-calc-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.lp-calc-copy p { color: var(--text-dim); font-size: 16px; margin: 16px 0 20px; }
.lp-calculator {
  background: var(--bg-card);
  /* --calc-farbe setzt script.js aus den errechneten Monatskosten; der
     Startwert gilt nur, bis calc() das erste Mal gelaufen ist. Alle Stellen
     unten haengen daran, damit sich der Rechner als Ganzes mitfaerbt. */
  --calc-farbe: #00D4FF;
  border: 1px solid color-mix(in srgb, var(--calc-farbe) 45%, var(--border));
  border-radius: 20px;
  padding: 32px;
  transition: border-color 0.35s ease;
}
.lp-ranges { display: grid; gap: 24px; }
.lp-range { display: grid; gap: 12px; }
.lp-range-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lp-range-head strong { font-size: 14px; font-weight: 600; }
.lp-range output {
  min-width: 64px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--calc-farbe) 60%, transparent);
  border-radius: 8px;
  color: var(--calc-farbe);
  transition: color 0.35s ease, border-color 0.35s ease;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  flex: 0 0 auto;
}
.lp-range input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none;
  border-radius: 99px;
  /* Harte Kante bei --pos: links der zurueckgelegte Weg in der aktuellen
     Farbe, rechts die leere Schiene. */
  background: linear-gradient(
    90deg,
    var(--calc-farbe) 0,
    var(--calc-farbe) var(--pos, 0%),
    color-mix(in srgb, var(--calc-farbe) 14%, transparent) var(--pos, 0%)
  );
  outline: 0;
}
.lp-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 3px solid var(--bg-card);
  border-radius: 50%;
  background: var(--calc-farbe);
  cursor: pointer;
}
.lp-range input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--bg-card);
  border-radius: 50%;
  background: var(--calc-farbe);
  cursor: pointer;
}
.lp-results {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 0.8fr;
  gap: 10px;
  margin: 28px 0 18px;
}
.lp-result {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
}
.lp-result span { display: block; margin-bottom: 6px; color: var(--text-dim); font-size: 11px; }
/* Cabinet Grotesk auch bei Monats- und Jahreswert — das Hauptergebnis in der
   Mitte stand schon immer in der Kopfschrift, jetzt sind alle drei einheitlich. */
.lp-result strong { font-family: var(--font-head); font-size: 18px; }
.lp-result--main {
  border-color: color-mix(in srgb, var(--calc-farbe) 55%, transparent);
  background: color-mix(in srgb, var(--calc-farbe) 12%, transparent);
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.lp-result--main strong {
  color: var(--calc-farbe);
  transition: color 0.35s ease;
  font-family: var(--font-head);
  font-size: clamp(26px, 2.6vw, 34px);
}
.lp-calc-note {
  display: block;
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
}
.lp-btn-full { width: 100%; }

@media (max-width: 860px) {
  .lp-calc-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 480px) {
  .lp-calculator { padding: 22px 18px; }
  .lp-range-head { flex-direction: column; align-items: flex-start; }
  .lp-results { grid-template-columns: 1fr; }
  .lp-result { min-height: auto; padding: 14px 16px; }
}

/* DARK ALT SECTION */

/* PAIN GRID */
.lp-pain-grid {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 40px;
}
.lp-pain-float {
  position: relative;
  width: 100%;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pain-deck {
  display: flex;
  justify-content: center;
}
.pain-slide {
  width: clamp(220px, 20vw, 320px);
  aspect-ratio: 0.82;
  flex: none;
}
.pain-slide:not(:first-child) {
  margin-left: clamp(-160px, -10vw, -110px);
}
.pain-content {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-card);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  padding: 28px 30px;
  display: flex;
  align-items: center;
  user-select: none;
  will-change: transform;
}
.pain-content p {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text);
}
.lp-quote {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.lp-quote p {
  position: relative;
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--text);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.4;
}
.lp-quote-logo { display: inline-block; margin-top: 20px; color: var(--accent); }
.lp-quote-logo .logo-mark { width: 116px; height: 19px; }

@media (max-width: 700px) {
  .lp-pain-float { min-height: 0; overflow: visible; }
  .pain-deck { flex-direction: column; gap: 12px; width: 100%; }
  .pain-slide {
    width: 100%;
    aspect-ratio: auto;
    margin-left: 0 !important;
    /* Kein `transform: none !important` mehr (2026-09-02): Ein !important
       schlaegt auch Inline-Stile, hier waeren das die von GSAP gesetzten —
       die Karten wischen auf Mobile jetzt abwechselnd von links und rechts
       herein (script.js) und koennten sich sonst gar nicht bewegen.
       Gedacht war die Regel gegen Streu-Transformationen, die vom
       gefaecherten Desktop-Stapel uebrig bleiben, wenn man das Fenster von
       breit auf schmal zieht. Darum kuemmert sich jetzt ein clearProps beim
       Betreten des Mobile-Zweigs — praeziser, weil es nur einmal beim Wechsel
       greift statt dauerhaft jede Transformation zu blockieren. */
  }
  .pain-content { align-items: flex-start; }
}

/* Der Kopf dieser Sektion steht unmittelbar ueber dem randlosen
   Kartenstapel. Das volle Sektionspolster darunter wirkt dort wie ein Loch,
   deshalb auf allen Breiten deutlich enger — ausdruecklich auch auf dem
   Desktop. */
#einsatzbereiche { padding-bottom: 24px; }

/* SOLUTION — Titel oben mittig, Mac mini in der Mitte, Steps 01/02 links
   (rechtsbuendig) und 03/04 rechts (linksbuendig). Ohne Icons, ohne Trennlinien.
   Auf Mobile stattdessen: Titel, Mac mini, danach die vier Steps nacheinander
   an einer Stelle, wortweise ein-/ausgeblendet (siehe script.js). */
.lp-solution-head { text-align: center; margin-bottom: 56px; }
.lp-solution-head .section-title { max-width: 980px; margin: 0 auto; }

.lp-solution-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 460px) 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
}

/* Die Pin-Wrapper existieren nur fuer Mobile — auf Desktop reicht der Grid
   die Step-Spalten durch, als waeren die Wrapper nicht da. */
.lp-steps-flow, .lp-steps-pin, .lp-steps-stage { display: contents; }
/* Explizite Zeile, sonst rutscht der Mac mini bei der Auto-Platzierung in
   Zeile 2 — er steht im Markup hinter den Step-Spalten. */
.lp-steps-left { grid-column: 1; grid-row: 1; }
.lp-solution-grid .macmini-zone { grid-column: 2; grid-row: 1; margin: 0; padding: 0; max-width: none; }
.lp-steps-right { grid-column: 3; grid-row: 1; }

.lp-solution-grid #macmini-stage { width: 100%; height: clamp(220px, 26vw, 380px); }

.lp-solution-steps { margin: 0; }
.lp-solution-steps .steps { gap: clamp(28px, 4vw, 48px); }
.lp-solution-steps .step {
  display: block;
  padding: 0;
  border: 0;
}
.lp-solution-steps .step:last-child { border-bottom: 0; }
.lp-solution-steps .step-num {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  margin-bottom: 10px;
  color: var(--text-dim);
}
.lp-solution-steps h3 { font-size: clamp(15px, 1.4vw, 19px); margin-bottom: 8px; }
.lp-solution-steps p { color: var(--text-dim); font-size: clamp(13px, 1.1vw, 15px); }

.lp-steps-left { text-align: right; }
.lp-steps-right { text-align: left; }

@media (max-width: 860px) {
  /* Wort-Wischer (uebernommen aus mwg_effect022): jedes Wort steckt in einem
     Kaefig mit overflow:hidden, das innere span faehrt rein bzw. raus. Nur hier,
     damit die Wortumbrueche auf Desktop nichts am Satz aendern. */
  .lp-steps-stage .word {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: -0.14em 0;
  }
  .lp-steps-stage .word > span {
    display: block;
    padding: 0.14em 0;
  }

  .lp-solution-head { margin-bottom: 32px; }
  .lp-solution-grid { grid-template-columns: 1fr; gap: 0; }

  /* Reihenfolge: Titel (eigener Container) -> Mac mini -> Steps */
  .lp-solution-grid .macmini-zone { grid-column: 1; grid-row: 1; }
  /* Perf (2026-09-02): auch hier natives sticky statt GSAP-Pin — siehe die
     ausfuehrliche Begruendung bei .problem-section. Der Scrollweg kam vorher
     von pinSpacing, jetzt steht er als eigene Hoehe hier: eine Hoehe fuer die
     klebende Karte selbst plus drei fuer die drei Uebergaenge zwischen den
     vier Steps. Kein Leerraum am Ende, weil die Karte genau dann aufhoert zu
     kleben, wenn die Strecke zu Ende ist. */
  .lp-steps-flow {
    grid-column: 1;
    grid-row: 2;
    display: block;
    --steps-pin-h: max(560px, 88svh);
    height: calc(var(--steps-pin-h) * 4);
  }
  /* Hoeher als frueher (2026-09-02): Seit die Kamera nach der Kugel um das
     Geraet ausgerichtet wird (macmini.js), ragt es in keiner Drehlage mehr
     aus dem Bild — dafuer steht sie weiter weg und das Geraet wurde kleiner.
     Senkrecht ist der engere Winkel, die Buehne bestimmt ueber ihre Hoehe
     also direkt, wie gross das Geraet in Pixeln erscheint. Mehr Hoehe holt
     die Groesse zurueck, ohne das Anschneiden wieder einzuhandeln. */
  .lp-solution-grid #macmini-stage { height: clamp(300px, 80vw, 420px); }

  /* Knapp unter Viewporthoehe: die vier Steps brauchen ~580 px, der Rest waere
     nur Leerraum, der sich unten als Abstand zur naechsten Section zeigt. */
  .lp-steps-pin {
    display: block;
    height: var(--steps-pin-h, max(560px, 88svh));
    position: sticky;
    top: 0;
  }
  #loesung { padding-bottom: 8px; }
  .lp-calc-section { padding-top: 40px; }
  /* Die Steps sammeln sich an: sie stehen von Anfang an im Fluss (damit nichts
     springt) und werden nacheinander eingeblendet — am Ende sind alle vier da. */
  .lp-steps-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    height: 100%;
  }
  .lp-steps-left, .lp-steps-right,
  .lp-solution-steps .steps { display: contents; }

  /* Der Block als Ganzes bleibt mittig, der Satz darin ist linksbuendig. */
  .lp-steps-stage .step {
    position: static;
    display: block;
    text-align: left;
    width: 100%;
    max-width: 34ch;
    margin: 0 auto;
    padding: 0 8px;
  }
  .lp-steps-stage .step-num { font-size: 22px; margin-bottom: 4px; }
  .lp-steps-stage h3 { font-size: 17px; margin-bottom: 4px; }
  .lp-steps-stage p { font-size: 14px; margin: 0; }
}

/* EINSATZBEREICHE — two-way accordion panels (adapted from mwg_effect109), in
   our colors (per-panel --fc / --tc) and fonts. Horizontal on desktop, vertical
   on mobile. Closed panels show a rotated title strip; the open one grows to
   reveal its heading + task list. JS in script.js drives the open/close. */
.mwg_effect109 .acc-row {
  height: 506px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
  /* Break out of the section's side padding so the row spans the full screen
     width; the open panel then grows (see script.js) to fill any leftover. */
  margin-inline: calc(-1 * var(--gutter));
}
/* Angebots-Absatz -> Akkordeon: 80 -> 68 px auf dem Handy. Steht bewusst HINTER
   der Regel darueber — bei gleicher Spezifitaet gewinnt die spaetere, davor
   waere sie wirkungslos geblieben (derselbe Stolperstein wie beim
   Sektionspolster). */
@media (max-width: 860px) {
  .mwg_effect109 .acc-row { margin-top: 32px; }
}
.mwg_effect109 .slide {
  position: relative;
  flex: 0 0 88px;
  height: 506px;
  overflow: hidden;
  padding: 28px;
  color: var(--tc, #0d0d0f);
  background: var(--fc);
  border-radius: 20px;
}
.mwg_effect109 .slide:not(.on) { cursor: pointer; }
.mwg_effect109 .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mwg_effect109 .title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(44px, 5.2vw, 78px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  width: min-content;
}
.mwg_effect109 .bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
/* Deutlich groesser seit dem 2026-09-02: Seit die Schrittnummern raus sind,
   steht im geoeffneten Panel nur noch dieser Satz — bei den alten 20 px blieb
   dadurch der halbe Kachelinhalt leer. */
.mwg_effect109 .bottom h3 {
  font-family: var(--font-head);
  font-weight: 700;
  /* Obergrenze ergibt sich aus dem laengsten Satz: Die Kachel ist 506 px hoch
     und schneidet ab (overflow: hidden). Bei 44 px lief "Technische Umsetzung"
     um 49 px ueber, 38 px passen bei allen fuenf. */
  font-size: clamp(38px, 3vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.mwg_effect109 .bottom ul { list-style: none; display: grid; gap: 10px; }
.mwg_effect109 .bottom li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
}
.mwg_effect109 .bottom li::before { content: "→"; font-weight: 700; flex: 0 0 auto; }

.mwg_effect109 .small-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  width: 506px;
  position: absolute;
  bottom: 0;
  left: 100%;
  transform: rotate(-90deg);
  transform-origin: 0 100%;
  padding: 28px;
  display: flex;
  justify-content: center;
  transition: opacity 0.25s ease;
}
/* On the open panel the big .title already shows the name — hide the rotated
   strip title so it can't linger in the middle of the wide open panel. */
/* Pfeil unten rechts in der GEOEFFNETEN Kachel — nur auf dem Desktop.
   Auf dem Handy uebernimmt das der Tipp auf die Kachel selbst (script.js), dort
   waere der Pfeil nur zusaetzliche Flaeche ohne Nutzen.
   Die ersten vier schalten eine Kachel weiter, der letzte fuehrt als echter
   Anker in die Foerder-Sektion. */
.mwg_effect109 .slide-next {
  display: none;
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tc, #0d0d0f);
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Das Icon bringt seinen eigenen Rahmen mit — deshalb hier kein Kreis mehr
   drumherum. currentColor traegt die Kachelfarbe (--tc) in die Zeichnung. */
.mwg_effect109 .slide-next svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.mwg_effect109 .slide-next--down svg { transform: rotate(90deg); }
@media (min-width: 992px) {
  .mwg_effect109 .slide.on .slide-next { display: flex; }
}
.mwg_effect109 .slide-next:hover { opacity: 0.72; transform: translateX(3px); }
.mwg_effect109 .slide-next--down:hover { transform: translateY(3px); }

.mwg_effect109 .slide.on .small-title {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 991px) {
  .mwg_effect109 .acc-row {
    flex-direction: column;
    max-width: 640px;
    width: 100%;
    height: auto;
    margin-inline: auto;
  }
  .mwg_effect109 .slide { width: 100%; height: auto; flex: 0 0 74px; }
  .mwg_effect109 .small-title {
    width: 100%;
    transform: none;
    left: 0;
    right: auto;
    padding: 24px 28px;
  }
}

@media (max-width: 767px) {
  .mwg_effect109 .acc-row { max-width: 460px; }
  .mwg_effect109 .title { font-size: 48px; }
}

/* WORKFLOW EXAMPLE */
.lp-workflow-card { margin-top: 20px; }
.lp-flow-steps { display: flex; margin-top: 24px; align-items: stretch; }
.lp-flow-step {
  width: 100%;
  /* Bewusst grosszuegig: die vier Karten sind der Kern der Section und
     poppen einzeln auf — bei Listen-Groesse verpufft der Effekt. */
  padding: clamp(24px, 2.4vw, 40px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
}
.lp-flow-step span {
  display: block;
  margin-bottom: clamp(20px, 2.2vw, 36px);
  /* --sc kommt inline pro Schritt aus index.html; ohne gesetztes --sc faellt
     die Nummer auf den Section-Akzent zurueck. */
  color: var(--sc, var(--accent));
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
}
.lp-flow-step b { display: block; font-family: var(--font-head); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.25; }
.lp-flow-step small { display: block; margin-top: 10px; color: var(--text-dim); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; }
.lp-arrowline { width: 40px; flex: 0 0 auto; position: relative; }
.lp-arrowline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  right: 4px;
  height: 1px;
  background: var(--accent-dim);
}

@media (max-width: 860px) {
  .lp-flow-steps { flex-direction: column; }
  .lp-arrowline { width: 2px; height: 20px; margin-left: 22px; background: var(--accent-dim); }
  .lp-arrowline::before { display: none; }
}

/* COMPARE (Vorher/Nachher)
   Zwei getrennte Karten statt einer geteilten Box: nur so kann die
   "Danach"-Seite optisch abheben. Die Gegenueberstellung traegt die Aussage
   der Section, also ist der Kontrast bewusst gebaut — links grau und flach,
   rechts farbig und angehoben. */
.lp-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
  align-items: start;
}
.lp-compare-col {
  padding: clamp(28px, 3.2vw, 48px);
  border-radius: 24px;
  border: 1px solid var(--border);
}
.lp-compare-col h3 {
  margin-bottom: clamp(24px, 2.4vw, 34px);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
}
.lp-compare-col ul { list-style: none; display: grid; gap: clamp(14px, 1.4vw, 20px); }
.lp-compare-col li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.45;
}
.lp-compare-col li span {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: 0 0 auto;
  font-size: 15px;
  margin-top: 1px;
}

/* HEUTE — absichtlich stumpf: kein Akzent, gedaempfter Text, flacher Grund. */
.lp-compare-before {
  background: var(--bg-card);
}
.lp-compare-before h3 { color: var(--text-dim); }
.lp-compare-before li { color: var(--text-dim); }
.lp-compare-before li span {
  color: var(--text-dim);
  background: rgba(245, 245, 242, 0.06);
}

/* MIT KI-SKLAVE — die volle Palette. Die vier Farbwaschungen sitzen in den
   Ecken, damit kein einzelner Ton dominiert und die Karte trotzdem farbig
   wirkt; die Haken tragen ihre Einzelfarbe aus --c (inline im HTML). */
.lp-compare-after {
  position: relative;
  border-color: rgba(245, 245, 242, 0.16);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 46, 91, 0.16), transparent 60%),
    radial-gradient(120% 80% at 100% 0%, rgba(0, 212, 255, 0.16), transparent 60%),
    radial-gradient(120% 80% at 0% 100%, rgba(122, 60, 255, 0.16), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(255, 179, 0, 0.14), transparent 60%),
    var(--bg-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lp-compare-after h3 { color: var(--text); }
.lp-compare-after li { color: var(--text); }
.lp-compare-after li span {
  color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 40%, transparent);
}

@media (max-width: 700px) {
  .lp-compare { grid-template-columns: 1fr; gap: 16px; }
  .lp-compare-col { padding: 26px 22px; }
}

/* OFFER / ABLAUF */
.lp-offer-main { padding: clamp(32px, 4vw, 56px); }
.lp-offer-main p { color: var(--text-dim); font-size: 16px; margin: 16px 0 24px; }
.lp-offer-main .btn { margin-top: 24px; }
/* Card stack: every step sticks full-screen at top:0 and NEVER leaves — the
   next card slides up over it while it folds back in 3D underneath. That's
   what keeps the page background out of sight: at any scroll position at
   least one card covers the whole viewport.
   The key detail is that the cards are direct siblings inside .lp-offer-stack
   with no per-card wrapper box. A sticky element is held by its PARENT's
   padding box, so with the stack as parent, card 1 stays stuck all the way
   down instead of being released after its own height. Card N+1 sits 100vh
   further down in flow, so it slides up and paints over card N (later in DOM
   = on top), then sticks on top of it too.
   The last card needs 100vh of hold too, and that has to come from an empty
   .lp-offer-tail sibling rather than padding-bottom on the stack: a sticky
   box is confined to its containing block, which is the parent's CONTENT
   box, so padding there buys no extra hold (measured: the last card released
   instantly).
   3D values are 1:1 from mwg_effect031: perspective 250vw on the card's
   parent, transform-origin 50% 10% so it tips away from its own top edge.
   svh, not vh: on mobile the address bar resizing vh mid-scroll would make
   the hold length drift away from what ScrollTrigger measured. */
.lp-offer-stack { position: relative; }
.lp-offer-tail {
  height: 100vh;
  height: 100svh;
}
.lp-offer-item {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  perspective: 250vw;
}
/* The card stops at the nav's lower edge instead of sliding underneath. The
   offset sits on the CARD (paint), not on the sticky item (layout): the nav
   auto-hides, so --nav-h changes mid-scroll, and animating `top` on a sticky
   box or its height would move the flow and jitter the scroll. Here it's a
   pure inset change the card can transition in step with the nav. */
.lp-offer-item-card {
  position: absolute;
  inset: var(--nav-h, 0px) 0 0 0;
  transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  transform-origin: 50% 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.6vw, 52px);
  background: var(--fc);
  color: var(--tc);
  box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.14);
}
.lp-offer-card-top b {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 148px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  max-width: 14ch;
}
/* Inhalt der Stapelkarten (2026-09-02): Seit dem Tausch der beiden Effekte
   stehen hier die Einsatzbereiche — also Ueberschrift plus Aufzaehlung statt
   wie vorher ein Satz und eine Nummer. Deshalb eine Spalte statt der fruehere
   Zeile mit Satz links und Nummer rechts. Die Listenoptik ist bewusst
   dieselbe wie im Akkordeon (Pfeil als Aufzaehlungszeichen), damit beide
   Bausteine trotz getauschter Effekte zusammengehoerig aussehen. */
.lp-offer-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 640px;
}
/* Groesser seit dem 2026-09-02: Zwischen Ueberschrift oben und diesem Block
   standen auf dem Handy gemessene 355 bis 379 px Leerraum. */
.lp-offer-card-bottom h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.lp-offer-card-bottom ul { list-style: none; display: grid; gap: 16px; }
.lp-offer-card-bottom li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: clamp(21px, 2vw, 31px);
  line-height: 1.35;
}
.lp-offer-card-bottom li::before { content: "→"; font-weight: 700; flex: 0 0 auto; }
@media (max-aspect-ratio: 1/1) {
  .lp-offer-card-top b { max-width: none; }
  .lp-offer-card-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .lp-offer-card-bottom p { width: 100%; font-size: 17px; }
  .lp-offer-card-bottom span { font-size: 64px; }
}

/* FUNDING */
.lp-funding-box {
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px);
  border: 1px solid var(--accent-dim);
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--bg-card));
  text-align: left;
}

/* Kleines "Bis zu" ueber der Zahl. */
.lp-fund-kicker {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: clamp(4px, 0.8vw, 10px);
}

/* Zahl und Beschriftung nebeneinander, an der Grundlinie ausgerichtet —
   "Foerderung moeglich" steht damit rechts unten neben der 80 %. */
.lp-fund-headline {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 3vw, 28px);
  flex-wrap: nowrap;
}
.lp-fund-pct {
  font-family: var(--font-head);
  font-weight: 900;
  /* Deutlich groesser als die frueheren clamp(64px, 8vw, 110px). Nach oben
     begrenzt der vw-Anteil, damit "80 %" neben der Beschriftung auch auf
     schmalen Geraeten in eine Zeile passt — nachgemessen, siehe Commit. */
  font-size: clamp(64px, 24vw, 400px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  white-space: nowrap;
  /* Rechts etwas Luft: letter-spacing gilt auch HINTER dem letzten Zeichen und
     ist hier negativ, die Box endet also ein Stueck vor dem Prozentzeichen.
     Seit die Zahl einfarbig ist, schneidet das zwar nichts mehr ab (das lag am
     background-clip des frueheren Verlaufs), aber der Abstand zur Beschriftung
     daneben stimmt damit weiterhin. */
  padding-right: 0.1em;
  /* Derselbe Rotton wie der schwebende Knopf (.lp-float-cta), damit die Zahl
     und der Handlungsaufruf als eine Farbfamilie gelesen werden. Einfarbig
     statt Verlauf — "derselbe Rot" heisst genau ein Ton.
     Kontrast: 4,78:1 auf dem Kasten. Fuer Schrift dieser Groesse ist 3:1
     gefordert, das liegt also deutlich darueber (das fruehere Gelb kam auf
     9,66, es wird optisch also ruhiger, bleibt aber klar regelkonform). */
  color: #FF2E5B;
}
.lp-fund-label {
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(13px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Der Fliesstext steht jetzt klein unter der Zahl statt gross daneben. */
.lp-fund-sub {
  margin-top: clamp(20px, 2.6vw, 34px);
  max-width: 70ch;
  color: var(--text-dim);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
}
.lp-fine { display: block; margin-top: 14px; color: var(--text-dim); font-size: 11px; line-height: 1.5; }

@media (max-width: 860px) {
  /* Auf Mobile alles mittig und die Zahl so gross wie moeglich: Beschriftung
     unter statt neben der Zahl, damit ihr die volle Breite gehoert. Schmaleres
     Seitenpolster (12 statt 20 px) holt noch etwas mehr Platz.
     35vw ist nachgemessen die Obergrenze, bei der "80 %" samt Polster in einer
     Zeile bleibt — bei 375 px sind das 131 px (vorher 90), bei 320 px 112 px. */
  .lp-funding-box { padding: 28px 12px; text-align: left; }
  .lp-fund-headline {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .lp-fund-pct { font-size: clamp(80px, 35vw, 220px); }
  .lp-fund-label { font-size: clamp(18px, 5.4vw, 30px); }
}

/* Ab Tablet ist genug Platz fuer die volle Groesse: 440 px sind das Vierfache
   der frueheren 110 px. Der vw-Anteil haelt es darunter klein genug, damit
   "80 %" und die Beschriftung in einer Zeile bleiben — nachgemessen ist bei
   861 px Fensterbreite bei rund 261 px Schluss, 29vw ergibt dort 250 px. */
@media (min-width: 861px) {
  .lp-fund-pct { font-size: clamp(64px, 29vw, 440px); }
}

/* FAQ */
.lp-faq { max-width: 900px; margin: 32px auto 0; }
.lp-faq-item { border-bottom: 1px solid var(--border); }
.lp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  color: var(--text);
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.lp-faq-q span {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.lp-faq-item.open .lp-faq-q span { transform: rotate(45deg); }
.lp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.lp-faq-a p { max-width: 780px; padding-bottom: 22px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }

/* FINAL CTA */
/* Perspective on the wrapper so the box's pointer-follow rotationX/Y (JS) reads
   as a real 3D tilt. */
#lp-final .container { perspective: 1200px; }
.lp-final-box {
  padding: clamp(48px, 6vw, 90px) clamp(20px, 5vw, 60px);
  border: 1px solid var(--accent-dim);
  border-radius: 26px;
  background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%), var(--bg-card);
  text-align: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.lp-final-box .section-title { font-size: clamp(36px, 5.6vw, 64px); max-width: 900px; margin: 0 auto 16px; }
.lp-final-box p { color: var(--text-dim); max-width: 620px; margin: 0 auto 26px; }

/* FLOATING CTA — one big pill, bottom center, present on every screen and at
   every scroll position (it replaced the old mobile-only sticky CTA, which
   hid itself whenever another button was on screen). */
.lp-float-cta {
  position: fixed;
  z-index: 95;
  left: 50%;
  bottom: calc(clamp(16px, 3vh, 34px) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 20px clamp(36px, 5vw, 72px);
  border: none;
  border-radius: 999px;
  background: #FF2E5B;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(255, 46, 91, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.25s ease;
}
.lp-float-cta:hover {
  background: #ff4570;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 18px 50px rgba(255, 46, 91, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* While the lead form is open the button would sit on top of the dialog. */
body.modal-open .lp-float-cta { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  /* Kein body-padding mehr: das erzeugte unter dem Footer 96 px nackten
     Seitenhintergrund — der Footer soll das letzte Element der Seite sein.
     Der Freiraum, den der schwebende Button braucht, sitzt jetzt IM Footer
     (und in den Angebotskarten, siehe unten), nicht hinter ihm. */
  footer { padding-bottom: 118px; }
  /* Der Button liegt fest ueber der unteren Kante und verdeckte damit die
     Unterzeile der Angebotskarten komplett. Die Karte bekommt unten so viel
     zusaetzliches Padding, dass ihr Fussbereich oberhalb des Buttons endet. */
  .lp-offer-item-card {
    padding-bottom: calc(clamp(20px, 2.6vw, 52px) + 92px);

    /* Perf (2026-09-02), zwei Posten, die genau hier den groessten Teil des
       Ruckelns im Kartenstapel ausmachen:

       1. inset/transition: Die Karte hing mit ihrer Oberkante an --nav-h und
          hat jede Aenderung 0,35 s lang wegtransitioniert. --nav-h springt
          aber bei JEDEM Richtungswechsel des Scrollens zwischen 0 und der
          Nav-Hoehe — und `top` ist eine Layout-Eigenschaft. Es liefen also
          laufend 350-ms-Layout-Animationen auf FUENF bildschirmfuellenden
          Karten gleichzeitig, mitten im Scrollen. Auf dem Handy verdeckt die
          Karte ohnehin die volle Breite und die Nav blendet sich beim
          Runterscrollen aus: der Versatz bringt dort nichts und faellt weg.

       2. box-shadow: 30 px Weichzeichner auf einer bildschirmfuellenden
          Flaeche, die per scrub gedreht und skaliert wird — der Schatten muss
          bei jedem Bild neu weichgezeichnet werden. Sichtbar ist er praktisch
          nie, weil die Karten einander vollstaendig ueberdecken. */
    inset: 0;
    transition: none;
    box-shadow: none;
    /* Die Karte liegt randlos (inset: 0), den Abstand zur Leiste haelt der
       Inhalt ueber das Polster.

       Korrektur (2026-09-02): Hier stand kurzzeitig die volle Nav-Hoehe als
       KONSTANTE. Damit stand die Ueberschrift immer 84 px tief,
       auch beim Runterscrollen, wenn die Leiste laengst ausgeblendet ist —
       sichtbar tiefer als frueher. Jetzt wieder --nav-h, das beim Ausblenden
       auf 0 geht: Leiste weg -> Ueberschrift oben bei 20 px (wie vorher),
       Leiste da -> 84 px und damit frei von ihr. Exakt die alten Positionen.

       Der teure Teil war nie dieser Versatz, sondern die 0,35-s-Transition auf
       `top`, die ihn ueber rund zwanzig Bilder auf fuenf bildschirmfuellenden
       Karten wegfederte. Die bleibt weg (transition: none oben): Es bleibt ein
       einziges Layout pro Richtungswechsel der Leiste statt einer
       Dauer-Animation mitten im Scrollen. */
    padding-top: calc(clamp(20px, 2.6vw, 52px) + var(--nav-h, 0px));
  }

  /* Ueberschrift und die Nummer unten in derselben Groesse — hier zusammen
     gesetzt, damit sie nicht auseinanderlaufen koennen. Die 64 px kamen fuer
     die Nummer schon vorher aus dem (max-aspect-ratio: 1/1)-Block.

     Ohne Silbentrennung passen die langen Einzelwoerter nicht: gemessen bei
     375 px steht "Systemkonzeption" 465 px breit bei 335 px Platz,
     "Prozessanalyse" 388 px. Ein einzelnes Wort bricht von sich aus nicht um,
     es wuerde also an der Kante abgeschnitten.

     Getrennt wird ueber weiche Trennstriche (&shy;) im HTML, NICHT ueber
     hyphens: auto (Stand 2026-09-02). Mit "auto" entscheidet das Woerterbuch
     des jeweiligen Browsers, und das trennte hier an der falschen Stelle:
     "Systemkon-zeption" statt an der Wortfuge "System-konzeption". Weiche
     Trennstriche sind dagegen in jedem Browser gleich, brauchen kein
     Woerterbuch und sitzen genau dort, wo der Duden sie vorsieht.

     "manual" ist zwar der Vorgabewert, steht hier aber ausdruecklich: Nur die
     gesetzten Stellen duerfen genutzt werden, keine automatischen dazu. Kein
     overflow-wrap: break-word — das wuerde mitten im Wort und ohne Trennstrich
     umbrechen, sobald doch einmal etwas nicht passt. Lieber sichtbar zu breit
     als falsch getrennt. */
  .lp-offer-card-top b,
  .lp-offer-card-bottom span { font-size: 64px; }
  .lp-offer-card-top b {
    hyphens: manual;
    -webkit-hyphens: manual;
  }
  .lp-float-cta {
    width: calc(100% - 24px);
    max-width: 420px;
    padding: 18px 24px;
    font-size: 19px;
    /* Kleinerer Abstand nach unten: 3vh waren auf dem Handy ~24px, wodurch der
       Button sichtbar ueber dem unteren Rand hing, sobald die Browserleiste
       ausfaehrt. Der Safe-Area-Wert bleibt drin (iPhone-Home-Indicator). */
    bottom: calc(clamp(8px, 1.4vh, 16px) + env(safe-area-inset-bottom));
  }
}

/* Sehr schmale Geraete (iPhone SE der ersten Generation und aehnliche).
   Bei 320 px stehen nur 280 px zur Verfuegung, und dort passen "Technische",
   "Umsetzung" und "Optimierung" bei 64 px nicht mehr (gemessen 283, 284 und
   319 px). Trennstellen in diesen Woertern waeren die naheliegende Loesung,
   sind aber die schlechtere: Der Browser fuellt dann auch bei 375 px lieber
   die erste Zeile auf und trennt mitten im Wort ("Test und Opti-|mierung"),
   statt am Leerzeichen umzubrechen. Deshalb bleiben die Ueberschriften
   ungetrennt und werden auf sehr schmalen Geraeten stattdessen etwas kleiner —
   Ueberschrift und Nummer weiterhin gemeinsam, damit sie gleich gross
   bleiben. */
@media (max-width: 360px) {
  .lp-offer-card-top b,
  .lp-offer-card-bottom span { font-size: 54px; }
}

/* MODAL (3-step lead form — sole contact path) */
.lp-modal {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  padding: 20px;
  background: rgba(6, 7, 6, 0.82);
  backdrop-filter: blur(10px);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lp-modal.open { visibility: visible; opacity: 1; }
.lp-modal-card {
  position: relative;
  width: min(100%, 640px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 34px;
  border: 1px solid var(--accent-dim);
  border-radius: 24px;
  background: var(--bg-card);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
.lp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--bg);
  font-size: 20px;
  cursor: pointer;
}
.lp-progress { display: flex; gap: 6px; margin-bottom: 24px; padding-right: 50px; }
.lp-progress span { width: 100%; height: 4px; border-radius: 99px; background: var(--border); }
.lp-progress span.active { background: var(--accent); }
.lp-form-step { display: none; }
.lp-form-step.active { display: block; }
.lp-modal-head { padding-right: 30px; margin-bottom: 22px; }
.lp-modal-head h3 { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; }
.lp-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.lp-choice { position: relative; }
.lp-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-choice > span {
  display: block;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
}
.lp-choice input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lp-choice b { display: block; font-size: 14px; }
.lp-choice small { display: block; margin-top: 3px; color: var(--text-dim); font-size: 12px; }
.lp-choice--custom > span { padding-right: 40px; }
.lp-choice-remove {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--text-dim);
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.lp-choice-remove:hover { color: var(--text); background: var(--border); }
.lp-choice-add { display: flex; gap: 8px; margin-bottom: 18px; }
.lp-choice-add input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 13px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 14px;
  outline: 0;
}
.lp-choice-add input:focus { border-color: var(--accent-dim); }
.lp-choice-add-btn {
  flex: 0 0 auto;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-dim);
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lp-choice-add-btn:hover { color: var(--text); border-color: var(--text-dim); }
.lp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-field { display: grid; gap: 6px; }
.lp-field--full { grid-column: 1 / -1; }
.lp-field span { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.lp-field input, .lp-field select, .lp-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 14px;
  outline: 0;
}
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus { border-color: var(--accent-dim); }
/* Optionale Felder tragen einen gestrichelten Rahmen — dieselbe Sprache wie das
   Freitextfeld für eigene Bereiche in Schritt 1. */
.lp-field--optional input, .lp-field--optional textarea { border-style: dashed; }
.lp-field input, .lp-field select { min-height: 48px; padding: 0 13px; }
/* Eigener Pfeil statt des nativen: der sitzt sonst hart an der rechten Kante.
   appearance:none blendet den Systempfeil aus, das SVG sitzt frei positionierbar. */
.lp-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23A0A09C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 13px 8px;
}
.lp-field select option { color: #111; }
.lp-field textarea { min-height: 100px; padding: 12px 13px; resize: vertical; }
.lp-consent {
  display: flex;
  gap: 9px;
  margin: 16px 0;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.lp-consent input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); margin-top: 1px; }
.lp-form-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin-top: 16px; }
/* Zurück ist bewusst kein Button mehr, sondern ein reiner Textlink mit Pfeil —
   nur .btn-primary rechts soll als Fläche wirken. */
.lp-prev {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.lp-prev:hover { color: var(--text); }
.lp-error, .lp-success {
  display: none;
  margin: 12px 0;
  padding: 11px;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
}
.lp-error.show { display: block; border: 1px solid rgba(255, 121, 105, 0.3); color: #ffb6ad; background: rgba(255, 121, 105, 0.07); }
.lp-success.show { display: block; border: 1px solid var(--accent-dim); color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---------- Bestaetigungskarte (Schritt 4) ----------
   Bewusst leer und ruhig: keine Umrandung, keine Flaeche, kein zweiter Knopf.
   Die Karte IST die Bestaetigung, sie muss nicht zusaetzlich eingerahmt werden.
   .lp-form-step.active setzt display:block, deshalb hier das Layout erst im
   aktiven Zustand — sonst wuerde flex die Karte trotz display:none aufziehen. */
.lp-thanks { text-align: center; }
.lp-thanks.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  padding: 20px 10px;
}
.lp-thanks-title {
  font-family: var(--font-head);
  /* Deutlich groesser als die Schritt-Ueberschriften (dort clamp 24–34px) —
     die Karte soll als Abschluss wirken, nicht als weiterer Schritt. */
  font-size: clamp(44px, 9vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lp-thanks-text {
  max-width: 30ch;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 480px) {
  /* Auf Slavas Ansage (2026-09-03) kein Bottom-Sheet mehr, sondern vertikal
     zentriert wie am Desktop — auch die Danke-Karte, die vorher unten klebte.
     Die Sicherheitsabstaende von iPhone-Notch und Home-Indicator wandern dabei
     vom Kartenrand in den Aussenabstand des Fensters: das Sheet lag vorher am
     unteren Bildschirmrand an, die zentrierte Karte tut das nicht mehr. */
  .lp-modal {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
  .lp-modal-card {
    width: 100%;
    max-width: none;
    /* 100% = Hoehe des Fensters ABZUEGLICH des Paddings oben. Deshalb hier
       kein dvh-Wert: der wuerde die Sicherheitsabstaende ignorieren und die
       Karte wieder unter die Home-Leiste schieben. */
    max-height: 100%;
    padding: 20px 16px;
    border-radius: 22px;
  }
  /* Sechs Bereiche + Freitext: zweispaltig bleiben, sonst wird Schritt 1 zur Endlosliste. */
  .lp-form-grid { grid-template-columns: 1fr; }
  .lp-choice > span { padding: 12px 11px; }
  .lp-choice--custom > span { padding-right: 34px; }
  .lp-choice-add input { font-size: 16px; }
  .lp-field--full { grid-column: auto; }
  .lp-field input, .lp-field select, .lp-field textarea { font-size: 16px; }
  .lp-form-actions { grid-template-columns: 1fr; }
  .lp-form-actions .lp-prev { order: 2; justify-content: center; }
}

/* ANCHOR-SECTION ACCENT OVERRIDES — disabled for the colorless review pass
   (2026-08-23). Everything currently inherits the white --accent from :root.
   Re-enable per section once colors are reassigned manually:
#loesung { --accent: #FF2E5B; --accent-dim: #CC2549; }
#einsatzbereiche { --accent: #00D4FF; --accent-dim: #00AACC; }
#beispiel { --accent: #7A3CFF; --accent-dim: #6230CC; }
#vorher-nachher { --accent: #FF7A1A; --accent-dim: #CC6215; }
#foerderung { --accent: #FFB300; --accent-dim: #CC8F00; }
footer { --accent: #FFB300; --accent-dim: #CC8F00; }
*/

/* RECHTLICHE SEITEN (Impressum, Datenschutz) ------------------------------
   Eigene Seiten in derselben Gestaltung wie der Rest: dunkler Grund, unsere
   beiden Schriften, dieselbe Leiste und Fusszeile. Bewusst schmal gesetzt —
   Fliesstext ueber die volle Breite eines Desktopfensters liest sich schlecht,
   rund 70 Zeichen je Zeile sind die uebliche Obergrenze. */
.legal {
  padding: 132px var(--gutter) 96px;
}
.legal .container {
  max-width: 780px;
  margin: 0 auto;
}
.legal-brand {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.legal h1 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.legal h2 {
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.2;
  margin: 44px 0 12px;
}
.legal h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.25;
  margin: 28px 0 8px;
}
.legal p,
.legal li {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
}
.legal p { margin-bottom: 12px; }
.legal ul {
  margin: 0 0 12px;
  padding-left: 22px;
}
.legal li { margin-bottom: 4px; }
/* Verweise im Fliesstext sichtbar machen — sonst sind sie im Absatz nicht von
   normalem Text zu unterscheiden (a { color: inherit } gilt global). */
.legal a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal a:hover { text-decoration-thickness: 2px; }

@media (max-width: 860px) {
  .legal { padding: 104px var(--gutter) 64px; }
  .legal h2 { margin-top: 36px; }
}

/* FOOTER */
footer {
  padding: 40px var(--gutter) 90px;
  text-align: center;
}
.footer-cta.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(245, 245, 242, 0.25);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.footer-meta {
  color: var(--text-dim);
  font-size: 14px;
}
.footer-meta a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-meta a:hover { color: var(--text); }
/* Instagram + LinkedIn, under the meta line. */
.footer-socials {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-social:hover { color: var(--text); border-color: var(--text); }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; }
/* Big logo + wordmark lockup at the bottom of the footer (like the reference).
   Same masked SVG as the nav logo, so it stays color-adaptive. */
.footer-brand {
  display: block;
  width: 100%;
  aspect-ratio: 1787 / 292;
  margin-top: 24px;
  background-color: var(--text);
  -webkit-mask: url('assets/logo-wordmark.svg') no-repeat center / contain;
  mask: url('assets/logo-wordmark.svg') no-repeat center / contain;
}
.footer-cta {
  margin-top: 8px;
  /* 100% statt 88vw: der Button sitzt in .lp-final-box, deren Innenbreite um
     das Box-Padding kleiner ist als der Viewport — mit 88vw ragte er auf
     Handys seitlich aus der Box heraus. */
  width: min(550px, 100%);
  padding: 44px 0;
  font-size: 30px;
}

/* Auf Handys lief der Text ueber die runde Kante hinaus (kein seitliches
   Padding, 22px Schrift auf 88vw = zwei Zeilen + Ueberlauf). Der Button soll
   wie auf Desktop aussehen: eine Zeile, Text innerhalb der Pille — also
   seitliches Padding rein und die Schrift mit der Viewport-Breite skalieren. */
@media (max-width: 700px) {
  .footer-cta {
    padding: 26px 20px;
    font-size: clamp(12px, 3.6vw, 22px);
    white-space: nowrap;
  }
}

/* Muss HINTER dem footer-Kurzschreibweisen-Padding weiter oben stehen, sonst
   gewinnt jenes (gleiche Spezifitaet, spaeter im Dokument). Ersetzt das
   frueher am body haengende padding-bottom: der Footer traegt den Freiraum
   fuer den schwebenden Button jetzt selbst und bleibt damit das letzte
   Element der Seite. */
@media (max-width: 760px) {
  footer { padding-bottom: 118px; }
}

/* ===== 3D MAC MINI (Loesungs-Section) ===== */
.macmini-zone {
  position: relative;
  margin: 40px auto 0;
  padding-bottom: 70px;
  max-width: 860px;
  width: 100%;
}
#macmini-stage {
  width: 100%;
  height: clamp(260px, 40vw, 460px);
  cursor: grab;
}
#macmini-stage:active { cursor: grabbing; }
@media (pointer: coarse) {
  #macmini-stage { height: clamp(240px, 62vw, 380px); }
}