/* HENOS · Landingpage 2 „Papier wird Antwort" (/lp2)
 * =================================================================
 * Kurze, mobil zuerst gebaute Startseite für den A/B-Test gegen
 * index.html. Klassen-Präfix l2-. Baut auf tokens.css, henos.css und
 * landing.css auf (.ld-cta, .ld-cta-meta, .ld-eyebrow, .ld-faq,
 * .ld-final-card, .ld-voice-quote, .ld-hl, .bewertung).
 *
 * DIE FILME
 * Hero und die drei Schritt-Karten zeigen denselben Faden: Mietvertrag und
 * Kfz-Police wandern vom Papierstapel über die Ordner im Tresor bis zur
 * Antwort. Jede Bühne ist eine maßstäbliche Komposition mit FESTEN
 * Koordinaten (Hero 350 × 280, Karten 350 × 210) und wird als Ganzes auf die
 * verfügbare Fläche skaliert. Innerhalb von .l2-canvas stehen deshalb
 * Pixelwerte für Lage und Größe; Farben, Schrift und Radien kommen aus den
 * Tokens. Kleinste Schrift in einer Bühne: --text-xs (12 px), damit sie bei
 * 360 px Breite (Faktor 0,94) noch über 11 px liegt.
 *
 * Bewegung steht NICHT hier: assets/lp2.js spielt sie mit der Web Animations
 * API aus Zeitleisten in Sekunden. Diese Datei enthält nur Gestaltung und das
 * Standbild (ohne JS, bei reduzierter Bewegung, Poster der Filme):
 *   .l2-f   Teile, die nur im Film vorkommen (im Standbild unsichtbar)
 */

/* =====================================================================
 * 1 · Seite
 * =================================================================== */

/* Platzhalter für den Header: gleiche Höhe wie header.top (CLS). */
.l2-kopf-platz { height: 65px; padding: 0; }
@media (min-width: 721px) { .l2-kopf-platz { height: 70px; } }

/* ---- Hero ------------------------------------------------------------ */
.l2-hero {
  background: linear-gradient(180deg, var(--c-bg) 0%, rgba(var(--c-green-rgb), 0.06) 100%);
  padding: var(--space-5) var(--space-4) var(--space-8);
}
.l2-hero-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.l2-h1 {
  font-size: var(--text-5xl); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--c-navy-deep); margin: 0 0 var(--space-3); text-wrap: balance;
}
.l2-sub { font-size: var(--text-lg); line-height: 1.5; color: var(--c-text); margin: 0 0 var(--space-5); max-width: 34em; text-wrap: pretty; }
.l2-hero-film { margin: 0 0 var(--space-5); }
.l2-hero-punkte { margin: 0 0 var(--space-5); }
.l2-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.l2-punkte li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-lg); line-height: 1.45; color: var(--c-text); }
.l2-punkte .ico { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--c-green); }
.l2-punkte strong { color: var(--c-navy-deep); }
.l2-punkte-fazit { margin: var(--space-4) 0 0; font-size: var(--text-xl); font-weight: 700; color: var(--c-navy-deep); }

/* Der Knopf läuft auf dem Handy über die volle Breite. */
.l2-cta-block .ld-cta,
.l2-final .ld-cta { display: block; text-align: center; padding: var(--space-4) var(--space-5); }
.l2-cta-block .ld-cta-meta { margin-top: var(--space-2); line-height: 1.45; }
.l2-bewertung { margin-top: var(--space-5); }

/* Drei Bildmarken in EINER Reihe, auch auf 360 px. */
.l2-trust { margin-top: var(--space-5); }
.l2-badges {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
}
.l2-badges li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.l2-badges img { width: 40px; height: 40px; display: block; object-fit: contain; }
.l2-badges span { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; color: var(--c-navy-deep); hyphens: none; }
.l2-trust-link {
  display: inline-block; margin-top: var(--space-3); padding: var(--space-1) 0;
  font-size: var(--text-sm); color: var(--c-text-muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--c-navy-rgb), 0.25);
}
.l2-trust-link:hover { color: var(--c-navy-deep); }

@media (min-width: 640px) {
  .l2-hero { padding: var(--space-8) var(--space-6) var(--space-9); }
  .l2-h1 { font-size: var(--text-6xl); }
  .l2-sub { font-size: var(--text-xl); }
  .l2-cta-block .ld-cta { display: inline-block; padding: var(--btn-pad-lg); }
  .l2-badges { max-width: 420px; }
  .l2-hero-film { max-width: 560px; }
}
/* Niedrige Handy-Bildschirme (Safari mit Leisten, In-App-Browser von Meta,
   390 × 664): Knopf und Preiszeile müssen in den ersten Bildschirm. */
@media (max-width: 639px) and (max-height: 760px) {
  .l2-hero { padding-top: var(--space-3); }
  .l2-h1 { font-size: var(--text-4xl); margin-bottom: var(--space-2); }
  .l2-sub { margin-bottom: var(--space-3); }
  .l2-hero-film { margin-bottom: var(--space-3); }
  /* Spezifischer als die Grundregel .l2-stage-hero (aspect-ratio) weiter
     unten: sonst rechnet der Browser die Breite aus der Höhe (264 × 1,25)
     und die Bühne wird schmaler als ihr Rahmen. */
  .l2-hero-film .l2-stage-hero { aspect-ratio: auto; height: 264px; }
}
/* Desktop: Text links, Film rechts. */
@media (min-width: 960px) {
  .l2-hero { padding: var(--space-9) var(--space-6) var(--space-10); }
  .l2-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: var(--space-9);
    grid-template-areas: ". film" "h1 film" "sub film" "cta film" "rate film" "trust film" ". film";
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
  }
  .l2-h1 { grid-area: h1; font-size: var(--text-7xl); line-height: 1.1; margin-bottom: var(--space-4); }
  .l2-sub { grid-area: sub; margin-bottom: var(--space-6); }
  .l2-hero-film { grid-area: film; align-self: center; margin: 0; max-width: none; }
  .l2-hero-punkte { grid-area: film; align-self: center; margin: 0; }
  .l2-cta-block { grid-area: cta; }
  .l2-bewertung { grid-area: rate; }
  .l2-trust { grid-area: trust; }
}

