/* kv-ablauf.css — Startseite #ablauf „Leitung bis zum Angebot“ (Mockup .work/mockups/ablauf-angebot/, Fabio 23.10.). Präfix .al-
   Weißer Abschnitt wie #calc, Text links, Angebot rechts. Eine gerenderte Kältemittelleitung läuft senkrecht
   LINKS an den fünf Schritten entlang und biegt am Ende nach RECHTS in die Acrylplatte (Angebot, Pos. 3).
   Die Leitung ist EIN Bild über die Höhe des Abschnitts, 1:1 ohne Skalierung → Breiten hier in festen px:
     Desktop (≥ 1160): Feld 1080 breit, mittig (= --calc-w, wie #calc). Leitung x 8, Text ab x 56, Platte x 600–1060.
       Kopf Inhalt + 80 · Schritte 1–4 Inhalt + 64 · Schritt 5 = 496 (Überschrift, Leitung biegt bei +88 ab, darunter
       Antwort + Knopf). Platte 460 × 680 klebt rechts (sticky bottom) und landet am Ende genau dort, wo die Leitung einmündet.
     Handy/Tablet (≤ 1159): Leitung x 6 im 32-px-Rand, Text ab x 32. Kopf Inhalt + 56 · Schritte 1–4 Inhalt + 48.
       Platte 262 × 390 bei x 64 im Fluss unter der Überschrift von Schritt 5, Leitung mündet links bei Pos. 3.
     Senkrechte Länge, Schellen und Bogen setzt kv-ablauf.js passe() nach der gemessenen Lage (HTML-Werte = Desktop 1440 / Handy 390).
   Leitung schwarz isoliert, ohne Ruhephasen; Rohrschelle an jedem Schritt (steht von Anfang an, Leitung läuft durch);
   blankes Kupfer nur an der mitfahrenden Spitze (.al-spitze, von kv-ablauf.js gesetzt).
   Zustände setzt kv-ablauf.js: .al-an am Abschnitt (Bewegung an), data-k="0…6" am Feld (0 = vor Schritt 1, 1–5 = Schritt
   erreicht, 6 = Leitung in der Platte). Ohne JS / „Bewegung reduzieren“ / #ruhig: kein .al-an → Leitung ganz, alle Schritte
   voll, Platte steht an ihrem Endplatz (kein Kleben, kein Schweben).
   Schrift (Tokens kv.css): Überschrift Schritt 32 (--fs-4xl), Handy 24 · Frage 20 (--fs-2xl) halbfett, Handy 17 ·
   Antwort 17 (--fs-xl), Handy 16,5. Abstände 6 · 12 · 16 · 32 · 40 · 56 · 64 · 96. Farben Ink, Muted, Teal (nur Knopf/Link). */

@property --al-amp{syntax:'<length>';inherits:true;initial-value:0px}

#ablauf.section{overflow:clip}                         /* hidden würde sticky abschalten; clip schneidet die Leitung an der Kante */
#ablauf.section.highlight{padding:0 var(--section-px)}
.al-feld{position:relative;max-width:1080px;margin:0 auto;padding:96px 0 160px}   /* unten Platz für den Plattenschatten */

/* Kopf: Inhalt + 80 px (etwas mehr als zwischen den Schritten) */
.al-kopf{position:relative;z-index:1;margin:0 0 80px 56px}
.al-kopf .eyebrow{margin-bottom:var(--s-4)}
.al-kopf .h-section{margin:0 0 var(--s-5)}
.al-kopf .st-lede{max-width:52ch}

.al-raster{position:relative;display:grid;grid-template-columns:520px minmax(0,1fr)}
.al-schritte{list-style:none;margin:0;padding:0 0 0 56px;position:relative;z-index:1}
/* Schritte 1–4: Inhalt + 64 px Abstand. Schritt 5 fest (Leitung biegt bei +88, Platte endet an seiner Unterkante).
   Leitung/Schellen zieht kv-ablauf.js passe() an die Lage nach. */
.al-schritt{position:relative;box-sizing:border-box;padding-bottom:64px}
.al-schritt--ende{height:496px;padding-bottom:0}
.al-schritt h3{margin:0;font-size:var(--fs-4xl);font-weight:var(--fw-semibold);line-height:1.15;letter-spacing:var(--tr-snug);
 color:var(--ink);text-wrap:balance;max-width:14em}
.al-frage{margin:var(--s-4) 0 6px;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:1.35;letter-spacing:var(--tr-base);color:var(--ink)}
.al-antwort{margin:var(--s-3) 0 0;max-width:44ch;font-size:var(--fs-xl);line-height:1.6;color:var(--muted);text-wrap:pretty}
.al-frage+.al-antwort{margin-top:0}
.al-schritt .kv-knopf--text{margin-top:var(--s-4)}
.al-ende-kopf{position:relative;z-index:1;height:88px}  /* Leitung läuft bei +88 unter der Überschrift durch; über dem
                                                          weißen Bildgrund der Platte (Handy: Überschrift zweizeilig) */
.al-nach{margin-top:56px}
.al-ctas{margin-top:var(--s-8)}

/* Platte (Angebot). Desktop: eigene Spalte, klebt unten im Fenster (sticky bottom) und steht am Ende an ihrem
   Platz im Fluss = Einmündung der Leitung. Handy: zweite Fassung im Fluss in Schritt 5. */
