Akkordeon SDC — Figma-Compliance-Fixes

User Story

Als Besucher der SOLCOM-Website möchte ich, dass das Akkordeon (FAQ-Bereich) so aussieht wie im Figma-Design spezifiziert — mit korrekter Borderfarbe, korrektem Abstand und korrektem Content-Gap —, damit das Design konsistent und markenkonform ist.

Scope

Dieser Sub-Task betrifft ausschließlich den Dark-Context-Stil des Akkordeons (transparenter Hintergrund, weiße Schrift auf blauem Hintergrund, Lime-Borders). Der Light-Mode-Stil ist explizit nicht in scope.

In scope

Borderfarbe: border-brand-white → border-brand-lime
Vertikales Padding: py-3.5 → py-6 (14px → 24px)
Content-Gap im offenen Zustand: in-[.accordion--open]:pb-3.5 → in-[.accordion--open]:pt-3
Anlegen einer Canvas-Testseite für den Smoketest

Explizit nicht in scope

Light-Mode / heller Akkordeon-Stil (separates Ticket)
Icon-Farbe und Icon-Größe (Ticket wird separat priorisiert)
icon.component.yml Schema-Erweiterung (separates Ticket)
FAQ-Variante als eigenständiges SDC (kein eigenes SDC nötig — Dark Context deckt FAQ ab)

Figma-Referenz

Node-ID: 61447:26220 · File-Key: CHHDfbpX8Ys2LBiGs5HVK0

Die Section enthält alle 4 Accordion-Item-Zustände:

61447:25132 — Closed / Default (Normalzustand)
61447:25188 — Closed / Hover
61447:25198 — Open / Default
61447:25224 — Open / Hover

Abgelesene Figma-Werte

Border: border-[var(--light,#bedc00)] = border-brand-lime, dashed, 2px
Padding Item: py-[var(--xs,24px)] = py-6
Gap Titel → Content (open): gap-[var(--xxs,12px)] = pt-3 am Content-Div

Betroffene Dateien

Es wird ausschließlich eine Datei geändert:

web/themes/custom/byte_theme/components/accordion/accordion.twig

accordion-container und accordion.js bleiben unverändert.

Akzeptanzkriterien

AK	Beschreibung	Datei / Stelle
AK1	Borderfarbe: `border-brand-white` in der `section`-CVA wird durch `border-brand-lime` ersetzt. Alle dashed Trennlinien (border-b-2 und [&:first-child]:border-t-2) erscheinen in Lime (#bedc00), nicht Weiß.	`accordion.twig` Zeile 13
AK2	Vertikales Padding: Im `title_button`-CVA wird `py-3.5` (14 px) durch `py-6` (24 px) ersetzt. Eine geschlossene Accordion-Zeile ist ~80 px hoch. Figma-Spec: `py-[var(--xs,24px)]`.	`accordion.twig` Zeile 23
AK3	Content-Gap: Im `content`-CVA wird `in-[.accordion--open]:pb-3.5` durch `in-[.accordion--open]:pt-3` ersetzt. Im geöffneten Zustand sind 12 px Abstand (Figma: `gap-[var(--xxs,12px)]`) zwischen Titelzeile und Inhalt sichtbar.	`accordion.twig` Zeile 44

Hinweis: Die ursprünglichen AK3/AK4 (Icon-Farbe / Icon-Größe) wurden aus dem Scope entfernt. Die verbleibenden AKs sind hier auf AK1–AK3 umnummeriert.

QA-Plan

Der Agent legt zuerst eine Canvas-Testseite mit einem accordion-container (3 Accordion-Items, je Blind-Lorem-Inhalt) an. Die genaue URL wählt der Agent beim Anlegen (Empfehlung: /test/akkordeon). Alle AKs werden gegen diese Seite getestet.

AK	URL	Aktion	Erwartet
AK1	`/test/akkordeon` (neu angelegt)	Seite laden, Trennlinie zwischen den Accordion-Items betrachten	Dashed Border ist Lime (`#bedc00`), nicht Weiß. DevTools: `border-color` auf dem `.accordion`-Element zeigt die Lime-Farbe.
AK2	`/test/akkordeon`	DevTools → Element inspizieren: `.accordion--title`-Button auswählen, Computed Styles prüfen	`padding-top` und `padding-bottom` je `24px`. Visuelle Gesamthöhe einer geschlossenen Zeile ~80 px.
AK3	`/test/akkordeon`	Auf einen Accordion-Titel klicken → Accordion öffnet sich. Abstand zwischen Titelzeile und Inhalt messen.	12 px Abstand (pt-3) zwischen Button-Unterkante und Inhaltsbeginn. DevTools: `padding-top: 12px` auf dem `.accordion--content`-Element wenn `.accordion--open` gesetzt ist.
Smoke	`/test/akkordeon`	Alle 4 Interaktionszustände durchlaufen: (1) Seite laden (Closed/Default), (2) Hover über Titel (Closed/Hover), (3) Klick → öffnen (Open/Default), (4) Hover über offenen Titel (Open/Hover)	Kein visueller Bruch. Höhen-Animation läuft flüssig. Nur ein Accordion gleichzeitig offen (accordion-container-Verhalten). Figma-Zustände `61447:25132`, `61447:25188`, `61447:25198`, `61447:25224` stimmen visuell überein.

Eltern-Story

F-20 — Drupal Theme & SOLCOM Corporate Design (Farben, Fonts, Grid) (P2503-82)