App nach dem tradeo Design-System gestalten

Kopfzeile und primäre Aktionen in tradeo Blue, Poppins für Titel, Inter
für UI und Text, 8-px-Raster, Abschnitte durch Weißraum statt Kästen,
keine Symbole als Icon-Ersatz. Grautöne, Statusfarben, Radius und
Schriftgrößen legt das Design-System 0.1 noch nicht fest; sie stehen als
vorläufige, aus tradeo Blue abgeleitete Werte gesammelt in styles.css.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

CLAUDE.md

@@ -27,3 +27,6 @@ Wofür dieses Projekt gut ist, und was jemand wissen muss, der hier weiterarbeit
 - Wenig Abhängigkeiten — was Browser und Node schon können, reicht meistens
 - Semantisches HTML, mobil zuerst, bedienbar per Tastatur, ausreichender Kontrast
 - Konfiguration über Umgebungsvariablen; keine Zugangsdaten im Quelltext
+- Gestaltung nach dem tradeo Design-System in `docs/tradeo-design-system.md`: keine
+  eigenen Farben, Schriften oder Icons erfinden. Was dort noch offen ist, steht als
+  vorläufiger Wert im Block „Offene Designentscheidungen“ in `src/styles.css`.

docs/tradeo-design-system.md

@@ -0,0 +1,734 @@
+# tradeo Corporate Design System
+**Version:** 0.1 — Arbeitsstand  
+**Zweck:** Einheitliche visuelle Referenz für Mitarbeitende, Designer, Entwickler und KI/LLM-Systeme  
+**Geltungsbereich:** Primär interne Kommunikation; externe Nutzung nur vereinzelt
+
+---
+
+## 0. Grundsatz
+
+Dieses Dokument ist kein Inspirationskatalog, sondern ein verbindliches **Design-System**.
+
+Neue Gestaltungen werden nicht frei erfunden. Sie werden ausschließlich aus den hier definierten bzw. aus bestehenden tradeo-Komponenten zusammengesetzt.
+
+**Leitsatz:**  
+> Bestehende Komponenten kombinieren — keine neue visuelle Sprache erfinden.
+
+Wenn eine benötigte Komponente noch nicht definiert ist, wird sie zunächst in das Design-System aufgenommen und erst danach produktiv verwendet.
+
+---
+
+# 1. Markencharakter
+
+tradeo soll visuell wirken als:
+
+- technisch
+- reduziert
+- hochwertig
+- freundlich
+- minimalistisch
+- modern
+- professionell
+- ruhig
+- funktional
+
+## 1.1 Gestaltungsprinzipien
+
+### 1. Klarheit vor Dekoration
+Jedes Element braucht einen funktionalen Grund. Dekoration ohne Informations- oder Orientierungsfunktion wird vermieden.
+
+### 2. Funktion vor Spielerei
+Lesbarkeit, Orientierung und Verständlichkeit haben Vorrang vor visueller Originalität.
+
+### 3. Ruhe statt visueller Lautstärke
+Wenige Farben, klare Hierarchien, großzügige Abstände und kontrollierte Kontraste.
+
+### 4. Professionell, aber nicht kühl
+Die Gestaltung soll technisch und präzise sein, gleichzeitig aber zugänglich und freundlich wirken.
+
+### 5. Einheitlichkeit vor Einzelkreativität
+Ein neues Medium soll eindeutig als Teil von tradeo erkennbar sein, auch wenn kein Logo sichtbar ist.
+
+---
+
+# 2. Logo
+
+## 2.1 Primärlogo
+
+Das bestehende tradeo-Logo bleibt unverändert.
+
+**Erlaubt:**
+- Originaldarstellung
+- weiße Wortmarke auf tradeo-Blau
+- vorhandene, bereits eingesetzte Logo-Varianten
+
+**Nicht erlaubt:**
+- Verzerren
+- Strecken
+- Stauchen
+- Drehen
+- Umfärben außerhalb bestehender Varianten
+- Schatten hinzufügen
+- Konturen hinzufügen
+- Buchstaben einzeln verändern
+- neue Logo-Lockups erfinden
+
+## 2.2 Schutzraum
+
+Um das Logo ist immer ausreichend freie Fläche vorzusehen.
+
+Bis ein exakter Schutzraum anhand der Original-Logodatei definiert ist, gilt:
+
+> Keine Texte, Linien, Icons oder Rahmen unmittelbar an das Logo setzen.
+
+---
+
+# 3. Farben
+
+## 3.1 Bestätigte Primärfarbe
+
+### tradeo Blue
+- **HEX:** `#122E45`
+- **RGB:** `18 / 46 / 69`
+
+**Verwendung:**
+- zentrale Markenflächen
+- Header
+- Titelbereiche
+- primäre Buttons
+- Navigationsflächen
+- zentrale Beschilderungselemente
+- Hintergründe mit weißem Text
+
+tradeo Blue ist die visuell dominierende Markenfarbe.
+
+## 3.2 Weiß
+
+- **HEX:** `#FFFFFF`
+
+**Verwendung:**
+- Haupt-Hintergrund
+- Text auf tradeo Blue
+- ruhige Negativflächen
+- Karten und Inhaltsflächen
+
+## 3.3 Weitere Farben
+
+Weitere Farben und Gradients werden **nicht frei neu definiert**.
+
+Es dürfen ausschließlich Farbtöne und Verläufe verwendet werden, die bereits in bestehenden tradeo-Medien — insbesondere auf der Website — vorkommen und anschließend als verbindliche Tokens in dieses Dokument übernommen wurden.
+
+### Status: noch zu erfassen
+- sekundäre Blautöne
+- Grautöne
+- Website-Hintergrundfarben
+- vorhandene Gradients
+- bestehende Akzentfarben
+- funktionale Statusfarben
+
+---
+
+# 4. Typografie
+
+## 4.1 Primärschrift
+
+### Poppins
+
+Poppins ist die primäre tradeo-Schrift.
+
+**Bevorzugte Verwendung:**
+- Hauptüberschriften
+- Bereichsbezeichnungen
+- Schilder
+- kurze Labels
+- Titel
+- Key Messages
+- Navigation
+- prägnante Kennzeichnungen
+
+### Empfohlene Schnitte
+- **SemiBold / 600:** Hauptüberschriften
+- **Medium / 500:** Unterüberschriften und Labels
+- **Regular / 400:** kurze, ruhige Texte wenn Poppins eingesetzt wird
+
+---
+
+## 4.2 Sekundärschrift
+
+### Inter — vorgeschlagene Ergänzung
+
+Inter ergänzt Poppins als neutrale, professionelle Funktionsschrift.
+
+**Bevorzugte Verwendung:**
+- Fließtext
+- Tabellen
+- längere Beschreibungen
+- UI-Texte
+- Formulare
+- Daten
+- Präsentationsinhalte
+- technische Informationen
+
+### Empfohlene Schnitte
+- **Regular / 400:** Standardtext
+- **Medium / 500:** hervorgehobener Text
+- **SemiBold / 600:** Labels und wichtige UI-Informationen
+
+> Hinweis: Inter ist aktuell ein Vorschlag und sollte einmal intern freigegeben werden, bevor sie als verbindliche Zweitschrift gilt.
+
+---
+
+# 5. Typografische Hierarchie
+
+Die folgenden Rollen sind verbindlich. Die konkrete Größe wird je nach Medium skaliert.
+
+## Display / Hero
+- Schrift: Poppins
+- Gewicht: 600
+- Einsatz: große zentrale Aussage
+- maximal wenige Wörter
+- hoher Weißraumanteil
+
+## H1 / Seitentitel
+- Schrift: Poppins
+- Gewicht: 600
+- Einsatz: Hauptüberschrift eines Mediums
+
+## H2 / Abschnitt
+- Schrift: Poppins
+- Gewicht: 500–600
+- Einsatz: Untergliederung
+
+## Label
+- Schrift: Poppins oder Inter
+- Gewicht: 500–600
+- Einsatz: kurze funktionale Bezeichnungen
+
+## Body
+- Schrift: Inter
+- Gewicht: 400
+- Einsatz: Fließtext
+
+## Data / Table
+- Schrift: Inter
+- Gewicht: 400–500
+- Einsatz: Tabellen, Kennzahlen, Statusinformationen
+
+## Caption
+- Schrift: Inter
+- Gewicht: 400
+- Einsatz: Zusatzinformationen
+
+---
+
+# 6. Schreibweise
+
+## Standard
+- bevorzugt **Sentence case**
+- kurze Überschriften
+- klare Substantive und Verben
+- keine werbliche Übertreibung
+- keine unnötig lockere Jugendsprache
+
+## Vermeiden
+- ÜBERMÄSSIGE GROSSSCHREIBUNG
+- mehrere Ausrufezeichen
+- verspielte Sonderzeichen
+- unnötige Emojis
+- pseudo-technische Buzzwords
+- lange Textblöcke auf Schildern
+
+---
+
+# 7. Layout-System
+
+## 7.1 Grundprinzip
+
+Layouts folgen einer klaren visuellen Hierarchie:
+
+1. Orientierung
+2. Hauptinformation
+3. unterstützende Information
+4. Details
+
+Nicht alle vier Ebenen müssen verwendet werden.
+
+## 7.2 Ausrichtung
+
+**Standard:** linksbündig
+
+Zentrierung nur wenn:
+- eine einzelne Aussage im Mittelpunkt steht
+- keine mehrstufige Informationshierarchie vorhanden ist
+- die Komposition dadurch nachweislich ruhiger wird
+
+## 7.3 Weißraum
+
+Weißraum ist ein aktives Gestaltungsmittel.
+
+Elemente sollen nicht deshalb vergrößert oder ergänzt werden, nur weil Platz verfügbar ist.
+
+## 7.4 Informationsdichte
+
+Bevorzugt:
+- wenige Elemente
+- klare Gruppen
+- erkennbare Abstände
+- deutliche Hierarchie
+
+Vermeiden:
+- viele gleichgewichtete Elemente
+- flächendeckende Boxen
+- mehrere konkurrierende Überschriften
+- unnötige Rahmen
+
+---
+
+# 8. Spacing-System für digitale Medien
+
+Für UIs und digitale Layouts wird ein **8-Pixel-Grundraster** empfohlen.
+
+Typische Abstände:
+
+- `4 px` — Mikroabstand
+- `8 px` — eng zusammengehörige Elemente
+- `16 px` — Standardabstand
+- `24 px` — Gruppenabstand
+- `32 px` — Abschnitt
+- `48 px` — großer Abschnitt
+- `64 px+` — große Layouttrennung
+
+Abweichungen sind nur sinnvoll, wenn sie aus einem bestehenden tradeo-Layout übernommen werden.
+
+---
+
+# 9. Formen
+
+## Grundcharakter
+- geometrisch
+- sauber
+- weich genug, um freundlich zu wirken
+- nicht verspielt
+
+## Vermeiden
+- dekorative Freiformen
+- Comic-Elemente
+- übermäßige Rundungen
+- starke 3D-Effekte
+- visuell aggressive Rahmen
+
+Für digitale Interfaces sollen Radien konsistent verwendet werden.
+
+**Exakte Radius-Tokens:** noch anhand bestehender tradeo-UIs / Website festzulegen.
+
+---
+
+# 10. Gradients
+
+Gradients dürfen verwendet werden, wenn sie aus bestehenden tradeo-Medien übernommen sind.
+
+## Regeln
+- subtil
+- ruhig
+- innerhalb der bestehenden Farbwelt
+- keine Regenbogenverläufe
+- keine Neonwirkung
+- kein dominantes „Gaming“- oder „Web3“-Erscheinungsbild
+
+**Exakte Gradient-Tokens:** noch aus der Website zu extrahieren.
+
+---
+
+# 11. Icons
+
+Icons sind funktionale Orientierungselemente.
+
+## Bevorzugt
+- einheitliche Icon-Familie
+- reduzierte Formen
+- klare Silhouetten
+- konsistente Strichstärken
+- technisch-neutral
+
+## Nicht erlaubt
+- Mischung verschiedener Icon-Stile
+- Emoji als regulärer Icon-Ersatz
+- Cartoon-Icons
+- handgezeichnete Stilwechsel
+- dekorative Icons ohne Funktion
+
+**Verbindliche Icon-Familie:** noch festzulegen.
+
+---
+
+# 12. Fotografie und Bildsprache
+
+Wenn Fotos verwendet werden, sollen sie:
+
+- authentisch
+- technisch
+- sauber
+- ruhig
+- hochwertig
+- dokumentarisch
+- realistisch
+
+wirken.
+
+Bevorzugte Motive:
+- Mitarbeiter bei realer Arbeit
+- Hardware
+- Prozesse
+- Logistik
+- Technik
+- Arbeitsplatzsituationen
+- Details von Materialien und Produkten
+
+Vermeiden:
+- generische Stock-Fotografie
+- überinszenierte Business-Szenen
+- künstlich überschwängliche Gestik
+- stark verspielte Inszenierung
+- extreme Filter
+
+---
+
+# 13. Beschilderungen
+
+Beschilderungen haben besonders hohe Anforderungen an Verständlichkeit.
+
+## Prioritäten
+1. Erkennbarkeit
+2. Lesbarkeit
+3. Orientierung
+4. CI-Konsistenz
+5. Gestaltung
+
+## Grundaufbau
+
+**Ebene 1 — Hauptinformation**  
+z. B. `Wareneingang`
+
+**Ebene 2 — Funktion / Präzisierung**  
+z. B. `Anlieferung & Prüfung`
+
+**Ebene 3 — optionale Zusatzinformation**  
+z. B. Öffnungszeiten oder Prozesshinweis
+
+**Ebene 4 — optionale Kennzeichnung**  
+Icon, Nummer, Richtungspfeil
+
+## Regeln
+- möglichst nur eine zentrale Aussage
+- Poppins für Hauptinformation
+- hoher Kontrast
+- keine langen Texte
+- Symbole nur mit funktionalem Nutzen
+- keine unnötigen Zierrahmen
+- Pfeile und Orientierungselemente immer konsistent
+
+---
+
+# 14. Präsentationen
+
+## Grundprinzip
+Eine Folie = eine Kernaussage.
+
+## Gestaltung
+- Poppins für Titel
+- Inter für Inhalte
+- großzügiger Weißraum
+- wenig Text
+- visuelle Hierarchie statt Textmenge
+- Diagramme reduziert
+- tradeo Blue als primäre Markenfarbe
+
+## Nicht verwenden
+- dekorative PowerPoint-Effekte
+- WordArt
+- übermäßige Animationen
+- 3D-Diagramme
+- bunte SmartArt-Stile
+- Clipart
+
+---
+
+# 15. Thumbnails und Banner
+
+## Ziel
+Schnell erfassbare zentrale Aussage.
+
+## Aufbau
+- starke Headline
+- maximal wenige unterstützende Elemente
+- klare Bild-/Text-Hierarchie
+- tradeo-Farbwelt
+- Poppins dominant
+
+## Nicht verwenden
+- Meme-Ästhetik
+- Clickbait-Stil
+- schrille Farben
+- zu viele Textblöcke
+- mehrere konkurrierende Blickfänge
+
+---
+
+# 16. Interne Anwendungen und UIs
+
+tradeo-UIs sollen wie ein Teil derselben visuellen Organisation wirken.
+
+## Typografie
+- Poppins: Page Title / Module Title
+- Inter: Navigation, Tabellen, Formulare, Controls, Fließtext
+
+## Grundregeln
+- klare Navigation
+- wenige visuelle Ebenen
+- großzügige Abstände
+- einfache Statusdarstellung
+- konsistente Buttons
+- konsistente Karten
+- klare Interaktionszustände
+
+## Primäre Aktion
+Primäre Aktionen werden bevorzugt in tradeo Blue dargestellt.
+
+## Sekundäre Aktion
+Zurückhaltender als die primäre Aktion.
+
+## Destruktive Aktion
+Nur funktional markieren; niemals als dekorative Akzentfarbe verwenden.
+
+---
+
+# 17. Tabellen und Daten
+
+Daten sollen funktional und scanbar dargestellt werden.
+
+## Regeln
+- Inter verwenden
+- klare Spalten
+- Zahlen sauber ausrichten
+- dezente Trennlinien
+- geringe visuelle Dichte
+- Hervorhebung nur bei inhaltlicher Relevanz
+
+Vermeiden:
+- abwechselnd stark gefärbte Tabellenzeilen
+- dicke Rahmen
+- mehrere Akzentfarben
+- dekorative Tabellenköpfe
+
+---
+
+# 18. Do / Don't
+
+## DO
+- bestehende Komponenten wiederverwenden
+- wenige Farben einsetzen
+- klar hierarchisieren
+- großzügigen Weißraum lassen
+- Poppins bewusst einsetzen
+- technische Präzision zeigen
+- Inhalte schnell erfassbar machen
+- Vorlagen verwenden
+
+## DON'T
+- neue Farben spontan erfinden
+- neue Schriftarten einführen
+- verspielte Gestaltung verwenden
+- unnötige Icons ergänzen
+- Elemente stark dekorieren
+- mehrere Designsprachen mischen
+- „jung“, „hip“ oder „quirky“ gestalten
+- visuelle Trends ohne Bezug zu tradeo übernehmen
+
+---
+
+# 19. Entscheidungsregel für neue Medien
+
+Vor Freigabe eines neuen Mediums müssen folgende Fragen mit **Ja** beantwortet werden:
+
+- Verwendet es ausschließlich bestehende tradeo-Komponenten?
+- Ist die Hauptinformation sofort erkennbar?
+- Ist die visuelle Hierarchie eindeutig?
+- Ist die Anzahl der Farben minimal?
+- Ist die Typografie regelkonform?
+- Sind Abstände und Ausrichtungen konsistent?
+- Würde das Medium auch ohne Logo wie tradeo wirken?
+- Wirkt es technisch, reduziert, hochwertig, freundlich, minimalistisch und modern?
+
+Wenn eine Antwort **Nein** lautet, muss die Gestaltung überarbeitet werden.
+
+---
+
+# 20. Regel für KI / LLM-Systeme
+
+## Systemanweisung
+
+Bei der Erstellung visueller tradeo-Medien gilt:
+
+> Verwende ausschließlich die in diesem Corporate Design System beschriebenen bzw. als bestehend dokumentierten tradeo-Komponenten. Erfinde keine zusätzlichen Farben, Schriftarten, Gradients, Icons, Formen oder Stilrichtungen. Wenn eine benötigte Komponente nicht definiert ist, kennzeichne dies als offene Designentscheidung statt selbstständig eine neue Lösung einzuführen.
+
+## Prioritäten für KI-generierte Gestaltung
+
+1. CI-Konformität
+2. funktionale Verständlichkeit
+3. visuelle Hierarchie
+4. Lesbarkeit
+5. Konsistenz
+6. Ästhetik
+
+Ästhetische Originalität steht nicht über Konsistenz.
+
+---
+
+# 21. KI-Kurzprofil
+
+```yaml
+brand:
+  name: tradeo
+  character:
+    - technical
+    - reduced
+    - premium
+    - friendly
+    - minimalist
+    - modern
+    - professional
+
+principles:
+  - clarity_over_decoration
+  - function_over_playfulness
+  - calm_over_visual_noise
+  - consistency_over_individual_creativity
+  - reuse_existing_components_only
+
+colors:
+  primary:
+    name: tradeo_blue
+    hex: "#122E45"
+    rgb: [18, 46, 69]
+  white:
+    hex: "#FFFFFF"
+  rule: "Do not invent new brand colors. Use only documented existing tradeo colors."
+
+typography:
+  primary:
+    family: "Poppins"
+    roles:
+      - headlines
+      - labels
+      - signage
+      - key_messages
+  secondary:
+    family: "Inter"
+    status: "proposed"
+    roles:
+      - body
+      - ui
+      - tables
+      - data
+      - long_form_text
+
+layout:
+  default_alignment: left
+  whitespace: generous
+  visual_density: low
+  digital_spacing_base_px: 8
+
+style:
+  avoid:
+    - playful
+    - colorful
+    - childish
+    - unserious
+    - cartoon
+    - decorative_without_function
+    - excessive_shadows
+    - excessive_3d
+    - mixed_visual_languages
+
+generation_rule:
+  "Compose from existing components. Do not invent a new visual language."
+```
+
+---
+
+# 22. Medien-Matrix
+
+| Medium | Primärschrift | Sekundärschrift | Hauptziel |
+|---|---|---|---|
+| Beschilderung | Poppins | Inter optional | Orientierung |
+| Überschrift / Schriftzug | Poppins | — | Identifikation |
+| Präsentation | Poppins | Inter | Kommunikation |
+| Layout / Dokument | Poppins | Inter | Struktur |
+| Thumbnail | Poppins | Inter optional | schnelle Erfassung |
+| App / UI | Poppins | Inter | Bedienbarkeit |
+| Banner | Poppins | Inter optional | zentrale Aussage |
+| Tabelle / Dashboard | Poppins für Titel | Inter | Datenerfassung |
+
+---
+
+# 23. Noch zu definierende Design-Tokens
+
+Diese Punkte werden anhand bestehender tradeo-Materialien exakt ergänzt:
+
+- [ ] vollständige Farbpalette
+- [ ] Website-Gradients
+- [ ] Neutralfarben
+- [ ] exakte Typografiegrößen pro Medium
+- [ ] Zeilenhöhen
+- [ ] Letter Spacing
+- [ ] Corner Radii
+- [ ] Border Styles
+- [ ] Shadow Styles
+- [ ] Icon-Familie
+- [ ] Pfeil-System
+- [ ] Logo-Schutzraum
+- [ ] Mindestgröße Logo
+- [ ] Print-Farbwerte
+- [ ] RAL-Farben für physische Beschilderung
+- [ ] Standardformate für Schilder
+- [ ] Präsentationsmaster
+- [ ] UI-Komponenten
+- [ ] Thumbnail-Templates
+- [ ] Banner-Templates
+
+---
+
+# 24. Geplante Template-Bibliothek
+
+Langfristig sollte dieses Design-System durch konkrete Referenz-Templates ergänzt werden:
+
+1. Türschild
+2. Bereichsschild
+3. Regal-/Lagerplatzkennzeichnung
+4. Maschinen-/Arbeitsplatzkennzeichnung
+5. Lean-/Shopfloor-Board
+6. Prozesshinweis
+7. SOP-Titelblatt
+8. Präsentationsfolie
+9. Thumbnail
+10. Banner
+11. Dashboard
+12. interne Web-App
+13. Formulare
+14. Tabellen
+15. Informationskarte
+
+---
+
+# 25. Versionierung
+
+Änderungen an Farben, Typografie oder zentralen Design-Tokens werden dokumentiert.
+
+Empfohlenes Schema:
+
+- `0.x` — Aufbau / Entwicklung
+- `1.0` — erste freigegebene CI
+- `1.x` — Ergänzungen ohne grundlegenden Stilwechsel
+- `2.0` — grundlegende visuelle Änderung
+
+**Aktueller Stand:** `0.1`

