KKS-24 — Accordion / Tabs
Both halves of the ticket on one page, against Figma 258-4460.
Accordion, Tabs und Vertical Tabs sind umgesetzt. Die Tab-Auswahl ist — nach Abstimmung mit Kostas — als Pill-Button gestaltet, nicht als Bootstrap-Tab-Leiste.
Akkordeon — fertig (unter KKS-17 gelandet)
Figma 258-1272 (toggle) and 258-1308 (panel). The panel is the colour style Petrol #1F6C87 = $secondary-700, white text, padding 20/20/25/20, Flow Vertical with a 30px gap. The toggle is the same 21px circle as the CTA badge: a white circle holding a navy chevron, on a $primary header.
The design rotates a single badge (rotate(90) closed, rotate(-90) open), so the implementation sets one icon and lets the existing rotation do the rest. Open an item below to check both states.
This landed in commits 1cabb504, 5f355287 and e31fa9d8 — all prefixed KKS-17, because the badge and the panel colour were token decisions. KKS-24 has no commits of its own; that is attribution, not incompleteness.
⚠️ components/_accordion.scss rotates the collapsed state 180° — the inverse of Bootstrap's convention. Swapping artwork per state double-flips the closed chevron. It also owns --bs-accordion-btn-icon and its .accordion .accordion-button:after (0,2,0) outranks anything written elsewhere, which is why the badge is defined there and not in _btn-arrow.scss.
Akkordeon (echtes Content-Element)
ab Haltestelle „Hauptbahnhof“ mit dem Bus 245 Richtung „S+U Zoologischer Garten“, Fahrzeit ca. 9 min
alternativ: Bus TXL Richtung Flughafen Tegel Airport, Fahrzeit ca. 12 min
Der Chevron zeigt geschlossen nach unten und geöffnet nach oben — dieselbe 21px-Badge wie bei den CTA-Buttons.
Ein Panel mit mehreren Absätzen, um den 30px-Gap aus 258-1308 prüfen zu können.
Der zweite Absatz. Fließtext im offenen Panel ist weiß auf Petrol, nicht $body-color auf Weiß.
Akkordeon auf dunklem Frame
Das Akkordeon direkt darunter steht auf einem $primary-Frame. Panel und Toggle sind bereits farbig — hier würde ein Kontrastfehler zuerst auffallen.
Panel und Badge sollen hier identisch zum hellen Frame aussehen — die Farben kommen aus dem Element, nicht aus dem Frame.
Tabs — als Buttons umgesetzt
Die Tab-Auswahl ist jetzt eine Pill-Button-Leiste, keine Bootstrap-Tab-Leiste mehr. Die Geometrie kommt aus den $btn-*-Tokens — ein Tab und ein echter .btn haben damit dieselbe Form, wenn sie nebeneinander stehen.
Zustände: Ruhe = navy Outline, Hover = Petrol gefüllt, Aktiv = navy gefüllt. Auf dunklen Frames dreht sich das um — weiße Outline, aktiv weiß gefüllt mit navy Beschriftung.
Tabs (echtes Content-Element)
Inhalt des ersten Tabs. Der aktive Tab trägt aktuell --bs-nav-tabs-link-active-border-color aus dem globalen $border-color.
Inhalt des zweiten Tabs. Hover-Zustand hier prüfen — --bs-nav-tabs-link-hover-border-color setzt nur die untere Kante farbig.
Eine lange Beschriftung, um das Umbruch- bzw. Scrollverhalten der Tab-Leiste bei 375px prüfen zu können.
Vertical Tabs — dieselbe Button-Logik
Die vertikale Leiste bekommt dieselbe Pill-Behandlung wie die horizontale. Sie steht auf der dunklen Navy-Spalte, also ist der Ruhezustand eine weiße Outline und der aktive Zustand eine gefüllte weiße Pill mit navy Beschriftung.
Der frühere Aktiv-Marker — ein 10×28px-Balken links neben dem Eintrag — entfällt; die Füllung der Pill übernimmt diese Aufgabe.
Unsere Leistungen
Der erste Eintrag ist beim Laden aktiv — hier lässt sich die gefüllte weiße Pill gegen die Outline der beiden anderen prüfen.
Zweiter Eintrag. Hover-Zustand hier prüfen: die Pill füllt sich mit halbtransparentem Weiß, die Beschriftung bleibt weiß.
Eine lange Beschriftung, damit sichtbar wird, wie die Pill bei zweizeiligem Text umbricht — besonders bei 375px, wo die Spalte auf volle Breite geht.