{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "broken-grid-asymmetrisch",
 "name": "Gebrochenes / asymmetrisches Raster",
 "name_en": "Broken grid / asymmetric layout",
 "kurz": "Ein Studio-Hero auf 24 Spalten, das zwischen versetzten Bildpaaren, Titel-über-Foto und Kreis als Drehpunkt umbaut, mit Parallaxe in drei Tempi und einem Bild, das in die nächste Sektion bricht.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "editorial",
  "luxuriös",
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "kunstvoll",
  "spannungsreich",
  "editorial",
  "brutal"
 ],
 "technik": [
  "css",
  "css-grid",
  "gsap",
  "scrolltrigger",
  "lenis"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "lenis"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Grundlage ist ein strenges Raster mit 12 bis 24 Spalten. Die Elemente starten bewusst auf verschiedenen Spalten: Bild über Spalte 2 bis 6, Text über 8 bis 11, das nächste Bild über 5 bis 12. Es gibt keine Mittelachse. An wenigen, geplanten Stellen brechen Elemente aus: Typo liegt auf dem Bild, ein Bild ragt in die Nachbarsektion, große Flächen bleiben leer. Beim Scrollen laufen die Ebenen leicht unterschiedlich schnell und verstärken den Versatz.",
  "warum_es_wirkt": "Der kontrollierte Regelbruch erzeugt Spannung. Die Seite wirkt kuratiert und von Hand gesetzt statt aus Komponenten zusammengesteckt. Damit ist sie eine Gegenbewegung zu polierten Bento-Seiten.",
  "wann_einsetzen": "Portfolios, Mode, Kunst, Kreativstudios, Kampagnen und Startseiten mit wenigen starken Bildern.",
  "wann_nicht": "Komplexe Informationsseiten, Formulare und Shops mit vielen Produkten. Ohne festes Grundraster wird das Layout chaotisch.",
  "varianten": [
   "Versetzte Bildpaare in unterschiedlichen Formaten",
   "Überlappung: Der Titel liegt halb auf dem Foto",
   "Geometrische Form als Drehpunkt, um den sich Bilder und Typo ordnen",
   "Anti-Grid-Brutalismus: rau und absichtlich roh"
  ],
  "umsetzung": "Ein feines Raster mit 24 Spalten bietet viele Startpunkte und bleibt trotzdem geordnet. Platzierung per grid-column und grid-row bzw. grid-area. Überlappungen entstehen durch gemeinsame Zellen und z-index, nicht durch absolute Positionierung. Ausbrüche in die Nachbarsektion per negativem margin-block oder translate. Parallaxe sparsam mit 2 bis 3 Geschwindigkeiten (Faktoren 0.9 bis 1.15, scrub, linear) und auf einer inneren Ebene, damit Layout und Bewegung getrennt bleiben. Regeln festhalten: wo gebrochen werden darf, höchstens 1 bis 2 Brüche pro Ansicht.",
  "mobil": "Die Asymmetrie über Breitenwechsel erhalten (100 %, 70 % links, 70 % rechts) statt alles auf volle Breite zu setzen. Überlappungen reduzieren, Parallaxe weglassen.",
  "reduzierte_bewegung": "Parallaxe und Übergänge aus. Das Layout bleibt asymmetrisch.",
  "barrierefreiheit": "Die DOM-Reihenfolge muss der Lesereihenfolge entsprechen, auch wenn die Elemente visuell versetzt sind. Text nur dort über Bilder legen, wo die Bildfläche ruhig und kontrastreich genug ist."
 },
 "messwerte": {
  "easing": "none (scrub) für Parallaxe",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Parallaxe-Faktoren 0.9–1.15; Versatz 1–3 Spalten",
  "sonstiges": "24-Spalten-Raster empfohlen",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Uncommon",
   "url": "https://uncommonstudio.com.au/",
   "auszeichnung": "laut hontran.dev Awwwards SOTD + Developer Award, FWA",
   "beobachtung": "Live geprüft (HTML): 12er-Raster mit bewusst versetzten Starts, z. B. Text lg:col-start-8 lg:col-span-2 neben Überschrift col-span-5, Block lg:col-start-6 lg:col-span-6.",
   "art": "website"
  },
  {
   "seite": "Stefan Vitasović Portfolio 2025",
   "url": "https://tympanus.net/codrops/2025/03/05/case-study-stefan-vitasovic-portfolio-2025/",
   "auszeichnung": "Codrops-Case-Study",
   "beobachtung": "Laut Case Study asymmetrische Offset-Layouts, großzügiger Leerraum und kantige geometrische Formen als Drehpunkte in Übergängen.",
   "art": "artikel"
  },
  {
   "seite": "Revolt",
   "url": "https://www.rvlt.net/",
   "auszeichnung": "",
   "beobachtung": "Laut htmlburger bewusst asymmetrisches Layout mit gemischten Schriften und Ausrichtungen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "The Browser Company / v0.dev (laut StudioMeyer)",
   "url": "https://studiomeyer.io/en/blog/webdesign-trends-2026-reality-check",
   "auszeichnung": "",
   "beobachtung": "StudioMeyer nennt Broken Grid/Anti-Grid-Brutalismus als aufkommende Gegenbewegung zu polierten Bentos, mit diesen Beispielen.",
   "art": "artikel"
  },
  {
   "seite": "Fantasy",
   "url": "https://www.fantasy.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Bild col-start-3 s:col-start-9 col-span-4 mit mt-120 (vertikaler Versatz), Text s:col-start-6 col-span-7, Labels m:col-start-11 col-span-2.",
   "art": "website"
  },
  {
   "seite": "Joffrey Spitzer Portfolio",
   "url": "https://joffreyspitzer.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): 16-Spalten-Raster mit Starts 2, 3, 5, 7, 9, 11, 12, 14, 15.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Case Study: Stefan Vitasović Portfolio — 2025 (Codrops)",
   "url": "https://tympanus.net/codrops/2025/03/05/case-study-stefan-vitasovic-portfolio-2025/"
  }
 ],
 "kombinierbar_mit": [
  "editorial-magazin-layout",
  "collage-scrapbook",
  "elastisches-raster-lag"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/demo"
 },
 "herkunft": {
  "quelldateien": [
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Uncommon gleicher URL jetzt live geprüft; Fantasy und Joffrey neu."
  ],
  "kategorie_alt": "Section-Layout"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Studio-Hero auf 24 Spalten, das zwischen versetzten Bildpaaren, Titel-über-Foto und Kreis als Drehpunkt umbaut, mit Parallaxe in drei Tempi und einem Bild, das in die nächste Sektion bricht.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0",
   "Flip@3.15.0"
  ],
  "werte": {
   "raster_desktop": "24 Spalten minmax(0, 1fr), 12 Zeilen minmax(0, 1fr), Rinne 12px, Bühne füllt 100svh (min. 640px)",
   "raster_telefon": "ab max-width 760px: 8 Spalten, 22 Zeilen à 40px, Rinne 8px",
   "platzierung": "grid-area pro Variante, Überlappung über gemeinsame Zellen + z-index (Titel 3, Text/Kreis 2, Bilder 1), kein absolute positioning",
   "versetzt": "Titel Sp. 2–15 / Z. 2–5, Text Sp. 18–23, Bild A Sp. 4–8 / Z. 6–12, Bild B Sp. 11–20 / Z. 5–10, Bild C Sp. 22–24 / Z. 10–12",
   "ueberlappend": "Bild B Sp. 9–23 / Z. 1–8, Titel Sp. 2–16 / Z. 7–10 (unten bündig), Überlappung 8 Sp. × 2 Z. auf ruhiger heller Bildfläche, Kreis Sp. 22–23 auf der Bildecke",
   "drehpunkt": "Kreis Sp. 9–17 / Z. 2–10 (rund per min(100cqw, 100cqh)), Titel Sp. 5–22 kreuzt ihn, Akzentwort dort dunkel",
   "parallaxe_faktoren": "0.9 / 1 / 1.15 (Bild A 0.9, Bild B 1, Bild C und Kreis 1.15; Folgesektion: Flakon 0.9, Buchhandlung 1, Plakat und Backstube 1.15)",
   "parallaxe_kurve": "ease none, scrub true; Hero: y = -(Faktor - 1) × Bühnenhöhe über die Hero-Höhe; Arbeiten: y von +(Faktor - 1) × (Viewport + Elementhöhe) / 2 bis zum Negativen",
   "parallaxe_bereich": "nur ab min-width 761px, auf innerer Ebene (Flip bewegt die äußere Zelle)",
   "wechsel": "GSAP Flip, absolute true, expo.out = cubic-bezier(0.16, 1, 0.3, 1), 1200 ms, stagger 40 ms",
   "einstieg": "opacity 0 → 1, y 48px → 0, expo.out 1200 ms, stagger 60 ms",
   "ausbruch": "erstes Bild der Folgesektion margin-top -104px (Telefon -56px), z-index 2, Wertezeile rechts 40 % frei",
   "hover_bild": "scale 1 → 1.035, 1000 ms expo.out; Spaltenlage erscheint sofort",
   "netz": "24 Spalten per subgrid, Tönung rgba(216, 67, 42, .075), Kanten .16, Einblenden 600 ms expo.out",
   "farben": "Papier #ebe9e3, Tinte #151513, Akzent #d8432a, Folgesektion #151513",
   "schrift": "Instrument Sans 600, clamp(40px, min(7.1vw, 10.6vh), 136px), Zeilenhöhe .9, Laufweite -.047em; Akzent Instrument Serif Italic; Labels Geist Mono 11px versal .14em",
   "vorfuehrung": "Versetzt → Überlappend → Drehpunkt im Takt 3600 ms (erster Wechsel nach 2200 ms), Netz blitzt je 1900 ms auf",
   "reduziert": "kein Flip, keine Parallaxe, kein Einstieg; Wechsel als Einblenden 300 ms linear"
  },
  "ausloeser": "klick",
  "touch": "Telefon nutzt eigene 8-Spalten-Platzierungen mit Breitenwechsel (100 % / 70 % links / 70 % rechts) und weniger Überlappung; keine Parallaxe, kein Hover-Zoom; Varianten und Raster per Tippen auf die Schalter, Spaltenlage erscheint mit „Raster zeigen“.",
  "reduziert": "Parallaxe, Flip-Gleiten und Einstieg aus; Variantenwechsel blendet in 300 ms ein. Das Layout bleibt in allen Varianten asymmetrisch.",
  "korrekturen": {
   "beschreibung": "Grundlage ist ein strenges Raster mit 12 bis 24 Spalten. Die Elemente starten bewusst auf verschiedenen Spalten: Bild über Spalte 2 bis 6, Text über 8 bis 11, das nächste Bild über 5 bis 12. Es gibt keine Mittelachse. An wenigen, geplanten Stellen brechen Elemente aus: Typo liegt auf dem Bild, ein Bild ragt in die Nachbarsektion, große Flächen bleiben leer. Beim Scrollen laufen die Ebenen leicht unterschiedlich schnell und verstärken den Versatz.",
   "warum_es_wirkt": "Der kontrollierte Regelbruch erzeugt Spannung. Die Seite wirkt kuratiert und von Hand gesetzt statt aus Komponenten zusammengesteckt. Damit ist sie eine Gegenbewegung zu polierten Bento-Seiten.",
   "wann_einsetzen": "Portfolios, Mode, Kunst, Kreativstudios, Kampagnen und Startseiten mit wenigen starken Bildern.",
   "wann_nicht": "Komplexe Informationsseiten, Formulare und Shops mit vielen Produkten. Ohne festes Grundraster wird das Layout chaotisch.",
   "varianten": [
    "Versetzte Bildpaare in unterschiedlichen Formaten",
    "Überlappung: Der Titel liegt halb auf dem Foto",
    "Geometrische Form als Drehpunkt, um den sich Bilder und Typo ordnen",
    "Anti-Grid-Brutalismus: rau und absichtlich roh"
   ],
   "umsetzung": "Ein feines Raster mit 24 Spalten bietet viele Startpunkte und bleibt trotzdem geordnet. Platzierung per grid-column und grid-row bzw. grid-area. Überlappungen entstehen durch gemeinsame Zellen und z-index, nicht durch absolute Positionierung. Ausbrüche in die Nachbarsektion per negativem margin-block oder translate. Parallaxe sparsam mit 2 bis 3 Geschwindigkeiten (Faktoren 0.9 bis 1.15, scrub, linear) und auf einer inneren Ebene, damit Layout und Bewegung getrennt bleiben. Regeln festhalten: wo gebrochen werden darf, höchstens 1 bis 2 Brüche pro Ansicht.",
   "mobil": "Die Asymmetrie über Breitenwechsel erhalten (100 %, 70 % links, 70 % rechts) statt alles auf volle Breite zu setzen. Überlappungen reduzieren, Parallaxe weglassen.",
   "reduzierte_bewegung": "Parallaxe und Übergänge aus. Das Layout bleibt asymmetrisch.",
   "barrierefreiheit": "Die DOM-Reihenfolge muss der Lesereihenfolge entsprechen, auch wenn die Elemente visuell versetzt sind. Text nur dort über Bilder legen, wo die Bildfläche ruhig und kontrastreich genug ist."
  },
  "geprueft": "31.10.2026",
  "notiz": "Erfundenes Studio Halde (Köln), Bilder aus medien/. Drei Varianten per Umschalter, Wechsel mit GSAP Flip zwischen echten grid-area-Platzierungen; „Raster zeigen“ blendet die 24 Spalten per subgrid ein, die Bildzeilen zeigen die tatsächlich berechnete Spaltenlage. Folgesektion zeigt versetzte Bildpaare mit Parallaxe und ein Bild, das über die Sektionskante bricht. Vorführung wechselt die Varianten in Schleife, das Netz blitzt bei jedem Umbau auf. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .58 → .66 (5,4:1); Bildzeilen „Eselsohr“ und „Krume“ unter 380 px ohne Zusatz (vorher mit Auslassungspunkten gekürzt); Kontrastmodus-Rahmen für Knöpfe."
 }
}