/* ===========================================================================
   rufi.site — die öffentliche Seite.

   Redaktionelle Wärme mit einer dunklen Bühne: helles, warmes Papier, große
   Bricolage-Überschriften, echte Gesichter. Genau ein Abschnitt ist dunkel —
   die Leitung, denn Rufis Gesprächsbühne ist auch in der App immer dunkel
   (.impeccable.md). Dort bekommen die Stimmen die Farben aus der App:
   Türkis „Du“, Rosa „Kunde“, Pfirsich „gleichzeitig“ (trainee.css).

   Bewegung trägt Bedeutung: Wer spricht gerade, wann kippt das Gespräch.
   Wer „Bewegung reduzieren“ eingestellt hat, sieht alles sofort und still.
   =========================================================================== */

.lp {
  --lp-rahmen: 1240px;
  --lp-rand: clamp(1.1rem, 4vw, 2.5rem);
  --lp-abstand: clamp(5.5rem, 11vw, 10rem);
  --lp-abstand-unten: clamp(4rem, 7.5vw, 6.5rem);
  --lp-nacht: oklch(16% 0.02 340);
  --lp-nacht-2: oklch(21% 0.028 342);
  --lp-nacht-linie: oklch(34% 0.03 340);
  --lp-hell: oklch(96% 0.008 340);
  --lp-hell-2: oklch(80% 0.016 340);
  --lp-hell-3: oklch(64% 0.018 340);
  --lp-du: oklch(82% 0.08 190);
  --lp-kunde: oklch(71% 0.16 350);
  --lp-beide: oklch(87% 0.08 65);
  --lp-papier: oklch(97.6% 0.009 340);
  --lp-dauer: 900ms;

  background: var(--lp-papier);
  color: var(--ink);
  font-family: "Instrument", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Die Grundregeln stehen in :where() und wiegen damit nicht mehr als .lp
   allein. Vorher war `.lp p` spezifischer als jede einzelne Klasse und
   schluckte deren Abstände: Der Knopf saß auf der Linie, die Porträts klebten
   am Text, die Überschrift am Lead. Jetzt gewinnt die Klasse, die später steht. */
.lp :where(h1, h2, h3, h4) {
  font-family: "Bricolage", "Instrument", system-ui, sans-serif;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
.lp :where(p) { margin: 0; }
.lp :where(img) { display: block; max-width: 100%; height: auto; }
.lp :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.lp :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

.lp-rahmen { width: min(100%, var(--lp-rahmen)); margin-inline: auto; padding-inline: var(--lp-rand); }
.lp-nur-lesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.lp-sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--ink); color: var(--lp-hell); padding: 0.6rem 1rem; border-radius: 8px;
}
.lp-sprung:focus { top: 1rem; }

.lp-augenbraue {
  font-size: 0.78rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-dark); margin-bottom: 1.1rem;
}

/* ------------------------------------------------------------------ Knöpfe */
.lp-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 650; font-size: 1rem; text-decoration: none; white-space: nowrap;
  color: oklch(99% 0.004 340); background: var(--brand-dark);
  padding: 0.95rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  box-shadow: 0 10px 30px -14px oklch(47% 0.21 350 / 0.8);
}
/* theme.css färbt jeden Link beim Überfahren magenta (a:hover) — und ist dabei
   spezifischer als eine einzelne Klasse. Ohne die Farbe hier verschwindet der
   Text auf magentafarbenen Knöpfen. */
.lp-knopf:hover, .lp-knopf:focus-visible { color: oklch(99% 0.004 340); background: oklch(42% 0.2 350); transform: translateY(-1px); }
.lp-knopf:active { transform: translateY(0) scale(0.98); }
.lp-knopf-klein { padding: 0.6rem 1.05rem; font-size: 0.92rem; box-shadow: none; }
.lp-knopf-zweit { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.lp-knopf-zweit:hover, .lp-knopf-zweit:focus-visible { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }

.lp-pfeil { color: var(--ink); font-weight: 600; text-decoration: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.lp-pfeil span { transition: transform var(--dur) var(--ease-out); }
.lp-pfeil:hover span { transform: translateY(3px); }
.lp-leise { color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: 0.95rem; }
.lp-leise:hover { color: var(--ink); }

/* ------------------------------------------------------------------ Kopf */
.lp-kopf {
  position: sticky; top: 0; z-index: 40;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), backdrop-filter var(--dur);
}
.lp-kopf.is-gescrollt {
  background: oklch(97.6% 0.009 340 / 0.86);
  backdrop-filter: saturate(1.3) blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
.lp-kopf-innen {
  width: min(100%, var(--lp-rahmen)); margin-inline: auto; padding: 0.9rem var(--lp-rand);
  display: flex; align-items: center; gap: 2rem;
}
.lp-marke {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-family: "Bricolage", system-ui, sans-serif; font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.045em; color: var(--ink);
}
.lp-marke svg { color: var(--brand); }
.lp-marke:hover { color: var(--ink); }
.lp-fuss .lp-marke:hover { color: var(--lp-hell); }
.lp-bereiche { display: flex; gap: 1.6rem; margin-left: 0.5rem; }
.lp-bereiche a { color: var(--ink-2); text-decoration: none; font-size: 0.94rem; font-weight: 550; }
.lp-bereiche a:hover { color: var(--ink); }
.lp-kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }

/* ------------------------------------------------------------------ Hero */
/* Links Ordnung, rechts die Bühne: Rufis Roboter ruft an, die Karte liegt
   vorne über der Kante. Beide Spalten sind gleich hoch — nichts schwebt. */
.lp-hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(4.5rem, 9vw, 7.5rem); }
/* Die klingelnden Ringe ragen am Handy über den Rand. overflow-x am body
   (.lp) reicht dort nicht: Chrome und Safari machen die Seite trotzdem
   breiter und zoomen heraus. Der Hero schneidet sie selbst ab. */
.lp-hero { overflow-x: clip; }
.lp-hero-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch;
}
/* --hero-luft: der Abstand über und unter den Knöpfen — gleich groß, damit sie
   mittig zwischen Text und Linie stehen. */
.lp-hero-text { --hero-luft: 2.2rem; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1rem, 3vw, 2.5rem); }
.lp-hero .lp-augenbraue { margin-bottom: 2rem; }
.lp-hero-titel {
  font-size: clamp(3.3rem, 1rem + 5.6vw, 6.2rem);
  font-weight: 760; line-height: 0.95; letter-spacing: -0.058em;
  /* Luft nach oben: Die Pünktchen des „Ü“ ragen sonst in die Zeile darüber. */
  padding-top: 0.08em;
  margin-bottom: 1.6rem;
}
.lp-betont { color: var(--brand); }
.lp-lead { font-size: clamp(1.12rem, 1rem + 0.4vw, 1.3rem); color: var(--ink-2); max-width: 30em; line-height: 1.55; }
.lp-hero-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: var(--hero-luft); }

.lp-hero-kern {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--hero-luft); border-top: 1px solid var(--border-strong);
}
.lp-hero-kern li + li { border-left: 1px solid var(--border); }
.lp-hero-kern a {
  display: grid; gap: 0.2rem; padding: 1rem 1rem 0.2rem 0; text-decoration: none; color: var(--ink-2);
  font-size: 0.9rem; line-height: 1.35;
}
.lp-hero-kern li + li a { padding-left: 1rem; }
.lp-hero-kern-titel { font-family: "Bricolage", system-ui, sans-serif; font-weight: 720; font-size: 1.08rem; letter-spacing: -0.02em; color: var(--ink); }
.lp-hero-kern a:hover .lp-hero-kern-titel { color: var(--brand-dark); }

