{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "theme-farbwechsel-scroll",
 "name": "Farb-/Theme-Wechsel beim Scrollen",
 "name_en": "Scroll-based background / theme color change",
 "kurz": "Der ganze Raum färbt sich mit jedem Kapitel um: hell für die Fotoserie, dunkel für den Film. Kapitel ohne Trennlinien.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "filmisch",
  "verspielt",
  "laut",
  "warm"
 ],
 "stimmung_roh": [
  "warm",
  "erzählerisch",
  "markenstark",
  "verspielt"
 ],
 "technik": [
  "gsap",
  "scrolltrigger",
  "css",
  "scroll-driven-css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Jede Section trägt ihr Farbpaar, etwa data-bg und data-fg. 2) Erreicht eine Section die Mitte des Viewports, wechseln Hintergrund- und Textfarbe der ganzen Seite: weich in 400 bis 800 ms oder direkt an den Scroll gekoppelt. 3) Kopf, Logo und Bedienelemente färben sich mit. Es gibt keine harte Kante zwischen den Sections, der Raum färbt sich um.",
  "warum_es_wirkt": "Kapitel und Stimmungswechsel entstehen ohne Trennlinien. Die Seite wirkt wie eine durchgehende Bühne, auf der das Licht wechselt.",
  "wann_einsetzen": "Portfolios mit eigener Farbe pro Projekt, Storytelling, Marken mit starker Palette. Bei Fotografie und Film: hell für Fotoserien, dunkel für Filme.",
  "wann_nicht": "Bei Inhalten, die schnell gescannt werden. Wenn Zwischenzustände unter 4,5 : 1 Kontrast fallen und lange stehen bleiben. Nicht an jedem kleinen Block, sonst wirkt es hektisch.",
  "varianten": [
   "Schwelle: Wechsel per IntersectionObserver oder ScrollTrigger, zeitbasiert mit Transition",
   "Gekoppelt: Fläche mischt zwischen zwei Farben, während die Grenze durch den Viewport wandert",
   "Kopf invertiert sich per mix-blend-mode: difference statt mitzufärben",
   "Rein CSS: scroll(root)- oder view()-Timeline mit Farbkeyframes",
   "Farbe aus dem Bild: das aktuelle Projekt liefert seinen Ton aus den Daten",
   "Tageslauf: drei Lichtstimmungen Tag, Abend, Nacht nur in einem Erzähl-Kapitel; davor und danach steht die Seite auf dem hellen Grundton (Demo-Variante tageslauf)"
  ],
  "umsetzung": "Farben als Custom Properties auf :root, registriert mit @property --bg { syntax: '<color>'; inherits: true; initial-value: #fff }, damit sie sich überblenden lassen. Dann reicht html { background: var(--bg); color: var(--fg); transition: --bg .6s cubic-bezier(.33,1,.68,1), --fg .6s cubic-bezier(.33,1,.68,1) }. Auslöser ohne Bibliothek: IntersectionObserver mit rootMargin '-50% 0px -50% 0px' setzt beim Eintritt die Properties der Section. Mit GSAP: ScrollTrigger.create({ trigger: s, start: 'top 50%', end: 'bottom 50%', onToggle: self => self.isActive && gsap.to(root, { '--bg': s.dataset.bg, '--fg': s.dataset.fg, duration: .6, ease: 'power2.out' }) }). Gekoppelt: Fortschritt der Grenze berechnen und die Fläche in OKLab mischen; den Text nicht mitmischen, sondern zum besseren Kontrast umschalten. Abgeleitete Töne per color-mix(in oklab, var(--fg) 64%, var(--bg)). Wechsel nur an Kapitelgrenzen, Farbpaare vorab auf Kontrast prüfen, meta theme-color mitziehen. Werkbilder nie mittönen.",
  "mobil": "Unverändert, Scroll ist die Geste. Der Wechsel funktioniert auch einspaltig.",
  "reduzierte_bewegung": "Ein Farbwechsel ist keine Bewegung und darf bleiben. Dauer auf etwa 200 ms kürzen oder sofort wechseln.",
  "barrierefreiheit": "Jedes Farbpaar erreicht mindestens 4,5 : 1. Zwischenzustände kurz halten: Text am Kipppunkt umschalten statt mitzumischen. Informationen nie nur über Farbe vermitteln, das Kapitel steht zusätzlich als Text da."
 },
 "messwerte": {
  "easing": "power2.out",
  "dauer_ms": "400–800",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Schwelle: Section-Oberkante bei 50 % Viewport",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.33,
   1,
   0.68,
   1
  ],
  "css": "cubic-bezier(0.33, 1, 0.68, 1)",
  "name": "power2.out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "Lando Norris",
   "url": "https://landonorris.com/",
   "auszeichnung": "Awwwards SOTD 17.11.2025",
   "beobachtung": "Live geprüft (HTML): Sections tragen data-gl-change-from=\"dark-green, dark-green-tint-1\", data-gl-change-to=\"white, dark-green-tint-1-low\", data-h-color-from/to und data-gl-change-track – Farbwechsel scrollgesteuert auch in der WebGL-Ebene.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "GSAP ScrollTrigger (onToggle, isActive)",
   "url": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/"
  }
 ],
 "kombinierbar_mit": [
  "section-overlap-uebergang",
  "scroll-word-highlight",
  "hide-on-scroll-header"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Gleiche Seite jetzt live geprüft (HTML-Attribute)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der ganze Raum färbt sich mit jedem Kapitel um: hell für die Fotoserie, dunkel für den Film. Kapitel ohne Trennlinien.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "Schwelle: power2.out = cubic-bezier(0.33, 1, 0.68, 1) · Gekoppelt: linear am Scroll, Mischung mit smoothstep p²(3−2p)",
   "dauer_ms": "Schwelle: 600 (--grund und --text gleichzeitig) · Gekoppelt: Text 150 linear · reduziert: 200 linear",
   "schwelle": "Kapitel wird aktiv, wenn es die Viewport-Mitte überquert (IntersectionObserver rootMargin '-50% 0px -50% 0px')",
   "zone_gekoppelt": "Grenze zwischen zwei Kapiteln wandert von 70 % auf 30 % der Viewport-Höhe; Fläche mischt in OKLab",
   "text_gekoppelt": "Text wird nicht gemischt: der Textton mit dem höheren Kontrast zur aktuellen Fläche gewinnt",
   "properties": "@property --grund / --text { syntax: '<color>'; inherits: true } auf :root; --leise = color-mix(in oklab, var(--text) 64%, var(--grund)); --linie = 16 %",
   "farben_neutral": "Auswahl #f4f4f2/#141414 · Fulda #e6e6e6/#141414 · Film #0e0e0e/#f2f2f2 · Wald #d6d6d3/#141414 · Anfrage #f4f4f2/#141414",
   "farben_aus_dem_bild": "Fulda #d8dfe1/#141414 · Film #1a120c/#f4ece2 · Wald #1f251d/#e8eae1 · Anfrage #ece6dc/#1a1714",
   "kontrast": "alle Endpaare 12,6 bis 17,2 : 1; Zwischenstand gekoppelt bei 50 % rund 4,2 : 1 (wird als unter AA angezeigt)",
   "mitgefaerbt": "Kopf mit Fläche, Anfrage-Pille invertiert, Linien, Meta-Text, meta theme-color",
   "vorfuehrung": "1300 ms verweilen, 1100 ms Fahrt (easeInOutQuad) zum nächsten Kapitel; jede Runde wechseln die Töne Neutral/Aus dem Bild"
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Verhalten wie am Desktop (Scroll ist die Geste). Kapitel stapeln sich einspaltig; die Steuerung sitzt kompakt unten, Schalter 32 px hoch. Variante tageslauf: wie die Grundvariante, Kapitel einspaltig, Wunschdatum-Felder untereinander.",
  "reduziert": "Der Farbwechsel bleibt, weil er Orientierung gibt, läuft aber in 200 ms linear statt 600 ms. Ankerlinks springen ohne weiches Scrollen, die Vorführung springt von Kapitel zu Kapitel statt zu fahren. Variante tageslauf: Farbwechsel 200 ms linear statt 725 ms, auch hier ohne Zwischenstand unter 4,5 : 1.",
  "korrekturen": {
   "beschreibung": "1) Jede Section trägt ihr Farbpaar, etwa data-bg und data-fg. 2) Erreicht eine Section die Mitte des Viewports, wechseln Hintergrund- und Textfarbe der ganzen Seite: weich in 400 bis 800 ms oder direkt an den Scroll gekoppelt. 3) Kopf, Logo und Bedienelemente färben sich mit. Es gibt keine harte Kante zwischen den Sections, der Raum färbt sich um.",
   "warum_es_wirkt": "Kapitel und Stimmungswechsel entstehen ohne Trennlinien. Die Seite wirkt wie eine durchgehende Bühne, auf der das Licht wechselt.",
   "wann_einsetzen": "Portfolios mit eigener Farbe pro Projekt, Storytelling, Marken mit starker Palette. Bei Fotografie und Film: hell für Fotoserien, dunkel für Filme.",
   "wann_nicht": "Bei Inhalten, die schnell gescannt werden. Wenn Zwischenzustände unter 4,5 : 1 Kontrast fallen und lange stehen bleiben. Nicht an jedem kleinen Block, sonst wirkt es hektisch.",
   "varianten": [
    "Schwelle: Wechsel per IntersectionObserver oder ScrollTrigger, zeitbasiert mit Transition",
    "Gekoppelt: Fläche mischt zwischen zwei Farben, während die Grenze durch den Viewport wandert",
    "Kopf invertiert sich per mix-blend-mode: difference statt mitzufärben",
    "Rein CSS: scroll(root)- oder view()-Timeline mit Farbkeyframes",
    "Farbe aus dem Bild: das aktuelle Projekt liefert seinen Ton aus den Daten",
    "Tageslauf: drei Lichtstimmungen Tag, Abend, Nacht nur in einem Erzähl-Kapitel; davor und danach steht die Seite auf dem hellen Grundton (Demo-Variante tageslauf)"
   ],
   "umsetzung": "Farben als Custom Properties auf :root, registriert mit @property --bg { syntax: '<color>'; inherits: true; initial-value: #fff }, damit sie sich überblenden lassen. Dann reicht html { background: var(--bg); color: var(--fg); transition: --bg .6s cubic-bezier(.33,1,.68,1), --fg .6s cubic-bezier(.33,1,.68,1) }. Auslöser ohne Bibliothek: IntersectionObserver mit rootMargin '-50% 0px -50% 0px' setzt beim Eintritt die Properties der Section. Mit GSAP: ScrollTrigger.create({ trigger: s, start: 'top 50%', end: 'bottom 50%', onToggle: self => self.isActive && gsap.to(root, { '--bg': s.dataset.bg, '--fg': s.dataset.fg, duration: .6, ease: 'power2.out' }) }). Gekoppelt: Fortschritt der Grenze berechnen und die Fläche in OKLab mischen; den Text nicht mitmischen, sondern zum besseren Kontrast umschalten. Abgeleitete Töne per color-mix(in oklab, var(--fg) 64%, var(--bg)). Wechsel nur an Kapitelgrenzen, Farbpaare vorab auf Kontrast prüfen, meta theme-color mitziehen. Werkbilder nie mittönen.",
   "mobil": "Unverändert, Scroll ist die Geste. Der Wechsel funktioniert auch einspaltig.",
   "reduzierte_bewegung": "Ein Farbwechsel ist keine Bewegung und darf bleiben. Dauer auf etwa 200 ms kürzen oder sofort wechseln.",
   "barrierefreiheit": "Jedes Farbpaar erreicht mindestens 4,5 : 1. Zwischenzustände kurz halten: Text am Kipppunkt umschalten statt mitzumischen. Informationen nie nur über Farbe vermitteln, das Kapitel steht zusätzlich als Text da."
  },
  "geprueft": "02.11.2026",
  "notiz": "Rezept fotograf-film-bild-zuerst: erfundene Fotografin und Filmemacherin Lene Dörnberg aus Kassel (Fulda bei Wolfsanger, Kiosk Holländische Straße, Reinhardswald). Fünf Kapitel als Raum mit eigenem Farbpaar; die Werkbilder sind eigene SVG-Motive und werden nie getönt, nur der Raum drumherum. Umschalter Übergang (Schwelle, Gekoppelt) und Töne (Neutral, Aus dem Bild). Die Werte-Anzeige zeigt live Fläche, Text und Kontrast, im gekoppelten Modus auch den Zwischenstand unter AA. Variante mix-blend-mode und reine CSS-Timeline nicht gebaut. AD-Review 01.11.2026: Note 4 Varianten 02.11.2026: Regel 13 (?v=basis|tageslauf, Zeile „Variante“ im Pult schreibt die URL). basis unverändert. tageslauf für das Rezept eventlocation-hochzeit (erfundenes Gut Wendhagen bei Gadebusch): Hero mit Wunschdatum und freien Samstagen auf Kalk, Kapitel „Ein Tag bei uns“ mit 13:30 Trauung unter der Linde (Tag), 18:30 Essen in der Scheune (Abend), 22:00 Tanz in der Tenne (Nacht), danach Räume mit Kapazitäten wieder auf Kalk. Drei eigene SVG-Bilder, nie getönt. Der Übergang läuft per Skript statt per CSS-Transition, damit der Text am Kipppunkt umschaltet und kein Zwischenstand unter 4,5 : 1 fällt.",
  "varianten": [
   {
    "id": "basis",
    "name": "Fotografie und Film: Schwelle oder gekoppelt",
    "knopf": "Foto & Film",
    "wann": "Portfolio mit eigener Farbe je Projekt, hell für Fotoserien, dunkel für Filme; jedes Kapitel der Seite trägt sein Farbpaar.",
    "werte": {
     "uebergang": "Schwelle 600 ms cubic-bezier(0.33, 1, 0.68, 1) über @property --grund/--text; Gekoppelt linear am Scroll, Fläche in OKLab mit smoothstep",
     "farben": "Auswahl #f4f4f2/#141414 · Fulda #e6e6e6/#141414 · Film #0e0e0e/#f2f2f2 · Wald #d6d6d3/#141414 · Anfrage #f4f4f2/#141414",
     "schrift": "Instrument Serif, Instrument Sans, Fragment Mono",
     "rezept": "fotograf-film-bild-zuerst"
    }
   },
   {
    "id": "tageslauf",
    "name": "Tageslauf: Tag, Abend und Nacht in einem Kapitel",
    "knopf": "Tageslauf",
    "wann": "Eventlocation, Hochzeitslocation, Gutshof, Restaurant mit Abendbetrieb: das Kapitel „Ein Tag bei uns“ färbt sich vom Mittag bis in die Nacht. Räume, Preise, Termine und Anfrage stehen davor und danach auf dem hellen Grund.",
    "werte": {
     "stimmungen": "Tag #f5f0e6 / #1d1a17 (15,3 : 1) · Abend #e9dcc8 / #1d1a17 (12,8 : 1) · Nacht #15171f / #f2ece2 (15,2 : 1); Willkommen und Räume = Tag (Kalk)",
     "nebentoene": "Sekundärtext Tag #5c574e (6,3 : 1), Abend #524c43 (6,3 : 1), Nacht #b3aa9c (7,8 : 1); Linien #d8cfc0 / #cdbea6 / #343745; Messing #8c6a3c / #7a5a30 / #c9a66b",
     "schwelle": "IntersectionObserver rootMargin '-50% 0px -50% 0px' auf fünf Stationen (Willkommen, Tag, Abend, Nacht, Räume)",
     "uebergang": "Fläche per Skript in OKLab gemischt, 725 ms cubic-bezier(0.625, 0.05, 0, 1) (token-studio-signatur); die CSS-Überblendung der Grundvariante ist aus",
     "kipppunkt": "Text, Sekundärtext, Linien und Messing kommen als Satz aus der Stimmung mit dem höheren Kontrast zur aktuellen Fläche; den Mischbereich, in dem keiner der beiden Texttöne 4,5 : 1 erreicht (Abend → Nacht etwa 42 bis 53 %, Nacht → Kalk 43 bis 53 %), überspringt die Fläche. Im Browser gemessen: kleinster Zwischenstand 4,51 : 1",
     "signal": "Mohnrot #c43b2b mit weißer Schrift (5,2 : 1) auf allen drei Gründen, Hover #a8331f",
     "mitgefaerbt": "Kopf, Stand-Anzeige, Pult, meta theme-color; Bilder nie",
     "schrift": "Imbue 300, h1 clamp(3rem, 1.6rem + 6vw, 7.5rem), Zeilenhöhe .95; Uhrzeiten Imbue 300 clamp(4.5rem, 2.8rem + 6vw, 9rem); Archivo 17 px, Labels wdth 112, 600, versal, +0.08em; Tabelle wdth 87 mit Tabellenziffern",
     "reduziert": "Farbwechsel 200 ms linear, Band unter 4,5 : 1 ebenfalls übersprungen",
     "vorfuehrung": "1300 ms verweilen, 1100 ms Fahrt (easeInOutQuad) über die fünf Stationen",
     "rezept": "eventlocation-hochzeit"
    }
   }
  ]
 }
}