/* ---- So funktioniert's --------------------------------------------- */
.l2-steps { background: var(--c-surface); padding: var(--space-9) var(--space-4); }
.l2-steps-inner { max-width: 1120px; margin: 0 auto; }
.l2-steps-head { margin-bottom: var(--space-6); }
.l2-steps-head .ld-eyebrow { margin-bottom: var(--space-2); }
.l2-steps-head h2, .l2-faq h2 {
  font-size: var(--text-4xl); line-height: 1.15; letter-spacing: -0.02em; color: var(--c-navy-deep); margin: 0;
}
.l2-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.l2-card {
  background: var(--c-bg); border: 1px solid var(--c-track); border-radius: var(--radius-xl);
  overflow: hidden; display: flex; flex-direction: column;
}
.l2-stage-step { border-bottom: 1px solid var(--c-track); }
.l2-card-body { padding: var(--space-4) var(--space-5) var(--space-6); }
.l2-card-top { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); min-height: 32px; }
.l2-card-step {
  display: flex; align-items: center; gap: var(--space-2); margin: 0;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-green-deep);
}
.l2-card-num {
  width: 24px; height: 24px; border-radius: var(--radius-circle); flex: none;
  display: grid; place-items: center; letter-spacing: 0;
  background: var(--c-navy); color: var(--c-surface); font-size: var(--text-xs);
}
.l2-card h3 { font-size: var(--text-2xl); line-height: 1.25; color: var(--c-navy-deep); margin: 0 0 var(--space-2); text-wrap: balance; }
.l2-card-text { font-size: var(--text-base); line-height: 1.55; color: var(--c-text-muted); margin: 0; }
.l2-card-text sup { font-size: var(--text-xs); line-height: 0; }

.l2-points { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; }
.l2-points li {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-base); line-height: 1.5; color: var(--c-text);
  padding: var(--space-2); margin: 0 calc(-1 * var(--space-2));
}
/* Der Punkt, dessen Szene der Film gerade zeigt, liegt auf einer hellen
   Fläche. Nur Bewegung, keine Information: im Standbild bleibt sie aus. */
.l2-pt-bg { position: absolute; inset: 0; border-radius: var(--radius-md); background: var(--c-surface-soft); opacity: 0; }
.l2-points li > :not(.l2-pt-bg) { position: relative; text-wrap: pretty; }
/* Begriffe, die nicht am Bindestrich umbrechen sollen („iPhone-App“). */
.l2-nowrap { white-space: nowrap; }
.l2-pt-ico {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: var(--text-lg);
  background: var(--c-green-soft); color: var(--c-green-deep);
}
.l2-cta-mitte { margin-top: var(--space-7); }
@media (min-width: 640px) {
  .l2-steps { padding: var(--space-10) var(--space-6); }
  .l2-steps-head h2 { font-size: var(--text-6xl); }
}
/* Drei Spalten erst ab 1100 px: darunter würden die Bühnen so schmal, dass
   die Schrift im Film unter 11 px fiele. Bis dahin eine Spalte, nicht breiter
   als 440 px: breiter wüchse die Schrift im Film über die Kartenüberschrift. */
@media (min-width: 640px) and (max-width: 899px) {
  .l2-cards { max-width: 440px; }
}
/* Zwischen 900 und 1099 px: jede Karte quer, Film links, Text rechts. */
@media (min-width: 900px) and (max-width: 1099px) {
  .l2-card { flex-direction: row; }
  .l2-stage-step { flex: 0 0 44%; border-bottom: 0; border-right: 1px solid var(--c-track); }
  .l2-card-body { flex: 1; align-self: center; padding: var(--space-5) var(--space-6); }
}
/* Desktop: drei Spalten. Die Bühnen stehen als eigene Flächen auf einer
   Linie, der Text steht frei darunter. So bleiben unter den kürzeren Texten
   keine leeren Kästen stehen. */
@media (min-width: 1100px) {
  .l2-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .l2-card { background: none; border: 0; border-radius: 0; overflow: visible; }
  .l2-stage-step { border: 1px solid var(--c-track); border-radius: var(--radius-xl); }
  .l2-card-body { padding: var(--space-5) var(--space-1) 0; }
}

/* ---- Stimmen: der Abschnitt von der Startseite (landing.css · .ld-voices-wrap).
   Hier nur die Abstände: Er schließt bündig an die Funktionen an, und die
   Sicherheit folgt ohne Lücke auf das graue Band. */
.l2-fx + .ld-voices-wrap { margin-top: 0; }
.ld-voices-wrap + .l2-sec { margin-top: 0; }

/* ---- Sicherheit (Farben wie .lv-sec auf der Startseite) ----------------
   Drei kurze Punkte. Handy: Zeilen mit dem Icon links. Ab 760 px drei
   Karten nebeneinander, Icon oben. */
