/* ══ lueftungstool.com: Abspann „Das fertige Protokoll fliegt ein“ (Website-Paket 09.10.2026, Baustein 55) ══════
   Grundlage: Richtung B vom 08.10.2026 (feinschliff-20261008/abspann-b-tool/site/assets/abspann.css), dazu der
   Einlauf der Rahmenecken aus Richtung A (feinschliff-20261008/abspann-a-kinetik). Ohne Dauerbewegung, ohne
   Laufband, ohne Zeitcode, ohne wandernden Lichtschein: alles laeuft EINMAL, danach Ruhe.
   Ergaenzt app.css und motion.css, aendert sie nicht (wird nach beiden geladen). Gilt nur fuer section.final.final--ab.
   Ablauf (abspann.js setzt nur Klassen, alle Zeiten stehen hier):
     .ab-rahmen  Abschnitt zu >= 30 % im Bild: die vier Rahmenecken fahren von aussen ein (ohne Ueberschwingen),
                 die Beschriftung („Protokoll vom …“, „Ende des Protokolls · Seite …“, „Stand …“) gleitet nach.
     .ab-an      Buehne zu >= 60 % im Bild: drei echte PDF-Seiten aus dem Tool legen sich gestaffelt auf den
                 Tisch, die Zeilen darunter erscheinen mit „ihrer“ Seite, dann der Stempel „PDF fertig“.
     .ab-los-an  Hauptknopf im Bild: er fuellt sich einmal von links mit der Markenfarbe (Motiv der
                 Fortschrittslinie) und ist danach der Primaerknopf.
   Leitplanken:
   - Grundregeln = Endzustand (ohne Skript, bei reduzierter Bewegung, im Druck, Abschnitt mit Sprung schon im
     Bild): Blaetter liegen gefaechert, Zeilen und Stempel stehen, Ecken sitzen, Knopf in Markenfarbe.
   - Versteckt wird nur unter .ab-rwarte/.ab-warte/.ab-lwarte (setzt abspann.js nur, wenn der jeweilige Teil beim
     Laden NICHT im Bild ist) und nur im Block (prefers-reduced-motion:no-preference).
   - Animiert werden nur translate/rotate/scale/transform und opacity; Ausnahme: das einmalige Zeichnen des Hakens
     (stroke-dashoffset, 18 px). Keine Endlos-Animation, kein will-change.
   - CLS 0: Buehne mit festem Seitenverhaeltnis, Blaetter absolut, width/height am <img>.
   - Keine Leuchtschatten, keine Versal-Sperrschrift (die gibt es nur in der Rahmen-Beschriftung .reel*).
   - CSP: keine Inline-Stile; Verlaeufe nur hier. Die Bilder sind dieselben Dateien wie im Abschnitt
     „So sieht Ihr Protokoll aus“ (gleiche URL mit ?v=4, meist schon im Cache).
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
.final--ab{--ab-ease:cubic-bezier(.16,1,.3,1);}

/* Licht hinter dem Stapel statt oben mittig (steht, wandert nicht) */
.final--ab::before{
  background-image:radial-gradient(ellipse 34% 58% at 76% 50%,rgba(0,180,216,.18),transparent 70%),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 75% 95% at 62% 50%,#000 30%,transparent 82%);
  mask-image:radial-gradient(ellipse 75% 95% at 62% 50%,#000 30%,transparent 82%);}

/* ── Raster: Text links, Buehne rechts ── */
.final__in--ab{max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:center;text-align:left;}
.final__in--ab h2{text-wrap:balance;}
.final__in--ab .lead{max-width:500px;text-wrap:pretty;}
.final__in--ab .cta{justify-content:flex-start;}

/* Zusagen unter den Knoepfen (Gegenstueck zu den Haken im Hero) */
.ab-zusage{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14px;line-height:1.4;color:#9AA5AE;}
.ab-zusage li{display:inline-flex;align-items:center;gap:8px;}
.ab-zusage .i{width:16px;height:16px;color:var(--brand);stroke-width:2.2;}

/* Hauptknopf: Markenflaeche (#00B4D8, dunkle Schrift 7,6:1) als eigene Ebene, damit sie sich einmal von links
   fuellen kann. Darunter bleibt .btn--light (weiss), auch der Zwischenzustand ist lesbar.
   border:0, sonst schaut am Rand 1 px vom weissen Grund des .btn--light unter der Flaeche hervor. */
.ab-los{isolation:isolate;overflow:hidden;border:0;color:var(--on-brand);}
.ab-los::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--brand);transform-origin:0 50%;transition:background .15s;}
.ab-los:hover{color:var(--on-brand);}
.ab-los:hover::before{background:var(--brand-hover);}

/* ── Buehne: Lichttisch mit drei Seiten ── */
.ab-bild{margin:0;}
.ab-tisch{position:relative;max-width:520px;margin:0 auto;aspect-ratio:13/10;}
/* Tischkante: feine Linie wie die Fortschrittslinie des Rahmens */
.ab-tisch::after{content:'';position:absolute;left:6%;right:6%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,180,216,.55) 30%,rgba(0,180,216,.55) 70%,transparent);transform-origin:50% 50%;}
.ab-blatt{position:absolute;left:50%;top:47%;width:44%;height:auto;max-width:none;margin:0;border-radius:3px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 24px 44px -16px rgba(0,0,0,.7);
  translate:calc(-50% + var(--x)) calc(-50% + var(--y));rotate:var(--r);}
