/* ==========================================================================
   lp-abschnitte.css - Uebergaenge und Animationen der Abschnitte unter dem
   Hero (seit 2026-10-09, Stil nach dem Referenzvideo, Vorschau vom Inhaber
   freigegeben). Nur die Startseite laedt diese Datei. Der Hero hat seine
   eigene Buehne (lp-hero.css, lp-hero.js).
   Alles nur mit html.ab-on (lp-abschnitte.js setzt die Klasse) und ohne
   Reduced Motion. Ohne Skript stehen alle Inhalte sofort da.
   Drei Schluessel-Ueberschriften bauen sich einmal Wort fuer Wort auf
   (#problem, #ki-offen, #warteliste). Dazu je Abschnitt genau ein Moment
   (seit Critique 2026-10-09, dritter Lauf: vorher 24 Bewegungen, Preise
   erst nach 2,6 s, Schritte in #ablauf blass bis zur Scrollposition).
   Lesetext steht immer sofort voll da:
     #ablauf      Farbband waechst vom eingerueckten Feld zur vollen Breite
     #problem     die drei Randnotizen erscheinen nacheinander
     #funktionen  Nachweis fuellt sich Zeile fuer Zeile
     #ki-offen    Farbband waechst (wie #ablauf)
     #kontrolle   Trennlinien zeichnen sich
     #preise      Zeitleiste Jetzt, Nach der Beta, Neue Konten zeichnet sich
     #faq         Fragen ruecken gestaffelt ein
     #warteliste  Tuer als Strichzeichnung oeffnet sich
   Bewegt werden transform, opacity und clip-path. Keine Endlosschleife.
   ========================================================================== */

/* Tuer im Grundzustand: offen, ohne Bewegung */
.ab-tuer{position:relative;width:116px;height:152px;margin:8px 44px 24px auto;perspective:600px}
.ab-tuer-boden{position:absolute;left:-44px;right:-44px;bottom:0;height:1.5px;background:var(--text-1)}
.ab-tuer-boden::before{content:"";position:absolute;left:44px;right:44px;top:0;height:1.5px;background:var(--surface)}
.ab-tuer-rahmen{position:absolute;inset:0 22px 0 22px;border:1.5px solid var(--text-1);border-bottom:0;background:var(--field);overflow:hidden}
.ab-tuer-rahmen svg{position:absolute;left:0;bottom:0;width:100%;height:auto}
.ab-tuer-blatt{position:absolute;inset:0 22px 0 22px;border:1.5px solid var(--text-1);background:var(--surface);transform-origin:right center;transform:rotateY(62deg)}
.ab-tuer-blatt::after{content:"";position:absolute;left:10px;top:50%;width:10px;height:3px;border:1.5px solid var(--text-1);border-radius:2px}

