{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "karten-faecher-container",
 "name": "Kartenfächer nach Containerbreite",
 "name_en": "Container-driven card fan (typed arithmetic, sibling-index)",
 "kurz": "Sieben Stoffmuster liegen im schmalen Container als Stapel und fächern sich ohne Breakpoint und ohne Skript zu Bogen, Reihe oder Halbkreis auf.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "F",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "verspielt",
  "experimentell"
 ],
 "stimmung_roh": [
  "verspielt",
  "experimentell"
 ],
 "technik": [
  "css",
  "container-queries"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Fünf bis sieben Karten liegen in schmalem Container als leicht versetzter Stapel. Wird der Platz breiter, fächern sie sich stufenlos zu einem Bogen auf, jede mit eigenem Winkel und Abstand. Es gibt keinen Breakpoint und kein Skript: Winkel und Versatz ergeben sich aus der Position der Karte und der Breite des Containers.",
  "warum_es_wirkt": "Die Komposition reagiert wie ein Objekt auf dem Tisch statt in Stufen umzubrechen. In einer Seitenspalte bleibt sie ruhig, in voller Breite wird sie zur Geste.",
  "wann_einsetzen": "Wenige Bildkarten mit Gewicht: Kollektion, Programm-Highlights, Projekte, Produkte einer Reihe. Kreativstudio, Mode, Kultur, D2C.",
  "wann_nicht": "Nicht für Inhalte, die man vergleichen oder lesen muss (Texte auf gedrehten Karten). Nicht für mehr als sieben Karten. Nicht in ruhigen Rezepten (Kanzlei, Praxis, Pflege). Nicht zusammen mit einem zweiten verspielten Effekt in derselben Ansicht.",
  "varianten": [
   "bogen: Winkel von −12° bis +12° über die Reihe",
   "facher-gerade: nur Versatz, kein Winkel",
   "kreis: bei sehr breitem Container als Halbkreis"
  ],
  "umsetzung": "1. Liste mit container-type: inline-size. Karten absolut oder im Grid übereinander (grid-area: 1/1).\n2. --t: calc((100cqi - 20rem) / 40rem), begrenzt mit clamp(0, …, 1), als Auffächer-Grad.\n3. --i: calc(sibling-index() - (sibling-count() + 1) / 2) als Position relativ zur Mitte.\n4. rotate: calc(var(--i) * 6deg * var(--t)); translate: calc(var(--i) * 4rem * var(--t)) calc(abs(var(--i)) * 0.6rem * var(--t)).\n5. Fokus und Hover holen die Karte nach vorn (z-index, kleiner Versatz nach oben).\n6. @supports-Fallback: statischer Stapel bzw. Raster. Ohne sibling-index() --i per Inline-Style setzen.",
  "mobil": "Schmaler Container ergibt den ruhigen Stapel. Wischen ist nicht nötig, die Karten stehen als Liste darunter.",
  "reduzierte_bewegung": "Keine Zeitbewegung. Hover-Anheben ohne Übergang.",
  "barrierefreiheit": "DOM-Reihenfolge = Lesereihenfolge. Fokus holt die Karte sichtbar nach vorn. Kein Text auf stark gedrehten Karten. Bei 200 % Zoom wird der Container schmaler, das Ergebnis ist der Stapel. Kontrast normal."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "Hover und Fokus nach UI-Token, sonst keine Zeitbewegung",
  "stagger_ms": "",
  "distanz": "Winkel bis ±12°, Versatz bis 4rem je Schritt",
  "sonstiges": "",
  "herkunft": "eigene Festlegung",
  "quelle": "eigene Festlegung (Techniken-Recherche 03.11.2026)"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "MDN: Using typed arithmetic",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units/Using_typed_arithmetic",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Beispiel eines Fächers, der mit der Containerbreite zum Kreis wird. Länge geteilt durch Länge ergibt eine Zahl.",
   "art": "artikel"
  },
  {
   "seite": "caniuse: typed division produces unitless number",
   "url": "https://caniuse.com/mdn-css_types_calc_typed_division_produces_unitless_number",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Chrome 140, Safari 26.0, Firefox 158 (13.10.2026). Damit läuft typisierte Arithmetik in allen drei Engines (Nebenbefund 2 der Techniken-Recherche).",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: Using typed arithmetic",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units/Using_typed_arithmetic"
  },
  {
   "titel": "Smashing: Mathematical layouts with sibling-index() and sibling-count()",
   "url": "https://smashingmagazine.com/2026/05/mathematical-layouts-sibling-index-sibling-count/"
  }
 ],
 "kombinierbar_mit": [
  "gestaffelte-einblendung",
  "fluide-typo-clamp-cqi",
  "flick-karten-stapel",
  "css-native-karussell"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Techniken-Recherche 03.11.2026"
  ],
  "pruefnotizen": [
   "Kein Website-Beleg. Die Technik ist aus der Doku abgeleitet. Die Firefox-Angaben im Smashing-Artikel sind veraltet.",
   "Typisierte Arithmetik läuft seit Firefox 158 (13.10.2026) in allen Engines (Nebenbefund 2 der Techniken-Recherche). Ob sibling-index() und sibling-count() in Safari und Firefox laufen, nennt die Recherche nicht; darum bleibt der Inline-Index als Rückfall Pflicht.",
   "Die Formelwerte oben sind der Entwurf der Recherche. Die gebauten Werte stehen im Bau-Block (bau.werte)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Sieben Stoffmuster liegen im schmalen Container als Stapel und fächern sich ohne Breakpoint und ohne Skript zu Bogen, Reihe oder Halbkreis auf.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "grad": "--t: clamp(0, (100cqi - 22rem) / 38rem, 1) am Fächer (Container: .faecher-feld, inline-size); 0 bis 352 px, 1 ab 960 px",
   "position": "--i: calc(sibling-index() - (sibling-count() + 1) / 2); --h: calc((sibling-count() - 1) / 2); --u: calc(var(--i) / var(--h)) von -1 bis 1",
   "karte": "Breite min(13rem, 60cqi), Muster 4 : 5 mit Zackenschere (clip-path polygon), Karten per grid-area 1 / 1 übereinander",
   "bogen_x": "calc(var(--u) * var(--t) * min(26rem, (100cqi - Kartenbreite) / 2 - .5rem) + var(--i) * .45rem * (1 - var(--t)))",
   "bogen_y": "calc(var(--u) * var(--u) * var(--t) * 2.6rem + var(--i) * -.25rem * (1 - var(--t)))",
   "bogen_winkel": "calc(var(--u) * (12deg * var(--t) + 3deg * (1 - var(--t)))): ±12° offen, ±3° im Stapel; transform-origin 50% 90%",
   "gerade": "x wie bogen mit min(30rem, …), rotate: none",
   "kreis": "--tk: clamp(0, (100cqi - 26rem) / 34rem, 1); rotate: calc(var(--u) * (80deg * var(--tk) + 3deg * (1 - var(--tk)))); transform-origin: 50% calc(100% + Kartenbreite * .62); Polster unten calc(2.4rem + Kartenbreite * 1.1 * var(--tk))",
   "fokus": "Karte z-index 20, Link transform translateY(-1.4rem) scale(1.04); vor 300 ms cubic-bezier(0.16, 1, 0.3, 1), zurück 195 ms cubic-bezier(0.7, 0, 0.84, 0) (token-toggle-asymmetrisch, Faktor 0,65); Lage im Fächer über translate/rotate ohne Übergang",
   "tastatur": "Tab in DOM-Reihenfolge, zusätzlich Pfeil links/rechts zwischen den Karten",
   "rueckfall_index": "ohne sibling-index(): --idx im style-Attribut jeder Karte (-3 … 3), --halb: 3 am ol",
   "rueckfall_division": "ohne Länge ÷ Länge: --t und --tk in Stufen 0 / .5 / 1 per @container (width >= 40rem), (width >= 60rem)",
   "muster": "eigene CSS-Muster: Fischgrat als SVG-Kachel, Cord, Bouclé, Moiré (zwei repeating-radial-gradient), Tweed, Satin, Glencheck; Körnung feTurbulence als data-URI, soft-light .5",
   "browser_live": "Headless Chromium 153 (Arbeitskopie, 03.11.2026): sibling-index(), sibling-count() und typisierte Division (100cqi / 1rem) laufen; die Wege „Inline-Index“ und „Stufen“ im Pult zeigen die Rückfälle im selben Browser.",
   "browser_rueckfall": "Ob sibling-index() in Safari und Firefox läuft, ist nicht geprüft; dort greift der Inline-Index (nur im Headless-Chromium über den Schalter gesehen).",
   "vorfuehrung": "Containerbreite atmet in 9000 ms zwischen voller Breite und 360 px, in der weiten Phase hebt sich je eine Karte; reduziert harte Stufen voll / 760 / 380 px alle 2200 ms",
   "ui": "150 ms cubic-bezier(0.16, 1, 0.3, 1)",
   "schriften": "Zalando Sans (wdth 112–125), Fragment Mono für Etiketten; Werkbank Geist Mono"
  },
  "ausloeser": "ziehen",
  "touch": "Startet in Gerätebreite, also als Stapel. Regler und breiterer Griff ziehen den Container bis 1240 px (verkleinert dargestellt). Tippen auf eine Karte springt zur Zeile in der Stofftabelle darunter, die alle Angaben als Text trägt.",
  "reduziert": "Keine Zeitbewegung: Fokus und Zeiger heben die Karte ohne Übergang. Die Vorführung wechselt hart zwischen festen Breiten.",
  "korrekturen": {},
  "geprueft": "03.11.2026",
  "notiz": "Rezept mode-beauty-kollektion, erfundene Weberei Kettbaum aus Mönchengladbach, Musterbuch H/W 2026 mit sieben selbst gezeichneten Stoffmustern (CSS und SVG, keine Fotos). Unter dem Fächer eine echte Tabelle mit Bindung, Material, Gewicht und Meterpreis, weil auf gedrehten Karten nur Name und Nummer stehen. Drei Varianten (?v=bogen|facher-gerade|kreis), Breitenregler und ziehbarer Griff wie in fluide-typo-clamp-cqi, Rechenweg im Pult (Live, Inline-Index, Stufen). Live gesehen in Headless Chromium 153: sibling-index(), sibling-count() und Länge ÷ Länge laufen. Die Formel der Recherche (rotate i × 6deg) ergibt bei sieben Karten ±18°; gebaut ist die normierte Lage --u, damit der Winkel unabhängig von der Kartenzahl bei ±12° endet. Zugang 03.11.2026: ohne Befund. Selbsturteil 4.",
  "varianten": [
   {
    "id": "bogen",
    "name": "Bogen",
    "wann": "Kollektion, Programm-Highlights, Produktreihe im Kreativstudio oder in der Mode: die Karten öffnen sich wie in der Hand gehalten.",
    "werte": {
     "winkel": "±12°",
     "y": "Parabel 2.6rem",
     "x": "bis 26rem je Seite"
    }
   },
   {
    "id": "facher-gerade",
    "name": "Gerade Reihe",
    "wann": "Wenn Karten lesbar bleiben sollen (D2C, Kultur-Programm): nur Versatz, kein Winkel.",
    "werte": {
     "winkel": "keiner",
     "x": "bis 30rem je Seite"
    }
   },
   {
    "id": "kreis",
    "name": "Halbkreis",
    "wann": "Volle Breite mit Bühnencharakter (Kreativstudio, Kultur): bei breitem Container ein Halbkreis um einen Punkt unter den Karten.",
    "werte": {
     "winkel": "±80°",
     "grad": "--tk ab 26rem, voll ab 60rem",
     "drehpunkt": "50% calc(100% + Kartenbreite × .62)"
    }
   }
  ]
 }
}