/* ==========================================================================
   DPW Landingpage-System (lpx). Lädt NACH css/styles.css, ändert die Hauptseite nicht.
   Mobile first: Grundwerte für 390 px, ab 701 / 901 / 1101 px nach oben erweitert.
   Anleitung und Markup: _intern/lp-redesign/SYSTEM.md
   Runde 2 (26.10.2026): Knopf-Reset ohne Wirkung auf .btn--primary, Ziffer im ersten Schritt, Kopfzeile und Dock am Handy
   deckend, Dock bis 400 px einzeilig, Vertrauenszeile in Archivo, kompakter Cookie-Banner, .lpx-textcta, .lpx-spur,
   Etiketten der Szene, Funke, Rückfall-Haken im Orbit, FAQ mit Platz für das Dock (Block am Dateiende).
   ========================================================================== */

.lpx { --lpx-gap: clamp(1rem, 2vw, 2rem); --lpx-text: 40rem; }
.lpx .nw { white-space: nowrap; }
:where(.lpx) button { background: transparent; }   /* Falle der Hauptseite: <button> nie mit Browser-Grau; :where() lässt .btn--primary gewinnen */
.lpx main { position: relative; z-index: 1; }

/* ---------- Leinwand: blendet erst ein, wenn das erste Bild gezeichnet ist ---------- */
.lpx .scene { opacity: 0; transition: opacity 0.9s var(--ease); }
html.szene-an .lpx .scene { opacity: 1; }
html.no-webgl .lpx .scene { display: none; }

/* ---------- Kopfzeile: Marke links, eine leise Pille rechts ---------- */
.lpx .nav { gap: 1rem; }
.lpx .nav__cta { margin-left: auto; }
.lpx .nav__progress { transform: scaleX(var(--lpx-fortschritt, 0)); }
@media (max-width: 700px) {
  .lpx .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }   /* deckend: kein Text scheint durch */
}

/* ---------- Hero ---------- */
.lpx-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.1rem;
  padding: 6rem var(--pad) clamp(2rem, 6vh, 3rem);
}
.lpx-hero .eyebrow { margin: 0; }
.lpx-hero .hero__title { margin: 0; text-wrap: balance; }
.lpx-hero .hero__title .line__inner { white-space: normal; }
@media (min-width: 641px) { .lpx-hero .hero__title { font-size: clamp(2.5rem, 5.6vw, 6.4rem); } }
.lpx-hero__lead { margin: 0; max-width: 36rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--fg); }
.lpx-hero__cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 0.2rem; }
.lpx-hero__cta .btn { width: 100%; min-height: 56px; }
/* Vertrauenszeile in Archivo (im Hero höchstens eine Mono-Zeile: die Dachzeile) */
.lpx-hero__vertrauen { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--fg); }
.lpx-gesichter { display: inline-flex; flex: none; }
.lpx-gesichter img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); background: var(--card); }
.lpx-gesichter img + img { margin-left: -0.625rem; }
.lpx-hero__buehne { min-height: clamp(240px, 68vw, 340px); }
html[data-contrast="high"] .lpx-hero__lead, html[data-contrast="high"] .lpx-hero__vertrauen { text-shadow: 0 0 12px var(--bg), 0 0 3px var(--bg); }
@media (min-width: 701px) {
  .lpx-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; }
  .lpx-hero__cta .btn { width: auto; }
}
@media (min-width: 901px) {
  .lpx-hero {
    min-height: clamp(620px, 92svh, 940px); padding-top: clamp(6.5rem, 13vh, 8.5rem); align-content: center;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); row-gap: 1.4rem;
  }
  .lpx-hero > * { grid-column: 1; }
  /* Standard: Dachzeile und H1 über die ganze Breite, darunter links Text und Knöpfe, rechts die Bühne */
  .lpx-hero > .eyebrow, .lpx-hero > .hero__title { grid-column: 1 / -1; }
  .lpx-hero > .lpx-hero__buehne { grid-column: 2; grid-row: 3 / span 8; align-self: stretch; min-height: clamp(380px, 52svh, 600px); }
  /* Variante: Bühne neben der ganzen Textspalte (H1 bricht in der Spalte um) */
  .lpx-hero--seite > .eyebrow, .lpx-hero--seite > .hero__title { grid-column: 1; }
  .lpx-hero--seite > .lpx-hero__buehne { grid-row: 1 / span 9; min-height: clamp(420px, 64svh, 640px); }
  .lpx-hero__lead { font-size: clamp(1.1rem, 1.35vw, 1.25rem); }
}
@media (max-width: 700px) { .lpx-hero__cta .btn--ghost.lpx-nur-desktop { display: none; } }
@media (max-width: 480px) { .lpx .btn--big { padding-inline: 1.1rem; } .lpx .btn--big .ico-wa { margin-right: 0.5em; } }
.lpx-nur-handy { display: initial; }
@media (min-width: 701px) { .lpx-nur-handy { display: none !important; } }
@media (max-width: 700px) { .lpx-nur-desktop { display: none !important; } }

