diff --git a/docs/superpowers/plans/2026-10-05-weisses-design-p1-tote-klassen.md b/docs/superpowers/plans/2026-10-05-weisses-design-p1-tote-klassen.md
new file mode 100644
index 0000000..86aea7a
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-05-weisses-design-p1-tote-klassen.md
@@ -0,0 +1,178 @@
+# P1 Task 4: tote Klassen und Übergangsschicht KOMPAT
+
+Ergebnis des Klassen-Abgleichs mit `css-klassen.mjs` (Werkzeug-Repo `$W`). Zeilenangaben beziehen sich auf `global.css` im Stand `a6877aa` (vor diesem Commit). Spec: Abschnitt „Übergangsschicht KOMPAT“.
+
+## Werkzeug
+
+`node "$W/css-klassen.mjs" "$WT" [--ohne-ausnahmen] [--mit-neu]` gibt JSON aus: `{ defined, used, dead, undefinedUsed }` und dazu `definedAt` (Name → Datei:Zeile), `prefixes`, `ausnahmen`, `laufzeit`, `neuOhneBenutzer`, `counts`.
+
+- **Definiert:** Klasse in einem Selektor in `global.css`, `chat.css`, `serverpuls.css`, `admin-areas.css` oder `pages/AdminPage.css` (Regeln in `@media` und `@container` zählen, `@keyframes` nicht). Geparst mit `postcss`.
+- **Benutzt:** Wort in einem `className`-Ausdruck in `src/**/*.jsx` (Literale, Template-Strings, Zweige von `?:`, rechte Seite von `&&`, Teile einer `+`-Kette; Bedingungen und Vergleiche wie `filter === 'all'` zählen nicht; ein Ergebnis, das an Text klebt wie `fin-todo-${x || 'info'}`, ist nur ein Namensteil). Dazu Wörter aus Zeichenketten in `src/lib/*.js` und `src/hooks/*.js`, die eine definierte Klasse sind. Geparst mit `@babel/parser`.
+- **Präfixe:** `xxx-${…}` oder `'xxx-' + …` deckt `xxx-*`.
+- **Ausnahmeliste** (entfällt mit `--ohne-ausnahmen`): `fin-neg`, `fin-fixed-off`, `legal-tone-*`, `legal-version-*`, `badge-*`, `status-*`, `ticket-tab-active`, `ui-btn-*`, `side-dot-*`, `woms-chat`, `chat-*`.
+- **NEU-Bereiche:** Regeln zwischen den Kommentaren `NEU-ANFANG` und `NEU-ENDE` in `global.css` (Basis, Hilfsklassen und Bausteine aus Task 2 und 3) sind das neue System; ihre Benutzer entstehen in P1 Task 5 bis 8 und in P2 bis P9. Eine Klasse mit einer Regel dort gilt nie als tot und steht in `neuOhneBenutzer` (mit `--mit-neu` zählt sie normal, so findet P10 unbenutzt gebliebene neue Klassen). Ohne diese Trennung stünden 77 neue Klassen als „tot“ in der Liste.
+- **Laufzeit-Klassen** (gelten immer als benutzt): `u-*` (uPlot erzeugt `u-legend` im DOM) und `mine` (Modifikator der Sprechblasen des Chat-Bausteins aus dem Kundenportal, gesetzt über `renderMessage(…, { mine })` in `ChatThread.jsx`).
+
+## Ergebnis
+
+| Lauf | definiert | tot |
+|---|---|---|
+| Vor P1 (`bd84d22`, ohne NEU-Bereiche) | 514 | **67** |
+| Vor diesem Task (`a6877aa`), roh | 594 | 144 |
+| davon Laufzeit-Klassen (`mine`, `u-legend`) | | 2 |
+| davon NEU-Bereiche (Task 2 und 3, noch ohne Benutzer) | | 77 |
+| **Kandidaten (Altlast)** | | **65** |
+| Nach diesem Task | 524 | 3 (siehe Gegenprobe) |
+
+Erwartet waren etwa 66 Namen (Grenzen 40 und 90). Der Lauf auf dem Stand vor P1 ergibt 67, die Altlast-Kandidaten im aktuellen Stand 65: Die Differenz sind `link-danger`, `num`, `nowrap`, `small`, `strong` und `xs` (jetzt NEU) sowie `mine` und `u-legend` (Laufzeit), dazu kommen `stat-label` und `stat-value` wie unten.
+
+## Gegenprobe
+
+Für jeden der 65 Kandidaten: `rg -w <name> src --glob '!*.css'`. Bei Treffern zusätzlich mit genauer Wortgrenze (`rg -e '(^|[^A-Za-z0-9_-])<name>($|[^A-Za-z0-9_-])' --glob '!*.css' src`), weil `-w` den Bindestrich als Wortgrenze behandelt und `stat-value` in `fin-stat-value` „findet“.
+
+- 62 Kandidaten: 0 Treffer.
+- `stat-label`, `stat-value`: je 3 Treffer, alle in `fin-stat-label` und `fin-stat-value` (`AboCard.jsx`); mit genauer Wortgrenze 0, also tot.
+- `success`: 71 Treffer, wirklich benutzt: `AdminPage.jsx` Zeile 25 setzt `admin-notice ${notice.type}` (`success` oder `error`). Bleibt.
+- `admin-status`, `admin-empty-line`: 0 Treffer, tot, aber in `pages/AdminPage.css`, das nicht zu diesem Paket gehört (Task 9 und P8 fassen die Datei an). Bleiben vorerst.
+
+Gelöscht sind damit 62 Namen aus `global.css`.
+
+| Klasse | Definition (Stand `a6877aa`) | `rg -w` Treffer | Ergebnis |
+|---|---|---|---|
+| `admin-empty-line` | pages/AdminPage.css:361, pages/AdminPage.css:372 | 0 | tot, bleibt vorerst: Datei liegt ausserhalb dieses Pakets (P8 baut die Admin-Seite um) |
+| `admin-status` | pages/AdminPage.css:280, pages/AdminPage.css:293 | 0 | tot, bleibt vorerst: Datei liegt ausserhalb dieses Pakets (P8 baut die Admin-Seite um) |
+| `bg-amber` | global.css:494 | 0 | gelöscht |
+| `bg-black` | global.css:487 | 0 | gelöscht |
+| `bg-blue` | global.css:490 | 0 | gelöscht |
+| `bg-blue-grey` | global.css:491 | 0 | gelöscht |
+| `bg-dark-grey` | global.css:484, global.css:748, global.css:761 | 0 | gelöscht |
+| `bg-green` | global.css:488 | 0 | gelöscht |
+| `bg-light-grey` | global.css:485 | 0 | gelöscht |
+| `bg-orange` | global.css:495 | 0 | gelöscht |
+| `bg-teal` | global.css:489 | 0 | gelöscht |
+| `bg-white` | global.css:486 | 0 | gelöscht |
+| `bg-yellow` | global.css:493 | 0 | gelöscht |
+| `btn-secondary` | global.css:593 | 0 | gelöscht |
+| `col-12` | global.css:695 | 0 | gelöscht |
+| `container` | global.css:504 | 0 | gelöscht |
+| `control-panel-section` | global.css:1009, global.css:1014 | 0 | gelöscht |
+| `dashboard-section` | global.css:1238 | 0 | gelöscht |
+| `drop-zone` | global.css:963, global.css:972 | 0 | gelöscht |
+| `fade-in` | global.css:1041 | 0 | gelöscht |
+| `flex-col` | global.css:1321 | 0 | gelöscht |
+| `form-select` | global.css:638, global.css:654, global.css:1308, global.css:1309 | 0 | gelöscht |
+| `gap-1` | global.css:1324 | 0 | gelöscht |
+| `gap-4` | global.css:1324 | 0 | gelöscht |
+| `mb-1` | global.css:707 | 0 | gelöscht |
+| `modal-content` | global.css:904 | 0 | gelöscht |
+| `modern-card` | global.css:993, global.css:1003, global.css:1306, global.css:1307 | 0 | gelöscht |
+| `mt-1` | global.css:704 | 0 | gelöscht |
+| `nav-link` | global.css:545, global.css:553 | 0 | gelöscht |
+| `nav-right` | global.css:558 | 0 | gelöscht |
+| `navbar` | global.css:518 | 0 | gelöscht |
+| `navbar-brand` | global.css:531 | 0 | gelöscht |
+| `navbar-nav` | global.css:540, global.css:1095 | 0 | gelöscht |
+| `priority-high` | global.css:838 | 0 | gelöscht |
+| `priority-low` | global.css:836 | 0 | gelöscht |
+| `priority-medium` | global.css:837 | 0 | gelöscht |
+| `priority-none` | global.css:835 | 0 | gelöscht |
+| `quick-actions` | global.css:1239 | 0 | gelöscht |
+| `side-group-label` | global.css:1134, global.css:1138 | 0 | gelöscht |
+| `slide-in` | global.css:1045 | 0 | gelöscht |
+| `slider` | global.css:916, global.css:926, global.css:930, global.css:941, global.css:946, global.css:957 | 0 | gelöscht |
+| `slider-container` | global.css:911 | 0 | gelöscht |
+| `spacer` | global.css:609 | 0 | gelöscht |
+| `stat-card` | global.css:1234 | 0 | gelöscht |
+| `stat-info` | global.css:1235 | 0 | gelöscht |
+| `stat-label` | global.css:1237 | 3, alle nur Teil von `fin-stat-label` | gelöscht |
+| `stat-value` | global.css:1236 | 3, alle nur Teil von `fin-stat-value` | gelöscht |
+| `stats-grid` | global.css:1233 | 0 | gelöscht |
+| `success` | pages/AdminPage.css:99 | 71 | bleibt: dynamischer Modifikator `admin-notice ${notice.type}` (AdminPage.jsx:25, Typen `success`/`error`) |
+| `table-hover` | global.css:600, global.css:604 | 0 | gelöscht |
+| `text-black` | global.css:498 | 0 | gelöscht |
+| `text-green` | global.css:500 | 0 | gelöscht |
+| `text-large` | global.css:701 | 0 | gelöscht |
+| `text-right` | global.css:699 | 0 | gelöscht |
+| `text-small` | global.css:700 | 0 | gelöscht |
+| `text-xlarge` | global.css:702 | 0 | gelöscht |
+| `ticket-collapsed` | global.css:742, global.css:748 | 0 | gelöscht |
+| `ticket-expanded` | global.css:755, global.css:761 | 0 | gelöscht |
+| `ticket-id` | global.css:742, global.css:755, global.css:794, global.css:807 | 0 | gelöscht |
+| `ticket-id-expanded` | global.css:807, global.css:811 | 0 | gelöscht |
+| `ticket-info` | global.css:820 | 0 | gelöscht |
+| `ticket-row` | global.css:715, global.css:720, global.css:727, global.css:731, global.css:735 | 0 | gelöscht |
+| `ticket-time` | global.css:815 | 0 | gelöscht |
+| `worksheet-cell` | global.css:771, global.css:777 | 0 | gelöscht |
+| `worksheet-expansion` | global.css:767 | 0 | gelöscht |
+
+## Nicht gelöscht, obwohl der Abgleich sie roh nennt
+
+- **NEU (77, Task 2 und 3, Benutzer folgen):** `actions`, `brand`, `btn-block`, `btn-primary`, `btn-quiet`, `cell-sub`, `cell-title`, `check`, `code-input`, `count`, `critical`, `crumb`, `dialog`, `dialog-body`, `dialog-close`, `dialog-foot`, `dialog-head`, `dialog-wide`, `err`, `eyebrow`, `fact`, `facts`, `field-row`, `field-row-3`, `hide-md`, `hide-sm`, `hint`, `hot`, `input`, `is-invalid`, `k`, `kv`, `link-danger`, `loading`, `login`, `login-box`, `login-foot`, `login-links`, `main`, `menu-open`, `mobile-bar`, `msg`, `nav`, `nav-count`, `nav-dot`, `nav-item`, `neg`, `nowrap`, `num`, `page-head`, `paused`, `prose`, `right`, `scrim`, `search`, `section`, `select`, `select-quiet`, `shell`, `sidebar`, `sidebar-foot`, `small`, `stat`, `stats`, `strong`, `sub`, `sw`, `tab`, `table`, `table-foot`, `tabs`, `textarea`, `toast`, `two-col`, `v`, `who`, `xs`
+- **Laufzeit (2):** `mine`, `u-legend`.
+- **Nur durch die Ausnahmeliste am Leben** (Lauf mit `--ohne-ausnahmen`, 6 Namen): `chat-bubble`, `chat-input-row`, `chat-meta` (Sprechblasen und Eingabezeile kommen zur Laufzeit aus dem Chat-Baustein des Portals), `ui-btn-danger`, `ui-btn-sm` (`Button.jsx` setzt sie über die Tabelle `VARIANTS` und `size`; beide stehen in KOMPAT). `status-occupied` hat keinen Benutzer: `statusClass()` in `lib/ticketStatus.js` liefert nur `status-open`, `-working`, `-awaiting`, `-assigned` und `-closed`. Es ist gelöscht, die übrigen fünf stehen in KOMPAT.
+
+## Zusätzlich gelöscht (nicht tot, laut Plan)
+
+- Alle `!important` in `global.css`: 77 vorher, 0 nachher. Offen bleiben 6 in `pages/AdminPage.css` und 2 in `admin-areas.css` (beide Dateien gehören nicht zu diesem Paket; Task 9 und P8).
+- `.btn-green, .btn-primary { … !important }` samt Hover und `.btn-secondary`; `.btn-dark`, `.btn-teal`, `.btn-green` stehen neu in KOMPAT.
+- `.footer` (zweimal), `.navbar*`, `.nav-link`, `.nav-right`, `.ticket-row*`, `.ticket-collapsed`, `.ticket-expanded`, `.ticket-id*`, `.ticket-time`, `.ticket-info`, `.worksheet-expansion`, `.worksheet-cell`, `.slider*`, `.drop-zone`, `.modern-card`.
+- Die Legacy-Responsive-Regeln (`@media (max-width: 768px)` mit `.col-6`, `.navbar-nav`, `.ticket-tab`); `.col-6 { width: 100% }` unter 768 px steht neu in KOMPAT.
+- Die Keyframes `slideDown`, `fadeIn` und `slideIn` (`WorksheetList.jsx` bringt eigene in einem `<style>`-Block mit).
+- `.kpi*` einschließlich `.kpi-grid`: `Kpi` rendert ab Task 6 `Stat`; bis dahin hat `Kpi` kein Styling. `.fin-stack .kpi-grid` und `.fin-head .kpi-value` im Finanz-Teil bleiben (Task 9).
+- `.priority-none`, `-low`, `-medium`, `-high` (tot); `.priority-critical` und `.status-*` stehen in KOMPAT.
+- `.ui-card*`, `.ui-btn*`, `.badge-*`, `.form-group`, `.form-label`, `.form-control` (und `.form-select`, tot), `.card*`, `.row`, `.col`, `.col-6`, `.dropdown*`, `.spinner`, `.overlay-content`, `.ticket-tab*` und die Regeln „Soften legacy“: durch KOMPAT-Zeilen ersetzt.
+- `.fin-form-field .form-control[aria-invalid="true"] { border-color: … !important }`: ersetzt durch die roten Ringe aus Task 3 (`.form-control[aria-invalid="true"]`).
+- Die Aliasvariable `--sidebar-w-collapsed` (Task 2).
+- Die toten Hilfsklassen `.flex-col`, `.gap-1`, `.gap-4`, `.container`, `.mt-1`, `.mb-1`, `.text-right`, `.text-small`, `.text-large`, `.text-xlarge`, `.col-12`, `.bg-*` außer `.bg-red`, `.text-black`, `.text-green` (stehen in der Tabelle oben).
+
+### Abweichung: `.side*` bleibt bis Task 5
+
+Der Plan nennt `.side*` zum Löschen. Das alte Menü (`Navbar.jsx`) benutzt sie aber bis Task 5. Ohne sie fällt das Alt-Gerüst `.app-shell` zusammen: Der Lauf `shots.sh --gate p1` brach auf fast allen Ansichten mit `step-failed` ab, weil das ungebremste Menü den Inhalt verdrängte (auf dem Handy auch ohne die Regel für `.collapsed`). Die Regeln stehen deshalb unverändert in einem eigenen Teil des KOMPAT-Blocks („Altes Menü“). Geändert sind nur `--sidebar-w-collapsed` (jetzt `72px`) und das tote `.side-group-label` (entfernt). **Task 5 löscht diesen Teil**; dafür muss `global.css` in die Dateiliste von Task 5. `.side-count` und `.side-logo` stehen wie im Plan als eigene KOMPAT-Zeilen.
+
+## KOMPAT-Zeilen (Selektor → Look)
+
+| Selektor | Look |
+|---|---|
+| `.ui-card`, `.ui-card.pad`, `.ui-card-head`, `.ui-card-head h3`, `.ui-card-body` | Abschnitt ohne Kasten, Kopf wie `h2.section` (16/24, 600) |
+| `.ui-btn`, `.ui-btn-primary`, `.ui-btn-danger` | wie `.btn` (weiß, Ring, 32 px), `.btn-primary` (schwarz), `.link-danger` (roter Textlink); `-ghost` und `-sm` ohne eigene Regel (wirken wie `.ui-btn`) |
+| `.btn-dark`, `.btn-teal`, `.btn-green` | wie `.btn-primary` |
+| `.form-group`, `.form-label`, `.form-control` (mit `textarea`, `select`, `:focus`, `[readonly]`, Platzhalter) | wie `.field`, Beschriftung 500, `.input`/`.select`/`.textarea` |
+| `.badge-muted`, `-info`, `-warn`, `-ok`, `-danger` | Badge-Töne grau, blau, orange, grün, rot |
+| `.status-open`, `-working`, `-awaiting`, `-assigned`, `-closed`, `.priority-critical` | grau, blau, orange, violett, „plain“ (geschlossen und storniert teilen sich die Klasse), rot |
+| `.overlay:has(> .overlay-content)` | `overflow-y: auto`, `align-items: flex-start`, Abstand 24/16, Hintergrund `--overlay`, ohne Einblend-Animation |
+| `.overlay-content` (und `.overlay-content.fin-dialog`) | weiße Box: 100 %, max. 520 px (760 px bei `.fin-dialog`), Radius 12, `--shadow-pop`, Abstand 24, Schrift `--text` |
+| `.overlay-close` | fest oben rechts, 32×32, weißer runder Knopf, „ד in `--text-2` |
+| `.seg button.active` | wie `.seg button.on` |
+| `.bg-red` (mit `.text-white` oder ohne), `.text-grey`, `.text-red` | kein Hintergrund, `--red-fg`, 13 px; `--text-2`; `--red-fg`. `.text-white` allein hat keine Regel |
+| `.side-count`, `.side-logo` | kleine graue Zahl; Initiale ohne Verlauf |
+| `.card`, `.card-header`, `.card-body` | neutral: ohne Kasten, Kopf mit Haarlinie |
+| `div.row`, `.col`, `.col-6` (unter 768 px 100 %) | Raster ohne Look; `div.row`, damit `tr.row` unberührt bleibt |
+| `.dropdown`, `.dropdown-content`, `.dropdown-item` | weißes Popover mit `--shadow-pop` |
+| `.spinner` | grauer Ring |
+| `.page .page`, `.page .main-content` | Abstand und Breite aufgehoben |
+| `.fin-link`, `.legal-files a`, `.credit-cols a`, `.area-rows a` | feiner Unterstrich (`--line-strong`, beim Überfahren `currentColor`) |
+| `.ticket-tabs`, `.ticket-tab`, `.ticket-tab-active`, `.ticket-tab-content` | wie `.tabs` und `.tab` (Unterstrich statt Kasten); nicht in der Spec-Tabelle, aber `Tabs.jsx` bleibt bis Task 6 |
+| `.side*` („Altes Menü“) | siehe Abweichung oben; Task 5 löscht den Teil |
+
+Das `:has()` der Alt-Dialoge ist nötig, damit `^\.overlay *\{` genau einmal trifft (Grundregel des neuen `.overlay > .dialog`).
+
+Die Einblend-Animation des neuen `.overlay` (`fade`, Deckkraft 0 → 1) ließ `submitReachable` mit „kein offener Dialog gefunden“ scheitern, wenn der Dialog im ersten Bild geprüft wurde (`checkVisibility` mit `checkOpacity`). Alt-Dialoge hatten nie eine Animation, deshalb `animation: none` in KOMPAT. Task 7 muss dasselbe für `Dialog` lösen, z. B. mit `@media (prefers-reduced-motion: reduce) { .overlay, .dialog { animation: none; } }` (der Lauf setzt `reducedMotion: 'reduce'`).
+
+Zusätzlich: `.datetime-pair input[type="date"]` bekommt `flex: 1.3`, weil das Datum im 520-px-Dialog sonst das Jahr abschneidet.
+
+## Benutzt, aber ohne Regel (`undefinedUsed`)
+
+Der Lauf nach diesem Task nennt 67 Namen. Der Lauf auf dem Stand vor P1 (`bd84d22`) nannte 58 davon schon; neu sind 9, alle gewollt:
+
+| Name | Grund |
+|---|---|
+| `dot`, `empty-icon` | Task 3 hat die Regeln mit dem neuen `.badge` und `.empty` ersetzt; Task 6 baut `Badge` und `EmptyState` um (Prop `dot` und `icon` entfallen) |
+| `footer` | Regel nach Plan gelöscht; Task 5 löscht `Footer.jsx` |
+| `kpi`, `kpi-accent`, `kpi-label`, `kpi-sub` | Regeln nach Plan gelöscht; Task 6 lässt `Kpi` das neue `Stat` rendern |
+| `text-white` | Spec: allein keine Regel |
+| `ui-btn-ghost` | gleicher Look wie `.ui-btn`, braucht keine eigene Regel |
+
+Die übrigen 58 hatten schon vor P1 keine Regel:
+- die Bootstrap-Namen aus `WorksheetList.jsx` (wirkungslos): `alert`, `alert-info`, `align-items-center`, `border-0`, `col-md-6`, `d-flex`, `fs-5`, `fs-6`, `justify-content-between`, `justify-content-md-end`, `mb-3`, `mb-4`, `me-1`, `me-2`, `ms-2`, `ms-3`, `mx-2`, `overflow-hidden`, `p-3`, `px-3`, `py-2`, `py-3`, `rounded-3`, `shadow-sm`, `spinner-border`, `text-dark`, `text-md-end`, `text-muted`, `visually-hidden`, `timeline`, `timeline-item`;
+- die Namen aus dem Plan: `p-4`, `btn-sm`, `status-filter`, `supporters-editor` (und `timeline` oben);
+- reine Haken ohne Styling: `credits-view`, `fin-abo-amount`, `fin-abo-main`, `fin-abo-next`, `fin-abo-product`, `fin-assign`, `fin-days`, `fin-inv-abo`, `fin-memo`, `fin-tax-card`, `fin-tax-note`, `fin-todo-main`, `fin-total-value`, `fin-tx-out`, `fin-wrap`, `legal-doc`, `offer-form`, `sp-ampel`, `sp-apps`, `sp-cleanup-body`, `status-filter-actions`, `worksheet-list`, `worksheet-supporters`.
diff --git a/src/styles/global.css b/src/styles/global.css
index 5149b1e..f1bd0ef 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -48,10 +48,10 @@
   --shadow-1: none;
   --shadow-2: var(--shadow-btn);
   --shadow-3: var(--shadow-pop);
