{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "bento-grid-interaktiv",
 "name": "Bento-Grid mit lebenden Zellen",
 "name_en": "Interactive bento grid",
 "kurz": "Vier-Spalten-Raster mit sieben Kacheln für ein Kölner Studio: Bildwechsel, Live-Uhr, Zähler, Stimmen, Mini-Website und sich konstruierendes Logo, gestaffelt aufgebaut.",
 "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",
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "technisch",
  "aufgeräumt",
  "produktig",
  "freundlich"
 ],
 "technik": [
  "css",
  "css-grid",
  "container-queries",
  "gsap",
  "scrolltrigger",
  "video"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "canvas"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine Sektion wird als Raster aus unterschiedlich großen, abgerundeten Kacheln gebaut, etwa 4 Spalten mit Kacheln von 1×1, 2×1 und 2×2. Die wichtigste Aussage bekommt die größte Kachel: Größe signalisiert Bedeutung, nicht Position. Jede Kachel ist eine abgeschlossene Idee aus Visual (60 bis 70 % der Höhe), kurzer Headline und höchstens einer Zeile Text. Award-Niveau entsteht erst durch lebende Zellen: Mikroanimationen, die beim Hover oder bei Sichtbarkeit die Funktion vorführen (Mini-UI, Zähler, Uhr, Video), statt statischer Icons. Beim Einscrollen bauen sich die Kacheln gestaffelt auf.",
  "warum_es_wirkt": "Viele parallele Aussagen werden auf einen Blick scanbar, die Größenhierarchie lenkt das Auge. Lebende Zellen beweisen, statt zu behaupten.",
  "wann_einsetzen": "Feature-Übersichten mit 6 bis 9 Aussagen, Über-uns- und Über-mich-Steckbriefe (Ort, Werkzeuge, Kunden, Zitat, Foto), Leistungsübersichten von Studios.",
  "wann_nicht": "Bei Inhalten mit linearer Abfolge oder Tiefe (Prozess, Geschichte). Wenn eine Aussage klar dominiert, dann besser ein klassischer Hero. Wenn Kacheln nur mit Füllinhalt gefüllt würden: Generische Bentos gelten 2026 als Template-Look.",
  "varianten": [
   "Feature- oder Leistungs-Bento mit Mini-UIs in den Zellen",
   "Über-uns-Bento mit Foto, Standort-Uhr, Kennzahl, Zitat und Werkzeugen",
   "Bento mit Hintergrundvideo in einzelnen Zellen",
   "Bento, das beim Scrollen aus einer großen Kachel aufbricht (Grid-Assembly)",
   "Bento mit Bildwechsel oder Slider in einzelnen Zellen"
  ],
  "umsetzung": "CSS Grid mit grid-template-columns: repeat(4, 1fr) und grid-auto-rows: minmax(200px, auto) oder festen Zeilen; Kacheln per grid-column: span 2 und grid-row: span 2 oder benannte grid-template-areas. Der Gap ist überall gleich (Raycast: 30px, mobil 15px). Kacheln als Container anlegen (container-type: inline-size), damit sich Inhalte an der Kachel statt am Viewport ausrichten. Mikroanimationen nur bei Sichtbarkeit starten (IntersectionObserver oder ScrollTrigger), am besten über einen gemeinsamen requestAnimationFrame-Takt. Videos lazy laden, muted und playsinline. Mobil nach Wichtigkeit ordnen (DOM-Reihenfolge), große Kacheln über die volle Breite, kleine paarweise.",
  "mobil": "Zwei- oder einspaltiger Stapel mit unterschiedlichen Höhen, nicht alle gleich. Hover-Demos werden zu Autoplay bei Sichtbarkeit oder zu Tippen.",
  "reduzierte_bewegung": "Mikroanimationen anhalten und den Endzustand zeigen, Videos pausiert mit Poster. Kein gestaffelter Aufbau.",
  "barrierefreiheit": "DOM-Reihenfolge gleich Lesereihenfolge. Kacheln mit Ziel als ganze Fläche klickbar: ein <a> pro Kachel, kein verschachtelter Button. Dekorative Animationen mit aria-hidden ausblenden, wechselnde Inhalte nicht als einzige Informationsquelle nutzen. Kontrast von Text über Bild oder Video prüfen."
 },
 "messwerte": {
  "easing": "ease-out",
  "dauer_ms": "200–300 (Hover)",
  "stagger_ms": "60–100 beim Einblenden (typisch)",
  "distanz": "Gap 30px Desktop / 15px Mobil (Raycast); 3.2rem (Zentry)",
  "sonstiges": "Radius .8rem, Innenabstand 1.6rem, Rahmen 1px mit 20 % Deckkraft (Zentry); Visual mit Masken-Verlauf (Raycast)",
  "herkunft": "beobachtet",
  "quelle": "https://www.raycast.com/_next/static/immutable/chunks/18h-121dvt2r8.css"
 },
 "kurve": {
  "bezier": [
   0.0,
   0.0,
   0.58,
   1.0
  ],
  "css": "cubic-bezier(0, 0, 0.58, 1)",
  "name": "ease-out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Linear / Notion / Vercel (SaaS)",
   "url": "https://www.pravinkumar.co/blog/bento-grids-b2b-saas-homepage-design-trend-2026",
   "auszeichnung": "",
   "beobachtung": "Laut Artikel nutzen Notion, Linear und Vercel Bento-Blöcke für parallele Wertversprechen; SaaSFrame nennt zusätzlich Huly (8 Kacheln), Diagram, Customer.io.",
   "art": "artikel"
  },
  {
   "seite": "Raycast",
   "url": "https://www.raycast.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (18h-121dvt2r8.css): .bento{display:grid;grid-template-columns:repeat(var(--columns),1fr);gap:30px}, mobil flex-column mit gap 15px; Kachel = Visual (mask-image linear-gradient(#000000bf 40%,#0000)) + Titel 16px/500 + Text 15px #fff6 mit mix-blend plus-lighter.",
   "art": "website"
  },
  {
   "seite": "Zentry",
   "url": "https://zentry.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (getAssetSrc.TeCTIPYk.css): .bento__boxes zweispaltig, gap 3.2rem, linke Spalte padding-top 12rem (versetzt); .bentoCard radius .8rem, padding 1.6rem, Rahmen 1px opacity .2, Kennzahl in ZentryScreamer 900 mit line-height .72.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): modular-solutions-bento mit data-bento-card-root, data-bento-card-hover-class und lazy-bento-graphic je Produkt (Payments, Billing, Connect, Issuing …).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Designing Bento Grids That Actually Work (SaaSFrame, 2026)",
   "url": "https://www.saasframe.io/blog/designing-bento-grids-that-actually-work-a-2026-practical-guide"
  },
  {
   "titel": "Bento Grids in Web Design (freeCodeCamp)",
   "url": "https://www.freecodecamp.org/news/bento-grids-in-web-design/"
  }
 ],
 "kombinierbar_mit": [
  "layout-formation-scroll",
  "zahlen-fakten-section",
  "team-ueber-mich-layout"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/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": "Vier-Spalten-Raster mit sieben Kacheln für ein Kölner Studio: Bildwechsel, Live-Uhr, Zähler, Stimmen, Mini-Website und sich konstruierendes Logo, gestaffelt aufgebaut.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "raster": "grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, minmax(150px, 1fr)); Bühne 100svh hoch; Flächen per grid-template-areas",
   "flaechen_studio": "'a a b c' 'a a d d' 'e f g g' (a 2×2 Arbeiten, b Uhr, c Kennzahl, d 2×1 Stimmen, e Werkzeuge, f Auslastung, g 2×1 Kontakt)",
   "flaechen_leistungen": "'b a a c' 'd a a e' 'f f g g' (a 2×2 Marke, b Schrift, c Farbe, d Bewegung, e Print, f 2×1 Websites, g 2×1 Erstgespräch)",
   "gap": "clamp(15px, 2.1vw, 30px) (Raycast gemessen: 30px Desktop, 15px mobil)",
   "radius": ".8rem (Zentry gemessen)",
   "rahmen": "1px rgba(22, 21, 20, .2), Hover .45 (Zentry: 1px mit 20 % Deckkraft)",
   "innenabstand": "clamp(14px, 1.6rem, 26px) (Zentry: 1.6rem)",
   "kachel_text": "Titel 16px/500, Text 15px gedämpft (Raycast)",
   "kennzahl": "font-size clamp(44px, 25cqi, 96px), line-height .72, letter-spacing -.06em (Zeilenhöhe nach Zentry)",
   "container_queries": "jede Kachel container-type: inline-size; Schriftgrößen in cqi",
   "easing": "cubic-bezier(0, 0, 0.58, 1) (ease-out, Raycast) für alle Übergänge und JS-Bewegungen",
   "hover_ms": 240,
   "hover": "Rahmen dunkler, Pfeil 2px nach rechts oben und Akzentfläche, Bild scale 1.03, Lichtkegel radial-gradient(260px circle) rgba(228, 87, 46, .13) folgt dem Zeiger über alle Kacheln",
   "aufbau_ms": 700,
   "stagger_ms": 80,
   "aufbau": "opacity 0 → 1, translateY 24px → 0, scale .98 → 1, Verzögerung var(--i) × 80 ms in DOM-Reihenfolge",
   "abgang_ms": 200,
   "abgang": "opacity → 0, translateY -10px; Variantenwechsel nach 260 ms",
   "bildwechsel": "alle 3200 ms, clip-path inset(100% 0 0 0) → inset(0) 900 ms, scale 1.08 → 1 1600 ms; Fortschrittsbalken je Projekt",
   "zaehler": "0 → 186 in 1400 ms (300 ms verzögert), 13 Jahresbalken wachsen je 600 ms mit 60 ms Versatz; Hover zählt erneut",
   "stimmen": "Wechsel alle 5000 ms, opacity und translateY 14px, 600 ms; Hover hält an",
   "werkzeugliste": "Endlosband 22 px/s, beim Hover 7 px/s; Maske linear-gradient(transparent, #000 30%, #000 60%, transparent)",
   "auslastung": "12 Monate ab heute, Einblenden je 400 ms mit 60 ms Versatz, erster freier Monat pulsiert (2400 ms)",
   "marke": "Runde 6400 ms: Hilfslinien zeichnen (900 ms, 110 ms Versatz), Kontur (1000 ms ab 1100 ms, 260 ms Versatz), Fläche (600 ms ab 2500 ms), Hilfslinien treten zurück; Hover zeigt sie wieder",
   "schrift": "Instrument Sans wght 400–700, pendelt mit 550 − 150 · cos(t / 1600); Zeiger-x setzt wght",
   "farbe": "Streifen flex-grow 1 → 4, 500 ms, Wechsel alle 1800 ms; Zeiger bzw. Tippen wählt",
   "bewegung": "Punkt läuft die Kurve cubic-bezier(0, 0, 0.58, 1) in 1200 ms ab, Runde 2400 ms",
   "websites": "Runde 5600 ms: Bausteine erscheinen im Abstand von 380 ms (500 ms), Maus fährt zum Knopf (900 ms), Klick scale .92",
   "browser_maske": "linear-gradient(#000 70%, transparent) (nach Raycast-Masken-Verlauf)",
   "farben": "Papier #ebe8e1, Kachel #f7f5f0, Tinte #161514, Akzent #e4572e (Zahl-Kachel #c44620)",
   "mobil": "ab 720px abwärts 2 Spalten, grid-auto-rows minmax(158px, auto), große Kachel 340px hoch; unter 360px eine Spalte",
   "vorfuehrung_runde_ms": 18000
  },
  "ausloeser": "hover",
  "touch": "Kein Lichtkegel. Alle lebenden Zellen laufen von selbst, solange sie sichtbar sind (IntersectionObserver). Tippen hebt eine Kachel hervor wie Hover, in der Farbkachel schaltet Tippen den Streifen weiter. Raster zweispaltig, große Kacheln über die volle Breite, Gap 15px.",
  "reduziert": "Kein gestaffelter Aufbau, kein Lichtkegel, keine Schleifen: Bildwechsel steht auf dem ersten Projekt, Zähler zeigt 186, Logo fertig, Mini-Website komplett, Uhr zeigt die Zeit ohne laufenden Sekundenzeiger. Variantenwechsel springt. Die Werte-Leiste meldet den Zustand.",
  "korrekturen": {
   "beschreibung": "Eine Sektion wird als Raster aus unterschiedlich großen, abgerundeten Kacheln gebaut, etwa 4 Spalten mit Kacheln von 1×1, 2×1 und 2×2. Die wichtigste Aussage bekommt die größte Kachel: Größe signalisiert Bedeutung, nicht Position. Jede Kachel ist eine abgeschlossene Idee aus Visual (60 bis 70 % der Höhe), kurzer Headline und höchstens einer Zeile Text. Award-Niveau entsteht erst durch lebende Zellen: Mikroanimationen, die beim Hover oder bei Sichtbarkeit die Funktion vorführen (Mini-UI, Zähler, Uhr, Video), statt statischer Icons. Beim Einscrollen bauen sich die Kacheln gestaffelt auf.",
   "warum_es_wirkt": "Viele parallele Aussagen werden auf einen Blick scanbar, die Größenhierarchie lenkt das Auge. Lebende Zellen beweisen, statt zu behaupten.",
   "wann_einsetzen": "Feature-Übersichten mit 6 bis 9 Aussagen, Über-uns- und Über-mich-Steckbriefe (Ort, Werkzeuge, Kunden, Zitat, Foto), Leistungsübersichten von Studios.",
   "wann_nicht": "Bei Inhalten mit linearer Abfolge oder Tiefe (Prozess, Geschichte). Wenn eine Aussage klar dominiert, dann besser ein klassischer Hero. Wenn Kacheln nur mit Füllinhalt gefüllt würden: Generische Bentos gelten 2026 als Template-Look.",
   "varianten": [
    "Feature- oder Leistungs-Bento mit Mini-UIs in den Zellen",
    "Über-uns-Bento mit Foto, Standort-Uhr, Kennzahl, Zitat und Werkzeugen",
    "Bento mit Hintergrundvideo in einzelnen Zellen",
    "Bento, das beim Scrollen aus einer großen Kachel aufbricht (Grid-Assembly)",
    "Bento mit Bildwechsel oder Slider in einzelnen Zellen"
   ],
   "umsetzung": "CSS Grid mit grid-template-columns: repeat(4, 1fr) und grid-auto-rows: minmax(200px, auto) oder festen Zeilen; Kacheln per grid-column: span 2 und grid-row: span 2 oder benannte grid-template-areas. Der Gap ist überall gleich (Raycast: 30px, mobil 15px). Kacheln als Container anlegen (container-type: inline-size), damit sich Inhalte an der Kachel statt am Viewport ausrichten. Mikroanimationen nur bei Sichtbarkeit starten (IntersectionObserver oder ScrollTrigger), am besten über einen gemeinsamen requestAnimationFrame-Takt. Videos lazy laden, muted und playsinline. Mobil nach Wichtigkeit ordnen (DOM-Reihenfolge), große Kacheln über die volle Breite, kleine paarweise.",
   "mobil": "Zwei- oder einspaltiger Stapel mit unterschiedlichen Höhen, nicht alle gleich. Hover-Demos werden zu Autoplay bei Sichtbarkeit oder zu Tippen.",
   "reduzierte_bewegung": "Mikroanimationen anhalten und den Endzustand zeigen, Videos pausiert mit Poster. Kein gestaffelter Aufbau.",
   "barrierefreiheit": "DOM-Reihenfolge gleich Lesereihenfolge. Kacheln mit Ziel als ganze Fläche klickbar: ein <a> pro Kachel, kein verschachtelter Button. Dekorative Animationen mit aria-hidden ausblenden, wechselnde Inhalte nicht als einzige Informationsquelle nutzen. Kontrast von Text über Bild oder Video prüfen."
  },
  "geprueft": "31.10.2026",
  "notiz": "Ausschnitt der Startseite eines erfundenen Kölner Studios (Studio Kantig). Umschalter Studio (Über-uns-Bento: Projektbilder aus medien/ mit Wisch-Wechsel, Live-Uhr Europe/Berlin mit Öffnungsstatus, Zähler mit Jahresbalken, Kundenstimmen, Werkzeugband, Auslastung ab dem aktuellen Monat, Kontakt) und Leistungen (Feature-Bento mit Mini-UIs: Logo konstruiert sich, variable Strichstärke, Farbstreifen, Easing-Kurve, Mini-Website mit Klick). Beide Varianten nutzen dieselben Kachelgrößen in anderer Anordnung. Ein rAF-Takt für alle sichtbaren Zellen, Lichtkegel folgt dem Zeiger über das ganze Raster. Vorführung 18 s: Aufbau, gedachter Zeiger besucht Kacheln, Wechsel zu Leistungen und zurück. Die Kundenstimmen sind erfunden und keinem echten Kunden zugeordnet. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise .56 → .66 (5,3:1); Zahl-Kachel #c44620 statt Akzent, Label dort voll #fff7f2 (4,7:1); Knopf „Bewegung anhalten“ (30 px, aria-pressed) neben Studio/Leistungen, ruft pause()/weiter() und hält auch den Puls der Auslastung an (Vorschau/reduziert ausgeblendet); Knopf-Rahmen im Kontrastmodus. Offen: die ausgeblendeten Nachbarwörter im Werkzeugkasten (Alpha .3) sind Teil des Wortrads."
 }
}