.l2-sec { margin-top: var(--space-9); padding: var(--space-9) var(--space-4); background: var(--c-navy-deep); color: var(--c-surface); }
.l2-sec-inner { max-width: 1120px; margin: 0 auto; }
.l2-sec .ld-eyebrow { color: var(--c-green-bright); }
.l2-sec h2 { font-size: var(--text-4xl); line-height: 1.15; margin: var(--space-2) 0 var(--space-6); color: var(--c-surface); letter-spacing: -0.02em; text-wrap: balance; }
.l2-sec h2 em { color: var(--heading-accent-dark); font-style: normal; }
.l2-sec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.l2-sec-item {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: rgba(var(--c-white-rgb), .05); border: 1px solid rgba(var(--c-white-rgb), .1);
}
.l2-sec-item .ico { flex: none; font-size: var(--text-3xl); color: var(--c-green-bright); margin-top: 2px; }
.l2-sec-item h3 { font-size: var(--text-lg); margin: 0 0 var(--space-1); color: var(--c-surface); text-wrap: balance; }
.l2-sec-item p { font-size: var(--text-base); line-height: 1.5; margin: 0; color: rgba(var(--c-white-rgb), .72); text-wrap: pretty; }
@media (min-width: 640px) {
  .l2-sec { padding: var(--space-10) var(--space-6); }
  .l2-sec h2 { font-size: var(--text-6xl); margin-bottom: var(--space-7); }
}
@media (min-width: 760px) {
  .l2-sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .l2-sec-item { flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
  .l2-sec-item .ico { font-size: var(--text-4xl); margin-top: 0; }
  .l2-sec-item h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
}

/* ---- Kurz-FAQ, Schluss, Hinweise --------------------------------------- */
.l2-faq h2 { margin-bottom: var(--space-5); }
.l2-faq { padding-left: var(--space-4); padding-right: var(--space-4); }
.l2-faq details { padding: 0 var(--space-5); }
@media (min-width: 640px) {
  .l2-faq { max-width: calc(1120px + 2 * var(--space-6)); padding-left: var(--space-6); padding-right: var(--space-6); }
  .l2-faq details { max-width: 760px; }
}
.l2-final { padding: 0 var(--space-4); }
.l2-final .ld-final-card { padding: var(--space-8) var(--space-5); }
.l2-final .ld-final-card h2 { font-size: var(--text-4xl); margin-bottom: var(--space-5); text-wrap: balance; }
/* Auf Navy trägt Grau nicht: die Preiszeile in Weiß mit Alpha. */
.l2-final .ld-cta-meta { color: rgba(var(--c-white-rgb), 0.78); line-height: 1.45; margin: var(--space-3) auto 0; max-width: 420px; }
@media (min-width: 640px) {
  /* Dieselbe Inhaltskante wie Schritte, Stimmen, FAQ und Hinweise. */
  .l2-final { max-width: calc(1120px + 2 * var(--space-6)); padding: 0 var(--space-6); }
  .l2-final .ld-final-card { padding: var(--space-9) var(--space-7); }
  .l2-final .ld-final-card h2 { font-size: var(--text-5xl); }
  .l2-final .ld-cta { display: inline-block; padding: var(--btn-pad-lg); }
}
/* /lp2: flacher und schmaler (09.10.2026), /lp3 bleibt bei der vollen Breite. */
.l2-final.l2-final-schmal .ld-final-card { padding: var(--space-7) var(--space-5); }
.l2-final.l2-final-schmal .ld-final-card h2 { margin-bottom: var(--space-4); }
@media (min-width: 640px) {
  .l2-final.l2-final-schmal { max-width: calc(760px + 2 * var(--space-6)); }
  .l2-final.l2-final-schmal .ld-final-card { padding: var(--space-7) var(--space-7); }
  .l2-final.l2-final-schmal .ld-final-card h2 { font-size: var(--text-4xl); }
}
/* Linksbündig an der Inhaltskante wie alles andere, Zeilen höchstens 760 px. */
.l2-hinweise {
  max-width: calc(1120px + 2 * var(--space-6)); margin: 0 auto; padding: 0 var(--space-4) var(--space-7);
  font-size: var(--text-sm); line-height: 1.55; color: var(--c-text-muted);
}
.l2-hinweise p { margin: 0 0 var(--space-2); max-width: 760px; }
@media (min-width: 640px) { .l2-hinweise { padding-left: var(--space-6); padding-right: var(--space-6); } }

/* ---- Sticky-Leiste (nur Handy) ---------------------------------------- */
.l2-sticky {
  position: fixed; left: 0; right: 0; z-index: 50; bottom: var(--hc-consent-h, 0px);
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--c-surface); border-top: 1px solid var(--c-track);
  box-shadow: 0 -4px 20px rgba(var(--c-navy-rgb), 0.08);
  opacity: 0; visibility: hidden; transform: translateY(100%);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility .25s;
}
.l2-sticky.is-on { opacity: 1; visibility: visible; transform: none; }
.l2-sticky .ld-cta { display: block; text-align: center; padding: var(--space-3) var(--space-5); font-size: var(--text-lg); box-shadow: none; }
.l2-sticky .ld-cta:hover { transform: none; }
.l2-sticky-meta { font-size: var(--text-xs); line-height: 1.35; color: var(--c-text-muted); text-align: center; margin: var(--space-1) 0 0; }
@media (min-width: 721px) { .l2-sticky { display: none; } }

/* =====================================================================
 * 2 · Film-Rahmen: Schritt-Leiste, Pausenknopf, Bühne
 * =================================================================== */
/* Kein eigenes margin für .l2-film: es überschriebe den Abstand des Hero-Films
   zum Knopf darunter (.l2-hero-film oben). Die Karten (li) haben keines. */
