Pinned-Sequenz `pinned-sequence`

Der Scrollytelling-Baustein: ein 100svh-Panel pinnt beim Erreichen, 2–4 Steps wechseln IN der Section, während die Seite durch eine Steps×100svh-Strecke scrollt. Bilder crossfaden, Copy slidet, rein CSS-scroll-getrieben (kein Framework, kein Autoplay). Ohne Scroll-Driven-Support und unter Reduced Motion: normal gestapelte, voll lesbare Steps. Nie oberhalb des Folds einsetzen (kein LCP-Kandidat). Varianten: tone light/dark,progress, Steps ohne Bild-Slot bekommen die Platzhalter-Fläche mit Ghost-Ziffer.

Auffüll-Section, damit die Sequenz unterhalb des Folds startet.

Variante: 3 Foto-Steps · value-Displayzahlen ·progress (Default) · tone="light"

240

Projekte im Bestand

Jedes davon dokumentiert, viele seit Jahrzehnten in Pflege.

Gewerke unter einem Dach

Von der Planung bis zur Endmontage, ohne Schnittstellenverlust.

Jahre Werkstatt-Tradition

Handwerk, das den nächsten Auftrag ernster nimmt als den letzten.

Variante: simulierter Sticky-Site-Header, 56 px hoch. Der Wrapper setzt --pin-offset: 3.5rem: das Panel pinnt unterhalb der Leiste (Höhe 100svh minus Offset), die Step-Köpfe bleiben sichtbar statt unter dem Header zu verschwinden. Ohne den Token bleibt alles beim alten Verhalten (Default 0).

Simulierter Sticky-Headerbleibt beim Scrollen oben stehen, wie auf einer Kundenseite

Pinnt unter der Leiste

Das Panel beginnt exakt an der Unterkante des Headers.

Titel bleiben lesbar

Kein Step-Kopf verschwindet mehr hinter der Navigation.

Timeline bleibt synchron

Der Step-Wechsel folgt weiter exakt der Pin-Strecke.

Variante: tone="dark" · 2 Steps ohne Bild-Slot: die Platzhalter-Fläche (Primary-Band + Ghost-Ziffer) statt leerem Loch · ohne progress

Beratung, die zuhört

Erst das Aufmaß, dann das Angebot. Festpreis inklusive.

Montage, die hält

Eigene Monteure, keine Subvergabe, saubere Übergabe.

Pinned-Sequenz pinned-sequence