/* Mockup 1 „Der endlose Feed“: hell und fotografisch. Das eine laute Element ist die Reel-Wand im Kopf, die wie ein
   endloser Feed läuft und aus der Kernflow die viralen Reels heraushebt. Alles andere bleibt ruhig und typografisch. */
body { background: var(--bg); }

/* ─── Kopfleiste ─── */
.kopf { position: sticky; top: 0; z-index: 30; background: rgba(250, 250, 252, 0.84); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.kopf.ist-gescrollt { border-bottom-color: var(--line); }
/* Kopfleiste wie auf der aktuellen Live-Seite (Lukas 29.09.2026): Wortmarke in Bricolage Grotesque, dunkel statt Verlauf;
   rechts nur Produkt, Preise, Login in Hanken Grotesk und ein dunkler Knopf. Beide Schriften nur hier oben. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/hanken-grotesk-latin.woff2') format('woff2'); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 70px; }
.kopf .logo span { font: 700 20.8px/1 'Bricolage Grotesque', var(--display); letter-spacing: -0.04em; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--ink); }
.kopf-nav { display: flex; align-items: center; gap: 32px; }
.kopf-link { position: relative; font: 400 14.4px 'Hanken Grotesk', var(--text); color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.kopf-link::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.kopf-link:hover { color: var(--ink); }
.kopf-link:hover::after { width: 100%; }
.kopf-cta { padding: 8px 17px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 14.4px 'Hanken Grotesk', var(--text); text-decoration: none; white-space: nowrap; transition: background-color 0.2s, transform 0.2s; }
.kopf-cta:hover { background: var(--accent); transform: translateY(-1px); }

/* ─── Held ─── */
.held { padding: clamp(28px, 3.4vw, 48px) 0 0; overflow: hidden; }
.held-raster { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.held h1 { font-size: clamp(46px, 5.6vw, 80px); font-weight: 700; line-height: 0.98; letter-spacing: -0.044em; max-width: 10.5ch; }
.held-lead { margin-top: 30px; max-width: 31em; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.55; color: var(--ink-2); }
.held-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.held-klein { margin-top: 16px; font-size: 15px; color: var(--muted); }
.wand-hinweis { margin-top: 18px; padding-bottom: 8px; font-size: 13.5px; color: var(--faint); text-align: right; }

/* Reel-Wand: drei Spalten laufen endlos nach oben; Abstand als margin der Kacheln, damit -50 % exakt eine Runde ist.
   Ablauf (m1.js): Scrollen → anhalten, je Spalte gleitet ein Reel ganz ins Bild → Prüfstrahl, drei Treffer ploppen auf →
   Liste nach Kunde → auflösen. Die Erklärung steht in der Leiste darunter, nie über den Reels. */
.held-bild { display: grid; gap: 22px; }
.wand { position: relative; height: clamp(600px, 74vh, 780px); }
/* Seitlicher Innenabstand: aufgeploppte Treffer (größer, mit Rahmen) dürfen am Rand nicht abgeschnitten werden. */
.wand-strom { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.wand-halter { transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
.wand-spalte { will-change: transform; animation: wand-lauf var(--dauer, 48s) linear infinite; }
.wand-halter:nth-child(2) .wand-spalte { margin-top: -190px; }
.wand-halter:nth-child(3) .wand-spalte { margin-top: -70px; }
.wand.ist-halt .wand-spalte { animation-play-state: paused; }
@keyframes wand-lauf { to { transform: translateY(-50%); } }

.wand-scan { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #6D8BFF 16%, #7A5CFF 84%, transparent); box-shadow: 0 0 22px 6px rgba(91, 75, 250, 0.4); transition: opacity 0.3s ease; }
.wand-scan.ist-aktiv { opacity: 1; }

/* Liste der drei Treffer: Bild links, Kunde und Szene in der Mitte, Aufrufe rechts. */
.wand-ordnung { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: opacity 0.5s ease; }
.wand.ist-aufloesen .wand-ordnung { opacity: 0; }
.wand-karte { position: absolute; overflow: hidden; border-radius: 18px; background: #1C1E2A; box-shadow: 0 14px 34px rgba(13, 15, 22, 0.14);
  transition: left 0.95s cubic-bezier(0.2, 0.75, 0.2, 1), top 0.95s cubic-bezier(0.2, 0.75, 0.2, 1), width 0.95s cubic-bezier(0.2, 0.75, 0.2, 1), height 0.95s cubic-bezier(0.2, 0.75, 0.2, 1), border-radius 0.95s ease, background-color 0.5s ease, box-shadow 0.95s ease; }
.wand-karte-foto { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: width 0.95s cubic-bezier(0.2, 0.75, 0.2, 1); }
.wand-karte-text { position: absolute; left: 124px; right: 118px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.45s ease 0.65s; }
.wand-karte-kunde { display: flex; align-items: center; gap: 7px; font: 500 13px/1.2 var(--display); color: var(--muted); }
.wand-karte-kunde img { width: 18px; height: 18px; border-radius: 50%; }
.wand-karte-text b { display: block; margin-top: 6px; font: 600 16.5px/1.28 var(--display); color: var(--ink); }
.wand-karte-aufrufe { position: absolute; right: 18px; top: 50%; margin: 0; transform: translateY(-50%); text-align: right; opacity: 0; transition: opacity 0.45s ease 0.75s; }
.wand-karte-aufrufe strong { display: block; font: 700 27px/1 var(--display); letter-spacing: -0.02em; color: var(--accent); }
.wand-karte-aufrufe span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.wand-karte.ist-karte { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 15, 22, 0.06), 0 22px 44px -16px rgba(26, 24, 90, 0.35); }
.wand-karte.ist-karte .wand-karte-foto { width: 104px; }
.wand-karte.ist-karte .wand-karte-text, .wand-karte.ist-karte .wand-karte-aufrufe { opacity: 1; }

/* Erklärleiste unter der Wand: drei Schritte mit Fortschritt, darunter ein Satz zum aktuellen Schritt. */
.wand-legende { display: grid; gap: 12px; }
.wand-phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wand-phasen li { position: relative; padding-top: 12px; font: 600 15px var(--display); color: var(--faint); transition: color 0.3s ease; }
.wand-phasen li::before, .wand-phasen li::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; border-radius: 3px; }
.wand-phasen li::before { right: 0; background: rgba(13, 15, 22, 0.1); }
.wand-phasen li::after { width: 0; background: var(--grad); }
.wand-phasen li.ist-aktiv { color: var(--ink); }
.wand-phasen li.ist-aktiv::after { width: 100%; transition: width var(--phase-dauer, 3000ms) linear; }
.wand-phasen li.ist-fertig { color: var(--muted); }
.wand-phasen li.ist-fertig::after { width: 100%; }
.wand-erklaerung { min-height: 3em; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); transition: opacity 0.22s ease; }
.wand-erklaerung.ist-wechsel { opacity: 0; }

.kachel { position: relative; margin: 0 0 16px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #1C1E2A; box-shadow: 0 1px 2px rgba(13, 15, 22, 0.08), 0 14px 34px rgba(13, 15, 22, 0.12);
  transition: transform 0.6s cubic-bezier(0.34, 1.5, 0.6, 1), opacity 0.55s ease, filter 0.55s ease, box-shadow 0.55s ease; }
.kachel img { width: 100%; height: 100%; object-fit: cover; }
.kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 11, 16, 0.38), transparent 26%, transparent 62%, rgba(10, 11, 16, 0.62)); pointer-events: none; }
.kachel-konto { position: absolute; z-index: 1; left: 11px; top: 11px; right: 11px; display: flex; align-items: center; gap: 7px; font: 600 12.5px/1.2 var(--display); color: #fff; }
.kachel-konto i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); color: var(--ink); font: 700 11px var(--display); font-style: normal; }
.kachel-konto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-views { position: absolute; z-index: 1; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; font: 600 13px var(--display); color: #fff; transition: opacity 0.3s ease; }
.kachel-views svg { width: 15px; height: 15px; }
.kachel-treffer { position: absolute; z-index: 1; left: 11px; right: 11px; top: 44px; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease 0.15s, transform 0.45s ease 0.15s; }
.kachel-treffer b { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; background: var(--grad); color: #fff; font: 700 13.5px/1.2 var(--display); box-shadow: 0 6px 18px rgba(59, 56, 245, 0.45); }
.kachel-treffer svg { flex: none; width: 14px; height: 14px; }
.kachel.ist-aus { opacity: 0.28; filter: grayscale(1); }
/* Virale Reels, die in dieser Runde nicht drankommen, zeigen ausgegraut keine Zahl: Ein graues „232 k“ am Rand neben
   einem leuchtenden „172 k“ würde der Aussage widersprechen. Die kleinen Zahlen der übrigen bleiben als Beleg stehen. */
.kachel.ist-aus[data-viral] .kachel-views { opacity: 0; }
/* Treffer: federnd etwas größer, weißer und blauer Rahmen, Leuchten; Platz dafür schafft der Innenabstand der Wand. */
.kachel.ist-treffer { z-index: 2; transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #5B4BFA, 0 26px 60px rgba(59, 56, 245, 0.42); }
.kachel.ist-treffer .kachel-treffer { opacity: 1; transform: none; }
.wand.ist-sortiert .kachel { opacity: 0; transition-duration: 0.45s; }
.kachel.ist-weg { visibility: hidden; }

/* ─── Problem ───
   Drei einzelne Probleme des Kunden, kein Weg und keine Fotos (Lukas 29.09.2026): durch feine Linien getrennt, jede
   Überschrift wird aufgedeckt, sobald ihr Punkt ins Bild kommt (m1.js setzt ist-da). Rechts die Muster-Grafik aus M3, oben
   bündig mit den Punkten; sie startet, wenn „Zu vereinzelt“ ins Bild kommt. Darunter der vierte Punkt als lila Block. */
/* overflow-x: clip, weil die Reels der Muster-Grafik von außerhalb hereinfliegen, ohne eine Scrollleiste zu erzeugen. */
.problem { padding: clamp(96px, 12vw, 168px) 0 0; overflow-x: clip; }
.problem h2 { max-width: 18em; font-size: clamp(34px, 3.6vw, 52px); font-weight: 650; line-height: 1.06; letter-spacing: -0.032em; }
.problem-liste { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas: "p1 bild" "p2 bild" "p3 bild"; gap: clamp(30px, 3vw, 40px) clamp(40px, 6vw, 96px); margin-top: clamp(52px, 6vw, 88px); }
.punkt-menge { grid-area: p1; }
.punkt-zufall { grid-area: p2; }
.punkt-einzeln { grid-area: p3; }
.muster-platz { grid-area: bild; align-self: start; }
.punkt:not(.punkt-menge) { padding-top: clamp(30px, 3vw, 40px); border-top: 1px solid var(--line); }
.problem-liste h3 { font-size: clamp(28px, 2.7vw, 38px); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; }
.punkt > p { margin-top: 12px; max-width: 32em; font-size: 18.5px; color: var(--ink-2); }

/* Der vierte Punkt als eigener Block über die volle Breite (Lukas 29.09.2026): lila im Kernflow-Verlauf, eine Stufe größer
   als die drei Punkte, aber ruhig. Übergang von der Grafik: Der Block steigt mit runden oberen Ecken wie ein neues Blatt
   aus der Seite auf; seine Überschrift wird wie die anderen aufgedeckt und endet mit einem Cursor auf leerem Blatt. */
.nullpunkt { margin-top: clamp(80px, 9vw, 128px); padding: clamp(56px, 6vw, 88px) 0; color: rgba(255, 255, 255, 0.86);
  border-radius: clamp(28px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px) 0 0;
  background: radial-gradient(ellipse 55% 75% at 88% 0%, rgba(255, 255, 255, 0.16), transparent 70%), linear-gradient(160deg, #3B38F5 0%, #5747F9 48%, #7A5CFF 100%); }
.nullpunkt-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; }
.nullpunkt h3 { max-width: 13em; font-size: clamp(30px, 3.2vw, 46px); font-weight: 650; line-height: 1.08; letter-spacing: -0.03em; color: #fff; }
.nullpunkt p { max-width: 32em; font-size: clamp(18px, 1.45vw, 20.5px); line-height: 1.6; }
.nullpunkt h3::after { content: ""; display: inline-block; width: 0.07em; height: 0.8em; margin-left: 0.12em; vertical-align: -0.04em; border-radius: 2px; background: rgba(255, 255, 255, 0.9); }

/* Überschriften: eine ruhige, für alle gleiche Bewegung (Lukas 29.09.2026: vier verschiedene waren zu viel). Kommt ein
   Punkt ins Bild (m1.js setzt ist-da), wird seine Überschrift mit weicher Kante von links nach rechts aufgedeckt. Die Maske
   ist 260 % breit: rechtsbündig liegt nur ihr durchsichtiger Teil über dem Text, linksbündig nur ihr deckender.
   Ohne Skript oder bei reduzierter Bewegung stehen die Überschriften einfach da. */
@media (prefers-reduced-motion: no-preference) {
  /* Nur so breit wie der Text, sonst wäre eine kurze Überschrift nach einem Bruchteil der Zeit schon ganz sichtbar. */
  .ist-kinetik .punkt h3, .nullpunkt.ist-kinetik h3 { width: fit-content; max-width: 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 56%); mask-image: linear-gradient(90deg, #000 44%, transparent 56%);
    -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  .ist-kinetik .punkt.ist-da h3, .nullpunkt.ist-kinetik.ist-da h3 { animation: aufdecken 1.4s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
  /* Der Cursor blinkt nach dem Aufdecken dauerhaft weiter (Lukas 29.09.2026). */
  .nullpunkt.ist-da h3::after { animation: cursor-blinken 1.1s steps(1) 1.4s infinite; }
}
@keyframes aufdecken { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes cursor-blinken { 50% { opacity: 0; } }

/* Zu vereinzelt, als Bild: Muster-Grafik wie im Kopf von M3 (Reels in derselben Größe, von allen Seiten über die Seite
   herein, ohne Abschneiden; Lukas 29.09.2026). 17 Reels derselben Szene fliegen heran, der Zähler läuft, der Stapel wird
   zur echten Kernflow-Karte (Live-Ausschnitt). Karte 350 px, damit ihre Schrift lesbar bleibt; die Flugziele misst m1.js.
   Höhe knapp über der Karte (594 px), damit die Grafik so hoch ist wie der Block der drei Punkte daneben. */
.muster { position: relative; height: 610px; margin: 0; }
.muster-flaeche { position: absolute; inset: 0; pointer-events: none; }
.muster-karte { position: absolute; left: 50%; top: 50%; width: min(350px, 100%); --kfd-verhaeltnis: 440 / 780; transform: translate(-50%, -50%) scale(0.92); opacity: 0; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(13, 15, 22, 0.06), 0 40px 80px -24px rgba(40, 32, 140, 0.45); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1); }
.muster.ist-karte .muster-karte { opacity: 1; transform: translate(-50%, -50%); }
/* Die App im Ausschnitt erst zeigen, wenn Seite und Kamera stehen (wie in M2), sonst blitzt der ganze Feed kurz auf. */
.muster-karte.kfd-buehne .kfd-welt { opacity: 0; transition: opacity 0.6s ease; }
.muster-karte.ist-bereit .kfd-welt { opacity: 1; }
/* Flug 1,5 s statt 0,9 s wie in M3: So dauert die Grafik etwas länger, und trotzdem sind wie im Original mehrere Reels
   zugleich in der Luft (Takt in m1.js, muss zu FLUG passen). */
.muster-flug { position: absolute; left: 0; top: 0; width: 132px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #1C1E2A; box-shadow: 0 16px 34px rgba(13, 15, 22, 0.22); opacity: 0; will-change: transform, opacity;
  transition: transform 1.5s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.6s ease; }
.muster-flug img { width: 100%; height: 100%; object-fit: cover; }
.muster-flug.ist-gespiegelt img { transform: scaleX(-1); }
.muster-flug p { position: absolute; left: 7px; right: 7px; top: 26%; margin: 0; text-align: center; font: 700 11.5px/1.35 var(--display); color: #fff; }
.muster-flug p span { background: rgba(10, 11, 16, 0.72); padding: 2px 5px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.muster-zaehler { position: absolute; left: 0; top: 0; margin: 0; display: flex; align-items: baseline; gap: 10px; transition: opacity 0.4s ease; }
.muster-zaehler b { font: 700 54px/1 var(--display); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.muster-zaehler span { font: 500 16px var(--display); color: var(--muted); }
.muster.ist-karte .muster-zaehler { opacity: 0; }
/* Zähler erst mit dem Start zeigen, sonst steht „0 Reels …“ wie ein Ladefehler neben den Punkten. */
.muster:not(.ist-gestartet) .muster-zaehler { opacity: 0; }

/* ─── Rechnung (aus M2, Lukas 29.09.2026) ───
   Die Suche von Hand als Rechnung, groß und mittig auf weißem Band: die Atempause zwischen Problem und Lösung. Die Faktoren
   brechen nur als Ganzes um, nie mitten in „45 Minuten Suche“. */
/* Abstände knapp gehalten (Lukas 29.09.2026: Freiraum ja, aber nicht so viel vor und nach der Rechnung). */
.rechnung { padding: clamp(56px, 6vw, 88px) 0; text-align: center; background: var(--surface); box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); }
.rechnung-vorspann { font: 600 18px var(--display); color: var(--accent); }
.rechnung-formel { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.08em 0.4em; font-size: clamp(38px, 5.4vw, 80px); font-weight: 650; line-height: 1.08; letter-spacing: -0.04em; }
/* Das Malzeichen gehört zum folgenden Faktor: bricht die Zeile, beginnt die neue mit „ד, statt dass es am Ende hängt. */
.rechnung-formel span { white-space: nowrap; }
.rechnung-formel i { margin-right: 0.4em; font-style: normal; font-weight: 300; color: var(--faint); }
/* Verlauf nur über die Breite des Satzes, nicht der Seite: sonst sähe man nur seine Mitte. */
.rechnung-ergebnis { width: fit-content; max-width: 100%; margin: 26px auto 0; font: 600 clamp(24px, 2.6vw, 36px)/1.25 var(--display); letter-spacing: -0.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ─── Leistung (aus M2, Lukas 29.09.2026) ───
   Drei Aussagen mit Live-Ausschnitten der echten Oberfläche (ausschnitt() in kapitel.js), alle drei in derselben Größe
   neben dem Text (Lukas 29.09.2026: Maß ist „Kernflow schaut für dich hin.“), die Seiten wechseln sich ab. */
.leistung { padding: clamp(88px, 11vw, 150px) 0 0; }
.rechnung + .leistung { padding-top: clamp(56px, 6vw, 88px); }
.leistung-raster { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.leistung-raster.ist-umgekehrt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.leistung-raster.ist-umgekehrt .leistung-text { order: 2; }
/* Skript-Bild breiter als die beiden anderen (Lukas 29.09.2026: sonst nicht lesbar). Die Schrift darin wächst nur mit der
   Bildbreite, weil die App für eine Reiterzeile mindestens 1000 px breit laufen muss. Höhe genau bis unter die erste
   Themenreihe (gemessen bei 1000 px: Karte 76–647, Reihe 661–884, nächste Reihe ab 898): Ausschnitt 988 × 896 App-px mit
   24 px Rand neben der Karte, Kamera dazu in m1.js. */
.leistung-raster.ist-gross { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.leistung-raster.ist-gross .ausschnitt-buehne { --kfd-verhaeltnis: 988 / 896; }
.leistung h2 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 650; line-height: 1.06; letter-spacing: -0.032em; }
/* Zwei Sätze in einer Überschrift: jeder beginnt eine eigene Zeile. */
.leistung h2 span { display: block; }
.leistung-text p { margin-top: 22px; max-width: 32em; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-2); }
.ausschnitt { margin: 0; }
.ausschnitt-buehne { --kfd-verhaeltnis: 4 / 3; border-radius: 20px; box-shadow: 0 0 0 1px rgba(13, 15, 22, 0.07), 0 2px 4px rgba(13, 15, 22, 0.05), 0 40px 90px -24px rgba(26, 24, 90, 0.34); }
/* Die App erst zeigen, wenn Seite und Kamera stehen (wie in M2), sonst blitzt kurz die ganze Seite auf. */
.ausschnitt-buehne.kfd-buehne .kfd-welt { opacity: 0; transition: opacity 0.6s ease; }
.ausschnitt-buehne.ist-bereit .kfd-welt { opacity: 1; }
.leistung-hinweis { margin-top: 28px; font-size: 14px; color: var(--muted); text-align: right; }

/* ─── Agenturen (aus M3, Text aus Agentursicht; Lukas 29.09.2026) ───
   Ersetzt „Viral heißt bei Kernflow …“ und „Jeder Kunde bekommt seine eigene Nische.“: Überschrift links, rechts Einleitung
   und drei Punkte mit Verlaufs-Punkt wie in M3. Die Linie oben trennt ihn von den Live-Ausschnitten darüber. */
.agentur { padding: clamp(72px, 8vw, 112px) 0 clamp(96px, 12vw, 160px); }
.agentur-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.agentur h2 { font-size: clamp(32px, 3.2vw, 46px); font-weight: 650; line-height: 1.08; letter-spacing: -0.03em; }
.agentur-lead { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.55; color: var(--ink); }
.agentur-liste { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.agentur-liste li { position: relative; padding-left: 22px; }
.agentur-liste li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.agentur-liste b { font-weight: 600; color: var(--ink); }

/* ─── Start ─── */
.start { padding: clamp(80px, 10vw, 128px) 0; background: var(--surface); box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line); }
.start h2 { font-size: clamp(32px, 3.2vw, 46px); font-weight: 650; line-height: 1.08; letter-spacing: -0.03em; max-width: 18ch; }
/* Drei Schritte aus M2 (Lukas 29.09.2026), im hellen M1-Stil. */
.start-schritte { list-style: none; counter-reset: schritt; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin: 52px 0 0; padding: 0; }
.start-schritte li { counter-increment: schritt; padding-top: 22px; border-top: 2px solid var(--ink); }
.start-schritte li::before { content: counter(schritt); display: block; margin-bottom: 18px; font: 700 44px/1 var(--display); letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.start-schritte strong { display: block; font: 600 19px/1.3 var(--display); color: var(--ink); }
.start-schritte p { margin-top: 8px; font-size: 16.5px; }

/* ─── Fragen ─── */
.fragen-bereich { padding: clamp(96px, 12vw, 160px) 0; }
.fragen-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
/* Überschrift und Gesprächslink wie auf der Live-Seite (Lukas 29.09.2026), gemeinsam klebend beim Scrollen. */
.fragen-kopf { position: sticky; top: 118px; }
.fragen-bereich h2 { font-size: clamp(30px, 2.8vw, 40px); font-weight: 650; line-height: 1.12; letter-spacing: -0.03em; }
.fragen-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 22px; font: 500 15.5px var(--display); color: var(--accent); text-decoration: none; }
.fragen-link:hover { color: var(--accent-d); text-decoration: underline; text-underline-offset: 3px; }
.fragen-link svg { flex: none; width: 14px; height: 14px; }
.fragen details:first-child summary { padding-top: 6px; }

/* ─── Schluss: Demo-Aufruf wie in M2 (Lukas 29.09.2026) ───
   Dunkles Band über die volle Breite, alles mittig, Licht in Blau und Violett von unten; nur „Demo buchen“. Steht vor den
   Fragen. */
.schluss { padding: clamp(96px, 12vw, 176px) 0; text-align: center; color: #B4BACB;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(59, 56, 245, 0.38), transparent 70%), radial-gradient(ellipse 40% 50% at 70% 100%, rgba(122, 92, 255, 0.3), transparent 70%), var(--ink); }
.schluss h2 { margin: 0 auto; max-width: 13ch; font-size: clamp(44px, 6.4vw, 94px); font-weight: 650; line-height: 0.99; letter-spacing: -0.045em; color: #fff; }
.schluss p { margin: 26px auto 0; max-width: 30em; font-size: clamp(18px, 1.5vw, 20px); }
.schluss-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 38px; }

.fuss { padding: 28px 0 44px; font-size: 14.5px; color: var(--muted); }
.fuss-innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.fuss nav { display: flex; gap: 22px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--ink); }

/* ─── Schmal ─── */
@media (max-width: 1020px) {
  .held-raster, .agentur-raster, .fragen-raster, .leistung-raster, .leistung-raster.ist-umgekehrt, .leistung-raster.ist-gross { grid-template-columns: minmax(0, 1fr); }
  .leistung-raster.ist-umgekehrt .leistung-text { order: 0; }
  .fragen-kopf { position: static; }
  /* Einspaltig: die Grafik steht direkt nach „Zu vereinzelt“, zu dem sie gehört. */
  .problem-liste { grid-template-columns: minmax(0, 1fr); grid-template-areas: "p1" "p2" "p3" "bild"; }
  .nullpunkt-innen { grid-template-columns: minmax(0, 1fr); }
  .held h1 { max-width: 12ch; }
  .wand { height: 580px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .kopf-innen { height: 64px; gap: 12px; }
  .kopf-nav { gap: 18px; }
  /* Am Handy nur Preise: Produkt übernimmt das Logo, Login gehört an den Desktop (Lukas 29.09.) */
  .kopf-link:not(.kopf-link-preise), .fuss-login { display: none; }
  .kopf-link-preise::before { content: ""; position: absolute; inset: -12px -8px; }
  .wand { height: 540px; margin-top: 18px; }
  .wand-strom { gap: 10px; padding: 0 10px; }
  .kachel { border-radius: 14px; margin-bottom: 10px; }
  .kachel-konto { left: 8px; top: 8px; right: 8px; gap: 5px; font-size: 10.5px; }
  .kachel-konto i { width: 17px; height: 17px; font-size: 9.5px; }
  .kachel-views { left: 8px; bottom: 8px; font-size: 11px; }
  .kachel-treffer { left: 7px; right: 7px; top: 32px; }
  .kachel-treffer b { gap: 4px; padding: 4px 7px; border-radius: 8px; font-size: 11px; }
  .kachel-treffer svg { width: 11px; height: 11px; }
  .wand-karte.ist-karte .wand-karte-foto { width: 80px; }
  .wand-karte-text { left: 94px; right: 86px; }
  .wand-karte-text b { font-size: 14px; }
  .wand-karte-aufrufe { right: 12px; }
  .wand-karte-aufrufe strong { font-size: 21px; }
  .wand-phasen li { font-size: 14px; }
  .wand-erklaerung { font-size: 15.5px; }
  .wand-hinweis { text-align: left; }
  .punkt > p { font-size: 17px; }
  .muster { height: 548px; }
  .muster-flug { width: 104px; }
  .muster-zaehler b { font-size: 42px; }
  .muster-karte { width: min(300px, 84%); }
  .ausschnitt-buehne { border-radius: 16px; }
  .leistung-hinweis { text-align: left; }
  .start-schritte { grid-template-columns: minmax(0, 1fr); }
}
/* Kleine Handys (bis 320 px): Logo, Preise und Knopf passen nur mit etwas kleinerer Schrift in eine Zeile */
@media (max-width: 374px) {
  .kopf-innen { gap: 10px; }
  .kopf .logo { gap: 8px; }
  .kopf .logo span { font-size: 18.5px; }
  .kopf-nav { gap: 12px; }
  .kopf-link-preise, .kopf-cta { font-size: 14px; }
  .kopf-cta { padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .wand-spalte { animation: none; }
}

/* Test Lukas 28.09.2026: Überschriften dünner, Outfit 500 wie im Entwurf „Klarheit“. Zum Zurücknehmen den Block löschen. */
.held h1, .problem h2, .problem-liste h3, .nullpunkt h3, .rechnung-formel, .leistung h2, .agentur h2, .start h2, .fragen-bereich h2, .schluss h2 { font-weight: 500; }