/* Nur am Bildschirm: gedruckt steht alles sofort da (Audit 2026-10-09) */
@media screen and (prefers-reduced-motion:no-preference){
  /* Das bisherige Einblenden (.lp-reveal, lp-motion.css) uebernehmen auf
     der Startseite die Einstiege unten */
  html.ab-on .lp-reveal{opacity:1;transform:none;transition:none}

  /* ── 1. Drei Schluessel-Ueberschriften Wort fuer Wort, einmal per Zeit ─
     Seit Critique 2026-10-09 (vierter Lauf) ab Deckkraft .6 statt .16: wer
     vor dem Ausloesen anhielt, sah die Ueberschrift blass. */
  .ab-on .ab-wort{display:inline-block;opacity:.6;transform:translateY(.42em);
    transition:opacity .5s ease calc(var(--i,0) * var(--takt,45ms)),transform .7s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * var(--takt,45ms))}
  .ab-on .ist-da .ab-wort{opacity:1;transform:none}

  /* ── 2. Farbbaender wachsen zur vollen Breite (--e 0..1) ───────────── */
  .ab-on :is(#ablauf,#ki-offen){clip-path:inset(0 calc((1 - var(--e,0)) * min(4vw,56px)) round calc((1 - var(--e,0)) * 36px))}
  .ab-on :is(#ablauf,#ki-offen)>.wrap{transform:translateY(calc((1 - var(--e,0)) * 48px))}

  /* ── 3. #problem: Randnotizen erscheinen nacheinander, der Zettel steht ─ */
  /* translate statt transform: die Notizen tragen ihre Schraeglage in transform. */
  .ab-on .zettel-notiz{opacity:0;translate:0 10px;transition:translate .7s cubic-bezier(.16,1,.3,1),opacity .5s ease}
  .ab-on .problem-bild.ist-da .zettel-notiz{opacity:1;translate:0 0}
  .ab-on .problem-bild.ist-da .zettel-notiz--1{transition-delay:.2s}
  .ab-on .problem-bild.ist-da .zettel-notiz--2{transition-delay:.4s}
  .ab-on .problem-bild.ist-da .zettel-notiz--3{transition-delay:.6s}

  /* ── 4. #ablauf: nur das Farbband (2.). Video und Schritte stehen sofort;
     vorher hellten die Schritte erst beim Scrollen auf (Deckkraft ab .25). */

  /* ── 5. #funktionen: Nachweis fuellt sich Zeile fuer Zeile, Karten stehen */
  .ab-on #funktionen .nachweis-blatt tbody tr{opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .ab-on #funktionen .fgrid.ist-da .nachweis-blatt tbody tr{opacity:1;transform:none}
  .ab-on #funktionen .fgrid.ist-da .nachweis-blatt tbody tr:nth-child(1){transition-delay:.2s}
  .ab-on #funktionen .fgrid.ist-da .nachweis-blatt tbody tr:nth-child(2){transition-delay:.35s}
  .ab-on #funktionen .fgrid.ist-da .nachweis-blatt tbody tr:nth-child(3){transition-delay:.5s}

  /* ── 6. #ki-offen: nur Farbband (2.) und Wort-Aufbau (1.), Spalten stehen */

  /* ── 7. #kontrolle: Trennlinien zeichnen sich, Text und Fakten stehen ── */
  .ab-on #kontrolle .zusage li{position:relative;border-top-color:transparent}
  .ab-on #kontrolle .zusage li:not(:first-child)::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);transform-origin:left center;transform:scaleX(0);
    transition:transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 140ms)}
  .ab-on #kontrolle .kontrolle-band.ist-da .zusage li::before{transform:scaleX(1)}

  /* ── 8. #preise: Zeitleiste zeichnet sich von links nach rechts, in
     0,75 s. Text und Preiskarte stehen sofort (vorher Karte erst nach 2,6 s). */
  .ab-on #preise .preis-weg li{position:relative;border-top-color:transparent}
  .ab-on #preise .preis-weg li::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--line-strong);transform-origin:left center;transform:scaleX(0);
    transition:transform .25s linear calc(var(--i,0) * 250ms)}
  .ab-on #preise .preis-weg li:first-child::before{background:var(--accent)}
  .ab-on #preise .preis-weg.ist-da li::before{transform:scaleX(1)}

  /* ── 9. #faq: Fragen ruecken gestaffelt ein ───────────────────────── */
  .ab-on #faq details.faq{opacity:0;transform:translateX(28px);transition:opacity .5s ease calc(var(--i,0) * 70ms),transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 70ms)}
  .ab-on #faq .split.ist-da details.faq{opacity:1;transform:none}

  /* ── 10. #warteliste: Tuer oeffnet sich nach dem Eintragen ─────────
     Seit Critique 2026-10-09 (sechster Lauf) antwortet sie auf den Erfolg
     (lp-start.js setzt .ist-gesendet) statt auf den Eintritt der Karte:
     geschlossene Beta, und wer sich eintraegt, sieht die Tuer aufgehen. */
  .ab-on .ab-tuer-blatt{transform:rotateY(0deg);transition:transform 1.2s cubic-bezier(.65,0,.35,1) .2s}
  .ab-on #warteliste .card24:has(.ist-gesendet) .ab-tuer-blatt{transform:rotateY(62deg)}
  .ab-on .ab-tuer-rahmen svg{opacity:0;transform:translateY(8px);transition:opacity .6s ease .6s,transform .8s cubic-bezier(.16,1,.3,1) .6s}
  .ab-on #warteliste .card24:has(.ist-gesendet) .ab-tuer-rahmen svg{opacity:1;transform:none}
}
@media (max-width:980px){.ab-tuer{margin:8px auto 24px}}
/* Am Handy ohne Tuer (seit Critique 2026-10-09, dritter Lauf): 208 px
   Hoehe zwischen Ueberschrift und Formular. */
@media (max-width:680px){.ab-tuer{display:none}}