-  /* Entfaellt laut Spec; bleibt bis zur Menue-Umstellung (P1 Task 5), weil .side.collapsed es noch nutzt. */
-  --sidebar-w-collapsed: 72px;
 }
 
+/* NEU-ANFANG: Basis und Bausteine des weissen Designs (P1 Task 2/3). Klassen darin bekommen ihre Benutzer in P1 Task 5-8 */
+/* und P2-P9; css-klassen.mjs zaehlt sie bis dahin nicht als tot. */
 html { color-scheme: light; }
 
 body {
@@ -70,6 +70,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 input, select, textarea { font: inherit; color: inherit; }
 :focus-visible { outline: 2px solid #111111; outline-offset: 2px; }
 :disabled { opacity: .55; cursor: not-allowed; }
+fieldset:disabled { opacity: 1; }
 [readonly] { background: var(--bg-subtle); }
 
 .link { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@@ -479,34 +480,9 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
   .overlay { padding: 16px; align-items: flex-end; }
   .dialog { max-height: 92vh; }
 }
-
-/* Color Classes */
-.bg-dark-grey { background-color: #616161 !important; }
-.bg-light-grey { background-color: #f1f1f1 !important; }
-.bg-white { background-color: #fff !important; }
-.bg-black { background-color: #000 !important; }
-.bg-green { background-color: #4CAF50 !important; }
-.bg-teal { background-color: #009688 !important; }
-.bg-blue { background-color: #2196F3 !important; }
-.bg-blue-grey { background-color: #607D8B !important; }
-.bg-red { background-color: #f44336 !important; }
-.bg-yellow { background-color: #ffeb3b !important; }
-.bg-amber { background-color: #ffc107 !important; }
-.bg-orange { background-color: #ff9800 !important; }
-
-.text-white { color: #fff !important; }
-.text-black { color: #000 !important; }
-.text-grey { color: #9e9e9e !important; }
-.text-green { color: #4CAF50 !important; }
-.text-red { color: #f44336 !important; }
+/* NEU-ENDE */
 
 /* Layout */
-.container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 16px;
-}
-
 .main-content {
   padding: var(--sp-5);
   max-width: 1320px;
@@ -514,588 +490,27 @@ a.list-row:hover .cell-title { color: var(--accent-ink); }
   width: 100%;
 }
 
-/* Navbar */
-.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(135deg, rgba(26, 32, 44, 0.98) 0%, rgba(17, 24, 39, 0.98) 100%);
-  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
-  z-index: 199;
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-}
-
-.navbar-brand {
-  padding: 12px 16px;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: bold;
-}
-
-.navbar-nav {
-  display: flex;
-  list-style: none;
-}
-
-.nav-link {
-  padding: 16px 24px;
-  color: var(--dark-text);
-  text-decoration: none;
-  transition: all 0.2s ease;
-  border-radius: 6px;
-}
-
-.nav-link:hover {
-  background: rgba(16, 185, 129, 0.2);
-  color: var(--green-primary);
-}
-
-.nav-right {
-  margin-left: auto;
-}
-
-/* Buttons */
-.btn-dark {
-  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
-  color: #fff;
-}
-
-.btn-dark:hover {
-  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(74, 85, 104, 0.5);
-}
-
-.btn-green,
-.btn-primary {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
-  color: #fff !important;
-  border: none !important;
-}
-
-.btn-green:hover,
-.btn-primary:hover {
-  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
-}
-
-.btn-teal {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  color: #fff;
-}
-
-.btn-secondary {
-  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
-  color: #fff !important;
-  border: none !important;
-}
-
-/* Table-Hover (Altlast, Task 4) */
-.table-hover tbody tr {
-  background: transparent;
-}
-
-.table-hover tbody tr:hover {
-  background: transparent !important;
-}
-
-/* Spacer rows between tickets */
-.spacer,
-.spacer td {
-  background: transparent !important;
-  border: none !important;
-}
-
-/* Cards */
-.card {
-  background: rgba(45, 55, 72, 0.95) !important;
-  border: 1px solid rgba(16, 185, 129, 0.2) !important;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  color: var(--dark-text) !important;
-}
-
-.card-header {
-  padding: 12px 16px;
-  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
-  color: #fff;
-  font-weight: bold;
-  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
-}
-
-.card-body {
-  padding: 16px;
-  color: var(--dark-text);
-}
-
-/* Forms */
-.form-control,
-.form-select {
-  width: 100%;
-  padding: 10px 14px;
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  border-radius: 8px;
-  font-size: 14px;
-  background: rgba(31, 41, 55, 0.6) !important;
-  color: var(--dark-text) !important;
-  transition: all 0.2s ease;
-}
-
-.form-control::placeholder {
-  color: rgba(226, 232, 240, 0.5);
-}
-
-.form-control:focus,
-.form-select:focus {
-  outline: none;
-  border-color: var(--green-primary) !important;
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
-  background: rgba(31, 41, 55, 0.8) !important;
-}
-
-.form-group {
-  margin-bottom: 16px;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: 500;
-  color: var(--dark-text);
-}
-
-select.form-control {
-  background: rgba(31, 41, 55, 0.6) !important;
-  color: var(--dark-text) !important;
-}
-
-textarea.form-control {
-  resize: vertical;
-  min-height: 100px;
-}
-
-/* Grid */
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -8px;
-}
-
-.col {
-  padding: 0 8px;
-}
-
-.col-6 { width: 50%; }
-.col-12 { width: 100%; }
-
 /* Utilities */
 .text-center { text-align: center; }
-.text-right { text-align: right; }
-.text-small { font-size: 12px; }
-.text-large { font-size: 18px; }
-.text-xlarge { font-size: 24px; }
 
-.mt-1 { margin-top: 8px; }
 .mt-2 { margin-top: 16px; }
 .mt-3 { margin-top: 24px; }
-.mb-1 { margin-bottom: 8px; }
 .mb-2 { margin-bottom: 16px; }
 .p-1 { padding: 8px; }
 .p-2 { padding: 16px; }
 
 .hidden { display: none; }
 
-/* Ticket Row */
-.ticket-row {
-  border: none !important;
-  background: transparent !important;
-}
-
-.ticket-row td {
-  background: rgba(45, 55, 72, 0.95);
-  border: 1px solid rgba(16, 185, 129, 0.2);
-  border-radius: 0 !important;
-}
-
-/* Second row of ticket (no top border to avoid line in rowspan cells) */
-.ticket-row + .ticket-row td {
-  border-top: none;
-}
-
-.ticket-row:hover td {
-  background: rgba(45, 55, 72, 0.95);
-}
-
-.ticket-row:hover {
-  border: none;
-  box-shadow: none;
-}
-
-/* Collapsed Ticket - All 4 outermost corners rounded */
-/* WOID cell (left side) - top and bottom corners */
-.ticket-collapsed .ticket-id {
-  border-top-left-radius: 12px !important;
-  border-bottom-left-radius: 12px !important;
-}
-
-/* Lock cell (right side) - top and bottom corners */
-.ticket-collapsed td.bg-dark-grey {
-  border-top-right-radius: 12px !important;
-  border-bottom-right-radius: 12px !important;
-}
-
-/* Expanded Ticket - Only top 2 outermost corners rounded */
-/* WOID cell (left side) - only top corner, bottom stays square */
-.ticket-expanded .ticket-id {
-  border-top-left-radius: 12px !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-/* Lock cell (right side) - only top corner, bottom stays square */
-.ticket-expanded td.bg-dark-grey {
-  border-top-right-radius: 12px !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-/* Worksheet Expansion with Animation */
-.worksheet-expansion {
-  animation: slideDown 0.4s ease-out;
-}
-
-.worksheet-cell {
-  background: transparent !important;
-  border: none !important;
-  padding: 0 !important;
-}
-
-.worksheet-cell .card {
-  border-radius: 0 0 12px 12px !important;
-  margin-top: -1px;
-  animation: fadeIn 0.4s ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.ticket-id {
-  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
-  color: #fff;
-  text-align: center;
-  vertical-align: middle;
-  font-size: 18px;
-  font-weight: bold;
-  padding: 16px;
-  border: 1px solid rgba(16, 185, 129, 0.2) !important;
-  transition: border-radius 0.3s ease;
-}
-
-/* WOID rounded when collapsed, square bottom when expanded */
-.ticket-id:not(.ticket-id-expanded) {
-  border-radius: 12px;
-}
-
-.ticket-id-expanded {
-  border-radius: 12px 12px 0 0;
-}
-
-.ticket-time {
-  font-size: 11px;
-  color: #a0aec0;
-}
-
-.ticket-info {
-  background: rgba(31, 41, 55, 0.6) !important;
-  font-size: 13px;
-  color: var(--dark-text);
-}
-
-/* Status Colors (ruhiger, semantisch) */
-.status-open { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; }
-.status-occupied { background: rgba(148,163,184,0.18) !important; color: #cbd5e0 !important; }
-.status-assigned { background: rgba(20,184,166,0.18) !important; color: #2dd4bf !important; }
-.status-awaiting { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; }
-.status-working { background: rgba(59,130,246,0.16) !important; color: #93c5fd !important; }
-.status-closed { background: rgba(148,163,184,0.14) !important; color: #94a3b8 !important; }
-
-/* Priority Colors (ruhiger, semantisch) */
-.priority-none { background: rgba(59,130,246,0.16) !important; color: #93c5fd !important; }
-.priority-low { background: rgba(16,185,129,0.16) !important; color: #34d399 !important; }
-.priority-medium { background: rgba(245,158,11,0.18) !important; color: #fbbf24 !important; }
-.priority-high { background: rgba(249,115,22,0.18) !important; color: #fb923c !important; }
-.priority-critical { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; }
-
-/* Dropdown */
-.dropdown {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  text-align: center;
-}
-
-.dropdown .btn {
-  width: 100%;
-  padding: 6px 12px;
-  font-size: 12px;
-  border: none !important;
-  box-shadow: none !important;
-  background: inherit !important;
-  color: inherit !important;
-  text-align: center;
-  display: inline-block;
-  margin: 0;
-}
-
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background: rgba(45, 55, 72, 0.98);
-  min-width: 160px;
-  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  border-radius: 6px;
-  z-index: 100;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.dropdown:hover .dropdown-content {
-  display: block;
-}
-
-.dropdown-item {
-  padding: 8px 16px;
-  color: var(--dark-text);
-  cursor: pointer;
-  display: block;
-  transition: background 0.2s ease;
-}
-
-.dropdown-item:hover {
-  background: rgba(16, 185, 129, 0.2);
-  color: var(--green-primary);
-}
-
-/* Modal/Overlay */
-.overlay-content {
-  max-width: 1000px;
-  margin: 0 auto;
-  color: #fff;
-}
-
 .ticket-projects { margin-top: 16px; }
 /* Zeile unter der Projektliste: Projekt waehlen + Zuweisen + Neues Projekt */
 .ticket-projects-assign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
 .ticket-projects-assign .form-control { flex: 1 1 220px; margin: 0; }
 
-.modal-content {
-  background: rgba(45, 55, 72, 0.98) !important;
-  border: 1px solid rgba(16, 185, 129, 0.3) !important;
-  color: var(--dark-text) !important;
-}
-
-/* Slider */
-.slider-container {
-  width: 100%;
-  padding: 8px 0;
-}
-
-.slider {
-  width: 100%;
-  height: 8px;
-  background: rgba(31, 41, 55, 0.6);
-  border-radius: 8px;
-  outline: none;
-  transition: all 0.2s;
-  -webkit-appearance: none;
-}
-
-.slider:hover {
-  background: rgba(31, 41, 55, 0.8);
-}
-
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
-  transition: all 0.2s;
-}
-
-.slider::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
-}
-
-.slider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
-  border: none;
-  transition: all 0.2s;
-}
-
-.slider::-moz-range-thumb:hover {
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
-}
-
-/* File Upload */
-.drop-zone {
-  background: #616161;
-  border: 5px dashed #999;
-  padding: 40px;
-  text-align: center;
-  color: #fff;
-  cursor: pointer;
-}
-
-.drop-zone:hover {
-  border-color: #4CAF50;
-}
-
-/* Spinner */
-.spinner {
-  border: 4px solid rgba(16, 185, 129, 0.2);
-  border-top: 4px solid var(--green-primary);
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
-  margin: 0 auto;
-}
-
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
 
-/* Modern Card Style */
-.modern-card {
-  background: rgba(45, 55, 72, 0.95);
-  border-radius: 12px;
-  border: 1px solid rgba(16, 185, 129, 0.2);
-  padding: 16px;
-  margin-bottom: 16px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s ease;
-}
-
-.modern-card:hover {
-  border-color: rgba(16, 185, 129, 0.4);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
-}
-
-/* Unified Control Panel - No internal rounded corners */
-.control-panel-section {
-  padding: 16px;
-  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
-}
-
-.control-panel-section:last-child {
-  border-bottom: none;
-}
-
-/* Animations */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.fade-in {
-  animation: fadeIn 0.3s ease-in-out;
-}
-
-.slide-in {
-  animation: slideIn 0.3s ease-out;
-}
-
-/* Footer */
-.footer {
-  background: linear-gradient(135deg, rgba(26, 32, 44, 0.98) 0%, rgba(17, 24, 39, 0.98) 100%);
-  border-top: 1px solid rgba(16, 185, 129, 0.2);
-  color: var(--dark-text);
-  text-align: center;
-  padding: 24px;
-  margin-top: 32px;
-}
-
-/* Ticket-Detail Tabs */
-.ticket-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid rgba(16, 185, 129, 0.2);
-  padding-bottom: 8px;
-}
-.ticket-tab {
-  background: rgba(45, 55, 72, 0.5);
-  color: #cbd5e0;
-  border: 1px solid rgba(16, 185, 129, 0.15);
-  border-radius: 8px 8px 0 0;
-  padding: 10px 18px;
-  font-weight: 600;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.ticket-tab:hover {
-  background: rgba(16, 185, 129, 0.12);
-  color: var(--dark-text);
-}
-.ticket-tab-active {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  color: #fff;
-  border-color: transparent;
-}
-.ticket-tab-content {
-  min-height: 120px;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .col-6 { width: 100%; }
-  .navbar-nav { display: none; }
-  .ticket-tab { padding: 8px 12px; font-size: 13px; }
-}
-
 /* ============================================================= */
 /* ===================  REDESIGN (Designsystem)  =============== */
 /* ============================================================= */
@@ -1105,67 +520,6 @@ textarea.form-control {
 .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
 .app-scroll { flex: 1; overflow-y: auto; }
 
-/* --- Sidebar (fix, Labels sichtbar, gruppiert) --- */
-.side {
-  width: var(--sidebar-w);
-  flex-shrink: 0;
-  background: linear-gradient(180deg, var(--surface-1), var(--bg));
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  transition: width 0.2s ease;
-}
-.side.collapsed { width: var(--sidebar-w-collapsed); }
-.side-head {
-  display: flex; align-items: center; gap: var(--sp-3);
-  padding: var(--sp-4); border-bottom: 1px solid var(--border);
-  min-height: 64px;
-}
-.side-logo {
-  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
-  display: flex; align-items: center; justify-content: center;
-  color: #fff; font-weight: 800;
-}
-.side-brand { font-weight: 800; font-size: 16px; letter-spacing: 0.2px; white-space: nowrap; }
-.side-brand small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
-.side-nav { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-2); }
-.side-group { margin-bottom: var(--sp-4); }
-.side-group-label {
-  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px;
-  color: var(--text-faint); padding: 0 var(--sp-3) var(--sp-2);
-}
-.side.collapsed .side-group-label,
-.side.collapsed .side-link-label,
-.side.collapsed .side-brand { display: none; }
-.side-link {
-  display: flex; align-items: center; gap: var(--sp-3);
-  padding: 10px var(--sp-3); margin: 2px var(--sp-1);
-  border-radius: var(--r-sm); color: var(--text-muted);
-  text-decoration: none; transition: all 0.15s ease; white-space: nowrap;
-}
-.side-link svg { width: 20px; height: 20px; flex-shrink: 0; }
-.side-link:hover { background: var(--surface-2); color: var(--text); }
-.side-link-paused, .side-link-paused:hover { opacity: 0.45; cursor: not-allowed; background: transparent; color: var(--text-muted); }
-.side-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
-.side-sublink { padding-left: calc(var(--sp-3) + 18px); font-size: 13.5px; }
-.side-sublink svg { width: 17px; height: 17px; }
-.side.collapsed .side-sublink { padding-left: var(--sp-3); }
-.side-count {
-  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
-  background: var(--accent); color: #04130d; font-size: 11.5px; font-weight: 700; line-height: 18px;
-}
-.side.collapsed .side-count { position: absolute; margin: -18px 0 0 14px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
-.side.collapsed .side-sublink { position: relative; }
-.side-link.active svg { color: var(--accent); }
-.side-foot { border-top: 1px solid var(--border); padding: var(--sp-3); }
-.side-toggle {
-  background: transparent; border: none; color: var(--text-muted);
-  cursor: pointer; padding: var(--sp-2); border-radius: var(--r-sm);
-  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
-}
-.side-toggle:hover { background: var(--surface-2); color: var(--text); }
-
 /* --- Page header + container --- */
 .page-header {
   display: flex; align-items: flex-start; justify-content: space-between;
@@ -1175,69 +529,6 @@ textarea.form-control {
 .page-subtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
 .page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
 
-/* --- UI Card / Section --- */
-.ui-card {
-  background: var(--surface-1);
-  border: 1px solid var(--border);
-  border-radius: var(--r-md);
-  box-shadow: var(--shadow-1);
-}
-.ui-card.pad { padding: var(--sp-4); }
-.ui-card-head {
-  display: flex; align-items: center; justify-content: space-between;
-  gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border);
-}
-.ui-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
-.ui-card-body { padding: var(--sp-4); }
-
-/* --- Buttons (Redesign-Varianten) --- */
-.ui-btn {
-  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
-  font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s ease;
-  background: var(--surface-2); color: var(--text); text-decoration: none;
-}
-.ui-btn:hover { background: var(--surface-hover); }
-.ui-btn-primary { background: var(--accent); color: #06231a; border-color: transparent; }
-.ui-btn-primary:hover { background: #34d399; }
-.ui-btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
-.ui-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
-.ui-btn-danger { background: rgba(239,68,68,0.15); color: #f87171; }
-.ui-btn-danger:hover { background: rgba(239,68,68,0.25); }
-.ui-btn-sm { padding: 6px 10px; font-size: 13px; }
-.ui-btn:disabled { opacity: 0.55; cursor: not-allowed; }
-
-/* --- Badges / Pills --- */
-.badge-info { background: rgba(59,130,246,0.16); color: #93c5fd; }
-.badge-ok { background: rgba(16,185,129,0.16); color: #34d399; }
-.badge-warn { background: rgba(245,158,11,0.18); color: #fbbf24; }
-.badge-danger { background: rgba(239,68,68,0.18); color: #f87171; }
-.badge-muted { background: var(--surface-2); color: var(--text-muted); }
-
-/* --- KPI / Stat cards --- */
-.kpi-grid {
-  display: grid; gap: var(--sp-4);
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  margin-bottom: var(--sp-5);
-}
-.kpi {
-  background: var(--surface-1); border: 1px solid var(--border);
-  border-radius: var(--r-md); padding: var(--sp-4);
-  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
-}
-.kpi-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
-.kpi-label { color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
-.kpi-value { font-size: 28px; font-weight: 800; }
-.kpi-sub { font-size: 12px; color: var(--text-faint); }
-/* legacy dashboard stat classes -> new look */
-.stats-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); margin-bottom: var(--sp-5); }
-.stat-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); display: flex; align-items: center; gap: var(--sp-4); }
-.stat-info { display: flex; flex-direction: column; }
-.stat-value { font-size: 26px; font-weight: 800; }
-.stat-label { color: var(--text-muted); font-size: 13px; }
-.dashboard-section { margin-top: var(--sp-5); }
-.quick-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
-
 /* --- Ticket Card (ersetzt Tabelle) --- */
 .tickets-list { display: flex; flex-direction: column; gap: var(--sp-3); }
 .tcard {
@@ -1268,7 +559,7 @@ textarea.form-control {
   background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
 }
 .worksheet-summary strong { color: var(--text); }
-.worksheet-summary .open { color: #fb923c; font-weight: 700; }
+.worksheet-summary .open { color: var(--orange-fg); font-weight: 700; }
 .tcard-side { display: flex; align-items: center; gap: var(--sp-3); }
 .tcard-detail { border-top: 1px solid var(--border); padding: var(--sp-4); background: var(--surface-1); }
 .chevron { color: var(--text-muted); transition: transform 0.2s ease; }
@@ -1294,22 +585,8 @@ textarea.form-control {
 /* --- Suchfeld --- */
 .search-input { flex: 1; min-width: 200px; }
 
-/* --- Tab restyle (ruhiger) --- */
-.ticket-tabs { border-bottom-color: var(--border); }
-.ticket-tab { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
-.ticket-tab:hover { background: var(--surface-hover); color: var(--text); }
-.ticket-tab-active { background: var(--accent); color: #06231a; }
-
-/* --- Soften legacy cards/forms --- */
-.card { background: var(--surface-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md); }
-.card-header { background: var(--surface-2); border-bottom: 1px solid var(--border); }
-.modern-card { background: var(--surface-1); border: 1px solid var(--border); }
-.modern-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
-.form-control, .form-select { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--r-sm); }
-.form-control:focus, .form-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
-.footer { background: var(--surface-1); border-top: 1px solid var(--border); padding: var(--sp-4); margin-top: 0; }
-
 /* --- Utilities --- */
+/* NEU-ANFANG: Hilfsklassen (P1 Task 2), Benutzer folgen mit den neuen Bausteinen */
 .num { font-variant-numeric: tabular-nums; }
 .muted { color: var(--text-2); }
 .faint { color: var(--text-3); }
@@ -1317,11 +594,11 @@ textarea.form-control {
 .xs { font-size: 12px; line-height: 16px; }
 .strong { font-weight: 600; }
 .nowrap { white-space: nowrap; }
+/* NEU-ENDE */
 .flex { display: flex; }
-.flex-col { display: flex; flex-direction: column; }
 .items-center { align-items: center; }
 .justify-between { justify-content: space-between; }
-.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
+.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
 .grow { flex: 1; min-width: 0; }
 .wrap { flex-wrap: wrap; }
 .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
@@ -1342,7 +619,7 @@ textarea.form-control {
 /* Neues Ticket: Datum + Uhrzeit nebeneinander (heller Kalender, kein color-scheme: dark) */
 .datetime-pair { display: flex; gap: 8px; }
 .datetime-pair .form-control, .datetime-pair .input { flex: 1; min-width: 0; }
-.datetime-pair input[type="date"] { cursor: pointer; }
+.datetime-pair input[type="date"] { flex: 1.3; cursor: pointer; }
 
 /* Autovervollstaendigung (Requested by / Requested for) */
 .autocomplete { position: relative; }
@@ -1713,7 +990,6 @@ textarea.form-control {
 .fin-form-field { min-width: 0; }
 .fin-form-hint { font-size: 12px; overflow-wrap: anywhere; }
 .fin-field-error { font-size: 13px; font-weight: 600; color: var(--danger); overflow-wrap: anywhere; }
-.fin-form-field .form-control[aria-invalid="true"] { border-color: var(--danger) !important; }
 .fin-input-amount { text-align: right; font-variant-numeric: tabular-nums; }
 .fin-counter { margin: -6px 0 var(--sp-3); text-align: right; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
 .fin-counter-over { color: var(--danger); font-weight: 700; }
@@ -1741,3 +1017,173 @@ textarea.form-control {
   .fin-form-grid { grid-template-columns: minmax(0, 1fr); }
   .fin-bank-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
 }
+
+/* ===== KOMPAT (bis P10) ===== */
+/* Uebergangsschicht: alte Klassen im neuen Look, damit Seiten und Dialoge, die noch nicht umgebaut sind, weiss, kastenlos */
+/* und lesbar bleiben. Steht am Dateiende und gewinnt dort gegen die Altregeln und gegen die anderen Stylesheets (global.css */
+/* wird zuletzt geladen). P10 loescht den ganzen Block. */
+
+/* Abschnitt statt Karte (.ui-card*) */
+.ui-card { background: none; border: 0; border-radius: 0; box-shadow: none; }
+.ui-card.pad { padding: 12px 0; }
+.ui-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0 8px; }
+.ui-card-head h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
+.ui-card-body { padding: 4px 0 12px; }
+
+/* Knoepfe (.ui-btn*) wie .btn / .btn-primary / .link-danger */
+.ui-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius);
+  font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer;
+  background: var(--bg); color: var(--text); box-shadow: var(--ring);
+  transition: background-color 0.12s, box-shadow 0.12s;
+}
+.ui-btn:hover { background: var(--bg-hover); }
+.ui-btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-btn); }
+.ui-btn-primary:hover { background: var(--accent-hover); }
+.ui-btn-danger { background: none; box-shadow: none; padding: 0 4px; color: var(--danger); }
+.ui-btn-danger:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
+.btn-dark, .btn-teal, .btn-green { background: var(--accent); color: #fff; box-shadow: var(--shadow-btn); }
+.btn-dark:hover, .btn-teal:hover, .btn-green:hover { background: var(--accent-hover); }
+
+/* Formular (.form-group, .form-label, .form-control) wie .field, Beschriftung und .input / .select / .textarea */
+.form-group { margin-bottom: 16px; }
+.form-label { display: block; margin-bottom: 6px; font-weight: 500; }
+.form-control {
+  display: block; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius);
+  background: var(--bg); box-shadow: var(--ring); outline: none; transition: box-shadow 0.12s; min-width: 0;
+}
+.form-control::placeholder { color: var(--text-3); }
+.form-control:focus { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-ring); }
+.form-control[readonly] { background: var(--bg-subtle); }
+textarea.form-control { height: auto; min-height: 96px; padding: 8px 10px; resize: vertical; line-height: 20px; }
+select.form-control {
+  padding-right: 28px; appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
+  background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px; background-size: 4px 4px; background-repeat: no-repeat;
+}
+
+/* Abzeichen: .badge-*, .status-*, .priority-* auf die Badge-Toene (die Form kommt von .badge bzw. dem Inline-Stil) */
+.badge-muted, .status-open { background: var(--grey-bg); color: var(--grey-fg); }
+.badge-info, .status-working { background: var(--blue-bg); color: var(--blue-fg); }
+.badge-warn, .status-awaiting { background: var(--orange-bg); color: var(--orange-fg); }
+.status-assigned { background: var(--violet-bg); color: var(--violet-fg); }
+.badge-ok { background: var(--green-bg); color: var(--green-fg); }
+.badge-danger, .priority-critical { background: var(--red-bg); color: var(--red-fg); }
+.status-closed { background: none; color: var(--text-2); }
+
+/* Alt-Dialoge: .overlay mit .overlay-content scrollt, wenn die Box hoeher ist als das Fenster. Geschrieben als :has(), */
+/* damit die Grundregel .overlay des neuen Dialogs (.overlay > .dialog) einzigartig bleibt. Ohne Einblend-Animation wie bisher. */
+.overlay:has(> .overlay-content) { overflow-y: auto; align-items: flex-start; padding: 24px 16px; background: var(--overlay); animation: none; }
+.overlay-content {
+  width: 100%; max-width: 520px; margin: 0 auto; padding: 24px;
+  background: var(--bg); color: var(--text); border-radius: 12px; box-shadow: var(--shadow-pop);
+}
+.overlay-content.fin-dialog { max-width: 760px; }
+.overlay-close {
+  position: fixed; top: 16px; right: 16px; z-index: 1;
+  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
+  border-radius: 50%; background: var(--bg); color: var(--text-2); box-shadow: var(--shadow-btn);
+  font-size: 20px; line-height: 1; cursor: pointer;
+}
+.overlay-close:hover { color: var(--text); background: var(--bg-hover); }
+
+/* Reiter (Tabs.jsx): Unterstrich statt Kasten wie .tabs / .tab */
+.ticket-tabs { display: flex; gap: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
+.ticket-tab { margin-bottom: -1px; padding: 8px 0 10px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; white-space: nowrap; }
+.ticket-tab:hover { color: var(--text); }
+.ticket-tab-active, .ticket-tab-active:hover { border-bottom-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
+.ticket-tab-content { min-height: 120px; }
+
+/* Umschalter */
+.seg button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(26,31,54,.12), 0 0 0 1px rgba(26,31,54,.04); }
+
+/* Textfarben und Fehlerzeile (.text-white allein bekommt keine Regel) */
+.bg-red { background: none; color: var(--red-fg); font-size: 13px; }
+.text-grey { color: var(--text-2); }
+.text-red { color: var(--red-fg); }
+
+/* Zaehler und Initiale der Altlisten: .side-count bis P6 (Chat-Liste), .side-logo bis P4 (Kundenliste) */
+.side-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
+.side-logo {
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px;
+  border-radius: var(--radius); background: var(--grey-bg); color: var(--grey-fg); font-weight: 600;
+}
+
+/* Altes Menue (Navbar.jsx) unveraendert aus dem Altbestand: Task 5 ersetzt das Menue und loescht diesen Teil. Ohne ihn faellt das */
+/* Alt-Geruest (.app-shell) zusammen; .side.collapsed gilt auf dem Handy (lib/sidebar.js). */
+.side {
+  width: var(--sidebar-w);
+  flex-shrink: 0;
+  background: linear-gradient(180deg, var(--surface-1), var(--bg));
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  transition: width 0.2s ease;
+}
+.side.collapsed { width: 72px; }
+.side-head {
+  display: flex; align-items: center; gap: var(--sp-3);
+  padding: var(--sp-4); border-bottom: 1px solid var(--border);
+  min-height: 64px;
+}
+.side-brand { font-weight: 800; font-size: 16px; letter-spacing: 0.2px; white-space: nowrap; }
+.side-brand small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
+.side-nav { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-2); }
+.side-group { margin-bottom: var(--sp-4); }
+.side.collapsed .side-link-label,
+.side.collapsed .side-brand { display: none; }
+.side-link {
+  display: flex; align-items: center; gap: var(--sp-3);
+  padding: 10px var(--sp-3); margin: 2px var(--sp-1);
+  border-radius: var(--r-sm); color: var(--text-muted);
+  text-decoration: none; transition: all 0.15s ease; white-space: nowrap;
+}
+.side-link svg { width: 20px; height: 20px; flex-shrink: 0; }
+.side-link:hover { background: var(--surface-2); color: var(--text); }
+.side-link-paused, .side-link-paused:hover { opacity: 0.45; cursor: not-allowed; background: transparent; color: var(--text-muted); }
+.side-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.side-sublink { padding-left: calc(var(--sp-3) + 18px); font-size: 13.5px; }
+.side-sublink svg { width: 17px; height: 17px; }
+.side.collapsed .side-sublink { padding-left: var(--sp-3); }
+.side.collapsed .side-count { position: absolute; margin: -18px 0 0 14px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
+.side.collapsed .side-sublink { position: relative; }
+.side-link.active svg { color: var(--accent); }
+.side-foot { border-top: 1px solid var(--border); padding: var(--sp-3); }
+.side-toggle {
+  background: transparent; border: none; color: var(--text-muted);
+  cursor: pointer; padding: var(--sp-2); border-radius: var(--r-sm);
+  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
+}
+.side-toggle:hover { background: var(--surface-2); color: var(--text); }
+
+/* Neutral: Karte, Raster, Aufklappmenue */
+.card { margin-bottom: 16px; background: none; border: 0; border-radius: 0; color: var(--text); }
+.card-header { padding: 0 0 8px; background: none; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 600; }
+.card-body { padding: 12px 0; color: var(--text); }
+div.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
+.col { padding: 0 8px; }
+.col-6 { width: 50%; }
+@media (max-width: 768px) { .col-6 { width: 100%; } }
+.dropdown { position: relative; display: inline-block; width: 100%; text-align: center; }
+.dropdown .btn { width: 100%; padding: 0 8px; font-size: 12px; box-shadow: none; }
+.dropdown-content {
+  display: none; position: absolute; left: 50%; transform: translateX(-50%); z-index: 100; min-width: 160px;
+  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow-pop); text-align: left;
+}
+.dropdown:hover .dropdown-content { display: block; }
+.dropdown-item { display: block; padding: 8px 16px; color: var(--text); cursor: pointer; }
+.dropdown-item:hover { background: var(--bg-hover); }
+
+/* Laden: neutraler grauer Ring */
+.spinner { width: 40px; height: 40px; margin: 0 auto; border: 4px solid var(--line); border-top-color: var(--text-2); border-radius: 50%; animation: spin 1s linear infinite; }
+
+/* Verschachtelte Seiten: Abstand und Breite des inneren Rahmens entfallen */
+.page .page, .page .main-content { margin: 0; padding: 0; max-width: none; }
+
+/* Links in Bestandsklassen, die bisher --accent als Farbe nutzten: feiner Unterstrich */
+.fin-link, .legal-files a, .credit-cols a, .area-rows a {
+  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; text-decoration-thickness: 1px;
+}
+.fin-link:hover, .legal-files a:hover, .credit-cols a:hover, .area-rows a:hover { text-decoration-color: currentColor; }
+/* ===== ENDE KOMPAT ===== */