/* Lead-Funnel — Design analog zur Venture-Website.
 *
 * Die Standardwerte hier sind Flottille (flottille.app). Ein Venture hebt sie
 * über public/theme.json auf; theme.js schreibt sie als CSS-Variablen auf
 * :root. Wer ein Venture umfärben will, fasst diese Datei NICHT an — nur die
 * theme.json des Ventures im Vault (siehe templates/theme.template.json).
 */
:root {
  color-scheme: dark;

  /* --- Farben (aus flottille.app übernommen) --- */
  --ground:      #080c1e;   /* Seitenhintergrund */
  --ground-2:    #0c1328;   /* abgesetzte Fläche */
  --surface:     #111a38;   /* Karten */
  --border:      #222c52;
  --ink:         #edeffa;
  --ink-soft:    #c3c9e6;
  --muted:       #97a0c6;
  --accent:      #7d78ff;
  --accent-2:    #9a7cff;
  --accent-soft: #171f42;
  --accent-ink:  #ffffff;
  /* Screen 1 (A/B-Mockup 26.08.2026): Lime ist die Signalfarbe des Knopfes.
     Werte exakt aus der Design-Vorgabe, nicht geschaetzt. */
  --lime:        #C6F230;
  --lime-ink:    #0B1020;
  --mock-ground: #0B1020;
  --mock-accent: #A78BFA;
  --mock-ink:    #FFFFFF;
  --mock-soft:   #C7CCD9;
  --error:       #ff8080;
  /* Bestätigungs-Grün. Bewusst kein Akzent-Lila: "erledigt" soll sich vom
   * Rest abheben, sonst liest sich das Häkchen wie eine Schaltfläche. */
  --ok:          #34d399;

  /* --- Hero-Verlauf: die fünf Farbtupfer der Website --- */
  --grad-1: #3ecfe0;
  --grad-2: #4fa8ff;
  --grad-3: #5b6bff;
  --grad-4: #8a5cf6;
  --grad-5: #ff7a59;
  --grad-base: linear-gradient(125deg, #4a54ff, #7b5cf6);

  --shadow-md: 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 34px 70px -22px rgba(0,0,0,.7), 0 10px 24px -12px rgba(0,0,0,.55);
  --radius: 16px;
  --radius-sm: 11px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--ground);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.022em; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Hintergrund: der diagonale Verlauf der Website ---------- */
/* Auf der Website sitzt er als Keil rechts hinter dem App-Fenster. Hier
 * liegt er hinter der Funnel-Karte — gleicher Auftritt, gleiche Bewegung. */
.bg {
  position: fixed;
  z-index: 0;
  /* Diagonale durch die Bildmitte: links etwas weniger als die Hälfte dunkel,
   * rechts etwas mehr farbig — der Schnitt der Website. Die Karte ist deckend
   * und liegt darüber. */
  top: -12%; right: -14%; bottom: -20%; left: 44%;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
  pointer-events: none;
  filter: saturate(1.05) brightness(.88);
}
.bg::before {
  content: "";
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(46% 60% at 18% 24%, var(--grad-1) 0%, transparent 62%),
    radial-gradient(44% 58% at 46% 8%,  var(--grad-2) 0%, transparent 58%),
    radial-gradient(52% 74% at 72% 30%, var(--grad-3) 0%, transparent 60%),
    radial-gradient(48% 66% at 92% 12%, var(--grad-4) 0%, transparent 58%),
    radial-gradient(46% 64% at 66% 82%, var(--grad-5) 0%, transparent 56%),
    var(--grad-base);
  animation: drift 22s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.08) rotate(4deg); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.05) rotate(-3deg); }
}

/* ---------- Layout ---------- */
.funnel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  /* Ohne min-width:0 schrumpft die Spalte als Flex-Kind des Body nicht unter
   * ihre Mindestbreite — auf schmalen Handys liefe die Karte sonst rechts raus. */
  min-width: 0;
  padding: clamp(22px, 3vw, 34px) 20px 28px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* ---------- Kopf: Wortmarke + Eyebrow ---------- */
/* Bis theme.js die Venture-Marke gesetzt hat, bleibt der Kopf unsichtbar —
 * sonst blitzt beim Laden kurz die falsche Marke auf. */
.theming .brand, .theming .eyebrow { visibility: hidden; }
.funnel > header { margin-bottom: 22px; }
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-weight: 660;
  font-size: 1.55rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand__mark { display: block; height: 44px; width: auto; }
.brand__name[hidden] { display: none; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Nicht in Akzentfarbe wie auf der Website: die Zeile kreuzt den Verlauf,
   * und Lila auf Lila verschwindet. Heller Text mit weichem Schatten liest
   * sich auf beiden Hälften. */
  color: var(--ink);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
  font-weight: 600;
  text-align: center;
  margin-top: 14px;
}
.eyebrow:empty { display: none; }

/* ---------- Fortschritt ---------- */
.progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
/* Ohne diese Zeile setzt sich das display:flex gegen das hidden-Attribut durch
 * und die Anzeige blieb auf dem Abschluss-Schirm als "Schritt 5 von 5" stehen. */
.progress[hidden] { display: none; }
.progress__bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
}
.progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--progress, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.progress__label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
  white-space: nowrap;
}

/* ---------- Karte ---------- */
/* Deckend, damit der Verlauf dahinter nie die Lesbarkeit kostet — genau wie
 * das App-Fenster im Hero der Website. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 4vw, 36px) clamp(22px, 3.4vw, 34px);
  /* Feste Mindesthöhe: die Schritte haben unterschiedlich viele Antworten.
   * Ohne sie springt die Karte bei jedem Klick in der Höhe. */
  min-height: clamp(420px, 56vh, 560px);
  animation: rise .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.card__loading { color: var(--muted); text-align: center; }

/* ══════════════ Verkaufsseite (vor den Fragen) ══════════════
 *
 * Eigenes Gehäuse, nicht das der Frage-Karte. Die Karte ist eine schmale,
 * deckende Fläche für genau eine Handlung; die Verkaufsseite wird gescrollt,
 * braucht Breite, Trennung zwischen den Abschnitten und einen ruhigen Grund.
 *
 * Der diagonale Verlauf bleibt dem Hero vorbehalten. Über die ganze Seite
 * gezogen schnitt er quer durch den Text — Überschriften standen auf hellem
 * Lila und waren stellenweise nicht mehr lesbar.
 */

/* --- Gehäuse --- */
body.is-landing .funnel { max-width: 1120px; }

/* Verlauf zähmen: kein Keil quer über die Seite mehr, sondern ein weicher
 * Schimmer, der oben hinter dem Hero sitzt und nach unten ausläuft. */
body.is-landing .bg {
  top: -30%; right: -25%; left: -25%; bottom: auto;
  height: 105vh;
  clip-path: none;
  opacity: .42;
  filter: saturate(1.05) brightness(.8) blur(20px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 45%, transparent 82%);
}

.landing {
  --landing-gap: clamp(56px, 9vw, 104px);
  display: flex;
  flex-direction: column;
  gap: var(--landing-gap);
  animation: rise .55s cubic-bezier(.2,.7,.2,1) both;
  padding-bottom: 40px;
}
/* Dieselbe Falle wie oben bei .progress: display:flex setzt sich gegen das
 * hidden-Attribut durch. Ohne diese Zeile blieb die ganze Verkaufsseite nach
 * dem Klick auf den Aufruf stehen und die erste Frage rutschte darunter ans
 * Seitenende — sichtbar war nur noch der Fortschrittsbalken. */
.landing[hidden] { display: none; }

/* Volle Breite über die Spalte hinaus — für Abschnitte, die als eigenes Band
 * vom Rest abgesetzt werden. Ohne die Bänder läuft die Seite ineinander und
 * man weiß beim Scrollen nie, wo ein Gedanke aufhört. */
