/** * agenic Komponenten-CSS – Accordion (Organismus) — Figma `accordion` (852:2839) + * `accordion-item` (851:2788), gemessen 10.08.2026. Theme light·dark × Größe M·L; * Status offen·zu = nativer details/summary-State. Frage Copy/M (L: Copy/L), * Antwort grau, Stufe seit 3.89.0 am Control (Copy/S·M·L, Vorgabe M — * die Quelle führt S), Trenner unten, Chevron Icon/border(-inverse) = currentColor. * Kontrakt: kontrakte-welle-b-10-08. */ .ag-accordion, .ag-accordion * { box-sizing: border-box; } .ag-accordion { --ag-accordion-fg: var(--color-text-standard); --ag-accordion-muted: var(--color-text-grey); /* Figma Text/grey */ --ag-accordion-border: var(--color-border); /* Figma Border */ --ag-accordion-space-before: 0px; --ag-accordion-space-after: 0px; /* Antwort-Textgröße, wählbar seit 3.89.0 (Entscheidung Vincent, 25.08.2026). Vorgabe M — die Modifier unten überschreiben sie. Stufen = die Copy-Leiter aus Figma, kein neuer Wert. */ --ag-accordion-antwort-fs: var(--fs-300); /* Copy/M 16 */ --ag-accordion-antwort-lh: calc(21 / 16); /* Copy/M 21 */ /* Chevron-Drehung, seit 3.125.0 als L3-Variablen (Auftrag Vincent, 26.08.2026). Bis 3.124.0 standen Dauer und Kurve fest im Regelblock; jetzt kann ein Konsument sie an seine eigene Bewegung koppeln — ag_accordion_text_panel bindet sie an --ag-accordion-text-panel-wechsel-*, damit Pfeil und Textwechsel synchron laufen. Die Defaults sind unverändert 250 ms / ease-standard: kein Bestandsbruch für ag_accordion und ag_faq. ANGEMERKT: --motion-base und --ease-standard sind L1-Altbestand und gehören NICHT zur Figma-Motion-Leiter (Values/motion/duration|easing). 250 ms hat dort keine Entsprechung (xs 150, s 350) — deshalb hier nicht stillschweigend umgestellt, sondern als Befund gemeldet. */ --ag-accordion-chevron-dauer: var(--motion-base); --ag-accordion-chevron-ease: var(--ease-standard); --ag-accordion-chevron-zu: 0deg; --ag-accordion-chevron-offen: 180deg; margin-block-start: var(--ag-accordion-space-before); margin-block-end: var(--ag-accordion-space-after); font-family: var(--font-sans); color: var(--ag-accordion-fg); letter-spacing: -0.02em; } .ag-accordion--dark { --ag-accordion-fg: var(--color-text-inverse-soft); --ag-accordion-muted: var(--color-text-grey-inverse); --ag-accordion-border: var(--color-border-inverse); } /* Stufen der Antwort-Textgröße. Bis 3.88.0 stand die Antwort fest auf Copy/S; seit 3.89.0 wählt das Control zwischen den drei Copy-Stufen, die das Design System führt (tokens.css: --fs-200/300/600). Vorgabe M, siehe Variablenblock oben. */ .ag-accordion--antwort-s { --ag-accordion-antwort-fs: var(--fs-200); /* Copy/S 14 */ --ag-accordion-antwort-lh: calc(19 / 14); /* Copy/S 19 */ } .ag-accordion--antwort-m { --ag-accordion-antwort-fs: var(--fs-300); /* Copy/M 16 */ --ag-accordion-antwort-lh: calc(21 / 16); /* Copy/M 21 */ } .ag-accordion--antwort-l { --ag-accordion-antwort-fs: var(--fs-600); /* Copy/L 24 */ --ag-accordion-antwort-lh: calc(32 / 24); /* Copy/L 32 */ } .ag-accordion__item { border-bottom: var(--border-width-xs) solid var(--ag-accordion-border); } .ag-accordion__frage { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-m); padding: var(--spacing-m) 0; /* Item-Padding m 16 */ cursor: pointer; list-style: none; /* Marker weg */ font-size: var(--fs-300); /* Copy/M 16/21 */ line-height: calc(21 / 16); font-weight: var(--fw-light); } .ag-accordion__frage::-webkit-details-marker { display: none; } /* Die Frage ist seit 6.20.0 eine echte Überschrift (Default h3, Control `frage_tag`) — damit Suchmaschinen und Screenreader die Gliederung lesen. Das darf die Optik nicht anfassen: `font: inherit` holt Schriftgrad, Zeilenhöhe, Gewicht und Familie vom zurück, das sie weiterhin allein setzt (auch für die Größe L). Ohne den Reset zeigt der Browser seine eigene h3-Optik — fett, größer, mit Außenabstand. Doppelklasse, nicht Einzelklasse: Kit und Theme stylen h1–h6 global mit Spezifität (0,1,1) und schlagen sonst jede Einzelklasse (agenic-figma-zu-widget, „Gegen Kit-Regeln absichern"). Kein !important. */ .ag-accordion .ag-accordion__frage-text { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; padding: 0; } .ag-accordion--l .ag-accordion__frage { font-size: var(--fs-600); /* Größe L: Copy/L 24/32 */ line-height: calc(32 / 24); } .ag-accordion__chevron { flex: 0 0 auto; transform: rotate(var(--ag-accordion-chevron-zu)); transition: transform var(--ag-accordion-chevron-dauer) var(--ag-accordion-chevron-ease); } .ag-accordion__chevron path { stroke: currentColor; } /* Figma Icon/border(-inverse) */ .ag-accordion__item[open] .ag-accordion__chevron { transform: rotate(var(--ag-accordion-chevron-offen)); } /* Pfeil quer statt hoch/runter — für Konsumenten, die den Fließtext NEBEN die Liste stellen (Auftrag Vincent, 26.08.2026: „Pfeil soll hier nach links und rechts gehen"). Das Icon zeigt von Haus aus nach unten; −90° dreht es nach rechts, +90° nach links. Zu = nach rechts (›), offen = nach links (‹) — Auftrag Vincent, 26.08.2026: „dreh die pfeile genau um. also beim aufklappen < eingeklappt >". Das ist die gewohnte Lesart: › lädt zum Aufklappen ein, ‹ zeigt den offenen Zustand. Die erste Fassung hatte es andersherum (der offene Eintrag zeigte auf seinen Text rechts daneben) — verworfen. Der Weg zwischen beiden Stellungen führt über die Unten-Stellung — dieselben 180° sichtbare Drehung wie bei der vertikalen Variante, nur um die andere Achse. Modifier statt Umbau der Grundregel: ag_accordion und ag_faq bleiben unberührt (Markup und Darstellung dort zeichengenau wie vorher). */ .ag-accordion--chevron-quer { --ag-accordion-chevron-zu: -90deg; --ag-accordion-chevron-offen: 90deg; } /* Weiches Aufklappen (Feedback Vincent Punkt 13, 11.08.2026). `
` ist nativ nicht animierbar; `::details-content` + `interpolate-size` schließen die Lücke. Wo beides fehlt, klappt das Panel wie bisher hart auf — kein Fehler, nur kein Weichzeichner. Tokens sind Figma-gebunden: duration/s 350ms · Motion/easing-standard. */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } } .ag-accordion__item::details-content { block-size: 0; overflow: hidden; transition: block-size var(--motion-duration-s) var(--motion-ease-standard), content-visibility var(--motion-duration-s) var(--motion-ease-standard) allow-discrete; } .ag-accordion__item[open]::details-content { block-size: auto; } .ag-accordion__antwort { padding: 0 0 var(--spacing-m); color: var(--ag-accordion-muted); font-size: var(--ag-accordion-antwort-fs); /* Stufe am Control */ line-height: var(--ag-accordion-antwort-lh); font-weight: var(--fw-light); max-width: 60ch; } .ag-accordion__antwort > * { margin: 0 0 var(--spacing-s); } .ag-accordion__antwort > *:last-child { margin-bottom: 0; } /* Listen im Fließtext: zentrale Regel in hello-elementor-child/assets/base.css (Entscheidung Vincent, 25.09.2026). Hier nur, was das Widget abweichend braucht. */ @media (prefers-reduced-motion: reduce) { .ag-accordion__chevron { transition: none; } .ag-accordion__item::details-content { transition: none; } } /* Einblendung */ html.ag-anim-ready .ag-accordion[data-ag-anim="reveal"] { transition: opacity var(--motion-reveal) var(--motion-ease-standard), transform var(--motion-reveal) var(--motion-ease-standard); } html.ag-anim-ready .ag-accordion[data-ag-anim="reveal"]:not(.is-inview) { opacity: 0; transform: translateY(var(--motion-distance-reveal)); } @media (prefers-reduced-motion: reduce) { html.ag-anim-ready .ag-accordion[data-ag-anim="reveal"], html.ag-anim-ready .ag-accordion[data-ag-anim="reveal"]:not(.is-inview) { transition: none; transform: none; opacity: 1; } } /* ── Innenabstand steuerbar (3.88.0) ───────────────────────────────────── Entscheidung Vincent, 24.08.2026: Der Innenabstand soll bei jedem Widget am Control liegen, nicht nur der Außenabstand. Dieses Widget führt im Design kein Blockpolster — die Vorgabe ist deshalb 0, und die Regel wird erst wirksam, wenn jemand am Control etwas wählt. Steht bewusst am Dateiende: gleiche Spezifität wie die Regeln oben, die spätere gewinnt. Nur oben und unten; seitlich begrenzt die Content-Breite. */ .ag-accordion { padding-block: var(--ag-accordion-pad-oben, 0px) var(--ag-accordion-pad-unten, 0px); }