{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "akkordeon-panels",
 "name": "Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie",
 "name_en": "Expanding image accordion / flex panels gallery / Horizontal expanding accordion panels",
 "kurz": "Fünf Objekte eines Jenaer Maklers als schmale Streifen; der gewählte wächst auf flex-grow 5 und deckt seine Szene auf, statt sie zu skalieren.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "editorial",
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "elegant",
  "kompakt",
  "editorial",
  "luxuriös"
 ],
 "technik": [
  "css",
  "flexbox",
  "interpolate-size",
  "vanilla-js",
  "details-summary"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Mehrere schmale Bildstreifen stehen nebeneinander, alle mit flex: 1 1 0. Bei Hover oder Fokus wächst ein Streifen auf flex-grow 4 bis 6, die anderen werden schmaler. Das Bild ist mit object-fit: cover verankert und wird dadurch aufgedeckt statt skaliert. Im eingeklappten Zustand steht der Titel senkrecht, im aufgeklappten erscheint der Inhalt waagerecht mit kurzem Versatz. In der Klick-Variante bleibt der gewählte Streifen offen. In der Wellen-Variante wachsen auch die Nachbarn, abgestuft nach Abstand.",
  "warum_es_wirkt": "Alle Inhalte sind gleichzeitig angedeutet, einer steht im Fokus. Das ist kompakt und sehr direkt bedienbar. Weil das Bild aufgedeckt und nicht vergrößert wird, wirkt der Wechsel ruhig und edel. Die fließende Breitenänderung fühlt sich physisch an.",
  "wann_einsetzen": "Für 3 bis 7 gleichrangige Einträge mit starkem Bild: Projekte auf einer Startseite, Leistungen, Kategorien, Team, Standorte, ausgewählte Objekte.",
  "wann_nicht": "Bei mehr als etwa 6 bis 8 Einträgen. Wenn Text im Streifen gelesen werden muss, bevor er sich öffnet. Bei langen Texten in den Panels. Auf schmalen Bildschirmen ohne Umbau auf ein senkrechtes Akkordeon.",
  "varianten": [
   "Horizontal mit Hover und Fokus (Desktop)",
   "Klick: der gewählte Streifen bleibt offen, Buttons mit aria-expanded",
   "Welle: Nachbarn wachsen abgestuft mit",
   "Senkrecht gestapelt für Mobil, Höhe per flex-grow, interpolate-size oder grid-template-rows 0fr → 1fr",
   "Natives details/summary mit ::details-content und interpolate-size: allow-keywords",
   "Vollbild-Hintergrund pro Eintrag beim Hover",
   "Als Inhalts-Sektion mit Text-Panels statt Bildern"
  ],
  "umsetzung": "Reines CSS reicht: .panel { flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow 0.7s cubic-bezier(0.625, 0.05, 0, 1) 50ms } .panel:is(:hover, :focus-within) { flex-grow: 5 }. Das Bild mit object-fit: cover und object-position: center füllen. Den Titel im eingeklappten Zustand mit writing-mode: sideways-lr setzen (Fallback vertical-rl plus Drehung). Den aufgeklappten Inhalt mit fester Breite anlegen, damit er beim Wachsen nicht neu umbricht, und 100 bis 150 ms gestaffelt einblenden. Fallstricke: ohne flex-basis 0 springen die Breiten je nach Inhalt; eine kurze transition-delay von 50 ms dämpft Sprünge beim schnellen Überfahren. Für Klick oder Welle setzt ein kleines Skript flex-grow pro Panel und aria-expanded. Die Produktion bei K72 arbeitet knapper: flex-grow 1 → 2 in 300 ms cubic-bezier(0.215, 0.61, 0.355, 1). Für ein senkrechtes FAQ: details name=\"gruppe\" öffnet exklusiv, die Höhe animiert interpolate-size: allow-keywords mit ::details-content (Chromium).",
  "mobil": "Auf ein senkrechtes Akkordeon umstellen: Panels stapeln, das aktive wächst in der Höhe. Tippen statt Hover.",
  "reduzierte_bewegung": "Breite sofort wechseln oder in höchstens 150 ms. Inhalte nur einblenden, ohne Versatz.",
  "barrierefreiheit": "Jedes Panel braucht einen Button mit aria-expanded und aria-controls. :focus-within muss dasselbe auslösen wie :hover. Links in eingeklappten Panels mit inert aus der Tab-Reihenfolge nehmen. Gedrehten Text mit writing-mode statt rotate setzen, so bleibt er auswählbar. Bildinhalte nicht nur visuell vermitteln, die Eckdaten stehen als Text im Panel."
 },
 "messwerte": {
  "easing": "Produktion K72: cubic-bezier(0.215, 0.61, 0.355, 1) (easeOutCubic); typisch cubic-bezier(0.625,0.05,0,1) oder power3.inOut",
  "dauer_ms": "K72: 300; typisch 600–800",
  "stagger_ms": "Titel 100–150 nach dem Aufklappen",
  "distanz": "K72: flex-grow 1 → 2; typisch 1 → 4–6",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://k72.ca/assets/styles/main.css"
 },
 "kurve": {
  "bezier": [
   0.215,
   0.61,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.215, 0.61, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 72
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Wavy Accordion",
   "url": "https://www.osmo.supply/resource/wavy-accordion",
   "auszeichnung": "",
   "beobachtung": "In der Osmo-Ressourcenliste geführt; Detailseite gesperrt, Verhalten nicht geprüft.",
   "art": "demo"
  },
  {
   "seite": "Osmo – Accordion CSS Animation",
   "url": "https://www.osmo.supply/resource/accordion-css-animation",
   "auszeichnung": "",
   "beobachtung": "In der Osmo-Ressourcenliste geführt; Detailseite nicht geprüft.",
   "art": "demo"
  },
  {
   "seite": "K72",
   "url": "https://k72.ca/en",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Video-Galerie .c-video-gallery: Einträge display flex, flex-grow 1 → 2 bei .-hover, transition flex 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), Höhe 80vh ab 1200px.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo: Wavy Accordion",
   "url": "https://www.osmo.supply/resource/wavy-accordion"
  },
  {
   "titel": "Osmo: Accordion CSS Animation",
   "url": "https://www.osmo.supply/resource/accordion-css-animation"
  }
 ],
 "kombinierbar_mit": [
  "galerie-shared-element-vollbild",
  "token-studio-signatur",
  "token-luxus-weich",
  "blueprint-raster-sichtbar",
  "team-ueber-mich-layout"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "layouts.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 1 Produktionsbeleg; Awwwards-Inspiration-URLs entfernen."
  ],
  "zusammengelegt_aus": [
   "akkordeon-bildgalerie",
   "akkordeon-panels-horizontal"
  ],
  "querverweis_kategorien": [
   "Hero & Section-Layouts"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Fünf Objekte eines Jenaer Maklers als schmale Streifen; der gewählte wächst auf flex-grow 5 und deckt seine Szene auf, statt sie zu skalieren.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "layout": "display: flex; gap 6px; .panel { flex: 1 1 0; min-width: 0; overflow: hidden }",
   "hoehe": "clamp(360px, 57vh, 600px); Telefon 660px senkrecht",
   "hover": {
    "flex_grow": "1 → 5",
    "dauer_ms": 700,
    "easing": "cubic-bezier(0.625, 0.05, 0, 1)",
    "verzoegerung_ms": 50,
    "text_stagger_ms": 120,
    "text_dauer_ms": 600
   },
   "welle": {
    "flex_grow": "aktiv 5, Nachbar 2, übernächster 1,3, Rest 1",
    "dauer_ms": 800,
    "easing": "cubic-bezier(0.625, 0.05, 0, 1)",
    "verzoegerung_ms": 50,
    "text_stagger_ms": 120,
    "text_dauer_ms": 600
   },
   "klick": {
    "flex_grow": "1 → 4",
    "dauer_ms": 300,
    "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)",
    "verzoegerung_ms": 0,
    "text_stagger_ms": 100,
    "text_dauer_ms": 400
   },
   "text": "vier Zeilen gestaffelt: Verzögerung + Stagger × 1…4; translate 14px → 0 mit der Variantenkurve, opacity 500 ms linear; Ausblenden 150 ms linear",
   "titel_zu": "writing-mode: sideways-lr (Fallback vertical-rl + rotate 180°), Libre Caslon Display 2rem; blendet beim Öffnen in 200 ms aus",
   "info_breite": "fest clamp(21rem, 30vw, 29rem), damit der Text beim Aufklappen nicht neu umbricht",
   "bild": "SVG preserveAspectRatio xMidYMid slice (entspricht object-fit: cover, object-position: center)",
   "abdunklung": "zu rgba(8, 20, 31, .26), offen 0, gleiche Kurve und Dauer",
   "reduziert": "flex-grow ohne Übergang, Text opacity 150 ms linear",
   "schriften": "Libre Caslon Display 400 (ab 2rem), Hanken Grotesk 400–600, Geist Mono für Demo-Bedienung",
   "farben": "Grund #FBF9F4, Marke #12364F, Text #2F3133, Linie #D8D2C8, CTA #ED7F1A, Nacht #0B1A26"
  },
  "ausloeser": "hover",
  "touch": "Unter 720 px stapeln sich die Panels senkrecht und wachsen in der Höhe (flex-grow wie am Desktop). Tippen öffnet; ein offenes Panel bleibt offen. Ohne Hover entfällt die Verzögerung von 50 ms.",
  "reduziert": "Breite und Höhe springen ohne Übergang, die Objektdaten blenden in 150 ms ein. Die Vorführung setzt den Zeiger ohne Fahrt und ohne Klickring.",
  "korrekturen": {
   "beschreibung": "Mehrere schmale Bildstreifen stehen nebeneinander, alle mit flex: 1 1 0. Bei Hover oder Fokus wächst ein Streifen auf flex-grow 4 bis 6, die anderen werden schmaler. Das Bild ist mit object-fit: cover verankert und wird dadurch aufgedeckt statt skaliert. Im eingeklappten Zustand steht der Titel senkrecht, im aufgeklappten erscheint der Inhalt waagerecht mit kurzem Versatz. In der Klick-Variante bleibt der gewählte Streifen offen. In der Wellen-Variante wachsen auch die Nachbarn, abgestuft nach Abstand.",
   "warum_es_wirkt": "Alle Inhalte sind gleichzeitig angedeutet, einer steht im Fokus. Das ist kompakt und sehr direkt bedienbar. Weil das Bild aufgedeckt und nicht vergrößert wird, wirkt der Wechsel ruhig und edel. Die fließende Breitenänderung fühlt sich physisch an.",
   "wann_einsetzen": "Für 3 bis 7 gleichrangige Einträge mit starkem Bild: Projekte auf einer Startseite, Leistungen, Kategorien, Team, Standorte, ausgewählte Objekte.",
   "wann_nicht": "Bei mehr als etwa 6 bis 8 Einträgen. Wenn Text im Streifen gelesen werden muss, bevor er sich öffnet. Bei langen Texten in den Panels. Auf schmalen Bildschirmen ohne Umbau auf ein senkrechtes Akkordeon.",
   "varianten": [
    "Horizontal mit Hover und Fokus (Desktop)",
    "Klick: der gewählte Streifen bleibt offen, Buttons mit aria-expanded",
    "Welle: Nachbarn wachsen abgestuft mit",
    "Senkrecht gestapelt für Mobil, Höhe per flex-grow, interpolate-size oder grid-template-rows 0fr → 1fr",
    "Natives details/summary mit ::details-content und interpolate-size: allow-keywords",
    "Vollbild-Hintergrund pro Eintrag beim Hover",
    "Als Inhalts-Sektion mit Text-Panels statt Bildern"
   ],
   "umsetzung": "Reines CSS reicht: .panel { flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow 0.7s cubic-bezier(0.625, 0.05, 0, 1) 50ms } .panel:is(:hover, :focus-within) { flex-grow: 5 }. Das Bild mit object-fit: cover und object-position: center füllen. Den Titel im eingeklappten Zustand mit writing-mode: sideways-lr setzen (Fallback vertical-rl plus Drehung). Den aufgeklappten Inhalt mit fester Breite anlegen, damit er beim Wachsen nicht neu umbricht, und 100 bis 150 ms gestaffelt einblenden. Fallstricke: ohne flex-basis 0 springen die Breiten je nach Inhalt; eine kurze transition-delay von 50 ms dämpft Sprünge beim schnellen Überfahren. Für Klick oder Welle setzt ein kleines Skript flex-grow pro Panel und aria-expanded. Die Produktion bei K72 arbeitet knapper: flex-grow 1 → 2 in 300 ms cubic-bezier(0.215, 0.61, 0.355, 1). Für ein senkrechtes FAQ: details name=\"gruppe\" öffnet exklusiv, die Höhe animiert interpolate-size: allow-keywords mit ::details-content (Chromium).",
   "mobil": "Auf ein senkrechtes Akkordeon umstellen: Panels stapeln, das aktive wächst in der Höhe. Tippen statt Hover.",
   "reduzierte_bewegung": "Breite sofort wechseln oder in höchstens 150 ms. Inhalte nur einblenden, ohne Versatz.",
   "barrierefreiheit": "Jedes Panel braucht einen Button mit aria-expanded und aria-controls. :focus-within muss dasselbe auslösen wie :hover. Links in eingeklappten Panels mit inert aus der Tab-Reihenfolge nehmen. Gedrehten Text mit writing-mode statt rotate setzen, so bleibt er auswählbar. Bildinhalte nicht nur visuell vermitteln, die Eckdaten stehen als Text im Panel."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept immobilien-diskret-hochwertig, erfundener Makler Saalbogen Immobilien aus Jena mit fünf Objekten (Damenviertel, Werk II, Kernberge, Ziegenhain, Westviertel). Fünf eigene SVG-Szenen (Morgen, bedeckt, Abend, blaue Stunde, Innenraum) statt der Logo-Bilder aus medien/; slice wirkt wie object-fit: cover, die Mitte jeder Szene trägt auch im schmalen Streifen. Umschalter Hover / Welle / Klick, Werte darunter. Vorführung: gedachter Zeiger fährt die Panels ab, in der Galerie-Vorschau wechselt nach jeder Runde die Variante. Inspiration (nur Prinzipien): Dämmerungsfoto mit warmen Fenstern (John Pawson), Navy und Antiqua (Deiterhaus, Das Stue), Bildstreifen mit Bildunterschrift (Snøhetta). AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: --meta #85817B → #74716C (4,6:1); Exposé-Link padding-block 2px (Ziel 24 px, margin-top 16 → 14 px, Lage gleich); Fokus im offenen Panel zeigt den Text sofort (:focus-within ohne Staffel-Verzögerung), geschlossene Panels bleiben inert; Kontrastmodus-Rahmen für Knöpfe."
 }
}