.lp-bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: clamp(40px, 6vw, 68px);
  background: color-mix(in srgb, var(--ground-2) 78%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* --- gemeinsame Bausteine --- */
.lp-sec { display: flex; flex-direction: column; gap: clamp(18px, 2.6vw, 26px); }

/* Abschnitts-Marke. Sagt in zwei Wörtern, wo man gerade ist — beim Scrollen
 * die billigste Orientierung, die es gibt. */
.lp__marke {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0;
  text-align: center;
}
.lp__h2 {
  font-size: clamp(1.45rem, 3.6vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -.025em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 auto;
  max-width: 22ch;
  text-align: center;
  text-wrap: balance;
}

/* --- Hero --- */
.lp-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  padding-top: clamp(6px, 2vw, 22px);
}
.lp-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
  font-weight: 600;
  margin: 0;
}
.lp-hero__title {
  font-size: clamp(2rem, 6.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.032em;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  max-width: 17ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
  text-wrap: balance;
}
.lp-hero__sub {
  font-size: clamp(1rem, 1.9vw, 1.14rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 54ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}

/* --- Aufruf: Pille, nicht Balken ---
 * Der Knopf über die volle Spaltenbreite sah aus wie ein Eingabefeld. Eine
 * Pille, die nur so breit ist wie ihr Text, liest sich als Handlung. */
.lp__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.lp__btn {
  width: auto;
  min-width: min(100%, 300px);
  border-radius: 999px;
  padding: 1em 2.2em;
  font-size: 1rem;
  box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.lp__ctanote { font-size: .82rem; color: var(--muted); margin: 0; text-align: center; }

/* ══════════════ Das Flottille-Fenster ══════════════
 * Unser Produktbild — nachgebaut statt fotografiert, übernommen von
 * flottille.app. Zeigt die Sache selbst: links die Team-Skills, rechts eine
 * laufende Sitzung, unten der git-pull vor jedem Start.
 * Eigener Präfix `fw__`, weil .side/.main/.chip/.done im Funnel vergeben sind. */
.fw {
  width: 100%;
  /* 880px waren zu breit: das Fenster wurde flach wie ein Briefkasten
   * (rund 2,9:1). Ein echtes Programmfenster ist deutlich höher als breit-flach.
   * Das min() ist das Sicherheitsnetz: was auch immer im Inneren an Breite
   * fordert, das Fenster bleibt in seinem Rahmen. */
  max-width: min(760px, 100%);
  margin-top: clamp(14px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}
.fw__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--ground-2) 60%, var(--surface));
}
.fw__light { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.fw__light--r { background: #ff5f57; }
.fw__light--y { background: #febc2e; }
.fw__light--g { background: #28c840; }
.fw__title {
  margin-inline: auto;
  font-size: .74rem;
  color: var(--muted);
  font-weight: 550;
  font-family: var(--font-mono);
}
/* Seitenverhältnis statt fester Mindesthöhe: die Höhe richtet sich damit nach
 * der EIGENEN Breite des Fensters, nicht nach der des Bildschirms. Genau das
 * fehlte — mit einer viewport-abhängigen Höhe wäre es auf dem iPad wieder flach
 * geworden, weil dort das Fenster breit, das Fenster-Viewport aber kurz ist.
 * Die Mindesthöhe fängt schmale Handys ab, wo 16:10 zu niedrig für den Inhalt wäre. */
.fw__body {
  display: grid;
  /* minmax(0, 1fr) statt 1fr — das ist der ganze Unterschied:
   * "1fr" heißt in Wahrheit "minmax(auto, 1fr)", und dieses auto ist die
   * MINDESTBREITE DES INHALTS. Die Spalte konnte deshalb nie schmaler werden
   * als die längste Chat-Zeile; am Handy lief der Text aus dem Fenster und
   * wurde vom overflow:hidden abgeschnitten. Mit 0 als Minimum darf die Spalte
   * schrumpfen und der Text bricht um. */
  grid-template-columns: clamp(96px, 26%, 158px) minmax(0, 1fr);
  /* Seitenverhältnis nur ab Tablet — siehe die Handy-Regel weiter unten.
   * Am Handy zusammen mit einer Mindesthöhe erzwungen, löst sich der
   * Widerspruch über die BREITE auf: das Fenster wurde breiter als der
   * Bildschirm und alles rechts davon abgeschnitten. */
  aspect-ratio: 16 / 10;
  min-height: 272px;
}

.fw__side {
  border-right: 1px solid var(--border);
  padding: .85rem .7rem;
  background: color-mix(in srgb, var(--ground-2) 45%, var(--surface));
  display: flex;
  flex-direction: column;
}
.fw__sidehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4em;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: .7rem;
  flex-wrap: wrap;
}
.fw__sync {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: var(--ok);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.fw__sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.fw__skill {
  display: flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-soft);
  padding: .32rem .4rem;
  border-radius: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fw__dot { width: 5px; height: 5px; border-radius: 1.5px; background: var(--accent); opacity: .8; flex: none; }
.fw__skill--lit {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent);
  color: var(--ink);
}
.fw__skill--lit .fw__dot { opacity: 1; box-shadow: 0 0 8px 1px var(--accent); }
.fw__sidefoot {
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: .58rem;
  color: var(--muted);
  line-height: 1.4;
}

.fw__main { padding: .95rem 1rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
/* Schiebt die Eingabezeile an den unteren Rand, egal wie hoch das Fenster ist. */
.fw__input {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ground-2) 60%, var(--surface));
}
.fw__caret {
  width: 2px;
  height: 13px;
  background: var(--accent);
  flex: none;
  border-radius: 1px;
  animation: fwblink 1.15s steps(1) infinite;
}
@keyframes fwblink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.fw__placeholder { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }

/* ---- Handy ----
 * Zwei Dinge anders als am Rechner:
 *
 * 1. KEIN Seitenverhältnis. Am Telefon soll der Inhalt die Höhe bestimmen.
 *    16:10 plus Mindesthöhe war ein Widerspruch, den der Browser über die
 *    Breite gelöst hat — das Fenster wurde breiter als der Bildschirm, und
 *    die ganze rechte Spalte lag außerhalb.
 * 2. Alles eine Spur kleiner und die Seitenleiste schmaler, damit der Chat
 *    genug Platz bekommt. Nichts wird ausgeblendet, nur dichter gestellt. */
@media (max-width: 560px) {
  .fw__body {
    aspect-ratio: auto;
    min-height: 0;
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .fw__side { padding: .7rem .45rem; }
  .fw__sidehead { font-size: .53rem; margin-bottom: .5rem; gap: .2em; }
  .fw__skill { font-size: .62rem; padding: .24rem .28rem; gap: .3em; }
  .fw__sidefoot { font-size: .52rem; padding-top: .5rem; }
  .fw__main { padding: .7rem .75rem; gap: .5rem; }
  .fw__bar { padding: .55rem .7rem; }
  .fw__title { font-size: .66rem; }
  .fw__light { width: 9px; height: 9px; }
  .fw__tab { font-size: .6rem; }
  .fw__msgu { font-size: .72rem; max-width: 94%; }
  .fw__answer { font-size: .72rem; }
  .fw__chip { font-size: .6rem; }
  .fw__fname { font-size: .64rem; }
  .fw__file { padding: .35rem .5rem; }
  .fw__input { padding: .45rem .6rem; }
  .fw__placeholder { font-size: .64rem; }
}
.fw__tab {
  align-self: flex-start;
  font-size: .64rem;
  font-family: var(--font-mono);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .18rem .5rem;
}
.fw__msgu {
  align-self: flex-end;
  max-width: 86%;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .5rem .7rem;
  border-radius: 12px 12px 4px 12px;
  font-size: .78rem;
  line-height: 1.45;
  /* Lange Wörter (Dateinamen, Firmennamen) sollen umbrechen statt das
   * Fenster aufzuspreizen. */
  overflow-wrap: anywhere;
}
.fw__msga { max-width: 94%; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.fw__chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: .16rem .5rem;
  border-radius: 999px;
}
.fw__chip::before { content: "▸"; font-size: .7em; }
.fw__answer { font-size: .78rem; color: var(--ink-soft); line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.fw__file {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: .15rem;
  padding: .4rem .65rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--ground-2) 55%, var(--surface));
  max-width: 100%;
}
.fw__check { color: var(--ok); font-weight: 700; flex: none; }
.fw__fname {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════ Spiegel-Frage ══════════════
 * Zwei große Flächen statt zweier grauer Knöpfe. Sie ist der erste Moment, in
 * dem der Besucher etwas TUT — das darf man sehen. */
.lp-spiegel { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 26px); align-items: center; }
.lp-spiegel__q {
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
  font-weight: 680;
  line-height: 1.24;
  letter-spacing: -.022em;
  color: var(--ink);
  margin: 0;
  max-width: 26ch;
  text-align: center;
  text-wrap: balance;
}
.lp-spiegel__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  max-width: 660px;
}
@media (min-width: 560px) { .lp-spiegel__actions { grid-template-columns: 1fr 1fr; } }
.lp-spiegel__btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lp-spiegel__btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.lp-spiegel__mark {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 36px) 20px;
  background: color-mix(in srgb, var(--ground-2) 70%, var(--surface));
  /* Die grauen Figuren erben diese Farbe über currentColor. */
  color: color-mix(in srgb, var(--muted) 46%, transparent);
}
/* Deutlich größer als zuvor: bei 76 px las sich die Zeichnung wie eine
 * Ladeanzeige, nicht wie ein Bild — sie wurde für ein fehlendes Bild gehalten. */
.lp-spiegel__mark svg { width: clamp(150px, 42vw, 210px); height: auto; display: block; }
.lp-spiegel__label {
  padding: .85em 1em;
  font-size: .98rem;
  font-weight: 650;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-top: 1px solid var(--border);
  color: var(--ink);
}
.lp-spiegel__btn--on { border-color: var(--accent); }
.lp-spiegel__btn--on .lp-spiegel__label { background: var(--accent); color: var(--accent-ink); }
.lp-spiegel__antwort {
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
  text-align: center;
}

/* ══════════════ Karten-Raster ══════════════
 * auto-fit statt fester Spaltenzahl: drei Karten stehen bei genug Platz zu
 * dritt, vier zu viert, und beide brechen von selbst sauber um. Vorher standen
 * drei Karten in zwei Spalten — 2 oben, 1 unten links, ausgefranst. */
/* Spaltenzahl folgt der Kartenzahl, nicht dem verfügbaren Platz.
 * auto-fit rechnete vier Karten in drei Spalten — die vierte stand als Waise
 * darunter. Vier Karten stehen deshalb als 2×2, drei nebeneinander. */
.lp-karten { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .lp-karten--2, .lp-karten--4 { grid-template-columns: repeat(2, 1fr); }
  .lp-karten--3 { grid-template-columns: repeat(3, 1fr); }
  /* Fünf und mehr: gleichmäßig umbrechen lassen, nie eine einzelne Waise. */
  .lp-karten--5, .lp-karten--6 { grid-template-columns: repeat(3, 1fr); }
}
.lp-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lp-karte__t { font-size: 1.02rem; font-weight: 660; line-height: 1.3; color: var(--ink); margin: 0; }
.lp-karte__p { font-size: .93rem; line-height: 1.62; color: var(--ink-soft); margin: 0; }

/* ══════════════ Die Zahl ══════════════ */
/* Schmaler Streifen statt eigenem Abschnitt: die Zahl trägt einen Gedanken,
 * dafür reicht eine Zeile. Am Rechner steht die Zahl links neben dem Text,
 * am Handy darüber. */
.lp-zahl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 22px;
  align-items: center;
  padding: clamp(18px, 2.6vw, 24px) clamp(20px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
@media (min-width: 620px) {
  .lp-zahl { grid-template-columns: auto 1fr; }
  .lp-zahl__n { grid-row: 1 / span 2; }
}
.lp-zahl__n {
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.lp-zahl__t { font-size: clamp(.95rem, 1.7vw, 1.05rem); line-height: 1.55; color: var(--ink); margin: 0; }
.lp-zahl__hinweis { font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 6px 0 0; font-weight: 650; }
.lp-zahl__q { font-size: .74rem; color: var(--muted); margin: 0; }

/* ══════════════ Vorher-Nachher-Vergleich ══════════════
 * Zeigt statt zu erklären. Beide Spalten tragen dieselbe Aufgabe; nur die
 * rechte hat die Vorgaben des Betriebs — und ist als einzige hervorgehoben. */
.lp-skill { align-items: center; }
.lp-skill__aufgabe {
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--ground-2) 70%, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  max-width: 44ch;
}

.lp-skill__paar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}
@media (min-width: 720px) { .lp-skill__paar { grid-template-columns: 1fr 1fr; } }

.lp-skill__spalte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Nur die rechte Spalte leuchtet. Beide gleich hell wäre ein Vergleich ohne
 * Aussage — der Blick soll dorthin, wo der Unterschied entsteht. */
.lp-skill__spalte--mit {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.lp-skill__label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.lp-skill__spalte--mit .lp-skill__label { color: var(--accent); }
.lp-skill__text { font-size: .95rem; line-height: 1.62; color: var(--ink-soft); margin: 0; }
.lp-skill__spalte--mit .lp-skill__text { color: var(--ink); }

.lp-skill__zutaten { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lp-skill__zutat {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .3em .85em;
  background: var(--surface);
}
.lp-skill__hinweis {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 48ch;
  text-align: center;
  font-weight: 600;
}

/* Vertrauensblock: Person und Ehrlichkeit in einem Band. */
.lp-vertrauen { display: flex; flex-direction: column; gap: clamp(26px, 4vw, 38px); }

/* ══════════════ Ablauf ══════════════
 * Die Nummer trägt echte Information — es IST eine Reihenfolge. Deshalb ein
 * <ol> mit sichtbarem Zähler, keine dekorativen Ziffern. */
.lp-ablauf {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.lp-ablauf__s {
  counter-increment: schritt;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 16px;
  border-top: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.lp-ablauf__s::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .06em;
}
.lp-ablauf__t { font-size: 1.02rem; font-weight: 660; color: var(--ink); margin: 0; }
.lp-ablauf__p { font-size: .93rem; line-height: 1.62; color: var(--ink-soft); margin: 0; }

/* ══════════════ Stimmen als laufendes Band ══════════════
 * Die Karten sind einmal gedoppelt; die Spur läuft genau um den Originalsatz
 * plus eine Lücke, dann springt sie zurück — durch die Dopplung unsichtbar. */
/* Die Karten sollen an beiden Rändern ins Dunkle laufen, nicht abgeschnitten
 * wirken. Der Verlauf ist am Rechner breit genug, dass eine ganze Karte darin
 * verschwindet — dadurch sieht man, dass es weitergeht. Am Handy schmaler,
 * sonst frisst er die eine sichtbare Karte. */
.lp-band {
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  --fade: 9%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
@media (min-width: 900px) { .lp-band { --fade: 20%; } }
.lp-band__spur { display: flex; gap: 14px; width: max-content; animation: bandlauf var(--lauf, 36s) linear infinite; }
.lp-band:hover .lp-band__spur,
.lp-band:focus-within .lp-band__spur { animation-play-state: paused; }
@keyframes bandlauf {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 7px)); }
}
.lp-stimme {
  flex: 0 0 clamp(262px, 74vw, 340px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Die Namenszeile sitzt unten, egal wie lang das Zitat ist — sonst stünden die
 * Namen bei ungleich langen Zitaten auf unterschiedlicher Höhe. */
.lp-stimme__wer { margin-top: auto; padding-top: 4px; }
/* Bewertungssterne. Gold statt Akzentfarbe — das Zeichen kennt jeder, und in
 * Lila läse es sich wie Dekoration statt wie eine Bewertung. */
.lp-sterne { display: flex; gap: 3px; }
.lp-sterne svg { width: 15px; height: auto; fill: #f5b301; display: block; }

.lp-stimme__q { font-size: .95rem; line-height: 1.62; color: var(--ink); margin: 0; }
.lp-stimme__wer { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.lp-stimme__wer--entwurf {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
}

/* ══════════════ Person ══════════════ */
.lp-person { align-items: center; }
.lp-person__box {
  display: flex;
  gap: clamp(16px, 3vw, 26px);
  align-items: center;
  flex-direction: column;
  text-align: center;
  max-width: 620px;
}
@media (min-width: 620px) { .lp-person__box { flex-direction: row; text-align: left; align-items: flex-start; } }
.lp-person__bild {
  width: clamp(96px, 18vw, 128px);
  height: clamp(96px, 18vw, 128px);
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.lp-person__txt { display: flex; flex-direction: column; gap: 8px; }
.lp-person__name { font-size: 1.08rem; font-weight: 680; color: var(--ink); margin: 0; }
.lp-person__bio { font-size: .95rem; line-height: 1.62; color: var(--ink-soft); margin: 0; }
.lp-person__hinweis {
  font-size: .95rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
  text-align: center;
}

/* ══════════════ Ehrlichkeits-Block ══════════════
 * Wer zugibt, wo die Grenze liegt, wird beim Rest eher geglaubt. */
.lp-ehrlich {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius);
  padding: clamp(22px, 3.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.lp-ehrlich__h { font-size: clamp(1.05rem, 2.4vw, 1.25rem); font-weight: 680; line-height: 1.35; color: var(--ink); margin: 0; }
.lp-ehrlich__p { font-size: .95rem; line-height: 1.62; color: var(--ink-soft); margin: 0; }

/* ══════════════ Schluss ══════════════ */
.lp-schluss { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* Verknappung: ruhig gesetzt, nicht in Alarmfarbe. Sie soll als Tatsache
 * gelesen werden, nicht als Verkaufsdruck — sonst glaubt sie keiner. */
.lp-knappheit {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
  text-align: center;
  padding: 14px 20px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius);
}

/* ══════════════ Bewegung ══════════════
 * Greift nur, wenn app.js die Klasse `belebt` gesetzt hat. Ohne JavaScript oder
 * bei abgeschalteten Animationen ist alles von Anfang an sichtbar — die Seite
 * darf nie leer bleiben, weil ein Effekt nicht startet. */

/* 1 · Abschnitte: aufblenden und leicht steigen. */
.belebt > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.belebt > .is-in { opacity: 1; transform: none; }

/* 2 · Karten und Schritte kommen versetzt — einer nach dem anderen statt
 *     alle vier auf einmal. Die Verzögerung ist klein; es soll wirken, als
 *     ordne sich etwas, nicht als lade etwas nach. */
.belebt .lp-karte,
.belebt .lp-ablauf__s,
.belebt .lp-stimme {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.belebt .is-in .lp-karte,
.belebt .is-in .lp-ablauf__s,
.belebt .is-in .lp-stimme { opacity: 1; transform: none; }
.belebt .is-in .lp-karte:nth-child(1),
.belebt .is-in .lp-ablauf__s:nth-child(1) { transition-delay: .06s; }
.belebt .is-in .lp-karte:nth-child(2),
.belebt .is-in .lp-ablauf__s:nth-child(2) { transition-delay: .15s; }
.belebt .is-in .lp-karte:nth-child(3),
.belebt .is-in .lp-ablauf__s:nth-child(3) { transition-delay: .24s; }
.belebt .is-in .lp-karte:nth-child(4) { transition-delay: .33s; }

/* 3 · Die Vergleichs-Spalten fahren von außen zusammen. Sie zeigen einen
 *     Gegensatz — also bewegen sie sich aufeinander zu, nicht nach oben. */
.belebt .lp-skill__spalte {
  opacity: 0;
  transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
}
.belebt .lp-skill__spalte:first-child { transform: translateX(-22px); }
.belebt .lp-skill__spalte--mit { transform: translateX(22px); }
.belebt .is-in .lp-skill__spalte { opacity: 1; transform: none; }
.belebt .is-in .lp-skill__spalte--mit { transition-delay: .12s; }
@media (max-width: 719px) {
  /* Untereinander gestapelt ergibt seitliches Einfahren keinen Sinn. */
  .belebt .lp-skill__spalte:first-child,
  .belebt .lp-skill__spalte--mit { transform: translateY(14px); }
}

/* 4 · Die Zutaten-Plaketten poppen kurz nacheinander auf. */
.belebt .lp-skill__zutat {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .4s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1);
}
.belebt .is-in .lp-skill__zutat { opacity: 1; transform: none; }
.belebt .is-in .lp-skill__zutat:nth-child(1) { transition-delay: .30s; }
.belebt .is-in .lp-skill__zutat:nth-child(2) { transition-delay: .38s; }
.belebt .is-in .lp-skill__zutat:nth-child(3) { transition-delay: .46s; }
.belebt .is-in .lp-skill__zutat:nth-child(4) { transition-delay: .54s; }

/* 5 · Das Foto kommt sanft heran statt von unten. */
.belebt .lp-person__bild {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.belebt .is-in .lp-person__bild { opacity: 1; transform: none; }

/* 6 · Der Aufruf pulst einmal ganz leicht, wenn er ins Bild kommt. */
.belebt .is-in .lp__btn { animation: einpuls 2.4s ease-out .35s 1; }
@keyframes einpuls {
  0%, 100% { box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
  22%      { box-shadow: 0 14px 46px -8px color-mix(in srgb, var(--accent) 92%, transparent); }
}

/* ── Das Fenster im Einstieg spielt eine kleine Szene ────────────────────
 * Reines CSS mit Verzögerungen: erst leuchtet der Skill in der Seitenleiste
 * auf, dann kommt die Frage, dann die Antwort, dann die fertige Datei. Es
 * zeigt in vier Sekunden, was der Text daneben erklärt. */
.belebt .fw__skill--lit { animation: fwleuchten 1s ease-out .5s both; }
@keyframes fwleuchten {
  from { background: transparent; box-shadow: none; }
}
.belebt .fw__msgu { opacity: 0; animation: fwrein .5s cubic-bezier(.2,.7,.2,1) 1.0s forwards; }
.belebt .fw__msga { opacity: 0; animation: fwauf .6s ease 1.9s forwards; }
.belebt .fw__file { opacity: 0; animation: fwdatei .5s cubic-bezier(.34,1.3,.5,1) 2.6s forwards; }
.belebt .fw__input { opacity: 0; animation: fwauf .5s ease 3.1s forwards; }
@keyframes fwrein  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fwauf   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fwdatei { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .landing, .fw { animation: none; }
  /* Statt zu laufen wird das Band wischbar — der Inhalt bleibt erreichbar. */
  .lp-band { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lp-band__spur { animation: none; }
  .lp-spiegel__btn:hover { transform: none; }
  /* Sicherheitsnetz: Falls die Klasse `belebt` doch gesetzt wurde, ist hier
   * alles sofort sichtbar. Kein Effekt darf Inhalt verstecken. */
  .belebt > *,
  .belebt .lp-karte, .belebt .lp-ablauf__s, .belebt .lp-stimme,
  .belebt .lp-skill__spalte, .belebt .lp-skill__zutat,
  .belebt .lp-person__bild,
  .belebt .fw__msgu, .belebt .fw__msga, .belebt .fw__file, .belebt .fw__input {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}



.question__intro { color: var(--muted); font-size: .98rem; margin-bottom: 16px; }
.question__title {
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.14;
  margin-bottom: 26px;
}

/* ---------- Antwort-Optionen ---------- */
.options { display: grid; gap: 11px; }
.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7em;
  text-align: left;
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--ground-2) 55%, var(--surface));
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  transition: transform .16s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Der kleine Akzent-Block ist das Skill-Zeichen aus dem Website-Mockup. */
.option::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .8;
  flex: none;
  transition: box-shadow .2s ease, opacity .2s ease;
}
/* Nur an Geraeten mit echtem Mauszeiger. Auf dem Handy bleibt der
   Hover-Zustand nach einem Tipp am Element haengen: Wer Frage 1 antippt,
   sieht auf Frage 2 die Antwort an derselben Stelle hervorgehoben — es
   sieht aus wie vorausgewaehlt. Von Erdal auf dem Handy gemeldet, am
   Desktop trat es nicht auf. */
@media (hover: hover) and (pointer: fine) {
  .option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }
  .option:hover::before { opacity: 1; box-shadow: 0 0 8px 1px var(--accent); }
}
.option:active { transform: none; }

/* ---------- Kontaktfelder ---------- */
.fields { display: grid; gap: 15px; margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.field input {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--ground-2) 55%, var(--surface));
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field--error input { border-color: var(--error); }
.field__err { color: var(--error); font-size: .8rem; margin-top: 6px; display: none; }
.field--error .field__err { display: block; }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.5;
}
.consent input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--accent);
}
.consent a { color: var(--accent); text-decoration: none; }
.consent a:hover { text-decoration: underline; }
.consent.consent--error { color: var(--error); }



/* Beruhigungssatz unter dem Absenden-Knopf. */
.submit-note {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 10px 0 0;
  text-align: center;
}

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  width: 100%;
  padding: .85em 1.25em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-weight: 600;
  font-size: .99rem;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent);
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.back {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: .88rem;
  cursor: pointer;
  margin-top: 18px;
  padding: 4px 0;
  transition: color .15s ease;
}
.back:hover { color: var(--ink); }

/* ---------- Abschluss ---------- */
.result { text-align: center; padding: 26px 0; }
.result__icon { font-size: 42px; margin-bottom: 14px; line-height: 1; }
.result__text { font-size: 1.08rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Abschluss mit Terminkalender ---------- */

/* Die Funnel-Spalte ist bewusst schmal (640px) — eine Frage nach der anderen,
 * ohne Ablenkung. Für den Kalender reicht das nicht: Unter etwa 900px stellt
 * Calendly Beschreibung und Terminauswahl untereinander statt nebeneinander,
 * und die Tagesauswahl rutscht weit nach unten. Deshalb wird die Spalte auf
 * dem Abschluss-Schirm einmalig breiter. */
body.is-done .funnel { max-width: 1120px; }
body.is-done .card {
  min-height: 0;
  padding: clamp(20px, 2.4vw, 28px);
}

.done { text-align: center; padding: 8px 0 4px; }

/* Bestätigungs-Grün mit leuchtendem Ring — hebt sich vom Akzent-Lila ab,
 * damit das Häkchen nicht wie eine Schaltfläche aussieht. */
.done__icon {
  width: 48px; height: 48px; border-radius: 50%;
  margin: 0 auto .9rem;
  display: grid; place-items: center;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 20%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ok) 75%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ok) 10%, transparent),
    0 0 20px -1px color-mix(in srgb, var(--ok) 55%, transparent);
}
.done__text { font-size: 1.06rem; line-height: 1.45; color: var(--ink); font-weight: 600; }
.done__sub { margin-top: .5rem; font-size: .93rem; color: var(--muted); }

/* Der Rückruf-Hinweis bleibt bewusst gleichwertig sichtbar und wird nicht
 * kleingeredet: Wer sich nicht sofort festlegen will, soll sich nicht
 * gedrängt fühlen. */
.done__later { margin-top: 1rem; font-size: .93rem; color: var(--muted); }

/* Der Kalender läuft in Calendlys heller Standarddarstellung — deshalb ist der
 * Rahmen ebenfalls hell hinterlegt. Sonst entstünde an den Rändern eine
 * sichtbare Kante zwischen unserem Dunkelblau und Calendlys Fläche. */
.cal {
  margin-top: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  height: 700px; /* Startwert, bis Calendly seine echte Höhe meldet */
}
.cal__widget {
  width: 100%;
  min-width: 280px;
  height: 800px;
  /* Calendlys Innenabstand oben wegschneiden (nachgemessen: 66px). */
  margin: -66px 0 0 0 !important;
  padding: 0 !important;
  background: #fff;
}
.cal__hint {
  padding: 2.2rem 1.2rem;
  text-align: center;
  font-size: .92rem;
  color: var(--muted);
  background: var(--surface);
}

/* ---------- Platzhalter, solange Calendly lädt ----------
 * Vorher wurde die Ladeschrift entfernt, sobald Calendlys SKRIPT da war — der
 * Kalender selbst brauchte danach aber noch Sekunden. In dieser Lücke stand
 * ein leerer weißer Kasten, und niemand wusste, ob da noch etwas kommt.
 *
 * Der Platzhalter ist hell wie Calendlys Darstellung, damit es beim Wechsel
 * nicht blitzt. Er verschwindet erst, wenn Calendly sich meldet. */
.cal { position: relative; }
.cal__skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  display: grid;
  grid-template-columns: 42% 58%;
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 2.6vw, 34px);
  padding: clamp(20px, 3vw, 40px);
  transition: opacity .4s ease;
}
.cal__skeleton.is-gone { opacity: 0; pointer-events: none; }

