{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "split-screen-sticky-seiten",
 "name": "Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)",
 "name_en": "Sticky split scroll / split-screen layout",
 "kurz": "Eine Spalte bleibt stehen, die andere scrollt vorbei; der Inhalt der stehenden Spalte wechselt synchron mit dem Block in der Bildschirmmitte.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "editorial",
  "präzise",
  "filmisch"
 ],
 "stimmung_roh": [
  "ruhig",
  "erzählend",
  "editorial",
  "strukturiert"
 ],
 "technik": [
  "css",
  "position-sticky",
  "scroll-driven-css",
  "scrolltrigger",
  "intersection-observer"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die Sektion wird in zwei Spalten geteilt, 50/50 oder 5/7 im 12er-Raster. Eine Spalte ist position: sticky und bleibt im Viewport stehen. Das ist meist ein Titel, eine Kapitelnummer, ein Bild oder ein Video. Die andere Spalte scrollt mit mehreren Inhaltsblöcken vorbei. Läuft ein Block durch die Bildschirmmitte, wechselt der Inhalt der stehenden Spalte synchron: Bild-Crossfade, Clip-Reveal, eine Zahl rollt weiter, ein Eintrag wird hervorgehoben. Am Ende der Sektion löst sich die Sticky-Spalte und scrollt mit weg.",
  "warum_es_wirkt": "Der feste Anker gibt Orientierung, während die Details vorbeiziehen. Die Synchronisation erzeugt einen Erzählrhythmus wie bei einer Präsentation: ein Gedanke, ein Bild.",
  "wann_einsetzen": "Leistungen mit drei bis sechs Punkten, Prozessschritte, Abschnitte einer Case Study (Bild steht, Text erklärt), Produktfeatures mit Screenshot, Projektlisten mit fester Vorschau.",
  "wann_nicht": "Wenn die stehende Spalte höher ist als der Viewport. Bei mobil geprägten Seiten mit sehr viel Inhalt. Wenn der Wechsel keinen inhaltlichen Bezug zum Text hat.",
  "varianten": [
   "Sticky-Titel links, Karten scrollen rechts",
   "Sticky-Medium (Bild oder Video) mit Wechsel pro Textblock",
   "Split-Screen-Hero: zwei Hälften mit unterschiedlichen Inhalten und Farben",
   "Horizontaler Split: oben steht, unten scrollt",
   "Archiv: Liste scrollt, Vorschau steht fest"
  ],
  "umsetzung": "Grid mit zwei Spalten. Sticky-Spalte: position: sticky; top: 0; height: 100svh, oder mit Abstand nach oben (top: 8em) und align-self: start. Kein overflow: hidden auf einem Vorfahren, das bricht sticky. Den aktiven Block bestimmt ein IntersectionObserver mit rootMargin '-50% 0px -50% 0px' oder eine CSS view-timeline mit timeline-scope. Medien wechseln per opacity oder clip-path. Für den festgeklebten Zustand (z. B. Schatten) gibt es seit Chrome 133 @container scroll-state(stuck: top).",
  "mobil": "Spalten stapeln. Das Sticky-Medium wird ein kleiner Sticky-Streifen oben oder ein Inline-Bild direkt über dem zugehörigen Text. Ein Sticky-Titel wird zur schmalen Leiste mit Fortschritt.",
  "reduzierte_bewegung": "Crossfade statt Clip-Reveal und Zoom. Sticky selbst ist unkritisch.",
  "barrierefreiheit": "Alle wechselnden Bilder mit eigenem alt im DOM halten, nicht per JS austauschen, oder das Bild direkt dem Text zuordnen. Der Tastaturfokus in der scrollenden Spalte muss sichtbar bleiben. Die Bildunterschrift der stehenden Spalte kann per aria-live den aktiven Abschnitt nennen."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Sticky-Offset 8em (OFF+BRAND) bzw. Header-Höhe + Zellenabstand (Vercel)",
  "sonstiges": "feste Spaltenbreite 320px (Raycast)",
  "herkunft": "beobachtet",
  "quelle": "https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/11_w9gzy6t920.css"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Vercel",
   "url": "https://vercel.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (11_w9gzy6t920.css): .intro{position:sticky;top:calc(var(--header-height) + var(--cell-padding));text-wrap:balance} – Einleitungsspalte bleibt stehen, Zellen daneben scrollen.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "OFF+BRAND",
   "url": "https://www.itsoffbrand.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (offbrand-2023.shared…css): .c.abt-sticky{position:sticky;top:8em} und .s.is-ent-client{position:sticky;top:8em}.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Raycast",
   "url": "https://www.raycast.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (18h-121dvt2r8.css): Spalte .member{position:sticky;top:var(--navbar-total-spacing);flex:0 0 320px}.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "On-Scroll Animation Ideas for Sticky Sections (Codrops)",
   "url": "https://tympanus.net/codrops/2024/01/31/on-scroll-animation-ideas-for-sticky-sections/"
  },
  {
   "titel": "CSS scroll-state queries (Chrome Developers)",
   "url": "https://developer.chrome.com/blog/css-scroll-state-queries?hl=de"
  }
 ],
 "kombinierbar_mit": [
  "case-study-geruest",
  "scrollspy-kapitelnavigation",
  "projektindex-hover-vorschau"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Drei Produktionsbelege; Awwwards-Inspirationen entfernt."
  ],
  "kategorie_alt": "Section-Layout"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Spalte bleibt stehen, die andere scrollt vorbei; der Inhalt der stehenden Spalte wechselt synchron mit dem Block in der Bildschirmmitte.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) (expo.out)",
   "variante_bild_steht": {
    "sticky": "position: sticky; top: 0; height: 100svh",
    "spalten": "grid-template-columns: 1fr 1fr",
    "sync": "IntersectionObserver rootMargin '-50% 0px -50% 0px'",
    "clip_reveal": "clip-path inset(100% 0 0 0) → inset(0) vorwärts, inset(0 0 100% 0) → inset(0) rückwärts, 1200 ms",
    "bild_scale": "1.12 → 1, 1600 ms",
    "zaehler": "Ziffer rollt translateY ±100 %, 1200 ms",
    "aktiver_block": "inaktiv opacity .26, Übergang 600 ms",
    "markierung": "Strich 26 → 44 px, 600 ms"
   },
   "variante_titel_steht": {
    "sticky": "position: sticky; top: 8em; align-self: flex-start",
    "spalte": "flex: 0 0 320px",
    "sync": "IntersectionObserver rootMargin '-50% 0px -50% 0px'",
    "index_marker": "scaleX 0 → 1, 600 ms",
    "inaktive_karte": "opacity .34 (Telefon .5), 600 ms"
   },
   "telefon": "unter 760 px gestapelt; Bild steht als Sticky-Streifen min(44svh, 78vw); Titel-Variante als Sticky-Leiste mit Fortschrittsbalken und @container scroll-state(stuck: top) für den Schatten",
   "ui_ms": 150,
   "reduziert": "Crossfade opacity 250 ms linear statt Clip und Scale, Ziffer springt",
   "variante_archiv": {
    "sticky": "position: sticky; top: 0; height: 100svh (Telefon: Streifen min(38svh, 64vw) oben)",
    "spalten": "grid-template-columns: 5fr 7fr",
    "sync": "IntersectionObserver rootMargin '-50% 0px -50% 0px' auf den Zeilen; Hover (nur Maus) und Fokus übersteuern, bis der Zeiger die Liste verlässt",
    "crossfade": "neues Bild opacity 0 → 1 über dem stehenden alten, 600 ms cubic-bezier(0.455, 0.03, 0.515, 0.955); kein Zoom, keine Verschiebung",
    "zeilen": "Farbe #6e6e6e → #141414, 200 ms",
    "schrift": "Instrument Serif clamp(24px, 2.3vw, 36px) für Titel, Fragment Mono 12px tabular-nums für Jahr, Ort, Zähler",
    "farben": "#f4f4f2 Grund, #141414 Text, #6e6e6e Meta, #e6e6e6 Bildplatz"
   }
  },
  "ausloeser": "scroll",
  "touch": "Spalten stapeln sich. Variante Bild: das Medium wird ein Sticky-Streifen oben, darunter scrollen die Texte. Variante Titel: der Titel scrollt normal weg, eine schmale Sticky-Leiste zeigt Projektname, Nummer und Fortschritt.",
  "reduziert": "Sticky bleibt. Bildwechsel als kurzer Crossfade (250 ms linear) statt Clip-Reveal und Zoom, Zähler springt ohne Rollen, Hervorhebungen in 200 ms linear. Im Archiv blendet die Vorschau in 200 ms linear.",
  "korrekturen": {
   "beschreibung": "Die Sektion wird in zwei Spalten geteilt, 50/50 oder 5/7 im 12er-Raster. Eine Spalte ist position: sticky und bleibt im Viewport stehen. Das ist meist ein Titel, eine Kapitelnummer, ein Bild oder ein Video. Die andere Spalte scrollt mit mehreren Inhaltsblöcken vorbei. Läuft ein Block durch die Bildschirmmitte, wechselt der Inhalt der stehenden Spalte synchron: Bild-Crossfade, Clip-Reveal, eine Zahl rollt weiter, ein Eintrag wird hervorgehoben. Am Ende der Sektion löst sich die Sticky-Spalte und scrollt mit weg.",
   "warum_es_wirkt": "Der feste Anker gibt Orientierung, während die Details vorbeiziehen. Die Synchronisation erzeugt einen Erzählrhythmus wie bei einer Präsentation: ein Gedanke, ein Bild.",
   "wann_einsetzen": "Leistungen mit drei bis sechs Punkten, Prozessschritte, Abschnitte einer Case Study (Bild steht, Text erklärt), Produktfeatures mit Screenshot, Projektlisten mit fester Vorschau.",
   "wann_nicht": "Wenn die stehende Spalte höher ist als der Viewport. Bei mobil geprägten Seiten mit sehr viel Inhalt. Wenn der Wechsel keinen inhaltlichen Bezug zum Text hat.",
   "varianten": [
    "Sticky-Titel links, Karten scrollen rechts",
    "Sticky-Medium (Bild oder Video) mit Wechsel pro Textblock",
    "Split-Screen-Hero: zwei Hälften mit unterschiedlichen Inhalten und Farben",
    "Horizontaler Split: oben steht, unten scrollt",
    "Archiv: Liste scrollt, Vorschau steht fest"
   ],
   "umsetzung": "Grid mit zwei Spalten. Sticky-Spalte: position: sticky; top: 0; height: 100svh, oder mit Abstand nach oben (top: 8em) und align-self: start. Kein overflow: hidden auf einem Vorfahren, das bricht sticky. Den aktiven Block bestimmt ein IntersectionObserver mit rootMargin '-50% 0px -50% 0px' oder eine CSS view-timeline mit timeline-scope. Medien wechseln per opacity oder clip-path. Für den festgeklebten Zustand (z. B. Schatten) gibt es seit Chrome 133 @container scroll-state(stuck: top).",
   "mobil": "Spalten stapeln. Das Sticky-Medium wird ein kleiner Sticky-Streifen oben oder ein Inline-Bild direkt über dem zugehörigen Text. Ein Sticky-Titel wird zur schmalen Leiste mit Fortschritt.",
   "reduzierte_bewegung": "Crossfade statt Clip-Reveal und Zoom. Sticky selbst ist unkritisch.",
   "barrierefreiheit": "Alle wechselnden Bilder mit eigenem alt im DOM halten, nicht per JS austauschen, oder das Bild direkt dem Text zuordnen. Der Tastaturfokus in der scrollenden Spalte muss sichtbar bleiben. Die Bildunterschrift der stehenden Spalte kann per aria-live den aktiven Abschnitt nennen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Studio Wendel (erfundenes Designstudio, Münster). Umschalter zwischen zwei Varianten: Bild steht (Sticky-Bühne 100svh mit Clip-Reveal, rollendem Zähler und Strichindex, Richtung je nach Scrollrichtung) und Titel steht (320-px-Spalte, top 8em, Index mit Marker). Danach ein dunkler Abspann, an dem sich die Spalte löst. Vorschau scrollt selbst von Block zu Block. Varianten 01.11.2026: Varianten nach Regel 13 (?v=bild|titel|archiv, Pult schreibt die URL); vorfuehren() scrollt nur die gewählte Variante ab. Neu: Archiv mit fester Vorschau in der Welt des Rezepts fotograf-film-bild-zuerst (erfundene Fotografin Hanne Brockmöller, Hamburg): Liste scrollt, Vorschau blendet per Opazität über. Bilder getauscht: statt Portfolio-Logos eigene Inline-SVG-Marken erfundener Kunden (Pier 9, Kornblume, Radhaus Lütke, Tomás Reiner, Bäckerei Overkamp, Lindholm PR, kio, sechs Marken auf einem Blatt), Archivbilder selbst mit Canvas gemalt (medien/split-screen-sticky-seiten-archiv-1 bis 8.jpg), weil medien/bilder.json nach 45 Minuten Warten noch nicht vorlag. Zugang 02.11.2026: --leise .58 → .64, kleine Akzent-Nummern mit --akzent-text #af4926 (4,6:1; großer Akzent bleibt #c9542c), Archiv-Grau --a-leise #8a8a8a → #6e6e6e (4,6:1), Ziffernmaske height 1lh statt 1em (bleibt bei eigenen Zeilenabständen ganz). Offen: inaktive Blöcke/Karten mit opacity .26/.34 unterschreiten 4,5:1, das Abdunkeln ist der Effekt des Musters (lesbar, sobald der Block aktiv ist).",
  "varianten": [
   {
    "id": "bild",
    "name": "Sticky-Medium mit Clip-Reveal",
    "wann": "Leistungen, Prozessschritte oder Case-Study-Kapitel mit je einem starken Bild: Studio, Hotel (Restaurant, Bar, Spa), Kampagne, Kurs-Hero. Ein Gedanke, ein Bild, die Nummer rollt mit.",
    "werte": {
     "sticky": "top 0, height 100svh, Spalten 1fr 1fr",
     "clip": "inset(100% 0 0 0) → inset(0) vorwärts, inset(0 0 100% 0) → inset(0) rückwärts, 1200 ms expo.out",
     "bild": "scale 1.12 → 1, 1600 ms",
     "zaehler": "Ziffer rollt ±100 %, 1200 ms",
     "inaktiv": "opacity .26, 600 ms",
     "telefon": "Sticky-Streifen min(44svh, 78vw), Motiv ganz sichtbar"
    }
   },
   {
    "id": "titel",
    "name": "Sticky-Titel und Karten",
    "wann": "Projektlisten, Funktionen in Kapiteln, Karriere oder Produktdetail mit Kaufbox: Titel, Index oder Kaufbox bleiben stehen, Karten oder Bilder scrollen vorbei. SaaS, Kanzlei, D2C, Mode.",
    "werte": {
     "sticky": "top 8em, align-self: flex-start, Spalte flex: 0 0 320px",
     "index": "Marker scaleX 0 → 1, 600 ms expo.out",
     "inaktiv": "Karte opacity .34 (Telefon .5)",
     "telefon": "Sticky-Leiste mit Fortschrittsbalken, Schatten über @container scroll-state(stuck: top)"
    }
   },
   {
    "id": "archiv",
    "name": "Archiv mit fester Vorschau (Crossfade)",
    "wann": "Lange Listen mit je einem Bild: Fotografen- oder Architekturarchiv, Immobilien-Bestand, Speisekarte mit Gerichtfotos, Pressespiegel. Die Liste ist der Inhalt, die Vorschau steht fest und blendet nur über.",
    "werte": {
     "sticky": "top 0, height 100svh, Spalten 5fr 7fr",
     "sync": "Zeile in der Bildschirmmitte oder Hover/Fokus",
     "crossfade": "opacity 0 → 1, 600 ms cubic-bezier(0.455, 0.03, 0.515, 0.955) (Rezeptkurve fotograf-film-bild-zuerst), altes Bild bleibt darunter stehen",
     "welt": "Fotografin, Instrument Serif + Fragment Mono, #f4f4f2",
     "telefon": "Vorschau als Streifen oben, Bild ungeschnitten (contain)",
     "vorfuehrung": "Selbst-Scroll Zeile für Zeile, Fahrt 700 ms, Halt 1100 ms"
    }
   }
  ]
 }
}