index.html

@@ -6,7 +6,7 @@
   <title>FuerDieCuts</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 </head>
 <body>
   <div id="root"></div>

src/ProjectView.jsx

@@ -215,7 +215,7 @@ export default function ProjectView({ id, onBack }) {
                         aria-expanded={isOpen('voice')}
                         onClick={() => toggleOpen(clip.index, 'voice')}
                       >
-                        {hasVoice ? '● Voice-over' : 'Voice-over'}
+                        {hasVoice ? 'Voice-over bearbeiten' : 'Voice-over aufnehmen'}
                       </button>
                     </span>
                   )}

src/VoiceOver.jsx

@@ -180,7 +180,7 @@ export default function VoiceOver({ project, clip, settings, onProject, onVolume
       )}
       {phase === 'recording' && (
         <p className="recording" aria-live="polite">
-          ● Aufnahme läuft
+          Aufnahme läuft
         </p>
       )}
       {phase === 'uploading' && <p className="muted">Wird gespeichert …</p>}

src/styles.css

@@ -1,48 +1,47 @@
+/*
+ * Gestaltung nach dem tradeo Corporate Design System 0.1 (docs/tradeo-design-system.md).
+ *
+ * Verbindlich definiert und hier umgesetzt: tradeo Blue, Weiß, Poppins für Titel,
+ * Inter für UI und Text, 8-px-Raster, linksbündig, primäre Aktion in tradeo Blue.
+ */
 :root {
-  --bg: #f4f4f2;
+  /* --- Bestätigte tradeo-Tokens --- */
-  --surface: #ffffff;
+  --tradeo-blue: #122e45;
-  --text: #1c1c1a;
+  --white: #ffffff;
-  --muted: #5e5e58;
+  --font-heading: 'Poppins', system-ui, sans-serif;
-  --border: #d9d9d4;
+  /* Inter ist laut Design-System 0.1 vorgeschlagen, aber noch nicht freigegeben. */
-  --accent: #1f6f4a;
+  --font-ui: 'Inter', system-ui, sans-serif;
-  --accent-text: #ffffff;
+
-  --error: #b3261e;
+  --space-1: 4px;
-  --warn-bg: #fff4d6;
+  --space-2: 8px;
-  --warn-text: #6b4e00;
+  --space-3: 16px;
-  --radius: 10px;
+  --space-4: 24px;
+  --space-5: 32px;
+  --space-6: 48px;
+  --space-7: 64px;
+
+  /*
+   * --- OFFENE DESIGNENTSCHEIDUNGEN (Design-System Abschnitt 23) ---
+   * Vorläufige Werte, bis tradeo sie festlegt. Neutraltöne sind Abstufungen
+   * von tradeo Blue auf Weiß; Kontraste gegen Weiß in Klammern.
+   */
+  --neutral-text: #546979; /* Blue 72 % (5,7:1) – Hilfstexte */
+  --neutral-control: #71828f; /* Blue 60 % (4,0:1) – Ränder von Eingabefeldern */
+  --neutral-line: #d9dee1; /* Blue 16 % – Trennlinien */
+  --neutral-surface: #f6f7f8; /* Blue 4 % – ruhige Hintergrundfläche */
+  --primary-hover: #364d61; /* Blue 85 % – Hover der primären Aktion */
+  --status-error: #b3261e; /* Statusfarbe Fehler (6,5:1) */
+  --status-warning-bg: #fff4d6; /* Statusfarbe Warnung */
+  --status-warning-text: #6b4e00; /* (7,1:1 auf Warnfläche) */
+  --radius: 8px; /* Corner Radius */
+  --text-h1: 28px; /* Typografiegrößen und Zeilenhöhen */
+  --text-h2: 20px;
+  --text-body: 16px;
+  --text-small: 14px;
+
   color-scheme: light;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
-    --bg: #151514;
-    --surface: #1f1f1d;
-    --text: #ecece8;
-    --muted: #a3a39c;
-    --border: #34342f;
-    --accent: #4cc38a;
-    --accent-text: #0d1f16;
-    --error: #ff8a80;
-    --warn-bg: #3a300f;
-    --warn-text: #f3d77a;
-    color-scheme: dark;
-  }
-}
-
-:root[data-theme='dark'] {
-  --bg: #151514;
-  --surface: #1f1f1d;
-  --text: #ecece8;
-  --muted: #a3a39c;
-  --border: #34342f;
-  --accent: #4cc38a;
-  --accent-text: #0d1f16;
-  --error: #ff8a80;
-  --warn-bg: #3a300f;
-  --warn-text: #f3d77a;
-  color-scheme: dark;
-}
-
 *,
 *::before,
 *::after {
@@ -51,236 +50,375 @@
 
 body {
   margin: 0;
-  background: var(--bg);
+  background: var(--white);
-  color: var(--text);
+  color: var(--tradeo-blue);
-  font-family: 'Inter Tight', system-ui, sans-serif;
+  font-family: var(--font-ui);
-  font-size: 16px;
+  font-size: var(--text-body);
   line-height: 1.5;
 }
 
-h1 {
+h1,
-  margin: 0 0 0.5rem;
+h2 {
-  font-size: 1.4rem;
+  font-family: var(--font-heading);
-}
-
-button {
-  font: inherit;
-  padding: 0.6rem 1.1rem;
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  background: var(--accent);
-  color: var(--accent-text);
-  cursor: pointer;
-}
-
-button.secondary {
-  background: transparent;
-  color: var(--text);
-  border-color: var(--border);
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-input {
-  font: inherit;
-  padding: 0.6rem 0.8rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg);
-  color: var(--text);
-}
-
-:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.5rem;
-}
-
-.error {
-  color: var(--error);
-  min-height: 1.5em;
   margin: 0;
 }
 
-.login {
+h1 {
-  min-height: 100vh;
+  font-size: var(--text-h1);
-  display: grid;
+  font-weight: 600;
-  place-items: center;
+  line-height: 1.25;
-  padding: 16px;
 }
 
-.login-card {
-  width: 100%;
-  max-width: 320px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.login-card input {
-  font-size: 1.4rem;
-  letter-spacing: 0.3em;
-  text-align: center;
-}
-
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--surface);
-}
-
-.brand {
-  font-weight: 700;
-  background: none;
-  border: none;
-  color: var(--text);
-  padding: 0.25rem 0;
-}
-
-.content {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 1.5rem 16px;
-}
-
-
 h2 {
-  margin: 0;
+  font-size: var(--text-h2);
-  font-size: 1.1rem;
+  font-weight: 500;
+  line-height: 1.3;
 }
 
 p {
   margin: 0;
 }
 
-.muted {
+/* --- Aktionen --- */
-  color: var(--muted);
+
+button,
+a.button {
+  display: inline-block;
+  font: inherit;
+  font-weight: 500;
+  line-height: 1.25;
+  padding: 12px var(--space-3);
+  border: 1px solid var(--tradeo-blue);
+  border-radius: var(--radius);
+  background: var(--tradeo-blue);
+  color: var(--white);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+button:hover:not(:disabled),
+a.button:hover {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
+}
+
+/* Sekundär: zurückhaltender als die primäre Aktion */
+button.secondary {
+  background: var(--white);
+  color: var(--tradeo-blue);
+  border-color: var(--neutral-control);
+}
+
+button.secondary:hover:not(:disabled) {
+  background: var(--neutral-surface);
+  border-color: var(--tradeo-blue);
+}
+
+/* Destruktiv: nur funktional markiert */
+button.danger {
+  background: var(--white);
+  color: var(--status-error);
+  border-color: var(--neutral-control);
+}
+
+button.danger:hover:not(:disabled) {
+  background: var(--neutral-surface);
+  border-color: var(--status-error);
+}
+
+button.small {
+  padding: var(--space-2) 12px;
+  font-size: var(--text-small);
+}
+
+button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+:focus-visible {
+  outline: 2px solid var(--tradeo-blue);
+  outline-offset: 2px;
+}
+
+/* --- Formularelemente --- */
+
+input:not([type]),
+input[type='password'],
+input[type='date'],
+input[type='text'] {
+  font: inherit;
+  padding: 10px 12px;
+  border: 1px solid var(--neutral-control);
+  border-radius: var(--radius);
+  background: var(--white);
+  color: var(--tradeo-blue);
+}
+
+input[type='checkbox'],
+input[type='range'],
+progress {
+  accent-color: var(--tradeo-blue);
+}
+
+input[type='checkbox'] {
+  width: 20px;
+  height: 20px;
+  margin: 2px 0 0;
+  flex-shrink: 0;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-size: var(--text-small);
+  font-weight: 500;
+}
+
+/* --- Grundlayout --- */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: 12px var(--space-3);
+  background: var(--tradeo-blue);
+  color: var(--white);
+}
+
+.brand {
+  font-family: var(--font-heading);
+  font-size: 18px;
+  font-weight: 600;
+  background: none;
+  border: none;
+  padding: var(--space-1) 0;
+  color: var(--white);
+}
+
+.brand:hover:not(:disabled) {
+  background: none;
+}
+
+/* Sekundäre Aktion auf tradeo Blue */
+.topbar button.secondary {
+  background: transparent;
+  color: var(--white);
+  border-color: var(--white);
+}
+
+.topbar button.secondary:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+
+.topbar :focus-visible {
+  outline-color: var(--white);
+}
+
+.content {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: var(--space-5) var(--space-3) var(--space-7);
 }
 
 .stack {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: var(--space-4);
 }
 
 .stack-tight {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--space-2);
 }
 
 .actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: var(--space-2);
   align-items: flex-end;
 }
 
 .heading-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: var(--space-3);
