diff --git a/notes/2026-09-16_AHK-Ehrenamtsmanagement_Entscheidungsprotokoll-bisher.md b/notes/2026-09-16_AHK-Ehrenamtsmanagement_Entscheidungsprotokoll-bisher.md
new file mode 100644
index 0000000..8950f6e
--- /dev/null
+++ b/notes/2026-09-16_AHK-Ehrenamtsmanagement_Entscheidungsprotokoll-bisher.md
@@ -0,0 +1,897 @@
+# AHK-Ehrenamtsmanagement — Entscheidungsprotokoll und bisheriger Aufbau
+
+> **Stand:** 2026-09-16  
+> **Projekt:** AHK-Ehrenamtsmanagement  
+> **Technischer Name:** `ahk-ehrenamtsmanagement`  
+> **Status:** Greenfield-Neustart; Phase 0 vollständig geplant, Phase 1 vollständig entschieden, Phase 2 begonnen  
+> **Verbindliche Grundlage:** `PROJECT_DESIGN.md`  
+> **Visuelle Referenz:** `PROJECT_DESIGN_VOR_ORT_MOCKUP.png`  
+> **Arbeitsprinzip:** Wenn `PROJECT_DESIGN.md` etwas nicht entscheidet, wird nicht geraten, sondern bewusst gemeinsam entschieden.
+
+---
+
+# 1. Grundsatzentscheidungen
+
+## 1.1 Greenfield statt Legacy-Umbau
+
+Der bestehende Prototyp wird **nicht migriert**.
+
+- kein erhaltenswerter Produktivdatenbestand
+- nur ein einzelner Testnutzer ohne relevante Inhalte
+- Ziel ist ausdrücklich, den Aufbau der App von Grund auf zu lernen
+- kein Legacy-Code wird nur deshalb übernommen, weil er bereits existiert
+- keine Legacy-Datenmigration
+- keine Kompatibilitätsschicht
+- keine Datenrettung aus der alten SQLite-Datenbank
+
+Falls alte Implementierungen später als Referenz dienen, werden sie zuerst gegen `PROJECT_DESIGN.md` geprüft.
+
+## 1.2 Projektname
+
+Sichtbarer Produktname:
+
+```text
+AHK-Ehrenamtsmanagement
+```
+
+Technischer Name:
+
+```text
+ahk-ehrenamtsmanagement
+```
+
+Der technische Name soll konsistent für Repository, App-Verzeichnis, Stack-Verzeichnis und Container verwendet werden.
+
+## 1.3 Entwicklungsumgebung
+
+```text
+Betriebssystem: EndeavourOS / Arch Linux
+Shell: Bash
+Python-Verwaltung: pyenv
+Virtuelle Umgebungen: pyenv-virtualenv
+Python-Serie: 3.14
+```
+
+Fish ist nicht mehr Standardshell.
+
+## 1.4 Python-Environment
+
+Eigenes pyenv-virtualenv:
+
+```text
+ahk-ehrenamtsmanagement
+```
+
+Projektbindung:
+
+```bash
+pyenv local ahk-ehrenamtsmanagement
+```
+
+`.python-version` wird versioniert. Das eigentliche Virtualenv liegt außerhalb des Repositories in der pyenv-Verwaltung.
+
+---
+
+# 2. Phase 0 — Greenfield-Projektbasis
+
+## Ziel
+
+Am Ende von Phase 0 existiert eine minimale, lauffähige und getestete Flask-Anwendung.
+
+Noch nicht enthalten:
+
+- Datenbankmodelle
+- Auth
+- Organisationen
+- Teams
+- Rollen
+- Templates
+- Branding
+- Docker
+- Fachmodule
+
+## 2.1 Git-Grundlage
+
+Initiale Struktur:
+
+```text
+ahk-ehrenamtsmanagement/
+├── PROJECT_DESIGN.md
+├── PROJECT_DESIGN_VOR_ORT_MOCKUP.png
+└── .gitignore
+```
+
+Initialisierung:
+
+```bash
+mkdir ahk-ehrenamtsmanagement
+cd ahk-ehrenamtsmanagement
+git init
+```
+
+Minimale `.gitignore`:
+
+```gitignore
+# Python
+__pycache__/
+*.py[cod]
+
+# Optional local virtual environments
+.venv/
+venv/
+
+# Local application data
+instance/
+
+# Environment / secrets
+.env
+
+# OS / editor noise
+.DS_Store
+```
+
+Baseline-Commit:
+
+```bash
+git add .
+git status
+git commit -m "Initialize AHK-Ehrenamtsmanagement project"
+```
+
+Ein Remote ist in Phase 0 nicht Pflicht.
+
+## 2.2 Abhängigkeiten
+
+Runtime und Development werden getrennt.
+
+`requirements.txt`:
+
+```text
+Flask
+```
+
+`requirements-dev.txt`:
+
+```text
+-r requirements.txt
+
+pytest
+```
+
+Installation:
+
+```bash
+python -m pip install -r requirements-dev.txt
+```
+
+Bevorzugte Form:
+
+```text
+python -m pip ...
+```
+
+## 2.3 Erste Flask-Struktur
+
+Verbindlich:
+
+- Flask App Factory
+- Blueprints
+- eigener Core-Bereich für `/health`
+
+Struktur:
+
+```text
+app/
+├── __init__.py
+└── core/
+    ├── __init__.py
+    └── health/
+        ├── __init__.py
+        └── routes.py
+```
+
+`app/core/health/__init__.py`:
+
+```python
+from flask import Blueprint
+
+bp = Blueprint("health", __name__)
+
+from app.core.health import routes
+```
+
+`app/core/health/routes.py`:
+
+```python
+from app.core.health import bp
+
+@bp.get("/health")
+def health():
+    return {"status": "ok"}, 200
+```
+
+Initiale `app/__init__.py`:
+
+```python
+from flask import Flask
+
+def create_app():
+    app = Flask(__name__)
+
+    from app.core.health import bp as health_bp
+    app.register_blueprint(health_bp)
+
+    return app
+```
+
+Start:
+
+```bash
+flask --app 'app:create_app' run --debug
+```
+
+Healthcheck:
+
+```bash
+curl -i http://127.0.0.1:5000/health
+```
+
+Erwartung:
+
+```json
+{"status": "ok"}
+```
+
+mit HTTP 200.
+
+## 2.4 Erste Testbasis
+
+`tests/test_health.py`:
+
+```python
+from app import create_app
+
+def test_health_endpoint():
+    app = create_app()
+    client = app.test_client()
+
+    response = client.get("/health")
+
+    assert response.status_code == 200
+    assert response.get_json() == {"status": "ok"}
+```
+
+Ausführen:
+
+```bash
+python -m pytest
+```
+
+---
+
+# 3. Phase 1 — Technisches App-Fundament
+
+## Reihenfolge
+
+```text
+1.1 Architektur-Gerüst
+1.2 Konfigurationssystem
+1.3 Flask Extensions
+1.4 SQLAlchemy + SQLite
+1.5 Flask-Migrate / Alembic
+1.6 Teststruktur / Fixtures
+1.7 Foundation-Tests
+1.8 Checkpoint
+```
+
+## 3.1 Architektur-Gerüst
+
+Die vollständige Ordnerstruktur wird als Gerüst angelegt.
+
+Wichtig:
+- nur Ordner/Pakete vorbereiten
+- nicht vorsorglich überall `models.py`, `routes.py`, `services.py`, `permissions.py` oder `forms.py` anlegen
+- solche Dateien entstehen erst bei echter Implementierung
+
+```text
+app/
+├── __init__.py
+├── core/
+│   ├── __init__.py
+│   ├── health/
+│   ├── auth/
+│   ├── accounts/
+│   ├── organizations/
+│   ├── teams/
+│   ├── memberships/
+│   ├── invitations/
+│   ├── permissions/
+│   ├── branding/
+│   ├── storage/
+│   ├── notifications/
+│   ├── dashboard/
+│   ├── profiles/
+│   └── audit/
+├── modules/
+│   ├── __init__.py
+│   ├── scheduling/
+│   ├── documents/
+│   └── chat/
+├── templates/
+│   ├── core/
+│   └── components/
+└── static/
+    ├── css/
+    ├── js/
+    └── avatars/
+
+tests/
+instance/
+```
+
+Git speichert keine leeren Ordner. Keine künstliche `.gitkeep`-Orgie.
+
+## 3.2 `config.py`
+
+Liegt im **Projektroot**.
+
+Zunächst:
+
+```python
+class Config:
+    pass
+
+class DevelopmentConfig(Config):
+    DEBUG = True
+
+class TestingConfig(Config):
+    TESTING = True
+```
+
+Noch nicht vorsorglich anlegen:
+- `ProductionConfig`
+- `SECRET_KEY`
+- SMTP
+- Uploadlimits
+- Auth-Zeiten
+- Polling-Intervalle
+
+## 3.3 App-Factory-Interface
+
+Festgelegt:
+
+```python
+def create_app(
+    config_class=DevelopmentConfig,
+    config_overrides=None,
+):
+    ...
+```
+
+Reihenfolge:
+
+```text
+Factory starten
+→ Config-Klasse laden
+→ optionale Overrides
+→ Extensions initialisieren
+→ Blueprints registrieren
+→ später Module registrieren
+```
+
+Sinngemäß:
+
+```python
+from flask import Flask
+from config import DevelopmentConfig
+
+def create_app(
+    config_class=DevelopmentConfig,
+    config_overrides=None,
+):
+    app = Flask(__name__)
+
+    app.config.from_object(config_class)
+
+    if config_overrides:
+        app.config.from_mapping(config_overrides)
+
+    return app
+```
+
+## 3.4 Zentrale Flask-Extensions
+
+Datei:
+
+```text
+app/extensions.py
+```
+
+Nur Extension-Instanzen, keine Models, keine Businesslogik, keine Konfiguration.
+
+Zunächst:
+
+```python
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()
+```
+
+Später:
+
+```python
+from flask_migrate import Migrate
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()
+migrate = Migrate()
+```
+
+In der Factory:
+
+```python
+db.init_app(app)
+migrate.init_app(app, db)
+```
+
+## 3.5 SQLite-Strategie
+
+Development:
+
+```text
+instance/app.db
+```
+
+Sinngemäß:
+
+```python
+SQLALCHEMY_DATABASE_URI = "sqlite:///app.db"
+```
+
+Tests:
+- pro Test eigene temporäre echte SQLite-Datei
+- keine In-Memory-Datenbank
+- keine gemeinsam genutzte Testdatenbank
+- nie `instance/app.db`
+
+```text
+DevelopmentConfig → instance/app.db
+TestingConfig     → temporäre SQLite-Datei pro Test
+Production später → /app/instance/app.db
+```
+
+## 3.6 Flask-Migrate / Alembic
+
+Runtime-Abhängigkeiten:
+
+```text
+Flask
+Flask-SQLAlchemy
+Flask-Migrate
+```
+
+Initialisierung bereits in Phase 1:
+
+```bash
+flask --app 'app:create_app' db init
+```
+
+Ergebnis:
+
+```text
+migrations/
+├── alembic.ini
+├── env.py
+├── script.py.mako
+└── versions/
+```
+
+Festgelegt:
+- `migrations/` wird versioniert
+- keine künstliche leere erste Migration
+- erste echte Migration erst mit erstem Domain-Model in Phase 2
+- `db.create_all()` ist keine Produktionsstrategie
+
+## 3.7 pytest-Fixtures
+
+```text
+tests/
+├── conftest.py
+└── test_health.py
+```
+
+In Phase 1 nur:
+- `app`
+- `client`
+- temporäre SQLite-Testdatenbank
+
+Noch keine Domain-Fixtures.
+
+## 3.8 Foundation-Tests
+
+Mindestens:
+
+1. `/health` liefert 200 und `{"status": "ok"}`
+2. `TestingConfig` ist aktiv
+3. `config_overrides` überschreibt Config-Werte
+4. SQLAlchemy erreicht die temporäre SQLite-DB (`SELECT 1`)
+5. Tests verwenden niemals `instance/app.db`
+
+## 3.9 Phase-1-Checkpoint
+
+Phase 1 ist fertig, wenn:
+
+- Architektur-Gerüst vorhanden
+- Root-`config.py` vorhanden
+- Factory-Interface umgesetzt
+- `app/extensions.py` vorhanden
+- SQLAlchemy integriert
+- Development-SQLite auf `instance/app.db`
+- Tests je eigene temporäre SQLite-Datei
+- Flask-Migrate/Alembic initialisiert
+- keine künstliche Migration erzeugt
+- `/health` funktioniert
+- alle Foundation-Tests grün
+- keine Secrets oder lokalen DB-Daten versioniert
+- sauber committed
+
+Beispiel:
+
+```bash
+git add .
+git status
+git commit -m "Establish application foundation"
+```
+
+---
+
+# 4. Phase 2 — Plattform-Core / Datenmodell
+
+## Reihenfolge
+
+```text
+2.1 Organization
+2.2 Account
+2.3 BrandProfile
+2.4 Team
+2.5 OrganizationMembership
+2.6 TeamMembership
+2.7 Permission-Grundlagen
+2.8 TeamInvitation
+2.9 OrganizationAdminInvitation
+2.10 TeamModule
+2.11 AuditLog
+2.12 Core-Integritätstests
+2.13 Checkpoint
+```
+
+`BrandProfile` wird bewusst **vor `Team`** gebaut, damit `Team.brand_profile_id` von Anfang an auf ein reales Modell zeigt.
+
+---
+
+# 5. Globale Model-Konventionen
+
+## 5.1 Primary Keys
+
+Normale Domain-Models verwenden:
+
+```text
+Integer Primary Keys
+```
+
+Opaque/kryptographische Werte werden dort verwendet, wo sie tatsächlich nötig sind, z. B. Auth-Tokens oder Storage Keys.
+
+## 5.2 Statusfelder
+
+Begrenzte Statusfelder:
+- Python-Enums
+- klare Stringwerte in der Datenbank
+
+Beispiele:
+
+```text
+active
+archived
+disabled
+```
+
+## 5.3 Zeitstempel
+
+Global:
+- intern UTC
+- Python-Seite timezone-aware
+- lokale Zeitzone erst bei Darstellung
+- keine lokale Serverzeit als Domain-Wahrheit
+
+---
+
+# 6. `Organization`
+
+Beschlossen:
+
+```text
+Organization
+├── id          Integer PK
+├── name        required
+├── slug        required, unique, stabil
+├── status      active | archived
+└── created_at  UTC timestamp
+```
+
+## Slug
+
+Ergänzt, weil Organisations-URLs Slugs verwenden:
+
+```text
+Aidshilfe Köln e.V.
+→ aidshilfe-koeln
+```
+
+URL:
+
+```text
+/org/aidshilfe-koeln/manage/
+```
+
+Der Slug ist eine **stabile technische Kennung** und folgt Namensänderungen nicht automatisch.
+
+## Betriebsrealität
+
+Die Architektur behält `Organization`, aber der reale Betrieb ist auf genau eine Organisation ausgerichtet:
+
+```text
+Aidshilfe Köln e.V.
+```
+
+Es ist nicht geplant, die App anderen Aidshilfen oder externen Organisationen bereitzustellen.
+
+---
+
+# 7. `Account`
+
+Beschlossen:
+
+```text
+Account
+├── id             Integer PK
+├── email          required, unique, normalized
+├── display_name   optional
+├── status
+│   ├── active
+│   └── disabled
+├── created_at     UTC
+└── last_login_at  optional, UTC
+```
+
+## E-Mail-Normalisierung
+
+Beispiel:
+
+```text
+"  Patsy@Example.DE  "
+→ "patsy@example.de"
+```
+
+Regeln:
+- Whitespace entfernen
+- Groß-/Kleinschreibung für Account-Identität nicht unterscheiden
+- gleiche Normalisierung vor Suche und Speicherung
+- zentrale Normalisierungsfunktion
+
+## Status
+
+Neue verifizierte/eingeladene Accounts starten als:
+
+```text
+active
+```
+
+Kein zusätzlicher `pending`-Accountstatus.
+
+## `display_name`
+
+Optional, weil Account vor abgeschlossenem Onboarding existieren kann.
+
+## `last_login_at`
+
+Initial `NULL`.
+
+Nur nach erfolgreicher Authentifizierung aktualisieren, nicht bei jedem Seitenaufruf oder bei normaler Nutzung einer gültigen Device Session.
+
+## `disabled`
+
+Wirkt sofort:
+
+```text
+Account → disabled
+→ alle aktiven DeviceSessions widerrufen
+→ bestehende Sitzungen verlieren Zugriff
+→ neue Logins nicht zugelassen
+```
+
+Bei späterer Reaktivierung:
+- alte Sessions bleiben widerrufen
+- neue Authentifizierung nötig
+- neue Device Session wird erzeugt
+
+---
+
+# 8. `BrandProfile`
+
+Aktueller Stand:
+
+```text
+BrandProfile
+├── id
+├── organization_id
+├── name
+├── logo_storage_key      optional
+├── primary_color
+├── primary_strong
+├── accent_color
+├── accent_strong
+├── heading_font
+└── body_font
+```
+
+## 8.1 Name
+
+Da die App real nur für eine Organisation betrieben wird:
+
+```text
+name
+```
+
+wird global eindeutig gehalten.
+
+`organization_id` bleibt trotzdem Teil des Architekturmodells.
+
+## 8.2 Logo
+
+Logo ist optional.
+
+Gespeichert wird:
+
+```text
+logo_storage_key
+```
+
+Kein Dateipfad, kein Originaldateiname.
+
+Der zentrale Storage-Service löst den opaque Key später auf.
+
+## 8.3 Farben
+
+Validierte und normalisierte HEX-Strings:
+
+```text
+#RRGGBB
+```
+
+Beispiele:
+
+```text
+#00858A
+#005F61
+#52E0CF
+#2596BE
+```
+
+Nicht als freie Brandwerte:
+- `rgb(...)`
+- `rgba(...)`
+- `hsl(...)`
+- `#RRGGBBAA`
+- beliebige CSS-Ausdrücke
+
+Semantische Ableitungen und Transparenzen entstehen im zentralen Designsystem.
+
+## 8.4 Fonts
+
+Font-Auswahl über Code-Registry.
+
+Die Datenbank speichert nur stabile Keys:
+
+```text
+heading_font = "big-shoulders-display"
+body_font    = "noto-sans"
+```
+
+Keine freien Fontnamen, URLs oder CSS-Fragmente.
+
+## 8.5 Font-Auslieferung
+
+Fonts werden lokal mit der Anwendung ausgeliefert.
+
+Keine Pflichtabhängigkeit von Google Fonts, CDN oder anderen externen Font-Diensten.
+
+Vor Nutzung einer Schrift wird geprüft, ob die Lizenz lokales Webhosting erlaubt.
+
+## 8.6 Offene Entscheidung
+
+Noch nicht entschieden:
+
+```text
+created_at
+updated_at
+```
+
+für `BrandProfile`.
+
+Variante A:
+- beide ergänzen
+
+Variante B:
+- keine Zeitstempel
+- Änderungsnachvollziehbarkeit nur über `AuditLog`
+
+Dies ist der aktuelle nächste offene Punkt.
+
+---
+
+# 9. Noch nicht im Detail entschieden
+
+- `Team`
+- `OrganizationMembership`
+- `TeamMembership`
+- Permission-Helper
+- Einladungsmodelle
+- `TeamModule`
+- `AuditLog`
+- `AuthChallenge`
+- `DeviceSession`
+- Passwordless-Flow
+- BrandProfile-Seed für Vor-Ort
+- konkrete Font-Registry-Implementierung
+- Core Storage
+- UI-Komponenten
+- Dashboard
+- Scheduling
+- Documents
+- Chat
+- Deployment
+- SMTP
+- Docker
+- Caddy
+- Backup/Restore
+
+Alle diese Punkte bleiben an `PROJECT_DESIGN.md` gebunden und werden schrittweise entschieden.
+
+---
+
+# 10. Arbeitsmethode
+
+Für jede Phase:
+
+```text
+1. PROJECT_DESIGN.md lesen
+2. bereits Festgelegtes übernehmen
+3. echte offene Entscheidungen identifizieren
+4. gemeinsam entscheiden
+5. erst danach Tasks ableiten
+6. implementieren
+7. testen
+8. Checkpoint / Commit
+```
+
+Regel:
+
+> `TASKS.md` darf keine neue Architektur erfinden.
+
+---
+
+# 11. Aktueller nächster Schritt
+
+Aktueller Stand:
+
+```text
+Phase 2.3 — BrandProfile
+```
+
+Nächste Entscheidung:
+
+```text
+Soll BrandProfile created_at und updated_at erhalten?
+```
+
+Danach wird `BrandProfile` abgeschlossen und Phase 2.4 `Team` begonnen.
diff --git a/notes/index.html b/notes/index.html
new file mode 100644
index 0000000..ba6c5a7
--- /dev/null
+++ b/notes/index.html
@@ -0,0 +1,503 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>AHK Ehrenamtsmanagement – HTML Mockup</title>
+  <meta name="description" content="Statischer klickbarer UI-Mockup für AHK Ehrenamtsmanagement">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="mockup.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+</head>
+<body class="mockup-app">
+  <div class="app-shell">
+    <aside class="mock-sidebar" aria-label="Hauptnavigation">
+      <div class="brand-lockup">
+        <div class="brand-mark" aria-hidden="true">AHK</div>
+        <div>
+          <strong>EHRENAMT</strong>
+          <span>Vor-Ort-Arbeit</span>
+        </div>
+      </div>
+
+      <button class="team-switcher" data-page="team" type="button">
+        <span class="material-icons" aria-hidden="true">groups</span>
+        <span><small>Aktuelles Team</small><strong>Vor-Ort-Arbeit</strong></span>
+        <span class="material-icons" aria-hidden="true">expand_more</span>
+      </button>
+
+      <nav class="desktop-nav" aria-label="App-Bereiche">
+        <p class="nav-label">Mein Bereich</p>
+        <button class="nav-item is-active" data-page="start"><span class="material-icons">home</span>Start</button>
+        <button class="nav-item" data-page="schedule"><span class="material-icons">calendar_month</span>Einsatzplan</button>
+        <button class="nav-item" data-page="chat"><span class="material-icons">forum</span>Teamchat <span class="nav-count">3</span></button>
+        <button class="nav-item" data-page="documents"><span class="material-icons">folder</span>Dokumente</button>
+        <button class="nav-item" data-page="team"><span class="material-icons">groups</span>Team</button>
+        <button class="nav-item" data-page="profile"><span class="material-icons">person</span>Profil</button>
+
+        <p class="nav-label">Verwaltung</p>
+        <button class="nav-item" data-page="team-manage"><span class="material-icons">manage_accounts</span>Team verwalten</button>
+        <button class="nav-item" data-page="org-manage"><span class="material-icons">domain</span>Organisation</button>
+        <button class="nav-item" data-page="audit"><span class="material-icons">history</span>Audit Log</button>
+      </nav>
+
+      <div class="mock-sidebar-footer">
+        <button class="nav-item nav-item--subtle" data-page="login"><span class="material-icons">present_to_all</span>Präsentation ab Login</button>
+        <div class="mini-account">
+          <div class="avatar avatar--small">P</div>
+          <div><strong>Patsy</strong><span>Team-Verwaltung</span></div>
+        </div>
+      </div>
+    </aside>
+
+    <header class="mobile-header">
+      <div class="brand-lockup brand-lockup--mobile">
+        <div class="brand-mark" aria-hidden="true">AHK</div>
+        <div><strong>EHRENAMT</strong><span>Vor-Ort-Arbeit</span></div>
+      </div>
+      <div class="header-actions">
+        <button class="icon-button" data-page="notifications" aria-label="Benachrichtigungen">
+          <span class="material-icons">notifications</span><span class="notification-dot">2</span>
+        </button>
+        <button class="avatar avatar--button" data-page="profile" aria-label="Profil öffnen">P</button>
+      </div>
+    </header>
+
+    <main class="app-main" id="main-content">
+      <div class="desktop-topbar">
+        <div class="route-chip" id="routeChip">/team/vor-ort-arbeit/</div>
+        <div class="desktop-actions">
+          <button class="icon-button icon-button--light" data-page="notifications" aria-label="Benachrichtigungen">
+            <span class="material-icons">notifications</span><span class="notification-dot">2</span>
+          </button>
+          <button class="btn btn-ghost btn-sm" data-page="profile"><span class="material-icons">person</span>Patsy</button>
+        </div>
+      </div>
+
+      <!-- LOGIN -->
+      <section class="screen screen--auth" data-screen="login" hidden>
+        <div class="auth-panel">
+          <div class="auth-brand">
+            <div class="brand-mark brand-mark--large">AHK</div>
+            <p class="kicker">Ehrenamtsmanagement</p>
+            <h1>Willkommen zurück</h1>
+            <p>Mit deiner E-Mail-Adresse erhältst du einen einmaligen Code oder einen direkten Anmeldelink.</p>
+          </div>
+          <form class="card auth-card" onsubmit="return false;">
+            <div class="card-body">
+              <div class="form-group">
+                <label for="loginEmail">E-Mail-Adresse</label>
+                <input class="form-control" id="loginEmail" type="email" value="patsy@example.org" autocomplete="email">
+                <span class="form-hint">Wir senden den Code nur an deine hinterlegte Login-Adresse.</span>
+              </div>
+              <button class="btn btn-primary btn-lg btn-full" data-page="verify" type="button">Code anfordern</button>
+            </div>
+          </form>
+          <p class="auth-footnote">Mockup: Es werden keine Daten versendet.</p>
+        </div>
+      </section>
+
+      <!-- VERIFY -->
+      <section class="screen screen--auth" data-screen="verify" hidden>
+        <div class="auth-panel">
+          <button class="text-back" data-page="login"><span class="material-icons">arrow_back</span>Zurück</button>
+          <div class="auth-brand">
+            <p class="kicker">Fast geschafft</p>
+            <h1>Code eingeben</h1>
+            <p>Wir haben einen sechsstelligen Code an <strong>patsy@example.org</strong> geschickt.</p>
+          </div>
+          <form class="card auth-card" onsubmit="return false;">
+            <div class="card-body">
+              <div class="code-inputs" aria-label="Einmal-Code">
+                <input value="2" aria-label="Ziffer 1"><input value="4" aria-label="Ziffer 2"><input value="8" aria-label="Ziffer 3"><input value="1" aria-label="Ziffer 4"><input value="7" aria-label="Ziffer 5"><input value="3" aria-label="Ziffer 6">
+              </div>
+              <button class="btn btn-primary btn-lg btn-full" data-page="onboarding-name" type="button">Weiter</button>
+              <button class="btn btn-ghost btn-full" type="button">Neuen Code senden</button>
+            </div>
+          </form>
+        </div>
+      </section>
+
+      <!-- ONBOARDING NAME -->
+      <section class="screen screen--auth" data-screen="onboarding-name" hidden>
+        <div class="auth-panel">
+          <div class="auth-brand">
+            <p class="kicker">Dein Profil</p>
+            <h1>Wie sollen wir dich nennen?</h1>
+            <p>Dieser Name ist für dein Team sichtbar. Deine Login-E-Mail bleibt für normale Teammitglieder verborgen.</p>
+          </div>
+          <div class="card auth-card">
+            <div class="card-body">
+              <div class="form-group">
+                <label for="displayName">Anzeigename</label>
+                <input class="form-control" id="displayName" value="Patsy">
+              </div>
+              <div class="avatar-picker" aria-label="Avatar auswählen">
+                <button class="avatar-choice is-selected"><span class="avatar avatar--a">A</span><span>Avatar A</span></button>
+                <button class="avatar-choice"><span class="avatar avatar--b">B</span><span>Avatar B</span></button>
+                <button class="avatar-choice"><span class="avatar avatar--c">C</span><span>Avatar C</span></button>
+              </div>
+              <button class="btn btn-primary btn-lg btn-full" data-page="team-select" type="button">Weiter zur Teamauswahl</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- TEAM SELECT -->
+      <section class="screen screen--auth" data-screen="team-select" hidden>
+        <div class="auth-panel auth-panel--wide">
+          <div class="auth-brand">
+            <p class="kicker">Deine Teams</p>
+            <h1>Wo möchtest du starten?</h1>
+            <p>Du kannst später jederzeit zwischen deinen Teams wechseln.</p>
+          </div>
+          <div class="team-choice-grid">
+            <button class="team-choice is-selected" data-page="start">
+              <span class="team-choice__icon material-icons">diversity_3</span>
+              <span><strong>Vor-Ort-Arbeit</strong><small>18 Mitglieder · 2 offene Einsätze</small></span>
+              <span class="material-icons">arrow_forward</span>
+            </button>
+            <button class="team-choice" data-page="start">
+              <span class="team-choice__icon material-icons">local_cafe</span>
+              <span><strong>Café Bach</strong><small>12 Mitglieder · keine offenen Aufgaben</small></span>
+              <span class="material-icons">arrow_forward</span>
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <!-- START -->
+      <section class="screen" data-screen="start">
+        <header class="page-header member-hero">
+          <p class="eyebrow">Montag, 17. August</p>
+          <h1>Guten Morgen, Patsy</h1>
+          <p class="page-subtitle">Hier ist, was heute für dich und dein Team wichtig ist.</p>
+        </header>
+
+        <article class="urgent-card" data-page="schedule">
+          <div class="urgent-card__icon"><span class="material-icons">priority_high</span></div>
+          <div>
+            <span class="card-label card-label--urgent">Dringend · heute</span>
+            <h2>Springer:in für heute gesucht</h2>
+            <p>18:00–21:30 · Café Bach · Noch 1 Position offen</p>
+          </div>
+          <span class="material-icons urgent-card__arrow">arrow_forward</span>
+        </article>
+
+        <div class="section-heading">
+          <div><span class="card-label card-label--upcoming">Nächste Einsätze</span><h2>Dein Plan</h2></div>
+          <button class="text-action" data-page="schedule">Alle ansehen</button>
+        </div>
+
+        <div class="shift-stack">
+          <article class="shift-card">
+            <div class="date-tile"><strong>21</strong><span>AUG</span></div>
+            <div class="shift-card__content">
+              <div class="shift-card__title-row"><h3>Freitagabend</h3><span class="badge status-badge-ui status-ok"><span class="material-icons">check_circle</span>Eingeteilt</span></div>
+              <p>18:30–21:30 · Café Bach</p>
+              <span class="position-pill">Theke</span>
+            </div>
+          </article>
+          <article class="shift-card">
+            <div class="date-tile"><strong>28</strong><span>AUG</span></div>
+            <div class="shift-card__content">
+              <div class="shift-card__title-row"><h3>Checkpoint-Abend</h3><span class="badge status-badge-ui status-info"><span class="material-icons">schedule</span>Verfügbar</span></div>
+              <p>17:30–21:00 · Pipinstraße</p>
+              <span class="position-pill">Hauptposition</span>
+            </div>
+          </article>
+        </div>
+
+        <div class="dashboard-grid">
+          <button class="dashboard-tile" data-page="schedule">
+            <span class="tile-icon tile-icon--teal material-icons">event_available</span>
+            <span><small>Action</small><strong>4 Termine offen</strong><em>Verfügbarkeit angeben</em></span>
+            <span class="material-icons">chevron_right</span>
+          </button>
+          <button class="dashboard-tile" data-page="chat">
+            <span class="tile-icon tile-icon--blue material-icons">forum</span>
+            <span><small>Info</small><strong>3 neue Nachrichten</strong><em>im Team-Channel</em></span>
+            <span class="material-icons">chevron_right</span>
+          </button>
+          <button class="dashboard-tile" data-page="documents">
+            <span class="tile-icon material-icons">description</span>
+            <span><small>Info</small><strong>1 neues Dokument</strong><em>Safer-Sex-Leitfaden</em></span>
+            <span class="material-icons">chevron_right</span>
+          </button>
+          <button class="dashboard-tile" data-page="team">
+            <span class="tile-icon tile-icon--yellow material-icons">groups</span>
+            <span><small>Team</small><strong>18 Mitglieder</strong><em>Kontakte & Zuständigkeiten</em></span>
+            <span class="material-icons">chevron_right</span>
+          </button>
+        </div>
+      </section>
+
+      <!-- TEAM -->
+      <section class="screen" data-screen="team" hidden>
+        <header class="page-header with-team-switch">
+          <div><p class="kicker">Vor-Ort-Arbeit</p><h1>Unser Team</h1><p class="page-subtitle">Menschen, Kontakte und aktuelle Team-Infos.</p></div>
+          <button class="btn btn-ghost btn-sm"><span class="material-icons">swap_horiz</span>Team wechseln</button>
+        </header>
+
+        <div class="team-highlight card">
+          <div class="card-body">
+            <span class="card-label card-label--info">Ankündigung</span>
+            <h2>Teamtreffen am 26. August</h2>
+            <p>Wir besprechen die September-Planung und sammeln Feedback zur neuen Einsatzstruktur.</p>
+            <span class="meta-line"><span class="material-icons">campaign</span>von Alex · vor 2 Stunden</span>
+          </div>
+        </div>
+
+        <div class="section-heading"><div><span class="card-label">Mitglieder</span><h2>18 Personen</h2></div><button class="text-action" data-page="members">Verzeichnis öffnen</button></div>
+        <div class="member-preview-row">
+          <div class="avatar avatar--a">A</div><div class="avatar avatar--b">B</div><div class="avatar avatar--c">C</div><div class="avatar">P</div><div class="avatar avatar--muted">+14</div>
+        </div>
+
+        <div class="section-heading"><div><span class="card-label">Aktuell</span><h2>Im Team</h2></div></div>
+        <div class="card-list">
+          <button class="list-row" data-page="members"><span class="material-icons list-row__icon">contacts</span><span><strong>Mitgliederverzeichnis</strong><small>Kontaktdaten, Team-Verwaltungen, Zuständigkeiten</small></span><span class="material-icons">chevron_right</span></button>
+          <button class="list-row" data-page="documents"><span class="material-icons list-row__icon">folder</span><span><strong>Dokumente</strong><small>12 aktuelle Dokumente · 4 im Archiv</small></span><span class="material-icons">chevron_right</span></button>
+          <button class="list-row" data-page="chat"><span class="material-icons list-row__icon">forum</span><span><strong>Teamkommunikation</strong><small>2 aktive Channels</small></span><span class="nav-count">3</span></button>
+        </div>
+      </section>
+
+      <!-- MEMBERS -->
+      <section class="screen" data-screen="members" hidden>
+        <header class="page-header">
+          <p class="kicker">Vor-Ort-Arbeit</p><h1>Mitglieder</h1><p class="page-subtitle">Kontaktdaten sind nur sichtbar, wenn sie freiwillig geteilt wurden.</p>
+        </header>
+        <div class="search-row"><div class="search-box"><span class="material-icons">search</span><input placeholder="Mitglied suchen …"></div><span class="badge badge-blue">18 aktiv</span></div>
+        <div class="member-list">
+          <article class="member-card">
+            <div class="avatar avatar--a">A</div><div class="member-card__main"><div><h3>Alex</h3><span class="badge badge-teal">Team-Verwaltung</span></div><p>Erreichbar: Signal · ab 17 Uhr</p><a href="#">+49 170 1234567</a></div><button class="icon-button icon-button--light" aria-label="Kontakt"><span class="material-icons">chat</span></button>
+          </article>
+          <article class="member-card">
+            <div class="avatar avatar--b">B</div><div class="member-card__main"><div><h3>Sam</h3></div><p>Erreichbar: SMS · bitte keine Anrufe</p><a href="#">+49 171 9876543</a></div><button class="icon-button icon-button--light" aria-label="Kontakt"><span class="material-icons">sms</span></button>
+          </article>
+          <article class="member-card">
+            <div class="avatar avatar--c">C</div><div class="member-card__main"><div><h3>Jo</h3></div><p class="muted-copy">Keine Kontaktdaten freigegeben</p></div><span class="material-icons muted-icon">lock</span>
+          </article>
+          <article class="member-card member-card--admin-extra">
+            <div class="avatar">M</div><div class="member-card__main"><div><h3>Mehmet</h3><span class="badge badge-muted">Eingeladen</span></div><p>Login: mehmet@example.org · Einladung offen</p><small>Beitritt: noch nicht erfolgt</small></div><button class="btn btn-ghost btn-sm">Details</button>
+          </article>
+        </div>
+        <div class="context-note"><span class="material-icons">visibility</span><span><strong>Verwaltungsansicht:</strong> Die letzte Zeile zeigt exemplarisch Zusatzdaten, die nur Team-Verwaltungen sehen.</span></div>
+      </section>
+
+      <!-- SCHEDULE -->
+      <section class="screen" data-screen="schedule" hidden>
+        <header class="page-header">
+          <p class="kicker">Einsatzplanung</p><h1>September 2026</h1><p class="page-subtitle">Verfügbarkeit offen bis 23. August · Veröffentlichung geplant für 25. August.</p>
+        </header>
+
+        <div class="period-progress card">
+          <div class="card-body">
+            <div class="period-progress__top"><span class="badge status-badge-ui status-action"><span class="material-icons">edit_calendar</span>Verfügbarkeit offen</span><strong>3 von 7 beantwortet</strong></div>
+            <div class="progress-track"><span style="width:43%"></span></div>
+            <p>Bitte gib für jeden Termin an, ob du verfügbar bist.</p>
+          </div>
+        </div>
+
+        <div class="availability-list">
+          <article class="availability-card">
+            <div class="date-tile"><strong>04</strong><span>SEP</span></div>
+            <div class="availability-card__main"><h3>Checkpoint-Abend</h3><p>17:30–21:00 · Pipinstraße</p><div class="need-row"><span>Haupt: 2</span><span>Springer: 1</span></div></div>
+            <div class="availability-actions"><button class="answer-btn answer-btn--yes is-selected"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no"><span class="material-icons">close</span>Nein</button></div>
+          </article>
+          <article class="availability-card availability-card--urgent">
+            <div class="date-tile"><strong>18</strong><span>SEP</span></div>
+            <div class="availability-card__main"><div class="title-with-badge"><h3>Freitagabend</h3><span class="badge badge-coral">Offen</span></div><p>18:00–21:30 · Café Bach</p><div class="need-row"><span>Haupt: 2/2</span><span>Springer: 0/1</span></div></div>
+            <div class="availability-actions"><button class="answer-btn answer-btn--yes"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no"><span class="material-icons">close</span>Nein</button></div>
+          </article>
+          <article class="availability-card">
+            <div class="date-tile"><strong>25</strong><span>SEP</span></div>
+            <div class="availability-card__main"><h3>Checkpoint-Abend</h3><p>17:30–21:00 · Pipinstraße</p><div class="need-row"><span>Haupt: 2</span><span>Springer: 1</span></div></div>
+            <div class="availability-actions"><button class="answer-btn answer-btn--yes"><span class="material-icons">check</span>Ja</button><button class="answer-btn answer-btn--no is-selected"><span class="material-icons">close</span>Nein</button></div>
+          </article>
+        </div>
+      </section>
+
+      <!-- DOCUMENTS -->
+      <section class="screen" data-screen="documents" hidden>
+        <header class="page-header page-header--actions">
+          <div><p class="kicker">Teamwissen</p><h1>Dokumente</h1><p class="page-subtitle">Freigegebene Materialien für Vor-Ort-Arbeit.</p></div>
+          <button class="btn btn-primary"><span class="material-icons">upload</span>Hochladen</button>
+        </header>
+        <div class="segmented" role="tablist" aria-label="Dokumentenstatus"><button class="is-active">Aktuell <span>12</span></button><button>Archiv <span>4</span></button></div>
+        <div class="document-list">
+          <article class="document-card">
+            <div class="file-icon file-icon--pdf">PDF</div><div><h3>Safer-Sex-Leitfaden 2026</h3><p>Aktuelle Hinweise für Beratung und Vor-Ort-Arbeit.</p><span>PDF · 1,8 MB · aktualisiert 12.08.2026</span></div><button class="icon-button icon-button--light"><span class="material-icons">download</span></button>
+          </article>
+          <article class="document-card">
+            <div class="file-thumb"><span class="material-icons">image</span></div><div><h3>Aufbauplan Infostand</h3><p>Foto mit markierter Positionierung der Materialien.</p><span>JPG · 840 KB · aktualisiert 02.08.2026</span></div><button class="icon-button icon-button--light"><span class="material-icons">visibility</span></button>
+          </article>
+          <article class="document-card document-card--pending">
+            <div class="file-icon">DOCX</div><div><div class="title-with-badge"><h3>Checkliste Materialkiste</h3><span class="badge badge-yellow">Prüfung läuft</span></div><p>Nur für dich und Team-Verwaltung sichtbar.</p><span>DOCX · 95 KB · von dir hochgeladen</span></div><button class="btn btn-ghost btn-sm">Zurückziehen</button>
+          </article>
+        </div>
+        <div class="context-note"><span class="material-icons">photo_camera</span><span>Bitte nur Fotos hochladen, für die die erforderlichen Rechte geklärt sind.</span></div>
+      </section>
+
+      <!-- CHAT -->
+      <section class="screen screen--chat" data-screen="chat" hidden>
+        <header class="page-header"><p class="kicker">Teamkommunikation</p><h1>Teamchat</h1><p class="page-subtitle">Keine Dateien, keine Embeds – nur klare Teamkommunikation.</p></header>
+        <div class="channel-layout">
+          <aside class="channel-list">
+            <button class="channel-item"><span class="material-icons">campaign</span><span><strong>Ankündigungen</strong><small>nur Team-Verwaltung schreibt</small></span><span class="nav-count">1</span></button>
+            <button class="channel-item is-active"><span class="material-icons">tag</span><span><strong>Team</strong><small>3 ungelesen</small></span><span class="nav-count">3</span></button>
+            <button class="channel-item"><span class="material-icons">tag</span><span><strong>Veranstaltungen</strong><small>keine neuen Nachrichten</small></span></button>
+          </aside>
+          <section class="chat-pane">
+            <div class="chat-pane__header"><div><strong># Team</strong><span>18 Mitglieder</span></div><button class="icon-button icon-button--light"><span class="material-icons">info</span></button></div>
+            <div class="message-stream">
+              <div class="chat-day"><span>Heute</span></div>
+              <article class="message-bubble message-bubble--other"><div class="message-author"><span class="avatar avatar--mini avatar--a">A</span><strong>Alex</strong><time>09:12</time></div><p>Kann jemand am Freitag die Materialkiste schon um 17:30 mitbringen?</p><div class="message-state">✓✓ gelesen von 8/18</div></article>
+              <article class="message-bubble message-bubble--own"><div class="message-author"><strong>Du</strong><time>09:18</time></div><p>Ja, ich kann sie auf dem Weg mitnehmen.</p><div class="message-state message-state--read">✓✓ gelesen</div></article>
+              <article class="message-bubble message-bubble--other message-bubble--reply"><div class="reply-reference">Antwort auf deine Nachricht</div><div class="message-author"><span class="avatar avatar--mini avatar--b">B</span><strong>Sam</strong><time>09:22</time></div><p>Perfekt, danke! Dann schreibe ich das so in die Vorbereitung.</p><div class="message-state">✓ gespeichert</div></article>
+            </div>
+            <form class="chat-composer" onsubmit="return false;"><textarea aria-label="Nachricht" placeholder="Nachricht an #Team"></textarea><div><span class="composer-hint">https-Link möglich · max. 1 externer Link</span><button class="send-button" aria-label="Senden"><span class="material-icons">send</span></button></div></form>
+          </section>
+        </div>
+      </section>
+
+      <!-- PROFILE -->
+      <section class="screen" data-screen="profile" hidden>
+        <header class="page-header"><p class="kicker">Mein Konto</p><h1>Profil</h1><p class="page-subtitle">So sehen dich deine Teamkolleg:innen.</p></header>
+        <div class="profile-grid">
+          <section class="card profile-card">
+            <div class="card-body">
+              <div class="profile-identity"><div class="avatar avatar--large">P</div><div><h2>Patsy</h2><span>Avatar A</span></div></div>
+              <div class="form-group"><label>Anzeigename</label><input class="form-control" value="Patsy"></div>
+              <div class="avatar-picker avatar-picker--compact"><button class="avatar-choice is-selected"><span class="avatar avatar--a">A</span><span>A</span></button><button class="avatar-choice"><span class="avatar avatar--b">B</span><span>B</span></button><button class="avatar-choice"><span class="avatar avatar--c">C</span><span>C</span></button></div>
+              <button class="btn btn-primary">Änderungen speichern</button>
+            </div>
+          </section>
+          <section class="card">
+            <div class="card-header"><h2>Kontaktdaten im Team</h2><span class="badge badge-muted">Standard: aus</span></div>
+            <div class="card-body">
+              <label class="toggle-row"><span><strong>Kontaktdaten teilen</strong><small>Nur Mitglieder deines Teams sehen diese Angaben.</small></span><input type="checkbox"><span class="toggle-ui"></span></label>
+              <div class="form-group"><label>Telefon</label><input class="form-control" value="+49 170 1234567"></div>
+              <div class="form-group"><label>Erreichbar per</label><div class="choice-pills"><button class="is-selected">Signal</button><button>SMS</button><button>Anruf</button></div></div>
+              <div class="form-group"><label>Kontakt-Notiz</label><textarea class="form-control">Am besten ab 17 Uhr.</textarea></div>
+            </div>
+          </section>
+          <section class="card profile-card--wide">
+            <div class="card-header"><h2>Angemeldete Geräte</h2></div>
+            <div class="device-row"><span class="material-icons">computer</span><div><strong>Heimdall-home · Brave</strong><small>Dieses Gerät · zuletzt aktiv gerade eben</small></div><span class="badge badge-teal">Aktuell</span></div>
+            <div class="device-row"><span class="material-icons">smartphone</span><div><strong>Galaxy · Chrome</strong><small>Zuletzt aktiv gestern, 22:14</small></div><button class="btn btn-ghost btn-sm">Abmelden</button></div>
+          </section>
+        </div>
+      </section>
+
+      <!-- NOTIFICATIONS -->
+      <section class="screen" data-screen="notifications" hidden>
+        <header class="page-header"><p class="kicker">Glocke</p><h1>Benachrichtigungen</h1><p class="page-subtitle">Nur Ereignisse, die deine Aufmerksamkeit brauchen – dauerhafte Zustände bleiben im Dashboard.</p></header>
+        <div class="notification-list">
+          <article class="notification-card notification-card--urgent"><span class="material-icons">priority_high</span><div><span class="card-label card-label--urgent">Dringend</span><h3>Offener Dienst in weniger als 24 Stunden</h3><p>Heute, 18:00 · Springer:in noch unbesetzt.</p><time>vor 12 Minuten</time></div></article>
+          <article class="notification-card notification-card--important"><span class="material-icons">event_available</span><div><span class="card-label card-label--action">Wichtig</span><h3>Deine Einteilung wurde geändert</h3><p>Am 21.08. bist du jetzt für „Theke“ eingeteilt.</p><time>vor 2 Stunden</time></div></article>
+          <article class="notification-card"><span class="material-icons">reply</span><div><span class="card-label card-label--info">Antwort</span><h3>Sam hat dir im Teamchat geantwortet</h3><p>„Perfekt, danke! Dann schreibe ich das so …“</p><time>heute, 09:22</time></div></article>
+          <article class="notification-card"><span class="material-icons">campaign</span><div><span class="card-label card-label--info">Ankündigung</span><h3>Teamtreffen am 26. August</h3><p>Neue Ankündigung von Alex.</p><time>gestern</time></div></article>
+        </div>
+      </section>
+
+      <!-- TEAM MANAGE -->
+      <section class="screen" data-screen="team-manage" hidden>
+        <header class="page-header"><p class="kicker">Team-Verwaltung</p><h1>Vor-Ort-Arbeit</h1><p class="page-subtitle">Operative Aufgaben im Team – ohne Organisationsverwaltung.</p></header>
+        <div class="admin-kpi-grid">
+          <button class="admin-kpi admin-kpi--urgent"><span class="material-icons">warning</span><strong>2</strong><small>unterbesetzte Einsätze</small></button>
+          <button class="admin-kpi"><span class="material-icons">event_busy</span><strong>6</strong><small>Rückmeldungen fehlen</small></button>
+          <button class="admin-kpi"><span class="material-icons">fact_check</span><strong>2</strong><small>Dokumente warten</small></button>
+          <button class="admin-kpi"><span class="material-icons">mail</span><strong>3</strong><small>offene Einladungen</small></button>
+        </div>
+        <section class="card management-section">
+          <div class="card-header"><h2>Unterbesetzte Einsätze</h2><span class="badge badge-coral">Handlungsbedarf</span></div>
+          <div class="management-row"><div><strong>Heute · Freitagabend</strong><span>18:00–21:30 · Springer: 0/1</span></div><button class="btn btn-coral btn-sm">Offenen Platz besetzen</button></div>
+          <div class="management-row"><div><strong>04.09. · Checkpoint-Abend</strong><span>17:30–21:00 · Haupt: 1/2</span></div><button class="btn btn-ghost btn-sm">Planung öffnen</button></div>
+        </section>
+        <section class="card management-section">
+          <div class="card-header"><h2>Fairness-Hilfe</h2><span class="badge badge-blue">Vorschlag</span></div>
+          <div class="fairness-table">
+            <div class="fairness-head"><span>Person</span><span>Einsätze</span><span>Letzter Einsatz</span></div>
+            <div><strong>Sam</strong><span>2</span><span>18.07.</span></div><div><strong>Jo</strong><span>3</span><span>01.08.</span></div><div><strong>Patsy</strong><span>5</span><span>14.08.</span></div>
+          </div>
+        </section>
+      </section>
+
+      <!-- ORG MANAGE -->
+      <section class="screen" data-screen="org-manage" hidden>
+        <header class="page-header"><p class="kicker">Organisationsverwaltung</p><h1>Aidshilfe Köln</h1><p class="page-subtitle">Struktur, Rechte, Brand Profiles und Module – keine teaminternen Fachinhalte.</p></header>
+        <div class="context-note context-note--strong"><span class="material-icons">shield</span><span>Diese Ebene zeigt bewusst <strong>keinen Teamchat, keine Einsatzdetails und keine Teamdokumente</strong>.</span></div>
+        <div class="org-grid">
+          <button class="org-card"><span class="material-icons">groups</span><strong>7 Teams</strong><small>Teams anlegen, archivieren und verwalten</small><span class="material-icons">arrow_forward</span></button>
+          <button class="org-card"><span class="material-icons">admin_panel_settings</span><strong>Team-Verwaltungen</strong><small>Rollen pro Team vergeben</small><span class="material-icons">arrow_forward</span></button>
+          <button class="org-card"><span class="material-icons">palette</span><strong>Brand Profiles</strong><small>Farben, Typografie und Team-Identität</small><span class="material-icons">arrow_forward</span></button>
+          <button class="org-card"><span class="material-icons">extension</span><strong>Module</strong><small>Scheduling, Chat und Dokumente aktivieren</small><span class="material-icons">arrow_forward</span></button>
+          <button class="org-card"><span class="material-icons">verified_user</span><strong>Org-Admins</strong><small>Organisationsrechte verwalten</small><span class="material-icons">arrow_forward</span></button>
+          <button class="org-card" data-page="audit"><span class="material-icons">history</span><strong>Audit Log</strong><small>Administrative Änderungen nachvollziehen</small><span class="material-icons">arrow_forward</span></button>
+        </div>
+      </section>
+
+      <!-- AUDIT -->
+      <section class="screen" data-screen="audit" hidden>
+        <header class="page-header"><p class="kicker">Organisation</p><h1>Audit Log</h1><p class="page-subtitle">Nur relevante administrative Änderungen. Chat und Verfügbarkeiten werden hier nicht protokolliert.</p></header>
+        <div class="filter-bar card"><div class="search-box"><span class="material-icons">search</span><input placeholder="Audit Log durchsuchen …"></div><select class="form-control"><option>Alle Ereignisse</option><option>Teams</option><option>Rechte</option><option>Module</option><option>Dokumente</option></select></div>
+        <div class="audit-list card">
+          <div class="audit-row"><span class="audit-icon"><span class="material-icons">manage_accounts</span></span><div><strong>Team-Verwaltung ernannt</strong><p>Alex wurde für „Vor-Ort-Arbeit“ als Team-Verwaltung ernannt.</p><span>Patsy · 17.08.2026, 10:42</span></div></div>
+          <div class="audit-row"><span class="audit-icon"><span class="material-icons">extension</span></span><div><strong>Modul aktiviert</strong><p>„Dokumente“ wurde für Team „Café Bach“ aktiviert.</p><span>Org-Admin · 16.08.2026, 14:08</span></div></div>
+          <div class="audit-row"><span class="audit-icon audit-icon--danger"><span class="material-icons">delete_forever</span></span><div><strong>Dokument dauerhaft gelöscht</strong><p>„Alte Kontaktdaten.xlsx“ wurde dauerhaft entfernt.</p><span>Alex · 15.08.2026, 18:31</span></div></div>
+        </div>
+      </section>
+    </main>
+
+    <nav class="bottom-nav" aria-label="Mobile Navigation">
+      <button class="bottom-nav__item is-active" data-page="start"><span class="material-icons">home</span><span>Start</span></button>
+      <button class="bottom-nav__item" data-page="schedule"><span class="material-icons">calendar_month</span><span>Plan</span></button>
+      <button class="bottom-nav__item" data-page="chat"><span class="material-icons">forum</span><span>Chat</span><i>3</i></button>
+      <button class="bottom-nav__item" data-page="documents"><span class="material-icons">folder</span><span>Dateien</span></button>
+      <button class="bottom-nav__item" data-page="team"><span class="material-icons">groups</span><span>Team</span></button>
+      <button class="bottom-nav__item" data-page="profile"><span class="material-icons">person</span><span>Profil</span></button>
+    </nav>
+  </div>
+
+  <script>
+    const screens = [...document.querySelectorAll('[data-screen]')];
+    const pageButtons = [...document.querySelectorAll('[data-page]')];
+    const routeChip = document.getElementById('routeChip');
+
+    const routes = {
+      login: '/auth/login/', verify: '/auth/verify/', 'onboarding-name': '/onboarding/profile/', 'team-select': '/onboarding/team/',
+      start: '/team/vor-ort-arbeit/', team: '/team/vor-ort-arbeit/team/', members: '/team/vor-ort-arbeit/members/',
+      schedule: '/team/vor-ort-arbeit/scheduling/', documents: '/team/vor-ort-arbeit/documents/', chat: '/team/vor-ort-arbeit/chat/',
+      profile: '/profile/', notifications: '/notifications/', 'team-manage': '/team/vor-ort-arbeit/manage/', 'org-manage': '/org/aidshilfe-koeln/manage/', audit: '/org/aidshilfe-koeln/manage/audit/'
+    };
+
+    function showPage(page, pushHash = true) {
+      const target = screens.find(screen => screen.dataset.screen === page) || screens.find(screen => screen.dataset.screen === 'start');
+      screens.forEach(screen => screen.hidden = screen !== target);
+      document.querySelectorAll('.nav-item, .bottom-nav__item').forEach(button => button.classList.toggle('is-active', button.dataset.page === page));
+      routeChip.textContent = routes[page] || routes.start;
+      if (pushHash) history.replaceState(null, '', '#' + page);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+
+    pageButtons.forEach(button => button.addEventListener('click', () => showPage(button.dataset.page)));
+
+    document.querySelectorAll('.answer-btn').forEach(button => {
+      button.addEventListener('click', () => {
+        button.parentElement.querySelectorAll('.answer-btn').forEach(b => b.classList.remove('is-selected'));
+        button.classList.add('is-selected');
+      });
+    });
+
+    document.querySelectorAll('.avatar-choice').forEach(button => {
+      button.addEventListener('click', () => {
+        button.closest('.avatar-picker').querySelectorAll('.avatar-choice').forEach(b => b.classList.remove('is-selected'));
+        button.classList.add('is-selected');
+      });
+    });
+
+    const initial = location.hash.replace('#','');
+    if (initial && screens.some(s => s.dataset.screen === initial)) showPage(initial, false);
+  </script>
+</body>
+</html>
diff --git a/notes/mockup.css b/notes/mockup.css
new file mode 100644
index 0000000..e2db6ee
--- /dev/null
+++ b/notes/mockup.css
@@ -0,0 +1,400 @@
+/*
+ * AHK Ehrenamtsmanagement — Präsentations-Mockup
+ * Ergänzt die unveränderte style.css um die mobile Mitglieder-App.
+ */
+
+:root {
+  --brand-ink: #07182E;
+  --brand-deep: #061126;
+  --brand-teal: #00858A;
+  --brand-teal-strong: #005F61;
+  --brand-aqua: #52E0CF;
+  --brand-blue: #2596BE;
+  --brand-coral: #F04A67;
+  --brand-yellow: #F6E74A;
+  --brand-mist: #F4FAFC;
+  --brand-paper: #FFFFFF;
+}
+
+body.mockup-app {
+  display: block;
+  min-height: 100vh;
+  color: var(--brand-ink);
+  background: var(--brand-deep);
+  overflow-x: hidden;
+}
+
+button { min-height: 44px; }
+button, a { -webkit-tap-highlight-color: transparent; }
+
+.app-shell { min-height: 100vh; background: var(--brand-mist); }
+
+.mock-sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 40;
+  width: 260px;
+  display: none;
+  flex-direction: column;
+  color: #fff;
+  background:
+    radial-gradient(circle at 14% 8%, rgba(82,224,207,.25), transparent 20rem),
+    linear-gradient(165deg, var(--brand-teal-strong), var(--brand-deep) 78%);
+  border-right: 1px solid rgba(255,255,255,.1);
+}
+
+.brand-lockup { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.1rem .9rem; }
+.brand-lockup strong { display: block; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .04em; line-height: .85; }
+.brand-lockup span { display: block; margin-top: .18rem; color: rgba(255,255,255,.7); font-size: .7rem; }
+.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid var(--brand-aqua); border-radius: 12px 4px 12px 4px; color: var(--brand-yellow); font-family: var(--font-display); font-size: 1.05rem; font-weight: 900; letter-spacing: .03em; transform: rotate(-2deg); }
+.brand-mark--large { width: 62px; height: 62px; margin: 0 auto 1.2rem; font-size: 1.4rem; }
+
+.team-switcher { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; width: calc(100% - 1.4rem); margin: .35rem .7rem .7rem; padding: .72rem .8rem; border: 1px solid rgba(255,255,255,.13); border-radius: .75rem; color: #fff; background: rgba(255,255,255,.06); text-align: left; cursor: pointer; }
+.team-switcher small, .team-switcher strong { display: block; }
+.team-switcher small { color: rgba(255,255,255,.52); font-size: .63rem; text-transform: uppercase; letter-spacing: .07em; }
+.team-switcher strong { font-size: .82rem; }
+
+.desktop-nav { display: flex; flex: 1; flex-direction: column; gap: 2px; overflow-y: auto; padding: .2rem .65rem 1rem; }
+.nav-label { padding: 1rem .7rem .35rem; color: rgba(255,255,255,.36); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
+.nav-item { display: flex; align-items: center; gap: .68rem; width: 100%; min-height: 46px; padding: .62rem .7rem; border: 0; border-radius: .65rem; color: rgba(255,255,255,.76); background: transparent; text-align: left; cursor: pointer; font-weight: 650; }
+.nav-item .material-icons { color: rgba(255,255,255,.44); font-size: 1.15rem; }
+.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
+.nav-item.is-active { color: #fff; background: rgba(82,224,207,.16); box-shadow: inset 3px 0 0 var(--brand-aqua); }
+.nav-item.is-active .material-icons { color: var(--brand-yellow); }
+.nav-count { display: inline-grid; min-width: 1.3rem; height: 1.3rem; margin-left: auto; padding: 0 .3rem; place-items: center; border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .65rem; font-style: normal; font-weight: 800; }
+.nav-item--subtle { margin-bottom: .6rem; color: rgba(255,255,255,.55); font-size: .78rem; }
+.mock-sidebar-footer { padding: .7rem; border-top: 1px solid rgba(255,255,255,.1); }
+.mini-account { display: flex; align-items: center; gap: .65rem; padding: .7rem .55rem; }
+.mini-account strong, .mini-account span { display: block; }
+.mini-account strong { font-size: .8rem; }
+.mini-account span { color: var(--brand-aqua); font-size: .65rem; }
+
+.mobile-header { position: sticky; top: 0; z-index: 30; display: flex; min-height: 66px; align-items: center; justify-content: space-between; padding: 0 .8rem; color: #fff; background: linear-gradient(135deg, var(--brand-teal-strong), var(--brand-deep)); box-shadow: 0 3px 18px rgba(6,17,38,.2); }
+.brand-lockup--mobile { padding: 0; }
+.brand-lockup--mobile .brand-mark { width: 35px; height: 35px; border-radius: 10px 3px 10px 3px; font-size: .84rem; }
+.brand-lockup--mobile strong { font-size: 1.1rem; }
+.brand-lockup--mobile span { font-size: .62rem; }
+.header-actions { display: flex; align-items: center; gap: .35rem; }
+.icon-button { position: relative; display: inline-grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: transparent; cursor: pointer; }
+.icon-button:hover { background: rgba(255,255,255,.08); }
+.icon-button--light { color: var(--brand-ink); background: #fff; border: 1px solid rgba(7,24,46,.12); }
+.icon-button--light:hover { color: var(--brand-teal-strong); background: #eef8f9; }
+.notification-dot { position: absolute; top: 7px; right: 6px; display: grid; min-width: 17px; height: 17px; padding: 0 4px; place-items: center; border: 2px solid var(--brand-deep); border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .58rem; font-weight: 800; }
+.notification-dot::after { content: '2'; }
+
+.avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue)); font-weight: 800; box-shadow: 0 2px 7px rgba(7,24,46,.15); }
+.avatar--button { width: 38px; height: 38px; min-height: 38px; border: 2px solid rgba(255,255,255,.65); cursor: pointer; }
+.avatar--small { width: 34px; height: 34px; flex-basis: 34px; }
+.avatar--mini { width: 26px; height: 26px; flex-basis: 26px; border-width: 1px; font-size: .7rem; }
+.avatar--large { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.35rem; }
+.avatar--a { background: linear-gradient(135deg, #00858A, #005F61); }
+.avatar--b { background: linear-gradient(135deg, #2596BE, #5264d9); }
+.avatar--c { background: linear-gradient(135deg, #F04A67, #b744c4); }
+.avatar--muted { color: var(--brand-ink); background: #dceff2; border-color: #fff; }
+
+main.app-main {
+  margin: 0;
+  min-height: calc(100vh - 66px);
+  padding: 1.2rem .9rem 6.4rem;
+  color: var(--brand-ink);
+  background: var(--brand-mist);
+}
+.desktop-topbar { display: none; }
+.screen { width: min(100%, 1040px); margin: 0 auto; animation: page-in .18s ease-out; }
+@keyframes page-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+
+.page-header { margin-bottom: 1.35rem; }
+.page-header h1, .member-hero h1 { margin: 0 0 .4rem; color: var(--brand-ink); font-family: var(--font-display); font-size: clamp(2.25rem, 9vw, 3.6rem); font-weight: 700; line-height: .88; letter-spacing: -.015em; text-transform: uppercase; }
+.page-subtitle { max-width: 48rem; color: #425e70 !important; font-size: .9rem; }
+.eyebrow { margin-bottom: .42rem; color: var(--brand-teal-strong); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
+.kicker { color: var(--brand-teal) !important; }
+.with-team-switch, .page-header--actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
+
+.card { border-color: rgba(7,24,46,.12); background: #fff; box-shadow: 0 5px 18px rgba(7,24,46,.06); }
+.card-header { background: #edf7f8; border-color: rgba(7,24,46,.1); }
+.card-header h2, .card-header h3 { color: var(--brand-ink); }
+.card-body { color: #30495c; }
+.btn-primary { color: #fff !important; background: #087b7c !important; border-color: #087b7c !important; }
+.btn-primary:hover { background: #05696a !important; }
+.btn-ghost { color: var(--brand-ink); border-color: rgba(7,24,46,.18); background: #fff; }
+.btn-ghost:hover { color: var(--brand-ink); border-color: var(--brand-teal); background: #edf7f8; }
+
+.card-label { display: block; margin-bottom: .35rem; color: #607786; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
+.card-label--urgent { color: #b62542; }
+.card-label--action { color: #8b5a00; }
+.card-label--upcoming, .card-label--info { color: #087b7c; }
+
+.urgent-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; margin-bottom: 1.8rem; padding: 1rem; border: 1px solid rgba(240,74,103,.3); border-left: 5px solid var(--brand-coral); border-radius: 1rem; background: linear-gradient(110deg, #fff3f5, #fff); box-shadow: 0 6px 18px rgba(240,74,103,.09); cursor: pointer; }
+.urgent-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .75rem; color: #fff; background: var(--brand-coral); }
+.urgent-card h2 { margin: 0 0 .15rem; font-size: 1rem; }
+.urgent-card p { color: #4a6474; font-size: .78rem; }
+.urgent-card__arrow { color: var(--brand-coral); }
+
+.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.7rem 0 .8rem; }
+.section-heading h2 { margin: 0; color: var(--brand-ink); font-size: 1.1rem; }
+.text-action, .text-back { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0; border: 0; color: #087b7c; background: transparent; cursor: pointer; font-size: .78rem; font-weight: 800; }
+
+.shift-stack { display: grid; gap: .7rem; }
+.shift-card { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: .85rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; box-shadow: 0 3px 12px rgba(7,24,46,.05); }
+.date-tile { display: grid; width: 52px; height: 58px; place-items: center; align-content: center; border-radius: .7rem; color: #fff; background: var(--brand-teal-strong); }
+.date-tile strong { font-family: var(--font-display); font-size: 1.55rem; line-height: .9; }
+.date-tile span { margin-top: .2rem; color: var(--brand-aqua); font-size: .57rem; font-weight: 900; letter-spacing: .1em; }
+.shift-card__content { min-width: 0; }
+.shift-card__title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem; }
+.shift-card h3 { color: var(--brand-ink); font-size: .92rem; }
+.shift-card p { margin: .1rem 0 .4rem; color: #5c7280; font-size: .76rem; }
+.position-pill { display: inline-flex; padding: .18rem .5rem; border-radius: 999px; color: #075f60; background: #e2f5f3; font-size: .67rem; font-weight: 800; }
+.status-badge-ui { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid transparent; }
+.status-badge-ui .material-icons { font-size: .9rem; }
+.status-ok { color: #0a654f; background: #e5f6ef; border-color: #b9e8d4; }
+.status-info { color: #075c70; background: #e4f4f8; border-color: #b7dfe8; }
+.status-action { color: #6b5100; background: #fff5c9; border-color: #ead66b; }
+
+.dashboard-grid { display: grid; gap: .7rem; margin-top: 1.3rem; }
+.dashboard-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; width: 100%; padding: .9rem; border: 1px solid rgba(7,24,46,.1); border-radius: .85rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; box-shadow: 0 3px 10px rgba(7,24,46,.04); }
+.dashboard-tile > span:nth-child(2) { display: grid; }
+.dashboard-tile small { color: #6b7e89; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
+.dashboard-tile strong { margin-top: .1rem; font-size: .88rem; }
+.dashboard-tile em { color: #667c89; font-size: .72rem; font-style: normal; }
+.tile-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .72rem; color: #075f60; background: #e1f3f2; }
+.tile-icon--blue { color: #176b8a; background: #e1f0f5; }
+.tile-icon--yellow { color: #725600; background: #fff8c9; }
+
+.team-highlight h2 { margin: .15rem 0 .35rem; color: var(--brand-ink); font-size: 1.1rem; }
+.team-highlight p { color: #425e70; }
+.meta-line { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; color: #637b89; font-size: .72rem; }
+.meta-line .material-icons { font-size: 1rem; }
+.member-preview-row { display: flex; padding-left: .3rem; }
+.member-preview-row .avatar { margin-left: -8px; }
+.member-preview-row .avatar:first-child { margin-left: 0; }
+.card-list { overflow: hidden; border: 1px solid rgba(7,24,46,.11); border-radius: 1rem; background: #fff; }
+.list-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; width: 100%; padding: .9rem 1rem; border: 0; border-bottom: 1px solid rgba(7,24,46,.09); color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; }
+.list-row:last-child { border-bottom: 0; }
+.list-row span:nth-child(2) { display: grid; }
+.list-row strong { font-size: .84rem; }
+.list-row small { color: #687f8c; font-size: .7rem; }
+.list-row__icon { color: #087b7c; }
+
+.search-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1rem; }
+.search-box { display: flex; flex: 1; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .75rem; border: 1px solid rgba(7,24,46,.15); border-radius: .7rem; background: #fff; }
+.search-box .material-icons { color: #6b7f8c; font-size: 1.1rem; }
+.search-box input { width: 100%; border: 0; outline: 0; color: var(--brand-ink); background: transparent; }
+.member-list { display: grid; gap: .65rem; }
+.member-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid rgba(7,24,46,.11); border-radius: .85rem; background: #fff; }
+.member-card__main { min-width: 0; }
+.member-card__main > div { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
+.member-card h3 { color: var(--brand-ink); font-size: .92rem; }
+.member-card p { margin-top: .12rem; color: #536d7d; font-size: .73rem; }
+.member-card a { display: inline-block; margin-top: .2rem; color: #087b7c; font-size: .74rem; font-weight: 800; }
+.member-card small { color: #6a7d88; font-size: .67rem; }
+.muted-copy, .muted-icon { color: #81909a !important; }
+.member-card--admin-extra { border-style: dashed; background: #f9fcfd; }
+.context-note { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; padding: .8rem .9rem; border-left: 4px solid var(--brand-blue); border-radius: .55rem; color: #3a596b; background: #eaf4f7; font-size: .75rem; line-height: 1.5; }
+.context-note .material-icons { color: #176b8a; font-size: 1.05rem; }
+.context-note--strong { margin: 0 0 1.2rem; border-left-color: var(--brand-teal); background: #e7f5f4; }
+
+.period-progress { margin-bottom: 1rem; }
+.period-progress__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
+.period-progress__top strong { color: var(--brand-ink); font-size: .8rem; }
+.progress-track { height: 8px; margin: .8rem 0 .45rem; overflow: hidden; border-radius: 999px; background: #dcebed; }
+.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-teal), var(--brand-blue)); }
+.period-progress p { color: #687e8b; font-size: .72rem; }
+.availability-list { display: grid; gap: .7rem; }
+.availability-card { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .85rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; }
+.availability-card--urgent { border-left: 4px solid var(--brand-coral); }
+.availability-card__main h3 { color: var(--brand-ink); font-size: .9rem; }
+.availability-card__main p { color: #607886; font-size: .72rem; }
+.need-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
+.need-row span { padding: .18rem .45rem; border-radius: .4rem; color: #496777; background: #edf5f6; font-size: .65rem; font-weight: 700; }
+.availability-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
+.answer-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 44px; border: 1px solid rgba(7,24,46,.15); border-radius: .6rem; color: #526b7b; background: #fff; cursor: pointer; font-weight: 800; }
+.answer-btn .material-icons { font-size: 1rem; }
+.answer-btn--yes.is-selected { color: #075f60; border-color: #62bdb0; background: #ddf5f1; }
+.answer-btn--no.is-selected { color: #a82440; border-color: #ef9bad; background: #fff0f3; }
+.title-with-badge { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
+
+.segmented { display: inline-grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 1rem; padding: 4px; border-radius: .75rem; background: #dcebed; }
+.segmented button { min-height: 40px; border: 0; border-radius: .55rem; color: #5b7482; background: transparent; font-weight: 800; cursor: pointer; }
+.segmented button.is-active { color: var(--brand-ink); background: #fff; box-shadow: 0 2px 8px rgba(7,24,46,.08); }
+.segmented span { display: inline-grid; min-width: 20px; height: 20px; margin-left: .25rem; place-items: center; border-radius: 999px; background: #e7f1f3; font-size: .64rem; }
+.document-list { display: grid; gap: .7rem; }
+.document-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; }
+.document-card h3 { color: var(--brand-ink); font-size: .88rem; }
+.document-card p { margin: .12rem 0 .3rem; color: #506b7b; font-size: .72rem; }
+.document-card > div:nth-child(2) > span:last-child { color: #74858f; font-size: .65rem; }
+.file-icon, .file-thumb { display: grid; width: 48px; height: 56px; place-items: center; border-radius: .55rem; color: #176b8a; background: #e2f0f5; font-size: .62rem; font-weight: 900; }
+.file-icon--pdf { color: #ad2946; background: #fbe8ec; }
+.file-thumb { color: #075f60; background: linear-gradient(145deg, #dff5f1, #c6e9e8); }
+.document-card--pending { border-style: dashed; background: #fffdf2; }
+
+.channel-layout { display: grid; gap: .7rem; }
+.channel-list { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .2rem; }
+.channel-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; min-width: 180px; min-height: 58px; padding: .6rem .7rem; border: 1px solid rgba(7,24,46,.11); border-radius: .7rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; }
+.channel-item.is-active { border-color: #61bcb7; background: #e6f5f3; }
+.channel-item .material-icons { color: #087b7c; font-size: 1.1rem; }
+.channel-item span:nth-child(2) { display: grid; }
+.channel-item strong { font-size: .78rem; }
+.channel-item small { color: #667c89; font-size: .62rem; }
+.chat-pane { display: flex; min-height: 560px; flex-direction: column; overflow: hidden; border: 1px solid rgba(7,24,46,.11); border-radius: 1rem; background: #fff; box-shadow: 0 5px 18px rgba(7,24,46,.05); }
+.chat-pane__header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid rgba(7,24,46,.1); background: #edf7f8; }
+.chat-pane__header strong, .chat-pane__header span { display: block; }
+.chat-pane__header strong { color: var(--brand-ink); }
+.chat-pane__header span { color: #6c818c; font-size: .66rem; }
+.message-stream { display: flex; flex: 1; flex-direction: column; gap: .85rem; padding: .9rem; overflow-y: auto; background: linear-gradient(#f8fcfd, #fff); }
+.chat-day { display: flex; align-items: center; gap: .5rem; color: #87959e; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
+.chat-day::before, .chat-day::after { content: ''; flex: 1; height: 1px; background: #dce9ec; }
+.message-bubble { max-width: 88%; align-self: flex-start; padding: .7rem .8rem; border: 1px solid #dce7ea; border-radius: .9rem .9rem .9rem .2rem; background: #fff; box-shadow: 0 2px 6px rgba(7,24,46,.04); }
+.message-bubble--own { align-self: flex-end; border-color: #9ddbd4; border-radius: .9rem .9rem .2rem .9rem; background: #def3f0; }
+.message-bubble--reply { border-left: 4px solid var(--brand-blue); }
+.message-author { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
+.message-author strong { color: var(--brand-ink); font-size: .72rem; }
+.message-author time { margin-left: auto; color: #7e9099; font-size: .6rem; }
+.message-bubble p { color: #304d5e; font-size: .78rem; line-height: 1.48; }
+.message-state { margin-top: .32rem; color: #86949b; font-size: .58rem; text-align: right; }
+.message-state--read { color: #087b7c; font-weight: 800; }
+.reply-reference { margin: -.15rem 0 .45rem; padding: .3rem .45rem; border-left: 3px solid var(--brand-blue); color: #48687a; background: #edf5f8; font-size: .62rem; }
+.chat-composer { padding: .7rem; border-top: 1px solid rgba(7,24,46,.1); background: #edf7f8; }
+.chat-composer textarea { width: 100%; min-height: 76px; padding: .65rem; border: 1px solid rgba(7,24,46,.15); border-radius: .65rem; color: var(--brand-ink); background: #fff; resize: none; }
+.chat-composer > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; }
+.composer-hint { color: #73858f; font-size: .58rem; }
+.send-button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: .65rem; color: #fff; background: #087b7c; cursor: pointer; }
+
+.profile-grid { display: grid; gap: .9rem; }
+.profile-identity { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
+.profile-identity h2 { color: var(--brand-ink); font-size: 1.15rem; }
+.profile-identity span { color: #6f828d; font-size: .72rem; }
+.avatar-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1rem 0; }
+.avatar-choice { display: grid; justify-items: center; gap: .3rem; min-height: 84px; padding: .55rem; border: 1px solid rgba(7,24,46,.14); border-radius: .65rem; color: #526b7b; background: #fff; cursor: pointer; }
+.avatar-choice.is-selected { border-color: #087b7c; box-shadow: inset 0 0 0 1px #087b7c; background: #eef9f8; }
+.avatar-choice span:last-child { font-size: .65rem; font-weight: 800; }
+.avatar-picker--compact { grid-template-columns: repeat(3, minmax(70px, 110px)); }
+.toggle-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; margin-bottom: 1rem; cursor: pointer; }
+.toggle-row strong, .toggle-row small { display: block; }
+.toggle-row strong { color: var(--brand-ink); font-size: .84rem; }
+.toggle-row small { color: #6d818d; font-size: .68rem; }
+.toggle-row input { position: absolute; opacity: 0; }
+.toggle-ui { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c8d6db; transition: .18s ease; }
+.toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(7,24,46,.2); transition: .18s ease; }
+.toggle-row input:checked + .toggle-ui { background: #087b7c; }
+.toggle-row input:checked + .toggle-ui::after { transform: translateX(20px); }
+.choice-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
+.choice-pills button { min-height: 38px; padding: .35rem .65rem; border: 1px solid rgba(7,24,46,.14); border-radius: 999px; color: #566f7e; background: #fff; cursor: pointer; }
+.choice-pills button.is-selected { color: #075f60; border-color: #6dbfb8; background: #def3ef; }
+.device-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .85rem 1rem; border-top: 1px solid rgba(7,24,46,.09); }
+.device-row:first-of-type { border-top: 0; }
+.device-row > .material-icons { color: #087b7c; }
+.device-row strong, .device-row small { display: block; }
+.device-row strong { color: var(--brand-ink); font-size: .78rem; }
+.device-row small { color: #71858f; font-size: .65rem; }
+
+.notification-list { display: grid; gap: .7rem; }
+.notification-card { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .9rem; border: 1px solid rgba(7,24,46,.1); border-radius: .85rem; background: #fff; }
+.notification-card > .material-icons { display: grid; width: 40px; height: 40px; place-items: center; border-radius: .65rem; color: #176b8a; background: #e3f1f5; }
+.notification-card--urgent { border-left: 4px solid var(--brand-coral); }
+.notification-card--urgent > .material-icons { color: #b62542; background: #ffe7ec; }
+.notification-card--important { border-left: 4px solid #d7ad32; }
+.notification-card--important > .material-icons { color: #805d00; background: #fff5cc; }
+.notification-card h3 { color: var(--brand-ink); font-size: .84rem; }
+.notification-card p { margin: .12rem 0 .3rem; color: #536d7d; font-size: .72rem; }
+.notification-card time { color: #86959d; font-size: .62rem; }
+
+.admin-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1.2rem; }
+.admin-kpi { display: grid; min-height: 122px; align-content: center; justify-items: center; gap: .15rem; padding: .8rem; border: 1px solid rgba(7,24,46,.11); border-top: 4px solid #087b7c; border-radius: .85rem; color: var(--brand-ink); background: #fff; cursor: pointer; }
+.admin-kpi .material-icons { color: #087b7c; }
+.admin-kpi strong { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
+.admin-kpi small { color: #667d8a; text-align: center; }
+.admin-kpi--urgent { border-top-color: var(--brand-coral); }
+.admin-kpi--urgent .material-icons, .admin-kpi--urgent strong { color: #b62542; }
+.management-section { margin-bottom: 1rem; }
+.management-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; border-top: 1px solid rgba(7,24,46,.09); }
+.management-row:first-of-type { border-top: 0; }
+.management-row strong, .management-row span { display: block; }
+.management-row strong { color: var(--brand-ink); font-size: .8rem; }
+.management-row span { color: #617987; font-size: .68rem; }
+.fairness-table { display: grid; }
+.fairness-table > div { display: grid; grid-template-columns: 1fr 70px 110px; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid rgba(7,24,46,.08); color: #526d7d; font-size: .72rem; }
+.fairness-table .fairness-head { color: #71848e; background: #f6fafb; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
+.fairness-table strong { color: var(--brand-ink); }
+
+.org-grid { display: grid; gap: .75rem; }
+.org-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; }
+.org-card > .material-icons:first-child { display: grid; width: 44px; height: 44px; place-items: center; border-radius: .7rem; color: #075f60; background: #e3f4f2; }
+.org-card strong, .org-card small { display: block; }
+.org-card strong { font-size: .86rem; }
+.org-card small { color: #687f8c; font-size: .68rem; }
+.org-card > .material-icons:last-child { color: #80919a; }
+
+.filter-bar { display: grid; gap: .7rem; margin-bottom: 1rem; padding: .8rem; }
+.audit-list { overflow: hidden; }
+.audit-row { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .95rem 1rem; border-top: 1px solid rgba(7,24,46,.09); }
+.audit-row:first-child { border-top: 0; }
+.audit-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: .65rem; color: #075f60; background: #e2f3f1; }
+.audit-icon--danger { color: #ad2946; background: #fde8ed; }
+.audit-row strong { color: var(--brand-ink); font-size: .8rem; }
+.audit-row p { margin: .15rem 0 .3rem; color: #4b6777; font-size: .72rem; }
+.audit-row div > span { color: #84949c; font-size: .62rem; }
+
+.screen--auth { min-height: calc(100vh - 9rem); display: grid; place-items: center; }
+.auth-panel { width: min(100%, 430px); margin: 0 auto; }
+.auth-panel--wide { width: min(100%, 700px); }
+.auth-brand { margin-bottom: 1rem; text-align: center; }
+.auth-brand h1 { margin: 0 0 .6rem; color: var(--brand-ink); font-family: var(--font-display); font-size: clamp(2.5rem, 10vw, 4rem); line-height: .88; text-transform: uppercase; }
+.auth-brand p { color: #526e7e; }
+.auth-card { width: 100%; }
+.auth-footnote { margin-top: .8rem; color: #71848f; font-size: .68rem; text-align: center; }
+.code-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin-bottom: 1rem; }
+.code-inputs input { width: 100%; min-width: 0; height: 52px; border: 1px solid rgba(7,24,46,.16); border-radius: .55rem; color: var(--brand-ink); background: #f8fcfd; text-align: center; font-size: 1.2rem; font-weight: 800; }
+.auth-card .btn + .btn { margin-top: .55rem; }
+.team-choice-grid { display: grid; gap: .7rem; }
+.team-choice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid rgba(7,24,46,.12); border-radius: .9rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; }
+.team-choice.is-selected { border-color: #6cbfb8; box-shadow: inset 4px 0 0 #087b7c; }
+.team-choice__icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: .7rem; color: #075f60; background: #e0f3f1; }
+.team-choice strong, .team-choice small { display: block; }
+.team-choice small { color: #6b808b; font-size: .68rem; }
+
+.bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 35; display: grid; grid-template-columns: repeat(6, 1fr); min-height: 66px; padding: 4px max(2px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(2px, env(safe-area-inset-left)); border-top: 1px solid rgba(255,255,255,.12); background: rgba(6,17,38,.97); box-shadow: 0 -5px 20px rgba(6,17,38,.18); backdrop-filter: blur(14px); }
+.bottom-nav__item { position: relative; display: grid; min-width: 0; min-height: 56px; place-items: center; align-content: center; gap: 1px; padding: 4px 1px; border: 0; border-radius: .55rem; color: rgba(255,255,255,.58); background: transparent; cursor: pointer; font-size: .56rem; font-weight: 750; }
+.bottom-nav__item .material-icons { font-size: 1.25rem; }
+.bottom-nav__item.is-active { color: var(--brand-aqua); background: rgba(82,224,207,.1); }
+.bottom-nav__item i { position: absolute; top: 2px; right: calc(50% - 18px); display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .55rem; font-style: normal; font-weight: 900; }
+
+@media (min-width: 680px) {
+  main.app-main { padding: 1.7rem 1.4rem 7rem; }
+  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
+  .availability-card { grid-template-columns: auto 1fr auto; align-items: center; }
+  .availability-actions { grid-column: auto; display: flex; }
+  .answer-btn { min-width: 68px; }
+  .profile-grid { grid-template-columns: 1fr 1fr; }
+  .profile-card--wide { grid-column: 1 / -1; }
+  .admin-kpi-grid { grid-template-columns: repeat(4, 1fr); }
+  .org-grid { grid-template-columns: repeat(2, 1fr); }
+  .filter-bar { grid-template-columns: 1fr 220px; align-items: center; }
+}
+
+@media (min-width: 900px) {
+  .mock-sidebar { display: flex; }
+  .mobile-header, .bottom-nav { display: none; }
+  main.app-main { margin-left: 260px; min-height: 100vh; padding: 5.7rem 2rem 4rem; }
+  .desktop-topbar { position: fixed; top: 0; right: 0; left: 260px; z-index: 25; display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 0 2rem; border-bottom: 1px solid rgba(7,24,46,.08); background: rgba(244,250,252,.92); backdrop-filter: blur(12px); }
+  .route-chip { padding: .35rem .6rem; border: 1px solid rgba(7,24,46,.08); border-radius: .45rem; color: #657c88; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
+  .desktop-actions { display: flex; align-items: center; gap: .5rem; }
+  .screen { margin: 0; }
+  .member-hero { padding-top: .4rem; }
+  .shift-stack { grid-template-columns: repeat(2, 1fr); }
+  .channel-layout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
+  .channel-list { display: grid; overflow: visible; }
+  .channel-item { min-width: 0; }
+  .org-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 1200px) {
+  main.app-main { padding-right: 3rem; padding-left: 3rem; }
+  .dashboard-grid { grid-template-columns: repeat(4, 1fr); }
+  .dashboard-tile { grid-template-columns: auto 1fr; }
+  .dashboard-tile > .material-icons:last-child { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .screen { animation: none; }
+  * { scroll-behavior: auto !important; }
+}
diff --git a/notes/style(.css b/notes/style(.css
new file mode 100644
index 0000000..e1773ed
--- /dev/null
+++ b/notes/style(.css
@@ -0,0 +1,4313 @@
+/*
+ * Checkpoint Köln — Staff Backend
+ * style.css  ·  v1.0
+ *
+ * Einheitliches CSS für alle Staff-Templates (Admin, Beratung, Medizin, Empfang).
+ * Keine Inline-Styles in den Templates — alles hier.
+ *
+ * Struktur:
+ *   1. Design Tokens & Reset
+ *   2. Layout (Sidebar + Main)
+ *   3. Sidebar: Header, Account, Nav, Nav-Gruppen, Footer
+ *   4. Mobile-Toggle
+ *   5. Main-Content-Bereich
+ *   6. Komponenten: Karten, Tabellen, Buttons, Formulare, Badges, Toasts
+ *   7. Chat-Widget (KI-Assistent)
+ *   8. Team-Chat-Widget
+ *   9. Responsive
+ */
+
+/* ============================================================
+   1. DESIGN TOKENS & RESET
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;600;700;900&family=Noto+Sans:wght@400;500;600;700;800&display=swap');
+
+:root {
+  /* Palette */
+  --cp-bg:        #07182e;
+  --cp-surface:   #0d2235;
+  --cp-surface-2: #112840;
+  --cp-surface-3: #16304d;
+  --cp-border:    rgba(255, 255, 255, .09);
+  --cp-border-2:  rgba(255, 255, 255, .15);
+
+  /* Text */
+  --cp-ink:       #e8f2f8;
+  --cp-ink-2:     rgba(232, 242, 248, .72);
+  --cp-muted:     rgba(232, 242, 248, .42);
+
+  /* Markenfarben (aus User-Frontend übernommen) */
+  --cp-teal:      #52e0cf;
+  --cp-blue:      #2596be;
+  --cp-coral:     #f04a67;
+  --cp-yellow:    #FBEF1F;
+  --cp-aqua-dim:  rgba(82, 224, 207, .18);
+
+  /* Sidebar */
+  --sidebar-width: 248px;
+  --sidebar-bg:
+    radial-gradient(circle at 8% 7%, rgba(82, 224, 207, .32), transparent 25rem),
+    radial-gradient(circle at 72% 74%, rgba(82, 224, 207, .22), transparent 25rem),
+    linear-gradient(140deg, #005f61 0%, #006468 62%, #014547 100%);
+
+  /* Typografie */
+  --font-body:    'Noto Sans', system-ui, sans-serif;
+  --font-display: 'Big Shoulders Display', system-ui, sans-serif;
+
+  /* Radii */
+  --r-sm:  .45rem;
+  --r-md:  .75rem;
+  --r-lg:  1rem;
+
+  /* Schatten */
+  --shadow-sm:  0 2px  8px rgba(0, 0, 0, .28);
+  --shadow-md:  0 6px 20px rgba(0, 0, 0, .38);
+  --shadow-lg:  0 14px 40px rgba(0, 0, 0, .48);
+
+  /* Transitions */
+  --ease: .18s cubic-bezier(.22, 1, .36, 1);
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  font-size: 15px;
+  scroll-behavior: smooth;
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  font-family: var(--font-body);
+  color: var(--cp-ink);
+  background: var(--cp-bg);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a { color: inherit; text-decoration: none; }
+img { max-width: 100%; display: block; }
+button, input, select, textarea { font: inherit; border-radius: var(--r-sm); }
+:focus-visible { outline: 2px solid var(--cp-teal); outline-offset: 3px; }
+[hidden] { display: none !important; }
+
+/* ============================================================
+   2. LAYOUT — SIDEBAR + MAIN
+   ============================================================ */
+
+.sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 200;
+  width: var(--sidebar-width);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--cp-border);
+  box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
+  /* Transition fuer Mobile-Drawer */
+  transition: transform var(--ease);
+}
+
+/* Enthält Logo, Account und den tatsaechlich scrollbaren Nav-Bereich.
+   min-height: 0 ist bei verschachtelten Flexboxen entscheidend: Ohne diese
+   Regel waechst die Navigation ueber die verfuegbare Sidebar-Hoehe hinaus. */
+.sidebar-main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+main {
+  /* Helle Arbeitsfläche: Die Sidebar bleibt dunkel, Inhalte werden ruhiger. */
+  --cp-bg:        #f3fafb;
+  --cp-surface:   #ffffff;
+  --cp-surface-2: #e8f4f6;
+  --cp-surface-3: #dceff2;
+  --cp-border:    rgba(7, 24, 46, .13);
+  --cp-border-2:  rgba(7, 24, 46, .22);
+  /* Kontraststarke Arbeitsfarben: mindestens gut lesbar auf hellem Grund. */
+  --cp-ink:       #07182e;
+  --cp-ink-2:     #30495c;
+  --cp-muted:     #526b7b;
+  --cp-teal:      #087b7c;
+  --cp-blue:      #176b8a;
+  --cp-coral:     #c93552;
+  --cp-aqua-dim:  rgba(8, 123, 124, .12);
+
+  margin-left: var(--sidebar-width);
+  flex: 1;
+  min-height: 100vh;
+  padding: 2rem 2.2rem 3.5rem;
+  color: var(--cp-ink);
+  background: var(--cp-bg);
+}
+
+/* ============================================================
+   3. SIDEBAR — INHALTE
+   ============================================================ */
+
+/* --- Sidebar-Top: Logo --- */
+.sidebar-top {
+  padding: 1.5rem 1.4rem 1.1rem;
+  border-bottom: 1px solid var(--cp-border);
+  flex-shrink: 0;
+}
+
+.sidebar-top img {
+  width: 148px;
+  height: auto;
+}
+
+/* --- Account-Info --- */
+.account-info {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  min-height: 66px;
+  padding: .8rem 1.25rem;
+  border-bottom: 1px solid var(--cp-border);
+  color: var(--cp-ink);
+  flex-shrink: 0;
+}
+
+/* Rollen-Icon als ruhiger, klarer Avatar */
+.account-avatar {
+  display: grid;
+  width: 35px;
+  height: 35px;
+  flex: 0 0 35px;
+  place-items: center;
+  border: 1px solid rgba(251, 239, 31, .24);
+  border-radius: 50%;
+  color: var(--cp-yellow);
+  background: rgba(251, 239, 31, .08);
+}
+
+.account-avatar .material-icons {
+  color: currentColor !important;
+  font-size: 1.15rem;
+}
+
+.account-details {
+  display: grid;
+  min-width: 0;
+  gap: .06rem;
+}
+
+.account-name {
+  overflow: hidden;
+  color: var(--cp-ink);
+  font-size: .84rem;
+  font-weight: 700;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account-role {
+  color: var(--cp-teal);
+  font-size: .68rem;
+  font-weight: 700;
+  letter-spacing: .07em;
+  line-height: 1.25;
+  text-transform: uppercase;
+}
+
+/* --- Navigation: Scroll-Container --- */
+.sidebar-nav {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: .65rem 0 1rem;
+  overscroll-behavior: contain;
+  /* Dezente Custom-Scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, .12) transparent;
+}
+
+.sidebar-nav::-webkit-scrollbar { width: 4px; }
+.sidebar-nav::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, .12);
+  border-radius: 999px;
+}
+.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
+
+.sidebar-nav ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 0 .65rem;
+}
+
+/* --- Einzelner Nav-Link --- */
+.sidebar-nav li a,
+.sidebar-nav li > button.nav-link {
+  display: flex;
+  align-items: center;
+  gap: .65rem;
+  padding: .62rem .82rem;
+  border-radius: var(--r-sm);
+  border: none;
+  background: transparent;
+  color: var(--cp-ink-2);
+  font-size: .875rem;
+  font-weight: 500;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--ease), color var(--ease);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-nav li a .material-icons,
+.sidebar-nav li > button.nav-link .material-icons {
+  font-size: 1.1rem;
+  flex-shrink: 0;
+  color: var(--cp-muted);
+  transition: color var(--ease);
+}
+
+.sidebar-nav li a:hover,
+.sidebar-nav li > button.nav-link:hover {
+  background: var(--cp-surface-2);
+  color: var(--cp-ink);
+}
+
+.sidebar-nav li a:hover .material-icons,
+.sidebar-nav li > button.nav-link:hover .material-icons {
+  color: var(--cp-teal);
+}
+
+/* Aktiver Link */
+.sidebar-nav li a.active,
+.sidebar-nav li a[aria-current="page"] {
+  background: var(--cp-aqua-dim);
+  color: var(--cp-ink);
+  font-weight: 700;
+}
+
+.sidebar-nav li a.active .material-icons,
+.sidebar-nav li a[aria-current="page"] .material-icons {
+  color: var(--cp-yellow);
+}
+
+/* --- Nav-Trennlinie / Abschnittsüberschrift --- */
+.nav-section-label {
+  padding: 1.1rem .82rem .3rem;
+  color: var(--cp-muted);
+  font-size: .67rem;
+  font-weight: 700;
+  letter-spacing: .09em;
+  text-transform: uppercase;
+}
+
+/* --- Nav-Gruppe (aufklappbar) --- */
+.nav-group > .nav-group-toggle {
+  display: flex;
+  align-items: center;
+  gap: .65rem;
+  padding: .62rem .82rem;
+  border-radius: var(--r-sm);
+  background: transparent;
+  border: none;
+  color: var(--cp-ink-2);
+  font-size: .875rem;
+  font-weight: 500;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--ease), color var(--ease);
+}
+
+.nav-group > .nav-group-toggle .material-icons:first-child {
+  font-size: 1.1rem;
+  color: var(--cp-muted);
+  transition: color var(--ease);
+}
+
+.nav-group > .nav-group-toggle:hover {
+  background: var(--cp-surface-2);
+  color: var(--cp-ink);
+}
+
+.nav-group > .nav-group-toggle:hover .material-icons:first-child {
+  color: var(--cp-teal);
+}
+
+/* Pfeil-Icon rechts */
+.nav-group-arrow {
+  margin-left: auto;
+  font-size: .95rem !important;
+  transition: transform var(--ease), color var(--ease) !important;
+}
+
+.nav-group.open > .nav-group-toggle .nav-group-arrow {
+  transform: rotate(90deg);
+  color: var(--cp-teal) !important;
+}
+
+/* Untermenü */
+/* Diese Regeln brauchen die gleiche Spezifitaet wie .sidebar-nav ul.
+   Sonst ueberschreibt das allgemeine Flex-Layout das display:none des Untermenues. */
+.sidebar-nav .nav-group-children {
+  display: none;
+  list-style: none;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  margin: 2px 0 3px;
+  padding: 2px 0 2px .55rem;
+  border-left: 1px solid rgba(82, 224, 207, .22);
+}
+
+.sidebar-nav .nav-group.open > .nav-group-children {
+  display: flex;
+}
+
+.nav-group-children li {
+  min-width: 0;
+}
+
+.nav-group-children li a {
+  min-width: 0;
+  font-size: .84rem;
+  padding-left: .85rem;
+  color: var(--cp-muted);
+}
+
+.nav-group-children li a:hover {
+  color: var(--cp-ink);
+}
+
+/* --- Sidebar-Bottom: Abmelden --- */
+.sidebar-bottom {
+  flex-shrink: 0;
+  padding: .85rem .65rem;
+  border-top: 1px solid var(--cp-border);
+}
+
+.logout-link {
+  display: flex;
+  align-items: center;
+  gap: .65rem;
+  padding: .62rem .82rem;
+  border-radius: var(--r-sm);
+  color: var(--cp-ink);
+  font-size: .875rem;
+  font-weight: 600;
+  transition: background var(--ease), color var(--ease);
+}
+
+.logout-link:hover {
+  background: rgba(240, 74, 103, .12);
+  color: var(--cp-coral);
+}
+
+.logout-link .material-icons {
+  font-size: 1.1rem;
+  color: var(--cp-yellow) !important;
+}
+
+/* ============================================================
+   4. MOBILE TOGGLE
+   ============================================================ */
+
+.menu-toggle {
+  display: none;
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  z-index: 300;
+  width: 42px;
+  height: 42px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--cp-border-2);
+  border-radius: var(--r-sm);
+  background: var(--sidebar-bg);
+  color: var(--cp-ink);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: background var(--ease);
+}
+
+.menu-toggle:hover { background: var(--cp-surface-2); }
+
+/* Overlay hinter Mobile-Sidebar */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 190;
+  background: rgba(0, 0, 0, .55);
+  backdrop-filter: blur(3px);
+}
+
+/* ============================================================
+   5. MAIN — CONTENT-BEREICH
+   ============================================================ */
+
+/* Seitenüberschriften */
+.page-header {
+  margin-bottom: 1.8rem;
+}
+
+.page-header h1,
+.page-title {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
+  line-height: .9;
+  letter-spacing: -.01em;
+  text-transform: uppercase;
+  color: var(--cp-ink);
+  margin-bottom: .4rem;
+}
+
+.page-header .page-subtitle,
+.page-subtitle {
+  color: var(--cp-ink-2);
+  font-size: .9rem;
+}
+
+/* Kicker-Label (kleines Eyebrow-Element) */
+.kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: .45rem;
+  margin-bottom: .75rem;
+  color: var(--cp-teal);
+  font-size: .7rem;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.kicker::before {
+  content: '';
+  width: 22px;
+  height: 1px;
+  background: currentColor;
+}
+
+/* ============================================================
+   5a. ADMIN-DASHBOARD — BUCHUNGSÜBERSICHT
+   ============================================================ */
+
+/* Buchungsübersicht: volle Arbeitsbreite und bündig zur linken Content-Kante,
+   entsprechend der Slotverwaltung. */
+.admin-dashboard {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+}
+
+.admin-dashboard__header {
+  display: block;
+  margin-bottom: 1.35rem;
+}
+
+.admin-dashboard__header .kicker { margin-bottom: .55rem; }
+.admin-dashboard__title-row { display: block; }
+.admin-dashboard .page-subtitle { margin: .45rem 0 0; }
+
+.admin-filter { margin-bottom: 1.25rem; }
+
+.admin-filter__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.35rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+}
+
+.admin-filter__header h2 {
+  color: var(--cp-ink);
+  font-size: .95rem;
+  font-weight: 700;
+}
+
+.admin-filter__header p {
+  margin-top: .18rem;
+  color: var(--cp-muted);
+  font-size: .78rem;
+}
+
+.admin-filter__icon {
+  color: var(--cp-teal);
+  font-size: 1.25rem;
+}
+
+.admin-filter__body {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem 1.25rem;
+  padding: 1.2rem 1.35rem;
+}
+
+.admin-filter__field { width: min(100%, 220px); margin: 0; }
+.admin-filter__field .form-control { min-height: 42px; }
+
+.admin-filter__actions {
+  display: grid;
+  grid-template-rows: auto 42px;
+  align-content: start;
+  gap: .45rem;
+  /* Entspricht dem unteren Standardabstand von .form-group.
+     So wird die komplette Aktionsspalte nicht durch align-items:flex-end
+     nach unten verschoben. */
+  margin: 0 0 1.1rem;
+}
+
+/* Die Aktionen folgen derselben Label-/Feld-Rhythmik wie die beiden Filter.
+   Dadurch beginnen die Buttons exakt auf Höhe der Eingabefelder. */
+.admin-filter__action-label {
+  display: block;
+  min-height: 18px;
+  color: var(--cp-ink-2);
+  font-size: .875rem;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.admin-filter__action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: .55rem;
+}
+
+.admin-filter__actions .btn-primary {
+  /* Dunkles Blau auf diesem Türkiston verfehlt den erforderlichen Kontrast. */
+  color: #ffffff;
+  background: #087b7c;
+  border-color: #087b7c;
+  box-shadow: 0 4px 12px rgba(8, 123, 124, .22);
+}
+
+.admin-filter__actions .btn-primary:hover {
+  color: #ffffff;
+  background: #05696a;
+  border-color: #05696a;
+}
+
+.admin-filter__actions .btn-ghost {
+  color: var(--cp-ink);
+  background: var(--cp-surface);
+  border-color: var(--cp-border-2);
+}
+
+.admin-filter__actions .btn-ghost:hover {
+  color: var(--cp-ink);
+  border-color: #087b7c;
+  background: var(--cp-surface-2);
+}
+
+.admin-icon-button { min-height: 42px; }
+.admin-icon-button .material-icons { font-size: 1.1rem; }
+
+.admin-appointments__toolbar {
+  display: flex;
+  align-items: center;
+  min-height: 42px;
+  margin: 0 0 .7rem;
+}
+
+.admin-appointments__table { position: relative; }
+
+.admin-table {
+  min-width: 980px;
+  font-size: .82rem;
+}
+
+.admin-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: .8rem .9rem;
+  background: var(--cp-surface-2);
+}
+
+.admin-table tbody td { padding: .72rem .9rem; }
+.admin-table__center { text-align: center; }
+.admin-table :is(input, select, button) { max-width: 100%; }
+
+/* Terminzeilen: ruhig, hell akzentuiert und mit klaren Statusfarben */
+.appointment-row td {
+  color: var(--cp-ink-2);
+  white-space: nowrap;
+}
+
+.appointment-row:hover td { color: var(--cp-ink); }
+.appointment-code { color: var(--cp-teal) !important; font-weight: 800; letter-spacing: .04em; }
+.appointment-time { color: var(--cp-ink) !important; font-weight: 700; }
+.password-cell { display: flex; align-items: center; gap: .42rem; }
+.password-mask { color: var(--cp-muted); font-size: .74rem; letter-spacing: .13em; }
+.inline-action-form, .payment-form { display: inline-flex; margin: 0; }
+.status-cell { text-align: center; }
+.questionnaire-cell { min-width: 112px; }
+.status-actions { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
+
+.icon-action-btn {
+  display: inline-grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: .55rem;
+  color: var(--cp-ink-2);
+  background: transparent;
+  cursor: pointer;
+  text-decoration: none;
+  transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
+}
+
+.icon-action-btn:hover:not(:disabled) { transform: translateY(-1px); }
+.icon-action-btn:active:not(:disabled) { transform: translateY(0); }
+.icon-action-btn .material-icons { font-size: 1.08rem; }
+.icon-action-btn:disabled, .icon-action-btn.is-disabled { cursor: not-allowed; opacity: .38; }
+
+.icon-action-btn--copy,
+.icon-action-btn--view {
+  border-color: rgba(37, 150, 190, .24);
+  color: #72c7df;
+  background: rgba(37, 150, 190, .1);
+}
+.icon-action-btn--copy:hover:not(:disabled),
+.icon-action-btn--view:hover:not(:disabled) {
+  border-color: rgba(82, 224, 207, .46);
+  color: var(--cp-teal);
+  background: rgba(82, 224, 207, .15);
+}
+
+.icon-action-btn--ok {
+  border-color: rgba(82, 224, 207, .28);
+  color: var(--cp-teal);
+  background: rgba(82, 224, 207, .12);
+}
+.icon-action-btn--ok:hover:not(:disabled) { background: rgba(82, 224, 207, .22); }
+
+.icon-action-btn--complete,
+.icon-action-btn--tests {
+  border-color: rgba(37, 150, 190, .28);
+  color: #72c7df;
+  background: rgba(37, 150, 190, .12);
+}
+.icon-action-btn--complete:hover:not(:disabled),
+.icon-action-btn--tests:hover:not(:disabled) { background: rgba(37, 150, 190, .22); }
+
+.icon-action-btn--locked {
+  border-color: rgba(255, 255, 255, .13);
+  color: var(--cp-muted);
+  background: rgba(255, 255, 255, .055);
+}
+.icon-action-btn--locked:hover:not(:disabled) { color: var(--cp-ink-2); background: rgba(255,255,255,.1); }
+
+.icon-action-btn--delete {
+  border-color: rgba(240, 74, 103, .28);
+  color: #ff7890;
+  background: rgba(240, 74, 103, .1);
+}
+.icon-action-btn--delete:hover:not(:disabled) { color: #fff; background: var(--cp-coral); }
+
+.payment-form { width: 100%; }
+.payment-select {
+  width: 100%;
+  min-width: 128px;
+  min-height: 34px;
+  padding: .38rem 2rem .38rem .65rem;
+  border: 1px solid rgba(82, 224, 207, .25);
+  border-radius: .5rem;
+  color: var(--cp-ink);
+  background-color: var(--cp-surface-2);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2352e0cf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right .65rem center;
+  appearance: none;
+  cursor: pointer;
+  font-size: .78rem;
+  font-weight: 600;
+}
+.payment-select:hover { border-color: var(--cp-teal); background-color: var(--cp-surface-3); }
+.payment-select:focus { outline: 2px solid rgba(82,224,207,.24); outline-offset: 2px; border-color: var(--cp-teal); }
+.payment-select option { color: #07182e; background: #fff; }
+
+.amount-cell { text-align: right; }
+.amount-main { display: block; color: var(--cp-ink); font-weight: 700; }
+.amount-free { display: block; margin-top: .15rem; color: var(--cp-coral); font-size: .72rem; }
+
+.copy-btn .copied-icon { color: var(--cp-teal); }
+
+.admin-table tbody.is-loading {
+  opacity: .42;
+  pointer-events: none;
+  transition: opacity var(--ease);
+}
+
+.admin-table-empty td {
+  padding: 2.8rem 1rem !important;
+  color: var(--cp-muted);
+  text-align: center;
+}
+
+.admin-table-loader {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: grid;
+  place-content: center;
+  gap: .45rem;
+  min-height: 180px;
+  color: var(--cp-teal);
+  text-align: center;
+  font-size: .84rem;
+  font-weight: 700;
+  background: rgba(7, 24, 46, .5);
+  backdrop-filter: blur(2px);
+}
+
+.admin-table-loader[hidden] { display: none; }
+
+.admin-table-loader .material-icons {
+  margin: 0 auto;
+  font-size: 1.6rem;
+  animation: admin-spin 1s linear infinite;
+}
+
+@keyframes admin-spin { to { transform: rotate(360deg); } }
+
+/* ============================================================
+   5b. FRAGEBOGENANSICHT
+   ============================================================ */
+
+.questionnaire-view {
+  width: min(100%, 980px);
+  margin: 0 auto;
+}
+
+.questionnaire-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.questionnaire-header .headline {
+  font-family: var(--font-display);
+  color: var(--cp-ink);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
+  line-height: .9;
+  letter-spacing: -.01em;
+  text-transform: uppercase;
+}
+
+.questionnaire-back {
+  flex: 0 0 auto;
+}
+
+.questionnaire-card {
+  max-width: 900px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.questionnaire-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.questionnaire-field {
+  display: grid;
+  grid-template-columns: minmax(220px, 42%) 1fr;
+  gap: 1rem;
+  padding: .9rem 0;
+  border-bottom: 1px solid var(--cp-border);
+  color: var(--cp-ink-2);
+  line-height: 1.55;
+}
+
+.questionnaire-field:first-child { padding-top: 0; }
+.questionnaire-field:last-child { padding-bottom: 0; border-bottom: 0; }
+
+.questionnaire-label {
+  color: var(--cp-ink);
+  font-weight: 700;
+}
+
+.questionnaire-label--nested { padding-left: 1.5rem; }
+
+.questionnaire-section-label {
+  display: block;
+  grid-column: 1 / -1;
+  padding: 1.1rem 0 .45rem;
+  color: var(--cp-teal);
+  font-size: .75rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 600px) {
+  .questionnaire-header { align-items: flex-start; }
+  .questionnaire-card { padding: 1.15rem; }
+  .questionnaire-field { grid-template-columns: 1fr; gap: .2rem; padding: .8rem 0; }
+  .questionnaire-label--nested { padding-left: 0; }
+}
+
+/* ============================================================
+   6. KOMPONENTEN
+   ============================================================ */
+
+/* --- Karten --- */
+.card {
+  background: var(--cp-surface);
+  border: 1px solid var(--cp-border);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.15rem 1.4rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+}
+
+.card-header h2,
+.card-header h3 {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  font-weight: 800;
+  letter-spacing: .01em;
+  text-transform: none;
+  color: var(--cp-ink);
+  margin: 0;
+}
+
+.card-body {
+  padding: 1.4rem;
+}
+
+.card-footer {
+  padding: .85rem 1.4rem;
+  border-top: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: .7rem;
+}
+
+/* Karten-Raster */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.1rem;
+}
+
+/* Stat-Karte (Kennzahlen) */
+.stat-card {
+  background: var(--cp-surface);
+  border: 1px solid var(--cp-border);
+  border-radius: var(--r-lg);
+  padding: 1.2rem 1.35rem;
+  display: flex;
+  flex-direction: column;
+  gap: .3rem;
+}
+
+.stat-card__label {
+  color: var(--cp-muted);
+  font-size: .72rem;
+  font-weight: 700;
+  letter-spacing: .07em;
+  text-transform: uppercase;
+}
+
+.stat-card__value {
+  font-family: var(--font-display);
+  font-size: 2.4rem;
+  font-weight: 700;
+  color: var(--cp-ink);
+  line-height: 1;
+}
+
+.stat-card__value--teal   { color: var(--cp-teal); }
+.stat-card__value--coral  { color: var(--cp-coral); }
+.stat-card__value--yellow { color: var(--cp-yellow); }
+
+.stat-card__note {
+  color: var(--cp-muted);
+  font-size: .8rem;
+  margin-top: .1rem;
+}
+
+/* --- Tabellen --- */
+.table-wrap {
+  overflow-x: auto;
+  border-radius: var(--r-md);
+  border: 1px solid var(--cp-border);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: .875rem;
+}
+
+thead {
+  background: var(--cp-surface-2);
+}
+
+thead th {
+  padding: .75rem 1rem;
+  text-align: left;
+  color: var(--cp-muted);
+  font-size: .7rem;
+  font-weight: 700;
+  letter-spacing: .07em;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--cp-border);
+  white-space: nowrap;
+}
+
+tbody tr {
+  border-bottom: 1px solid var(--cp-border);
+  transition: background var(--ease);
+}
+
+tbody tr:last-child { border-bottom: none; }
+
+tbody tr:hover { background: var(--cp-surface-2); }
+
+tbody td {
+  padding: .8rem 1rem;
+  color: var(--cp-ink-2);
+  vertical-align: middle;
+}
+
+tbody td strong { color: var(--cp-ink); }
+
+/* --- Formulare --- */
+.form-group {
+  display: grid;
+  gap: .45rem;
+  margin-bottom: 1.1rem;
+}
+
+.form-group label {
+  color: var(--cp-ink-2);
+  font-size: .875rem;
+  font-weight: 600;
+}
+
+.form-control {
+  width: 100%;
+  min-height: 44px;
+  padding: .65rem .85rem;
+  border: 1px solid var(--cp-border-2);
+  border-radius: var(--r-sm);
+  background: var(--cp-surface-2);
+  color: var(--cp-ink);
+  font: inherit;
+  font-size: .9rem;
+  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--cp-teal);
+  background: var(--cp-surface-3);
+  box-shadow: 0 0 0 3px rgba(82, 224, 207, .14);
+}
+
+.form-control::placeholder { color: var(--cp-muted); }
+
+textarea.form-control {
+  min-height: 110px;
+  resize: vertical;
+}
+
+select.form-control {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2352e0cf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right .85rem center;
+  padding-right: 2.4rem;
+}
+
+.form-hint {
+  color: var(--cp-muted);
+  font-size: .78rem;
+}
+
+.form-error {
+  color: var(--cp-coral);
+  font-size: .78rem;
+}
+
+/* Inline-Label-Reihe */
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+/* Checkbox / Radio */
+.form-check {
+  display: flex;
+  align-items: flex-start;
+  gap: .55rem;
+  cursor: pointer;
+}
+
+.form-check input[type="checkbox"],
+.form-check input[type="radio"] {
+  width: 1rem;
+  height: 1rem;
+  margin-top: .18rem;
+  flex-shrink: 0;
+  accent-color: var(--cp-teal);
+}
+
+/* --- Buttons --- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .5rem;
+  min-height: 40px;
+  padding: .55rem 1.1rem;
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  font: inherit;
+  font-size: .875rem;
+  font-weight: 700;
+  line-height: 1.2;
+  text-decoration: none;
+  transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease), color var(--ease);
+  white-space: nowrap;
+}
+
+.btn:hover { transform: translateY(-1px); }
+.btn:active { transform: translateY(0); }
+.btn:disabled, .btn[aria-disabled="true"] {
+  opacity: .45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn .material-icons { font-size: 1.05rem; }
+
+/* Varianten */
+.btn-primary {
+  background: var(--cp-teal);
+  color: #07182e;
+  box-shadow: 0 5px 16px rgba(82, 224, 207, .22);
+}
+.btn-primary:hover {
+  background: #6af0de;
+  box-shadow: 0 8px 22px rgba(82, 224, 207, .32);
+}
+
+.btn-coral {
+  background: var(--cp-coral);
+  color: #fff;
+  box-shadow: 0 5px 16px rgba(240, 74, 103, .22);
+}
+.btn-coral:hover {
+  background: #d93d58;
+  box-shadow: 0 8px 22px rgba(240, 74, 103, .32);
+}
+
+.btn-ghost {
+  border-color: var(--cp-border-2);
+  color: var(--cp-ink-2);
+  background: transparent;
+}
+.btn-ghost:hover {
+  background: var(--cp-surface-2);
+  border-color: rgba(255, 255, 255, .22);
+  color: var(--cp-ink);
+}
+
+.btn-danger {
+  border-color: rgba(240, 74, 103, .4);
+  color: var(--cp-coral);
+  background: rgba(240, 74, 103, .1);
+}
+.btn-danger:hover {
+  background: var(--cp-coral);
+  color: #fff;
+  border-color: var(--cp-coral);
+}
+
+.btn-sm {
+  min-height: 32px;
+  padding: .38rem .7rem;
+  font-size: .8rem;
+}
+
+.btn-lg {
+  min-height: 50px;
+  padding: .8rem 1.45rem;
+  font-size: .95rem;
+}
+
+.btn-full { width: 100%; }
+
+/* Button-Reihe */
+.btn-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .65rem;
+  align-items: center;
+}
+
+/* --- Badges & Status --- */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: .22rem .58rem;
+  border-radius: 999px;
+  font-size: .72rem;
+  font-weight: 700;
+  letter-spacing: .03em;
+  white-space: nowrap;
+}
+
+.badge-teal    { background: rgba(82, 224, 207, .14); color: var(--cp-teal); }
+.badge-coral   { background: rgba(240, 74, 103, .14); color: var(--cp-coral); }
+.badge-yellow  { background: rgba(251, 239, 31, .14); color: var(--cp-yellow); }
+.badge-muted   { background: var(--cp-surface-2); color: var(--cp-muted); }
+.badge-blue    { background: rgba(37, 150, 190, .18); color: var(--cp-blue); }
+
+/* Notification-Badge (runde Zahl) */
+.n-badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 .3rem;
+  border-radius: 999px;
+  background: var(--cp-coral);
+  color: #fff;
+  font-size: .68rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+/* Pulse-Animation für neue Nachrichten */
+@keyframes pulse-badge {
+  0%   { box-shadow: 0 0 0 0 rgba(240, 74, 103, .55); }
+  70%  { box-shadow: 0 0 0 6px rgba(240, 74, 103, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(240, 74, 103, 0); }
+}
+
+.n-badge.pulse { animation: pulse-badge .9s ease-out; }
+
+/* Badge im Nav (messages) */
+#nachrichtenBadge {
+  display: none;
+  min-width: 1.18rem;
+  height: 1.18rem;
+  padding: 0 .28rem;
+  border-radius: 999px;
+  background: var(--cp-coral);
+  color: #fff;
+  font-size: .65rem;
+  font-weight: 800;
+  line-height: 1.18rem;
+  text-align: center;
+  margin-left: auto;
+}
+
+/* --- Alerts / Notices --- */
+.alert {
+  display: flex;
+  gap: .75rem;
+  align-items: flex-start;
+  padding: 1rem 1.15rem;
+  border-radius: var(--r-md);
+  border: 1px solid transparent;
+  font-size: .9rem;
+  line-height: 1.5;
+}
+
+.alert .material-icons { font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }
+
+.alert-info    { background: rgba(37, 150, 190, .1); border-color: rgba(37, 150, 190, .3); color: #a3d8f0; }
+.alert-success { background: rgba(82, 224, 207, .1); border-color: rgba(82, 224, 207, .28); color: var(--cp-teal); }
+.alert-warning { background: rgba(251, 239, 31, .1); border-color: rgba(251, 239, 31, .3); color: var(--cp-yellow); }
+.alert-danger  { background: rgba(240, 74, 103, .1); border-color: rgba(240, 74, 103, .3); color: var(--cp-coral); }
+
+/* --- Flash-Meldungen (Jinja flash()) --- */
+.flash-list {
+  display: grid;
+  gap: .55rem;
+  margin-bottom: 1.4rem;
+}
+
+/* --- Toast --- */
+.save-toast {
+  position: fixed;
+  bottom: 1.6rem;
+  left: 50%;
+  transform: translateX(-50%) translateY(12px);
+  z-index: 9000;
+  padding: .7rem 1.25rem;
+  border-radius: var(--r-md);
+  background: var(--cp-surface-3);
+  border: 1px solid var(--cp-border-2);
+  color: var(--cp-ink);
+  font-size: .875rem;
+  font-weight: 600;
+  box-shadow: var(--shadow-md);
+  opacity: 0;
+  transition: opacity .25s ease, transform .25s ease;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.save-toast.toast-visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* --- Copy-Button --- */
+.copy-icon { font-size: 1rem; transition: color var(--ease); }
+.copy-icon.copied-icon { color: var(--cp-teal); }
+
+/* --- Divider --- */
+.divider {
+  height: 1px;
+  background: var(--cp-border);
+  margin: 1.5rem 0;
+}
+
+/* --- Leerer Zustand --- */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: .75rem;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: var(--cp-muted);
+}
+
+.empty-state .material-icons { font-size: 2.4rem; }
+
+.empty-state h3 {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--cp-ink-2);
+}
+
+/* --- Paginierung --- */
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: .4rem;
+  flex-wrap: wrap;
+}
+
+.pagination a,
+.pagination span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 .55rem;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--cp-border);
+  background: var(--cp-surface);
+  color: var(--cp-ink-2);
+  font-size: .82rem;
+  font-weight: 600;
+  transition: background var(--ease), color var(--ease), border-color var(--ease);
+}
+
+.pagination a:hover { background: var(--cp-surface-2); color: var(--cp-ink); }
+.pagination .active { background: var(--cp-aqua-dim); color: var(--cp-teal); border-color: rgba(82, 224, 207, .3); }
+
+/* --- Modal / Dialog --- */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  background: rgba(0, 0, 0, .65);
+  backdrop-filter: blur(5px);
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity .2s ease, visibility .2s ease;
+}
+
+.modal-backdrop.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal-dialog {
+  width: min(560px, 100%);
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--cp-surface);
+  border: 1px solid var(--cp-border-2);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  transform: translateY(14px) scale(.97);
+  transition: transform .2s ease;
+}
+
+.modal-backdrop.is-open .modal-dialog {
+  transform: translateY(0) scale(1);
+}
+
+.modal-header {
+  padding: 1.2rem 1.4rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-shrink: 0;
+}
+
+.modal-header h2 {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--cp-ink);
+  margin: 0;
+}
+
+.modal-body {
+  padding: 1.4rem;
+  overflow-y: auto;
+  flex: 1;
+  color: var(--cp-ink-2);
+}
+
+.modal-footer {
+  padding: .85rem 1.4rem;
+  border-top: 1px solid var(--cp-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: .65rem;
+  flex-shrink: 0;
+  background: var(--cp-surface-2);
+}
+
+/* ============================================================
+   7. KI-ASSISTENT CHAT WIDGET
+   ============================================================ */
+
+#chatFab {
+  position: fixed;
+  bottom: 1.6rem;
+  right: 1.6rem;
+  z-index: 400;
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(82, 224, 207, .35);
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0d2235, #112840);
+  color: var(--cp-teal);
+  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 0 0 rgba(82, 224, 207, .3);
+  cursor: pointer;
+  transition: transform var(--ease), box-shadow var(--ease);
+}
+
+#chatFab:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 4px rgba(82, 224, 207, .18);
+}
+
+#chatFab .material-icons { font-size: 1.4rem; }
+
+#chatPanel {
+  position: fixed;
+  bottom: 5.2rem;
+  right: 1.6rem;
+  z-index: 400;
+  width: 340px;
+  max-height: 520px;
+  display: flex;
+  flex-direction: column;
+  background: var(--cp-surface);
+  border: 1px solid var(--cp-border-2);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px) scale(.97);
+  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
+}
+
+#chatPanel.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0) scale(1);
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: .85rem 1rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+  flex-shrink: 0;
+}
+
+.chat-header-title {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  font-weight: 700;
+  font-size: .88rem;
+  color: var(--cp-teal);
+}
+
+.chat-header-title .material-icons { font-size: 1.15rem; }
+
+.chat-header-actions {
+  display: flex;
+  gap: .25rem;
+}
+
+.chat-header-actions button {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: var(--r-sm);
+  background: transparent;
+  color: var(--cp-muted);
+  cursor: pointer;
+  transition: background var(--ease), color var(--ease);
+}
+
+.chat-header-actions button:hover {
+  background: var(--cp-surface-3);
+  color: var(--cp-ink);
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: .85rem;
+  display: flex;
+  flex-direction: column;
+  gap: .55rem;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,.1) transparent;
+}
+
+.chat-welcome {
+  margin: auto;
+  text-align: center;
+  color: var(--cp-muted);
+  font-size: .82rem;
+  line-height: 1.6;
+}
+
+.chat-welcome .material-icons {
+  display: block;
+  font-size: 1.8rem;
+  color: var(--cp-teal);
+  margin: 0 auto .5rem;
+}
+
+.chat-msg {
+  max-width: 88%;
+  padding: .6rem .85rem;
+  border-radius: var(--r-md);
+  font-size: .85rem;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.chat-msg.user {
+  align-self: flex-end;
+  background: var(--cp-aqua-dim);
+  color: var(--cp-teal);
+  border: 1px solid rgba(82, 224, 207, .22);
+}
+
+.chat-msg.assistant {
+  align-self: flex-start;
+  background: var(--cp-surface-2);
+  color: var(--cp-ink-2);
+  border: 1px solid var(--cp-border);
+}
+
+.chat-msg.assistant p { margin: 0 0 .5rem; }
+.chat-msg.assistant p:last-child { margin: 0; }
+.chat-msg.assistant ul, .chat-msg.assistant ol { padding-left: 1.2rem; margin: .35rem 0; }
+.chat-msg.assistant code { background: var(--cp-surface-3); padding: .1em .3em; border-radius: 3px; font-size: .8em; }
+
+.chat-msg.error {
+  align-self: flex-start;
+  background: rgba(240, 74, 103, .1);
+  color: var(--cp-coral);
+  border: 1px solid rgba(240, 74, 103, .22);
+}
+
+/* Typing-Indikator */
+.chat-typing {
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: .6rem .85rem;
+  border-radius: var(--r-md);
+  background: var(--cp-surface-2);
+  border: 1px solid var(--cp-border);
+}
+
+.chat-typing span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--cp-muted);
+  animation: typing-dot 1.2s infinite;
+}
+
+.chat-typing span:nth-child(2) { animation-delay: .2s; }
+.chat-typing span:nth-child(3) { animation-delay: .4s; }
+
+@keyframes typing-dot {
+  0%, 80%, 100% { transform: scale(.7); opacity: .4; }
+  40%           { transform: scale(1);   opacity: 1; }
+}
+
+.chat-input-area {
+  display: flex;
+  align-items: flex-end;
+  gap: .5rem;
+  padding: .75rem;
+  border-top: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+  flex-shrink: 0;
+}
+
+#chatInput {
+  flex: 1;
+  min-height: 36px;
+  max-height: 100px;
+  padding: .5rem .75rem;
+  border: 1px solid var(--cp-border-2);
+  border-radius: var(--r-sm);
+  background: var(--cp-surface-3);
+  color: var(--cp-ink);
+  font-size: .85rem;
+  resize: none;
+  overflow-y: auto;
+  transition: border-color var(--ease);
+}
+
+#chatInput:focus {
+  outline: none;
+  border-color: var(--cp-teal);
+}
+
+#chatInput::placeholder { color: var(--cp-muted); }
+
+#chatSendBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: var(--r-sm);
+  background: var(--cp-teal);
+  color: #07182e;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--ease), transform var(--ease);
+}
+
+#chatSendBtn:hover { background: #6af0de; transform: translateY(-1px); }
+#chatSendBtn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
+#chatSendBtn .material-icons { font-size: 1.1rem; }
+
+/* ============================================================
+   8. TEAM-CHAT WIDGET
+   ============================================================ */
+
+#teamChatFab {
+  position: fixed;
+  bottom: 1.6rem;
+  right: 5.3rem;
+  z-index: 400;
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--cp-border-2);
+  border-radius: 50%;
+  background: var(--cp-surface-2);
+  color: var(--cp-ink-2);
+  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
+  cursor: pointer;
+  transition: transform var(--ease), background var(--ease), color var(--ease);
+  position: fixed;
+}
+
+#teamChatFab:hover {
+  transform: translateY(-2px);
+  background: var(--cp-surface-3);
+  color: var(--cp-ink);
+}
+
+#teamChatFab .material-icons { font-size: 1.3rem; }
+
+/* Badge auf Team-Chat-FAB */
+.team-chat-badge {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  min-width: 1.1rem;
+  height: 1.1rem;
+  padding: 0 .25rem;
+  border-radius: 999px;
+  background: var(--cp-coral);
+  color: #fff;
+  font-size: .62rem;
+  font-weight: 800;
+  line-height: 1.1rem;
+  text-align: center;
+}
+
+#teamChatPanel {
+  position: fixed;
+  bottom: 5.2rem;
+  right: 5.3rem;
+  z-index: 400;
+  width: 340px;
+  max-height: 520px;
+  display: flex;
+  flex-direction: column;
+  background: var(--cp-surface);
+  border: 1px solid var(--cp-border-2);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px) scale(.97);
+  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
+}
+
+#teamChatPanel.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0) scale(1);
+}
+
+.team-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: .85rem 1rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+  flex-shrink: 0;
+}
+
+.team-chat-header-title {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  font-weight: 700;
+  font-size: .88rem;
+  color: var(--cp-ink);
+}
+
+.team-chat-header-title .material-icons { font-size: 1.15rem; color: var(--cp-muted); }
+
+.team-chat-header-actions button {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: var(--r-sm);
+  background: transparent;
+  color: var(--cp-muted);
+  cursor: pointer;
+  transition: background var(--ease), color var(--ease);
+}
+
+.team-chat-header-actions button:hover {
+  background: var(--cp-surface-3);
+  color: var(--cp-ink);
+}
+
+/* Kanal-Auswahl */
+.team-chat-channels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .4rem .75rem;
+  padding: .65rem 1rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+  flex-shrink: 0;
+}
+
+.team-chat-channels label {
+  display: flex;
+  align-items: center;
+  gap: .3rem;
+  font-size: .76rem;
+  font-weight: 600;
+  color: var(--cp-muted);
+  cursor: pointer;
+  transition: color var(--ease);
+}
+
+.team-chat-channels label:hover { color: var(--cp-ink); }
+
+.team-chat-channels input[type="checkbox"] {
+  accent-color: var(--cp-teal);
+  width: .85rem;
+  height: .85rem;
+}
+
+/* Nachrichten */
+.team-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: .85rem;
+  display: flex;
+  flex-direction: column;
+  gap: .2rem;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,.1) transparent;
+  font-size: .82rem;
+}
+
+.team-chat-welcome {
+  margin: auto;
+  text-align: center;
+  color: var(--cp-muted);
+  line-height: 1.65;
+}
+
+.team-chat-welcome .material-icons {
+  display: block;
+  font-size: 1.6rem;
+  color: var(--cp-muted);
+  margin: 0 auto .5rem;
+}
+
+.team-chat-msg {
+  max-width: 86%;
+  padding: .48rem .75rem;
+  border-radius: var(--r-md);
+  line-height: 1.45;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.team-chat-msg.own {
+  align-self: flex-end;
+  background: var(--cp-aqua-dim);
+  color: var(--cp-teal);
+  border: 1px solid rgba(82, 224, 207, .18);
+}
+
+.team-chat-msg.other {
+  align-self: flex-start;
+  background: var(--cp-surface-2);
+  color: var(--cp-ink-2);
+  border: 1px solid var(--cp-border);
+}
+
+.team-chat-msg-meta {
+  font-size: .68rem;
+  color: var(--cp-muted);
+  margin-bottom: .18rem;
+}
+
+.team-chat-msg-meta.own { text-align: right; }
+
+.team-chat-msg-recipients {
+  font-size: .65rem;
+  color: var(--cp-muted);
+  margin-top: .12rem;
+  margin-bottom: .45rem;
+}
+
+/* Eingabe */
+.team-chat-input-area {
+  display: flex;
+  align-items: flex-end;
+  gap: .5rem;
+  padding: .75rem;
+  border-top: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+  flex-shrink: 0;
+}
+
+#teamChatInput {
+  flex: 1;
+  min-height: 36px;
+  max-height: 100px;
+  padding: .5rem .75rem;
+  border: 1px solid var(--cp-border-2);
+  border-radius: var(--r-sm);
+  background: var(--cp-surface-3);
+  color: var(--cp-ink);
+  font-size: .85rem;
+  resize: none;
+  overflow-y: auto;
+  transition: border-color var(--ease);
+}
+
+#teamChatInput:focus {
+  outline: none;
+  border-color: rgba(255,255,255,.28);
+}
+
+#teamChatInput::placeholder { color: var(--cp-muted); }
+
+#teamChatSendBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: var(--r-sm);
+  background: var(--cp-surface-3);
+  color: var(--cp-ink-2);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--ease), color var(--ease), transform var(--ease);
+}
+
+#teamChatSendBtn:hover {
+  background: var(--cp-surface-3);
+  color: var(--cp-ink);
+  transform: translateY(-1px);
+}
+
+#teamChatSendBtn .material-icons { font-size: 1.1rem; }
+
+/* ============================================================
+   9. RESPONSIVE
+   ============================================================ */
+
+@media (max-width: 900px) {
+
+  /* Sidebar als Drawer */
+  .sidebar {
+    transform: translateX(calc(-1 * var(--sidebar-width)));
+  }
+
+  .sidebar.active {
+    transform: translateX(0);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .sidebar-overlay.active { display: block; }
+
+  .menu-toggle { display: flex; }
+
+  main {
+    margin-left: 0;
+    padding: 4.5rem 1.15rem 3rem;
+  }
+
+  /* Widgets auf Mobile etwas einrücken */
+  #chatFab    { right: 1rem; bottom: 1rem; }
+  #teamChatFab { right: 4.5rem; bottom: 1rem; }
+  #chatPanel  { right: 1rem; width: min(320px, calc(100vw - 2rem)); }
+  #teamChatPanel { right: 1rem; width: min(320px, calc(100vw - 2rem)); bottom: 4.5rem; }
+
+  .card-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 600px) {
+  .admin-dashboard__header { display: block; }
+  .admin-filter__header,
+  .admin-filter__body { padding-left: 1rem; padding-right: 1rem; }
+  .admin-filter__field { width: 100%; }
+  .admin-filter__actions { width: 100%; }
+  .admin-filter__action-buttons { width: 100%; }
+  .admin-filter__actions .btn { flex: 1 1 auto; }
+  .admin-icon-button__label { display: none; }
+  .admin-icon-button { width: auto; min-width: 42px; padding: 0 .8rem; }
+
+  .form-row { grid-template-columns: 1fr; }
+
+  .modal-dialog { max-height: 92vh; }
+
+  .btn-row { flex-direction: column; align-items: stretch; }
+  .btn-row .btn { width: 100%; justify-content: center; }
+
+  table { font-size: .8rem; }
+  thead th, tbody td { padding: .65rem .75rem; }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* Testzuweisung */
+.test-assignment {
+  width: min(100%, 1440px);
+  margin: 0;
+}
+
+.test-assignment__header {
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:1rem;
+  max-width:900px;
+  margin:0 0 1.5rem;
+}
+
+.test-assignment__title {
+  margin:0;
+  font-family:var(--font-display);
+  color:var(--cp-ink);
+  font-size:clamp(2rem,4vw,3rem);
+  font-weight:700;
+  line-height:.9;
+  text-transform:uppercase;
+}
+
+.test-assignment__title span { color:var(--cp-teal); }
+
+.test-assignment__card {
+  width:min(100%, 900px);
+  max-width:none;
+  padding:1.5rem;
+  margin:0 0 2rem;
+}
+
+/* Der normale Primärbutton verwendet im hellen Arbeitsbereich Türkis.
+   Hier ist weiße Schrift bewusst festgelegt, damit die Beschriftung auch
+   beim starken Herauszoomen klar lesbar bleibt. */
+.test-assignment__actions .btn-primary {
+  color:#fff;
+  background:#087b7c;
+  border-color:#087b7c;
+  box-shadow:0 4px 12px rgba(8,123,124,.22);
+}
+.test-assignment__actions .btn-primary:hover {
+  color:#fff;
+  background:#05696a;
+  border-color:#05696a;
+}
+.test-assignment__actions .btn-primary .material-icons { color:currentColor; }
+.test-assignment__section + .test-assignment__section { margin-top:2rem; padding-top:2rem; border-top:1px solid var(--cp-border); }
+.test-assignment__section-title,.test-results__title { display:flex; align-items:center; gap:.5rem; margin:0 0 1rem; color:var(--cp-ink); font-family:var(--font-display); font-size:1.55rem; font-weight:700; text-transform:uppercase; }
+.test-assignment__section-title .material-icons { color:var(--cp-teal); }
+.test-assignment__meta { margin:0 0 1rem; color:var(--cp-ink-2); }
+.test-picker { padding:1rem; margin-bottom:1rem; border:1px solid var(--cp-border); border-radius:var(--r-md); background:var(--cp-surface-2); }
+.test-picker__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.65rem; }
+.test-picker__option { display:flex; align-items:center; gap:.7rem; min-width:0; padding:.75rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); color:var(--cp-ink); background:var(--cp-surface); cursor:pointer; }
+.test-picker__option:hover { border-color:var(--cp-teal); background:#f7fcfc; }
+.test-picker__checkbox,.test-summary__checkbox { width:1.1rem; height:1.1rem; margin:0; flex:0 0 auto; accent-color:var(--cp-teal); }
+.test-picker__name { min-width:0; font-weight:700; }
+.test-picker__price { margin-left:auto; color:var(--cp-ink-2); font-size:.85rem; white-space:nowrap; }
+.test-assignment__actions { display:flex; flex-wrap:wrap; gap:.65rem; }
+.test-summary { padding:1rem; border:1px solid var(--cp-border); border-radius:var(--r-md); background:var(--cp-surface-2); }
+.test-summary__title { margin:0 0 .8rem; color:var(--cp-ink); font-size:.95rem; }
+.test-summary__list { display:grid; gap:.6rem; }
+.test-summary__item { display:flex; align-items:center; gap:1rem; padding:.85rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); background:var(--cp-surface); transition:background var(--ease), border-color var(--ease), opacity var(--ease); }
+.test-summary__item.is-free { border-color:rgba(8,123,124,.34); background:#f3fbfa; }
+.test-summary__item.is-saving { opacity:.62; pointer-events:none; }
+.test-summary__content { flex:1; min-width:0; }.test-summary__name { color:var(--cp-ink); font-weight:700; }.test-summary__price { margin-top:.15rem; color:var(--cp-ink-2); font-size:.85rem; }.test-summary__free { margin-left:.5rem; color:#087b7c; font-weight:800; }.test-summary__free-form { margin:0; }.test-summary__free-label { display:flex; align-items:center; gap:.45rem; white-space:nowrap; cursor:pointer; color:var(--cp-ink); font-weight:700; }.test-summary__total { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--cp-border); }.test-summary__total-value { color:var(--cp-ink); text-align:right; font-size:1.1rem; font-weight:800; }.test-summary__total-value span { color:var(--cp-teal); }.test-assignment__notice { padding:.9rem 1rem; border:1px solid #c79b00; border-radius:var(--r-sm); color:#594400; background:#fff6c9; }.test-assignment__empty { padding:2rem 1rem; border:2px dashed var(--cp-border-2); border-radius:var(--r-md); color:var(--cp-ink-2); text-align:center; }.test-assignment__empty-title { display:block; color:var(--cp-ink); font-weight:800; }.test-assignment__empty-copy { margin-top:.4rem; font-size:.9rem; }.test-results-section { width:100%; max-width:none; margin-top:2.5rem; }
+.test-results-section__header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:0 0 1rem; }
+.test-results-section__header .kicker { margin-bottom:.45rem; }
+.test-results__title { margin:0; }
+.test-results-section__hint { margin:0; color:var(--cp-muted); font-size:.85rem; }
+.test-results__table { min-width:1000px; }.test-results__test { min-width:180px; }.test-results__result { min-width:440px; }.test-results__pdf { min-width:170px; }.test-result-form { display:flex; align-items:flex-start; gap:.7rem; margin:0; }.test-result-form__select { flex:0 0 130px; min-height:40px; }.test-result-form__texts { display:grid; flex:1; gap:.45rem; }.test-result-form__textarea { min-height:4.5rem; font-size:.9rem; line-height:1.35; }.test-pdf-actions { display:flex; align-items:center; gap:.45rem; }.test-pdf-form { display:inline-flex; margin:0; }.test-pdf-form__input { display:none; }.test-pdf-form__trigger { cursor:pointer; }
+@media (max-width:600px) { .test-assignment__card{padding:1.15rem}.test-summary__item{align-items:flex-start;flex-direction:column}.test-result-form{min-width:650px}.test-picker__grid{grid-template-columns:1fr} }
+
+/* ============================================================
+   5e. TERMIN-SLOTS
+   ============================================================ */
+/* Slotverwaltung nutzt bewusst die volle verfügbare Inhaltsbreite und
+   beginnt an der linken Content-Kante statt als zentrierte Lesespalte. */
+.slots-page { width: 100%; max-width: none; margin: 0; }
+/* Bei einem Seitenwechsel bleibt die neue Tabelle bis zur Wiederherstellung
+   der Scrollposition unsichtbar. Dadurch ist kein Zwischen-Sprung sichtbar. */
+html.slots-pagination-restoring {
+  scroll-behavior: auto !important;
+}
+html.slots-pagination-restoring .slots-page { visibility: hidden; }
+html.slots-pagination-restoring main { overflow: hidden; }
+/* Einheitliche Kontrastregel für dunkle, primäre Aktionen im Backend. */
+.btn-primary,
+.btn-primary .material-icons,
+.slots-form__action .btn-primary,
+.slots-form__action .btn-primary .material-icons { color: #fff !important; }
+.btn-primary { background: #087b7c; border-color: #087b7c; }
+.btn-primary:hover { background: #05696a; border-color: #05696a; }
+.slots-page__header { margin-bottom: 1.35rem; }
+.slots-page__title { margin: 0; color: var(--cp-ink); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.25rem); font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; }
+.slots-page__intro { max-width: 48rem; margin: .6rem 0 0; color: var(--cp-ink-2); }
+.slots-panel { margin-bottom: 1rem; overflow: hidden; }
+.slots-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
+.slots-panel__header h2, .slots-list__header h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; }
+.slots-panel__header p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; }
+.slots-panel__icon { color: var(--cp-teal); }
+.slots-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.15rem; padding: 1.25rem 1.3rem; }
+.slots-form .form-group { min-width: 135px; margin: 0; }
+.slots-form__field--times { flex: 1 1 250px; }
+.slots-form__field--visible-from { min-width: 220px !important; }
+.slots-form .form-control { width: 100%; min-height: 42px; }
+.form-hint { display: block; margin-top: .12rem; color: var(--cp-muted); font-size: .72rem; font-weight: 500; }
+.slots-days { min-width: 240px; margin: 0; padding: 0; border: 0; }
+.slots-days legend { margin: 0 0 .48rem; color: var(--cp-ink-2); font-size: .875rem; font-weight: 600; }
+.slots-days__options { display: flex; flex-wrap: wrap; gap: .38rem; }
+.slots-days__options label { position: relative; display: grid; place-items: center; min-width: 33px; min-height: 42px; border: 1px solid var(--cp-border-2); border-radius: .45rem; color: var(--cp-ink-2); background: var(--cp-surface-2); cursor: pointer; font-size: .76rem; font-weight: 800; }
+.slots-days__options input { position: absolute; opacity: 0; }
+.slots-days__options label:has(input:checked) { border-color: var(--cp-teal); color: #ffffff; background: var(--cp-teal); }
+.slots-days__options label:has(input:checked) span { color: #ffffff; }
+.slots-days__options label:has(input:focus-visible) { outline: 2px solid var(--cp-yellow); outline-offset: 2px; }
+.slots-form__action { display: flex; align-items: flex-end; min-height: 42px; }
+.slots-form__action .btn { min-height: 42px; white-space: nowrap; }
+.slots-filter { margin: 1rem 0; padding: 0; overflow: hidden; }
+.slots-filter__toggle { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.15rem; color: var(--cp-ink); cursor: pointer; }
+.slots-filter__toggle > input { position: absolute; opacity: 0; }
+.slots-filter__toggle strong, .slots-filter__toggle small { display: block; }
+.slots-filter__toggle strong { font-size: .9rem; }
+.slots-filter__toggle small { margin-top: .1rem; color: var(--cp-muted); font-size: .76rem; }
+.slots-filter__check { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--cp-border-2); border-radius: .55rem; color: var(--cp-muted); background: var(--cp-surface-2); }
+.slots-filter__toggle input:checked + .slots-filter__check {
+  border-color: #087b7c;
+  color: #ffffff;
+  background: #087b7c;
+  box-shadow: 0 3px 8px rgba(8, 123, 124, .22);
+}
+.slots-filter__toggle input:checked + .slots-filter__check .material-icons { color: currentColor; }
+.slots-filter__toggle input:focus-visible + .slots-filter__check { outline: 2px solid var(--cp-yellow); outline-offset: 3px; }
+.slots-pagination { margin: 1rem 0; }
+.slots-list { overflow: hidden; border: 1px solid var(--cp-border); border-radius: var(--r-lg); background: var(--cp-surface); box-shadow: var(--shadow-sm); }
+.slots-list__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
+.slots-list__header .kicker { margin-bottom: .2rem; }
+.slots-list__delete { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: .55rem .85rem; border-color: #cf3651; color: #fff; background: #b82442; white-space: nowrap; }
+.slots-list__delete .material-icons { flex: 0 0 auto; color: currentColor; font-size: 1.05rem; }
+.slots-list__delete-label { display: inline; }
+.slots-list__delete:hover { border-color: #991b34; color: #fff; background: #991b34; }
+.slots-list__delete[hidden] { display: none; }
+.slots-table { min-width: 720px; }
+.slots-table__select { width: 42px; text-align: center; }
+.slots-table__select input { width: 17px; height: 17px; accent-color: var(--cp-teal); cursor: pointer; }
+.slots-table__date, .slots-table__time { color: var(--cp-ink) !important; font-weight: 700; white-space: nowrap; }
+.slots-table__action { width: 72px; text-align: center; }
+.slot-status, .slot-visibility { display: inline-flex; align-items: center; gap: .38rem; min-height: 28px; font-size: .8rem; font-weight: 650; }
+.slot-status .material-icons, .slot-visibility .material-icons { font-size: 1rem; }
+.slot-status--free, .slot-visibility--available { color: var(--cp-teal); }
+.slot-status--booked { color: #ff8b9e; }
+.slot-visibility--scheduled { color: #ffd067; }
+.slot-visibility--scheduled .inline-action-form, .slot-status--booked .inline-action-form { margin-left: .15rem; }
+@media (max-width: 720px) {
+  .slots-panel__header, .slots-list__header { padding: .9rem 1rem; }
+  .slots-form { padding: 1rem; }
+  .slots-form__field, .slots-form__field--visible-from, .slots-days { width: 100%; min-width: 0 !important; }
+  .slots-form__action, .slots-form__action .btn { width: 100%; }
+  .slots-list__header { align-items: flex-start; flex-direction: column; }
+  .slots-list__delete { width: 100%; }
+}
+
+/* ============================================================
+   5f. ERGEBNISEINTRAGUNG
+   ============================================================ */
+.batch-results { width: 100%; max-width: none; margin: 0; }
+.batch-results__header { margin-bottom: 1.35rem; }
+.batch-results__header .kicker { margin-bottom: .55rem; }
+.batch-results__title {
+  margin: 0;
+  color: var(--cp-ink);
+  font-family: var(--font-display);
+  font-size: clamp(2.15rem, 4vw, 3.25rem);
+  font-weight: 700;
+  line-height: .9;
+  letter-spacing: -.012em;
+  text-transform: uppercase;
+}
+.batch-results__intro { max-width: 48rem; margin: .6rem 0 0; color: var(--cp-ink-2); }
+.batch-results__filter,
+.batch-results__actions { margin-bottom: 1rem; overflow: hidden; }
+.batch-results__panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.3rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+}
+.batch-results__panel-head h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; }
+.batch-results__panel-head p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; }
+.batch-results__panel-head > .material-icons { color: var(--cp-teal); }
+.batch-results__filter-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem 1.15rem;
+  padding: 1.25rem 1.3rem;
+}
+.batch-results__filter-form .form-group { width: min(100%, 220px); margin: 0; }
+.batch-results__filter-form .form-control { min-height: 42px; }
+.batch-results__action-body { padding: 1.15rem 1.3rem; }
+.batch-results__buttons { display: flex; flex-wrap: wrap; gap: .65rem; }
+.batch-results__save { color: #fff !important; background: #087b7c; border-color: #087b7c; box-shadow: 0 4px 12px rgba(8,123,124,.22); }
+.batch-results__save:hover { color: #fff !important; background: #05696a; border-color: #05696a; }
+#unsaved-counter { display: block; margin-top: .75rem; font-size: .84rem; font-weight: 700; }
+#unsaved-counter.active { color: var(--cp-coral); }
+#unsaved-counter.inactive { color: var(--cp-muted); }
+.batch-results__pagination { margin: 1rem 0; }
+.batch-results__table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--cp-border); border-radius: var(--r-lg); background: var(--cp-surface); box-shadow: var(--shadow-sm); }
+.batch-results__table { min-width: 1080px; }
+.batch-results__table th { background: var(--cp-surface-2); }
+.batch-results__table td { vertical-align: middle; }
+.batch-results__center { text-align: center; }
+.batch-result-row { cursor: pointer; }
+.batch-result-row:hover { background: var(--cp-surface-2); }
+.batch-result-code { color: var(--cp-teal) !important; font-weight: 800; letter-spacing: .04em; }
+.result-wrapper { display: flex; align-items: center; justify-content: center; gap: .55rem; position: relative; }
+.result-select { min-width: 150px; min-height: 38px; padding: .42rem 2rem .42rem .65rem; border: 1px solid var(--cp-border-2); border-radius: var(--r-sm); color: var(--cp-ink); background-color: var(--cp-surface-2); font: inherit; font-size: .82rem; font-weight: 600; }
+.result-select:focus { outline: 2px solid rgba(8,123,124,.25); outline-offset: 2px; border-color: var(--cp-teal); }
+.result-select option { color: #07182e; background: #fff; }
+.result-dot { width: .72rem; height: .72rem; border: 1px solid transparent; border-radius: 50%; flex: 0 0 .72rem; transition: background-color .25s ease, border-color .25s ease; }
+.result-negativ { background: #147a3f; border-color: #147a3f; }
+.result-positiv { background: #c93552; border-color: #c93552; }
+.result-unbestimmt { background: #273d4c; border-color: #273d4c; }
+.result-none { background: #b8c9d1; border-color: #8ba4b1; }
+.result-pending { opacity: 0; color: var(--cp-coral); transition: opacity .2s ease; user-select: none; }
+.result-pending.active { opacity: 1; }
+.pdf-cell { display: flex; justify-content: center; align-items: center; gap: .45rem; }
+.status-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; }
+.status-badge { min-width: 88px; padding: .23rem .55rem; border: 1px solid transparent; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
+.status-not-entered { color: var(--cp-muted); background: var(--cp-surface-2); border-color: var(--cp-border); }
+.status-unread { color: #745500; background: #fff3c9; border-color: #e3c75c; }
+.status-read { color: #075c70; background: #d7f0f5; border-color: #91d4e1; }
+.status-date { color: var(--cp-muted); font-size: .68rem; }
+.batch-results__details-cell {
+  padding: 0 !important;
+  background: linear-gradient(135deg, #d9f0f3 0%, #edf8f9 100%);
+}
+.batch-results__details-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: .55rem;
+  padding: 1.35rem;
+  border-top: 3px solid #087b7c;
+  box-shadow: inset 5px 0 0 rgba(8,123,124,.18);
+}
+.batch-results__field-label {
+  margin-top: .35rem;
+  color: #075c70;
+  font-size: .85rem;
+  font-weight: 800;
+}
+.batch-results__standard-copy {
+  max-height: 130px;
+  padding: .8rem 1rem;
+  overflow: auto;
+  border: 1px solid #94c8d0;
+  border-left: 4px solid #087b7c;
+  border-radius: var(--r-sm);
+  color: var(--cp-ink-2);
+  background: #ffffff;
+  box-shadow: 0 2px 5px rgba(7,24,46,.06);
+  font-size: .88rem;
+  line-height: 1.5;
+  cursor: default;
+}
+.batch-results__standard-copy * { cursor: default; }
+.result-text-field {
+  min-height: 5.5rem;
+  border-color: #94c8d0;
+  background: #ffffff;
+  box-shadow: 0 2px 5px rgba(7,24,46,.05);
+  resize: vertical;
+}
+.result-text-field:focus {
+  border-color: #087b7c;
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(8,123,124,.16);
+}
+.batch-results__copy {
+  justify-self: start;
+  border-color: #087b7c;
+  color: #075c70;
+  background: #ffffff;
+}
+.batch-results__copy:hover { color: #ffffff; background: #087b7c; border-color: #087b7c; }
+.batch-results__divider { width: 100%; margin: 1rem 0 .8rem; border: 0; border-top: 2px solid #a8d4da; }
+@media (max-width: 720px) {
+  .batch-results__panel-head { padding: .9rem 1rem; }
+  .batch-results__filter-form, .batch-results__action-body { padding: 1rem; }
+  .batch-results__filter-form .form-group { width: 100%; }
+  .batch-results__buttons, .batch-results__buttons .btn { width: 100%; }
+}
+
+/* ============================================================
+   5g. TESTANGEBOTE
+   ============================================================ */
+.tests-admin { width: 100%; max-width: none; margin: 0; }
+.tests-admin__header { margin-bottom: 1.35rem; }
+.tests-admin__header .kicker { margin-bottom: .55rem; }
+.tests-admin__title { margin: 0; color: var(--cp-ink); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.25rem); font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; }
+.tests-admin__intro { max-width: 48rem; margin: .6rem 0 0; color: var(--cp-ink-2); }
+.tests-admin__create { margin-bottom: 1rem; overflow: hidden; }
+.tests-admin__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
+.tests-admin__panel-head h2, .tests-admin__list-head h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; }
+.tests-admin__panel-head p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; }
+.tests-admin__panel-head > .material-icons { color: var(--cp-teal); }
+.tests-admin__create-body { padding: 1.15rem 1.3rem; }
+.tests-admin__add { color: #fff !important; background: #087b7c; border-color: #087b7c; box-shadow: 0 4px 12px rgba(8,123,124,.22); }
+.tests-admin__add:hover { color: #fff !important; background: #05696a; border-color: #05696a; }
+.tests-admin__list { overflow: hidden; border: 1px solid var(--cp-border); border-radius: var(--r-lg); background: var(--cp-surface); box-shadow: var(--shadow-sm); }
+.tests-admin__list-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
+.tests-admin__list-head .kicker { margin-bottom: .2rem; }
+.tests-admin__table-wrap { overflow-x: auto; }
+.tests-admin__table { min-width: 720px; }
+.tests-admin__center { text-align: center; }
+.tests-admin__name { display: block; color: var(--cp-ink); font-weight: 800; }
+.tests-admin__name-en { display: block; margin-top: .15rem; color: var(--cp-muted); font-size: .82rem; }
+.tests-admin__price { color: var(--cp-ink) !important; font-weight: 800; white-space: nowrap; }
+.tests-admin__visibility { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .62rem; border: 1px solid transparent; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
+.tests-admin__visibility .material-icons { font-size: .95rem; }
+.tests-admin__visibility--public { color: #075c70; background: #d7f0f5; border-color: #91d4e1; }
+.tests-admin__visibility--private { color: #8b2640; background: #ffe3e8; border-color: #f2a5b5; }
+.tests-admin__actions { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
+.icon-action-btn--unlock { border-color: rgba(8,123,124,.28); color: #087b7c; background: rgba(8,123,124,.1); }
+.icon-action-btn--unlock:hover:not(:disabled) { color: #fff; background: #087b7c; }
+.icon-action-btn--lock { border-color: rgba(139,38,64,.28); color: #9c2e48; background: rgba(201,53,82,.1); }
+.icon-action-btn--lock:hover:not(:disabled) { color: #fff; background: #9c2e48; }
+@media (max-width: 720px) { .tests-admin__panel-head, .tests-admin__list-head { padding: .9rem 1rem; } .tests-admin__create-body { padding: 1rem; } .tests-admin__add { width: 100%; } }
+
+/* ============================================================
+   5h. TESTFORMULARE — ANLEGEN & BEARBEITEN
+   ============================================================ */
+.test-form-page { width: 100%; max-width: none; margin: 0; }
+.test-form-page__header { margin-bottom: 1.35rem; }
+.test-form-page__header .kicker { margin-bottom: .55rem; }
+.test-form-page__title {
+  margin: 0;
+  color: var(--cp-ink);
+  font-family: var(--font-display);
+  font-size: clamp(2.15rem, 4vw, 3.25rem);
+  font-weight: 700;
+  line-height: .9;
+  letter-spacing: -.012em;
+  text-transform: uppercase;
+}
+.test-form-page__intro { max-width: 49rem; margin: .6rem 0 0; color: var(--cp-ink-2); }
+.test-form { display: grid; gap: 1rem; }
+.test-form__section { overflow: hidden; }
+.test-form__section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.3rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+}
+.test-form__section-head h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; }
+.test-form__section-head p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; }
+.test-form__section-head > .material-icons { color: var(--cp-teal); }
+.test-form__body { padding: 1.25rem 1.3rem; }
+.test-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, .36fr); gap: 1rem 1.15rem; align-items: end; }
+.test-form .form-group { margin: 0; }
+.test-form .form-control { min-height: 42px; }
+.test-form textarea.form-control { min-height: 8.25rem; resize: vertical; }
+.test-form__result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
+.test-form__result {
+  min-width: 0;
+  margin: 0;
+  padding: 1rem;
+  border: 1px solid var(--cp-border);
+  border-top: 3px solid var(--cp-teal);
+  border-radius: var(--r-md);
+  background: rgba(255,255,255,.025);
+}
+.test-form__result legend { display: flex; align-items: center; gap: .38rem; padding: 0 .35rem; color: var(--cp-ink); font-size: .88rem; font-weight: 800; }
+.test-form__result legend .material-icons { color: var(--cp-teal); font-size: 1.05rem; }
+.test-form__result .form-group + .form-group { margin-top: .75rem; }
+.test-form__result label { color: var(--cp-ink-2); font-size: .78rem; }
+.test-form__result--positive { border-top-color: #c93552; }
+.test-form__result--positive legend .material-icons { color: #f26a80; }
+.test-form__result--negative { border-top-color: #48c888; }
+.test-form__result--negative legend .material-icons { color: #69da9e; }
+.test-form__result--unclear { border-top-color: #e1bd42; }
+.test-form__result--unclear legend .material-icons { color: #f3d36c; }
+.test-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: .25rem; }
+.test-form__actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
+.test-form__actions .material-icons { font-size: 1.1rem; }
+.test-form__save { color: #fff !important; background: #087b7c; border-color: #087b7c; box-shadow: 0 4px 12px rgba(8,123,124,.22); }
+.test-form__save:hover { color: #fff !important; background: #05696a; border-color: #05696a; }
+.test-form__back { border-color: var(--cp-border-2); }
+@media (max-width: 980px) { .test-form__grid { grid-template-columns: 1fr 1fr; } .test-form__price { grid-column: 1 / -1; max-width: 220px; } .test-form__result-grid { grid-template-columns: 1fr; } }
+@media (max-width: 620px) { .test-form__section-head, .test-form__body { padding: 1rem; } .test-form__grid { grid-template-columns: 1fr; } .test-form__price { grid-column: auto; max-width: none; } .test-form__actions, .test-form__actions .btn { width: 100%; } }
+
+/* ============================================================
+   5i. TESTDOKUMENTATION — EXPORT & KONFIGURATION
+   ============================================================ */
+.testdoku-export, .testdoku-editor { width: 100%; max-width: none; margin: 0; }
+.testdoku-export__header, .testdoku-editor__header { margin-bottom: 1.35rem; }
+.testdoku-export__header .kicker, .testdoku-editor__header .kicker { margin-bottom: .55rem; }
+.testdoku-export__title, .testdoku-editor__title { margin: 0; color: var(--cp-ink); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.25rem); font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; }
+.testdoku-export__intro, .testdoku-editor__intro { max-width: 52rem; margin: .6rem 0 0; color: var(--cp-ink-2); }
+.testdoku-export__date, .testdoku-export__options { margin-bottom: 1rem; overflow: hidden; }
+.testdoku-export__panel-head, .testdoku-editor__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
+.testdoku-export__panel-head h2, .testdoku-editor__panel-head h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; }
+.testdoku-export__panel-head p, .testdoku-editor__panel-head p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; }
+.testdoku-export__panel-head > .material-icons, .testdoku-editor__panel-head > .material-icons { color: var(--cp-teal); }
+.testdoku-export__date-body { padding: 1.2rem 1.3rem; }
+.testdoku-export__date-body .form-group { width: min(100%, 230px); margin: 0; }
+.testdoku-export__option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem 1.3rem; }
+.testdoku-export__option { display: grid; grid-template-columns: auto 1fr; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid var(--cp-border); border-top: 3px solid #087b7c; border-radius: var(--r-md); background: var(--cp-surface); }
+.testdoku-export__option--snapshot { border-top-color: #d7ad32; }
+.testdoku-export__option-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .6rem; color: #087b7c; background: rgba(8,123,124,.12); }
+.testdoku-export__option--snapshot .testdoku-export__option-icon { color: #795b00; background: #fff3c9; }
+.testdoku-export__option h3 { margin: .1rem 0 .28rem; color: var(--cp-ink); font-size: .95rem; }
+.testdoku-export__option p { margin: 0; color: var(--cp-ink-2); font-size: .84rem; line-height: 1.5; }
+.testdoku-export__snapshot-info { display: flex; align-items: center; gap: .3rem; margin-top: .65rem !important; color: #526b7b !important; font-size: .77rem !important; font-weight: 700; }
+.testdoku-export__snapshot-info .material-icons { color: #087b7c; font-size: 1rem; }
+.testdoku-export__option .testdoku-export__download { grid-column: 1 / -1; justify-self: start; margin-top: .2rem; }
+.testdoku-export__option.is-unavailable { opacity: .7; }
+.testdoku-export__option.is-unavailable .testdoku-export__download { pointer-events: none; opacity: .5; }
+.testdoku-export__legend { padding: 1rem 1.3rem; }
+.testdoku-export__legend-head { display: flex; align-items: center; gap: .5rem; color: var(--cp-ink); }
+.testdoku-export__legend-head .material-icons { color: var(--cp-teal); }
+.testdoku-export__legend-head h2 { font-size: .95rem; }
+.testdoku-export__legend-items { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin-top: .75rem; color: var(--cp-ink-2); font-size: .82rem; }
+.testdoku-export__symbol { display: inline-block; min-width: 1em; color: var(--cp-ink); font-size: 1rem; text-align: center; }
+.testdoku-export__symbol--negative { color: #147a3f; }.testdoku-export__symbol--positive { color: #b82442; }.testdoku-export__symbol--muted { color: var(--cp-muted); }
+
+.testdoku-editor__workspace { overflow: hidden; }
+.testdoku-editor__workspace-body { padding: 1.25rem 1.3rem; }
+.testdoku-editor .doku-section-title { margin: 0 0 .7rem; color: var(--cp-ink); font-size: 1rem; }
+.testdoku-editor .doku-section-title + .kachel-grid { margin-bottom: .45rem; }
+.testdoku-editor .doku-section-title:not(:first-of-type) { margin-top: 1.5rem; }
+.testdoku-editor .doku-section-title .material-icons { color: var(--cp-teal) !important; }
+.testdoku-editor .doku-section-title small { color: var(--cp-muted); font-size: .76rem; font-weight: 600; }
+.testdoku-editor .kachel-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 260px));
+  align-content: start;
+  gap: .75rem;
+  min-height: 118px;
+  padding: 1rem;
+  border: 2px dashed #a7cbd1;
+  border-radius: var(--r-md);
+  background: #f5fbfc;
+}
+/* SortableJS arbeitet auch innerhalb eines CSS-Grids zuverlässig: Die Kacheln
+   bleiben bei Drag & Drop sortierbar, nutzen aber die verfügbare Breite besser. */
+.testdoku-editor .kachel-grid > .kachel { width: 100%; }
+.testdoku-editor .kachel-grid.active-zone { min-height: 145px; border-color: #087b7c; background: #e9f7f6; }
+.testdoku-editor .kachel-grid.empty-hint::after { color: #526b7b; }
+.testdoku-editor .kachel { min-width: 210px; max-width: 260px; padding: .85rem; border: 1px solid #b8d7dc; border-radius: var(--r-sm); background: #fff; box-shadow: 0 2px 7px rgba(7,24,46,.08); }
+.testdoku-editor .kachel.sortable-chosen { border-color: #087b7c; box-shadow: 0 8px 18px rgba(8,123,124,.22); }
+.testdoku-editor .kachel-title { padding-right: 0; color: var(--cp-ink); font-size: .86rem; }
+.testdoku-editor .kachel-field-label { color: #526b7b; font-size: .74rem; font-weight: 700; }
+.testdoku-editor .kachel input[type="text"], .testdoku-editor .kachel input[type="number"] { min-height: 34px; margin-bottom: .55rem; border-color: #b8d7dc; color: var(--cp-ink); background: #fff; }
+.testdoku-editor .kachel input[type="text"]:focus, .testdoku-editor .kachel input[type="number"]:focus { border-color: #087b7c; box-shadow: 0 0 0 3px rgba(8,123,124,.14); }
+.testdoku-editor .kachel-type { gap: .75rem; }.testdoku-editor .kachel-type label, .testdoku-editor .kachel-auftragszettel { color: var(--cp-ink-2); font-size: .78rem; }.testdoku-editor input[type="radio"] { accent-color: #087b7c; }
+.testdoku-editor .kachel-auftragszettel { padding-top: .55rem; border-top: 1px solid #d8e8eb; }.testdoku-editor .kachel-auftragszettel .material-icons { color: #a66e00 !important; }
+.testdoku-editor .doku-hint { display: flex; align-items: center; gap: .35rem; margin: .65rem 0 0; color: var(--cp-muted); }.testdoku-editor .doku-hint .material-icons { color: #087b7c; }
+.testdoku-editor__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }.testdoku-editor .btn-save-doku { margin: 0; }
+@media (max-width: 720px) { .testdoku-export__panel-head, .testdoku-editor__panel-head, .testdoku-export__date-body, .testdoku-editor__workspace-body { padding: 1rem; } .testdoku-export__option-grid { grid-template-columns: 1fr; padding: 1rem; } }
+@media (max-width: 560px) { .testdoku-export__date-body .form-group { width: 100%; } .testdoku-export__option .testdoku-export__download, .testdoku-editor__actions, .testdoku-editor__actions .btn { width: 100%; } .testdoku-editor .kachel { min-width: 100%; max-width: none; } }
+
+/* ============================================================
+   5m. FRAGEBOGEN-EXPORT
+   ============================================================ */
+
+.questionnaire-export { width: 100%; max-width: none; }
+
+/* Der Zeitraumfilter bleibt bewusst kompakt. */
+.questionnaire-export__filter {
+  width: min(100%, 680px);
+  margin: 0;
+}
+
+.questionnaire-export__panel-hint {
+  margin: .18rem 0 0;
+  color: var(--cp-muted);
+  font-size: .78rem;
+}
+
+.questionnaire-export__panel-icon {
+  flex: 0 0 auto;
+  color: var(--cp-teal);
+  font-size: 1.25rem;
+}
+
+.questionnaire-export__filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: .7rem;
+}
+
+.questionnaire-export__filter-form {
+  display: flex;
+  flex: 1 1 430px;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.questionnaire-export__field {
+  flex: 1 1 165px;
+  margin: 0;
+}
+
+.questionnaire-export__filter-form .btn {
+  min-height: 44px;
+}
+
+.questionnaire-export__filter-row > form:not(.questionnaire-export__filter-form) .btn {
+  min-height: 44px;
+}
+
+.questionnaire-export__results {
+  width: min(100%, 980px);
+  margin-top: 2.5rem;
+}
+
+.questionnaire-export__results-header { margin-bottom: 1rem; }
+.questionnaire-export__results-header .kicker { margin-bottom: .45rem; }
+
+.questionnaire-export__results-title {
+  margin: 0;
+  color: var(--cp-ink);
+  font-family: var(--font-body);
+  font-size: 1.1rem;
+  font-weight: 800;
+}
+
+.questionnaire-export__summary { overflow: hidden; }
+
+.questionnaire-export__summary-status {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  padding: 1.1rem 1.35rem;
+  border-bottom: 1px solid var(--cp-border);
+  color: #0b6b58;
+  background: #edf9f5;
+}
+
+.questionnaire-export__summary-status .material-icons {
+  font-size: 1.35rem;
+  color: #087b7c;
+}
+
+.questionnaire-export__summary-status div { display: grid; gap: .08rem; }
+.questionnaire-export__summary-status strong { font-size: .95rem; }
+.questionnaire-export__summary-status span { color: var(--cp-ink-2); font-size: .8rem; }
+
+.questionnaire-export__section {
+  padding: 1.35rem;
+  border-bottom: 1px solid var(--cp-border);
+}
+
+.questionnaire-export__section:last-child { border-bottom: 0; }
+
+.questionnaire-export__section-title {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  margin: 0 0 .9rem;
+  color: var(--cp-ink);
+  font-family: var(--font-body);
+  font-size: .95rem;
+  font-weight: 800;
+}
+
+.questionnaire-export__section-title .material-icons {
+  color: var(--cp-teal);
+  font-size: 1.1rem;
+}
+
+.questionnaire-export__stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: .8rem;
+}
+
+.questionnaire-export__stat {
+  display: grid;
+  gap: .18rem;
+  min-height: 112px;
+  padding: 1rem;
+  border: 1px solid var(--cp-border);
+  border-left: 4px solid var(--stat-color);
+  border-radius: var(--r-md);
+  background: var(--cp-surface-2);
+}
+
+.questionnaire-export__stat--male { --stat-color: #176b8a; }
+.questionnaire-export__stat--female { --stat-color: #c93552; }
+.questionnaire-export__stat--diverse { --stat-color: #7b4a9c; }
+
+.questionnaire-export__stat-value {
+  color: var(--stat-color);
+  font-family: var(--font-display);
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: .9;
+}
+
+.questionnaire-export__stat-label { color: var(--cp-ink); font-size: .86rem; font-weight: 700; }
+.questionnaire-export__stat-note { margin-top: .25rem; color: var(--cp-muted); font-size: .72rem; line-height: 1.35; }
+
+.questionnaire-export__tests-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: .65rem;
+}
+
+.questionnaire-export__test {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-width: 0;
+  padding: .72rem .85rem;
+  border: 1px solid var(--cp-border);
+  border-radius: var(--r-sm);
+  color: var(--cp-ink-2);
+  background: var(--cp-surface-2);
+}
+
+.questionnaire-export__test span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.questionnaire-export__test strong {
+  display: inline-grid;
+  min-width: 1.6rem;
+  height: 1.6rem;
+  padding: 0 .4rem;
+  place-items: center;
+  border-radius: 999px;
+  color: #fff;
+  background: #087b7c;
+  font-size: .75rem;
+}
+
+.questionnaire-export__message {
+  width: min(100%, 680px);
+  margin-top: 1.25rem;
+}
+
+@media (max-width: 600px) {
+  .questionnaire-export__filter { width: 100%; }
+  .questionnaire-export__filter-form { flex-basis: 100%; }
+  .questionnaire-export__filter-form .btn,
+  .questionnaire-export__filter-row > form:not(.questionnaire-export__filter-form),
+  .questionnaire-export__filter-row > form:not(.questionnaire-export__filter-form) .btn { width: 100%; }
+  .questionnaire-export__stats-grid { grid-template-columns: 1fr; }
+}
+
+/* ============================================================
+   5l. TAGESABSCHLUSS
+   ============================================================ */
+
+.tagesabschluss {
+  width: 100%;
+  max-width: none;
+}
+
+/* Die Datumsauswahl ist eine gezielte Aktion und keine Vollbreiten-Karte. */
+.tagesabschluss__panel {
+  width: min(100%, 580px);
+  margin: 0;
+}
+
+.tagesabschluss__panel-hint {
+  margin: .18rem 0 0;
+  color: var(--cp-muted);
+  font-size: .78rem;
+}
+
+.tagesabschluss__panel-icon {
+  flex: 0 0 auto;
+  color: var(--cp-teal);
+  font-size: 1.25rem;
+}
+
+.tagesabschluss__filter-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem;
+}
+
+.tagesabschluss__filter-field {
+  flex: 1 1 210px;
+  margin: 0;
+}
+
+.tagesabschluss__filter-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .55rem;
+}
+
+.tagesabschluss__results {
+  width: min(100%, 980px);
+  margin-top: 2.5rem;
+}
+
+.tagesabschluss__results-header {
+  margin-bottom: 1rem;
+}
+
+.tagesabschluss__results-header .kicker {
+  margin-bottom: .45rem;
+}
+
+.tagesabschluss__results-title {
+  margin: 0;
+  color: var(--cp-ink);
+  font-family: var(--font-body);
+  font-size: 1.1rem;
+  font-weight: 800;
+}
+
+.tagesabschluss__table {
+  min-width: 680px;
+}
+
+.tagesabschluss__code,
+.tagesabschluss__time {
+  color: var(--cp-ink) !important;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.tagesabschluss__tests {
+  min-width: 210px;
+}
+
+.tagesabschluss__col-amount {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.tagesabschluss__amount-paid {
+  color: var(--cp-ink);
+  font-weight: 700;
+}
+
+.tagesabschluss__amount-sep {
+  margin: 0 .25rem;
+  color: var(--cp-muted);
+}
+
+.tagesabschluss__amount-free {
+  color: var(--cp-teal);
+  font-size: .8rem;
+  font-weight: 700;
+}
+
+.tagesabschluss__empty-cell {
+  color: var(--cp-muted);
+}
+
+.tagesabschluss__summary {
+  padding: 1.15rem 1.35rem 1.3rem;
+  border-top: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+}
+
+.tagesabschluss__summary-title {
+  margin: 0 0 .65rem;
+  color: var(--cp-ink);
+  font-family: var(--font-body);
+  font-size: .86rem;
+  font-weight: 800;
+}
+
+.tagesabschluss__summary-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: .35rem 1.5rem;
+  margin: 0;
+}
+
+.tagesabschluss__summary-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: .75rem;
+  color: var(--cp-ink-2);
+  font-size: .84rem;
+}
+
+.tagesabschluss__summary-row dt,
+.tagesabschluss__summary-row dd {
+  margin: 0;
+}
+
+.tagesabschluss__summary-row dd {
+  color: var(--cp-ink);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.tagesabschluss__summary-row--total {
+  grid-column: 1 / -1;
+  margin-top: .35rem;
+  padding-top: .65rem;
+  border-top: 1px solid var(--cp-border);
+  color: var(--cp-ink);
+  font-size: .92rem;
+  font-weight: 800;
+}
+
+.tagesabschluss__summary-row--total dd {
+  color: var(--cp-teal);
+  font-size: 1rem;
+}
+
+@media (max-width: 600px) {
+  .tagesabschluss__panel { width: 100%; }
+  .tagesabschluss__filter-field,
+  .tagesabschluss__filter-actions,
+  .tagesabschluss__filter-actions .btn { width: 100%; }
+  .tagesabschluss__summary-list { grid-template-columns: 1fr; }
+  .tagesabschluss__summary-row--total { grid-column: auto; }
+}
+
+/* ============================================================
+   5k. ACCOUNTVERWALTUNG (admin_users)
+   ============================================================ */
+
+/* Beide Sections haben eine sinnvolle Maximalbreite statt Vollbild.
+   Kein Container-im-Container: Sections sind eigenständige Blöcke mit
+   Kanten-Styling statt eingebetteter card-header/card-body-Struktur. */
+
+.users-page {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Gemeinsame Sektion-Basis */
+.users-section {
+  background: var(--cp-surface);
+  border: 1px solid var(--cp-border);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+/* Account anlegen: schmalere Spalte — Formular braucht keine volle Breite */
+.users-section--create {
+  max-width: 560px;
+}
+
+/* Nutzer:innen-Liste: etwas breiter, aber immer noch begrenzt */
+.users-section--list {
+  max-width: 820px;
+  margin-top: 2.5rem;   /* Abstand nur zwischen den beiden Containern */
+}
+
+/* Abschnitts-Titel als leichter Panel-Header (Noto Sans, kein Big Shoulders) */
+.users-section__title {
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  padding: .9rem 1.35rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+  font-family: var(--font-body);
+  font-size: .95rem;
+  font-weight: 800;
+  color: var(--cp-ink);
+  margin: 0;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.users-section__title .material-icons {
+  font-size: 1.1rem;
+  color: var(--cp-teal);
+}
+
+/* Formular-Wrapper im Create-Bereich */
+.users-section--create form {
+  padding: 1.35rem 1.35rem 1.25rem;
+}
+
+/* Hinweistext über der Tabelle */
+.users-list-hint {
+  display: flex;
+  align-items: center;
+  gap: .45rem;
+  padding: .75rem 1.25rem;
+  border-bottom: 1px solid var(--cp-border);
+  color: var(--cp-muted);
+  font-size: .82rem;
+  background: var(--cp-surface-2);
+}
+
+.users-list-hint .material-icons {
+  font-size: 1rem;
+  flex-shrink: 0;
+  color: var(--cp-blue);
+}
+
+/* Tabelle bündig ohne weitere Abstände in der Section */
+.users-section--list .table-wrap {
+  border: none;
+  border-radius: 0;
+}
+
+/* Zeilen anklickbar → Cursor-Hinweis */
+.users-table__row { cursor: pointer; }
+
+/* Löschen-Spalte: minimal breit, zentriert */
+.users-table__delete-col {
+  width: 56px;
+  text-align: center;
+}
+
+/* Modal-Account-Zeile */
+.users-modal-account {
+  margin-bottom: 1.1rem;
+  color: var(--cp-ink-2);
+  font-size: .9rem;
+}
+
+.users-modal-account strong {
+  color: var(--cp-ink);
+}
+
+@media (max-width: 600px) {
+  .users-section--create,
+  .users-section--list {
+    max-width: 100%;
+  }
+}
+
+/* ============================================================
+   5j. KOMPATIBILITÄT — ÖFFENTLICHER USER-BEREICH
+   ============================================================
+   Die Staff-Stylesheet wird auch auf öffentlichen Seiten geladen. Die
+   folgenden Regeln verhindern, dass deren globales Flex-/Sidebar-Layout
+   den öffentlichen Seitenrahmen verschiebt.
+*/
+body.cp-user-host {
+  display: block;
+  min-height: 100%;
+  color: inherit;
+  background: transparent;
+}
+
+body.cp-user-host > .cp-user {
+  width: 100%;
+  min-width: 0;
+}
+
+body.cp-user-host main.cp-user-main {
+  margin-left: 0;
+  flex: none;
+  min-height: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+}
+
+
+/* ============================================================
+   5n. EVALUATION — DATENVERWALTUNG & AUSWERTUNG
+   ============================================================
+   Die Evaluation verwendet bewusst dieselben Card-, Formular- und
+   Tabellenprinzipien wie Buchungsübersicht, Slotverwaltung und Testangebote.
+*/
+.evaluation__header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  margin: 0 0 1.35rem;
+}
+.evaluation__header .kicker { margin-bottom: .55rem; }
+.evaluation__header .kicker .material-icons { font-size: .95rem; }
+.evaluation__header .page-title { margin: 0; }
+.evaluation__header .btn {   
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:.45rem;
+  min-height:2.35rem;
+  padding:.55rem .9rem;
+  border:1px solid rgba(37,150,190,.32);
+  border-radius:var(--r-sm);
+  color:#176b8a;
+  background:rgba(37,150,190,.08);
+  font-size:.8rem;
+  font-weight:800;
+  white-space:nowrap;
+  transition:transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
+}
+
+.evaluation__info {
+  display: flex;
+  align-items: flex-start;
+  gap: .55rem;
+  width: min(100%, 980px);
+  margin: 0 0 1.25rem;
+  padding: .9rem 1.05rem;
+  border: 1px solid rgba(8, 123, 124, .22);
+  border-left: 4px solid var(--cp-teal);
+  border-radius: var(--r-sm);
+  color: var(--cp-ink-2);
+  background: #e6f4f4;
+  font-size: .86rem;
+  line-height: 1.55;
+}
+.evaluation__info .material-icons { flex: 0 0 auto; margin-top: .05rem; color: var(--cp-teal); font-size: 1.1rem; }
+.evaluation__info strong { color: var(--cp-ink); }
+
+.evaluation__upload,
+.evaluation__files,
+.evaluation__filter,
+.evaluation__export,
+.evaluation__card { overflow: hidden; margin-bottom: 1.15rem; }
+.evaluation__upload,
+.evaluation__files { width: min(100%, 1080px); }
+
+.evaluation__section-title {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  margin: 0;
+  color: var(--cp-ink);
+  font-size: 1rem;
+  font-weight: 800;
+}
+.evaluation__section-title .material-icons { color: var(--cp-teal); font-size: 1.15rem; }
+.evaluation__upload > .evaluation__section-title { padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
+.evaluation__upload-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; padding: 1.2rem 1.3rem; }
+.evaluation__upload-field { width: min(100%, 410px); margin: 0; }
+.evaluation__file-input { display: block; width: 100%; min-height: 42px; padding: .45rem .6rem; border: 1px solid var(--cp-border-2); border-radius: var(--r-sm); color: var(--cp-ink-2); background: var(--cp-surface-2); }
+
+.evaluation__files-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.3rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+}
+.evaluation__record-count { display: inline-flex; align-items: center; min-height: 1.85rem; padding: .15rem .7rem; border-radius: 999px; color: #fff; background: #087b7c; font-size: .78rem; font-weight: 800; white-space: nowrap; }
+.evaluation__files .table-container { overflow-x: auto; }
+.evaluation__files .admin-table { min-width: 820px; }
+.evaluation__sort-link { display: inline-flex; align-items: center; gap: .2rem; color: inherit; }.evaluation__sort-link:hover { color: var(--cp-teal); }
+.evaluation__sort-arrow { font-size: .95rem; opacity: .45; }.evaluation__sort-arrow.is-active { opacity: 1; color: var(--cp-teal); }
+.evaluation__action-col, .evaluation__center { width: 64px; text-align: center; }.evaluation__file-icon { margin-right: .3rem; color: var(--cp-teal); font-size: 1.05rem; vertical-align: middle; }.evaluation__muted { color: var(--cp-muted); font-size: .82rem; }
+.evaluation__icon-button { display: inline-grid; width: 32px; min-height: 32px; padding: 0; place-items: center; }.evaluation__icon-button .material-icons { margin: 0; font-size: 1rem; }
+
+.evaluation__filter { width: min(100%, 760px); }
+.evaluation__filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; padding: 1.2rem 1.3rem; }
+.evaluation__filter-field { width: min(100%, 220px); margin: 0; }.evaluation__filter-field .filter-input { width: 100%; min-height: 42px; }
+.evaluation__export { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; padding: .9rem 1.1rem; }
+.evaluation__export-label { display: inline-flex; align-items: center; gap: .4rem; margin-right: .15rem; color: var(--cp-ink); font-size: .88rem; font-weight: 800; }.evaluation__export-label .material-icons { color: var(--cp-teal); font-size: 1.1rem; }.evaluation__period { margin-left: auto; color: var(--cp-muted); font-size: .78rem; }
+
+.evaluation__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: .8rem; margin: 0 0 1.2rem; }
+.evaluation__kpi { min-height: 110px; padding: 1rem; border: 1px solid var(--cp-border); border-top: 3px solid var(--cp-teal); border-radius: var(--r-md); text-align: center; background: var(--cp-surface); box-shadow: var(--shadow-sm); }
+.evaluation__kpi-value { color: var(--cp-ink); font-family: var(--font-display); font-size: 2.45rem; font-weight: 700; line-height: .9; }.evaluation__kpi-label { margin-top: .45rem; color: var(--cp-ink-2); font-size: .74rem; font-weight: 700; }.evaluation__kpi-note { margin-top: .2rem; color: var(--cp-muted); font-size: .68rem; line-height: 1.3; }
+.evaluation__kpi:last-child { border-top-color: var(--cp-coral); }.evaluation__kpi:last-child .evaluation__kpi-value { color: var(--cp-coral); }
+
+.evaluation__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }
+.evaluation__card { padding: 1.1rem 1.2rem; }
+.evaluation__card h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .95rem; padding-bottom: .65rem; border-bottom: 1px solid var(--cp-border); color: var(--cp-ink); font-size: .93rem; font-weight: 800; }.evaluation__card h3 .material-icons { color: var(--cp-teal); font-size: 1.1rem; }.evaluation__card-title--plain { margin: 0 !important; padding: 0 !important; border: 0 !important; }.evaluation__icon--danger { color: var(--cp-coral) !important; }.evaluation__icon--warning { color: #b87300 !important; }
+.evaluation__bar-row { display: flex; align-items: center; gap: .65rem; min-height: 22px; margin: 0 0 .48rem; font-size: .82rem; }.evaluation__bar-label { flex: 0 0 145px; min-width: 0; overflow: hidden; color: var(--cp-ink-2); text-overflow: ellipsis; white-space: nowrap; }.evaluation__bar-label--wide { flex-basis: 190px; font-size: .77rem; }.evaluation__bar-track { flex: 1 1 auto; min-width: 60px; height: 13px; overflow: hidden; border-radius: 999px; background: #dceff2; box-shadow: inset 0 1px 1px rgba(7,24,46,.05); }.evaluation__bar-fill { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #087b7c, #2596be); transition: width .35s ease; }.evaluation__bar-fill--red { background: linear-gradient(90deg, #c93552, #8d1f35); }.evaluation__bar-fill--orange { background: linear-gradient(90deg, #d88a00, #a86000); }.evaluation__bar-count { flex: 0 0 2.15rem; color: var(--cp-ink); font-size: .8rem; font-weight: 800; text-align: right; }.evaluation__bar-count--danger { color: var(--cp-coral); }.evaluation__no-data { color: var(--cp-muted); font-size: .84rem; font-style: italic; }.evaluation__summary-text { margin: 0 0 .85rem; color: var(--cp-ink-2); font-size: .85rem; }.evaluation__section-note { color: var(--cp-muted); font-size: .72rem; font-weight: 600; }.evaluation__age-range { margin: .6rem 0 0; color: var(--cp-muted); font-size: .76rem; }.evaluation__pills { display: flex; flex-wrap: wrap; gap: .42rem; }.evaluation__pill { display: inline-block; padding: .18rem .52rem; border-radius: 999px; color: #07666b; background: #dff3f3; font-size: .72rem; font-weight: 700; }.evaluation__pill--positive { color: #8d1f35; background: #f8e0e5; }
+.evaluation__raw-data { margin-top: 1.45rem; }.evaluation__card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }.evaluation__table-scroll { max-height: 400px; overflow: auto; border: 1px solid var(--cp-border); border-radius: var(--r-sm); }.evaluation__table { min-width: 1000px; font-size: .81rem; }.evaluation__table-cell { font-size: .79rem; }
+.evaluation__empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; min-height: 230px; padding: 2.5rem 1.25rem; color: var(--cp-muted); text-align: center; }.evaluation__empty-state--compact { min-height: 200px; }.evaluation__empty-icon { color: var(--cp-teal); font-size: 2.6rem !important; }.evaluation__empty-state:not(.card) { width: min(100%, 760px); border: 2px dashed var(--cp-border-2); border-radius: var(--r-md); }.evaluation__empty-icon--teal { color: var(--cp-teal); }
+@media (max-width: 900px) { .evaluation__grid { grid-template-columns: 1fr; } }
+@media (max-width: 640px) { .evaluation__header, .evaluation__files-head, .evaluation__card-head { align-items: flex-start; flex-direction: column; }.evaluation__header .btn, .evaluation__upload-form .btn, .evaluation__filter-form .btn { width: 100%; }.evaluation__upload-form, .evaluation__filter-form, .evaluation__files-head, .evaluation__upload > .evaluation__section-title { padding-left: 1rem; padding-right: 1rem; }.evaluation__upload-field, .evaluation__filter-field { width: 100%; }.evaluation__export { align-items: stretch; }.evaluation__export .btn { width: 100%; }.evaluation__period { width: 100%; margin-left: 0; }.evaluation__kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }.evaluation__card { padding: 1rem; }.evaluation__bar-label { flex-basis: 100px; }.evaluation__bar-label--wide { flex-basis: 115px; } }
+@media (prefers-reduced-motion: reduce) { .evaluation__bar-fill { transition: none; } }
+
+/* ============================================================
+   5o. INFOTEXTE — REDAKTION
+   ============================================================ */
+.infotexts-page { width: 100%; max-width: none; margin: 0; }
+.infotexts-page__header { margin-bottom: 1.35rem; }
+.infotexts-page__header .kicker { margin-bottom: .55rem; }
+.infotexts-page__title { margin: 0; color: var(--cp-ink); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.25rem); font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; }
+.infotexts-page__intro { max-width: 52rem; margin: .6rem 0 0; color: var(--cp-ink-2); }
+.infotexts-panel { width: 100%; max-width: 1440px; overflow: hidden; }
+.infotexts-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
+.infotexts-panel__header h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; }
+.infotexts-panel__header p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; }
+.infotexts-panel__icon { flex: 0 0 auto; color: var(--cp-teal); font-size: 1.3rem; }
+.infotexts-panel__body { padding: 1.15rem 1.3rem; }
+.infotexts-legend, .infotexts-item { display: grid; grid-template-columns: minmax(175px, .45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
+.infotexts-legend { padding: 0 .9rem .55rem; color: var(--cp-muted); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
+.infotexts-list { border: 1px solid var(--cp-border); border-radius: var(--r-md); overflow: hidden; }
+.infotexts-item { padding: 1rem .9rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface); }
+.infotexts-item:last-child { border-bottom: 0; }
+.infotexts-item:hover { background: #fbfefe; }
+.infotexts-item__header { min-width: 0; padding: .1rem .2rem; }
+.infotexts-item__header h3 { margin: 0; color: var(--cp-ink); font-size: .9rem; line-height: 1.35; }
+.infotexts-item__warning { display: inline-flex; align-items: center; gap: .28rem; margin-top: .55rem; color: #a12a3d; font-size: .72rem; font-weight: 800; }.infotexts-item__warning .material-icons { font-size: 1rem; }
+.infotexts-editor { display: flex; min-width: 0; flex-direction: column; align-self: start; }.infotexts-editor__label { display: none; }
+/* Quill setzt standardmäßig .ql-editor { height: 100% }. Das würde in
+   einer Grid-Zeile die Editoren bis über die folgende Zeile strecken.
+   Hier erhält jede Sprachspalte daher eine klar begrenzte, eigene Höhe. */
+.infotexts-page .ql-toolbar.ql-snow { flex: 0 0 auto; padding: .45rem .55rem; border: 1px solid var(--cp-border-2); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--cp-surface-2); }
+.infotexts-page .ql-container.ql-snow { display: flex; height: 158px; min-height: 0; flex: 0 0 158px; overflow: hidden; border: 1px solid var(--cp-border-2); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--cp-ink); background: #fff; font-family: var(--font-body); font-size: .85rem; }
+.infotexts-page .ql-editor { width: 100%; height: auto !important; min-height: 0; padding: .8rem .85rem; overflow-y: auto; line-height: 1.55; }.infotexts-page .ql-editor.ql-blank::before { color: var(--cp-muted); font-style: normal; }.infotexts-page .ql-snow .ql-stroke { stroke: var(--cp-ink-2); }.infotexts-page .ql-snow .ql-fill { fill: var(--cp-ink-2); }.infotexts-page .ql-snow .ql-picker { color: var(--cp-ink-2); }.infotexts-page .ql-toolbar button:hover .ql-stroke, .infotexts-page .ql-toolbar button.ql-active .ql-stroke { stroke: var(--cp-teal); }.infotexts-page .ql-toolbar button:hover .ql-fill, .infotexts-page .ql-toolbar button.ql-active .ql-fill { fill: var(--cp-teal); }.infotexts-page .ql-snow .ql-picker.ql-background .ql-picker-label::before, .infotexts-page .ql-snow .ql-picker.ql-background .ql-picker-item::before { content: 'A'; }
+.infotexts-panel__footer { display: flex; justify-content: flex-end; gap: .65rem; padding: .9rem 1.3rem; border-top: 1px solid var(--cp-border); background: var(--cp-surface-2); }
+@media (max-width: 900px) { .infotexts-legend { display: none; }.infotexts-item { grid-template-columns: 1fr; gap: .8rem; }.infotexts-item__header { padding: 0; }.infotexts-editor { display: grid; gap: .35rem; }.infotexts-editor__label { display: block; color: var(--cp-ink-2); font-size: .78rem; font-weight: 800; } }
+@media (max-width: 600px) { .infotexts-panel__header, .infotexts-panel__footer { padding-left: 1rem; padding-right: 1rem; }.infotexts-panel__body { padding: 1rem; }.infotexts-item { padding: 1rem; }.infotexts-panel__footer .btn { width: 100%; }.infotexts-page .ql-toolbar.ql-snow { overflow-x: auto; white-space: nowrap; } }
+
+/* ============================================================
+   5p. NACHRICHTEN — TEAM-POSTEINGANG
+   ============================================================ */
+.messages-page { width:100%; max-width:1120px; margin:0; }
+.messages-page__header { margin-bottom:1.35rem; }.messages-page__header .kicker { margin-bottom:.55rem; }.messages-page__title { margin:0; color:var(--cp-ink); font-family:var(--font-display); font-size:clamp(2.15rem,4vw,3.25rem); font-weight:700; line-height:.9; letter-spacing:-.012em; text-transform:uppercase; }.messages-page__intro { max-width:48rem; margin:.6rem 0 0; color:var(--cp-ink-2); }
+.messages-cleanup { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding:1rem 1.25rem; }.messages-cleanup__copy { display:flex; align-items:center; gap:.75rem; }.messages-cleanup__icon { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius:50%; color:var(--cp-coral); background:rgba(201,53,82,.1); }.messages-cleanup h2 { margin:0; color:var(--cp-ink); font-size:.95rem; }.messages-cleanup p { margin:.15rem 0 0; color:var(--cp-muted); font-size:.8rem; }.messages-cleanup form { margin:0; }
+.messages-compose, .messages-inbox { margin-bottom:1.25rem; overflow:hidden; }.messages-panel__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.3rem; border-bottom:1px solid var(--cp-border); background:var(--cp-surface-2); }.messages-panel__header h2 { margin:0; color:var(--cp-ink); font-size:1rem; font-weight:800; }.messages-panel__header p { margin:.2rem 0 0; color:var(--cp-muted); font-size:.8rem; }.messages-panel__icon { flex:0 0 auto; color:var(--cp-teal); font-size:1.25rem; }
+.messages-compose__form { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.38fr); gap:1.15rem 1.25rem; padding:1.25rem 1.3rem; }.messages-recipients { grid-column:1 / -1; margin:0; padding:0; border:0; }.messages-recipients legend { margin:0 0 .55rem; color:var(--cp-ink-2); font-size:.875rem; font-weight:700; }.messages-recipient-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.55rem; }.messages-recipient { display:flex; align-items:center; gap:.55rem; min-height:42px; padding:.55rem .7rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); color:var(--cp-ink-2); background:var(--cp-surface); cursor:pointer; font-size:.86rem; font-weight:700; }.messages-recipient:hover { border-color:var(--cp-teal); background:#f7fcfc; }.messages-recipient--all { color:var(--cp-ink); }.messages-recipient input { width:1rem; height:1rem; margin:0; accent-color:var(--cp-teal); }.messages-recipient small { color:var(--cp-muted); font-size:.72rem; font-weight:600; }.messages-compose__subject, .messages-compose__body { margin:0; }.messages-compose__body { grid-column:1 / -1; }.messages-compose textarea { min-height:140px; resize:vertical; }.messages-compose__actions { display:flex; justify-content:flex-end; grid-column:1 / -1; }
+.messages-list { display:grid; }.message-card { border-bottom:1px solid var(--cp-border); background:var(--cp-surface); }.message-card:last-child { border-bottom:0; }.message-card.unread { box-shadow:inset 4px 0 0 #d7ad32; background:linear-gradient(90deg,#fff9d8 0%,var(--cp-surface) 24%); }.message-header { display:flex; width:100%; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.3rem; border:0; color:var(--cp-ink); background:transparent; cursor:pointer; font:inherit; text-align:left; transition:background var(--ease); }.message-header:hover { background:var(--cp-surface-2); }.message-subject { display:flex; flex:1; align-items:center; gap:.55rem; min-width:0; font-weight:700; }.subject-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.unread-dot { display:block; width:.55rem; height:.55rem; flex:0 0 auto; border-radius:50%; background:#d7ad32; box-shadow:0 0 0 3px rgba(215,173,50,.18); }.reply-count { display:inline-flex; align-items:center; gap:.25rem; padding:.14rem .45rem; border-radius:999px; color:#176b8a; background:#deeff5; font-size:.72rem; font-weight:800; }.reply-count .material-icons { font-size:.9rem; }.message-meta { display:flex; align-items:center; justify-content:flex-end; gap:.65rem; flex:0 0 auto; color:var(--cp-muted); font-size:.77rem; }.sender { padding:.16rem .5rem; border-radius:999px; color:#07666b; background:#dff3f3; font-size:.75rem; font-weight:800; }.expand-icon { color:var(--cp-muted); transition:transform var(--ease); }.expand-icon.rotated { transform:rotate(180deg); }
+.message-body { padding:0 1.3rem 1.3rem; border-top:1px solid var(--cp-border); }.message-content { margin-top:1rem; padding:1rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); color:var(--cp-ink-2); background:var(--cp-surface-2); line-height:1.6; }.message-info { margin: .8rem 0 0; color:var(--cp-muted); font-size:.78rem; }.message-info strong { color:var(--cp-ink-2); }.message-thread-actions { margin-top:.85rem; }.replies-section { margin-top:1rem; padding:1rem; border:1px solid var(--cp-border); border-radius:var(--r-md); background:var(--cp-surface); }.replies-header { display:flex; align-items:center; gap:.4rem; margin:0 0 .7rem; color:var(--cp-ink); font-size:.88rem; }.replies-header .material-icons { color:var(--cp-teal); font-size:1rem; }.reply-item { padding:.75rem .85rem; border-left:3px solid var(--cp-teal); border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--cp-surface-2); }.reply-item + .reply-item { margin-top:.55rem; }.reply-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.3rem; color:var(--cp-ink); font-size:.8rem; }.reply-time { color:var(--cp-muted); font-size:.74rem; }.reply-body { color:var(--cp-ink-2); font-size:.85rem; line-height:1.5; }.reply-form-section { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--cp-border); }.reply-form { display:grid; gap:.65rem; }.reply-form__label { color:var(--cp-ink-2); font-size:.82rem; font-weight:800; }.reply-textarea { min-height:84px !important; resize:vertical; }.reply-buttons { display:flex; flex-wrap:wrap; gap:.55rem; }.reply-hint { display:flex; align-items:flex-start; gap:.4rem; margin:0; padding:.65rem .75rem; border-left:3px solid var(--cp-teal); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--cp-muted); background:rgba(8,123,124,.07); font-size:.75rem; line-height:1.45; }.reply-hint .material-icons { flex:0 0 auto; color:var(--cp-teal); font-size:1rem; }.messages-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; min-height:230px; padding:2rem; color:var(--cp-muted); text-align:center; }.messages-empty-state .material-icons { color:var(--cp-teal); font-size:2.6rem; }.messages-empty-state p { margin:0; }
+@media (max-width:700px) { .messages-cleanup, .messages-panel__header { align-items:flex-start; flex-direction:column; }.messages-cleanup form, .messages-cleanup .btn { width:100%; }.messages-compose__form { grid-template-columns:1fr; padding:1rem; }.messages-compose__subject, .messages-compose__body, .messages-compose__actions { grid-column:auto; }.messages-compose__actions .btn { width:100%; }.message-header { align-items:flex-start; flex-direction:column; }.message-meta { width:100%; justify-content:flex-start; flex-wrap:wrap; }.message-body { padding:0 1rem 1rem; }.reply-buttons .btn { flex:1 1 180px; } }
+
+/* ============================================================
+   USER-NACHRICHTEN — ADMIN
+   An den zentralen style.css-Bereich anhängen.
+   ============================================================ */
+.patient-messages {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0;
+}
+
+.patient-messages__header {
+  margin-bottom: 1.35rem;
+}
+
+.patient-messages__header .kicker {
+  margin-bottom: .55rem;
+}
+
+.patient-messages__header .page-subtitle {
+  max-width: 48rem;
+  margin: .6rem 0 0;
+}
+
+.patient-messages__conversations,
+.patient-messages__compose {
+  margin-bottom: 1.25rem;
+  overflow: hidden;
+}
+
+.patient-messages__panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.3rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+}
+
+.patient-messages__panel-header h2 {
+  margin: 0;
+  color: var(--cp-ink);
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.patient-messages__panel-header p {
+  margin: .2rem 0 0;
+  color: var(--cp-muted);
+  font-size: .8rem;
+}
+
+.patient-messages__panel-icon {
+  flex: 0 0 auto;
+  color: var(--cp-teal);
+  font-size: 1.25rem;
+}
+
+.patient-messages__table-wrap {
+  overflow-x: auto;
+  border: 0;
+  border-radius: 0;
+}
+
+.patient-messages__table {
+  min-width: 940px;
+}
+
+.patient-messages__table th,
+.patient-messages__table td {
+  vertical-align: middle;
+}
+
+.patient-messages__center {
+  width: 120px;
+  text-align: center;
+}
+
+.patient-messages__code {
+  width: 100px;
+  color: var(--cp-teal);
+  letter-spacing: .04em;
+}
+
+.patient-messages__preview-cell {
+  min-width: 360px;
+  max-width: 520px;
+}
+
+.patient-messages__preview h3 {
+  margin: 0 0 .25rem;
+  overflow: hidden;
+  color: var(--cp-ink);
+  font-size: .86rem;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.patient-messages__preview p {
+  max-width: 490px;
+  margin: 0 0 .28rem;
+  overflow: hidden;
+  color: var(--cp-ink-2);
+  font-size: .8rem;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.patient-messages__preview time {
+  color: var(--cp-muted);
+  font-size: .72rem;
+}
+
+.patient-messages__sender-badge {
+  gap: .28rem;
+}
+
+.patient-messages__sender-badge .material-icons {
+  font-size: .95rem;
+}
+
+.patient-messages__open-button {
+  min-width: 96px;
+}
+
+.patient-messages__empty {
+  min-height: 250px;
+}
+
+.patient-messages__empty h3 {
+  margin: 0;
+  color: var(--cp-ink-2);
+  font-family: var(--font-display);
+  font-size: 1.55rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.patient-messages__empty p {
+  margin: 0;
+  color: var(--cp-muted);
+  font-size: .86rem;
+}
+
+.patient-messages__form {
+  display: grid;
+  grid-template-columns: minmax(150px, 180px) minmax(240px, 1fr);
+  gap: 1rem 1.15rem;
+  padding: 1.25rem 1.3rem;
+}
+
+.patient-messages__form .form-group {
+  margin: 0;
+}
+
+.patient-messages__body-field,
+.patient-messages__form-actions {
+  grid-column: 1 / -1;
+}
+
+.patient-messages__body-field textarea {
+  min-height: 170px;
+  resize: vertical;
+}
+
+.patient-messages__form-actions {
+  display: flex;
+  justify-content: flex-start;
+}
+
+@media (max-width: 640px) {
+  .patient-messages__panel-header {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+  .patient-messages__form {
+    grid-template-columns: 1fr;
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+  .patient-messages__body-field,
+  .patient-messages__form-actions {
+    grid-column: auto;
+  }
+
+  .patient-messages__form-actions,
+  .patient-messages__form-actions .btn {
+    width: 100%;
+  }
+}
+
+/* ============================================================
+   USER-NACHRICHTEN — KONVERSATION
+   An den zentralen style.css-Bereich anhängen.
+   ============================================================ */
+.patient-conversation { width:100%; max-width:1280px; margin:0; }
+
+.patient-conversation__header {
+  display:flex;
+  align-items:flex-end;
+  justify-content:space-between;
+  gap:1.25rem;
+  margin-bottom:1.35rem;
+}
+.patient-conversation__header .kicker { margin-bottom:.55rem; }
+.patient-conversation__header .page-title { margin:0; }
+
+.patient-conversation__back {
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:.45rem;
+  min-height:2.35rem;
+  padding:.55rem .9rem;
+  border:1px solid rgba(37,150,190,.32);
+  border-radius:var(--r-sm);
+  color:#176b8a;
+  background:rgba(37,150,190,.08);
+  font-size:.8rem;
+  font-weight:800;
+  white-space:nowrap;
+  transition:transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
+}
+.patient-conversation__back:hover {
+  color:#0b536d;
+  background:rgba(37,150,190,.16);
+  border-color:rgba(37,150,190,.55);
+  transform:translateX(-2px);
+}
+.patient-conversation__back:focus-visible {
+  outline:3px solid rgba(82,224,207,.45);
+  outline-offset:3px;
+}
+.patient-conversation__back .material-icons { font-size:1.05rem; }
+
+.patient-conversation__deleted-alert {
+  display:flex;
+  align-items:flex-start;
+  gap:.6rem;
+  width:min(100%,1000px);
+  margin:0 0 1.15rem;
+  padding:.9rem 1rem;
+  border:1px solid #e8c96a;
+  border-left:4px solid #b98200;
+  border-radius:var(--r-sm);
+  color:#6c5000;
+  background:#fff8dc;
+  font-size:.85rem;
+  line-height:1.5;
+}
+.patient-conversation__deleted-alert .material-icons { flex:0 0 auto; color:#a66e00; font-size:1.15rem; }
+.patient-conversation__deleted-alert a { margin-left:.35rem; color:#805d00; font-weight:800; text-decoration:underline; }
+
+.patient-conversation__info { width:100%; margin-bottom:1.35rem; overflow:hidden; }
+.patient-conversation__panel-header {
+  display:flex;
+  align-items:flex-start;
+  justify-content:space-between;
+  gap:1rem;
+  padding:1rem 1.3rem;
+  border-bottom:1px solid var(--cp-border);
+  background:var(--cp-surface-2);
+}
+.patient-conversation__panel-header h2 { margin:0; color:var(--cp-ink); font-size:1rem; font-weight:800; }
+.patient-conversation__panel-header p { margin:.2rem 0 0; color:var(--cp-muted); font-size:.8rem; }
+.patient-conversation__panel-header > .material-icons { flex:0 0 auto; color:var(--cp-teal); font-size:1.25rem; }
+.patient-conversation__info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding:1rem 1.3rem; }
+.patient-conversation__info-grid div { display:grid; gap:.18rem; }
+.patient-conversation__info-grid span { color:var(--cp-muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
+.patient-conversation__info-grid strong { color:var(--cp-ink); font-size:.9rem; }
+
+.patient-conversation__layout {
+  display:grid;
+  grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);
+  align-items:start;
+  gap:1.5rem;
+}
+.patient-conversation__thread { min-width:0; }
+.patient-conversation__section-heading {
+  display:flex;
+  align-items:flex-end;
+  justify-content:space-between;
+  gap:1rem;
+  margin:0 0 .85rem;
+  padding:0 .15rem;
+}
+.patient-conversation__section-heading .kicker { margin-bottom:.35rem; }
+.patient-conversation__section-heading h2 { margin:0; color:var(--cp-ink); font-size:1.1rem; font-weight:800; }
+.conversation-messages { display:grid; gap:.85rem; }
+
+.patient-message {
+  overflow:hidden;
+  border:1px solid rgba(7,24,46,.14);
+  border-left:3px solid var(--cp-teal);
+  border-radius:var(--r-md);
+  background:#fff;
+  box-shadow:0 3px 12px rgba(7,24,46,.14);
+}
+.patient-message--admin { border-left-color:var(--cp-blue); }
+.patient-message__header {
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:.8rem;
+  min-height:2.8rem;
+  padding:.55rem .8rem;
+  border-bottom:1px solid rgba(7,24,46,.1);
+  background:#e7f4f6;
+}
+.patient-message__sender { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; min-width:0; color:#07182e; font-size:.78rem; }
+.patient-message__sender time { color:#527080; font-size:.7rem; }
+.patient-message__sender-icon { display:grid; width:1.5rem; height:1.5rem; place-items:center; border-radius:50%; }
+.patient-message__sender-icon .material-icons { font-size:.92rem; }
+.patient-message__sender-icon--patient { color:#087b7c; background:#dff3f3; }
+.patient-message__sender-icon--admin { color:#176b8a; background:#deeff5; }
+.patient-message__actions { display:flex; align-items:center; gap:.4rem; flex:0 0 auto; }
+.patient-message__actions form { margin:0; }
+.patient-message__delete { min-height:1.9rem; padding:.25rem .65rem; border:1px solid rgba(240,74,103,.45); border-radius:var(--r-sm); color:#c73654; background:#fff; font-size:.72rem; font-weight:800; }
+.patient-message__delete:hover { color:#a82c46; border-color:rgba(240,74,103,.7); background:#fff5f7; }
+.patient-message__delete .material-icons { font-size:.95rem; }
+.patient-message__body { padding:.85rem 1rem 1rem; color:#07182e; background:#fff; }
+.patient-message__subject { margin:0 0 .45rem; color:#07182e; font-size:.92rem; font-weight:800; }
+.patient-message__text { margin:0; color:#24465a; white-space:pre-wrap; line-height:1.55; }
+.patient-message__reply { margin-top:1rem; padding-top:.9rem; border-top:1px solid rgba(7,24,46,.1); }
+.patient-message__reply-toggle { min-width:120px; }
+.patient-message__reply-form { margin-top:1rem; padding:1rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); background:var(--cp-surface-2); }
+.patient-message__reply-form[hidden] { display:none; }
+.patient-message__reply-form .form-group { margin-bottom:.8rem; }
+.patient-message__reply-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
+
+.patient-conversation__sidebar { position:sticky; top:1.25rem; display:grid; gap:1rem; }
+.patient-conversation__compose,.patient-conversation__actions { overflow:hidden; }
+.patient-conversation__compose-form { display:grid; gap:.9rem; padding:1.1rem 1.3rem 1.3rem; }
+.patient-conversation__compose-form .form-group { margin:0; }
+.patient-conversation__compose-form textarea { min-height:150px; resize:vertical; }
+.patient-conversation__send { width:100%; }
+.patient-conversation__actions-body { display:grid; gap:.75rem; padding:1.1rem 1.3rem 1.2rem; }
+.patient-conversation__deleted-link { width:100%; }
+.patient-conversation__stats { margin:0; color:var(--cp-muted); font-size:.78rem; line-height:1.6; }
+.patient-conversation__stats strong { color:var(--cp-ink); }
+
+.patient-conversation__empty { min-height:230px; border:1px dashed var(--cp-border-2); border-radius:var(--r-md); background:var(--cp-surface); }
+.patient-conversation__empty h3 { margin:0; color:var(--cp-ink-2); font-family:var(--font-display); font-size:1.5rem; text-transform:uppercase; }
+.patient-conversation__empty p { margin:0; color:var(--cp-muted); font-size:.85rem; }
+
+@media (max-width:900px) {
+  .patient-conversation__layout { grid-template-columns:1fr; }
+  .patient-conversation__sidebar { position:static; }
+}
+@media (max-width:640px) {
+  .patient-conversation__header { align-items:flex-start; flex-direction:column; }
+  .patient-conversation__back { align-self:flex-start; width:auto; }
+  .patient-conversation__info-grid { grid-template-columns:1fr; padding:1rem; }
+  .patient-conversation__panel-header { padding-right:1rem; padding-left:1rem; }
+  .patient-message__header { align-items:flex-start; flex-direction:column; }
+  .patient-message__actions { width:100%; justify-content:space-between; }
+  .patient-message__body { padding:.9rem; }
+  .patient-conversation__compose-form,.patient-conversation__actions-body { padding-right:1rem; padding-left:1rem; }
+  .patient-conversation__reply-actions .btn { flex:1 1 140px; }
+}
+
+/* ============================================================
+   ADMIN — SYSTEM-LOGS
+   An den zentralen style.css-Bereich anhangen.
+   ============================================================ */
+.admin-logs {
+  width: 100%;
+  max-width: none;
+  margin: 0;
+}
+
+.admin-logs__header {
+  margin: 0 0 1.35rem;
+}
+
+.admin-logs__header .kicker {
+  margin-bottom: .55rem;
+}
+
+.admin-logs__header .page-title {
+  margin-bottom: .45rem;
+}
+
+.admin-logs__header .page-subtitle {
+  margin: 0;
+}
+
+.admin-logs__panel {
+  width: 100%;
+  overflow: hidden;
+}
+
+.admin-logs__panel-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.35rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface-2);
+}
+
+.admin-logs__panel-header h2 {
+  margin: 0;
+  color: var(--cp-ink);
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.admin-logs__panel-header p {
+  margin: .2rem 0 0;
+  color: var(--cp-muted);
+  font-size: .8rem;
+}
+
+.admin-logs__panel-header > .material-icons {
+  flex: 0 0 auto;
+  color: var(--cp-teal);
+  font-size: 1.3rem;
+}
+
+.admin-logs__filters {
+  display: grid;
+  grid-template-columns: minmax(150px, .34fr) minmax(240px, 1fr) auto;
+  align-items: end;
+  gap: 1rem;
+  padding: 1.2rem 1.35rem;
+  border-bottom: 1px solid var(--cp-border);
+  background: var(--cp-surface);
+}
+
+.admin-logs__filters .form-group {
+  min-width: 0;
+  margin: 0;
+}
+
+.admin-logs__filter-actions {
+  display: flex;
+  align-items: flex-end;
+  gap: .55rem;
+}
+
+.admin-logs__filter-actions .btn {
+  min-width: 110px;
+}
+
+.admin-logs__table-wrap {
+  overflow-x: auto;
+  border: 0;
+  border-radius: 0;
+}
+
+.admin-logs__table {
+  min-width: 680px;
+  table-layout: fixed;
+}
+
+.admin-logs__table thead th {
+  padding: .8rem 1rem;
+  color: var(--cp-muted);
+  font-size: .7rem;
+  letter-spacing: .07em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.admin-logs__table thead th:nth-child(1) { width: 225px; }
+.admin-logs__table thead th:nth-child(2) { width: 125px; }
+
+.admin-logs__table tbody tr {
+  border-bottom: 1px solid var(--cp-border);
+  transition: background var(--ease);
+}
+
+.admin-logs__table tbody tr:last-child {
+  border-bottom: 0;
+}
+
+.admin-logs__table tbody tr:hover {
+  background: var(--cp-surface-2);
+}
+
+.admin-logs__table tbody td {
+  padding: .78rem 1rem;
+  vertical-align: top;
+}
+
+.admin-logs__row--info { background: #f6faf7; }
+.admin-logs__row--warning { background: #fff8e6; }
+.admin-logs__row--error { background: #fff4f3; }
+.admin-logs__row--critical { background: #ffe8ef; }
+
+.admin-logs__time {
+  color: var(--cp-muted);
+  font-size: .78rem;
+  white-space: nowrap;
+}
+
+.admin-logs__level {
+  white-space: nowrap;
+}
+
+.admin-logs__level-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.65rem;
+  padding: .2rem .55rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: .72rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.admin-logs__level-badge--info {
+  color: #087b7c;
+  border-color: rgba(8, 123, 124, .22);
+  background: #e5f5f3;
+}
+
+.admin-logs__level-badge--warning {
+  color: #956300;
+  border-color: rgba(149, 99, 0, .25);
+  background: #fff1c7;
+}
+
+.admin-logs__level-badge--error {
+  color: #b52e48;
+  border-color: rgba(197, 53, 82, .25);
+  background: #fde6e9;
+}
+
+.admin-logs__level-badge--critical {
+  color: #8e2443;
+  border-color: rgba(142, 36, 67, .28);
+  background: #f8d8e2;
+}
+
+.admin-logs__level-badge--unknown {
+  color: var(--cp-muted);
+  border-color: var(--cp-border);
+  background: var(--cp-surface-2);
+}
+
+.admin-logs__message {
+  color: var(--cp-ink-2);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.admin-logs__empty {
+  display: grid;
+  justify-items: center;
+  gap: .35rem;
+  padding: 2.5rem 1.25rem;
+  color: var(--cp-muted);
+  text-align: center;
+}
+
+.admin-logs__empty .material-icons {
+  margin-bottom: .2rem;
+  color: var(--cp-teal);
+  font-size: 2rem;
+}
+
+.admin-logs__empty strong {
+  color: var(--cp-ink);
+  font-size: .9rem;
+}
+
+.admin-logs__empty span:last-child {
+  font-size: .8rem;
+}
+
+.admin-logs__footer {
+  display: flex;
+  align-items: flex-start;
+  gap: .45rem;
+  padding: .85rem 1.35rem 1rem;
+  border-top: 1px solid var(--cp-border);
+  color: var(--cp-muted);
+  font-size: .78rem;
+  line-height: 1.45;
+}
+
+.admin-logs__footer .material-icons {
+  flex: 0 0 auto;
+  margin-top: .05rem;
+  color: var(--cp-blue);
+  font-size: 1rem;
+}
+
+@media (max-width: 720px) {
+  .admin-logs__filters {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .admin-logs__filter-actions,
+  .admin-logs__filter-actions .btn {
+    width: 100%;
+  }
+
+  .admin-logs__table {
+    min-width: 620px;
+  }
+
+  .admin-logs__table thead th:nth-child(1) {
+    width: 190px;
+  }
+
+  .admin-logs__panel-header,
+  .admin-logs__filters,
+  .admin-logs__footer {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+}
+
+/* ============================================================
+   BERATUNG — DASHBOARD
+   An den zentralen style.css-Bereich anhangen.
+   ============================================================ */
+.beratung-dashboard { width:100%; max-width:none; margin:0; }
+.beratung-dashboard__header { margin:0 0 1.35rem; }
+.beratung-dashboard__header .kicker { margin-bottom:.55rem; }
+.beratung-dashboard__header .page-title { margin-bottom:.45rem; }
+.beratung-dashboard__header .page-subtitle { margin:0; }
+
+.beratung-filter { margin-bottom:1.25rem; overflow:hidden; }
+.beratung-filter__header {
+  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
+  padding:1rem 1.35rem; border-bottom:1px solid var(--cp-border); background:var(--cp-surface-2);
+}
+.beratung-filter__header h2 { margin:0; color:var(--cp-ink); font-size:1rem; font-weight:800; }
+.beratung-filter__header p { margin:.2rem 0 0; color:var(--cp-muted); font-size:.8rem; }
+.beratung-filter__header > .material-icons { color:var(--cp-teal); font-size:1.3rem; }
+.beratung-filter__body {
+  display:grid;
+  grid-template-columns:180px 220px auto minmax(320px,1fr);
+  align-items:end;
+  gap:1rem;
+  padding:1.15rem 1.35rem 1.25rem;
+}
+.beratung-filter__body .form-group { min-width:0; margin:0; }
+.beratung-filter__field--date { max-width:220px; }
+.beratung-filter__field--code { max-width:270px; }
+.beratung-filter__actions { display:grid; gap:.45rem; margin:0; }
+.beratung-filter__action-label { display:block; min-height:18px; color:var(--cp-ink-2); font-size:.875rem; font-weight:600; line-height:18px; }
+.beratung-filter__action-buttons { display:flex; flex-wrap:nowrap; gap:.5rem; }
+.beratung-filter__action-buttons .btn { min-height:42px; }
+.beratung-filter__checks {
+  display:flex;
+  align-items:stretch;
+  justify-content:flex-end;
+  gap:.55rem;
+  min-height:42px;
+}
+.beratung-check {
+  display:grid;
+  grid-template-columns:auto 1fr;
+  align-items:center;
+  gap:.5rem;
+  min-width:160px;
+  padding:.45rem .65rem;
+  border:1px solid var(--cp-border);
+  border-radius:var(--r-sm);
+  color:var(--cp-ink-2);
+  background:var(--cp-surface-2);
+  font-size:.75rem;
+  line-height:1.3;
+  cursor:pointer;
+  transition:border-color var(--ease), background var(--ease), box-shadow var(--ease);
+}
+.beratung-check:hover { border-color:rgba(8,123,124,.35); background:#e1f1f3; }
+.beratung-check:has(input:checked) { border-color:rgba(8,123,124,.38); background:#e1f4f1; box-shadow:inset 3px 0 0 var(--cp-teal); }
+.beratung-check input { width:1rem; height:1rem; accent-color:var(--cp-teal); }
+.beratung-check strong { display:block; color:var(--cp-ink); font-weight:800; }
+
+.beratung-appointments { width:100%; }
+.beratung-appointments__toolbar { display:flex; align-items:center; min-height:42px; margin:0 0 .7rem; }
+.beratung-appointments__table { position:relative; overflow:hidden; }
+.beratung-table { min-width:980px; table-layout:fixed; }
+.beratung-table thead th { padding:.8rem .9rem; }
+.beratung-table thead th:nth-child(1) { width:10%; }
+.beratung-table thead th:nth-child(2) { width:12%; }
+.beratung-table thead th:nth-child(3) { width:11%; }
+.beratung-table thead th:nth-child(4) { width:42%; }
+.beratung-table thead th:nth-child(5) { width:13%; }
+.beratung-table thead th:nth-child(6) { width:12%; }
+.beratung-table tbody td { padding:.78rem .9rem; vertical-align:middle; }
+.beratung-table__code { color:var(--cp-teal) !important; font-weight:800; letter-spacing:.04em; }
+.beratung-table__time { color:var(--cp-ink) !important; font-weight:700; white-space:nowrap; }
+.beratung-table__consultant { color:var(--cp-muted); font-size:.78rem; }
+
+.status-navigation-cell { min-width:430px; }
+.status-nav-container {
+  display:grid;
+  grid-template-columns:minmax(88px,1fr) minmax(205px,1.55fr) minmax(88px,1fr);
+  align-items:center;
+  gap:.55rem;
+  width:100%;
+  max-width:510px;
+  margin:0 auto;
+}
+.status-nav__current {
+  display:grid;
+  justify-items:center;
+  gap:.22rem;
+  min-width:0;
+}
+.status-nav__eyebrow {
+  color:var(--cp-muted);
+  font-size:.61rem;
+  font-weight:800;
+  letter-spacing:.08em;
+  line-height:1;
+  text-transform:uppercase;
+}
+.status-arrow {
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:.25rem;
+  min-height:30px;
+  padding:.3rem .48rem;
+  border:1px solid rgba(8,123,124,.3);
+  border-radius:var(--r-sm);
+  color:var(--cp-teal);
+  background:rgba(8,123,124,.08);
+  cursor:pointer;
+  font-size:.68rem;
+  font-weight:800;
+  line-height:1;
+  white-space:nowrap;
+  transition:background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), opacity var(--ease);
+}
+.status-arrow:hover:not(:disabled) { color:#fff; background:var(--cp-teal); border-color:var(--cp-teal); transform:translateY(-1px); }
+.status-arrow:disabled, .status-arrow.disabled { opacity:.3; cursor:not-allowed; }
+.status-arrow.saving { opacity:.55; pointer-events:none; animation:beratung-pulse .8s ease-in-out infinite alternate; }
+.status-arrow .material-icons { font-size:1.05rem; }
+.status-arrow__label { font-size:.67rem; }
+.status-text {
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:.3rem;
+  width:100%;
+  min-width:0;
+  min-height:30px;
+  padding:.34rem .55rem;
+  border:1px solid transparent;
+  border-radius:999px;
+  font-size:.75rem;
+  font-weight:800;
+  line-height:1.25;
+  text-align:center;
+  white-space:nowrap;
+}
+.status-text__icon { font-size:.8rem; line-height:1; }
+.status-noch_nicht_erschienen { color:#7a4300; border-color:#e4a62a; background:#ffd36a; box-shadow:0 2px 7px rgba(214,145,0,.18); }
+.status-fuellt_fragebogen_aus { color:#075879; border-color:#55b9dc; background:#9cdef3; box-shadow:0 2px 7px rgba(37,150,190,.18); }
+.status-bereit_fuer_beratung { color:#075f60; border-color:#39b9a8; background:#8de1d4; box-shadow:0 2px 7px rgba(8,123,124,.18); }
+.status-in_beratung { color:#4b3588; border-color:#a995e8; background:#c9baf7; box-shadow:0 2px 7px rgba(95,74,155,.18); }
+.status-beratung_beendet { color:#3f535e; border-color:#9eafb8; background:#cbd8dd; box-shadow:0 2px 7px rgba(82,107,123,.16); }
+.status-is-changing { animation:beratung-status-change .25s ease-out; }
+@keyframes beratung-status-change { 50% { transform:scale(1.04); } }
+@keyframes beratung-pulse { from { opacity:.45; } to { opacity:.9; } }
+
+.overview-btn,
+.beratung-overview-btn {
+  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:34px;
+  padding:.42rem .78rem; border:1px solid #087b7c; border-radius:var(--r-sm);
+  color:#075f60; background:#b9eee7; box-shadow:0 2px 7px rgba(8,123,124,.14);
+  font-size:.76rem; font-weight:800; line-height:1.2; text-decoration:none; white-space:nowrap;
+  transition:background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
+}
+.overview-btn:hover,
+.beratung-overview-btn:hover { color:#fff; background:#087b7c; border-color:#087b7c; box-shadow:0 5px 12px rgba(8,123,124,.24); transform:translateY(-1px); }
+.overview-btn:focus-visible,
+.beratung-overview-btn:focus-visible { outline:3px solid rgba(82,224,207,.5); outline-offset:2px; }
+.overview-btn .material-icons,
+.beratung-overview-btn .material-icons { font-size:1rem; }
+.overview-btn.disabled,
+.overview-btn.is-disabled,
+.overview-btn[aria-disabled="true"],
+.beratung-overview-btn.disabled,
+.beratung-overview-btn.is-disabled,
+.beratung-overview-btn[aria-disabled="true"] {
+  color:var(--cp-muted); border-color:var(--cp-border); background:var(--cp-surface-2);
+  box-shadow:none; cursor:not-allowed; opacity:.65;
+}
+.overview-btn.disabled:hover,
+.overview-btn.is-disabled:hover,
+.overview-btn[aria-disabled="true"]:hover,
+.beratung-overview-btn.disabled:hover,
+.beratung-overview-btn.is-disabled:hover,
+.beratung-overview-btn[aria-disabled="true"]:hover {
+  color:var(--cp-muted); background:var(--cp-surface-2); border-color:var(--cp-border); transform:none;
+}
+
+.beratung-table-loader { display:flex; align-items:center; justify-content:center; gap:.55rem; padding:1rem; border-top:1px solid var(--cp-border); color:var(--cp-muted); font-size:.82rem; background:var(--cp-surface-2); }
+.beratung-table-loader .material-icons { color:var(--cp-teal); animation:beratung-spin 1s linear infinite; }
+@keyframes beratung-spin { to { transform:rotate(360deg); } }
+.beratung-table-empty td, .beratung-table-error td { padding:2rem 1rem !important; color:var(--cp-muted); text-align:center; }
+.beratung-table-error td { color:var(--cp-coral); }
+#dashboard-tbody.is-loading { opacity:.55; transition:opacity var(--ease); }
+
+/* Pagination: aktive Seite im Beratungsbereich deutlich markieren. */
+.beratung-appointments__toolbar .pagination .active,
+.beratung-appointments__toolbar .pagination .is-current,
+.beratung-appointments__toolbar .pagination [aria-current="page"] {
+  color:#fff;
+  border-color:#087b7c;
+  background:#087b7c;
+  box-shadow:0 3px 9px rgba(8,123,124,.22);
+  font-weight:800;
+}
+.beratung-appointments__toolbar .pagination a.is-current:hover,
+.beratung-appointments__toolbar .pagination [aria-current="page"]:hover {
+  color:#fff;
+  background:#05696a;
+  border-color:#05696a;
+}
+
+@media (max-width:1100px) {
+  .beratung-filter__body { grid-template-columns:180px 220px 1fr; align-items:end; }
+  .beratung-filter__field--date, .beratung-filter__field--code { max-width:none; }
+  .beratung-filter__checks { grid-column:1 / -1; justify-content:flex-start; }
+}
+@media (max-width:720px) {
+  .beratung-filter__body { grid-template-columns:1fr; padding-right:1rem; padding-left:1rem; }
+  .beratung-filter__actions, .beratung-filter__checks { grid-column:auto; }
+  .beratung-filter__action-buttons, .beratung-filter__action-buttons .btn { width:100%; }
+  .beratung-filter__action-buttons { flex-wrap:wrap; }
+  .beratung-filter__action-buttons .btn { flex:1 1 160px; }
+  .beratung-filter__checks { align-items:stretch; flex-direction:column; }
+  .beratung-check { min-width:0; }
+  .beratung-filter__header { padding-right:1rem; padding-left:1rem; }
+  .beratung-table { min-width:900px; }
+}
+
+/* ============================================================
+   BERATUNG — PATIENT:INNENÜBERSICHT
+   Seitenbezogene Ergänzungen für beratung_patient.html
+   ============================================================ */
+
+.bp-patient-layout {
+  display:grid;
+  grid-template-columns:minmax(0, 1fr) minmax(360px, .78fr);
+  align-items:start;
+  gap:1.15rem;
+  width:100%;
+  max-width:1500px;
+}
+
+.bp-patient-layout__main,
+.bp-patient-layout__questionnaire {
+  min-width:0;
+}
+
+.bp-patient-layout__main {
+  display:flex;
+  flex-direction:column;
+  gap:1.15rem;
+}
+
+.bp-patient-layout__questionnaire {
+  position:sticky;
+  top:1rem;
+  max-height:calc(100vh - 2rem);
+  overflow:auto;
+  scrollbar-width:thin;
+}
+
+.bp-headline-row {
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:1rem;
+  margin-bottom:1.2rem;
+}
+
+.bp-headline {
+  display:flex;
+  align-items:center;
+  gap:.55rem;
+  color:var(--cp-ink);
+  font-size:1.25rem;
+  font-weight:600;
+}
+
+.bp-headline strong { color:var(--cp-teal); }
+.bp-headline-icon { color:var(--cp-teal); font-size:1.45rem; }
+
+.bp-back-link {
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:.4rem;
+  min-height:2.35rem;
+  padding:.5rem .85rem;
+  border:1px solid rgba(82,224,207,.28);
+  border-radius:var(--r-sm);
+  color:var(--cp-teal);
+  background:rgba(82,224,207,.08);
+  font-size:.8rem;
+  font-weight:800;
+  white-space:nowrap;
+  transition:background var(--ease), border-color var(--ease), transform var(--ease);
+}
+.bp-back-link:hover {
+  background:rgba(82,224,207,.16);
+  border-color:rgba(82,224,207,.55);
+  transform:translateX(-2px);
+}
+.bp-back-link .material-icons { font-size:1.05rem; }
+
+.bp-top-grid {
+  display:flex;
+  flex-direction:column;
+  gap:1.15rem;
+  margin:0;
+}
+
+.bp-card {
+  min-width:0;
+  overflow:hidden;
+  border:1px solid var(--cp-border);
+  border-radius:var(--r-lg);
+  background:var(--cp-surface);
+  box-shadow:var(--shadow-sm);
+}
+
+.bp-card-header {
+  display:flex;
+  align-items:center;
+  gap:.6rem;
+  min-height:3.1rem;
+  padding:.8rem 1rem;
+  border-bottom:1px solid var(--cp-border);
+  background:var(--cp-surface-2);
+}
+.bp-card-header h3 { color:var(--cp-ink); font-size:1rem; font-weight:800; }
+.bp-card-icon { flex:0 0 auto; color:var(--cp-teal); font-size:1.2rem; }
+.bp-card-body { padding:1rem; }
+.bp-card-header--amber { background:rgba(251,191,36,.1); }
+.bp-card-header--amber .bp-card-icon { color:#fbbf24; }
+.bp-card-header--teal { background:rgba(82,224,207,.1); }
+.bp-card-header--clickable { cursor:pointer; }
+
+.bp-card--summary .bp-card-header {
+  align-items:center;
+  flex-wrap:wrap;
+}
+.bp-card--summary .bp-card-header > div:first-of-type {
+  display:flex;
+  align-items:center;
+  gap:.5rem;
+}
+.bp-fontsize-controls { margin-left:auto; }
+.bp-fontsize-btn {
+  min-width:1.8rem;
+  min-height:1.8rem;
+  padding:.15rem .35rem;
+  border:1px solid var(--cp-border-2);
+  border-radius:var(--r-sm);
+  color:var(--cp-ink-2);
+  background:var(--cp-surface);
+  cursor:pointer;
+  font-size:.75rem;
+  font-weight:800;
+}
+.bp-fontsize-btn:hover,
+.bp-fontsize-btn.active { color:#07182e; background:var(--cp-teal); border-color:var(--cp-teal); }
+
+.bp-view-toggle {
+  display:inline-flex !important;
+  margin-left:auto !important;
+  border-color:var(--cp-border-2) !important;
+}
+.bp-toggle-btn {
+  padding:.35rem .6rem !important;
+  color:var(--cp-ink-2) !important;
+  background:var(--cp-surface) !important;
+  font-size:.72rem;
+}
+.bp-toggle-btn.active,
+.bp-toggle-btn:hover { color:#07182e !important; background:var(--cp-teal) !important; }
+.bp-toggle-btn .material-icons { font-size:1rem !important; vertical-align:middle; }
+
+.bp-summary-grid {
+  display:grid;
+  gap:.2rem;
+}
+.bp-sum-row {
+  display:grid;
+  grid-template-columns:1.2rem minmax(115px, .34fr) minmax(0, 1fr);
+  align-items:start;
+  gap:.6rem;
+  padding:.58rem .35rem;
+  border-bottom:1px solid rgba(255,255,255,.06);
+}
+.bp-sum-row:last-child { border-bottom:0; }
+.bp-sum-icon { color:var(--cp-teal); font-size:1rem; }
+.bp-sum-label { color:var(--cp-muted); font-size:.75rem; font-weight:800; }
+.bp-sum-value { min-width:0; color:var(--cp-ink-2); font-size:.82rem; line-height:1.45; }
+.bp-sum-value--quote { font-style:italic; }
+.bp-tag {
+  display:inline-flex;
+  margin:0 .25rem .2rem 0;
+  padding:.18rem .45rem;
+  border:1px solid rgba(255,255,255,.12);
+  border-radius:999px;
+  color:var(--cp-ink);
+  background:var(--cp-surface-2);
+  font-size:.72rem;
+}
+.bp-tag--teal { color:#07182e; border-color:var(--cp-teal); background:var(--cp-teal); }
+.bp-tag--blue { color:#e8f7ff; border-color:#2596be; background:rgba(37,150,190,.42); }
+.bp-tag--amber { color:#fff5d2; border-color:#d69a21; background:rgba(214,154,33,.35); }
+.bp-tag--purple { color:#f0eaff; border-color:#917de0; background:rgba(145,125,224,.32); }
+.bp-risk-badge,
+.bp-symptom-badge {
+  display:inline-flex;
+  align-items:center;
+  padding:.2rem .48rem;
+  border-radius:999px;
+  font-size:.7rem;
+  font-weight:800;
+}
+.bp-risk--red,
+.bp-symptom-badge--yes { color:#ffe9ed; background:rgba(240,74,103,.28); }
+.bp-risk--green,
+.bp-symptom-badge--no { color:#d8fff8; background:rgba(82,224,207,.22); }
+.bp-risk--amber { color:#fff1c7; background:rgba(251,191,36,.25); }
+.bp-sum-detail { display:block; margin-top:.25rem; color:var(--cp-muted); font-size:.7rem; }
+.bp-empty-state { display:flex; align-items:center; gap:.55rem; color:var(--cp-muted); font-size:.82rem; }
+
+.bp-card--hints { border-color:rgba(251,191,36,.28); }
+.bp-hints-list { display:grid; gap:.55rem; list-style:none; }
+.bp-hints-list li { display:flex; align-items:flex-start; gap:.4rem; color:#fce9b4; font-size:.8rem; line-height:1.45; }
+.bp-hint-bullet { flex:0 0 auto; color:#fbbf24; font-size:1rem; }
+
+.bp-test-grid {
+  display:grid;
+  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
+  gap:.55rem;
+}
+.bp-test-item {
+  display:grid;
+  grid-template-columns:auto 1fr auto;
+  align-items:center;
+  gap:.45rem;
+  min-width:0;
+  padding:.65rem .7rem;
+  border:1px solid var(--cp-border);
+  border-radius:var(--r-sm);
+  color:var(--cp-ink-2);
+  background:var(--cp-surface-2);
+  cursor:grab;
+  transition:border-color var(--ease), background var(--ease), transform var(--ease);
+}
+.bp-test-item:hover { border-color:rgba(82,224,207,.42); background:rgba(82,224,207,.09); transform:translateY(-1px); }
+.bp-test-item.dragging { opacity:.55; }
+.bp-test-item input { position:absolute; opacity:0; pointer-events:none; }
+.bp-test-check {
+  display:grid;
+  place-items:center;
+  width:1rem;
+  height:1rem;
+  border:1px solid var(--cp-border-2);
+  border-radius:.25rem;
+  background:var(--cp-surface);
+}
+.bp-test-item input:checked + .bp-test-check { border-color:var(--cp-teal); background:var(--cp-teal); box-shadow:inset 0 0 0 3px var(--cp-surface-2); }
+.bp-test-name { min-width:0; color:var(--cp-ink); font-size:.76rem; line-height:1.3; }
+.bp-test-price { color:var(--cp-teal); font-size:.72rem; font-weight:800; white-space:nowrap; }
+.bp-assigned-container { margin-top:1rem; }
+
+.bp-actions-bar { margin:0; }
+.bp-actions-form { display:flex; flex-wrap:wrap; gap:.65rem; }
+.bp-actions-form .icon-action-btn { display:inline-flex; align-items:center; gap:.4rem; }
+
+.bp-card--questionnaire { overflow:hidden; }
+.bp-collapsible-toggle {
+  display:block;
+  width:100%;
+  padding:0;
+  border:0;
+  color:inherit;
+  background:transparent;
+  text-align:left;
+}
+.bp-collapsible-toggle:focus-visible { outline-offset:-3px; }
+.bp-collapsible-toggle .bp-card-header { justify-content:flex-start; }
+.bp-collapsible-toggle h3 { flex:1; }
+.bp-collapse-arrow { margin-left:auto; color:var(--cp-teal); transition:transform var(--ease); }
+.bp-collapsible-toggle[aria-expanded="true"] .bp-collapse-arrow { transform:rotate(180deg); }
+.bp-collapsible-body {
+  max-height:0;
+  overflow:hidden;
+  transition:max-height .28s ease;
+}
+.bp-collapsible-body.open { max-height:none; }
+.bp-q-group { padding:1rem; border-bottom:1px solid var(--cp-border); }
+.bp-q-group:last-child { border-bottom:0; }
+.bp-q-group-title {
+  display:flex;
+  align-items:center;
+  gap:.45rem;
+  margin-bottom:.7rem;
+  color:var(--cp-teal);
+  font-size:.83rem;
+  font-weight:800;
+}
+.bp-q-group-title > .material-icons { font-size:1.05rem; }
+.bp-q-group-title .bp-symptom-badge { margin-left:auto; }
+.bp-q-grid {
+  display:grid;
+  grid-template-columns:repeat(2, minmax(0, 1fr));
+  gap:.55rem;
+}
+.bp-q-field {
+  display:grid;
+  align-content:start;
+  gap:.2rem;
+  min-width:0;
+  padding:.55rem .65rem;
+  border:1px solid rgba(255,255,255,.06);
+  border-radius:var(--r-sm);
+  background:rgba(255,255,255,.025);
+}
+.bp-q-field--wide { grid-column:1 / -1; }
+.bp-q-label { color:var(--cp-muted); font-size:.68rem; font-weight:800; }
+.bp-q-value { color:var(--cp-ink-2); font-size:.76rem; overflow-wrap:anywhere; }
+.bp-q-value--alert { color:#ffb4c1; font-weight:800; }
+.bp-q-value--hoch,
+.bp-q-value--hoch_risiko { color:#ffb4c1; font-weight:800; }
+
+@media (max-width:1120px) {
+  .bp-patient-layout { grid-template-columns:minmax(0, 1fr) minmax(320px, .68fr); }
+  .bp-q-grid { grid-template-columns:1fr; }
+  .bp-q-field--wide { grid-column:auto; }
+}
+
+@media (max-width:820px) {
+  .bp-patient-layout { display:flex; flex-direction:column; gap:1.15rem; }
+  .bp-patient-layout__main { display:contents; }
+  .bp-patient-layout__questionnaire { order:2; position:static; max-height:none; overflow:visible; }
+  .bp-top-grid { order:0; }
+  .bp-card--tests { order:1; }
+  .bp-actions-bar { order:3; }
+  .bp-headline-row { align-items:flex-start; }
+}
+
+@media (max-width:560px) {
+  .bp-headline-row { flex-direction:column; gap:.7rem; }
+  .bp-back-link { align-self:flex-start; }
+  .bp-card-header { padding:.75rem .8rem; }
+  .bp-card-body { padding:.8rem; }
+  .bp-sum-row { grid-template-columns:1.1rem 1fr; }
+  .bp-sum-value { grid-column:2; }
+  .bp-card--summary .bp-card-header > div:first-of-type,
+  .bp-fontsize-controls,
+  .bp-view-toggle { margin-left:0 !important; }
+  .bp-view-toggle { width:100%; }
+  .bp-toggle-btn { flex:1; }
+  .bp-actions-form .icon-action-btn { width:100%; justify-content:center; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bp-collapsible-body,
+  .bp-collapse-arrow,
+  .bp-back-link,
+  .bp-test-item { transition:none; }
+}