/* Rechts die Leitung: der klingelnde Anruf, darunter wer als Nächstes dran ist. */
.lp-hero-leitung {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  width: min(100%, 440px); justify-self: end;
}
/* Die Ringe gehen von der Karte aus: Hier klingelt es. */
.lp-anruf-ringe { position: absolute; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; z-index: 0; }
.lp-anruf-ringe i {
  position: absolute; left: -13rem; top: -13rem; width: 26rem; height: 26rem; border-radius: 50%;
  border: 1.5px solid oklch(56% 0.24 350 / 0.28);
  animation: lp-klingeln 3.2s var(--ease-out) infinite;
}
.lp-anruf-ringe i:nth-child(2) { animation-delay: 1.07s; }
.lp-anruf-ringe i:nth-child(3) { animation-delay: 2.14s; }
@keyframes lp-klingeln {
  from { transform: scale(0.55); opacity: 0.9; }
  to { transform: scale(1.3); opacity: 0; }
}
.lp-anruf-karte {
  position: relative; z-index: 1;
  background: radial-gradient(120% 90% at 20% 0%, var(--lp-nacht-2), var(--lp-nacht) 70%);
  color: var(--lp-hell); border-radius: 28px; padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: 0 40px 80px -30px oklch(8% 0.02 340 / 0.9), 0 0 0 1px oklch(40% 0.03 340 / 0.45) inset;
}
.lp-anruf-status {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.74rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-kunde);
}
.lp-live-punkt {
  width: 9px; height: 9px; border-radius: 50%; background: var(--lp-kunde);
  box-shadow: 0 0 0 0 oklch(71% 0.16 350 / 0.6); animation: lp-puls 1.6s ease-out infinite;
}
@keyframes lp-puls { to { box-shadow: 0 0 0 10px oklch(71% 0.16 350 / 0); } }
.lp-anruf-wer { display: flex; gap: 1rem; align-items: center; margin-top: 1.1rem; min-height: 84px; }
.lp-anruf-bild {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 0 3px var(--lp-nacht), 0 0 0 5px oklch(71% 0.16 350 / 0.7);
}
.lp-anruf-name { font-family: "Bricolage", system-ui, sans-serif; font-size: 1.35rem; font-weight: 720; letter-spacing: -0.035em; line-height: 1.1; }
.lp-anruf-anliegen { color: var(--lp-hell-2); font-size: 0.92rem; line-height: 1.4; margin-top: 0.25rem; }
.lp-anruf-wer.is-wechsel { animation: lp-wechsel 700ms var(--ease-out); }
@keyframes lp-wechsel {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
.lp-welle { display: flex; align-items: center; gap: 3px; height: 44px; margin-top: 1.1rem; }
.lp-welle i {
  flex: 1; height: 100%; border-radius: 3px;
  background: linear-gradient(180deg, var(--lp-kunde), oklch(56% 0.24 350 / 0.35));
  transform: scaleY(0.12); transform-origin: center; transition: transform 90ms linear;
}
.lp-anruf-leiste { display: flex; justify-content: space-between; gap: 0.7rem; margin-top: 1.1rem; }
.lp-anruf-leiste span {
  flex: 1; text-align: center; padding: 0.7rem; border-radius: 999px; font-weight: 650; font-size: 0.9rem;
}
.lp-anruf-ablehnen { background: oklch(28% 0.025 340); color: var(--lp-hell-2); }
.lp-anruf-annehmen { background: oklch(62% 0.14 155); color: oklch(15% 0.03 155); }
.lp-schlange {
  position: relative; z-index: 1; background: var(--surface); border-radius: 22px;
  padding: 0.9rem 1.1rem 0.4rem; box-shadow: 0 0 0 1px var(--border), var(--shadow-md);
}
.lp-schlange-titel { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.3rem; }
.lp-schlange li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center;
  padding: 0.6rem 0; border-top: 1px solid var(--border);
}
.lp-schlange img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lp-schlange-text { display: grid; min-width: 0; line-height: 1.3; }
.lp-schlange-text strong { font-weight: 650; font-size: 0.95rem; }
.lp-schlange-text span { color: var(--ink-2); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-schlange-zeit { color: var(--ink-3); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-schlange ol.is-rueckt { animation: lp-ruecken 650ms var(--ease-out); }
@keyframes lp-ruecken {
  0% { opacity: 0.3; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Die dunkle Bühne */
.lp-buehne {
  background:
    radial-gradient(60% 50% at 12% 0%, oklch(30% 0.09 350 / 0.55), transparent 70%),
    radial-gradient(50% 45% at 95% 100%, oklch(28% 0.07 300 / 0.45), transparent 70%),
    var(--lp-nacht);
  color: var(--lp-hell);
  padding-block: var(--lp-abstand);
}
.lp-buehne .lp-augenbraue { color: var(--lp-kunde); }
.lp-buehne-kopf {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
/* Rufis Roboter: Sein dunkles Bild geht an den Rändern in die Bühne über. */
.lp-roboter {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 440px; justify-self: end;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
.lp-roboter img, .lp-roboter video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 45%;
}
.lp-roboter video { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.lp-roboter video.is-ready { opacity: 1; }
.lp-buehne h2 {
  font-size: clamp(2.4rem, 1rem + 4.6vw, 5.2rem); font-weight: 740;
  line-height: 0.98; letter-spacing: -0.05em; max-width: 14em;
}
.lp-buehne-lead { color: var(--lp-hell-2); font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem); max-width: 40em; margin-top: 1.6rem; }

.lp-leitung { margin: clamp(3rem, 7vw, 5rem) 0 0; --p: 0; }
.lp-leitung-flaeche {
  position: relative; padding: 2.6rem 0 0.6rem; margin-left: 6.5rem;
  border-top: 1px solid var(--lp-nacht-linie); border-bottom: 1px solid var(--lp-nacht-linie);
}
.lp-spur { position: relative; height: 34px; margin: 10px 0; }
.lp-spur-beide { height: 14px; }
.lp-spur-name {
  position: absolute; right: calc(100% + 1rem); top: 50%; transform: translateY(-50%);
  font-size: 0.8rem; color: var(--lp-hell-3); white-space: nowrap;
}
.lp-spur i {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  clip-path: inset(0 0 0 0);
}
.lp-spur-kunde i { background: var(--lp-kunde); }
.lp-spur-du i { background: var(--lp-du); }
.lp-spur-beide i { background: var(--lp-beide); }
/* Enthüllt wird von links nach rechts, mit dem Scrollen — eine Minute Gespräch
   läuft ab, während man hindurchscrollt. */
/* Links bleibt der Ausschnitt offen, sonst schneidet er die Spurnamen ab. */
.lp-js .lp-leitung .lp-spur { clip-path: inset(-8px calc((1 - var(--p)) * 100%) -8px -10rem); }
.lp-kopfnadel {
  position: absolute; top: 0; bottom: 0; width: 2px; left: calc(var(--p) * 100%);
  background: linear-gradient(180deg, transparent, oklch(96% 0.008 340 / 0.85) 20%, oklch(96% 0.008 340 / 0.85) 80%, transparent);
  opacity: 0; transition: opacity var(--dur);
}
.lp-js .lp-leitung.is-laeuft .lp-kopfnadel { opacity: 1; }
.lp-notiz {
  position: absolute; top: 0.4rem; transform: translateX(-2px);
  font-size: 0.82rem; color: var(--lp-hell); white-space: nowrap;
  padding-left: 0.55rem; border-left: 1.5px solid var(--lp-beide);
}
.lp-js .lp-notiz { opacity: 0; transform: translate(-2px, 6px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.lp-js .lp-notiz.is-da { opacity: 1; transform: translate(-2px, 0); }
.lp-notiz:last-of-type { transform: translateX(calc(-100% + 2px)); border-left: 0; border-right: 1.5px solid var(--lp-beide); padding: 0 0.55rem 0 0; }
.lp-js .lp-notiz:last-of-type { transform: translate(calc(-100% + 2px), 6px); }
.lp-js .lp-notiz:last-of-type.is-da { transform: translate(calc(-100% + 2px), 0); }
.lp-leitung figcaption { margin: 1rem 0 0 6.5rem; font-size: 0.9rem; color: var(--lp-hell-3); }

.lp-buehne-unten {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem); margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
.lp-fakten { display: grid; gap: 1.5rem; }
.lp-fakten li { color: var(--lp-hell-2); max-width: 32em; }
.lp-fakten strong { color: var(--lp-hell); font-weight: 650; }
.lp-hoerproben-titel { font-family: "Bricolage", system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.lp-hoerproben-hinweis { color: var(--lp-hell-3); font-size: 0.9rem; margin-top: 0.3rem; }
.lp-hoerproben ul { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.lp-probe {
  width: 100%; display: flex; align-items: center; gap: 0.9rem; text-align: left; cursor: pointer;
  background: oklch(24% 0.025 340 / 0.7); color: var(--lp-hell);
  border: 1px solid var(--lp-nacht-linie); border-radius: 16px; padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.lp-probe:hover { background: oklch(28% 0.03 340); border-color: oklch(45% 0.04 340); }
.lp-probe img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lp-probe-text { display: grid; line-height: 1.25; flex: 1; }
.lp-probe-name { font-weight: 650; }
.lp-probe-rolle { color: var(--lp-hell-3); font-size: 0.86rem; }
.lp-probe-symbol {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; position: relative;
  background: var(--lp-kunde);
}
.lp-probe-symbol::before {
  content: ""; position: absolute; left: 15px; top: 12px;
  border-left: 11px solid var(--lp-nacht); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
[aria-pressed="true"] > .lp-probe-symbol::before {
  left: 13px; top: 12px; width: 4px; height: 14px; border: 0; background: var(--lp-nacht);
  box-shadow: 8px 0 0 var(--lp-nacht);
}
[aria-pressed="true"] > .lp-probe-symbol { animation: lp-puls-kunde 1.2s ease-out infinite; }
@keyframes lp-puls-kunde { 0% { box-shadow: 0 0 0 0 oklch(71% 0.16 350 / 0.55); } 100% { box-shadow: 0 0 0 12px oklch(71% 0.16 350 / 0); } }

/* ------------------------------------------------------------------ Abschnitte hell */
.lp-personas { padding-block: var(--lp-abstand) var(--lp-abstand-unten); }
.lp-abschnitt-kopf { max-width: 46rem; }
.lp-abschnitt-kopf h2 {
  font-size: clamp(2.3rem, 1.1rem + 3.9vw, 4.4rem); font-weight: 740; line-height: 1; letter-spacing: -0.048em;
}
.lp-kopfzeile h2, .lp-vertrauen h2, .lp-pilot h2, .lp-film h2 {
  font-size: clamp(2.2rem, 1.1rem + 3.1vw, 3.8rem); font-weight: 740; line-height: 1; letter-spacing: -0.046em;
}
.lp-abschnitt-kopf > p:not(.lp-augenbraue) { color: var(--ink-2); font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem); margin-top: 1.3rem; max-width: 38em; }

/* Personas: ein Porträt-Band statt Kachelwand — jede zweite Spalte versetzt. */
/* Nach oben so viel Luft wie unter den anderen Abschnittsköpfen (.lp-kopfzeile). */
.lp-portraets {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.4rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.lp-portraet { position: relative; }
.lp-portraet:nth-child(even) { transform: translateY(2.6rem); }
.lp-portraet img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px;
  background: var(--surface-3);
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.lp-portraet:hover img { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.lp-portraet-text { padding: 0.8rem 0.2rem 0; }
.lp-portraet-name { font-weight: 680; font-size: 1rem; line-height: 1.25; }
.lp-portraet-rolle { color: var(--ink-2); font-size: 0.88rem; line-height: 1.3; }
.lp-portraet-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; color: var(--ink-3); font-size: 0.8rem; margin-top: 0.35rem; }
.lp-stress { color: var(--brand); letter-spacing: 0.08em; font-size: 0.72rem; }
.lp-portraet-stimme {
  position: absolute; top: 10px; right: 10px;
  border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%;
  opacity: 0; transform: scale(0.85); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.lp-portraet-stimme .lp-probe-symbol { width: 40px; height: 40px; box-shadow: 0 8px 20px -8px oklch(19% 0.02 340 / 0.6); }
.lp-portraet:hover .lp-portraet-stimme, .lp-portraet-stimme:focus-visible, .lp-portraet-stimme[aria-pressed="true"] { opacity: 1; transform: none; }
@media (hover: none) { .lp-portraet-stimme { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ Unterer Teil
   Ab hier erzählt die Seite, wie man mit Rufi arbeitet. Jede Komponente zeigt
   ein Stück echte Oberfläche, und was man darauf sieht, steht daneben — dichter
   als oben, damit man nicht durch leere Fläche scrollt. */
.lp-kopfzeile {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1.2rem clamp(2rem, 6vw, 5rem); align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* .lp p setzt jeden Außenabstand auf null — die Augenbraue braucht ihren zurück. */
.lp-kopfzeile .lp-augenbraue, .lp-vertrauen .lp-augenbraue, .lp-film .lp-augenbraue, .lp-pilot .lp-augenbraue { margin-bottom: 0.9rem; }
.lp-kopfzeile > p { color: var(--ink-2); font-size: clamp(1.02rem, 1rem + 0.25vw, 1.15rem); max-width: 34em; padding-bottom: 0.25rem; }

/* Das Funkeln: Rufi schreibt etwas. Vier Zacken, kein Icon-Font. */
.lp-funke {
  display: inline-block; width: 0.95em; height: 0.95em; flex: 0 0 auto; background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* Die Werkbank: links ein Satz, rechts, was Rufi daraus macht. */
.lp-werkbank {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  background: var(--surface); border-radius: 30px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border), 0 40px 90px -60px oklch(19% 0.04 340 / 0.45);
}
.lp-personas .lp-werkbank { margin-top: clamp(5rem, 9vw, 6.5rem); }
.lp-personas + .lp-szenarien { padding-top: calc(var(--lp-abstand-unten) * 0.7); }
.lp-werkbank-fall { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.lp-werkbank-links {
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
}
.lp-werkzeug {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-dark);
}
.lp-werkbank-titel { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); font-weight: 730; letter-spacing: -0.04em; line-height: 1.05; }
.lp-werkbank-text { color: var(--ink-2); max-width: 30em; }

.lp-eingabe {
  position: relative; background: var(--lp-papier); border: 1px solid var(--border-strong); border-radius: 18px;
  padding: 0.95rem 1.15rem 3.7rem;
}
.lp-eingabe-label { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lp-eingabe p { font-size: 1.05rem; line-height: 1.5; margin-top: 0.35rem; min-height: 3em; }
.lp-eingabe-knopf {
  position: absolute; right: 0.7rem; bottom: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border-radius: 999px;
  background: var(--ink); color: var(--lp-hell); font-size: 0.85rem; font-weight: 650;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}
.lp-cursor {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em;
  background: var(--brand); animation: lp-blinken 1s steps(2) infinite;
}
@keyframes lp-blinken { 50% { opacity: 0; } }

/* Die Fläche rechts: Punktraster wie auf einem Zeichentisch. */
.lp-werkbank-flaeche {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 0.8rem;
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  background-color: oklch(95.8% 0.015 345);
  background-image: radial-gradient(oklch(78% 0.05 345 / 0.42) 1px, transparent 1.3px);
  background-size: 18px 18px;
  border-left: 1px solid var(--border);
}
.lp-werkbank-flaeche > article { width: min(100%, 470px); }
.lp-werkbank-fall .lp-werkbank-flaeche > article { width: min(100%, 560px); }
.lp-beispiel { font-size: 0.8rem; color: var(--ink-3); }

.lp-denkt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  color: var(--ink-2); font-size: 0.92rem; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity 250ms var(--ease-out);
}
.lp-denkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: lp-denken 1s ease-in-out infinite; }
.lp-denkt i:nth-child(2) { animation-delay: 0.15s; }
.lp-denkt i:nth-child(3) { animation-delay: 0.3s; margin-right: 0.45rem; }
@keyframes lp-denken { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-5px); opacity: 1; } }

/* Getippt, kurz gedacht, dann gebaut. Ohne JavaScript steht alles sofort da. */
.lp-js [data-tippen-block] [data-ergebnis] {
  opacity: 0; transform: translateY(18px) scale(0.97);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.lp-js [data-tippen-block] .lp-beispiel { opacity: 0; transition: opacity 700ms var(--ease-out) 300ms; }
.lp-js [data-tippen-block].is-denkt .lp-denkt { opacity: 1; }
.lp-js [data-tippen-block].is-denkt .lp-eingabe-knopf { transform: scale(0.94); background: var(--brand-dark); }
.lp-js [data-tippen-block].is-fertig [data-ergebnis] { opacity: 1; transform: none; }
.lp-js [data-tippen-block].is-fertig .lp-beispiel { opacity: 1; }
.lp-js [data-tippen-block].is-fertig .lp-cursor { opacity: 0; animation: none; }

/* Die neue Persona */
.lp-neue-persona {
  background: var(--surface); border-radius: 22px; padding: 1.3rem 1.4rem 1.4rem;
  box-shadow: 0 0 0 1px var(--border), 0 30px 60px -36px oklch(19% 0.04 340 / 0.5);
}
.lp-neue-kopf { display: flex; align-items: center; gap: 0.9rem; }
.lp-monogramm {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand-soft), oklch(91% 0.05 25));
  color: var(--brand-dark); font-family: "Bricolage", system-ui, sans-serif; font-weight: 760; font-size: 1.15rem;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px oklch(71% 0.16 350 / 0.45);
}
.lp-neue-name { font-family: "Bricolage", system-ui, sans-serif; font-weight: 720; font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1.15; }
.lp-neue-rolle { color: var(--ink-2); font-size: 0.9rem; }
.lp-neu-marke {
  margin-left: auto; align-self: flex-start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--success-ink); background: var(--success-soft); padding: 0.2rem 0.6rem; border-radius: 999px;
}
.lp-merkmale {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.1rem 0 0;
  border: 1px solid var(--border); border-radius: 14px;
}
.lp-merkmale div { padding: 0.6rem 0.8rem; min-width: 0; }
.lp-merkmale div + div { border-left: 1px solid var(--border); }
.lp-merkmale dt { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lp-merkmale dd { margin: 0.15rem 0 0; font-size: 0.9rem; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 0.45rem; }
.lp-mini-welle { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.lp-mini-welle i { width: 2.5px; height: calc(var(--h) * 1.7px + 2px); border-radius: 2px; background: var(--brand); transform-origin: center; }
.lp-js [data-tippen-block].is-fertig .lp-mini-welle i { animation: lp-mini-welle 900ms ease-in-out infinite alternate; }
.lp-mini-welle i:nth-child(3n) { animation-delay: -300ms !important; }
.lp-mini-welle i:nth-child(3n + 1) { animation-delay: -600ms !important; }
@keyframes lp-mini-welle { to { transform: scaleY(0.4); } }
.lp .lp-neue-vorgeschichte { margin-top: 1rem; font-size: 0.93rem; color: var(--ink-2); }
.lp-neue-vorgeschichte strong { color: var(--ink); font-weight: 650; }
.lp-neue-zitat {
  margin: 0.9rem 0 0; padding: 0.8rem 1rem; background: var(--lp-papier); border-radius: 4px 16px 16px 16px;
  font-family: "Bricolage", system-ui, sans-serif; font-weight: 620; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.35;
}

/* ------------------------------------------------------------------ Szenarien */
.lp-szenarien { padding-block: var(--lp-abstand-unten); background: linear-gradient(180deg, var(--lp-papier), oklch(96.2% 0.014 345)); }
.lp .lp-faelle-titel { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.6rem; }
.lp-faelle ul { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lp-faelle li {
  font-size: 0.85rem; font-weight: 580; line-height: 1.3; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.75rem;
}
.lp-faelle li span { color: var(--brand-dark); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.45rem; }

.lp-fall {
  background: var(--surface); border-radius: 22px; padding: clamp(1.3rem, 2.6vw, 1.7rem);
  box-shadow: 0 0 0 1px var(--border), 0 30px 60px -36px oklch(19% 0.04 340 / 0.5);
}
.lp-fall-kopf { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.lp-chip {
  font-size: 0.78rem; font-weight: 620; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.7rem;
}
.lp-chip-marke { color: var(--brand-dark); background: var(--brand-soft); border-color: transparent; }
.lp-schwierigkeit { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); display: inline-flex; gap: 0.4rem; align-items: center; }
.lp-fall h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 740; letter-spacing: -0.04em; margin-top: 0.9rem; }
.lp .lp-fall-persona { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.6rem; color: var(--ink-2); font-size: 0.93rem; }
.lp-fall-persona img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.lp-fall-persona strong { color: var(--ink); font-weight: 650; }
.lp-fall-wissen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0 0; }
.lp-fall-wissen div { background: var(--surface-2); border-radius: 12px; padding: 0.6rem 0.8rem; }
.lp-fall-wissen dt { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lp-fall-wissen dd { margin: 0.15rem 0 0; font-size: 0.9rem; line-height: 1.35; }
.lp-fall-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.lp-fall h4 { font-family: "Instrument", system-ui, sans-serif; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.6rem; }
.lp-fall li { font-size: 0.92rem; line-height: 1.4; }
.lp-fall li + li { margin-top: 0.5rem; }
.lp-haken li { position: relative; padding-left: 1.7rem; }
.lp-haken li::before {
  content: "✓"; position: absolute; left: 0; top: 0.05em; width: 1.2rem; height: 1.2rem; border-radius: 6px;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 800;
  background: var(--brand-dark); color: oklch(99% 0.004 340);
}
.lp-fall ol { counter-reset: schritt; }
.lp-fall ol li { counter-increment: schritt; position: relative; padding-left: 1.7rem; }
.lp-fall ol li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0; width: 1.2rem; text-align: center;
  font-family: "Bricolage", system-ui, sans-serif; font-weight: 750; color: var(--brand-dark);
}

/* ------------------------------------------------------------------ Auswertung */
.lp-auswertung { padding-block: var(--lp-abstand-unten); }
.lp-bericht {
  background: var(--surface); border-radius: 30px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border), 0 50px 110px -60px oklch(19% 0.04 340 / 0.55);
}
.lp-bericht-kopf {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem clamp(1.3rem, 3vw, 2rem); border-bottom: 1px solid var(--border);
}
.lp-bericht-kopf img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lp-bericht-titel { font-family: "Bricolage", system-ui, sans-serif; font-weight: 720; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; }
.lp-bericht-meta { color: var(--ink-3); font-size: 0.85rem; }
.lp-bericht-nps {
  margin-left: auto; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-3);
  background: var(--surface-2); border-radius: 999px; padding: 0.35rem 0.85rem; white-space: nowrap;
}
.lp-bericht-nps strong { color: var(--ink); font-size: 1rem; letter-spacing: 0; margin-left: 0.2rem; }
.lp-bericht-raster {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas: "kurve kunde" "wende besser";
}
.lp-teil { padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1.3rem, 3vw, 2rem); min-width: 0; }
.lp-teil-kurve { grid-area: kurve; }
.lp-teil-kunde { grid-area: kunde; border-left: 1px solid var(--border); }
.lp-teil-wende { grid-area: wende; border-top: 1px solid var(--border); background: var(--success-soft); }
.lp-teil-besser { grid-area: besser; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.lp-teil h3 {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
  font-family: "Instrument", system-ui, sans-serif; font-size: 0.76rem; font-weight: 650;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.lp-marker {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--brand-dark); color: oklch(99% 0.004 340);
  font-family: "Bricolage", system-ui, sans-serif; font-size: 0.78rem; font-weight: 760; letter-spacing: 0;
}
.lp-teil-wende .lp-marker { background: var(--success); }

.lp-kurve { position: relative; margin: 2.2rem 0 0 5.4rem; height: 190px; }
.lp-kurve-stufen span {
  position: absolute; right: calc(100% + 0.9rem); transform: translateY(-50%);
  font-size: 0.78rem; color: var(--ink-3); white-space: nowrap;
}
.lp-kurve-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-raster { stroke: var(--border); stroke-width: 1; }
.lp-null { stroke: var(--border-strong); stroke-width: 1.2; stroke-dasharray: 4 6; }
.lp-wende { stroke-width: 1.5; stroke-dasharray: 3 5; }
.lp-wende-ab { stroke: var(--warn); }
.lp-wende-auf { stroke: var(--success); }
.lp-wende-haupt { stroke-width: 2.2; stroke-dasharray: none; }
.lp-kurve-linie {
  fill: none; stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.lp-kurve-punkte i {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--surface);
  transform: translate(-50%, -50%) scale(var(--s, 1));
}
.lp-kurve-punkte .lp-schlecht { background: var(--warn); }
.lp-kurve-punkte .lp-gut { background: var(--success); }
.lp-kurve-punkte .lp-neutral { background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--brand); }
.lp-wende-fahne {
  position: absolute; top: -0.35rem; transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  background: var(--success); color: oklch(99% 0.004 150); font-size: 0.78rem; font-weight: 700;
  border-radius: 999px; padding: 0.2rem 0.65rem 0.2rem 0.22rem;
}
.lp-wende-fahne .lp-marker { width: 1.2rem; height: 1.2rem; font-size: 0.68rem; background: oklch(99% 0.004 150); color: var(--success-ink); }
.lp-kurve-achse { position: relative; height: 1.2rem; margin: 0.7rem 0 0 5.4rem; }
.lp-kurve-achse span { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lp-kurve-achse span:first-child { transform: none; }

.lp-kunde-oben { display: flex; align-items: center; gap: 1.1rem; }
.lp-nps { position: relative; width: 96px; height: 96px; flex: 0 0 auto; display: grid; place-items: center; }
.lp-nps svg { position: absolute; inset: 0; }
.lp-nps-grund { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.lp-nps-bogen { fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 10; stroke-dashoffset: 2; }
.lp-nps-zahl { font-family: "Bricolage", system-ui, sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1; margin-top: -0.3rem; }
.lp-nps-name { position: absolute; bottom: 19px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-3); }
.lp-kunde-zitat { font-size: 0.95rem; line-height: 1.45; color: var(--ink); font-style: italic; }
.lp-balken { display: grid; gap: 0.65rem; margin: 1.3rem 0 0; }
.lp-balken div { display: grid; grid-template-columns: 7.8rem 1fr; align-items: center; gap: 0.8rem; }
.lp-balken dt { font-size: 0.9rem; color: var(--ink-2); }
.lp-balken dd { margin: 0; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lp-balken dd strong { color: var(--ink); font-size: 1rem; }
.lp-balken-leiste { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.lp-balken-leiste span { display: block; height: 100%; border-radius: 99px; background: var(--brand-dark); transform-origin: left; transform: scaleX(var(--wert)); }

.lp-wende-zitat {
  font-family: "Bricolage", system-ui, sans-serif; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 660; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink);
}
.lp .lp-teil-grund { color: var(--ink-2); font-size: 0.92rem; margin-top: 0.55rem; max-width: 34em; }
.lp-vorher-nachher { display: grid; gap: 0.55rem; }
.lp-vorher, .lp-nachher { position: relative; border-radius: 14px; padding: 0.7rem 0.9rem; font-size: 0.93rem; line-height: 1.4; }
.lp-vorher span, .lp-nachher span {
  display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.2rem;
}
.lp-vorher { background: var(--surface-2); color: var(--ink-2); }
.lp-vorher span { color: var(--ink-3); }
.lp-nachher { background: var(--brand-soft); color: var(--ink); font-weight: 560; }
.lp-nachher span { color: var(--brand-dark); }

/* Der Bericht baut sich einmal auf, sobald er im Bild ist: erst die Kurve,
   an der Wende die Fahne, dann die Zahlen. */
.lp-js .lp-bericht .lp-kurve-linie { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0.05, 0.25, 1) 0.25s; }
.lp-js .lp-bericht .lp-kurve-punkte i { --s: 0; transition: transform 450ms var(--ease-out) calc(0.25s + var(--t) * 1.8s); }
.lp-js .lp-bericht .lp-wende { opacity: 0; transition: opacity 400ms var(--ease-out) calc(0.25s + var(--t) * 1.8s); }
.lp-js .lp-bericht .lp-wende-fahne { opacity: 0; transform: translate(-50%, calc(-100% + 8px)); transition: opacity 500ms var(--ease-out) 1.05s, transform 500ms var(--ease-out) 1.05s; }
.lp-js .lp-bericht .lp-nps-bogen { stroke-dashoffset: 10; transition: stroke-dashoffset 1.1s var(--ease-out) 0.5s; }
.lp-js .lp-bericht .lp-nps-zahl { opacity: 0; transition: opacity 500ms 0.9s; }
.lp-js .lp-bericht .lp-balken-leiste span { transform: scaleX(0); transition: transform 900ms var(--ease-out) calc(var(--i, 0) * 120ms + 0.7s); }
.lp-js .lp-bericht.is-laeuft .lp-kurve-linie { stroke-dashoffset: 0; }
.lp-js .lp-bericht.is-laeuft .lp-kurve-punkte i { --s: 1; }
.lp-js .lp-bericht.is-laeuft .lp-wende { opacity: 1; }
.lp-js .lp-bericht.is-laeuft .lp-wende-fahne { opacity: 1; transform: translate(-50%, -100%); }
.lp-js .lp-bericht.is-laeuft .lp-nps-bogen { stroke-dashoffset: 2; }
.lp-js .lp-bericht.is-laeuft .lp-nps-zahl { opacity: 1; }
.lp-js .lp-bericht.is-laeuft .lp-balken-leiste span { transform: scaleX(var(--wert)); }

.lp .lp-hinweis { display: flex; align-items: flex-start; gap: 0.8rem; margin-top: 1.4rem; font-size: 0.9rem; color: var(--ink-2); max-width: 48em; }
.lp-hinweis-zeichen {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark); font-weight: 750;
}

/* ------------------------------------------------------------------ Ablauf */
.lp-ablauf { padding-block: var(--lp-abstand-unten); background: var(--surface); border-block: 1px solid var(--border); }
.lp-strecke { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.2rem); }
/* Die Strecke: eine gestrichelte Linie durch alle vier Punkte. */
.lp-strecke::before {
  content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: 1.2rem; height: 2px;
  background: repeating-linear-gradient(90deg, oklch(56% 0.24 350 / 0.45) 0 8px, transparent 8px 14px);
}
.lp-strecke li { position: relative; display: flex; flex-direction: column; gap: 0.45rem; }
.lp-strecke-punkt {
  position: relative; z-index: 1; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand); margin-bottom: 0.7rem;
  color: var(--brand-dark); font-family: "Bricolage", system-ui, sans-serif; font-weight: 780; font-size: 1.05rem;
}
.lp-strecke li:last-child .lp-strecke-punkt { background: var(--brand-dark); color: oklch(99% 0.004 340); box-shadow: none; }
.lp-strecke h3 { font-size: 1.3rem; font-weight: 720; letter-spacing: -0.03em; }
.lp-strecke p { color: var(--ink-2); font-size: 0.95rem; flex: 1; }
.lp-mini {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; max-width: 100%;
  font-size: 0.8rem; font-weight: 620; color: var(--ink); white-space: nowrap;
  background: var(--lp-papier); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.8rem 0.3rem 0.35rem; box-shadow: 0 6px 16px -10px oklch(19% 0.04 340 / 0.35);
}
.lp-mini img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.lp-mini-link { padding-left: 0.8rem; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.lp-mini-anruf { padding-left: 0.7rem; font-variant-numeric: tabular-nums; }
.lp-mini-anruf i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: lp-puls-gruen 1.6s ease-out infinite; }
@keyframes lp-puls-gruen { 0% { box-shadow: 0 0 0 0 oklch(58% 0.15 150 / 0.55); } 100% { box-shadow: 0 0 0 8px oklch(58% 0.15 150 / 0); } }
.lp-mini-ergebnis { padding-left: 0.8rem; background: var(--success-soft); color: var(--success-ink); border-color: transparent; }

/* ------------------------------------------------------------------ Vertrauen */
.lp-vertrauen { padding-block: var(--lp-abstand-unten); }
.lp-vertrauen-raster { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.lp-vertrauen h2 { font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.3rem); }
.lp .lp-zusagen { display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.lp-zusagen li { color: var(--ink-2); font-size: 0.98rem; max-width: 30em; }
.lp-zusagen strong { color: var(--ink); font-weight: 650; }

.lp-datenblatt {
  background: var(--surface); border-radius: 30px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border), 0 40px 90px -60px oklch(19% 0.04 340 / 0.45);
}
/* Wohin der Ton fließt: vom Browser zum Sprachdienst und zurück — zu Rufi nur Text. */
.lp-fluss {
  margin: 0; display: grid; grid-template-columns: auto minmax(3.5rem, 1fr) auto; grid-template-rows: auto 3rem auto;
  align-items: center; padding: 2.2rem clamp(1.3rem, 3vw, 2rem) 1.6rem; border-bottom: 1px solid var(--border);
  background-color: oklch(95.8% 0.015 345);
  background-image: radial-gradient(oklch(78% 0.05 345 / 0.42) 1px, transparent 1.3px);
  background-size: 18px 18px;
}
.lp-fluss-knoten {
  display: inline-flex; align-items: center; gap: 0.55rem; justify-self: center; white-space: nowrap;
  background: var(--surface); border-radius: 999px; padding: 0.4rem 0.95rem 0.4rem 0.4rem;
  font-weight: 650; font-size: 0.9rem; box-shadow: 0 0 0 1px var(--border), 0 8px 20px -12px oklch(19% 0.04 340 / 0.4);
}
.lp-fluss-talent { grid-area: 1 / 1; }
.lp-fluss-dienst { grid-area: 1 / 3; }
.lp-fluss-rufi { grid-area: 3 / 3; }
.lp-fluss-symbol {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--lp-nacht); color: var(--lp-hell);
}
.lp-fluss-rufi .lp-fluss-symbol { background: var(--brand-soft); color: var(--brand-dark); }
.lp-fluss-symbol svg { width: 1rem; height: 1rem; }
.lp-fluss-ton, .lp-fluss-text { position: relative; }
.lp-fluss-ton {
  grid-area: 1 / 2; height: 2px; margin: 0 0.5rem; justify-self: stretch;
  background: repeating-linear-gradient(90deg, var(--lp-kunde) 0 7px, transparent 7px 12px);
  background-size: 24px 2px; animation: lp-fliessen 900ms linear infinite;
}
.lp-fluss-text {
  grid-area: 2 / 3; width: 2px; height: 100%; justify-self: center;
  background: repeating-linear-gradient(180deg, var(--ink-3) 0 5px, transparent 5px 10px);
}
.lp-fluss-ton span, .lp-fluss-text span {
  position: absolute; white-space: nowrap; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-fluss-ton span { left: 50%; bottom: 0.55rem; transform: translateX(-50%); color: var(--brand-dark); }
.lp-fluss-text span { left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.lp-fluss-kein {
  grid-area: 3 / 1 / 4 / 3; justify-self: start; font-size: 0.85rem; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.lp-fluss-kein::before {
  content: "✕"; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 800; background: var(--surface-3); color: var(--ink-2);
}
@keyframes lp-fliessen { to { background-position: 24px 0; } }

.lp-bilanz { display: grid; grid-template-columns: 1fr 1fr; }
.lp-bilanz > div { padding: 1.4rem clamp(1.3rem, 3vw, 2rem) 1.6rem; }
.lp-bilanz-nein { border-left: 1px solid var(--border); }
.lp-bilanz h3 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.05rem; font-weight: 720; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.lp-bilanz h3::before {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800;
}
.lp-bilanz-ja h3::before { content: "✓"; background: var(--success-soft); color: var(--success-ink); }
.lp-bilanz-nein h3::before { content: "✕"; background: var(--surface-3); color: var(--ink-2); }
.lp-bilanz li { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); padding: 0.55rem 0; }
.lp-bilanz li + li { border-top: 1px dashed var(--border-strong); }

/* ------------------------------------------------------------------ Film */
.lp-film { padding-block: 0 var(--lp-abstand-unten); }
.lp-film-raster { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.lp-film-text > p:not(.lp-augenbraue) { color: var(--ink-2); margin-top: 1rem; }
.lp-film-rahmen { margin: 0; }
.lp-film-rahmen video {
  width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: 24px;
  background: var(--lp-nacht); box-shadow: 0 50px 110px -60px oklch(19% 0.04 340 / 0.7);
}
.lp-film-rahmen figcaption { margin-top: 0.8rem; font-size: 0.88rem; color: var(--ink-3); }

/* ------------------------------------------------------------------ Pakete */
.lp-pakete { padding-block: var(--lp-abstand-unten); background: oklch(96% 0.014 345); }
.lp-paket-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.2rem); align-items: stretch; }
.lp-paket {
  display: flex; flex-direction: column; background: var(--surface); border-radius: 24px;
  padding: 1.4rem 1.4rem 1.4rem; box-shadow: 0 0 0 1px var(--border);
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.lp-paket:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-lift); }
.lp-paket header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.7rem; }
.lp-paket h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-2); }
.lp-paket-marke {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  background: var(--brand); color: oklch(99% 0.004 340); padding: 0.22rem 0.6rem; border-radius: 999px;
}
.lp .lp-paket-preis {
  font-family: "Bricolage", system-ui, sans-serif; font-size: clamp(2.1rem, 1.5rem + 1.3vw, 2.7rem);
  font-weight: 780; letter-spacing: -0.045em; line-height: 1; margin-top: 1rem; font-variant-numeric: tabular-nums;
}
.lp .lp-paket-preis-frei { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.85rem); letter-spacing: -0.035em; padding-block: 0.3rem; }
.lp .lp-paket-calls { margin-top: 0.45rem; color: var(--ink-2); }
.lp-paket-calls strong { color: var(--ink); font-weight: 700; }
.lp .lp-paket-je {
  align-self: flex-start; margin-top: 0.8rem; font-size: 0.82rem; font-weight: 650; color: var(--brand-dark);
  background: var(--brand-soft); border-radius: 999px; padding: 0.2rem 0.65rem; font-variant-numeric: tabular-nums;
}
.lp .lp-paket-fuer { color: var(--ink-2); font-size: 0.93rem; margin: 1rem 0 1.3rem; padding-top: 1rem; border-top: 1px solid var(--border); flex: 1; }
.lp-paket .lp-knopf { align-self: stretch; }
.lp-paket-hervor { background: var(--ink); color: var(--lp-hell); box-shadow: 0 40px 80px -40px oklch(19% 0.04 340 / 0.7); }
.lp-paket-hervor:hover { box-shadow: 0 40px 80px -36px oklch(19% 0.04 340 / 0.8); }
.lp-paket-hervor h3, .lp-paket-hervor .lp-paket-calls, .lp-paket-hervor .lp-paket-fuer { color: var(--lp-hell-2); }
.lp-paket-hervor .lp-paket-calls strong { color: var(--lp-hell); }
.lp-paket-hervor .lp-paket-je { color: var(--lp-kunde); background: oklch(30% 0.04 350); }
.lp-paket-hervor .lp-paket-fuer { border-color: oklch(32% 0.02 340); }
.lp-paket-hervor .lp-knopf { background: var(--brand); }
.lp-paket-hervor .lp-knopf:hover, .lp-paket-hervor .lp-knopf:focus-visible { background: oklch(50% 0.24 350); }
.lp-paket-enterprise { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.lp-paket-enterprise:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.lp-inklusive {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.6rem; margin-top: 1.2rem;
  background: var(--surface); border-radius: 18px; padding: 1rem 1.3rem; box-shadow: 0 0 0 1px var(--border);
}
.lp-inklusive-titel { font-weight: 700; font-size: 0.95rem; }
.lp-inklusive ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.lp-inklusive li { position: relative; padding-left: 1.5rem; color: var(--ink-2); font-size: 0.93rem; }
.lp-inklusive li::before {
  content: "✓"; position: absolute; left: 0; top: 0.12em; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; background: var(--brand-soft); color: var(--brand-dark);
}
.lp .lp-kleingedruckt { margin-top: 1rem; font-size: 0.86rem; color: var(--ink-3); }

/* ------------------------------------------------------------------ Pilot */
.lp-pilot { padding-block: var(--lp-abstand-unten); background: var(--lp-papier); }
.lp-pilot-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.lp-pilot-text > p:not(.lp-augenbraue) { color: var(--ink-2); font-size: 1.1rem; margin-top: 1.2rem; max-width: 26em; }
.lp .lp-danach { display: grid; margin-top: 2rem; counter-reset: danach; max-width: 28em; }
.lp-danach li {
  counter-increment: danach; position: relative; padding: 0.9rem 0 0.9rem 2.8rem;
  border-top: 1px solid var(--border); color: var(--ink-2); font-size: 0.96rem;
}
.lp-danach li::before {
  content: counter(danach); position: absolute; left: 0; top: 0.9rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark);
  font-family: "Bricolage", system-ui, sans-serif; font-weight: 760;
}
.lp-danach strong { display: block; color: var(--ink); font-weight: 680; }
.lp-formular {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem;
  background: var(--surface); border-radius: 28px; padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 50px 110px -70px oklch(19% 0.04 340 / 0.5), 0 0 0 1px var(--border);
}
.lp-feld { display: grid; gap: 0.4rem; align-content: start; }
.lp-feld-breit { grid-column: 1 / -1; }
.lp-feld label { font-size: 0.9rem; font-weight: 620; }
.lp-optional { color: var(--ink-3); font-weight: 450; }
.lp-feld input, .lp-feld select, .lp-feld textarea {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; padding: 0.8rem 0.9rem;
  background: var(--lp-papier); color: var(--ink); font-size: 1rem;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.lp-feld textarea { resize: vertical; min-height: 7rem; }
.lp-feld input:focus, .lp-feld select:focus, .lp-feld textarea:focus {
  outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft);
}
.lp-feld-fehler input, .lp-feld-fehler textarea { border-color: var(--danger); }
.lp-feld-hinweis { font-size: 0.85rem; color: var(--danger-ink); }
.lp-formular-fehler {
  grid-column: 1 / -1; background: var(--danger-soft); color: var(--danger-ink);
  border-radius: 12px; padding: 0.8rem 1rem; font-weight: 600; font-size: 0.95rem;
}
.lp-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-formular-fuss { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.4rem; }
.lp-formular-fuss p { color: var(--ink-3); font-size: 0.88rem; max-width: 26em; }
.lp-danke {
  background: var(--success-soft); border-radius: 28px; padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 0 0 1px oklch(85% 0.06 150);
}
.lp-danke-titel { font-family: "Bricolage", system-ui, sans-serif; font-size: 1.8rem; font-weight: 720; letter-spacing: -0.03em; color: var(--success-ink); }
.lp-danke-titel::before { content: "✓ "; }
.lp-danke p + p { color: var(--ink-2); margin-top: 0.4rem; }