-  align-items: center;
+  align-items: baseline;
   justify-content: space-between;
 }
 
-.heading-row h1 {
+/* Abschnitte: durch Weißraum und eine Trennlinie gegliedert, ohne Boxen */
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--neutral-line);
+}
+
+.muted {
+  color: var(--neutral-text);
+}
+
+.error {
+  color: var(--status-error);
   margin: 0;
 }
 
-.field {
+.error:empty {
-  display: flex;
+  display: none;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.9rem;
-  color: var(--muted);
-}
-
-button.small {
-  padding: 0.3rem 0.7rem;
-  font-size: 0.9rem;
-}
-
-button.danger {
-  background: transparent;
-  color: var(--error);
-  border-color: var(--error);
 }
 
 .warning {
-  background: var(--warn-bg);
+  background: var(--status-warning-bg);
-  color: var(--warn-text);
+  color: var(--status-warning-text);
-  padding: 0.6rem 0.8rem;
+  padding: 12px var(--space-3);
   border-radius: var(--radius);
 }
 
+/* --- Anmeldung --- */
+
+.login {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: var(--space-3);
+  background: var(--tradeo-blue);
+}
+
+.login-card {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-5);
+  border-radius: var(--radius);
+  background: var(--white);
+}
+
+.login-card label {
+  font-weight: 500;
+}
+
+.login-card input {
+  font-size: 22px;
+  letter-spacing: 0.3em;
+}
+
+/* --- Startseite --- */
+
+.project-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--neutral-line);
+}
+
+.project-list li {
+  border-bottom: 1px solid var(--neutral-line);
+}
+
+.project-card {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-1);
+  padding: var(--space-3) 0;
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: 0;
+  color: var(--tradeo-blue);
+}
+
+.project-card:hover:not(:disabled) {
+  background: var(--neutral-surface);
+}
+
+.project-card strong {
+  font-family: var(--font-heading);
+  font-weight: 500;
+}
+
+/* --- Import --- */
+
 .days {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--space-2);
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .days li {
-  padding: 0.25rem 0.6rem;
+  padding: var(--space-1) 12px;
-  border: 1px solid var(--border);
+  border: 1px solid var(--neutral-line);
-  border-radius: 999px;
+  border-radius: var(--radius);
-  font-size: 0.9rem;
+  font-size: var(--text-small);
+  font-variant-numeric: tabular-nums;
 }
 
 .days li.warn {
-  background: var(--warn-bg);
+  background: var(--status-warning-bg);
-  color: var(--warn-text);
+  color: var(--status-warning-text);
-  border-color: transparent;
+  border-color: var(--status-warning-bg);
 }
 