.l2-hero-film {
  background: var(--c-surface); border: 1px solid var(--c-track);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
}
.l2-film-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--c-track);
}
.l2-stationen { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.l2-station {
  display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0;
  padding: var(--space-2) 0 var(--space-2); background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.l2-station:disabled { cursor: default; }
.l2-station:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.l2-st-kopf { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.l2-nr { display: grid; width: 20px; height: 20px; flex: none; }
.l2-nr i, .l2-lb i { grid-area: 1 / 1; font-style: normal; }
.l2-nr i {
  display: grid; place-items: center; border-radius: var(--radius-circle);
  font-size: var(--text-xs); font-weight: 700; line-height: 1;
}
.l2-nr-ruhe { border: 2px solid var(--c-app-rand-stark); color: var(--c-text-muted); }
.l2-nr-aktiv { background: var(--c-navy); color: var(--c-surface); }
.l2-nr-fertig { background: var(--c-green-soft); color: var(--c-green-deep); }
.l2-nr-fertig .ico { width: 12px; height: 12px; }
.l2-lb { display: grid; min-width: 0; }
.l2-lb i { font-size: var(--text-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.l2-lb-ruhe { color: var(--c-text-muted); }
.l2-lb-aktiv { color: var(--c-navy-deep); }
.l2-st-bar { display: block; height: 3px; border-radius: var(--radius-pill); background: var(--c-track); overflow: hidden; }
.l2-st-fill { display: block; height: 100%; background: var(--c-green); transform-origin: 0 50%; transform: scaleX(0); }
/* Fortschritt gibt es nur, solange gespielt wird: im Standbild keine Balken. */
.l2-film:not(.is-gespielt) .l2-st-bar { visibility: hidden; }
/* Standbild: 1 und 2 erledigt, 3 aktiv. */
.l2-nr-aktiv, .l2-lb-aktiv, .l2-nr-fertig { opacity: 0; }
.l2-st-1 .l2-nr-fertig, .l2-st-2 .l2-nr-fertig, .l2-st-3 .l2-nr-aktiv, .l2-st-3 .l2-lb-aktiv { opacity: 1; }
.l2-st-1 .l2-nr-ruhe, .l2-st-2 .l2-nr-ruhe, .l2-st-3 .l2-nr-ruhe, .l2-st-3 .l2-lb-ruhe { opacity: 0; }
@media (min-width: 960px) { .l2-lb i { font-size: var(--text-md); } }
/* Unter 380 px reicht der Platz für drei Stationen mit 13-px-Beschriftung nur
   mit engeren Abständen (die Schrift bleibt, sie ist Hauptbeschriftung). */
@media (max-width: 379px) {
  .l2-film-bar { gap: var(--space-1); padding-left: var(--space-2); padding-right: var(--space-1); }
  .l2-stationen { gap: var(--space-1); }
  .l2-st-kopf { gap: var(--space-1); }
  .l2-film-bar .l2-pause { width: 28px; height: 28px; }
}

.l2-pause {
  position: relative; flex: none; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-circle);
  border: 1px solid var(--c-track); background: var(--c-surface); color: var(--c-navy);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.l2-pause::after { content: ""; position: absolute; inset: -6px; }   /* größere Trefferfläche */
.l2-pause:hover { border-color: rgba(var(--c-navy-rgb), 0.3); }
.l2-pause:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.l2-play-ico { display: none; }
.l2-pause[aria-pressed="true"] .l2-pause-ico { display: none; }
.l2-pause[aria-pressed="true"] .l2-play-ico { display: block; }
/* Ohne JS gibt es nichts zu steuern; lp2.js setzt .l2-js. */
:root:not(.l2-js) .l2-pause { visibility: hidden; }
/* Ohne Web Animations API blendet lp2.js die Knöpfe aus (hidden); das
   display aus .l2-pause darf das nicht überstimmen. */
.l2-pause[hidden] { display: none; }
.l2-pause.is-mini { margin-left: auto; width: 28px; height: 28px; }

/* Die Bühne hält das Seitenverhältnis der Komposition, die Leinwand darin
   wird eingepasst (Breite UND Höhe) und mittig gesetzt. lp2.js rechnet das Maß aus; ohne JS gelten die Stufen. */
.l2-stage { position: relative; overflow: hidden; background: var(--c-surface-soft); }
.l2-stage-hero { aspect-ratio: 350 / 280; }
.l2-stage-step { aspect-ratio: 350 / 210; }
.l2-canvas {
  --s: 1;
  position: absolute; top: 0; left: calc(50% - 175px * var(--s)); width: 350px;
  transform-origin: 0 0; transform: scale(var(--s));
  font-family: var(--font-sans); line-height: 1.3; color: var(--c-text);
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
/* Stufen für Browser ohne tan(atan2()) bzw. Container-Einheiten: jeweils
   höchstens so groß wie die kleinste Bühne der Spanne, damit nichts
   abgeschnitten wird. */
@media (max-width: 389px) { .l2-canvas { --s: .93; } }
@media (max-width: 639px) and (max-height: 760px) { .l2-stage-hero .l2-canvas { --s: .93; } }
@media (min-width: 640px) { .l2-canvas { --s: 1.4; } }
@media (min-width: 640px) and (max-width: 899px) { .l2-stage-step .l2-canvas { --s: 1.25; } }
@media (min-width: 900px) and (max-width: 1099px) { .l2-stage-step .l2-canvas { --s: 1.06; } }
@media (min-width: 960px) and (max-width: 1099px) { .l2-stage-hero .l2-canvas { --s: 1.24; } }
@media (min-width: 1100px) { .l2-stage-step .l2-canvas { --s: 1; } }
/* Genau eingepasst wird per JS (lp2.js · einpassen): Safari auf dem iPhone
   zeigte mit tan(atan2(100cqw …)) eine leere Bühne. */
.l2h { height: 280px; }
.l2a, .l2b, .l2c { height: 210px; }
.l2-canvas > * { position: absolute; }
.l2-canvas .ico { width: 1em; height: 1em; }

/* Lädt lp2.js nicht, bleibt das Standbild stehen (kein leeres Bild): der
   Hero wartet kurz auf den Film und blendet sonst das Standbild ein. */
.l2-motion [data-l2-film="hero"]:not(.is-live) .l2-canvas { animation: l2-notfall .3s linear 1.6s both; }
@keyframes l2-notfall { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
 * 3 · Bausteine (dieselben Objekte in allen vier Bühnen)
 * =================================================================== */

/* Papier: Titel in der Dokument-Schrift (Serif nur für Dokumentbilder). */
.l2-paper {
  background: var(--c-surface); border-radius: var(--radius-sm); padding: 10px 8px 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(var(--c-navy-rgb), 0.10), 0 6px 18px rgba(var(--c-navy-rgb), 0.12);
}
.l2-paper b {
  display: block; font-family: var(--font-doc); font-size: var(--text-xs); font-weight: 700;
  color: var(--c-navy-deep); letter-spacing: -0.01em; white-space: nowrap; margin-bottom: 8px;
}
.l2-lines { display: flex; flex-direction: column; gap: 5px; }
.l2-lines i { display: block; height: 3px; border-radius: var(--radius-pill); background: var(--c-app-rand-stark); }
.l2-lines i:nth-child(2) { width: 86%; }
.l2-lines i:nth-child(3) { width: 92%; }
.l2-lines i:nth-child(4) { width: 70%; }
.l2-lines i:nth-child(5) { width: 80%; }
.l2-sign { position: absolute; left: 8px; bottom: 10px; width: 40px; height: 12px; border-bottom: 1px solid rgba(var(--c-navy-rgb), 0.35); }
.l2-sign::before {
  content: ""; position: absolute; left: 4px; bottom: 2px; width: 26px; height: 8px;
  border: 1.5px solid transparent; border-top-color: rgba(var(--c-navy-rgb), 0.55);
  border-radius: 50%; transform: rotate(-8deg);
}

/* Telefon: neutral, ohne Hersteller. Durch das „Glas" sieht man das Papier. */
.l2-phone { border: 3px solid var(--c-navy-deep); border-radius: var(--radius-xl); box-shadow: 0 10px 28px rgba(var(--c-navy-rgb), 0.18); }
.l2-phone::before {
  content: ""; position: absolute; left: 50%; top: 6px; width: 28px; height: 5px;
  margin-left: -14px; border-radius: var(--radius-pill); background: var(--c-navy-deep);
}
.l2-phone::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 34px; height: 3px;
  margin-left: -17px; border-radius: var(--radius-pill); background: rgba(var(--c-navy-rgb), 0.35);
}
.l2-corners i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--c-green); }
.l2-corners i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; border-top-left-radius: 4px; }
.l2-corners i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; border-top-right-radius: 4px; }
.l2-corners i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 4px; }
.l2-corners i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 4px; }
.l2-scanline { height: 2px; border-radius: var(--radius-pill); background: var(--c-green); box-shadow: 0 0 10px 2px rgba(var(--c-green-rgb), 0.45); }
.l2-flash { background: var(--c-surface); border-radius: var(--radius-lg); }

