{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "case-study-geruest",
 "name": "Case-Study-Gerüst auf Award-Niveau",
 "name_en": "Case study page structure",
 "kurz": "Eine Projektseite als feste Folge aus Hero mit sechs Metadaten, Lead, Medien-Modulen, Ergebnis, Credits und „Nächstes Projekt“, dessen Bild und Titel per View Transition zum Hero der nächsten Case Study werden.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "editorial",
  "präzise",
  "filmisch"
 ],
 "stimmung_roh": [
  "erzählend",
  "professionell",
  "editorial"
 ],
 "technik": [
  "css",
  "css-grid",
  "view-transitions",
  "gsap",
  "flip",
  "scrolltrigger"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Feste Abfolge für Projektseiten. 1) Hero: Projektname groß, darunter vier bis sechs Metadaten (Kunde, Jahr, Rolle, Leistungen, Team, Link) und ein randloses Hauptbild oder Video. 2) Einstieg: Aufgabe in zwei, drei Sätzen als großer Lead. 3) Wechsel aus randlosen Bildern, Bildpaaren, Detailausschnitten und kurzen Textblöcken mit Kapitelnummern, dazu Einblicke in den Prozess wie Skizzen oder Varianten. 4) Ergebnis mit Zahlen oder Zitat. 5) Credits für Team und Partner. 6) „Nächstes Projekt“ als großes Bild mit Titel, das per Klick oder Scroll direkt in die nächste Case Study führt.",
  "warum_es_wirkt": "Die Seite erzählt eine Geschichte statt eine Bildergalerie zu zeigen. Die Metadaten geben auf einen Blick Kontext. Weil Bild und Titel von „Nächstes Projekt“ zum Hero der nächsten Seite werden, bleibt man im Fluss und liest weiter.",
  "wann_einsetzen": "Für jede Projektseite eines Portfolios, Studios oder einer Agentur.",
  "wann_nicht": "Bei kleinen Projekten ohne Geschichte. Die gehören als Eintrag in den Projektindex oder in eine Galerie.",
  "varianten": [
   "Langform-Editorial mit Kapiteln",
   "Bildgetriebene Galerie mit wenig Text",
   "Einheitliches Template für alle Projekte (gleiche Module, gleiches Raster)",
   "Video-Case-Study als Slider",
   "Endlos-Übergang: Weiterscrollen am Seitenende öffnet das nächste Projekt"
  ],
  "umsetzung": "Ein Template mit festen Bausteinen: Hero, Meta, Lead, Medien-Module (randlos, Paar, Detail, Text mit Bild, Zitat, Zahlen), Credits und „Nächstes Projekt“. Die Module stehen in einem 12er-Raster mit wenigen festen Breiten. Den Übergang zur nächsten Case Study übernehmen Cross-Document View Transitions: @view-transition { navigation: auto; } auf beiden Seiten, dazu view-transition-name auf Bild und Titel von „Nächstes Projekt“ (alte Seite) und auf Hero-Bild und H1 (neue Seite). Das läuft in Chrome und Safari, andere Browser wechseln ohne Animation. Die Endlos-Variante misst den Restweg am Seitenende (z. B. mit ScrollTrigger) und navigiert bei 100 %. Ohne Seitenwechsel geht derselbe Effekt mit document.startViewTransition() oder GSAP Flip. Eine llms.txt (wie bei Locomotive gesehen) ist optional und ohne belegte Wirkung bei Google; für AI Overviews und AI Mode braucht es laut Google keine neuen Dateien. Für Auffindbarkeit zählen eine eigene URL je Projekt, klare Überschriften und strukturierte Daten passend zum sichtbaren Text.",
  "mobil": "Bildpaare und Textspalten stapeln, Metadaten als zweispaltige Liste. „Nächstes Projekt“ ist ein großer Tap-Bereich, der Übergang darf kürzer sein (z. B. 700 ms).",
  "reduzierte_bewegung": "Seitenwechsel als kurzer Crossfade oder ganz ohne Animation, keine Einblendungen beim Scrollen.",
  "barrierefreiheit": "Je Kapitel eine Überschrift in sauberer Hierarchie (H1 Projekt, H2 Kapitel). Bilder mit aussagekräftigem alt, das sagt, was das Detail zeigt. Videos mit Steuerung und Untertiteln. Automatisches Weiterblättern am Seitenende nur mit klarer Ankündigung, besser per Klick. Nach dem Wechsel den Fokus auf die neue H1 setzen."
 },
 "messwerte": {
  "easing": "power3.inOut / expo.inOut für Seitenübergang",
  "dauer_ms": "600–1000 Seitenübergang",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Metadaten 4–6 Felder (Kunde, Jahr, Rolle, Leistungen, Team, Link)",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.76,
   0,
   0.24,
   1
  ],
  "css": "cubic-bezier(0.76, 0, 0.24, 1)",
  "name": "power3.inOut",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "Locomotive – Case Study K72",
   "url": "https://locomotive.ca/en/work/k72",
   "auszeichnung": "Locomotive: laut eigener llms.txt 7× Awwwards Agency of the Year (2018–2024), 74× SOTD",
   "beobachtung": "Live geprüft (HTML): c-work-single-hero (Titel, Kategorie, Jahr, Featured Image, Caption), Pitch-Sektion, Auszeichnungsliste, Credits-Tabelle (Client, Creative Director, Art Director, UX, Content, Front-end) und c-work-next \"Next Project\".",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Exo Ape – Amaterasu",
   "url": "https://www.exoape.com/work/amaterasu",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Titel, Claim, Intro, \"Visit website\", Leistungen (Visual Design, Web Development, UI & UX Design, Content Production), Branche, Datum October 2024, Kapitel \"Objective\".",
   "art": "website"
  },
  {
   "seite": "COLLINS – Arcane",
   "url": "https://www.wearecollins.com/case-studies/arcane",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): \"Case Study\", Titel, Claim, \"Explore the gallery\", Metadaten Program / Industry / Stage, Teaser mit \"Read the full story\".",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "projektindex-hover-vorschau",
  "editorial-magazin-layout",
  "split-screen-sticky-seiten",
  "zahlen-fakten-section",
  "scrollspy-kapitelnavigation"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Locomotive-URL jetzt live geprüft; Exo Ape und Collins neu; Awwwards-Inspirationen entfernt."
  ],
  "kategorie_alt": "Case Study"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Projektseite als feste Folge aus Hero mit sechs Metadaten, Lead, Medien-Modulen, Ergebnis, Credits und „Nächstes Projekt“, dessen Bild und Titel per View Transition zum Hero der nächsten Case Study werden.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "seitenwechsel": "View Transition: in der Demo document.startViewTransition() (same-document), auf der echten Website @view-transition { navigation: auto; } auf beiden Projektseiten",
   "geteilte_elemente": "view-transition-name: case-bild (Bild in „Nächstes Projekt“ → Hero-Bild) und case-titel (Titel in „Nächstes Projekt“ → H1); Namen nur während des Wechsels gesetzt",
   "easing_seitenwechsel": "cubic-bezier(0.76, 0, 0.24, 1) (power3.inOut)",
   "dauer_morph_ms": 900,
   "dauer_morph_telefon_ms": "700 (unter 640 px Viewport-Breite)",
   "view_transition_bild": "::view-transition-group(case-bild) { overflow: clip; animation-duration: 900ms; animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1) }; ::view-transition-old/new(case-bild) { height: 100%; object-fit: cover } mit Crossfade in derselben Dauer und Kurve",
   "view_transition_titel": "::view-transition-group(case-titel) 900 ms, Crossfade old/new 600 ms, beide cubic-bezier(0.76, 0, 0.24, 1); Titel in „Nächstes Projekt“ hat dieselbe Klasse, Größe und Rasterbreite wie die H1, damit er nur wandert",
   "view_transition_root": "old(root): opacity 1 → 0, translateY 0 → -4 %; new(root): opacity 0 → 1, translateY 3 % → 0; je 600 ms cubic-bezier(0.76, 0, 0.24, 1)",
   "ankunft_hero": "Kicker, Claim, 6 Metadaten, Bildunterzeile: opacity 0 → 1, translateY 18px → 0, 1000 ms cubic-bezier(0.16, 1, 0.3, 1), Start 300 ms, +60 ms je Element",
   "einblenden_scroll": "Module und Kapitel: opacity 0 → 1, translateY 32px → 0, 1000 ms cubic-bezier(0.16, 1, 0.3, 1), IntersectionObserver threshold 0.15, einmalig",
   "metadaten": "6 Felder: Kunde, Jahr, Rolle, Leistungen, Team, Link; Desktop 6 Spalten, unter 900 px 3, unter 640 px 2",
   "raster": "12 Spalten, Spaltenabstand clamp(12px, 1.6vw, 24px), Rand clamp(16px, 3.4vw, 48px), Kapitelabstand clamp(80px, 13vh, 168px)",
   "titel": "font-size clamp(48px, 8.6vw, 136px), Telefon clamp(42px, 13vw, 64px), line-height 0.9, letter-spacing -0.05em, Akzentwort Instrument Serif Italic",
   "module": "Hero-Bild randlos clamp(300px, 68svh, 760px) | Paar 6 + 6 Spalten 4:5 | Skizze Spalte 3–12, 3:2 | Detail randlos 21:9 (Telefon 4:3), Bild scale 2.2–2.6 | Farben 7 + Schrift 5 Spalten | Zahlen ab Spalte 4 | Zitat Spalte 4–10 | Credits 2 Spalten",
   "naechstes_projekt": "dunkler Block, min-height 100svh, ganzer Block ist ein Link; Bild 62 % breit, Höhe clamp(220px, 46svh, 520px); Hover: Bild scale 1.04 in 1000 ms expo.out, Pfeil +6px in 150 ms linear",
   "variante_galerie": "Kapiteltexte, Zahlen und Zitat ausgeblendet, Module rücken auf den Spaltenabstand zusammen, Skizze volle Breite",
   "variante_endlos": "Block 100svh + 80svh hoch, Bühne sticky; Fortschritt p = Restweg 0–1 füllt den Balken und weitet das Bild von 62 % auf 100 % (Telefon 84 % → 100 %); bei 100 % und 150 ms Halt öffnet das nächste Projekt",
   "bildformat": "object-fit: contain auf der Grundfarbe des Motivs (Telefon cover), damit Vorschau und Hero denselben Bildausschnitt zeigen",
   "reduziert": "Crossfade opacity 0 → 1, 200 ms linear, kein Morph"
  },
  "ausloeser": "klick",
  "touch": "Der ganze Block „Nächstes Projekt“ ist ein großer Tap-Bereich. Metadaten stehen als zweispaltige Liste, Bildpaar, Textspalten und Credits stapeln sich, die Maße der Skizze sind ausgeblendet. Hero- und Vorschaubild füllen ihre Fläche (cover), der Morph dauert 700 statt 900 ms. In „Endlos“ öffnet Weiterwischen am Seitenende das nächste Projekt. Die Demo-Steuerung ist auf dem Telefon ein einklappbarer Chip unten rechts, standardmäßig zu.",
  "reduziert": "Kein Morph, keine Ankunft, kein Einblenden beim Scrollen: Die neue Case Study erscheint per Crossfade (opacity 0 → 1, 200 ms linear). „Endlos“ füllt den Balken weiter und wechselt am Ende ebenfalls per Crossfade. Die Werte-Anzeige nennt das.",
  "korrekturen": {
   "beschreibung": "Feste Abfolge für Projektseiten. 1) Hero: Projektname groß, darunter vier bis sechs Metadaten (Kunde, Jahr, Rolle, Leistungen, Team, Link) und ein randloses Hauptbild oder Video. 2) Einstieg: Aufgabe in zwei, drei Sätzen als großer Lead. 3) Wechsel aus randlosen Bildern, Bildpaaren, Detailausschnitten und kurzen Textblöcken mit Kapitelnummern, dazu Einblicke in den Prozess wie Skizzen oder Varianten. 4) Ergebnis mit Zahlen oder Zitat. 5) Credits für Team und Partner. 6) „Nächstes Projekt“ als großes Bild mit Titel, das per Klick oder Scroll direkt in die nächste Case Study führt.",
   "warum_es_wirkt": "Die Seite erzählt eine Geschichte statt eine Bildergalerie zu zeigen. Die Metadaten geben auf einen Blick Kontext. Weil Bild und Titel von „Nächstes Projekt“ zum Hero der nächsten Seite werden, bleibt man im Fluss und liest weiter.",
   "wann_einsetzen": "Für jede Projektseite eines Portfolios, Studios oder einer Agentur.",
   "wann_nicht": "Bei kleinen Projekten ohne Geschichte. Die gehören als Eintrag in den Projektindex oder in eine Galerie.",
   "varianten": [
    "Langform-Editorial mit Kapiteln",
    "Bildgetriebene Galerie mit wenig Text",
    "Einheitliches Template für alle Projekte (gleiche Module, gleiches Raster)",
    "Video-Case-Study als Slider",
    "Endlos-Übergang: Weiterscrollen am Seitenende öffnet das nächste Projekt"
   ],
   "umsetzung": "Ein Template mit festen Bausteinen: Hero, Meta, Lead, Medien-Module (randlos, Paar, Detail, Text mit Bild, Zitat, Zahlen), Credits und „Nächstes Projekt“. Die Module stehen in einem 12er-Raster mit wenigen festen Breiten. Den Übergang zur nächsten Case Study übernehmen Cross-Document View Transitions: @view-transition { navigation: auto; } auf beiden Seiten, dazu view-transition-name auf Bild und Titel von „Nächstes Projekt“ (alte Seite) und auf Hero-Bild und H1 (neue Seite). Das läuft in Chrome und Safari, andere Browser wechseln ohne Animation. Die Endlos-Variante misst den Restweg am Seitenende (z. B. mit ScrollTrigger) und navigiert bei 100 %. Ohne Seitenwechsel geht derselbe Effekt mit document.startViewTransition() oder GSAP Flip. Eine llms.txt (wie bei Locomotive gesehen) ist optional und ohne belegte Wirkung bei Google; für AI Overviews und AI Mode braucht es laut Google keine neuen Dateien. Für Auffindbarkeit zählen eine eigene URL je Projekt, klare Überschriften und strukturierte Daten passend zum sichtbaren Text.",
   "mobil": "Bildpaare und Textspalten stapeln, Metadaten als zweispaltige Liste. „Nächstes Projekt“ ist ein großer Tap-Bereich, der Übergang darf kürzer sein (z. B. 700 ms).",
   "reduzierte_bewegung": "Seitenwechsel als kurzer Crossfade oder ganz ohne Animation, keine Einblendungen beim Scrollen.",
   "barrierefreiheit": "Je Kapitel eine Überschrift in sauberer Hierarchie (H1 Projekt, H2 Kapitel). Bilder mit aussagekräftigem alt, das sagt, was das Detail zeigt. Videos mit Steuerung und Untertiteln. Automatisches Weiterblättern am Seitenende nur mit klarer Ankündigung, besser per Klick. Nach dem Wechsel den Fokus auf die neue H1 setzen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Die Demo zeigt eine komplette Case Study von Büro Feldmark (erfunden) mit drei erfundenen Marken aus medien/ (Krume, Eselsohr, Röstkontor): Hero mit sechs Metadaten, Lead, Plakat und Becher als Bildpaar, Konstruktionsskizze als SVG, randloses Detail, Farben und Schrift, Zahlen mit Zitat, Credits und „Nächstes Projekt“. Klick (oder in „Endlos“ Weiterscrollen) startet eine same-document View Transition: Bild und Titel wandern zum Hero der nächsten Case Study, der Rest blendet über. Umschalter: Editorial, Galerie, Endlos. Die Vorführung scrollt durch die Seite, wechselt per gedachtem Klick und geht dabei alle drei Varianten durch. Auf der echten Website übernimmt @view-transition { navigation: auto; } denselben Wechsel zwischen zwei HTML-Seiten. Ohne View-Transition-Unterstützung gibt es einen Crossfade. Korrektur 01.11.2026: Auf dem Telefon verdeckte das feste Bedienfeld Hero-Bild und Text. Unter 640 px ist es jetzt ein Chip „Form · Editorial +“ unten rechts (36 px hoch); Tippen klappt Umschalter und Werte auf, der Chip zeigt immer die aktive Form. Review 01.11.2026: Am Desktop lag das mittige Bedienfeld auf der Wortmarke im Hero-Bild. Die Steuerung ist jetzt in jeder Breite ein Chip „Form · Editorial +“ unten rechts; Klick klappt Umschalter und Werte auf. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .56 → .66 (5,5:1); Kontrastmodus-Rahmen für Knöpfe. Korrektur 02.11.2026: Satz zu llms.txt in umsetzung („optional, ohne belegte Wirkung bei Google“); llms.txt stand bisher nur als Quelle unter gesehen_bei (Locomotive), nicht als Empfehlung."
 }
}