.al-platte-spalte{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding-left:80px}
.al-platte{position:relative;width:460px;height:680px;margin:0}
.al-platte--schmal{display:none}
.al-platte-in{position:absolute;inset:0}
/* Endrender a7 (26.10., Geometrie wie Runde 6; Acrylplatte mit Beispielpreisen, reinweißer Grund 960 × 1200, dazu
   -1500/-1920 per srcset für 2× Anzeige), Anzeige-Maßstab 0,7806.
   Gemessen am Alphakanal: Mitte Pos. 3 y 433, linke Kante dort x 104,3.
   Desktop: Kante/Pos. 3 auf Box x 0 / y 272 = Kupferende x 600 / yh. Handy (Maßstab 0,4446): Box y 156,
   x 5 = Kupferende 69 (Box beginnt bei 64). Am Handy schneidet der Abschnittsrand den Schatten → rechts weich ausblenden. */
.al-platte img{position:absolute;left:-81.4px;top:-66px;width:749.4px;height:auto;max-width:none}
.al-platte--schmal img{left:-41.4px;top:-36.5px;width:426.9px;
 -webkit-mask-image:linear-gradient(to right,#000 72.5%,transparent 76%);mask-image:linear-gradient(to right,#000 72.5%,transparent 76%);
 clip-path:inset(36.5px 0 48px 0)}   /* weißer Bildgrund ragt sonst 36,5 px in die Überschrift und ~107 px unter die Box
                                        über die Antwort (lazy geladen → Text „plötzlich weg“, Fabio 25.10.) */
/* Fußnote zur Platte (Beispielpreise). Desktop unter dem Schatten links, Handy im Fluss unter der Platte. */
.al-fn{position:absolute;left:0;top:calc(100% + 64px);max-width:34ch;margin:0;font-size:var(--fs-md);line-height:var(--lh-normal);
 color:var(--muted);text-wrap:pretty}

/* Leitung: zwei Fassungen, je eine sichtbar */
.al-leitung{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible}
.al-leitung--desktop{width:1080px;height:1890px}       /* Höhe = viewBox (Desktop 1440); kv-ablauf.js passe() setzt sie je Lage */
.al-leitung--handy{display:none;width:326px;height:2160px}
.al-spitze{will-change:transform}
/* Rohrschellen: ohne JS Endlage (alle „mit Leitung“); mit JS „leer“, bis die Isolierung durch ist (.ist-durch) */
.al-s-leer{display:none}
.al-an .al-schelle:not(.ist-durch) .al-s-leer{display:inline}
.al-an .al-schelle:not(.ist-durch) .al-s-mit{display:none}

/* Sprungmarken für Screenshots (kv-ablauf.js setzt top) */
.al-zm{position:absolute;left:0;width:1px;height:1px;pointer-events:none;visibility:hidden}

/* ══ Bewegung an ══ */
.al-an .al-platte--breit{position:sticky;bottom:max(24px,calc(50vh - 360px))}
.al-an .al-schritt>*,.al-an .al-nach{transition:opacity .6s var(--ease-out)}
/* Noch nicht erreichte Schritte treten zurück (.al-noch); die Antwort unter der Platte erst nach dem Einmünden */
.al-an .al-noch>*:not(.al-platte):not(.al-ctas),.al-an .al-feld:not([data-k="6"]) .al-nach{opacity:.3}
/* Schweben: ganz ruhig, solange die Leitung noch nicht angeschlossen ist; beim Einmünden klingt es aus */
.al-an .al-platte-in{animation:alSchweben 9s ease-in-out infinite;transition:--al-amp 1.6s var(--ease-out)}
.al-an .al-feld:not([data-k="6"]) .al-platte-in{--al-amp:6px}
@keyframes alSchweben{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--al-amp) * -1))}}

/* ══ Handy + Tablet ══ */
@media (max-width:1159px){
 .al-feld{max-width:none;padding:48px 0 56px}
 .al-kopf{margin:0 0 56px 32px}
 .al-raster{grid-template-columns:minmax(0,1fr)}
 .al-schritte{padding-left:32px}
 .al-schritt{padding-bottom:48px}
 .al-schritt--ende{height:auto;padding-bottom:0}
 .al-schritt h3{font-size:var(--fs-3xl);line-height:1.2;max-width:none}
 .al-frage{margin:var(--s-3) 0 4px;font-size:var(--fs-xl)}
 .al-antwort{font-size:16.5px;line-height:1.55}
 .al-ende-kopf{height:76px}
 .al-platte-spalte{display:none}
 .al-platte--schmal{display:block;width:262px;height:auto;margin-left:32px}
 .al-nach{position:relative;z-index:1;margin-top:56px}   /* unter dem Plattenschatten (endet ≈ Box + 53), über dem Bild */
 .al-leitung--desktop{display:none}
 .al-leitung--handy{display:block}
 .al-platte--schmal .al-platte-in{position:relative;height:390px}
 .al-platte--schmal .al-fn{position:relative;top:auto;margin-top:var(--s-12)}
}
@media (max-width:640px){
 .al-ctas{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
 .al-platte-in{animation:none!important}
 .al-schritt>*,.al-nach{transition:none!important}
}