+.badge {
+  font-size: 13px;
+  font-weight: 500;
+  padding: 2px var(--space-2);
+  border-radius: var(--radius);
+  background: var(--status-warning-bg);
+  color: var(--status-warning-text);
+}
+
+.progress-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+progress {
+  width: 100%;
+  height: 8px;
+}
+
+/* --- Clip-Liste --- */
+
 .clip-list {
   list-style: none;
   margin: 0;
   padding: 0;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--neutral-line);
 }
 
 .clip-list li {
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--neutral-line);
-  padding: 0.5rem 0;
+  padding: 12px 0;
 }
 
 .clip-list label,
 .clip-row {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-start;
-  gap: 0.25rem 0.75rem;
+  gap: var(--space-1) 12px;
 }
 
 .clip-list label {
   cursor: pointer;
 }
 
-.clip-list input[type='checkbox'] {
-  width: 1.2rem;
-  height: 1.2rem;
-  accent-color: var(--accent);
-}
-
 .clip-time {
   font-variant-numeric: tabular-nums;
-  color: var(--muted);
+  color: var(--neutral-text);
   white-space: nowrap;
 }
 
@@ -290,17 +428,25 @@ button.danger {
   overflow-wrap: anywhere;
 }
 
-.clip-size {
+.clip-text strong {
-  white-space: nowrap;
+  font-weight: 600;
-  font-size: 0.9rem;
 }
 
-.badge {
+.clip-size {
-  font-size: 0.8rem;
+  white-space: nowrap;
-  padding: 0.1rem 0.5rem;
+  font-size: var(--text-small);
-  border-radius: 999px;
+  font-variant-numeric: tabular-nums;
-  background: var(--warn-bg);
+}
-  color: var(--warn-text);
+
+.clip-list li.excluded .clip-text,
+.clip-list li.excluded .clip-time {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+
+.has-voice {
+  border-color: var(--tradeo-blue);
+  font-weight: 600;
 }
 
 .preview {
@@ -310,85 +456,31 @@ button.danger {
   border-radius: var(--radius);
 }
 
-.progress-block {
+/* --- Schnitt-Einstellungen --- */
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-progress {
-  width: 100%;
-  height: 0.75rem;
-  accent-color: var(--accent);
-}
-
-.project-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.project-card {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.25rem;
-  text-align: left;
-  background: var(--surface);
-  color: var(--text);
-  border: 1px solid var(--border);
-}
-
-a.button {
-  display: inline-block;
-  padding: 0.6rem 1.1rem;
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  background: var(--accent);
-  color: var(--accent-text);
-  text-decoration: none;
-}
 
 .option {
   display: flex;
-  gap: 0.6rem;
+  gap: 12px;
   align-items: flex-start;
   cursor: pointer;
 }
 
 .option.disabled {
   cursor: default;
-  opacity: 0.75;
-}
-
-.option input,
-.clip-row input[type='checkbox'] {
-  width: 1.2rem;
-  height: 1.2rem;
-  margin-top: 0.15rem;
-  flex-shrink: 0;
-  accent-color: var(--accent);
 }
 
 .option-group {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--space-2);
 }
 
 .asset-field {
-  margin-left: 1.8rem;
+  margin-left: 32px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem 1rem;
+  gap: var(--space-2) var(--space-3);
-  padding: 0.6rem 0.8rem;
-  border: 1px dashed var(--border);
-  border-radius: var(--radius);
 }
 
 .asset-field progress {
@@ -397,19 +489,22 @@ a.button {
 
 .mixer {
   display: grid;
-  gap: 0.75rem;
+  gap: 12px;
 }
 
 .slider {
   display: grid;
   grid-template-columns: minmax(7rem, 11rem) 1fr 2.5rem;
   align-items: center;
-  gap: 0.75rem;
+  gap: 12px;
+}
+
+.slider label {
+  font-weight: 500;
 }
 
 .slider input {
   width: 100%;
-  accent-color: var(--accent);
 }
 
 .slider output {
@@ -418,7 +513,30 @@ a.button {
 }
 
 .slider.disabled {
-  opacity: 0.5;
+  opacity: 0.45;
+}
+
+.voice-over {
+  padding: var(--space-3);
+  border-radius: var(--radius);
+  background: var(--neutral-surface);
+}
+
+.countdown {
+  font-family: var(--font-heading);
+  font-size: 40px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.recording {
+  color: var(--status-error);
+  font-weight: 600;
+}
+
+.blockers {
+  margin: 0;
+  padding-left: var(--space-5);
 }
 
 @media (max-width: 480px) {
@@ -434,37 +552,3 @@ a.button {
     margin-left: 0;
   }
 }
-
-.clip-list li.excluded .clip-text,
-.clip-list li.excluded .clip-time {
-  opacity: 0.5;
-  text-decoration: line-through;
-}
-
-.has-voice {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-.voice-over {
-  padding: 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg);
-}
-
-.countdown {
-  font-size: 2.5rem;
-  font-weight: 700;
-  text-align: center;
-}
-
-.recording {
-  color: var(--error);
-  font-weight: 700;
-}
-
-.blockers {
-  margin: 0;
-  padding-left: 1.8rem;
-}