/* ---------- Bühnen für die three.js-Szene (immer leer, nie Text darin) ---------- */
.lpx-buehne { position: relative; pointer-events: none; min-height: 200px; }
.lpx-buehne__bild { position: absolute; inset: 0; margin: auto; width: min(78%, 420px); height: auto; max-height: 86%; object-fit: contain; opacity: 0.8; transition: opacity 0.6s var(--ease); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-accent) 55%, transparent)); }
svg.lpx-buehne__bild { overflow: visible; }
html.szene-an .lpx-buehne.is-live .lpx-buehne__bild { opacity: 0; }
html.no-webgl .lpx-buehne .lpx-buehne__bild { opacity: 0.85; }
.lpx-buehne__vermerk { position: absolute; right: 0; bottom: 0; font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); opacity: 0.7; }
.lpx-buehne--quadrat { aspect-ratio: 1; min-height: 0; }
.lpx-buehne--breit { aspect-ratio: 16 / 9; min-height: 0; }
@media (max-width: 900px) { .lpx-buehne { min-height: 200px; } .lpx-buehne--handy-aus { display: none; } }
@media (min-width: 901px) {
  .lpx-buehne--sticky { position: sticky; top: 15vh; height: 70vh; min-height: 360px; }
  .lpx-buehne--desktop-aus { display: none; }
}
/* Lichtpunkt-Zeichen als Rückfall (inline SVG, Werte wie /img/orbit.svg und .nav__mark) */
.lpx-orbit ellipse { fill: none; stroke-linecap: round; stroke-width: 0.9; stroke-dasharray: 0.01 1.12; }
.lpx-orbit .lpx-orbit__p { stroke: var(--c-accent); }
.lpx-orbit .lpx-orbit__w { stroke: var(--c-ring2); opacity: 0.8; }
@media (prefers-reduced-motion: no-preference) {
  .lpx-orbit .lpx-orbit__p { animation: mark-fluss 7s linear infinite; }
  .lpx-orbit .lpx-orbit__w { animation: mark-fluss 9s linear infinite reverse; }
}

/* ---------- Kapitel: Hauptseiten-Kapitel plus Raster ---------- */
.lpx .chapter { position: relative; }
.lpx .chapter__title { font-size: clamp(2.1rem, 8.6vw, 2.6rem); line-height: 1; text-wrap: balance; }
@media (min-width: 641px) { .lpx .chapter__title { font-size: min(clamp(2.6rem, 6.2vw, 6rem), 5.2rem); line-height: 0.98; } }
.lpx-inhalt { margin-top: clamp(1.6rem, 4vh, 3rem); }
.lpx-text { max-width: var(--lpx-text); }
.lpx-text p { margin: 0 0 1rem; color: var(--fg-muted); }
.lpx-text p:last-child { margin-bottom: 0; }
.lpx-text strong { color: var(--fg); font-weight: 600; }
.lpx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lpx-gap); }
@media (min-width: 901px) { .lpx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.lpx-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.lpx-split--buehne-oben > .lpx-buehne { order: -1; }
@media (min-width: 901px) {
  .lpx-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lpx-split--links { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lpx-split--links > .lpx-buehne { order: -1; }
  .lpx-split--buehne-oben > .lpx-buehne { order: 0; }
  .lpx-split > .lpx-buehne:not(.lpx-buehne--sticky) { align-self: stretch; min-height: 380px; }
}

/* ---------- Knöpfe ---------- */
.lpx-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.lpx-cta .btn { width: 100%; min-height: 56px; }
.lpx-mikro { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--fg-muted); }
@media (min-width: 701px) {
  .lpx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
  .lpx-cta .btn { width: auto; }
}
.lpx .btn { gap: 0; }
.lpx .btn .ico-wa { transition: transform 0.4s var(--ease); }
.lpx .btn:active { transform: scale(0.97); transition-duration: 0.12s; }
.lpx .btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .lpx .btn.btn--primary[data-wa]:hover { transform: translateY(-2px); }
  .lpx .btn.btn--primary[data-wa]:hover .ico-wa { transform: translateX(3px); }
  .lpx .btn--ghost:hover { border-color: var(--c-accent); color: var(--accent-ink); }
}
/* Ziel des Lichtpunkts: kurzes Glimmen, kein Dauerpuls */
@keyframes lpx-landung { from { box-shadow: 0 0 0 0 rgb(37 211 102 / 0.5); } to { box-shadow: 0 0 0 14px rgb(37 211 102 / 0); } }
.is-landung { animation: lpx-landung 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1; }
/* Lichtstreif einmal über einen Knopf (Klasse setzt js/lpx.js) */
.lpx .btn.is-glanz { background-image: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.45) 50%, transparent 65%); background-size: 250% 100%; background-repeat: no-repeat; animation: lpx-glanz 1.2s var(--ease) 1 both; }
@keyframes lpx-glanz { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* ---------- Listen ---------- */
.lpx-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.lpx-liste li { display: flex; gap: 0.75rem; align-items: baseline; color: var(--fg); }
.lpx-liste li::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; transform: translateY(0.18em); background: radial-gradient(ellipse 50% 21% at 50% 50%, transparent 78%, var(--fg) 80% 98%, transparent 100%), radial-gradient(ellipse 21% 50% at 50% 50%, transparent 78%, var(--accent-ink) 80% 98%, transparent 100%); transition: transform 0.9s var(--ease); }
.lpx-liste li.is-an::before { transform: translateY(0.18em) rotate(180deg); }