/* Haken „erledigt" */
.l2-ok {
  width: 22px; height: 22px; border-radius: var(--radius-circle);
  display: grid; place-items: center; font-size: var(--text-md);
  background: var(--c-green); color: var(--c-navy-deep); box-shadow: 0 2px 6px rgba(var(--c-navy-rgb), 0.18);
}

/* Ordner und Umschlag (SVG, Farben aus Tokens) */
.l2-svg-folder { fill: var(--c-app-rand-stark); stroke: rgba(var(--c-navy-rgb), 0.25); stroke-width: 1.5; }
.l2-svg-front { fill: var(--c-surface); stroke: rgba(var(--c-navy-rgb), 0.22); stroke-width: 1.5; }
.l2-svg-paper { fill: var(--c-surface); stroke: rgba(var(--c-navy-rgb), 0.22); stroke-width: 1.5; }
.l2-svg-line { fill: none; stroke: rgba(var(--c-navy-rgb), 0.22); stroke-width: 1.5; stroke-linecap: round; }
.l2-svg-stamp { fill: var(--c-surface-soft); stroke: rgba(var(--c-navy-rgb), 0.3); stroke-width: 1.5; }
.l2-folder-back, .l2-folder-front, .l2-env, .l2-flap { overflow: visible; }
.l2-folder-front { filter: drop-shadow(0 -2px 3px rgba(var(--c-navy-rgb), 0.06)); }
.l2-env { filter: drop-shadow(0 6px 10px rgba(var(--c-navy-rgb), 0.12)); }
.l2-flap { transform-origin: 50% 0; }
.l2-flap-open { transform-origin: 50% 100%; background: var(--c-app-rand-stark); clip-path: polygon(2% 100%, 50% 4%, 98% 100%); }

/* Vorschlag aus dem Postfach */
.l2-sugg {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--c-surface); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3);
  box-shadow: 0 2px 8px rgba(var(--c-navy-rgb), 0.06), 0 10px 26px rgba(var(--c-navy-rgb), 0.12);
}
.l2-sugg-ico {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: var(--text-lg);
  background: var(--c-surface-soft); color: var(--c-navy);
}
.l2-sugg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.l2-sugg small { font-size: var(--text-xs); line-height: 1.3; color: var(--c-text-muted); }
.l2-sugg b { font-size: var(--text-md); line-height: 1.3; font-weight: 700; color: var(--c-navy-deep); }
.l2-sugg.is-stack { flex-direction: column; align-items: stretch; gap: 6px; padding: var(--space-3); }
.l2-sugg-row { display: flex; align-items: center; gap: var(--space-2); }
.l2-sugg-row b { flex: 1; min-width: 0; white-space: nowrap; }
.l2-tick {
  position: relative; flex: none; width: 28px; height: 28px; border-radius: var(--radius-circle);
  border: 2px solid rgba(var(--c-navy-rgb), 0.2); background: var(--c-surface);
}
.l2-tick-on {
  position: absolute; inset: -2px; border-radius: var(--radius-circle);
  display: grid; place-items: center; font-size: var(--text-lg);
  background: var(--c-green); color: var(--c-navy-deep);
}
/* Fingertipp: ein Ring, der sich weitet und verblasst */
.l2-tap { position: absolute; inset: -4px; border-radius: var(--radius-pill); border: 2px solid var(--c-green); opacity: 0; }
.l2-tick .l2-tap { inset: -2px; border-radius: var(--radius-circle); }
.l2-tick-on { opacity: 0; }

/* Tresor: das dunkle Panel mit dem grünen Balken oben */
.l2-vault {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 100%);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 16px 40px rgba(var(--c-navy-rgb), 0.25);
}
.l2-vault::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c-green); }
.l2-vault-head {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; padding: 0 var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.l2-vault-name { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--c-surface); }
.l2-vault-name .ico { color: var(--c-green-bright); font-size: var(--text-md); }
.l2-go-wrap { position: relative; display: inline-flex; }
.l2-go {
  position: relative; display: grid; place-items: center; height: 26px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--c-green); color: var(--c-navy-deep);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap; overflow: hidden;
}
/* position: relative malt den Text über die Fläche .l2-go-ok (die absolut
   liegt), auch im Standbild ohne JS. */
.l2-go-txt { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; position: relative; }
.l2-go-txt.is-ok { color: var(--c-green-deep); }
.l2-go-ok { position: absolute; inset: 0; background: var(--c-green-soft); }
.l2-go-wrap .l2-tap { inset: -5px; border-color: var(--c-green-bright); }

/* Eine Zeile im Tresor: roh (Dateiname) oder eingeordnet (Titel, Bereich,
   ein ausgelesener Wert). Beide liegen übereinander und wechseln per Y. */
