/* ============================================================ Caltrix App CSS — Design-Tokens + Komponenten Quelle der Tokens: mockup/styles/tokens.css Quelle der Komponenten: mockup/styles/shared.css ============================================================ */ /* ── Design Tokens ── */ :root { --primary: #1f628e; --primary-mid: #2a7aad; --primary-dark: #195170; --accent: #e09d71; --accent-dark: #c07a45; --green: #7ad180; --cream: #ecdcc8; --danger: #e05353; --warning: #f59e0b; --bg: #fdfcfb; --surface: #f8f4ef; --white: #ffffff; --text: #1a2e3b; --muted: #6c869e; --border: #e4d9ce; --fh: 'DM Sans', system-ui, sans-serif; --fb: 'Lora', Georgia, serif; --r-xs: 4px; --header-h: 56px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 9999px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05); /* Semantische Tokens (zuvor verstreut hartkodiert — Werte unverändert). Quelle gespiegelt in mockup/styles/tokens.css. */ --primary-light: #e6f0f8; /* aktive Nav, Primary-Pills, Hover-Flächen */ --primary-border: #c3ddf0; /* Rahmen auf Primary-Tints (z. B. Admin-Tag) */ --ring: rgba(31,98,142,0.10); /* Fokus-/Aktiv-Ring */ --success: #2d8a37; --success-bg: #f0faf0; --success-border: #b4e6b8; --danger-bg: #fdf2f2; --danger-border: #f8c5c5; --warning-text: #9a4a0f; --warning-bg: #fffbeb; --warning-border: #fcd34d; --expert: #6d28d9; --expert-bg: #f5f0ff; --accent-bg: #fef3e8; /* Advanced-Level-Fläche */ --accent-border: #f8d8b8; /* Rand auf --accent-bg */ /* Hinweis-Meldung. Stand bis zur Token-Runde hartkodiert in `.alert-info` und leuchtete darum im Dunkelmodus weiter hellblau. */ --info: #1e40af; --info-bg: #eff6ff; --info-border: #bfdbfe; /* Text der Basic-Stufe auf `--primary-light`. Ebenfalls hartkodiert gewesen: ein dunkles Blau, das im Dunkelmodus auf dunklem Grund verschwand. */ --level-basic: #1a5a8a; /* ── Markenzeichen (2×2-Raster) ── Eigene Tokens und BEWUSST nicht `--primary`/`--accent`: Das Zeichen muss in App und auf caltrix.de identisch aussehen, `--primary` dagegen überschreibt jeder White-Label-Mandant per Inline-Style auf . Hingen die Felder an `--primary`, trüge ein Mandant mit eigener Farbe ein umgefärbtes Caltrix- Zeichen — genau der Bruch, den das Logo-Dokument ausschließt. */ --brand-mark: #163A5F; /* drei Felder, Tiefblau */ --brand-mark-accent: #E8A33D; /* viertes Feld, Amber */ color-scheme: light; } /* Tenant-Branding überschreibt --primary */ /* (wird per Inline-Style auf gesetzt) */ /* ── Dark Mode ── Phase 1: vollständiges Variablen-Set, app-weit lesbar. Visuelles Feintuning (z. B. Akzent-Pastelltöne) darf in einer späteren Iteration folgen. Aktiviert über .dark auf (Anti-Flicker-Inline-Script im Layout-). */ html.dark { --bg: #14181c; --surface: #1b2127; --white: #232b32; /* „erhabene" Fläche: Karten, Inputs, Header */ --text: #e7eef4; --muted: #93a6b8; --border: #313b44; --primary-light: rgba(84,145,184,0.18); --primary-border: rgba(84,145,184,0.38); --ring: rgba(132,179,207,0.30); --success: #5fbf6a; --success-bg: rgba(95,191,106,0.13); --success-border: rgba(95,191,106,0.32); --danger-bg: rgba(224,83,83,0.15); --danger-border: rgba(224,83,83,0.36); --warning-text: #e0a44a; --warning-bg: rgba(245,158,11,0.13); --warning-border: rgba(245,158,11,0.32); --expert: #b794f6; --expert-bg: rgba(124,58,237,0.18); --accent-bg: rgba(224,157,113,0.15); --accent-border: rgba(224,157,113,0.34); --info: #93c5fd; --info-bg: rgba(59,130,246,0.14); --info-border: rgba(59,130,246,0.34); /* Aufgehellt: der Grund ist hier `--primary-light` über `--white`, also dunkel. */ --level-basic: #9ecbea; /* Die inverse Fassung des Zeichens (Logo-Dokument: „dunkle App-Leiste → invers"): die drei Felder werden weiß, das vierte bleibt Amber. Damit trägt der Dunkelmodus dieselbe Geometrie und dasselbe Farbpaar. */ --brand-mark: #ffffff; --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.50), 0 1px 4px rgba(0,0,0,0.35); color-scheme: dark; } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--fh); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; } img, svg { display: block; } /* Ein Bild darf seinen Kasten nie sprengen. Betrifft vor allem das, was nicht aus dem Layout kommt: Modul-Logos aus fremden Quellen und der Fließtext eines Medien-Bausteins, den die Redaktion pflegt. Ohne die Regel schiebt ein einziges 1200-px-Bild die ganze Seite zur Seite. `height: auto` hält dabei das Seitenverhältnis, wenn nur die Breite begrenzt wird. */ img { max-width: 100%; height: auto; } /* ── Tastaturfokus ── Eine Regel für alles, was von sich aus fokussierbar ist. Vorher hing der Fokus an zehn Einzelregeln, und die trafen ausschließlich Eingabefelder: Knöpfe, Nav-Links, Reiter, Menüeinträge und die Bottom-Navigation hatten gar keinen. Dort blieb der Ring des Browsers stehen, der auf einer `--primary`-gefüllten Fläche kaum zu sehen ist. `:focus-visible` und nicht `:focus`: der Ring gehört der Tastatur. Nach einem Mausklick auf einen Knopf will ihn niemand sehen, und genau deshalb wurde er früher pauschal abgeschaltet. Eingabefelder überschreiben das weiter unten mit ihrer eigenen Variante (Rahmenfarbe plus `--ring`-Schatten); deren Selektoren sind spezifischer und gewinnen. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); } /* Auf gefüllten Flächen liegt der Ring sonst Kante an Kante auf der Füllung. */ .btn-primary:focus-visible, .user-avatar-btn:focus-visible { outline-offset: 3px; } /* ── Sprungmarke ── Erster fokussierbare Punkt jeder Seite. Unsichtbar, bis die Tastatur ihn erreicht — dann springt sie über Kopfzeile, Navigation und Aktionen hinweg direkt in den Inhalt. */ .skip-link { position: absolute; left: 8px; top: -100px; z-index: 300; padding: 10px 16px; background: var(--white); color: var(--primary); border: 1px solid var(--primary); border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-md); transition: top 0.15s; } .skip-link:focus { top: 8px; } /* Das Sprungziel selbst bekommt keinen Ring: es ist ein Bereich, kein Bedienelement, und der Ring um den halben Bildschirm verwirrt mehr als er hilft. Fokussierbar bleibt es, damit die Tastatur wirklich dort weitermacht. */ .main-content:focus { outline: none; } /* Nur für Screenreader. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Site Header ── */ .site-header { position: sticky; top: 0; z-index: 100; /* Die Seitenleiste hängt darunter und braucht die Höhe. Eine Zahl an zwei Stellen wäre eine Zahl, die auseinanderläuft. */ --header-h: 56px; background: var(--white); border-bottom: 1px solid var(--border); height: 56px; flex-shrink: 0; } .site-header__inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; gap: 32px; /* Bezugsrahmen für das „Mehr"-Menü der Top-Nav, das außerhalb der beschnittenen Leiste hängen muss. */ position: relative; } /* Mandanten-Logo neben der Wortmarke. Es kommt aus dem Upload des Kunden, ist also beliebig breit — auf dem Telefon schöbe ein Querformat sonst Glocke, Hilfe und Profil aus der Kopfzeile. Höhe führt, die Breite ist gedeckelt. */ .tenant-logo { height: 28px; width: auto; max-width: 128px; object-fit: contain; margin-left: -16px; flex-shrink: 0; } /* ── Logo ── */ /* Die Wortmarke, seit dem 2026-09-04 in der eingetragenen Fassung. „Caltrix" ist als kombinierte Wort-/Bildmarke in Farbe eingetragen (DPMA 30 2026 245 801), und damit ist der Satz der Wortmarke keine Geschmacksfrage mehr: Versalien, DM Sans 600, Laufweite +0,055 em, Markenblau. Vorher stand sie in DM Sans 800 mit negativer Laufweite und in `--primary`, also im Oberflächenblau, das jeder White-Label-Mandant überschreibt. Genau das war der Fehler: Der Schriftzug wäre bei einem Mandanten mit eigener Primärfarbe in dessen Farbe erschienen. Die Farbe kommt deshalb aus `--brand-mark`, derselben Quelle wie das Zeichen daneben, und kippt im Dunkelmodus mit ihm auf Weiß. Versalien über `text-transform` und nicht im Text: Im DOM steht weiter „Caltrix", und die Vorlesehilfe liest einen Namen und keine Buchstabenfolge. Vorgaben in `docs/logos/LIESMICH.md`. */ .site-logo { display: flex; align-items: center; gap: 9px; color: var(--brand-mark); font-weight: 600; font-size: 1.0625rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.055em; flex-shrink: 0; white-space: nowrap; } /* ── Top Navigation ── */ .topnav { display: flex; align-items: center; gap: 2px; flex: 1; /* `min-width: 0` hebt das Flex-Minimum auf, sonst wächst die Leiste über die Kopfzeile hinaus und schiebt die Aktionen rechts hinaus. Ein Auffangmenü braucht sie nicht mehr: Die erste Zeile trägt höchstens fünf Einträge, und die hängen an Rollen statt an gebuchten Produkten. */ min-width: 0; } .topnav__link { font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none; padding: 7px 14px; border-radius: var(--r-sm); transition: color 0.15s, background 0.15s; white-space: nowrap; flex-shrink: 0; } .topnav__link:hover { color: var(--text); background: var(--surface); } .topnav__link.active { color: var(--primary); font-weight: 600; background: var(--primary-light); } /* ── Header Actions ── */ .header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .icon-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: none; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; position: relative; transition: background 0.15s, color 0.15s; } .icon-btn:hover { background: var(--surface); color: var(--text); } /* Ungelesen-Abzeichen an der Glocke. Stand doppelt: einmal hier und einmal als Inline-`