{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "akkordeon-hoehe-auto",
 "name": "Akkordeon mit Höhenanimation auf auto",
 "name_en": "Accordion animating to height:auto (interpolate-size / calc-size)",
 "kurz": "Akkordeon-Einträge gleiten auf ihre natürliche Höhe auf, ohne JavaScript-Messung: per Grid 0fr → 1fr, interpolate-size oder calc-size.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "ruhig",
  "funktional",
  "aufgeräumt"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "motion"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Akkordeon-Einträge öffnen sich mit weicher Höhenanimation von 0 auf die natürliche Höhe, ohne Messung per JavaScript. 2) Drei Wege: ::details-content als Grid mit grid-template-rows 0fr → 1fr, interpolate-size: allow-keywords für Transitions auf height: auto oder calc-size(auto, size). 3) Das Plus dreht sich zum Kreuz, der Inhalt blendet etwas länger ein, als die Höhe braucht. 4) Mit <details name=\"gruppe\"> ist immer nur ein Eintrag offen.",
  "warum_es_wirkt": "Lange galt: height: auto lässt sich nicht animieren. Jetzt geht es in CSS. Der Inhalt schiebt die Nachbarn sichtbar weg, statt zu springen. So bleibt klar, woher er kommt.",
  "wann_einsetzen": "FAQ, Leistungsdetails, „Mehr anzeigen“, Filter-Panels, mobile Navigation.",
  "wann_nicht": "Bei sehr langem Inhalt wirkt die Animation zäh: Dauer begrenzen oder ganz weglassen. Wenn Inhalte über die Seitensuche auffindbar sein müssen: <details> oder hidden=\"until-found\" nutzen, keine eigene Lösung mit display: none.",
  "varianten": [
   "::details-content als Grid, grid-template-rows 0fr → 1fr (Cuberto; läuft auch in Safari 18.4+)",
   "block-size 0 → auto mit interpolate-size: allow-keywords auf :root (Webflow, Chrome-Leitfaden)",
   "height 0 → calc-size(auto, size) innerhalb von @supports, ohne globale Einstellung (Pangram Pangram); calc-size erlaubt auch Rechnungen wie calc-size(max-content, size + 20px)",
   "FAQ mit Suche und Sprunglinks: Suchfeld filtert live, Treffer per ::highlight() markiert, Themen-Anker und Direktlink je Frage; Filtern als element-scoped View Transition (Chrome 147+)",
   "Leistungsliste mit Bild: immer ein Eintrag offen, das Bild daneben wechselt per element-scoped View Transition; auf dem Telefon wandert es in den offenen Eintrag",
   "Akkordeon mit Motion (JS, Vue, Radix)",
   "Horizontales Panel-Akkordeon (siehe Layouts: akkordeon-panels-horizontal)"
  ],
  "umsetzung": "Grid: details::details-content { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease-out, opacity .4s ease-out, content-visibility .3s allow-discrete } details[open]::details-content { grid-template-rows: 1fr; opacity: 1 }. Das Kind braucht min-height: 0 und overflow: hidden, Polster gehört ins Innere.\n\ninterpolate-size: :root { interpolate-size: allow-keywords } details::details-content { block-size: 0; overflow: clip; transition: block-size .5s ease-in-out, content-visibility .5s allow-discrete } details[open]::details-content { block-size: auto; transition-duration: .4s; transition-timing-function: ease-out }. Die Transition am Zielzustand bestimmt die Richtung: auf 400 ms ease-out, zu 500 ms ease-in-out.\n\ncalc-size: in @supports (height: calc-size(auto, size)) height: 0 → calc-size(auto, size).\n\nIcon: summary .zeichen { transition: rotate .3s ease-out } details[open] .zeichen { rotate: 45deg }. Exklusiv: <details name=\"faq\">. Browser ohne Unterstützung klappen ohne Animation, die Funktion bleibt. Bei großen Inhalten höchstens 400 bis 500 ms.",
  "mobil": "Identisch. Große Trefferfläche für die ganze Summary-Zeile, Nebeninfos ausblenden.",
  "reduzierte_bewegung": "transition: none: sofortiges Auf und Zu. Achtung: ::details-content wird von * nicht erfasst, die Regel braucht einen eigenen Selektor.",
  "barrierefreiheit": "<details>/<summary> liefert Semantik und Tastaturbedienung. Bei eigenem Markup: button mit aria-expanded und aria-controls. Eingeklappter Inhalt darf nicht fokussierbar sein (hidden oder inert). Fokus auf der Summary sichtbar machen."
 },
 "messwerte": {
  "easing": "ease-out",
  "dauer_ms": "300 Höhe, 400 Opacity (Cuberto)",
  "stagger_ms": "",
  "distanz": "grid-template-rows 0fr → 1fr",
  "sonstiges": "Drei reale Techniken: ::details-content + Grid, interpolate-size, calc-size mit @supports",
  "herkunft": "beobachtet",
  "quelle": "https://cuberto.com/_astro/Footer.v_lo1qnf.css"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   0.58,
   1
  ],
  "css": "cubic-bezier(0, 0, 0.58, 1)",
  "name": "ease-out",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Chrome Developers: Animate to intrinsic sizes",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/css/animate-to-intrinsic-sizes",
   "auszeichnung": "",
   "beobachtung": "interpolate-size: allow-keywords auf :root; Container 0.4 s ease-out; calc-size-Badge 0.3 s ease; Zuklappen 0.5 s ease-in-out; transitionend → hidden; aria-expanded synchronisieren; Reduced Motion: transition none.",
   "art": "artikel"
  },
  {
   "seite": "Motion Examples: Accordion",
   "url": "https://motion.dev/examples/js-accordion",
   "auszeichnung": "",
   "beobachtung": "Offizielles Akkordeon-Beispiel (auch Vue/Radix).",
   "art": "demo"
  },
  {
   "seite": "Cuberto",
   "url": "https://cuberto.com/",
   "auszeichnung": "",
   "beobachtung": "Footer.css: details::details-content{display:grid; grid-template-rows:0fr; opacity:0; transition: grid-template-rows .3s ease-out, opacity .4s ease-out, content-visibility .3s allow-discrete} → [open] 1fr.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Webflow",
   "url": "https://webflow.com/",
   "auszeichnung": "",
   "beobachtung": "Inline-CSS: ':root { interpolate-size: allow-keywords; /* To animate accordions */ }' für <details>-Akkordeons, Icon-Linie rotiert.",
   "art": "website"
  },
  {
   "seite": "Pangram Pangram",
   "url": "https://pangrampangram.com/",
   "auszeichnung": "",
   "beobachtung": "FAQ: .faq-category__answer height 0 → auto, mit @supports (height: calc-size(auto, size)) progressiv animiert; transition height/margin/opacity var(--duration-long), overflow clip.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome: Animate to intrinsic sizes",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/css/animate-to-intrinsic-sizes"
  }
 ],
 "kombinierbar_mit": [
  "token-toggle-asymmetrisch",
  "token-federnd-verspielt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 3 Produktionsbelege, alle mit moderner CSS-Lösung ohne JS-Messung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Akkordeon-Einträge gleiten auf ihre natürliche Höhe auf, ohne JavaScript-Messung: per Grid 0fr → 1fr, interpolate-size oder calc-size.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "ease-out = cubic-bezier(0, 0, 0.58, 1) · Zuklappen in Variante interpolate-size: ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)",
   "dauer_ms": "Grid und calc-size: Höhe 300, Deckkraft 400 · interpolate-size: auf 400, zu 500 · Icon 300 · Hover 150",
   "grid": "details::details-content { display: grid; grid-template-rows: 0fr → 1fr; opacity: 0 → 1; transition: grid-template-rows .3s, opacity .4s, content-visibility .3s allow-discrete }",
   "interpolate_size": "interpolate-size: allow-keywords; ::details-content block-size: 0 → auto; overflow: clip",
   "calc_size": "@supports (height: calc-size(auto, size)) { ::details-content height: 0 → calc-size(auto, size); overflow: clip }",
   "icon": "Plus rotate 0 → 45deg (Kreuz), Kreis füllt sich",
   "exklusiv": "<details name=\"faq\">",
   "rueckfall": "ohne interpolate-size bzw. calc-size: Grid-Technik; ohne ::details-content: auf und zu ohne Animation"
  },
  "ausloeser": "klick",
  "touch": "Identisch, Tippen auf die Zeile; Trefferfläche mindestens 64 px hoch. Grundvariante unter 600 px ohne Untertitel, Bild unter dem Text. FAQ: Themen untereinander, ohne Tastenhinweis. Leistungen: das Bild wandert unter 860 px in den offenen Eintrag.",
  "reduziert": "transition: none auf ::details-content und Icons: sofortiges Auf und Zu. Keine View Transitions: Suche filtert sofort, das Bild der Leistungsliste wechselt ohne Überblendung, Sprunglinks springen ohne weiches Scrollen.",
  "korrekturen": {
   "beschreibung": "1) Akkordeon-Einträge öffnen sich mit weicher Höhenanimation von 0 auf die natürliche Höhe, ohne Messung per JavaScript. 2) Drei Wege: ::details-content als Grid mit grid-template-rows 0fr → 1fr, interpolate-size: allow-keywords für Transitions auf height: auto oder calc-size(auto, size). 3) Das Plus dreht sich zum Kreuz, der Inhalt blendet etwas länger ein, als die Höhe braucht. 4) Mit <details name=\"gruppe\"> ist immer nur ein Eintrag offen.",
   "warum_es_wirkt": "Lange galt: height: auto lässt sich nicht animieren. Jetzt geht es in CSS. Der Inhalt schiebt die Nachbarn sichtbar weg, statt zu springen. So bleibt klar, woher er kommt.",
   "wann_einsetzen": "FAQ, Leistungsdetails, „Mehr anzeigen“, Filter-Panels, mobile Navigation.",
   "wann_nicht": "Bei sehr langem Inhalt wirkt die Animation zäh: Dauer begrenzen oder ganz weglassen. Wenn Inhalte über die Seitensuche auffindbar sein müssen: <details> oder hidden=\"until-found\" nutzen, keine eigene Lösung mit display: none.",
   "varianten": [
    "::details-content als Grid, grid-template-rows 0fr → 1fr (Cuberto; läuft auch in Safari 18.4+)",
    "block-size 0 → auto mit interpolate-size: allow-keywords auf :root (Webflow, Chrome-Leitfaden)",
    "height 0 → calc-size(auto, size) innerhalb von @supports, ohne globale Einstellung (Pangram Pangram); calc-size erlaubt auch Rechnungen wie calc-size(max-content, size + 20px)",
    "FAQ mit Suche und Sprunglinks: Suchfeld filtert live, Treffer per ::highlight() markiert, Themen-Anker und Direktlink je Frage; Filtern als element-scoped View Transition (Chrome 147+)",
    "Leistungsliste mit Bild: immer ein Eintrag offen, das Bild daneben wechselt per element-scoped View Transition; auf dem Telefon wandert es in den offenen Eintrag",
    "Akkordeon mit Motion (JS, Vue, Radix)",
    "Horizontales Panel-Akkordeon (siehe Layouts: akkordeon-panels-horizontal)"
   ],
   "umsetzung": "Grid: details::details-content { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease-out, opacity .4s ease-out, content-visibility .3s allow-discrete } details[open]::details-content { grid-template-rows: 1fr; opacity: 1 }. Das Kind braucht min-height: 0 und overflow: hidden, Polster gehört ins Innere.\n\ninterpolate-size: :root { interpolate-size: allow-keywords } details::details-content { block-size: 0; overflow: clip; transition: block-size .5s ease-in-out, content-visibility .5s allow-discrete } details[open]::details-content { block-size: auto; transition-duration: .4s; transition-timing-function: ease-out }. Die Transition am Zielzustand bestimmt die Richtung: auf 400 ms ease-out, zu 500 ms ease-in-out.\n\ncalc-size: in @supports (height: calc-size(auto, size)) height: 0 → calc-size(auto, size).\n\nIcon: summary .zeichen { transition: rotate .3s ease-out } details[open] .zeichen { rotate: 45deg }. Exklusiv: <details name=\"faq\">. Browser ohne Unterstützung klappen ohne Animation, die Funktion bleibt. Bei großen Inhalten höchstens 400 bis 500 ms.",
   "mobil": "Identisch. Große Trefferfläche für die ganze Summary-Zeile, Nebeninfos ausblenden.",
   "reduzierte_bewegung": "transition: none: sofortiges Auf und Zu. Achtung: ::details-content wird von * nicht erfasst, die Regel braucht einen eigenen Selektor.",
   "barrierefreiheit": "<details>/<summary> liefert Semantik und Tastaturbedienung. Bei eigenem Markup: button mit aria-expanded und aria-controls. Eingeklappter Inhalt darf nicht fokussierbar sein (hidden oder inert). Fokus auf der Summary sichtbar machen."
  },
  "geprueft": "02.11.2026",
  "notiz": "FAQ der erfundenen Fahrschule Spurwechsel, Augsburg, mit fünf <details>-Einträgen (Klassen, Kosten, Ablauf, B197, BF17). Gestaltung nach Rezept fahrschule-freundlich-buchbar: Bricolage Grotesque (variabel, opsz und wdth) für Headline, Fragen und Kennzeichen, Atkinson Hyperlegible Next für Text, Navy #142B50 auf kühlem Hellgrau #EEF3F7, Kennzeichen-Gelb #FFD60A nur als Fläche hinter Navy (Markierung, offene Nummer, Knopf), Himmelblau als Sekundärton. Statt Fotos eigene SVG-Tafeln je Antwort: Klassen-Piktogramme, Kostenbalken mit Rechenbeispiel, gezeichnete Straße mit fünf Stationen, Schaltkulissen, BF17 mit Auto von oben. Umschalter für die drei Techniken (Grid, interpolate-size, calc-size) und für exklusives Öffnen per name; die verwendeten Werte stehen darunter. Vorführung tippt die Einträge nacheinander an, ein Ring markiert den gedachten Klick. In Chrome geprüft: alle drei Varianten animieren, interpolate-size klappt sichtbar langsamer zu. Bewegungswerte unverändert. Varianten 01.11.2026: Umschalter im Pult (fest unten rechts, data-fundus-pult) für Basis, FAQ mit Suche und Leistungen; Variante steht in der URL (?v=). Der Technik-Schalter (Grid, interpolate-size, calc-size) gilt für alle drei, jede Variante setzt eigene Dauer und Kurve über CSS-Variablen. FAQ für die erfundene Buchhaltungssoftware Ordnerlos (Rezept saas), Leistungen für das erfundene Büro Ostrand Architekten, Leipzig (Rezept architektur) mit selbst erzeugten axonometrischen SVG-Zeichnungen. Element-scoped View Transitions als Verbesserung beim Filtern und beim Bildwechsel. In Chromium 153 (headless) bricht ein element-scoped Übergang ab, wenn ein benanntes Element verschwindet; deshalb verlieren wegfallende Fragen vorher ihren Namen. Vorführung je Variante: Basis tippt die Fragen an, FAQ tippt „export“ und „passkey“ und springt zu „Serverstandort“, Leistungen öffnet die Einträge nacheinander.",
  "varianten": [
   {
    "id": "basis",
    "name": "FAQ Fahrschule, natives details",
    "wann": "Kurzes FAQ oder Leistungsdetails mit fünf bis acht Einträgen und einem Bild je Antwort; zeigt die drei CSS-Techniken am nativen <details> mit ::details-content.",
    "werte": {
     "rezept": "fahrschule-freundlich-buchbar",
     "kurve": "ease-out = cubic-bezier(0, 0, 0.58, 1); interpolate-size zu: cubic-bezier(0.42, 0, 0.58, 1)",
     "dauer_ms": "Grid und calc-size: Höhe 300, Deckkraft 400 · interpolate-size: auf 400, zu 500 · Icon 300",
     "icon": "Plus rotate 0 → 45deg",
     "exklusiv": "<details name=\"faq\">"
    }
   },
   {
    "id": "faq",
    "name": "FAQ mit Suche und Sprunglinks",
    "wann": "Lange FAQ mit Themen, etwa Software, Kanzlei, Praxis oder Verein: Besucher suchen ein Wort, springen zu einem Thema oder teilen den Link zu einer Frage.",
    "werte": {
     "rezept": "saas-produkt-praezise",
     "schrift": "Geist 400 bis 600, Labels Geist Mono",
     "kurve": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
     "dauer_ms": "Höhe 200, Deckkraft 250; interpolate-size auf und zu 200; Pfeil rotate 180deg in 200",
     "suche": "input mit 140 ms Entprellung; jedes Wort muss vorkommen, Umlaute normalisiert; bei höchstens 3 Treffern öffnen sie sich; leere Themen und Sprunglinks werden ausgegraut",
     "markierung": "CSS Custom Highlight API, ::highlight(f-treffer) #ffe27a; ohne API keine Markierung",
     "filter_uebergang": "element.startViewTransition auf der Fragenliste (element-scoped, Chrome 147+), view-transition-name: match-element und view-transition-class: f-teil; Gruppe 200 ms, neu Deckkraft und 6px y in 200 ms, alt 160 ms; wegfallende Einträge verlieren vorher ihren Namen; ohne Unterstützung wird sofort gefiltert",
     "exklusiv": "name je Thema, während der Suche aufgehoben",
     "sprunglinks": "Themen-Anker mit scroll-margin-top 24px, Direktlink #frage-… öffnet und scrollt, Taste / fokussiert die Suche"
    }
   },
   {
    "id": "leistungen",
    "name": "Leistungsliste mit Bild",
    "wann": "Leistungen, Typologien oder Module mit je einem Bild, etwa Architektur, Handwerk, Kanzlei oder Kurs: ein Eintrag ist offen, das Bild daneben zeigt, worum es geht.",
    "werte": {
     "rezept": "architektur-ruhiges-raster",
     "schrift": "Hanken Grotesk 400 und 450, offener Eintrag kursiv",
     "kurve": "auf cubic-bezier(0.1, 0.9, 0.3, 1), zu cubic-bezier(0.1, 0.6, 0.4, 1)",
     "dauer_ms": "Panel auf und zu 500, Bild aus 500, Bild ein 750, Bildunterschrift aus 250 und ein 500 (150 verzögert)",
     "zeichen": "Plus wird Minus: senkrechter Strich scale 1 → 0, keine Diagonale",
     "bildwechsel": "figure.startViewTransition (element-scoped, Chrome 147+): alt Deckkraft 1 → 0, neu Deckkraft 0 → 1 und scale 1.04 → 1; ohne Unterstützung dieselben Werte per WAAPI",
     "bild": "4:5, Fläche #e1e3e3, Axonometrie als Inline-SVG",
     "exklusiv": "immer, <details name=\"leistung\">",
     "telefon": "unter 860 px wandert das Bild in den offenen Eintrag"
    }
   }
  ]
 }
}