.l2-row > * { position: absolute; }
.l2-row-bg { inset: 0; background: var(--c-surface); border-radius: var(--radius-md); box-shadow: 0 2px 6px rgba(var(--c-navy-deep-rgb), 0.25); }
.l2-row-clip { inset: 0; overflow: hidden; border-radius: var(--radius-md); }
.l2-row-raw, .l2-row-done { inset: 0; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); }
.l2-row-raw { padding-left: 10px; }
.l2-thumb {
  position: relative; flex: none; width: 26px; height: 32px; border-radius: var(--radius-sm);
  background: var(--c-surface); border: 1px solid var(--c-track);
  background-image: linear-gradient(var(--c-app-rand-stark), var(--c-app-rand-stark)),
    linear-gradient(var(--c-app-rand-stark), var(--c-app-rand-stark)),
    linear-gradient(var(--c-app-rand-stark), var(--c-app-rand-stark));
  background-size: 16px 2px, 12px 2px, 14px 2px; background-position: 4px 7px, 4px 12px, 4px 17px; background-repeat: no-repeat;
}
.l2-thumb.is-pdf::after { content: ""; position: absolute; left: 3px; bottom: 4px; width: 14px; height: 6px; border-radius: var(--radius-pill); background: var(--c-navy); }
.l2-fname { font-size: var(--text-sm); font-weight: 600; color: var(--c-text-muted); white-space: nowrap; }
.l2-tile {
  flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: var(--text-lg); background: var(--c-surface-soft); color: var(--c-navy);
}
.l2-row-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.l2-row-txt b { font-size: var(--text-md); font-weight: 700; color: var(--c-navy-deep); white-space: nowrap; line-height: 1.15; }
.l2-row-meta { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.l2-chip {
  flex: none; font-size: var(--text-xs); font-weight: 600; line-height: 16px; padding: 0 6px; white-space: nowrap;
  border-radius: var(--radius-pill); background: var(--c-surface-soft); color: var(--c-text-muted);
}
/* Liegt in .l2-row-clip (nicht direkt in .l2-row), braucht deshalb eigene
   Lage; als statisches inline-span hätte sie keine Fläche. */
.l2-sweep {
  position: absolute; display: block; left: 0; top: 0; bottom: 0; width: 48px; opacity: 0;
  background: linear-gradient(90deg, rgba(var(--c-green-rgb), 0) 0%, rgba(var(--c-green-rgb), 0.18) 80%, rgba(var(--c-green-rgb), 0.9) 96%, rgba(var(--c-green-rgb), 0) 100%);
}
/* Kleine Zeilen der Karte „Einordnen": Titel mit Bereich, darunter ein
   gedecktes Eckdatum. */
.l2-row.is-klein .l2-tile { width: 26px; height: 26px; font-size: var(--text-md); }
.l2-row.is-klein .l2-thumb { width: 22px; height: 27px; }
.l2-row-titel { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.l2-row.is-klein .l2-row-txt { gap: 2px; }
.l2-row.is-klein .l2-row-txt b { font-size: var(--text-sm); }
.l2-eck { font-size: var(--text-xs); font-weight: 500; line-height: 1.2; color: var(--c-text-muted); white-space: nowrap; }

/* Frage (rechts, wie im Chat) */
.l2-q {
  margin: 0; padding: var(--space-2) var(--space-3);
  background: var(--c-navy); color: var(--c-surface); font-size: var(--text-sm); line-height: 1.45;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  box-shadow: 0 6px 16px rgba(var(--c-navy-rgb), 0.18);
}
/* Tipp-Punkte: Henos schreibt */
.l2-dots {
  display: inline-flex; gap: 5px; padding: 11px 12px; background: var(--c-surface);
  border: 1px solid var(--c-track); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  box-shadow: 0 4px 12px rgba(var(--c-navy-rgb), 0.08);
}
.l2-dots i { display: block; width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--c-navy); opacity: 0.35; }
/* Antwort mit Quelle: hebt sich grün ab, wie die Antwort im Companion */
.l2-ans { padding: var(--space-3); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.l2-ans-bg { position: absolute; inset: 0; border-radius: var(--radius-lg); background: var(--c-green-soft); border: 1px solid var(--c-green); }
.l2-ans > :not(.l2-ans-bg) { position: relative; }
.l2-ans-head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--c-text-muted); }
.l2-ans-av {
  width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--c-green); color: var(--c-navy-deep); font-size: var(--text-xs); font-weight: 700;
}
.l2-ans-val { font-size: var(--text-3xl); font-weight: 700; color: var(--c-navy-deep); letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; }
.l2-src {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: var(--text-xs); font-weight: 600; color: var(--c-green-deep); white-space: nowrap;
  background: var(--c-surface); border: 1px solid var(--c-green); border-radius: var(--radius-pill); padding: 3px 10px;
}
.l2-src-ring { position: absolute; inset: -5px; border-radius: var(--radius-pill); border: 2px solid rgba(var(--c-green-rgb), 0.6); }

/* Erinnerung als Mitteilung */
.l2-note {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--c-surface); border-radius: var(--radius-lg); padding: 7px var(--space-3);
  box-shadow: 0 2px 8px rgba(var(--c-navy-rgb), 0.08), 0 12px 30px rgba(var(--c-navy-rgb), 0.16);
}
.l2-note-ico {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: var(--text-lg);
  background: var(--c-amber-soft); color: var(--c-amber-deep);
}
.l2-note-ico .ico { transform-origin: 50% 15%; }
.l2-note-txt { display: flex; flex-direction: column; font-size: var(--text-sm); line-height: 1.35; color: var(--c-text); }
.l2-note-txt b { font-weight: 700; color: var(--c-navy-deep); }

/* Ablagefläche zum Hineinziehen und die gezogene Auswahl */
.l2-zone { border: 2px dashed rgba(var(--c-navy-rgb), 0.22); border-radius: var(--radius-lg); display: grid; place-items: center; background: rgba(var(--c-white-rgb), 0.6); }
.l2-zone-txt { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--c-text-muted); }
.l2-zone-txt .ico { font-size: var(--text-2xl); color: var(--c-navy); }
.l2-zone-on { position: absolute; inset: -2px; border-radius: var(--radius-lg); border: 2px solid var(--c-green); background: rgba(var(--c-green-rgb), 0.10); opacity: 0; }
.l2-zone > * { position: relative; }
.l2-zone > .l2-zone-on { position: absolute; }
.l2-fcard {
  display: flex; align-items: center; gap: var(--space-2); padding: 7px 10px;
  background: var(--c-surface); border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(var(--c-navy-rgb), 0.08), 0 10px 24px rgba(var(--c-navy-rgb), 0.16);
}
.l2-fcard-ico { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: var(--text-lg); background: var(--c-surface-soft); color: var(--c-navy); }
.l2-fcard-txt { min-width: 0; display: flex; flex-direction: column; }
.l2-fcard-txt b { font-size: var(--text-sm); line-height: 1.3; font-weight: 700; color: var(--c-navy-deep); white-space: nowrap; }
.l2-tausch { display: grid; }
.l2-tausch > * { grid-area: 1 / 1; }
.l2-fcard-txt small { font-size: var(--text-xs); line-height: 1.3; color: var(--c-text-muted); white-space: nowrap; }
.l2-fcard-txt small.is-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--c-green-deep); font-weight: 600; }
.l2-fcard-zahl {
  position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: var(--radius-circle);
  display: grid; place-items: center; background: var(--c-navy); color: var(--c-surface);
  font-size: var(--text-xs); font-weight: 700; box-shadow: 0 2px 6px rgba(var(--c-navy-rgb), 0.2);
}
.l2-cursor { width: 22px; height: 22px; fill: var(--c-surface); color: var(--c-navy-deep); filter: drop-shadow(0 2px 3px rgba(var(--c-navy-rgb), 0.25)); }