/* Lage je Seite in Prozent der eigenen Breite/Hoehe, skaliert mit der Buehne */
.ab-blatt--1{--x:-54%;--y:-1%;--r:-7deg;}
.ab-blatt--2{--x:0%;--y:-5%;--r:2.5deg;}
.ab-blatt--3{--x:54%;--y:3%;--r:-1.5deg;}

/* Stempel auf der vorderen Seite */
.ab-stempel{position:absolute;right:1%;bottom:11%;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px 9px 11px;border-radius:999px;background:var(--brand);color:var(--on-brand);
  font:600 14.5px/1 var(--f-sans);white-space:nowrap;box-shadow:0 12px 26px -10px rgba(0,0,0,.75);}
.ab-stempel svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* Zeilen unter dem Tisch: Dokument rechtsbuendig | Beschreibung linksbuendig */
.ab-abspann{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:5px;max-width:440px;margin:26px auto 0;font-size:14px;line-height:1.35;}
.ab-zeile{display:contents;}
.ab-zeile b{grid-column:1;text-align:right;font-weight:600;color:#fff;}
.ab-zeile span{grid-column:2;text-align:left;color:#9AA5AE;}

/* ── Responsiv ── */
@media (max-width:1060px){
  .final__in--ab{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:40px;}
  .final__in--ab .final__text{max-width:640px;}
  .final__in--ab .lead{margin-left:auto;margin-right:auto;}
  .final__in--ab .cta,.ab-zusage{justify-content:center;}
  .ab-bild{order:-1;width:100%;max-width:520px;}
  .final--ab::before{background-image:radial-gradient(ellipse 55% 40% at 50% 22%,rgba(0,180,216,.18),transparent 70%),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 25%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 25%,#000 30%,transparent 80%);}
}
@media (max-width:600px){
  .final__in--ab{gap:32px;}
  .ab-stempel{font-size:13px;padding:7px 12px 7px 9px;gap:6px;bottom:9%;}
  .ab-stempel svg{width:15px;height:15px;}
  .ab-abspann{font-size:13px;column-gap:12px;margin-top:20px;}
  .ab-zusage{gap:6px 16px;font-size:13.5px;}
}

/* ══ Bewegung: nur, wenn das System sie nicht abbestellt hat. Alles einmalig, danach Ruhe. ═══════════════════ */
@media screen and (prefers-reduced-motion:no-preference){
  /* Seiten fliegen von rechts unten ein und setzen sich (Zielwerte = Grundregeln oben) */
  @keyframes ab-ein{
    from{opacity:0;translate:calc(-50% + var(--x) + 64%) calc(-50% + var(--y) + 20%);rotate:calc(var(--r) + 13deg);scale:1.07;}
    30%{opacity:1;}
  }
  @keyframes ab-auf{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  @keyframes ab-in{from{opacity:0;}to{opacity:1;}}
  @keyframes ab-stempel{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:none;}}
  @keyframes ab-haken{from{stroke-dasharray:1 2;stroke-dashoffset:1.05;}to{stroke-dasharray:1 2;stroke-dashoffset:0;}}
  @keyframes ab-kante{from{opacity:0;transform:scaleX(.2);}to{opacity:1;transform:none;}}
  @keyframes ab-fuell{from{transform:scaleX(0);}to{transform:none;}}

  /* 1. Rahmen (aus Richtung A): Ecken fahren von aussen ein (64/40 px, ohne Ueberschwingen), danach gleitet die
        Beschriftung nach (links von links, rechts von rechts). .final hat overflow:hidden: Die Ecken kommen von
        ausserhalb des Bandes. */
  .reel--end .reel__c--tl{--ex:-64px;--ey:-40px;}
  .reel--end .reel__c--tr{--ex:64px;--ey:-40px;}
  .reel--end .reel__c--bl{--ex:-64px;--ey:40px;}
  .reel--end .reel__c--br{--ex:64px;--ey:40px;}
  .final--ab.ab-rwarte .reel--end .reel__c{transition:opacity .35s ease,transform .95s var(--ab-ease);}
  .final--ab.ab-rwarte:not(.ab-rahmen) .reel--end .reel__c{opacity:0;transform:translate(var(--ex),var(--ey));}
  .final--ab.ab-rwarte .reel--end .reel__lab{transition:opacity .5s ease,transform .8s var(--ab-ease);}
  .final--ab.ab-rwarte:not(.ab-rahmen) .reel--end .reel__lab{opacity:0;transform:translateX(-14px);}
  .final--ab.ab-rwarte:not(.ab-rahmen) .reel--end .reel__lab--tr{transform:translateX(14px);}
  .final--ab.ab-rwarte .reel--end .reel__lab--tl{transition-delay:.4s;}
  .final--ab.ab-rwarte .reel--end .reel__lab--tr{transition-delay:.5s;}
  .final--ab.ab-rwarte .reel--end .reel__lab--bl{transition-delay:.6s;}

  /* 2. Buehne: Startzustand nur, wenn sie beim Laden ausserhalb des Bildes lag */
  .final--ab.ab-warte:not(.ab-an) .ab-blatt,.final--ab.ab-warte:not(.ab-an) .ab-stempel,
  .final--ab.ab-warte:not(.ab-an) .ab-zeile b,.final--ab.ab-warte:not(.ab-an) .ab-zeile span,
  .final--ab.ab-warte:not(.ab-an) .ab-tisch::after{opacity:0;}
  .final--ab.ab-an .ab-tisch::after{animation:ab-kante .7s var(--ab-ease) both;}
  .final--ab.ab-an .ab-blatt{animation:ab-ein .95s var(--ab-ease) backwards;}
  .final--ab.ab-an .ab-blatt--2{animation-delay:.17s;}
  .final--ab.ab-an .ab-blatt--3{animation-delay:.34s;}
  /* Zeile erscheint, waehrend „ihre“ Seite aufsetzt */
  .final--ab.ab-an .ab-zeile b,.final--ab.ab-an .ab-zeile span{animation:ab-auf .5s var(--mo-ease,ease) .5s backwards;}
  .final--ab.ab-an .ab-zeile:nth-child(2) b,.final--ab.ab-an .ab-zeile:nth-child(2) span{animation-delay:.67s;}
  .final--ab.ab-an .ab-zeile:nth-child(3) b,.final--ab.ab-an .ab-zeile:nth-child(3) span{animation-delay:.84s;}
  .final--ab.ab-an .ab-zeile span{animation-name:ab-in;}
  .final--ab.ab-an .ab-stempel{transform-origin:85% 50%;animation:ab-stempel .5s var(--mo-snap,ease-out) 1.12s backwards;}
  .final--ab.ab-an .ab-stempel path{animation:ab-haken .4s var(--mo-ease,ease) 1.34s backwards;}

  /* 3. Knopf fuellt sich einmal; Verzoegerung setzt abspann.js (1,45 s ab .ab-an, mind. 0,15 s, wenn der Knopf
        spaeter ins Bild kommt). Ist er beim Laden schon im Bild, steht er sofort in der Markenfarbe. */
  .final--ab.ab-lwarte:not(.ab-los-an) .ab-los::before{transform:scaleX(0);}
  .final--ab.ab-los-an .ab-los::before{animation:ab-fuell .75s cubic-bezier(.65,0,.35,1) var(--ab-los-delay,.15s) backwards;}

  /* Maus ueber dem Stapel: Seiten faechern sich etwas weiter auf (nur als Antwort auf die Maus, nicht auf
     Touch-Geraeten; keine Bewegung von selbst) */
  .ab-blatt{transition:translate .5s var(--mo-ease,ease),rotate .5s var(--mo-ease,ease);}
  @media (hover:hover) and (pointer:fine){
    .ab-bild:hover .ab-blatt--1{--x:-62%;--y:-2%;--r:-9.5deg;}
    .ab-bild:hover .ab-blatt--2{--y:-8%;--r:3.5deg;}
    .ab-bild:hover .ab-blatt--3{--x:62%;--y:4%;--r:-.5deg;}
  }

  /* Schwache Geraete (motion.js setzt html.mo-schwach): kuerzer, ohne Haken-Zeichnen und Tischkante,
     Rahmenecken auf kurzem Weg */
  .mo-schwach .final--ab.ab-an .ab-blatt{animation-duration:.6s;}
  .mo-schwach .final--ab.ab-an .ab-stempel path,.mo-schwach .final--ab.ab-an .ab-tisch::after{animation:none;}
  .mo-schwach .final--ab.ab-rwarte .reel--end .reel__c{transition-duration:.25s,.6s;}
}