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 {

public/assets/css/layout.css

@@ -89,6 +89,11 @@
 }
 
 .site-nav__list a:not(.btn) {
+    display: inline-flex;
+    align-items: center;
+    /* 44px Trefferfläche (WCAG 2.5.5). Die Leiste ist --header-h (60px) hoch und
+       zentriert ihre Punkte, die Höhe ist deshalb nicht sichtbar. */
+    min-height: var(--tap-min);
     color: var(--clr-text);
     text-decoration: none;
     padding-block: 0.25em;
@@ -123,6 +128,7 @@
 .site-nav__sublink {
     display: inline-flex;
     align-items: center;
+    min-height: var(--tap-min);
     gap: 0.3em;
     margin: 0;
     padding: 0.25em 0;
@@ -599,6 +605,7 @@
 .site-footer__social a {
     display: inline-flex;
     align-items: center;
+    min-height: var(--tap-min);
     gap: var(--space-2xs);
     padding-block: var(--space-3xs);
     color: var(--clr-text-muted);

public/assets/css/utilities.css

@@ -1,8 +1,39 @@
 /* ============================================================
    UTILITIES — Buttons, visually-hidden, kleine Helfer
    ============================================================ */
+/* --- Trefferflächen ---------------------------------------------------------
+   WCAG 2.5.5 wertet die Trefferfläche, nicht die gezeichnete Fläche. Controls,
+   die optisch klein bleiben sollen (dezente Buttons, Slider-Punkte), strecken
+   sie deshalb über ein unsichtbares Pseudo-Element auf --tap-min, statt zu
+   wachsen. Voraussetzung: das Element darf kein overflow: hidden tragen und
+   ::after muss frei sein. */
+.tap-target,
+.btn--sm {
+    position: relative;
+}
+
+.tap-target::after,
+.btn--sm::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    width: 100%;
+    height: 100%;
+    min-width: var(--tap-min);
+    min-height: var(--tap-min);
+}
+
+/* --- Buttons ---------------------------------------------------------------
+   inline-flex statt inline-block, damit min-height die Trefferfläche sichern
+   kann und Icon+Label ohne Zusatz-Markup zentriert nebeneinander liegen. */
 .btn {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2xs);
+    min-height: var(--tap-min);
     padding: var(--btn-pad-y) var(--btn-pad-x);
     white-space: nowrap;
     background: var(--clr-accent);
@@ -26,7 +57,7 @@
 }
 
 .btn:focus-visible {
-    outline: 2px solid var(--clr-text);
+    outline: var(--focus-ring);
     outline-offset: 2px;
 }
 
@@ -53,8 +84,37 @@
     color: var(--clr-text);
 }
 