/* Reiter unter der Erfassen-Bühne */
.l2-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(var(--c-navy-rgb), 0.06); border-radius: var(--radius-pill); }
.l2-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--c-navy-deep); white-space: nowrap; }
.l2-tab .ico { color: var(--c-green-deep); }
.l2-tabs-pill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% / 3); background: var(--c-surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }

/* Telefon mit Ausweis: „Immer zur Hand" */
.l2-idphone {
  border: 3px solid var(--c-navy-deep); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--c-app-flaeche); padding: 22px 10px 0; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 10px 28px rgba(var(--c-navy-rgb), 0.18);
}
.l2-idphone::before {
  content: ""; position: absolute; left: 50%; top: 7px; width: 30px; height: 5px;
  margin-left: -15px; border-radius: var(--radius-pill); background: var(--c-navy-deep);
}
.l2-idphone-head { font-size: var(--text-xs); font-weight: 700; color: var(--c-navy-deep); }
.l2-idcard { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: var(--c-surface); border-radius: var(--radius-md); border: 1px solid var(--c-track); }
.l2-idcard.is-hinten { opacity: 0.75; }
.l2-idcard-foto {
  flex: none; width: 30px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--c-surface-soft); color: rgba(var(--c-navy-rgb), 0.45); font-size: var(--text-2xl);
}
.l2-idcard-foto.is-klein { height: 24px; font-size: var(--text-lg); }
.l2-idcard-txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--text-xs); line-height: 1.3; color: var(--c-text); }
.l2-idcard-txt b { font-size: var(--text-sm); color: var(--c-navy-deep); }
.l2-idcard-txt small { font-size: var(--text-xs); color: var(--c-green-deep); font-weight: 600; }
.l2-offline {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--c-navy); color: var(--c-surface);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap; box-shadow: 0 6px 16px rgba(var(--c-navy-rgb), 0.22);
}
.l2-offline .ico { color: var(--c-green-bright); font-size: var(--text-md); }

/* Abo-Übersicht: die Summe oben geht aus den Zeilen auf */
.l2-abos { display: flex; flex-direction: column; padding: 6px var(--space-3) 4px; }
/* Die Fläche liegt als eigene Ebene darunter: sie wächst im Film mit jeder
   Zeile (scaleY von oben), damit die Karte nie leer dasteht. */
.l2-abos-bg {
  position: absolute; inset: 0; transform-origin: 50% 0;
  background: var(--c-surface); border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(var(--c-navy-rgb), 0.06), 0 10px 26px rgba(var(--c-navy-rgb), 0.10);
}
.l2-abos > :not(.l2-abos-bg) { position: relative; }
.l2-abos-head {
  display: flex; justify-content: space-between; align-items: center; height: 30px;
  border-bottom: 1px solid var(--c-track); font-size: var(--text-sm); color: var(--c-navy-deep);
}
.l2-summe { display: grid; justify-items: end; overflow: hidden; }
.l2-summe b { grid-area: 1 / 1; white-space: nowrap; }
.l2-abo { display: flex; align-items: center; gap: var(--space-2); height: 32px; font-size: var(--text-sm); }
.l2-abo-ico { flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--c-surface-soft); color: var(--c-navy); font-size: var(--text-sm); }
.l2-abo-name { color: var(--c-text); white-space: nowrap; }
.l2-abo-preis { margin-left: auto; font-weight: 700; color: var(--c-navy-deep); white-space: nowrap; }
.l2-frist { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--c-amber-soft); color: var(--c-amber-deep); }

/* =====================================================================
 * 4 · Lage der Teile je Bühne (Koordinaten der Komposition)
 * =================================================================== */

/* ---- Hero · 350 × 280 ---- */
/* Akt 1: der Stapel und die zwei Spalten (Scannen links, Hochladen rechts).
   Lage der Spalten; den Stapel legt lp2.js per transform darüber. */
.l2h-stapel { left: 0; top: 0; width: 350px; height: 280px; }
.l2h-stapel > * { position: absolute; }
.l2h-c { width: 84px; height: 108px; transform-origin: 50% 50%; }
.l2h-c-kopf { display: block; width: 46px; height: 6px; margin: 2px 0 10px; border-radius: var(--radius-pill); background: rgba(var(--c-navy-rgb), 0.28); }
.l2h-c1 { left: 40px; top: 74px; }
.l2h-c2 { left: 214px; top: 40px; }
.l2h-c3 { left: 132px; top: 24px; }
.l2h-c4 { left: 224px; top: 140px; width: 78px; height: 96px; }
.l2h-c5 { left: 118px; top: 180px; width: 104px; height: 64px; transform-origin: 50% 50%; }
/* Ein Dokument: Blatt und Etikett bewegen sich gemeinsam. Drehpunkt = Mitte
   des verkleinerten Blatts in Akt 2. */
.l2h-d { width: 84px; height: 108px; transform-origin: 42px 32px; }
.l2h-d > * { position: absolute; }
.l2h-d .l2-paper { left: 0; top: 0; width: 84px; height: 108px; transform-origin: 50% 0; }
.l2h-d1 { left: 50px; top: 64px; }
.l2h-d2 { left: 216px; top: 64px; }
.l2h-tag { left: -38px; top: 116px; width: 160px; height: 26px; display: flex; justify-content: center; }
.l2h-etikett {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--c-surface); border: 1px solid var(--c-green);
  font-size: var(--text-sm); font-weight: 700; color: var(--c-navy-deep); white-space: nowrap;
  box-shadow: 0 4px 12px rgba(var(--c-navy-rgb), 0.12);
}
.l2h-etikett .ico { color: var(--c-green-deep); font-size: var(--text-md); }
.l2h-phone { left: 39px; top: 37px; width: 104px; height: 164px; }
.l2h-corners { left: 46px; top: 60px; width: 90px; height: 116px; }
.l2h-scanline { left: 48px; top: 62px; width: 86px; }
.l2h-flash { left: 43px; top: 41px; width: 96px; height: 156px; }
/* Hochladen: Ablagefläche, Pfeil, Ladebalken */
.l2h-zone { left: 194px; top: 50px; width: 128px; height: 160px; border: 2px dashed rgba(var(--c-navy-rgb), 0.22); border-radius: var(--radius-lg); background: rgba(var(--c-white-rgb), 0.6); }
.l2h-hoch {
  left: 308px; top: 38px; width: 28px; height: 28px; border-radius: var(--radius-circle);
  display: grid; place-items: center; font-size: var(--text-md);
  background: var(--c-green); color: var(--c-navy-deep); box-shadow: 0 2px 6px rgba(var(--c-navy-rgb), 0.18);
}
.l2h-hoch .ico { transform: rotate(180deg); }
.l2h-prog { left: 216px; top: 180px; width: 84px; height: 4px; border-radius: var(--radius-pill); background: var(--c-app-rand-stark); overflow: hidden; }
.l2h-prog-fill { display: block; height: 100%; background: var(--c-green); transform-origin: 0 50%; }
.l2h-upcap { left: 194px; top: 188px; width: 128px; text-align: center; font-size: var(--text-xs); font-weight: 600; color: var(--c-text-muted); }