/* Punkte mit Haarlinie (Kennst du das?, Warnsignale) */
.lpx-punkte { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: lpxp; }
.lpx-punkte > li { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.8rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.45; counter-increment: lpxp; }
.lpx-punkte > li::before { content: counter(lpxp, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--accent-ink); padding-top: 0.25em; }
.lpx-punkte b, .lpx-punkte strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em; color: var(--fg); margin-bottom: 0.25rem; }
.lpx-punkte p { margin: 0; color: var(--fg-muted); }
@media (min-width: 901px) { .lpx-punkte > li { grid-template-columns: 3.4rem minmax(0, 1fr); padding: 1.4rem 0; } .lpx-punkte b, .lpx-punkte strong { font-size: 1.45rem; } }

/* Kacheln ohne Kästen: Haarlinie oben, Nummer, Titel, Text */
.lpx-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--lpx-gap); }
.lpx-karte { position: relative; padding: 1.3rem 0 1.5rem; border-top: 1px solid var(--line-strong); display: grid; align-content: start; gap: 0.5rem; }
.lpx-karte::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent) -30% 0 / 30% 100% no-repeat; opacity: 0; }
.lpx-karte__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.lpx-karte h3, .lpx-karte__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--fg); }
.lpx-karte p { margin: 0; color: var(--fg-muted); }
@media (min-width: 701px) { .lpx-karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px) { .lpx-karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lpx-karten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lpx-karte h3, .lpx-karte__t { font-size: 1.5rem; } }
@media (hover: hover) and (pointer: fine) {
  .lpx-karte { transition: transform 0.4s var(--ease); }
  .lpx-karte:hover { transform: translateY(-4px); }
  .lpx-karte:hover::after { opacity: 1; animation: lpx-streif 1.1s var(--ease) 1 both; }
}
@keyframes lpx-streif { from { background-position: -30% 0; } to { background-position: 130% 0; } }

/* ---------- Ablauf: Schritte auf einer Linie, Linie füllt sich beim Scrollen (--lpx-p, js/lpx.js) ---------- */
.lpx-ablauf { --lpx-p: 1; position: relative; list-style: none; margin: 0; padding: 0 0 0 3.2rem; display: grid; gap: 1.6rem; counter-reset: lpxs; }
.lpx-ablauf::before, .lpx-ablauf::after { content: ""; position: absolute; left: 1.05rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--line); }
.lpx-ablauf::after { background: var(--c-accent); transform-origin: top; transform: scaleY(var(--lpx-p)); }
.lpx-schritt { position: relative; counter-increment: lpxs; }
.lpx-schritt__num { position: absolute; left: -3.2rem; top: -0.15rem; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--fg-muted); transition: color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease); }
.lpx-schritt.is-an .lpx-schritt__num { color: var(--accent-ink); border-color: var(--c-accent); transform: scale(1.08); }
.lpx-schritt--eins .lpx-schritt__num, .lpx-schritt--eins.is-an .lpx-schritt__num { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
/* erster Schritt ist die WhatsApp-Nachricht: grün gefüllt */
.lpx-schritt--wa .lpx-schritt__num, .lpx-schritt--wa.is-an .lpx-schritt__num { background: var(--wa); color: var(--wa-ink); border-color: var(--wa); }
.lpx-schritt__t { display: block; margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg); }
.lpx-schritt p { margin: 0; color: var(--fg-muted); max-width: 30rem; }
@media (min-width: 901px) {
  .lpx-ablauf--quer { padding: 3.4rem 0 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--lpx-gap); }
  .lpx-ablauf--quer::before, .lpx-ablauf--quer::after { left: 1.1rem; right: 0; top: 1.1rem; bottom: auto; width: auto; height: 1px; }
  .lpx-ablauf--quer::after { transform-origin: left; transform: scaleX(var(--lpx-p)); }
  .lpx-ablauf--quer .lpx-schritt__num { left: 0; top: -3.4rem; }
  .lpx-schritt__t { font-size: 1.5rem; }
}