-/* Größenmodifier — Padding ist em-basiert, skaliert mit der font-size */
-.btn--sm { font-size: var(--btn-font-sm); }
+/* tertiary — ohne Fläche und Rahmen, für Aktionen neben einem primären Button.
+   Unterstrichen, damit der Button nicht allein über die Farbe erkennbar ist. */
+.btn--ghost {
+    background: transparent;
+    border-color: transparent;
+    text-decoration: underline;
+}
+
+.btn--ghost:hover {
+    background: var(--clr-glass-bg);
+    border-color: transparent;
+    color: var(--clr-text);
+}
+
+/* Icon-Button — quadratisch, nur ein Icon, Label über aria-label.
+   Das Icon selbst skaliert über font-size (siehe --icon-*). */
+.btn--icon {
+    gap: 0;
+    min-width: var(--tap-min);
+    padding: 0;
+    border-radius: 999px;
+}
+
+/* Größenmodifier — Padding ist em-basiert, skaliert mit der font-size.
+   --sm bleibt bewusst optisch klein und holt die 44px über die Trefferfläche;
+   dafür muss min-height hier zurückgenommen werden. */
+.btn--sm {
+    min-height: 0;
+    font-size: var(--btn-font-sm);
+}
+
 .btn--lg { font-size: var(--btn-font-lg); }
 
 .visually-hidden {

public/dateien/.htaccess

@@ -0,0 +1,28 @@
+# Dateiablage /dateien (Files Gallery). Die Regeln aus public/.htaccess gelten hier vererbt
+# weiter — nur diese drei Punkte müssen abweichen.
+
+<IfModule mod_headers.c>
+    # Files Gallery rendert Inline-<script>-Blöcke mit PHP-interpolierten Werten
+    # (index.php:919, 556, 3606) und hat keinen Nonce-Mechanismus. Statische Hashes sind
+    # deshalb nicht möglich. Die Lockerung gilt AUSSCHLIESSLICH für diesen Pfad; alle
+    # eigenen Seiten behalten die strikte CSP aus public/.htaccess.
+    # Kein CDN in der Liste: die App-Assets liegen unter /assets/filesgallery/ (Regel 1).
+    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; media-src 'self' blob:; font-src 'self'; connect-src 'self'; worker-src 'self' blob:; frame-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'"
+
+    # Interner Bereich — die App setzt zwar selbst ein noindex-Meta (index.php:939),
+    # der Header greift aber auch für die durch PHP ausgelieferten Dateien.
+    Header always set X-Robots-Tag "noindex, nofollow"
+</IfModule>
+
+# Die Konfiguration gibt bei direktem Aufruf nichts aus (sie liefert nur ein Array zurück),
+# aber ausgeliefert werden muss sie trotzdem nie.
+<Files "_filesconfig.php">
+    Require all denied
+</Files>
+
+# Die App setzt ihre Cache-Header selbst (U::header(), index.php:982-1016). Die
+# ExpiresByType-Regeln aus public/.htaccess würden durch PHP gelieferte Bilder ein Jahr
+# festnageln — inklusive Thumbnails, deren URL sich beim Ersetzen einer Datei nicht ändert.
+<IfModule mod_expires.c>
+    ExpiresActive Off
+</IfModule>

public/dateien/_filesconfig.php

@@ -0,0 +1,106 @@
+<?php
+
+/**
+ * Konfiguration und Härtung der Dateiablage /dateien (Files Gallery).
+ *
+ * DIE EINZIGE STELLE, an der die Dateiablage konfiguriert wird. index.php bleibt
+ * unangetastet (bis auf den TSV-PATCH in Zeile ~122), und
+ * storage/dateien/system/config/config.php wird von der App selbst generiert und bei
+ * jedem Update überschrieben (index.php:248) — dort niemals etwas eintragen.
+ * Diese Datei lädt index.php als erstes (index.php:142) und sie gewinnt gegen beide
+ * anderen Ebenen (index.php:239), überlebt also jedes Update.
+ *
+ * Sie läuft VOR session_start() (index.php:295) und VOR dem Login (index.php:159) —
+ * deshalb dürfen Session-Härtung und Login-Bremse hier stehen; später wäre es zu spät.
+ *
+ * Secrets (Lizenzschlüssel, Passwort-Hashes) stehen in config/config.php, nicht hier.
+ */
+
+require_once dirname(__DIR__, 2) . '/app/bootstrap.php';
+
+$base = ROOT_PATH . '/storage/dateien';
+
+/*
+ * Session-Cookie härten. Files Gallery lässt die PHP-Defaults stehen (index.php:291
+ * und 298 sind auskommentiert): Logout beim Schließen des Browsers und kein
+ * SameSite/Secure-Flag. Für einen Upload vom Handy ist das zu kurz gedacht.
+ */
+if (session_status() === PHP_SESSION_NONE) {
+    $https = ($_SERVER['HTTPS'] ?? '') === 'on'
+        || ($_SERVER['HTTP_X_FORWARDED_PROTO'] ?? '') === 'https';
+
+    session_set_cookie_params([
+        'lifetime' => 28800, // 8 h — ein Upload-Nachmittag ohne erneutes Anmelden
+        'path'     => '/dateien/', // Cookie bleibt auf die Ablage beschränkt
+        'secure'   => $https, // lokal (http) sonst kein Cookie und damit kein Login
+        'httponly' => true,
+        'samesite' => 'Lax', // trägt zusätzlich das fehlende CSRF-Handling der App (index.php:301)
+    ]);
+    ini_set('session.gc_maxlifetime', '28800');
+}
+
+/*
+ * Brute-Force-Bremse. Files Gallery bringt keine mit — im gesamten index.php gibt es
+ * kein Rate-Limit, Anmeldeversuche sind unbegrenzt. Zähler und Log sind dieselben wie
+ * bei den Formularen (storage/ratelimit/, storage/logs/spam.log).
+ * Der Login-POST kommt aus der App per fetch() als JSON-Body (index.php:384), aus dem
+ * Login-Formular als normales POST — daher beide Wege prüfen.
+ */
+$isLoginAttempt = ($_SERVER['REQUEST_METHOD'] ?? '') === 'POST'
+    && (($_GET['action'] ?? '') === 'login' || isset($_POST['fusername']));
+
+if ($isLoginAttempt && !rate_limit_ok('dateien-login:' . client_ip(), 10, 600)) {
+    log_spam('dateien', 'login-ratelimit');
+    http_response_code(429);
+    header('Retry-After: 600');
+    header('Content-Type: text/plain; charset=utf-8');
+    exit("Zu viele Anmeldeversuche. Bitte in 10 Minuten noch einmal probieren.\n");
+}
+
+return [
+    /*
+     * Die Dateien der Nutzer liegen AUSSERHALB des Docroots. Damit sind sie per URL nicht
+     * erreichbar, und die App liefert sie selbst durch PHP aus (index.php:1607) — eine
+     * hochgeladene .php kann so prinzipiell nicht ausgeführt werden. Das ist die wichtigste
+     * Schutzschicht, weil die App per Default JEDE Endung zum Upload zulässt.
+     */
+    'root'         => $base . '/uploads',
+    'storage_path' => $base . '/system', // Cache, Nutzer, generierte Config — ebenfalls außerhalb
+    'root_lock'    => $base, // kein Per-User-root kann hier ausbrechen (index.php:1146)
+
+    /*
+     * Auslieferung immer durch PHP erzwingen. Nötig für den Fall, dass der Hoster das
+     * Repo-Root statt public/ serviert: dann läge storage/ innerhalb des DOCUMENT_ROOT,
+     * die App würde direkte URLs bauen — und die Root-.htaccess blockt /storage/ mit 403.
+     */
+    'load_files_proxy_php' => true,
+
+    // Assets self-hosted (harte Regel 1: keine CDNs). Bestand prüfen/erneuern:
+    // php bin/filesgallery-update.php --check
+    'assets' => '/assets/filesgallery',
+
+    'license_key' => (string) config('dateien.license_key', ''),
+
+    // Deutsche Oberfläche, Browsersprache darf weiterhin gewinnen.
+    'lang_default' => 'de',
+
+    /*
+     * Upload-Filter. Default ist ein LEERER String und bedeutet "alles erlaubt" — es gibt
+     * keine Blacklist (index.php:4078-4092). Die Liste ist also nicht Kosmetik, sondern
+     * die serverseitige Grenze. .heic/.heif, weil iPhones so fotografieren.
+     */
+    'upload_allowed_file_types' => '.jpg, .jpeg, .png, .webp, .gif, .heic, .heif, .mp4, .mov, .pdf',
+    'upload_max_filesize'       => 104857600, // Bytes (100 MB) — Handy-Video; PHP-ini bleibt die harte Grenze
+    'upload_exists'             => 'increment', // zwei "IMG_1234.jpg" überschreiben sich nie
+
+    /*
+     * Alles abschalten, was der Verein nicht braucht und was die Angriffsfläche vergrößert.
+     * Rechte pro Konto stehen in storage/dateien/system/users/<name>/config.php.
+     */
+    'allow_settings'      => false, // das Settings-UI schreibt und includet geliefertes PHP (index.php:1019-1062)
+    'allow_check_updates' => false, // würde index.php ungeprüft von jsDelivr überschreiben (index.php:3956)
+    'allow_tests'         => false, // Default ist TRUE und leakt Server-Infos + Config (nur admin darf es)
+    'allow_tasks'         => false,
+    'allow_symlinks'      => false, // kein Ausbruch aus dem Upload-Verzeichnis über Symlinks
+    'index_cache'         => false, // würde eine statische index.html in public/dateien/ ablegen
+];