/* Akt 2: Tresor mit vier Ordnern */
.l2h-vault { left: 8px; top: 118px; width: 334px; height: 154px; }
.l2h-vault .l2-vault-head { height: 36px; }
.l2h-ord {
  position: absolute; width: 155px; height: 50px; padding: 0 8px; transform-origin: 50% 50%;
  display: flex; align-items: center; gap: 6px;
  border-radius: var(--radius-md); background: rgba(var(--c-white-rgb), 0.08); border: 1px solid rgba(var(--c-white-rgb), 0.12);
}
.l2h-ord > * { position: relative; }
.l2h-ord-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.l2h-ord b { font-size: var(--text-sm); font-weight: 700; line-height: 1.2; color: var(--c-surface); white-space: nowrap; }
.l2h-ord-1 { left: 8px; top: 40px; }
.l2h-ord-2 { left: 171px; top: 40px; }
.l2h-ord-3 { left: 8px; top: 96px; }
.l2h-ord-4 { left: 171px; top: 96px; }
.l2h-ord-ico {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: var(--text-lg);
  background: rgba(var(--c-green-rgb), 0.18); color: var(--c-green-bright);
}
.l2h-ord .l2h-ord-hl {
  position: absolute; inset: -1px; border-radius: var(--radius-md); opacity: 0;
  border: 2px solid var(--c-green); background: rgba(var(--c-green-rgb), 0.16);
}
/* Zähler unter dem Namen: „3 Dokumente“ wird per Y-Wechsel zu „4 Dokumente“ */
.l2h-zahl { display: grid; overflow: hidden; font-size: var(--text-xs); font-weight: 500; line-height: 1.3; color: rgba(var(--c-white-rgb), 0.78); white-space: nowrap; }
.l2h-zahl i { grid-area: 1 / 1; font-style: normal; }
.l2h-z1-b, .l2h-z2-b { opacity: 0; }

/* Akt 3 und Standbild: Mitteilung, Frage, Antwort mit Quelle */
.l2h-note { left: 16px; top: 8px; width: 318px; height: 48px; }
.l2h-q { right: 16px; top: 66px; white-space: nowrap; }
.l2h-dots { left: 16px; top: 84px; }
.l2h-ans { left: 16px; top: 116px; width: 318px; }
.l2h-ans .l2-ans-bg { transform-origin: 50% 0; }

/* ---- Schritt 1 · Erfassen · 350 × 210 ---- */
.l2a-phone { left: 124px; top: 6px; width: 102px; height: 164px; }
.l2a-paper { left: 133px; top: 30px; width: 84px; height: 108px; }
.l2a-corners { left: 129px; top: 26px; width: 92px; height: 116px; }
.l2a-scanline { left: 131px; top: 28px; width: 88px; }
.l2a-flash { left: 128px; top: 10px; width: 94px; height: 156px; }
.l2a-ok1 { left: 206px; top: 20px; }
.l2a-zone { left: 12px; top: 8px; width: 326px; height: 96px; }
.l2a-fback { left: 40px; top: 108px; width: 96px; height: 66px; }
.l2a-ffront { left: 38px; top: 124px; width: 100px; height: 50px; }
.l2a-fcard { left: 8px; top: 116px; width: 200px; }
/* Der Zeiger fasst die Auswahl rechts neben dem Text, nie über einem Namen. */
.l2a-cursor { left: 192px; top: 148px; }
.l2a-flapo { left: 24px; top: 62px; width: 104px; height: 34px; }
.l2a-sheet { left: 36px; top: 20px; width: 80px; height: 96px; }
.l2a-env { left: 24px; top: 96px; width: 104px; height: 64px; }
.l2a-flapc { left: 24px; top: 96px; width: 104px; height: 36px; }
.l2a-sugg { left: 136px; top: 40px; width: 202px; }
.l2-tabs { left: 19px; top: 180px; width: 312px; height: 24px; }

/* ---- Schritt 2 · Einordnen · 350 × 210 ---- */
.l2b-vault { left: 8px; top: 2px; width: 334px; height: 206px; }
.l2b-vault .l2-vault-head { height: 38px; }
.l2b-row-1, .l2b-row-2, .l2b-row-3, .l2b-row-4 { left: 16px; width: 318px; height: 37px; }
.l2b-row-1 { top: 41px; }
.l2b-row-2 { top: 82px; }
.l2b-row-3 { top: 123px; }
.l2b-row-4 { top: 164px; }

/* ---- Schritt 3 · Antworten · 350 × 210 ---- */
.l2c-q { right: 16px; top: 10px; max-width: 262px; }
.l2c-dots { left: 16px; top: 76px; }
.l2c-ans { left: 16px; top: 76px; width: 318px; }
.l2c-phone { left: 57px; top: 46px; width: 236px; height: 200px; }
.l2c-offline { left: 110px; top: 8px; }
.l2c-note { left: 16px; top: 8px; width: 318px; height: 46px; }
.l2c-abos { left: 16px; top: 62px; width: 318px; }

/* =====================================================================
 * 5 · Standbild (ohne JS, reduzierte Bewegung, Poster): das Ergebnis
 * =================================================================== */
.l2-canvas .l2-f, .l2-film .l2-f { opacity: 0; }
/* Antworten: Summe ist aufgegangen (nur die letzte Zahl). */
.l2c-sum-1, .l2c-sum-2 { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .l2-sticky { transition: none; }
}