/* ---------- Prüfliste mit gezeichneten Haken ---------- */
.lpx-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.lpx-haken li { position: relative; padding-left: 2.2rem; color: var(--fg); line-height: 1.45; }
.lpx-haken li::before { content: ""; position: absolute; left: 0.25rem; top: 0.28em; width: 0.72rem; height: 0.38rem; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(-45deg); clip-path: inset(0 0 0 0); }
html.lpx-anim .lpx-haken li::before { clip-path: inset(0 100% 0 0); transition: clip-path 0.5s var(--ease); }
html.lpx-anim .lpx-haken li.is-an::before { clip-path: inset(0 0 0 0); }
.lpx-haken li small, .lpx-haken li p { display: block; margin: 0.2rem 0 0; color: var(--fg-muted); font-size: 0.95rem; }
.lpx-recht { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lpx-recht li { display: inline-flex; align-items: center; min-height: 36px; padding: 0.35rem 0.85rem; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------- Referenzen (nur echte Projekte, FAKTEN.md 1.1 und 1.3) ---------- */
.lpx-refs { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.lpx-ref { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line-strong); }
.lpx-ref__marke { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1; letter-spacing: -0.03em; color: var(--fg); }
.lpx-ref__art { margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.lpx-ref__text { margin: 0; color: var(--fg-muted); max-width: 38rem; }
.lpx-ref__text strong { color: var(--fg); font-weight: 600; }
.lpx-ref__link { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.25em; transition: text-decoration-thickness 0.3s, text-underline-offset 0.3s; }
.lpx-ref__link::after { content: "↗"; color: var(--accent-ink); font-size: 0.9em; text-decoration: none; display: inline-block; }
.lpx-ref__link:hover { text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.lpx-ref__link[href^="/"]::after, .lpx-ref__link[href^="#"]::after { content: none; }   /* Pfeil nur bei fremden Seiten */
.lpx-ref__beleg { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.lpx-ref__screen { position: relative; margin: 0; border: 1px solid var(--line-strong); border-radius: 0.9rem; overflow: hidden; background: var(--card); aspect-ratio: 16 / 10; }
.lpx-ref__screen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.4rem; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 0.8rem 50%, var(--line-strong) 0.2rem, transparent 0.22rem), radial-gradient(circle at 1.4rem 50%, var(--line-strong) 0.2rem, transparent 0.22rem), radial-gradient(circle at 2rem 50%, var(--line-strong) 0.2rem, transparent 0.22rem); }
.lpx-ref__screen img { position: absolute; left: 0; right: 0; top: 1.4rem; bottom: 0; width: 100%; height: calc(100% - 1.4rem); object-fit: cover; object-position: top; }
.lpx-ref--eigen .lpx-ref__art { color: var(--fg-muted); }
@media (min-width: 901px) {
  .lpx-ref { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); align-items: baseline; padding: 2rem 0; }
  .lpx-ref:has(.lpx-ref__screen) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .lpx-ref__marke { font-size: clamp(2rem, 3.2vw, 3rem); }
}

/* ---------- Team und Firma ---------- */
.lpx-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.lpx-person { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.4rem 1.1rem; align-items: start; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.lpx-person__foto { grid-row: span 3; width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; background: var(--card); border: 1px solid var(--line); }
.lpx-person h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.024em; line-height: 1.05; }
.lpx-person .person__role { justify-content: flex-start; min-height: 0; align-content: flex-start; }
.lpx-person p { margin: 0; color: var(--fg-muted); font-size: 1rem; }
.lpx-firma { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.7; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.lpx-firma b { color: var(--fg); font-weight: 500; }
.lpx-firma a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.25em; }
@media (min-width: 901px) {
  .lpx-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
  .lpx-person { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .lpx-person__foto { width: 7.5rem; height: 7.5rem; }
  .lpx-person h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
}

/* ---------- Großer Satz (Zusammenarbeit) ---------- */
.lpx-zitat { margin: 0; max-width: 22ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 7.5vw, 2.6rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.lpx-zitat em { font-style: normal; color: var(--accent-ink); }
@media (min-width: 901px) { .lpx-zitat { font-size: clamp(2.6rem, 4.6vw, 4.6rem); } }

/* ---------- Für wen: Wortband ---------- */
.lpx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lpx-chips li { display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 0.95rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.95rem; color: var(--fg); }
.lpx-chips--nein li { color: var(--fg-muted); border-style: dashed; }

/* ---------- Laufband (Hauptseiten-Markup .statement > .marquee > .marquee__track) ---------- */
.lpx .statement { padding: 0; }
.lpx .marquee__track { animation-duration: var(--lpx-band, 52s); }
.lpx .statement + .chapter .chapter__head { border-top: 0; padding-top: 0; }
@media (max-width: 700px) { .lpx .marquee__track span { font-size: 1.15rem; gap: 2rem; } .lpx .marquee__track { gap: 2rem; } }
@media (hover: hover) { .lpx .marquee:hover .marquee__track { animation-play-state: paused; } }

/* ---------- Fragen: details/summary mit Haarlinien ---------- */
.lpx-faq { border-top: 1px solid var(--line-strong); }
.lpx-faq__item { border-bottom: 1px solid var(--line-strong); }
.lpx-faq__item > summary { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 2.6rem; align-items: center; gap: 0.8rem; min-height: 64px; padding: 1rem 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); }
.lpx-faq__item > summary::-webkit-details-marker { display: none; }
.lpx-faq__item > summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 0.4rem; }
.lpx-faq__num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em; color: var(--accent-ink); }
.lpx-faq__plus { position: relative; justify-self: end; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform 0.4s var(--ease), background-color 0.4s, border-color 0.4s; }
.lpx-faq__plus::before, .lpx-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 1.5px; margin: -0.75px 0 0 -0.45rem; background: var(--fg); }
.lpx-faq__plus::after { transform: rotate(90deg); }
.lpx-faq__item[open] .lpx-faq__plus { transform: rotate(45deg); background: var(--c-accent); border-color: var(--c-accent); }
.lpx-faq__item[open] .lpx-faq__plus::before, .lpx-faq__item[open] .lpx-faq__plus::after { background: var(--c-on-accent); }
.lpx-faq__a { overflow: hidden; }
.lpx-faq__a > div { padding: 0 0 1.4rem 3.2rem; color: var(--fg-muted); max-width: 44rem; }
.lpx-faq__a p { margin: 0 0 0.8rem; } .lpx-faq__a p:last-child { margin: 0; }
@media (max-width: 640px) { .lpx-faq__a > div { padding-left: 0; } .lpx-faq__item > summary { grid-template-columns: 2rem minmax(0, 1fr) 2.6rem; font-size: 1.1rem; } }
@media (min-width: 901px) { .lpx-faq__item > summary { font-size: clamp(1.15rem, 1.8vw, 1.4rem); padding: 1.3rem 0; } }