.cal__skeleton .sk {
  border-radius: 8px;
  background: linear-gradient(90deg, #e9ebf2 25%, #f7f8fc 37%, #e9ebf2 63%);
  background-size: 400% 100%;
  animation: skShimmer 1.5s ease-in-out infinite;
}
/* Ausdrücklich runder als die Grundform — bei gleicher Spezifität gewinnt
 * sonst die spätere Regel und der Avatar bliebe eckig. */
.cal__skeleton .sk.cal__sk-avatar { width: 62px; height: 62px; border-radius: 50%; }
.cal__sk-left { display: flex; flex-direction: column; gap: 13px; }
.cal__sk-right { display: flex; flex-direction: column; gap: 15px; }
.cal__sk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.cal__skeleton .cal__sk-grid .sk { aspect-ratio: 1; border-radius: 50%; }

/* Steht oben, weil der Rahmen höher ist als der sichtbare Bereich — unten
 * hätte den Hinweis niemand gesehen. */
.cal__sk-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: .9rem;
  color: #7b8299;
  margin-bottom: 2px;
}

@keyframes skShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 900px) {
  .cal__skeleton { grid-template-columns: 1fr; }
  .cal__sk-left { display: none; } /* schmal zeigt Calendly zuerst den Kalender */
}

@media (prefers-reduced-motion: reduce) {
  .cal__skeleton .sk { animation: none; background: #eceef4; }
}
.cal__hint a { color: var(--accent); font-weight: 600; text-decoration: none; }
.cal__hint a:hover { text-decoration: underline; }

/* ---------- Fuß ---------- */
.legal {
  text-align: center;
  color: var(--ink-soft);
  font-size: .78rem;
  padding-top: 26px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.legal a { color: var(--ink-soft); text-decoration: none; }
.legal a:hover { color: var(--ink); }
.legal__copy {
  margin-top: 8px;
  font-size: .74rem;
  color: color-mix(in srgb, var(--ink-soft) 82%, transparent);
}

/* ---------- Einwilligungs-Banner ---------- */
/* Liegt unten auf, blockiert den Funnel bewusst nicht. Solange nichts
 * entschieden ist, gilt "abgelehnt" — es geht also nichts an Meta, auch wenn
 * jemand den Banner ignoriert und einfach weiterklickt. */
.cbar {
  /* Waagerechter Versatz als Variable: am Rechner sitzt die Leiste zentriert
   * (left:50% plus -50% Rückversatz), am Handy geht sie über die volle Breite.
   * Ohne die Variable müsste jede Regel, die transform anfasst — auch die
   * reduced-motion-Regel unten — beide Fälle einzeln kennen. */
  --cbar-x: -50%;
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(var(--cbar-x), 130%);
  z-index: 50;
  width: min(680px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .3s ease;
}
.cbar--in { transform: translate(var(--cbar-x), 0); opacity: 1; }

.cbar__text { display: flex; flex-direction: column; gap: 5px; }
.cbar__text strong { font-size: .92rem; font-weight: 620; color: var(--ink); }
.cbar__text span { font-size: .8rem; line-height: 1.5; color: var(--muted); }
.cbar__text a { color: var(--accent); text-decoration: none; }
.cbar__text a:hover { text-decoration: underline; }

.cbar__actions { display: flex; gap: 9px; flex: none; }

/* Beide Schaltflächen gleich groß und gleich prominent — nur die Füllfarbe
 * unterscheidet sie. Sonst wäre die Einwilligung nicht freiwillig. */
.cbar__btn {
  padding: .62em 1.15em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cbar__btn:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-1px); }
}
/* "Einverstanden" in Lime — wie auf dein-james.de (Wunsch Erdal, 01.09.2026).
 * Lime ist sonst dem Haupt-Knopf vorbehalten; hier ist es die Ausnahme.
 *
 * Beide Schaltflaechen bleiben gleich gross, gleich hoch und stehen
 * nebeneinander. Nur die Fuellfarbe unterscheidet sie. Das muss so bleiben:
 * Waere "Nur notwendige" kleiner, blasser oder schwerer zu treffen, waere die
 * Einwilligung nicht mehr freiwillig und damit wertlos. */
.cbar__btn--primary { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.cbar__btn--primary:hover { background: #d3f955; border-color: #d3f955; color: var(--lime-ink); }
.cbar__btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* Handy: flache Leiste am unteren Rand statt einer Karte, die halb über dem
 * Inhalt liegt. Ohne Überschrift, kleinere Schrift, Knöpfe daneben statt
 * darunter — rund 105 statt 240 Pixel Höhe.
 * Der Banner erscheint seit 10.08.2026 nicht mehr beim Laden (siehe consent.js),
 * sondern nur noch über den Fußzeilen-Link. Trotzdem darf er nichts verdecken:
 * wer ihn öffnet, will danach weiterarbeiten.
 * WICHTIG: "Nein danke" bleibt exakt so groß und sichtbar wie "Einverstanden". */
@media (max-width: 620px) {
  .cbar {
    --cbar-x: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 13px 15px calc(13px + env(safe-area-inset-bottom, 0px));
  }
  .cbar__text strong { display: none; }
  .cbar__text span { font-size: .74rem; line-height: 1.45; }
  .cbar__actions { flex-direction: row; }
  .cbar__btn { flex: 1; padding: .55em 1em; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cbar { transition: opacity .2s ease; transform: translate(var(--cbar-x), 0); }
  .cbar__btn:hover { transform: none; }
}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legalpage { max-width: 780px; }
.prose { line-height: 1.65; }
.prose h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 660; margin-bottom: 18px; }
.prose h2 { font-size: 1.02rem; font-weight: 640; margin: 28px 0 8px; color: var(--accent); }
.prose p, .prose li { color: var(--ink-soft); font-size: .96rem; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose code {
  font-family: var(--font-mono);
  font-size: .84em;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 1px 6px;
  border-radius: 6px;
}
.prose .muted { color: var(--muted); font-size: .84rem; margin-top: -8px; }
.back-link { margin-top: 30px; }

/* ---------- Kleine Schirme ---------- */
/* Handy-Breiten: Marke und Eyebrow etwas kleiner, sonst frisst der Kopf die
 * halbe Sicht und der Eyebrow bricht in drei Zeilen. */
@media (max-width: 560px) {
  .brand { font-size: 1.32rem; }
  .brand__mark { height: 38px; }
  .eyebrow { font-size: .62rem; letter-spacing: .1em; }
  .card { min-height: clamp(360px, 48vh, 520px); }
}

@media (max-width: 900px) {
  /* Verlauf als weicher Schimmer unten — nicht hinter den Text, so wie auf
   * der Website in der mobilen Ansicht. */
  .bg {
    top: auto; bottom: -5%; left: -12%; right: -12%;
    height: 46%;
    clip-path: none;
    opacity: .5;
    filter: blur(9px) saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg::before { animation: none; }
  .card { animation: none; }
  .progress__bar::after, .option, .btn { transition: none; }
  .option:hover, .btn:hover { transform: none; }
  /* hover selbst bleibt in der Media-Query oben gekapselt */
}


/* ============================================================
   SCREEN 1 — Kopfbereich nach dem A/B-Mockup vom 26.08.2026
   Farben und Radien stammen als Zahlen aus der Vorgabe.
   ============================================================ */

/* Eyebrow: klein, versal, lila */
/* Die oberste Zeile soll einordnen, nicht rufen: normale Schrift, normale
   Gross-/Kleinschreibung, hellgrau. Kein Mono, kein weites Letterspacing.
   Gilt fuer beide Varianten — beide tragen dort einen ganzen Satz. */
.lp-hero__eyebrow {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: normal;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mock-soft);
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
}

/* Der hervorgehobene Teil der Ueberschrift */
.lp-hero__hl { color: var(--lime); }

/* Knopf in Lime mit dunkler, fetter Schrift */
.lp__btn {
  background: var(--lime);
  background-image: none;
  color: var(--lime-ink);
  font-weight: 700;
  border: 0;
  border-radius: 14px;
  width: 100%;
  max-width: 390px;
  box-shadow: 0 8px 26px -10px rgba(198, 242, 48, .55);
}
.lp__btn:hover { background: #d3f955; color: var(--lime-ink); }
.lp__ctanote { color: var(--mock-soft); font-size: .82rem; text-align: center; }

/* --- Grafik A: drei Schritte mit Pfeilen --------------------- */
.hg { display: flex; align-items: flex-start; justify-content: center;
      gap: 6px; margin: 6px 0 4px; max-width: 390px; width: 100%; }
.hg__schritt { display: flex; flex-direction: column; align-items: center;
               gap: 10px; flex: 1 1 0; min-width: 0; }
.hg__kasten { width: 64px; height: 64px; border-radius: 16px;
              border: 1.5px solid var(--border); background: rgba(255,255,255,.03);
              display: grid; place-items: center; }
.hg__schritt--mitte .hg__kasten { border-color: var(--mock-accent);
              box-shadow: 0 0 0 4px rgba(167,139,250,.12); }
.hg__kasten img { width: 34px; height: auto; }
.hg__kasten svg { width: 32px; height: 32px; }
.hg__text { font-size: .74rem; line-height: 1.35; color: var(--mock-soft);
            text-align: center; margin: 0; }
.hg__pfeil { color: var(--mock-accent); flex: 0 0 auto; margin-top: 24px;
             font-size: 1rem; line-height: 1; }

/* --- Grafik B: einer -> Flottille -> alle -------------------- */
.hp { display: flex; flex-direction: column; align-items: center; gap: 0;
      margin: 6px 0 4px; max-width: 390px; width: 100%; color: var(--mock-accent); }
.hp__quelle { display: grid; place-items: center; }
.hp__p { width: 30px; height: 30px; color: #6f63b8; }
.hp__p--quelle { width: 44px; height: 44px; color: var(--mock-accent); }
.hp__linie { color: var(--mock-accent); display: block; max-width: 100%; height: auto; }
.hp__kasten { width: 56px; height: 56px; border-radius: 14px;
              border: 1.5px solid var(--mock-accent); background: rgba(255,255,255,.03);
              display: grid; place-items: center;
              box-shadow: 0 0 0 4px rgba(167,139,250,.12); }
.hp__kasten img { width: 30px; height: auto; }
.hp__reihe { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.hp__label { border: 1px solid var(--border); border-radius: 12px;
             padding: 10px 16px; font-size: .86rem; color: var(--mock-ink);
             background: rgba(255,255,255,.03); margin-top: 14px; }


/* Screen 1 auf breiten Schirmen mittig halten.
   Auf dem Handy fuellen diese Bausteine ohnehin die volle Breite — deshalb
   greift die Regel erst ab 560px und die Handy-Ansicht bleibt unveraendert.
   Grund: .lp-hero hat bewusst kein align-items:center mehr (Vorgabe 26.08.),
   dadurch sassen Elemente mit Maximalbreite am linken Rand. */
@media (min-width: 560px) {
  .lp-hero__title,
  .lp-hero__sub,
  .hg,
  .hp { margin-inline: auto; }
}


/* Pfeil im Aufruf-Knopf: schiebt sich beim Ueberfahren leicht nach rechts.
   Bei "Bewegung reduzieren" bleibt er stehen — die Regel steht weiter unten
   im Stylesheet ohnehin fuer alle Animationen. */
.lp__btnpfeil { margin-left: .5em; display: inline-block; transition: transform .18s ease-out; }
.lp__btn:hover .lp__btnpfeil { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .lp__btnpfeil { transition: none; }
  .lp__btn:hover .lp__btnpfeil { transform: none; }
}

/* ============================================================
   SCREEN 2 — nach dem Mockup vom 27.08.2026.
   Auf 390px gerechnet. Keine winzigen Schriften.
   ============================================================ */
.bsp { text-align: center; }
.bsp__h2 {
  margin-bottom: 20px;
  font-size: clamp(1.75rem, 7vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -.028em;
  max-width: 15ch;
  margin-inline: auto;
}

/* Die Anweisung: breite Sprechblase mit Zipfel unten rechts. */
.bsp__blase {
  background: var(--accent); color: #fff;
  padding: 20px 22px; border-radius: 20px;
  font-size: 1.16rem; line-height: 1.45; font-weight: 500;
  position: relative; margin: 0 0 22px;
  box-shadow: 0 14px 40px -16px rgba(125,120,255,.9);
}
/* Zipfel zeigt nach UNTEN, nicht nach rechts: ein Ueberstand nach rechts
   macht die ganze Seite breiter als das Fenster (gemessen bei 360-768px). */
.bsp__blase::after {
  content: ""; position: absolute; right: 22px; bottom: -11px;
  width: 24px; height: 13px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 22% 100%);
}

/* Einleitung: zweite Zeile traegt die Aussage, deshalb Lime. */
.bsp__ein {
  margin: 0 0 18px; font-size: 1.08rem; line-height: 1.5; color: var(--mock-soft);
}
.bsp__einhl { color: var(--lime); font-weight: 700; }

/* Die Vorgaben: Karte mit zwei Spalten. */
.bsp__karte {
  border: 1px solid var(--border); border-radius: 20px;
  background: rgba(255,255,255,.02); padding: 12px;
}
/* Eine Spalte auf schmalen Schirmen. Gemessen: bei 360-414px braucht
   "Freigegebene Aussagen" zwei bis drei Zeilen, wenn zwei Kacheln
   nebeneinander stehen. Kleinere Schrift verbietet die Vorgabe
   ("keine winzigen Texte"), also bekommt jede Kachel die volle Breite.
   Ab 500px ist Platz fuer zwei Spalten ohne Umbruch. */
.bsp__grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
@media (min-width: 540px) {
  .bsp__grid { grid-template-columns: 1fr 1fr; }
}
.bsp__kachel {
  display: flex; align-items: center; gap: 9px; text-align: left;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 12px 16px 12px 13px; background: rgba(255,255,255,.03); min-width: 0;
}
.bsp__ikon { color: var(--accent); flex: 0 0 auto; display: grid; place-items: center; }
.bsp__ikon svg { width: 21px; height: 21px; display: block; }
.bsp__label {
  font-size: .88rem; line-height: 1.3; color: var(--mock-ink);
  min-width: 0; hyphens: auto; -webkit-hyphens: auto;
}

/* Das Ergebnis: Lime-Rahmen, gefuellter Kreis mit Haken. */
.bsp__ergebnis {
  display: flex; align-items: center; gap: 14px; text-align: left;
  margin-top: 16px; padding: 14px 18px; border-radius: 18px;
  border: 1.5px solid var(--lime); background: rgba(0,0,0,.45);
}
.bsp__kreis {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--lime); color: var(--lime-ink); display: grid; place-items: center;
}
.bsp__kreis svg { width: 26px; height: 26px; stroke-width: 2.2; }
.bsp__ergtext { font-size: 1.05rem; font-weight: 600; color: var(--mock-ink); }

/* Weitere Einsatzfaelle. */
.bsp__weiterein { margin: 26px 0 12px; font-size: 1rem; color: var(--mock-soft); }
.bsp__weiter { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.bsp__pille {
  border-color: rgba(167,139,250,.5); padding: 10px 14px 10px 12px;
  background: transparent; justify-content: center;
}
.bsp__pille .bsp__label { font-size: .88rem; hyphens: none; -webkit-hyphens: none; }
.bsp__pille .bsp__ikon svg { width: 18px; height: 18px; }

/* Schlusssatz: zwei Zeilen, die zweite traegt die Aussage. */
.bsp__schluss {
  margin: 30px 0 22px; font-size: clamp(1.4rem, 5.6vw, 2rem); line-height: 1.18;
  font-weight: 700; letter-spacing: -.02em;
}
.bsp__schluss1 { color: var(--mock-ink); }
.bsp__betont { color: var(--lime); }

@media (min-width: 560px) {
  .bsp__blase, .bsp__karte, .bsp__ergebnis { max-width: 560px; margin-inline: auto; }
  .bsp__blase { margin-bottom: 22px; }
  .bsp__ergebnis { margin-top: 16px; }
  /* Ab hier ist Platz: vier Einsatzfaelle in einer Reihe, Beschriftungen
     wieder etwas groesser. Ohne max-width liefen die Pillen sonst ueber die
     ganze 1120px-Spalte auseinander. */
  .bsp__weiter {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    max-width: 700px; margin-inline: auto;
  }
  .bsp__label { font-size: .95rem; }
  .bsp__karte { padding: 14px; }
  .bsp__grid { gap: 10px; }
}

/* ============================================================
   SCREEN 3 — "Zehn Leute. Eine Arbeitsweise."
   Nach dem Mockup vom 27.08.2026. Mobil zuerst gerechnet.
   ============================================================ */
.wdl { text-align: center; }
.wdl__h2 {
  font-size: clamp(1.9rem, 7.4vw, 3rem); line-height: 1.12;
  letter-spacing: -.028em; margin-bottom: 14px;
}
.wdl__hl { color: var(--lime); }
.wdl__sub {
  margin: 0 auto 26px; max-width: 46ch;
  font-size: clamp(1rem, 2vw, 1.08rem); line-height: 1.55; color: var(--mock-soft);
}
/* Zweiter Absatz: enger an den ersten, damit beide als ein Gedanke lesbar
   bleiben, aber sichtbar getrennt. */
.wdl__sub:not(.wdl__sub--2) + .wdl__sub--2 { margin-top: -38px; }

/* --- Grafik: Koepfe, Linien, Flottille ---------------------- */
.wdl__grafik {
  position: relative; max-width: 500px; margin: 0 auto 18px; width: 100%;
  color: var(--mock-accent);
}
/* Fuenf gleich breite Spalten. Dadurch sitzen die Kopfmitten bei
   10/30/50/70/90 % — genau dort, wo die Linien im viewBox ansetzen. */
.wdl__reihe { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; }
.wdl__kopf {
  width: 100%; max-width: 84px; height: auto; margin: 0 auto; display: block;
}
.wdl__linien { display: block; width: 100%; height: auto; margin-top: -4px; }
/* Der Kreis haengt am unteren Rand der Grafik. Auf schmalen Schirmen sind die
   Koepfe kleiner, dadurch rutschte er in die gepunkteten Linien hinein.
   -26px ist der von Erdal in den DevTools gemessene Wert; ab 560px bleibt es
   beim urspruenglichen -6px, sonst wandert er auf dem Desktop nach unten. */
.wdl__kreis {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  width: 72px; height: 72px; border-radius: 50%;
  border: 1.5px solid var(--mock-accent); background: var(--ground);
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px rgba(167,139,250,.10), 0 0 30px -6px rgba(167,139,250,.55);
}
.wdl__kreis img { width: 34px; height: auto; }

/* --- Drei Karten -------------------------------------------- */
/* Mobil: Icon links neben der Ueberschrift, Text darunter — so im Mockup. */
.wdl__karten { display: grid; gap: 12px; margin-top: 34px; }
.wdl__karte {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  align-items: start; align-content: start; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(255,255,255,.03); padding: 18px 18px 20px;
}
.wdl__ikon {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  background: rgba(167,139,250,.13); color: var(--mock-accent);
  display: grid; place-items: center;
}
.wdl__ikon svg { width: 24px; height: 24px; }
.wdl__kt { margin: 2px 0 8px; font-size: 1.06rem; line-height: 1.3; font-weight: 700; color: var(--mock-ink); }
.wdl__kp { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--mock-soft); }

/* --- Abschluss-Banner --------------------------------------- */
/* Mobil: gestapelt und mittig. */
.wdl__banner {
  margin-top: 16px; padding: 22px 20px 24px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  display: grid; justify-items: center; gap: 16px;
}
.wdl__bikon {
  width: 54px; height: 54px; border-radius: 15px;
  background: rgba(167,139,250,.16); display: grid; place-items: center;
}
.wdl__bikon img { width: 28px; height: auto; }
.wdl__btext {
  margin: 0; font-size: 1.06rem; line-height: 1.45; font-weight: 600;
  color: var(--mock-ink); max-width: 30ch;
}
.wdl__ordner { width: 84px; height: auto; color: var(--mock-accent); }

@media (min-width: 720px) {
  /* Ab hier drei Karten nebeneinander, Icon ueber der Ueberschrift. */
  .wdl__karten { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
  .wdl__karte { grid-template-columns: 1fr; gap: 0; padding: 22px 20px 24px; }
  .wdl__ikon { margin-bottom: 16px; }
  .wdl__kt { font-size: 1.1rem; }

  /* Banner in einer Zeile: Zeichen links, Text mittig, Ablagen rechts. */
  .wdl__banner {
    grid-template-columns: auto 1fr auto; align-items: center;
    justify-items: start; text-align: left; gap: 22px;
    margin-top: 20px; padding: 24px 28px;
  }
  .wdl__btext { max-width: 44ch; }
  .wdl__ordner { justify-self: end; }
}

/* ============================================================
   SCREEN 4 — "So entstehen eure Skills"
   Nach dem Mockup vom 27.08.2026. Mobil zuerst gerechnet.
   ============================================================ */
.ent { text-align: center; }
.ent__h2 {
  font-size: clamp(1.85rem, 6.6vw, 3rem); line-height: 1.14;
  letter-spacing: -.028em; margin-bottom: 14px; max-width: 30ch; margin-inline: auto;
}
.ent__sub {
  margin: 0 auto 30px; max-width: 52ch;
  font-size: clamp(1rem, 2vw, 1.08rem); line-height: 1.55; color: var(--mock-soft);
}

/* Mobil: Schritte untereinander, Pfeile dazwischen zeigen nach unten. */
.ent__reihe {
  display: grid; gap: 10px; align-items: stretch; justify-items: stretch;
}
.ent__pfeil {
  color: var(--mock-accent); font-size: 1.25rem; line-height: 1;
  display: grid; place-items: center; transform: rotate(90deg);
}
.ent__karte {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  align-items: center; align-content: start; text-align: left;
  border: 1px solid var(--border); border-radius: 18px;
  background: rgba(255,255,255,.025); padding: 20px 20px 22px;
}
/* Der Ring ist das Erkennungszeichen des Schrittes — Kreis mit Schimmer. */
.ent__ring {
  width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid rgba(167,139,250,.55); color: var(--mock-accent);
  background: rgba(167,139,250,.08); display: grid; place-items: center;
  box-shadow: 0 0 22px -6px rgba(167,139,250,.5);
}
.ent__ring svg { width: 28px; height: 28px; }
.ent__kopf { min-width: 0; }
.ent__nr {
  display: block; font-size: 1.28rem; line-height: 1.1; font-weight: 700;
  color: var(--mock-accent); margin-bottom: 4px;
}
.ent__t { margin: 0; font-size: 1.06rem; line-height: 1.3; font-weight: 700; color: var(--mock-ink); }
.ent__p {
  grid-column: 1 / -1; margin: 14px 0 0;
  font-size: .95rem; line-height: 1.55; color: var(--mock-soft);
}
.ent__schluss {
  margin: 26px auto 0; max-width: 54ch;
  font-size: clamp(1rem, 2vw, 1.1rem); line-height: 1.55; color: var(--mock-soft);
}
.ent__schluss .lp-hero__hl { font-weight: 700; }

@media (min-width: 860px) {
  /* Ab hier drei Schritte nebeneinander, Pfeile waagerecht dazwischen.
     auto fuer die Pfeilspalten, 1fr fuer die Karten. */
  .ent__reihe {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0; align-items: stretch;
  }
  .ent__pfeil { transform: none; padding: 0 14px; align-self: center; }
  .ent__karte { height: 100%; padding: 24px 22px 26px; }
  .ent__ring { width: 72px; height: 72px; }
  .ent__ring svg { width: 33px; height: 33px; }
  .ent__nr { font-size: 1.4rem; }
}

/* ============================================================
   SCREEN 5 — eine Stimme, gross. Mockup vom 28.08.2026.
   Hervorhebung hier in Violett: Lime bleibt dem Knopf vorbehalten,
   sonst verliert der Aufruf seine Sonderstellung.
   ============================================================ */
.stm { text-align: center; }
.stm__anf {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.6rem; line-height: .8; color: var(--mock-accent);
  margin: 6px 0 6px; user-select: none;
  text-shadow: 0 0 34px rgba(167,139,250,.55);
}
.stm__zitat {
  margin: 0 auto 34px; max-width: 24ch; border: 0; padding: 0;
  font-size: clamp(1.5rem, 5.4vw, 2.6rem); line-height: 1.32;
  letter-spacing: -.022em; font-weight: 700; color: var(--mock-ink);
  text-wrap: balance;
}
.stm__hl { color: var(--mock-accent); }

.stm__person {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; text-align: left;
}
.stm__foto {
  width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; border: 1px solid rgba(167,139,250,.35);
}
.stm__meta { min-width: 0; }
.stm__name { margin: 0; font-size: 1.06rem; font-weight: 700; color: var(--mock-ink); }
.stm__rolle { margin: 2px 0 0; font-size: .95rem; color: var(--mock-soft); }
.stm__beleg {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  border: 1px solid rgba(167,139,250,.45); border-radius: 999px;
  padding: 6px 13px 6px 10px; font-size: .85rem; color: var(--mock-ink);
  background: rgba(167,139,250,.07);
}
.stm__belegik { color: var(--mock-accent); display: grid; place-items: center; }
.stm__belegik svg { width: 16px; height: 16px; display: block; }

@media (min-width: 720px) {
  .stm__anf { font-size: 5.6rem; }
  .stm__zitat { max-width: 32ch; margin-bottom: 40px; }
  .stm__foto { width: 84px; height: 84px; }
}


/* Zwei Baender direkt hintereinander: der Abstand dazwischen zeigte den
   Seitenhintergrund und dazu zwei Trennlinien — es sah aus wie ein schmaler
   Streifen. Das zweite Band wird deshalb um den Abstand hochgezogen und
   verliert seine obere Linie. Beide verschmelzen zu einer Flaeche. */
.lp-bleed + .lp-bleed {
  margin-top: calc(-1 * var(--landing-gap));
  border-top: 0;
}

/* ============================================================
   SCREEN 6 — "Was ihr tatsaechlich bekommt"
   Mockup vom 28.08.2026. Vier Karten, mobil untereinander.
   ============================================================ */
.wkz { text-align: center; }
.wkz__h2 {
  font-size: clamp(1.85rem, 6.4vw, 2.9rem); line-height: 1.14;
  letter-spacing: -.028em; margin-bottom: 14px; max-width: 26ch; margin-inline: auto;
}
.wkz__sub {
  margin: 0 auto 32px; max-width: 56ch;
  font-size: clamp(1rem, 2vw, 1.08rem); line-height: 1.55; color: var(--mock-soft);
}
.wkz__grid { display: grid; gap: 14px; }
.wkz__karte {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  text-align: left; border: 1px solid rgba(167,139,250,.22); border-radius: 18px;
  background: rgba(167,139,250,.035); padding: 22px 22px 24px;
}
/* Der Ring leuchtet leicht — im Mockup das auffaelligste Merkmal. */
.wkz__ring {
  width: 74px; height: 74px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid rgba(167,139,250,.6); color: var(--mock-accent);
  background: rgba(167,139,250,.06); display: grid; place-items: center;
  box-shadow: 0 0 26px -5px rgba(167,139,250,.6), inset 0 0 18px -8px rgba(167,139,250,.7);
}
.wkz__ring svg { width: 34px; height: 34px; }
.wkz__txt { min-width: 0; }
.wkz__t { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.25; font-weight: 700; color: var(--mock-ink); }
.wkz__p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--mock-soft); }
.wkz__schluss {
  margin: 30px auto 0; max-width: 56ch;
  font-size: clamp(1.02rem, 2vw, 1.14rem); line-height: 1.5; color: var(--mock-soft);
}
.wkz__schluss .lp-hero__hl { font-weight: 700; }

@media (min-width: 720px) {
  .wkz__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .wkz__karte { padding: 26px 26px 28px; }
  .wkz__ring { width: 86px; height: 86px; }
  .wkz__ring svg { width: 40px; height: 40px; }
  .wkz__t { font-size: 1.3rem; }
}

/* ============================================================
   SCREEN 7 — der Abschluss. Mockup vom 28.08.2026.
   Knopf bleibt Lime: im Mockup war er violett, das war ein Versehen.
   ============================================================ */
.abs { text-align: center; }
.abs__h2 {
  font-size: clamp(2rem, 7.4vw, 3.2rem); line-height: 1.12;
  letter-spacing: -.03em; margin-bottom: 16px; max-width: 20ch; margin-inline: auto;
}
.abs__sub {
  margin: 0 auto 14px; max-width: 50ch;
  font-size: clamp(1rem, 2vw, 1.1rem); line-height: 1.55; color: var(--mock-soft);
}
.abs__sub .lp-hero__hl { font-weight: 700; }
.abs__sub--2 { margin-bottom: 30px; }

/* Drei Merkmale. Mobil untereinander, ab 720px nebeneinander mit Trennstrich. */
/* Untereinander: alle drei Merkmale bekommen dieselbe Breite und werden als
   Block mittig gesetzt. Ohne die feste Breite richtete sich jedes nach seinem
   eigenen Text aus — dadurch standen Symbol und Text jeweils woanders. */
.abs__merkmale {
  display: grid; gap: 16px; margin-bottom: 28px;
  justify-items: center;
}
.abs__merkmal {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%; max-width: 270px;
}
.abs__ring {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid rgba(167,139,250,.55); color: var(--mock-accent);
  background: rgba(167,139,250,.06); display: grid; place-items: center;
  box-shadow: 0 0 22px -6px rgba(167,139,250,.55);
}
.abs__ring svg { width: 27px; height: 27px; }
.abs__mtxt { min-width: 0; }
.abs__m1 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--mock-ink); }
.abs__m2 { margin: 2px 0 0; font-size: .98rem; color: var(--mock-soft); }

/* Der grosse Aufruf. */
.abs__cta { margin: 0 auto 16px; max-width: 640px; }
.abs__btn {
  width: 100%; max-width: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 20px 24px; font-size: clamp(1rem, 2.2vw, 1.22rem); border-radius: 16px;
}
.abs__blitz { display: grid; place-items: center; flex: 0 0 auto; }
.abs__blitz svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.abs__btntext { min-width: 0; }
.abs__btn .lp__btnpfeil { margin-left: 0; }

/* Die drei Belege unter dem Knopf. */
/* Nebeneinander, was passt — der Rest bricht in die naechste Zeile.
   Wichtig: text-align:left je Beleg. Der Abschnitt ist mittig gesetzt, und
   das vererbte center liess den umgebrochenen dritten Punkt zentrieren,
   waehrend sein Haekchen links aussen stehen blieb. So klebt es am Text.
   inline-flex haelt Haekchen und Text als eine Einheit zusammen. */
.abs__belege {
  list-style: none; margin: 0 auto 30px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 22px; max-width: 640px;
}
/* Kein flex, sondern normaler Textfluss: Als Flex-Element war das Haekchen
   ein eigener Block neben dem Text. Bei zwei zentrierten Zeilen entstand
   dadurch links eine Luecke, in der es allein stand. Jetzt laeuft es als
   Zeichen IM Text mit und klebt an "danach".
   Ohne max-width nahm der laengste Punkt die volle Zeilenbreite ein
   (gemessen: 350 von 350px) und liess sich nicht mehr mittig setzen. */
.abs__beleg {
  display: block; text-align: center;
  font-size: .95rem; line-height: 1.5; color: var(--mock-soft);
  max-width: 290px;
}
/* Eine einzige Regel: Zuvor standen hier zwei, und die zweite ueberschrieb
   mit display:grid das inline-flex — das Haekchen wurde dadurch 283px breit
   und schob sich vom Text weg (gemessen). */
.abs__belegik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px;
  color: var(--mock-accent);
}
.abs__belegik svg { width: 17px; height: 17px; display: block; }

/* Der ehrliche Hinweis. */
.abs__hinweis {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  text-align: left; border: 1px solid var(--border); border-radius: 18px;
  background: rgba(255,255,255,.025); padding: 22px 22px 24px;
  max-width: 760px; margin-inline: auto;
}
.abs__hik { color: var(--mock-accent); flex: 0 0 auto; }
.abs__hik svg { width: 48px; height: 48px; }
.abs__ht { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.3; font-weight: 700; color: var(--mock-ink); }
.abs__hp { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--mock-soft); }

@media (min-width: 560px) {
  /* Ab hier sind die Koepfe gross genug, der Kreis darf hoeher sitzen.
     -19px von Erdal in den DevTools gemessen (28.08.2026). Auf schmalen
     Schirmen bleibt es bei -26px. */
  .wdl__kreis { bottom: -19px; }
}

@media (min-width: 720px) {
  .abs__merkmale {
    grid-template-columns: repeat(3, 1fr); gap: 0;
    max-width: 900px; margin-inline: auto; margin-bottom: 34px;
  }
  .abs__merkmal + .abs__merkmal { border-left: 1px solid var(--border); }
  .abs__merkmal { padding: 0 18px; max-width: none; justify-content: center; }
  .abs__hik svg { width: 56px; height: 56px; }
  .abs__hinweis { padding: 26px 28px 28px; gap: 22px; }
}

/* ============================================================
   SCREEN 8 — die Fragen. Bewusst ruhig: keine Kacheln, keine
   Leuchtringe, nur feine Trennlinien und viel Luft.
   ============================================================ */
.faq { text-align: center; }
.faq__h2 {
  font-size: clamp(1.8rem, 6.2vw, 2.7rem); line-height: 1.15;
  letter-spacing: -.026em; margin-bottom: 12px; max-width: 22ch; margin-inline: auto;
}
.faq__sub {
  margin: 0 auto 34px; max-width: 48ch;
  font-size: clamp(1rem, 2vw, 1.08rem); line-height: 1.55; color: var(--mock-soft);
}

/* width:100% ist hier Pflicht, nicht Kosmetik. Der Elternabschnitt ist eine
   Flex-Spalte; zusammen mit margin-inline:auto richtet sich die Liste sonst
   nach ihrem breitesten Inhalt. Zugeklappt war das die laengste Frage (686px),
   aufgeklappt die Antwort (760px) — die Liste sprang beim Klicken in der
   Breite. Im Browser gemessen. */
.faq__liste {
  text-align: left; width: 100%; max-width: 760px; margin-inline: auto;
  border-top: 1px solid var(--border);
}
.faq__eintrag { border-bottom: 1px solid var(--border); }

/* Die Frage. Der Marker des Browsers wird entfernt, sonst stuende links
   noch ein Dreieck neben unserem Zeichen. */
.faq__frage {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; font-size: clamp(1.02rem, 2.1vw, 1.16rem); line-height: 1.4;
  font-weight: 600; color: var(--mock-ink);
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage:hover { color: #fff; }
.faq__frage:focus-visible { outline: 2px solid var(--mock-accent); outline-offset: 4px; border-radius: 8px; }
.faq__fragetext { min-width: 0; }

/* Das Flottille-Zeichen als Aufklapper. Zu: nach rechts. Offen: nach unten. */
.faq__ik {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(167,139,250,.35); background: rgba(167,139,250,.07);
  display: grid; place-items: center;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .2s ease, background .2s ease;
}
.faq__ik img { width: 15px; height: auto; display: block; }
.faq__eintrag[open]:not([data-zu]) .faq__ik {
  transform: rotate(90deg);
  border-color: rgba(167,139,250,.7);
  background: rgba(167,139,250,.14);
}
.faq__frage:hover .faq__ik { border-color: rgba(167,139,250,.6); }

/* Weiches Auf- und Zuklappen. display:none liesse sich nicht ueberblenden,
   deshalb faehrt eine Raster-Zeile von 0fr auf 1fr. visibility haelt die
   Antwort im zugeklappten Zustand aus der Tastatur-Reihenfolge und aus
   Vorleseprogrammen heraus — verzoegert, damit sie waehrend des Zufahrens
   noch sichtbar bleibt. */
.faq__huelle {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .34s cubic-bezier(.2,.7,.2,1), visibility 0s linear .34s;
}
.faq__eintrag[open]:not([data-zu]) .faq__huelle {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .34s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.faq__innen { overflow: hidden; }
.faq__antwort {
  margin: 0; padding: 0 54px 24px 4px;
  font-size: clamp(.98rem, 1.9vw, 1.04rem); line-height: 1.62; color: var(--mock-soft);
}

/* Letzter Aufruf direkt unter den Fragen. Aufbau wie in Screen 7: Eyebrow,
   Ueberschrift mit Lime-Akzent, Knopf mit Blitz, Belegzeile. */
.faq__cta { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.faq__cta .lp__marke { margin-bottom: 10px; }
.faq__ctatitel {
  margin: 0 0 20px; font-size: clamp(1.5rem, 4.4vw, 2.1rem); line-height: 1.2;
  letter-spacing: -.024em; font-weight: 700; color: var(--mock-ink);
}
/* Der Grundknopf ist auf 390px begrenzt — hier bricht der lange Text dann
   zweizeilig. Auf breiteren Schirmen darf er laufen. */
.faq__cta .lp__btn { max-width: min(100%, 520px); margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .faq__ik, .faq__huelle { transition: none; }
}
@media (min-width: 720px) {
  .faq__frage { padding: 26px 6px; }
  .faq__antwort { padding: 0 60px 28px 6px; }
  .faq__ik { width: 38px; height: 38px; }
  .faq__ik img { width: 17px; }
}

/* ============================================================
   ERGEBNIS-SCHRITT — kommt nach der letzten Frage, vor dem
   Kontaktformular. Loest das Versprechen des Checks ein.
   ============================================================ */
.erg__kopf { display: flex; justify-content: center; margin-bottom: 20px; }
.erg__ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid rgba(198,242,48,.55); color: var(--lime);
  background: rgba(198,242,48,.08); display: grid; place-items: center;
  box-shadow: 0 0 26px -6px rgba(198,242,48,.5);
}
.erg__ring svg { width: 30px; height: 30px; stroke-width: 2; }
.erg__titel {
  margin: 0 0 14px; text-align: center;
  font-size: clamp(1.4rem, 4.6vw, 1.8rem); line-height: 1.25;
  letter-spacing: -.02em; font-weight: 700; color: var(--ink);
}
.erg__text {
  margin: 0 0 16px; text-align: center; max-width: 44ch; margin-inline: auto;
  font-size: 1rem; line-height: 1.6; color: var(--ink-soft);
}
.erg__next {
  margin: 0 0 24px; text-align: center; max-width: 44ch; margin-inline: auto;
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
  font-size: .96rem; line-height: 1.55; color: var(--ink-soft);
}
.erg__btn { width: 100%; }

/* --- Screen 2: Haekchen laufen beim Scrollen durch ---------------------- */
/* Die Kachel macht rechts Platz fuer das Haekchen, damit der Text beim
   Erscheinen nicht springt — der Platz ist von Anfang an reserviert. */
.bsp__kachel { position: relative; padding-right: 34px; }
.bsp__haken {
  position: absolute; right: 12px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  color: var(--lime); display: grid; place-items: center;
  opacity: 0; transform: scale(.55);
  transition: opacity .26s ease-out, transform .26s cubic-bezier(.2,1.4,.4,1);
}
.bsp__haken svg { width: 18px; height: 18px; stroke-width: 2.6; display: block; }
.bsp__kachel--fertig .bsp__haken { opacity: 1; transform: scale(1); }
.bsp__kachel--fertig {
  border-color: rgba(198,242,48,.3);
  background: rgba(198,242,48,.05);
  transition: border-color .3s ease-out, background .3s ease-out;
}

/* Das Ergebnis faehrt ein, nachdem das letzte Haekchen sitzt. */
.bsp__ergebnis {
  transition: opacity .42s ease-out, transform .42s cubic-bezier(.2,.7,.2,1);
}
.bsp__ergebnis--wartet { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .bsp__haken, .bsp__kachel--fertig, .bsp__ergebnis { transition: none; }
  .bsp__ergebnis--wartet { opacity: 1; transform: none; }
}

/* --- Dezentes Einblenden der Abschnitte -------------------------------- */
/* Jeder Abschnitt kommt eine Spur von unten herein, sobald er ins Bild
   scrollt. Einmal, nicht bei jedem Vorbeiscrollen — sonst wird die Seite
   unruhig. Ohne JavaScript oder bei "Bewegung reduzieren" ist alles sofort
   sichtbar; die Regel greift nur, wenn die Klasse gesetzt wurde. */
.lp-auf {
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.2,.7,.2,1);
}
/* Der Abschnitt direkt unter dem Kopfbereich ist beim Laden schon
   angeschnitten. Ganz auszublenden liesse dort eine leere Flaeche stehen —
   deshalb ist er von Anfang an sichtbar und faehrt nur leicht mit. */
.lp-hero + .lp-auf { opacity: 1; transform: translateY(10px); }
.lp-hero + .lp-auf.lp-auf--da { transform: none; }
.lp-auf--da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-auf { opacity: 1; transform: none; transition: none; }
}

/* --- Hinweis am Ende des Kopfbereichs: hier geht es weiter -------------- */
/* Nur auf schmalen Schirmen noetig. Auf dem Desktop ist der naechste
   Abschnitt beim Laden ohnehin nicht mehr angeschnitten. */
.lp-weiter { display: none; }

@media (max-width: 719px) {
  .lp-weiter {
    display: grid; place-items: center;
    margin: 26px auto 0; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(167,139,250,.3); background: rgba(167,139,250,.07);
    transition: opacity .35s ease-out, transform .35s ease-out;
  }
  .lp-weiter__mark {
    width: 19px; height: auto; display: block;
    transform: rotate(90deg);            /* das Zeichen zeigt nach unten */
    animation: wippen 2.1s ease-in-out infinite;
  }
  .lp-weiter--weg { opacity: 0; transform: translateY(8px); pointer-events: none; }
}

@keyframes wippen {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50%      { transform: rotate(90deg) translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-weiter__mark { animation: none; }
  .lp-weiter { transition: none; }
}

/* ---------- Platz fuer die Einwilligungs-Leiste ----------
 * Die Leiste liegt fest am unteren Rand ueber dem Inhalt. Ohne Ausgleich
 * verdeckt sie das Unterste — genau daran ist sie am 10.08.2026 schon einmal
 * gescheitert (sie lag ueber der letzten Antwortmoeglichkeit von Frage 1).
 *
 * --cbar-h setzt consent.js aus der GEMESSENEN Hoehe der Leiste. Auf dem Handy
 * bricht der Text um und die Leiste wird hoeher; ein fester Wert waere mal zu
 * klein, mal zu gross. Die 16px sind der Abstand der Leiste zum Fensterrand
 * (siehe .cbar { bottom: 16px }), die 12px etwas Luft darueber. */
body.hat-cbar .funnel {
  padding-bottom: calc(28px + var(--cbar-h, 0px) + 16px + 12px);
}
/* Der Abschluss-Schirm scrollt im Kalender-Rahmen — dort zusaetzlich unten
 * Luft, sonst klebt der letzte Termin an der Leiste. */
body.hat-cbar .cal { margin-bottom: 12px; }

/* ---------- Platz reservieren, bevor die Abschnitte da sind ----------
 * Ausgeliefert wird nur der Kopfbereich; die acht Abschnitte darunter haengt
 * app.js nach. Ohne Reservierung ist die Seite in diesem Moment genau einen
 * Bildschirm hoch — der Fussbereich steht also IM BILD. Sobald die Abschnitte
 * kommen, rutscht er weit nach unten. Das ist ein Sprung ueber fast den ganzen
 * Bildschirm; Lighthouse mass dafuer CLS 0,89 (erlaubt sind 0,1).
 *
 * 220vh ist bewusst grosszuegig: Der fertige Inhalt ist deutlich hoeher, das
 * Entfernen der Reservierung aendert danach also nichts mehr.
 *
 * app.js setzt `.aufgebaut`, sobald buildLanding() durch ist. */
body.is-landing #landing:not(.aufgebaut) { min-height: 220vh; }