Design-System: Button-Varianten konsolidieren, 44px-Trefferflächen

Dritter Teil. .btn hatte nur primary + outline + sm/lg, daneben lebten mehrere
Controls als Eigenbau — teils zeichengleich dupliziert.

Tabs: .group-tabs__tab und .filter-bar__tab waren bis auf flex-shrink und 4px
Innenabstand identisch. Beide laufen jetzt über eine gemeinsame .tab-Basis, die
aria-pressed (Filter) und aria-selected (Tabs) gleich behandelt; von den
BEM-Klassen bleibt nur das jeweilige Delta. Innenabstand vereinheitlicht auf
--space-m, die Gruppen-Tabs verlieren dadurch 4px pro Seite.

Icon-Buttons: .ad-banner__nav-btn und .ad-banner__toggle waren vollständige
Duplikate voneinander. Sie tragen jetzt .btn .btn--icon und behalten nur die
Glas-Optik als Delta. Der Selektor schreibt .btn mit — utilities.css lädt nach
components.css, bei gleicher Spezifität gewänne sonst die rote .btn-Fläche.

Trefferflächen auf 44px (WCAG 2.5.5): .btn bekommt min-height und wird
inline-flex, damit Icon und Label ohne Zusatz-Markup zentriert liegen.
Bezeichnend auch hier — .department-choice__btn hatte inline-flex, align-items
und exakt denselben gap bereits selbst deklariert und gibt sie jetzt ab.
Controls, die optisch klein bleiben sollen, strecken die Fläche stattdessen
unsichtbar per Pseudo-Element (.tap-target, automatisch auch für .btn--sm) —
gewertet wird die Trefferfläche, nicht die gezeichnete.

Der Banner-Indikator brauchte einen anderen Weg: er trug overflow: hidden, um
den Fortschrittsbalken zu beschneiden, was jede Erweiterung wieder abgeschnitten
hätte. Der sichtbare 6px-Balken liegt jetzt im ::before, der Fortschritt ist
selbst rund — overflow entfällt, der Button ist 48x44px.

Haupt-Nav-Links, Dropdown-Trigger und Footer-Social-Links bekommen min-height
statt einer Pseudo-Erweiterung: sie stehen in Reihen, wo überlappende
Trefferflächen den Nachbarn verdecken würden. In der 60px hohen Kopfleiste ist
die Höhe ohnehin nicht sichtbar.

Bewusst unverändert: die Formular-Checkbox bleibt bei 24px (WCAG 2.5.8).
<input> ist ein Replaced Element, dort greift ::after nicht zuverlässig — und
das zugehörige <label> ist klickbar und liefert die große Fläche.

.btn--ghost ist angelegt, hat aber aktuell keinen Abnehmer: die vermuteten
nackten Links sind bei näherem Hinsehen Bildkarten (.instagram__link),
Wrapper (.split__cta) oder eigenständige Karten-Affordanzen (.team-card__cta),
keine tertiären Buttons.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU

public/assets/css/components.css

@@ -987,7 +987,14 @@
     margin-bottom: var(--space-2xl);
 }
 