/* ---------- Video (Poster zuerst, lädt erst bei Bedarf) ---------- */
.lpx-video { position: relative; width: 100%; max-width: 54rem; margin: 0 auto; border-radius: 1.2rem; overflow: hidden; border: 1px solid var(--line-strong); background: #000; aspect-ratio: 16 / 9; container-type: inline-size; }
.lpx-video--hoch { aspect-ratio: 9 / 16; max-width: 26rem; }
.lpx-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.lpx-video video::cue { font-family: var(--font-body), system-ui, sans-serif; font-size: 1.05em; background: rgba(11, 15, 23, 0.82); color: #fff; }
.lpx-video__start { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 0.8rem; width: 100%; border: 0; background: linear-gradient(180deg, rgba(11, 15, 23, 0) 40%, rgba(11, 15, 23, 0.55)); color: #fff; cursor: pointer; font: 600 1rem/1.2 var(--font-body); }
.lpx-video__start::before { content: ""; width: clamp(4.2rem, 16cqi, 6rem); aspect-ratio: 1; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-accent) 22%, transparent); transition: transform 0.4s var(--ease); }
.lpx-video__start::after { content: ""; position: absolute; left: 50%; top: 50%; width: clamp(1.3rem, 5cqi, 1.9rem); aspect-ratio: 0.9; transform: translate(-38%, calc(-50% - 1.1rem)); background: var(--c-on-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lpx-video__start span { position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.lpx-video__start:hover::before { transform: scale(1.06); }
.lpx-video__start:focus-visible, .lpx-video__ton:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.lpx-video__ton { position: absolute; left: 0.8rem; top: 0.8rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.6rem 1.1rem 0.6rem 0.9rem; border: 0; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font: 600 0.9rem/1 var(--font-body); cursor: pointer; transition: transform 0.4s var(--ease), background-color 0.4s; }
.lpx-video__ton:hover { transform: translateY(-2px); background: var(--fg); color: var(--bg); }
.lpx-video__ton::before { content: ""; width: 1rem; height: 0.9rem; background: currentColor; clip-path: polygon(0 30%, 35% 30%, 100% 0, 100% 100%, 35% 70%, 0 70%); }
.lpx-video__ton[hidden], .lpx-video__start[hidden], .lpx-video__nochmal[hidden] { display: none; }
.lpx-video__nochmal { position: absolute; right: 0.8rem; top: 0.8rem; z-index: 3; min-height: 44px; padding: 0.6rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; background: rgba(11, 15, 23, 0.6); color: #fff; font: 600 0.9rem/1 var(--font-body); cursor: pointer; }
.lpx-video__caps { position: absolute; left: 5%; right: 5%; bottom: 14%; z-index: 1; display: flex; justify-content: center; text-align: center; pointer-events: none; transition: bottom 0.5s var(--ease); }
.lpx-video.is-cta .lpx-video__caps { bottom: 40%; }
.lpx-video.is-ende .lpx-video__caps { display: none; }
@container (max-width: 520px) { .lpx-video.is-cta .lpx-video__caps { display: none; } }
.lpx-video .lp__cap { max-width: 17ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 5.4cqi, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; color: #fff; text-wrap: balance; text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.6); }
.lpx-video .lp__cap--hook { max-width: 15ch; font-size: clamp(1.2rem, 6.6cqi, 3.9rem); }
.lpx-video .lp__w { display: inline-block; padding: 0 0.12em; margin: 0 -0.04em; border-radius: 0.22em; transition: color 0.12s, background-color 0.12s, transform 0.12s; }
.lpx-video .lp__w--k { color: var(--c-accent); }
.lpx-video .lp__w.is-jetzt { background: var(--c-accent); color: var(--c-on-accent); text-shadow: none; transform: scale(1.06); }
.lpx-video__ende { position: absolute; left: 50%; bottom: 12%; z-index: 2; transform: translateX(-50%); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s 0.4s; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 1.05em; border-radius: 999px; background: var(--wa); color: var(--wa-ink); font: 800 clamp(0.88rem, 3.4cqi, 1.5rem)/1.1 var(--font-display); white-space: nowrap; }
.lpx-video.is-cta .lpx-video__ende { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease); }
.lpx-video.is-ende::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 15, 23, 0.2), rgba(11, 15, 23, 0.78)); pointer-events: none; }
.lpx-video.is-ende .lpx-video__ende { bottom: 50%; transform: translate(-50%, 50%); }
.is-zeigen { outline: 2px solid var(--wa); outline-offset: 4px; transition: outline-color 0.4s var(--ease); }

/* ---------- Website-Check-Feld ---------- */
.lpx-check { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; width: 100%; max-width: 36rem; margin: 0; }
.lpx-check__feld { display: block; min-width: 0; }
.lpx-check__feld input { width: 100%; min-height: 56px; padding: 0.9rem 1.2rem; border: 1px solid var(--line-strong); border-radius: 999px; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); font: 500 1.05rem/1.2 var(--font-body); }
.lpx-check__feld input::placeholder { color: var(--fg-muted); }
.lpx-check__feld input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-color: var(--c-accent); }
.lpx-check .btn { min-height: 56px; }
.lpx-check__fehler { grid-column: 1 / -1; margin: 0; min-height: 1.2em; color: #ff9a8e; font-size: 0.9rem; }
@media (min-width: 701px) { .lpx-check { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- Schluss (Kontaktbereich der Hauptseite) ---------- */
.lpx-schluss { position: relative; }
.lpx-schluss__buehne { width: 100%; height: clamp(170px, 26svh, 300px); min-height: 0; margin: 0 auto -0.5rem; }
.lpx-schluss .contact__text { margin-top: 1.4rem; margin-bottom: 2rem; }
.lpx-schluss .lpx-mikro { margin-top: 0.4rem; text-align: center; }

/* ---------- Fuß: voller Betreibername ---------- */
.lpx .footer { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.lpx-footer__firma { color: var(--fg-muted); text-transform: none; letter-spacing: 0.02em; font-family: var(--font-body); font-size: 0.85rem; line-height: 1.5; max-width: 60rem; }
@media (min-width: 701px) { .lpx .footer { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } .lpx-footer__firma { flex-basis: 100%; order: 9; } }

/* ---------- Dock: am Handy volle Breite, deckend, ohne Weichzeichner ---------- */
@media (max-width: 700px) {
  .lpx .dock { background: var(--c-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* deckend */
  .lpx .dock__wa { flex: 1.25; min-height: 52px; }
  .lpx .dock__form { flex: 1; min-height: 52px; background: color-mix(in srgb, var(--c-light) 8%, var(--c-panel)); }
}
@media (max-width: 400px) {   /* „Anfrage stellen“ bleibt einzeilig (styles.css regelt das erst unter 360 px) */
  .lpx .dock__wa, .lpx .dock__form { padding-inline: 0.5rem; font-size: 0.9rem; white-space: nowrap; }
  .lpx .dock__form { gap: 0.45rem; }
}
.lpx .dock__wa .ico-wa { width: 1.2em; height: 1.2em; margin-right: 0.5em; }

/* ---------- Einblenden: Ausgangszustände setzt nur js/lpx.js (html.lpx-anim) ---------- */
html.lpx-anim [data-reveal] { will-change: transform, opacity; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .lpx-karte::after, .is-landung, .lpx .btn.is-glanz { animation: none; }
  .lpx-liste li::before { transition: none; }
}
@media print { .lpx-buehne, .lpx-video__start, .lpx-video__ton { display: none !important; } }

/* ==========================================================================
   Runde 2 (26.10.2026): Bausteine aus den Seitenordnern ins System geholt
   ========================================================================== */

/* Kapitelkopf ohne Intro: Titel über die ganze Breite (sonst bricht er in der 1.9fr-Spalte nach jedem Wort) */
@media (min-width: 901px) { .lpx .chapter__head:not(:has(.chapter__intro)) { grid-template-columns: minmax(0, 1fr); } }
/* Rollen im Team dürfen auf kleinen Handys umbrechen */
@media (max-width: 400px) { .lpx-person .person__role li { white-space: normal; } }
/* Schluss: Titel am Desktop gedeckelt, damit Knöpfe und Bühne in einen Bildschirm passen */
@media (min-width: 901px) { .lpx-schluss .contact__title { font-size: min(clamp(2.8rem, 6.4vw, 6.2rem), calc((100vw - 2 * var(--pad)) / 8.1)); } }

/* WhatsApp-Symbol im Fließtext steht in der Zeile */
.lpx a:not(.btn):not(.dock__wa) .ico-wa { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-right: 0.35em; }

/* Ruhiger WhatsApp-Textknopf (grün, Symbol, Unterstrich), zum Beispiel am Abschnittsende */
.lpx-textcta { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; color: var(--wa); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-thickness 0.3s var(--ease), text-underline-offset 0.3s var(--ease), opacity 0.12s; }
.lpx-textcta .ico-wa { flex: none; width: 1.1em; height: 1.1em; margin: 0; vertical-align: 0; color: var(--wa); transition: transform 0.3s var(--ease); }
.lpx-textcta:active { opacity: 0.7; }
.lpx-textcta:focus-visible { outline: 3px solid var(--c-light); outline-offset: 3px; border-radius: 0.3rem; }
@media (hover: hover) and (pointer: fine) {
  .lpx-textcta:hover { text-decoration-thickness: 2px; text-underline-offset: 0.32em; }
  .lpx-textcta:hover .ico-wa { transform: translateX(2px); }
}

/* Spur: Bühne klebt neben langem Text (nur Desktop, ohne Pin). Kopf über die ganze Breite, Inhalt links 7/12, Spur rechts.
   <section class="chapter lpx-mit-spur"> .chapter__head, .lpx-inhalt, <div class="lpx-spur" aria-hidden="true"><div class="lpx-buehne lpx-spur__buehne" data-szene-buehne="…"></div></div> */
.lpx-spur { display: none; }
@media (min-width: 901px) {
  .lpx-mit-spur { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
  .lpx-mit-spur > .chapter__head { grid-column: 1 / -1; grid-row: 1; }
  .lpx-mit-spur > .lpx-inhalt { grid-column: 1; grid-row: 2; }
  .lpx-mit-spur > .lpx-inhalt.lpx-split { grid-template-columns: minmax(0, 1fr); }
  .lpx-spur { display: block; position: relative; z-index: 0; grid-column: 2; grid-row: 2; align-self: stretch; margin-top: clamp(1.6rem, 4vh, 3rem); pointer-events: none; }
  .lpx-buehne.lpx-spur__buehne { position: sticky; top: 15vh; height: min(52vh, 460px); min-height: 300px; }
}

/* Fragen am Desktop: rechts Platz für das Dock, damit kein Plus darunter liegt */
@media (min-width: 1101px) { .lpx-faq { padding-right: 17rem; } }

/* Rückfall-Haken im Orbit-SVG (g.lpx-orbit__haken mit drei path pathLength="1"), zeichnen sich ohne WebGL im Takt */
.lpx-orbit__haken path { fill: none; stroke: var(--c-light); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.no-webgl .lpx-orbit__haken path { animation: lpx-fb-haken 3.2s var(--ease) infinite both; }
  html.no-webgl .lpx-orbit__haken path:nth-child(2) { animation-delay: 1.07s; }
  html.no-webgl .lpx-orbit__haken path:nth-child(3) { animation-delay: 2.13s; }
}
@keyframes lpx-fb-haken { 0% { stroke-dashoffset: 1; opacity: 1; } 14% { stroke-dashoffset: 0; } 70% { stroke-dashoffset: 0; opacity: 1; } 85%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Etiketten: DOM-Schilder folgen Lichtpunkten der Szene (bausteine.js etiketten()). Vor dem ersten Bild und ohne WebGL
   stehen sie an ihrer CSS-Lage der Seite. */
[data-szene-etiketten].is-szene [data-szene-etikett] { left: 0; top: 0; transition: opacity 0.45s var(--ease), color 0.3s var(--ease); }
html.szene-an [data-szene-etiketten].is-szene [data-szene-etikett]:not(.is-an),
[data-szene-etiketten].is-weg [data-szene-etikett] { opacity: 0; }

/* Funke im DOM (window.lpxFunke in js/lpx.js): ein Lichtpunkt fliegt in den grünen Knopf */
.lpx-funke { position: fixed; left: 0; top: 0; z-index: 75; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c-ring2); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--c-ring2) 70%, transparent); pointer-events: none; will-change: transform; }

/* Cookie-Banner am Handy kompakt (Banner aus js/tracking.js, gilt nur auf Landingpages): ganzer Text, drei gleich große
   Knöpfe in einer Zeile, Unterkante direkt über dem Dock. H1 und grüner Knopf bleiben darüber frei. Auf sehr kurzen
   Bildschirmen (bis 700 px Höhe) drei Zeilen Text plus „Mehr dazu“ (Knopf aus js/lpx.js). */
.lpx-consent__mehr { display: none; }
.lpx .consent.ka-consent .lpx-consent__mehr { display: none !important; }   /* Seite hat noch eigenen Knopf (altes kundenanfragen/seite.js) */
@media (max-width: 700px) {
  .lpx .consent { left: 0.75rem; right: 0.75rem; width: auto; bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); max-height: 52svh; padding: 0.85rem 0.95rem 0.9rem; border-radius: 1.1rem; }
  .lpx .consent h2 { margin: 0 0 0.3rem; font-size: 1rem; line-height: 1.2; }
  .lpx .consent p { margin: 0; font-size: 0.78rem; line-height: 1.45; }
  .lpx .consent__wahl { margin: 0.6rem 0 0; }
  .lpx .consent__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.6rem; }
  .lpx .consent .btn { min-height: 44px; padding: 0.4rem 0.3rem; font-size: 0.8rem; line-height: 1.15; white-space: normal; text-align: center; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .lpx .consent { padding-block: 0.7rem 0.75rem; }
  .lpx .consent h2 { padding-right: 5.6rem; }
  .lpx .consent:not(.is-offen) > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .lpx .lpx-hero { padding-top: 4.6rem; gap: 0.85rem; }   /* Hero etwas dichter, damit der grüne Knopf über dem Banner bleibt */
  .lpx .lpx-consent__mehr { display: inline-flex; align-items: center; position: absolute; top: 0.3rem; right: 0.45rem; min-height: 44px; padding: 0 0.5rem; border: 0; color: var(--c-light, #e6eef5); font: 500 0.8rem/1 var(--font-body); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
  .lpx .lpx-consent__mehr[hidden] { display: none; }
  .lpx .lpx-consent__mehr:focus-visible { outline: 3px solid var(--c-light, #e6eef5); outline-offset: 0; border-radius: 0.4rem; }
}

@media (max-width: 700px) and (max-height: 580px) {   /* sehr kurze Fenster (320 x 568): zwei Zeilen Text */
  .lpx .consent:not(.is-offen) > p { -webkit-line-clamp: 2; line-clamp: 2; }
  .lpx .consent__actions { margin-top: 0.45rem; }
  .lpx .lpx-hero { padding-top: 4.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-szene-etiketten] [data-szene-etikett], .lpx-textcta, .lpx-textcta .ico-wa { transition: none; }
}