/* ------------------------------------------------------------------ Fuß */
.lp-fuss { background: var(--ink); color: var(--lp-hell-2); padding-block: 3.5rem 2.5rem; }
.lp-fuss-innen {
  width: min(100%, var(--lp-rahmen)); margin-inline: auto; padding-inline: var(--lp-rand);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem 3rem; align-items: start;
}
.lp-fuss .lp-marke { color: var(--lp-hell); }
.lp-fuss-marke p { margin-top: 0.6rem; font-size: 0.95rem; }
.lp-fuss-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.lp-fuss-links a { color: var(--lp-hell-2); text-decoration: none; font-size: 0.95rem; }
.lp-fuss-links a:hover { color: var(--lp-hell); text-decoration: underline; }
.lp-fuss-klein { grid-column: 1 / -1; font-size: 0.84rem; color: var(--lp-hell-3); border-top: 1px solid oklch(30% 0.02 340); padding-top: 1.4rem; }

/* ------------------------------------------------------------------ Rechtstexte */
.lp-rechtstext { max-width: 46rem; padding-block: clamp(3rem, 8vw, 6rem); }
.lp-rechtstext h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem); font-weight: 740; letter-spacing: -0.045em; line-height: 1; margin-bottom: 1.6rem; }
.lp-rechtstext h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 2.4rem 0 0.6rem; }
.lp-rechtstext p, .lp-rechtstext address, .lp-rechtstext li { color: var(--ink-2); line-height: 1.65; }
.lp-rechtstext p + p { margin-top: 0.8rem; }
.lp-rechtstext strong { color: var(--ink); }
.lp-rechtstext address { font-style: normal; margin: 0.6rem 0 1rem; color: var(--ink); }
.lp-rechtstext ul { list-style: disc; padding-left: 1.3rem; margin: 0.4rem 0 1rem; }
.lp-stand { color: var(--ink-3); font-size: 0.92rem; }