-.filter-bar__tab {
+/* Gemeinsame Tab-Basis für Filter-Leiste und Gruppen-Tabs. Beide waren bis auf
+   flex-shrink und 4px Innenabstand zeichengleich implementiert. Aktiv-Zustand
+   kommt je nach Muster über aria-pressed (Filter) oder aria-selected (Tabs).
+   Fokus liegt inset, damit der Ring nicht in den Nachbar-Tab ragt. */
+.tab {
+    display: inline-flex;
+    align-items: center;
+    min-height: var(--tap-min);
     padding: var(--space-xs) var(--space-m);
     background: none;
     border: none;
@@ -1000,24 +1007,26 @@
     transition: color var(--transition), box-shadow var(--transition);
 }
 
-.filter-bar__tab:first-child {
-    padding-inline-start: 0;
-}
-
-.filter-bar__tab:hover {
+.tab:hover {
     color: var(--clr-text);
 }
 
-.filter-bar__tab[aria-pressed="true"] {
+.tab[aria-pressed="true"],
+.tab[aria-selected="true"] {
     color: var(--clr-text);
     box-shadow: inset 0 -2px 0 var(--clr-accent);
 }
 
-.filter-bar__tab:focus-visible {
-    outline: 2px solid var(--clr-accent);
+.tab:focus-visible {
+    outline: var(--focus-ring);
     outline-offset: -2px;
 }
 
+/* Erster Filter bündig zur Textkante links. */
+.filter-bar__tab:first-child {
+    padding-inline-start: 0;
+}
+
 .positions__list {
     display: grid;
     gap: var(--space-l);
@@ -1730,55 +1739,27 @@
     display: none;
 }
 
-.ad-banner__toggle {
-    display: inline-grid;
-    place-items: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    padding: 0;
-    color: var(--clr-text);
-    background: var(--clr-glass-bg);
-    border: 1px solid var(--clr-glass-border);
-    border-radius: 999px;
-    cursor: pointer;
-    transition: background var(--transition);
-}
-
 .ad-banner__toggle[hidden] {
     display: none;
 }
 
-.ad-banner__nav-btn {
-    display: inline-grid;
-    place-items: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    padding: 0;
+/* Glas-Optik als Delta zu .btn--icon — Größe, Rundung, Zentrierung und die
+   44px-Trefferfläche kommen von dort. Beide Controls waren vorher zeichengleich
+   dupliziert. .btn muss im Selektor mitstehen: utilities.css lädt nach
+   components.css, bei gleicher Spezifität gewänne sonst die rote .btn-Fläche. */
+.btn.ad-banner__toggle,
+.btn.ad-banner__nav-btn {
     font-size: var(--icon-s);
     color: var(--clr-text);
     background: var(--clr-glass-bg);
     border: 1px solid var(--clr-glass-border);
-    border-radius: 999px;
-    cursor: pointer;
     transition: background var(--transition);
 }
 
-.ad-banner__nav-btn:hover {
+.btn.ad-banner__toggle:hover,
+.btn.ad-banner__nav-btn:hover {
     background: rgb(255 255 255 / 0.2);
-}
-
-.ad-banner__nav-btn:focus-visible {
-    outline: 2px solid var(--clr-text);
-    outline-offset: 3px;
-}
-
-.ad-banner__toggle:hover {
-    background: rgb(255 255 255 / 0.2);
-}
-
-.ad-banner__toggle:focus-visible {
-    outline: 2px solid var(--clr-text);
-    outline-offset: 3px;
+    border-color: var(--clr-glass-border);
 }
 
 .ad-banner__toggle-icon {
@@ -1806,20 +1787,34 @@
     gap: var(--space-2xs);
 }
 
+/* Trefferfläche 48x44px, sichtbar bleibt der 6px-Balken. Der Balken liegt im
+   ::before statt auf dem Button selbst — so kann overflow:hidden entfallen, das
+   sonst jede Vergrößerung der Trefferfläche wieder abschneiden würde. */
 .ad-banner__dot {
     position: relative;
     width: 48px;
-    height: 6px;
+    height: var(--tap-min);
     padding: 0;
+    background: none;
     border: 0;
-    border-radius: 999px;
-    background: var(--clr-glass-border);
     cursor: pointer;
-    overflow: hidden;
+}
+
+.ad-banner__dot::before,
+.ad-banner__progress {
+    position: absolute;
+    inset: calc(50% - 3px) 0 auto;
+    height: 6px;
+    border-radius: 999px;
+}
+
+.ad-banner__dot::before {
+    content: "";
+    background: var(--clr-glass-border);
     transition: background var(--transition);
 }
 
-.ad-banner__dot:hover {
+.ad-banner__dot:hover::before {
     background: rgb(255 255 255 / 0.35);
 }
 
@@ -1829,8 +1824,6 @@
 }
 
 .ad-banner__progress {
-    position: absolute;
-    inset: 0;
     background: var(--clr-accent);
     transform: scaleX(0);
     transform-origin: left;
@@ -2217,32 +2210,9 @@
 
 .group-tabs__bar::-webkit-scrollbar { display: none; }
 
+/* Tabs im Panel dürfen nicht schrumpfen — sie scrollen stattdessen horizontal. */
 .group-tabs__tab {
     flex-shrink: 0;
-    padding: var(--space-xs) var(--space-l);
-    background: none;
-    border: none;
-    box-shadow: inset 0 -2px 0 var(--clr-glass-border);
-    font-family: var(--ff-body);
-    font-size: var(--fs-500);
-    color: var(--clr-text-muted);
-    cursor: pointer;
-    white-space: nowrap;
-    transition: color var(--transition), box-shadow var(--transition);
-}
-
-.group-tabs__tab:hover {
-    color: var(--clr-text);
-}
-
-.group-tabs__tab[aria-selected="true"] {
-    color: var(--clr-text);
-    box-shadow: inset 0 -2px 0 var(--clr-accent);
-}
-
-.group-tabs__tab:focus-visible {
-    outline: 2px solid var(--clr-accent);
-    outline-offset: -2px;
 }
 
 /* Panel-Karte übernimmt das bestehende group-card--stacked-Layout */
@@ -3407,11 +3377,9 @@
 }
 
 .department-choice__btn {
+    /* display/align-items/gap kommen jetzt aus .btn */
     align-self: start;
     margin-top: auto;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2xs);
 }
 
 .department-choice__arrow {