{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "raster-zu-wischreihe",
 "name": "Raster am Desktop, Wischreihe am Telefon",
 "name_en": "Grid on desktop, swipe row on mobile (container-query carousel)",
 "kurz": "Leistungen eines Bremer SHK-Betriebs und zwölf Getriebe-Baureihen als ruhiges Raster, das per Container-Query zur Wischreihe wird; Karussell-Rollen, Pfeile und Marker gibt es nur im schmalen Zustand.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise",
  "warm"
 ],
 "stimmung_roh": [
  "ruhig",
  "präzise",
  "warm"
 ],
 "technik": [
  "css",
  "container-queries",
  "scroll-snap",
  "css-grid",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Gruppe gleichrangiger Karten (Leistungen, Team, Produktgruppen) steht auf breiten Flächen als ruhiges Raster, alles auf einen Blick. Wird ihr Container schmal, schaltet eine Container-Query auf eine Wischreihe mit Scroll-Snap um, statt die Karten endlos untereinander zu stapeln. Erst in diesem Zustand bekommt die Reihe Karussell-Rollen, Marker und Pfeile. Variante zweireihig: zwei Reihen scrollen gemeinsam, gut für viele kleine Kacheln.",
  "warum_es_wirkt": "Am Desktop ist ein Karussell meist die schlechtere Wahl: Inhalte verstecken sich hinter Pfeilen, die kaum jemand klickt. Behörden-Designsysteme wie das der schottischen Regierung verzichten deshalb bewusst auf Karussells. Auf dem Telefon dagegen spart eine Wischreihe Höhe, und die angeschnittene nächste Karte zeigt, dass es weitergeht. Dieses Muster nimmt von beiden die gute Seite. Weil die Umschaltung an der Containerbreite hängt, funktioniert dieselbe Komponente auch in einer schmalen Seitenspalte.",
  "wann_einsetzen": "Handwerk, Praxis, Kanzlei, Friseur und Pflege für Leistungen oder Team. Gastro für Gerichte, Industrie und D2C für Produktgruppen (zweireihig). Immer dann, wenn 4 bis 12 gleichrangige Karten am Desktop als Raster gut lesbar sind, auf dem Telefon aber zu viel Höhe kosten würden.",
  "wann_nicht": "Wenn die Karten auf dem Telefon einzeln gelesen werden müssen (Preise, Pflichtangaben, Vergleich), dann lieber gestapelt oder als Akkordeon. Nicht bei mehr als etwa 12 Karten, dann Filter oder Liste. Nicht für die wichtigste Information der Seite, die gehört sichtbar an den Anfang. Zweireihig nicht, wenn die Karten viel Text tragen.",
  "varianten": [
   "einreihig: Raster mit 3 bzw. 2 Spalten, unter 44rem Container eine Wischreihe mit Karten von 80 % Breite, Zähler, Pfeilen und Markern",
   "zweireihig: Raster 6 × 2 bzw. 4 × 3, unter 44rem zwei Reihen mit grid-auto-flow column, eine Spalte (2 Kacheln) pro Schritt; Lesefolge spaltenweise gleich der DOM-Reihenfolge"
  ],
  "umsetzung": "Der Abschnitt bekommt container-type inline-size. Breit: display grid mit grid-template-columns repeat(3, minmax(0, 1fr)). In @container (width < 44rem): grid-auto-flow column, grid-auto-columns etwa 80 %, overflow-x auto, scroll-snap-type x mandatory, scroll-padding-inline gleich dem Seitenrand, Karten scroll-snap-align start. Zweireihig: grid-template-rows repeat(2, auto) mit grid-auto-flow column, Schnappen an den Karten der oberen Reihe. Die CSS ist die einzige Quelle für den Zustand: Ein ResizeObserver am Container liest getComputedStyle(band).overflowX und setzt nur im Karussell-Zustand aria-roledescription „Karussell“, role group und „2 von 6“ an den Karten, tabindex 0 am Band und blendet Pfeile und Marker ein (hidden). Native Marker per scroll-marker-group nur innerhalb der Container-Query, sonst eigene Buttons. Lesefolge: DOM-Reihenfolge so wählen, dass sie in beiden Zuständen stimmt; bei zwei Reihen läuft sie spaltenweise.",
  "mobil": "Das ist der Kern: Auf dem Telefon wird aus dem Raster eine Wischreihe mit angeschnittener nächster Karte, Markern und 44-px-Pfeilen. Kein Selbstlauf.",
  "reduzierte_bewegung": "Pfeile und Marker springen ohne Gleiten. Der Wechsel zwischen Raster und Reihe ist ohnehin ohne Animation.",
  "barrierefreiheit": "Im Raster-Zustand ist es eine normale Liste ohne Karussell-Rollen. Erst im Karussell-Zustand: aria-roledescription „Karussell“ am Abschnitt, Karten als group mit „2 von 6: Heizung“, Band mit tabindex 0 und Pfeiltasten, Pfeile mit aria-label und aria-controls. Lesefolge in beiden Zuständen gleich der DOM-Reihenfolge, bei zwei Reihen spaltenweise und an den Nummern erkennbar. Kein Querscrollen der Seite bei 320 px."
 },
 "messwerte": {
  "easing": "Kurve des Rezepts (Handwerk cubic-bezier(0.2, 0, 0.38, 0.9), Industrie cubic-bezier(0.25, 1, 0.5, 1))",
  "dauer_ms": "Gleiten bei Pfeil 400 bis 500",
  "stagger_ms": "",
  "distanz": "Umschaltpunkt Container 44rem; Karte im Karussell 78 bis 82 % der Breite",
  "sonstiges": "Flickity watchCSS als Vorbild der CSS-gesteuerten Umschaltung",
  "herkunft": "eigene Festlegung",
  "quelle": "Varianten-Recherche Hero/Slider 03.11.2026 (Flickity watchCSS, Swiper Grid, Splide Grid)"
 },
 "kurve": {
  "bezier": [
   0.2,
   0.0,
   0.38,
   0.9
  ],
  "css": "cubic-bezier(0.2, 0, 0.38, 0.9)",
  "name": "eigene Kurve",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Flickity: Option watchCSS",
   "url": "https://flickity.metafizzy.co/options",
   "auszeichnung": "",
   "beobachtung": "watchCSS schaltet das Karussell nur ein, wenn ein CSS-Schalter (::after content 'flickity') in einer Media Query gesetzt ist. Typischer Einsatz: Karussell nur auf schmalen Bildschirmen, am Desktop ein normales Raster.",
   "art": "demo"
  },
  {
   "seite": "Scottish Government Design System: Carousels",
   "url": "https://designsystem.gov.scot/styles/images/carousels",
   "auszeichnung": "",
   "beobachtung": "Das Designsystem verzichtet bewusst auf Karussells, weil Inhalte hinter Folien übersehen werden. Laut Varianten-Recherche argumentiert auch das Designsystem der Regierung von Queensland so.",
   "art": "artikel"
  },
  {
   "seite": "Swiper Demos: Grid",
   "url": "https://swiperjs.com/demos",
   "auszeichnung": "",
   "beobachtung": "Grid-Modul mit mehreren Reihen pro Folie und fill column bzw. row, Vorlage für die zweireihige Variante.",
   "art": "demo"
  },
  {
   "seite": "Splide: Grid-Erweiterung",
   "url": "https://splidejs.com",
   "auszeichnung": "",
   "beobachtung": "Grid-Erweiterung mit rows und cols je Seite; zeigt, dass zwei Reihen zusammen geblättert werden.",
   "art": "demo"
  },
  {
   "seite": "Nielsen Norman Group: Designing Effective Carousels",
   "url": "https://www.nngroup.com/articles/designing-effective-carousels/",
   "auszeichnung": "",
   "beobachtung": "Stand 07.08.2026: Peek als Hinweis auf mehr, sichtbare Steuerung. Grundlage für die angeschnittene Karte im schmalen Zustand.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: Container queries",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries"
  },
  {
   "titel": "MDN: scroll-snap-type",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type"
  },
  {
   "titel": "Flickity: watchCSS",
   "url": "https://flickity.metafizzy.co/options"
  }
 ],
 "kombinierbar_mit": [
  "css-native-karussell",
  "karussell-steuerung",
  "reading-flow-reihenfolge",
  "leistungsseite-antwort-zuerst",
  "team-ueber-mich-layout",
  "fluide-typo-clamp-cqi"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Varianten-Recherche Hero/Slider 03.11.2026"
  ],
  "pruefnotizen": [
   "In der Recherche als Variante nur-mobil und zweireihig von css-native-karussell geführt. Als eigenes Muster ausgegliedert, weil der Kern nicht das Karussell ist, sondern die Umschaltung.",
   "Kein gemessener Website-Beleg. Belegt über Bibliotheks-Doku (Flickity watchCSS, Swiper Grid, Splide Grid) und das Designsystem der schottischen Regierung. Queensland nennt die Recherche ohne URL.",
   "Container-Queries statt Media-Queries: Dieselbe Komponente schaltet auch in einer schmalen Seitenspalte um."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Leistungen eines Bremer SHK-Betriebs und zwölf Getriebe-Baureihen als ruhiges Raster, das per Container-Query zur Wischreihe wird; Karussell-Rollen, Pfeile und Marker gibt es nur im schmalen Zustand.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "container": "Bühne mit container: reihe / inline-size; die Umschaltung hängt an der Containerbreite, nicht am Fenster",
   "umschaltpunkt": "@container reihe (width < 44rem) → Wischreihe; 44 bis 64rem 2 Spalten (einreihig) bzw. 4 × 3 (zweireihig); ab 64rem 3 Spalten bzw. 6 × 2",
   "wischreihe": "grid-auto-flow column, overflow-x auto, overscroll-behavior-x contain, scroll-snap-type x mandatory, scrollbar-width none; margin-inline −Rand, padding-inline Rand, scroll-padding-inline Rand; Karten scroll-snap-align start",
   "zustand_js": "ResizeObserver an der Bühne liest getComputedStyle(reihe).overflowX; nur bei ‚auto‘: aria-roledescription „Karussell“ am Abschnitt, role group + aria-roledescription „Folie“ + „2 von 6: Heizung“ an den Karten, tabindex 0 und aria-label am Band, Pfeile und Zähler sichtbar (hidden entfernt). Im Raster alles wieder weg.",
   "zaehler": "sichtbarer Bereich „05–06 / 06“, aria-hidden; Ansage aria-live polite nach dem Einrasten",
   "tastatur": "im Karussell-Zustand Pfeil links/rechts, Pos1/Ende am Band",
   "pult": "Regler Container 320 px bis volle Breite, Knöpfe Breit / Seitenspalte (560 px) / Telefon (320 px); gestrichelter Rahmen mit Maß, solange die Bühne schmaler ist",
   "vorfuehrung": "1000 ms Raster, Bühne in 1100 ms auf 360 px (Kurve des Rezepts), drei Pfeildrücke im Abstand von 1100 ms, in 1100 ms zurück auf volle Breite, 1400 ms Pause"
  },
  "ausloeser": "scroll",
  "touch": "Auf dem Telefon ist der Container von Anfang an schmal: Wischreihe mit angeschnittener nächster Karte (80 % bzw. 46 % je Spalte), Einrasten, Pfeile 44 px und Zähler über der Reihe, Marker darunter (einreihig). Kein Selbstlauf.",
  "reduziert": "Pfeile, Marker und Tastatur springen ohne Gleiten; die Vorführung setzt die Containerbreite ohne Übergang. Bild-Zoom bei Hover aus.",
  "korrekturen": {
   "varianten": [
    "einreihig: Raster mit 3 bzw. 2 Spalten, unter 44rem Container eine Wischreihe mit Karten von 80 % Breite, Zähler, Pfeilen und Markern",
    "zweireihig: Raster 6 × 2 bzw. 4 × 3, unter 44rem zwei Reihen mit grid-auto-flow column, eine Spalte (2 Kacheln) pro Schritt; Lesefolge spaltenweise gleich der DOM-Reihenfolge"
   ]
  },
  "geprueft": "03.11.2026",
  "notiz": "Einreihig: Rezept handwerk-werkstatt-klartext, Ohlsen Haustechnik in Bremen-Vegesack, 6 Leistungen (4 Fotos aus medien/handwerk-*, 2 Typo-Karten Notdienst und Wartung), Special Gothic + Atkinson Hyperlegible Next, Signal #FB6100 mit dunkler Schrift (5,7:1). Zweireihig: Rezept industrie-b2b-mittelstand, Tannreuther Antriebstechnik in Schweinfurt, 12 Baureihen mit eigenen technischen SVG-Strichzeichnungen (Zahnräder aus einem Generator), Strichpunkt Sans + Archivo, Rasterlinien 13 % Graphit. Beleg nur über Doku (Flickity watchCSS, Swiper Grid, Splide Grid) und das Designsystem der schottischen Regierung, deshalb quellenbelegt. Native Marker per scroll-marker-group nur innerhalb der Container-Query; ohne ::scroll-marker eigene Buttons. Prüfung 03.11.2026: kein Querscrollen bei 320/390, keine Konsolenfehler, pruef-zugang beide Varianten ohne Befund. Selbsturteil 4.",
  "varianten": [
   {
    "id": "einreihig",
    "name": "Einreihig",
    "wann": "Handwerk, Praxis, Kanzlei, Friseur, Pflege: 4 bis 8 Leistungen oder Teammitglieder, am Desktop alle sichtbar, auf dem Telefon als Wischreihe.",
    "werte": {
     "rezept": "handwerk-werkstatt-klartext",
     "raster": "repeat(3, minmax(0, 1fr)) ab 64rem, repeat(2, …) ab 44rem, Lücke clamp(12px, 1.4vw, 20px)",
     "wischreihe": "grid-auto-columns 80 %",
     "marker": "scroll-marker-group: after nur in der Container-Query; ::scroll-marker 22 × 4 px, aktiv 36 px; Rückfall eigene Buttons 44 × 24 px mit aria-current",
     "gleiten": "400 ms cubic-bezier(0.2, 0, 0.38, 0.9)",
     "karte": "Bildhöhe clamp(110px, 16svh, 200px), ganze Karte als Link über h3 a::after"
    }
   },
   {
    "id": "zweireihig",
    "name": "Zweireihig",
    "wann": "Industrie und D2C (Produktgruppen), Gastro (Gerichte): 8 bis 12 kleine Kacheln mit wenig Text.",
    "werte": {
     "rezept": "industrie-b2b-mittelstand",
     "raster": "repeat(6, …) ab 64rem, repeat(4, …) ab 44rem; Rasterlinien rgba(17, 20, 23, .13)",
     "wischreihe": "grid-template-rows repeat(2, auto), grid-auto-flow column, grid-auto-columns 46 %; snap nur an der oberen Reihe (ungerade Kinder)",
     "schritt": "eine Spalte = 2 Kacheln je Pfeil",
     "lesefolge": "DOM-Reihenfolge = zeilenweise im Raster und spaltenweise in der Reihe; Paare je Spalte gehören zusammen (Stirnrad/Flach, Kegelrad/Schnecke …); reading-flow: grid-columns",
     "gleiten": "500 ms cubic-bezier(0.25, 1, 0.5, 1)",
     "zaehler": "„01–04 / 12“"
    }
   }
  ]
 }
}