/* ------------------------------------------------------------------ Auftritte */
.lp-js [data-auftritt] {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--lp-dauer) var(--ease-out), transform var(--lp-dauer) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.lp-js [data-auftritt].is-da { opacity: 1; transform: none; }
/* Die versetzten Porträts behalten ihren Versatz, wenn sie ankommen. */
.lp-js .lp-portraet[data-auftritt]:nth-child(even) { transform: translateY(calc(2.6rem + 26px)); }
.lp-js .lp-portraet[data-auftritt]:nth-child(even).is-da { transform: translateY(2.6rem); }

/* ------------------------------------------------------------------ Schmaler */
@media (max-width: 64rem) {
  .lp-bereiche { display: none; }
  .lp-portraets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-paket-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-strecke { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4rem; }
  .lp-strecke::before { display: none; }
  .lp-film-raster { grid-template-columns: minmax(0, 1fr); }
  .lp-film-text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem; }
  .lp-film-text .lp-augenbraue { flex-basis: 100%; }
  .lp-film-text > p:not(.lp-augenbraue) { margin-top: 0; }
}
@media (max-width: 56rem) {
  .lp-hero-raster, .lp-buehne-unten, .lp-vertrauen-raster, .lp-pilot-raster,
  .lp-kopfzeile, .lp-werkbank, .lp-werkbank-fall { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-leitung { justify-self: stretch; width: 100%; }
  .lp-buehne-kopf { grid-template-columns: minmax(0, 1fr); }
  .lp-roboter { max-width: 320px; justify-self: center; margin-top: -1rem; }
  .lp-hero-kern { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-kern li + li { border-left: 0; border-top: 1px solid var(--border); }
  .lp-hero-kern li + li a { padding-left: 0; }
  .lp-hero-kern a { padding: 0.8rem 0; }
  .lp-leitung-flaeche, .lp-leitung figcaption { margin-left: 0; }
  .lp-spur-name { position: static; transform: none; display: block; margin-bottom: 0.3rem; }
  .lp-spur { height: auto; margin: 0 0 0.9rem; }
  .lp-spur i { top: 1.5rem; height: 22px; bottom: auto; }
  .lp-spur { height: calc(1.5rem + 22px); }
  .lp-spur-beide { height: calc(1.5rem + 10px); }
  .lp-spur-beide i { height: 10px; }
  .lp-notiz { display: none; }

  .lp-werkbank-flaeche { border-left: 0; border-top: 1px solid var(--border); }
  .lp-bericht-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kurve" "wende" "kunde" "besser"; }
  .lp-teil-kunde, .lp-teil-besser { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 40rem) {
  .lp { font-size: 1rem; }
  .lp-kopf-aktionen .lp-leise { display: none; }
  .lp-portraets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-portraet:nth-child(even), .lp-js .lp-portraet[data-auftritt]:nth-child(even).is-da { transform: translateY(1.8rem); }
  .lp-fuss-innen { grid-template-columns: minmax(0, 1fr); }

  .lp-merkmale { grid-template-columns: minmax(0, 1fr); }
  .lp-merkmale div + div { border-left: 0; border-top: 1px solid var(--border); }
  .lp-merkmale div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .lp-merkmale dd { margin: 0; }
  .lp-fall-wissen, .lp-fall-spalten { grid-template-columns: minmax(0, 1fr); }
  .lp-schwierigkeit { margin-left: 0; }
  .lp-kurve { margin-left: 0; height: 150px; }
  .lp-kurve-achse { margin-left: 0; }
  .lp-kurve-stufen { display: none; }
  .lp-bericht-nps { display: none; }
  .lp-balken div { grid-template-columns: 7rem 1fr; }
  .lp-strecke { grid-template-columns: minmax(0, 1fr); row-gap: 1.8rem; }
  .lp-strecke li { padding-left: 3.4rem; }
  .lp-strecke-punkt { position: absolute; left: 0; top: -0.3rem; margin: 0; }
  .lp-strecke::before {
    display: block; left: 1.2rem; right: auto; top: 1.2rem; bottom: 1.2rem; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, oklch(56% 0.24 350 / 0.45) 0 8px, transparent 8px 14px);
  }
  .lp-fluss { grid-template-columns: auto minmax(1.5rem, 1fr) auto; padding-inline: 1rem; }
  .lp-fluss-knoten { font-size: 0.8rem; padding-right: 0.7rem; }
  .lp-fluss-talent { white-space: normal; max-width: 7.5rem; line-height: 1.2; }
  .lp-fluss-ton span { font-size: 0.62rem; bottom: auto; top: 0.45rem; white-space: normal; width: 3.6rem; text-align: center; line-height: 1.2; }
  .lp-bilanz { grid-template-columns: minmax(0, 1fr); }
  .lp-bilanz-nein { border-left: 0; border-top: 1px solid var(--border); }
  .lp-paket-liste { grid-template-columns: minmax(0, 1fr); }
  .lp-inklusive { flex-direction: column; align-items: flex-start; }
  .lp-inklusive ul { flex-direction: column; }
  .lp-formular { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ Ruhe */
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
  .lp-js [data-auftritt], .lp-js .lp-portraet[data-auftritt]:nth-child(even) { opacity: 1; transform: none; }
  .lp-js .lp-portraet:nth-child(even) { transform: translateY(2.6rem); }
}