@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 400; src: url('./fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'), url('./fonts/cormorant-garamond-latin-400-normal.woff') format('woff'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 500; src: url('./fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'), url('./fonts/cormorant-garamond-latin-500-normal.woff') format('woff'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 600; src: url('./fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'), url('./fonts/cormorant-garamond-latin-600-normal.woff') format('woff'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-display: swap; font-weight: 700; src: url('./fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2'), url('./fonts/cormorant-garamond-latin-700-normal.woff') format('woff'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 400; src: url('./fonts/montserrat-latin-400-normal.woff2') format('woff2'), url('./fonts/montserrat-latin-400-normal.woff') format('woff'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 500; src: url('./fonts/montserrat-latin-500-normal.woff2') format('woff2'), url('./fonts/montserrat-latin-500-normal.woff') format('woff'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 600; src: url('./fonts/montserrat-latin-600-normal.woff2') format('woff2'), url('./fonts/montserrat-latin-600-normal.woff') format('woff'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 700; src: url('./fonts/montserrat-latin-700-normal.woff2') format('woff2'), url('./fonts/montserrat-latin-700-normal.woff') format('woff'); } /* ── Design System Tokens (CSS Custom Properties) ─────────────── Jeder Farb-Token hat zwei Formen: --xxx-rgb: 240 235 227 (raum-getrennte RGB-Triplet — fuer tailwind-config.ts mit ) --xxx: rgb(var(--xxx-rgb)) (direkter Wert — fuer Inline-CSS, Dockview-Overrides, Service-Worker) Dark-Mode wird via [data-theme="dark"] auf aktiviert. Die Triplet-Form aendert sich, alles andere (Komponenten, Tailwind- Klassen) bleibt identisch. */ :root { --input-rim: var(--border-default); /* Diagramme (Versandprotokoll): Mail und Push, geprüft auf Farbfehlsichtigkeit und Kontrast */ --chart-mail: #b06f2a; --chart-push: #1f6fa0; /* Bauzeitenplan (KONZEPT 5.11): Farbe je Gewerk. Okabe-Ito-Palette (für Farbfehlsichtige unterscheidbar), Holz und Technic in Amber tief wie die Marke; ab der neunten mit Streifen. --gantt-N-text: Schrift auf dem Balken (Kontrast mindestens 4,5:1). Gleiche Werte im PDF (api/portal_core/pdf/bauzeitenplan.py). */ --gantt-ht: #8b5a24; --gantt-ht-text: #ffffff; --gantt-0: #0072b2; --gantt-0-text: #ffffff; --gantt-1: #d55e00; --gantt-1-text: #1a1a1a; --gantt-2: #009e73; --gantt-2-text: #1a1a1a; --gantt-3: #b0588a; --gantt-3-text: #ffffff; --gantt-4: #e69f00; --gantt-4-text: #1a1a1a; --gantt-5: #56b4e9; --gantt-5-text: #1a1a1a; --gantt-6: #555555; --gantt-6-text: #ffffff; --gantt-7: #9a8a1f; --gantt-7-text: #1a1a1a; --gantt-wochenende: rgb(var(--bg-subtle-rgb) / 0.55); --gantt-schraffur: rgb(var(--txt-primary-rgb) / 0.35); /* Kalender (KONZEPT 5.11): Fristen, Zahlungen, Feiertage/Abwesenheiten. Hell mit Rand und Symbol, damit sie sich von den gefüllten Balken der Vorgänge (Farbe je Gewerk) abheben; Text mindestens 4,5:1. */ --kal-frist-bg: #ffffff; --kal-frist-text: #333333; --kal-frist-rand: #555555; --kal-zahlung-bg: #f6ecdf; --kal-zahlung-text: #5c3a14; --kal-zahlung-rand: #8b5a24; --kal-frei-bg: rgb(var(--bg-subtle-rgb) / 0.6); --kal-abwesend-rand: #8a8a8a; /* Hintergruende (Leinen) */ --bg-base-rgb: 240 235 227; --bg-raised-rgb: 246 242 236; --bg-elevated-rgb: 254 252 249; --bg-overlay-rgb: 255 255 255; --bg-subtle-rgb: 229 221 209; /* Markenfarben (Amber / Naturholz) */ --brand-deep-rgb: 139 90 36; --brand-rgb: 193 127 59; --brand-mid-rgb: 212 160 106; --brand-bright-rgb: 232 192 151; --brand-pale-rgb: 160 99 50; /* Textfarben (Graphit auf Leinen) */ --txt-primary-rgb: 51 51 51; --txt-secondary-rgb: 85 85 85; --txt-muted-rgb: 96 96 96; /* WCAG AA auf allen hellen Flächen (vorher 136) */ /* War 187 und damit identisch mit --steel-pale-rgb: ein deaktivierter Knopf trug Text in der Farbe seines eigenen Grundes, Kontrast 1,0. Auf dem Seitengrund kam er auf 1,63 -- lesbar war beides nicht. Gemessen am 24.08.2026 an der Freigabe im Moderationsdialog. */ --txt-disabled-rgb: 136 136 136; --txt-inverse-rgb: 240 235 227; /* Steel / Graphit */ --steel-dark-rgb: 51 51 51; --steel-mid-rgb: 85 85 85; --steel-light-rgb: 136 136 136; --steel-pale-rgb: 187 187 187; /* Borders — alpha-bewusst, brand fuer focus */ --rim-rgb: 51 51 51; --rim-alpha: 0.12; --rim-subtle-alpha: 0.06; --rim-active-rgb: 193 127 59; /* Feedback (semantisch) */ --success-rgb: 4 120 87; --success-bg-rgb: 236 253 245; --success-soft-rgb: 209 250 229; --success-border-rgb: 167 243 208; --success-deep-rgb: 6 95 70; --warning-rgb: 180 83 9; --warning-bg-rgb: 255 251 235; --warning-soft-rgb: 254 243 199; --warning-border-rgb: 253 230 138; --warning-deep-rgb: 146 64 14; --danger-rgb: 185 28 28; --danger-bg-rgb: 254 242 242; --danger-soft-rgb: 254 226 226; --danger-border-rgb: 254 202 202; --danger-deep-rgb: 153 27 27; /* Direkter Zugriff (var(--xxx) ohne Alpha) — fuer Inline-CSS */ --bg-base: rgb(var(--bg-base-rgb)); --bg-raised: rgb(var(--bg-raised-rgb)); --bg-elevated: rgb(var(--bg-elevated-rgb)); --bg-overlay: rgb(var(--bg-overlay-rgb)); --bg-subtle: rgb(var(--bg-subtle-rgb)); --brand-deep: rgb(var(--brand-deep-rgb)); --brand: rgb(var(--brand-rgb)); --brand-mid: rgb(var(--brand-mid-rgb)); --brand-bright: rgb(var(--brand-bright-rgb)); --brand-pale: rgb(var(--brand-pale-rgb)); --brand-ghost: rgb(var(--brand-rgb) / 0.12); --brand-glow: rgb(var(--brand-rgb) / 0.20); --text-primary: rgb(var(--txt-primary-rgb)); --text-secondary: rgb(var(--txt-secondary-rgb)); --text-muted: rgb(var(--txt-muted-rgb)); --text-disabled: rgb(var(--txt-disabled-rgb)); --text-inverse: rgb(var(--txt-inverse-rgb)); --border-default: rgb(var(--rim-rgb) / var(--rim-alpha)); --border-subtle: rgb(var(--rim-rgb) / var(--rim-subtle-alpha)); --border-active: rgb(var(--rim-active-rgb) / 0.50); --focus-ring: rgb(var(--rim-active-rgb) / 0.40); /* Schatten (alpha-getrennt damit Dark-Mode dichter werden kann) */ --shadow-alpha-sm: 0.10; --shadow-alpha-md: 0.12; --shadow-alpha-lg: 0.14; --shadow-rgb: 51 51 51; --shadow-sm: 0 1px 3px rgb(var(--shadow-rgb) / var(--shadow-alpha-sm)); --shadow-md: 0 4px 12px rgb(var(--shadow-rgb) / var(--shadow-alpha-md)); --shadow-lg: 0 10px 30px rgb(var(--shadow-rgb) / var(--shadow-alpha-lg)); --shadow-brand: 0 0 24px rgb(var(--brand-rgb) / 0.20); /* Fonts */ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: Montserrat, system-ui, sans-serif; /* Dichte (KONZEPT 12a „Kompaktes Layout“, 27.09.2026). Touch und Handy: Ziele 44 px, Schrift wie bisher. Am Rechner (Maus, ab md) kompakter: Grundschrift 15 px, Knöpfe 36 px, in Zeilen 32 px, Überschriften kleiner. Alle Größen hängen an diesen Variablen (tailwind.config.ts: text-base, text-lg, text-xl, text-2xl; h-ctl, min-h-ctl, w-ctl …); die Seiten selbst kennen den Unterschied nicht. */ --fs-base: 1rem; /* 16 px (Handy 17,5 px über die html-Größe) */ --fs-lg: 1.375rem; /* 22 px: Kartenüberschrift */ --fs-xl: 1.75rem; /* 28 px: Seitenüberschrift im Projekt */ --fs-2xl: 2.25rem; /* 36 px: Seitentitel */ /* In px, nicht rem: am Handy (html 17,5 px) genau 44 px Tippziel (vorher je nach Stelle 44 oder 48 px). */ --ctl-h: 44px; /* Knopf, Menüpunkt, Symbolknopf */ --ctl-h-sm: 44px; /* Knopf in einer Listenzeile */ --ctl-h-lg: 3rem; /* großer Knopf */ --eingabe-h: 2.5rem; /* Eingabefeld (am Handy wie bisher 40 px) */ } /* Rechner mit Maus: kompakt (Richtwerte wie Linear/GitHub/Atlassian; kleinste Schrift bleibt 13 px). */ @media (min-width: 768px) and (pointer: fine) { :root { --fs-base: 0.9375rem; /* 15 px */ --fs-lg: 1.25rem; /* 20 px: Cormorant wirkt ~15 % kleiner als Montserrat, sieht aus wie 17–18 px */ --fs-xl: 1.5rem; /* 24 px */ --fs-2xl: 1.625rem; /* 26 px */ --ctl-h: 36px; --ctl-h-sm: 32px; --ctl-h-lg: 40px; --eingabe-h: 2.25rem; /* 36 px */ } } /* ── Dark-Mode Overrides ────────────────────────────────────────── Aktiv via . Im Portal vorbereitet, aber nicht ausgeliefert: nichts setzt das Attribut (kein Umschalter, kein prefers-color-scheme). Designentscheidung: warm-dunkel statt kalt-grau. Brand-Amber traegt das Look-and-Feel; Hintergrund ist dunkel-warm (Leinen verkohlt), Text ist warm-hell (Leinen). So bleibt der Holz-Charakter erhalten. */ [data-theme="dark"] { --chart-mail: #b87a33; --chart-push: #3a95d0; --gantt-ht: #c17f3b; --kal-frist-bg: #2d2a28; --kal-frist-text: #efe8dc; --kal-frist-rand: #bab1a0; --kal-zahlung-bg: #3a2c1c; --kal-zahlung-text: #f4dbc0; --kal-zahlung-rand: #d4a06a; --kal-abwesend-rand: #8a8378; /* Hintergruende — von "deep" zu "overlay" wachsend hell */ --bg-base-rgb: 26 24 22; /* tief, warm-schwarz */ --bg-raised-rgb: 35 33 32; /* Cards, Modals */ --bg-elevated-rgb: 45 42 40; /* Hover, ausgewaehlt */ --bg-overlay-rgb: 52 48 46; /* Dropdowns, Tooltips */ --bg-subtle-rgb: 20 17 15; /* Sidebar, sehr tief */ /* Brand — leicht heller weil dunkler Hintergrund Kontrast frisst */ --brand-deep-rgb: 161 109 50; --brand-rgb: 212 160 106; /* heller als Light, fuer Lesbarkeit */ --brand-mid-rgb: 232 192 151; --brand-bright-rgb: 244 219 192; --brand-pale-rgb: 193 127 59; /* Text — warmes Beige statt reinem Weiss. txt-inverse bleibt auch im Dark-Mode hell, weil es semantisch "Text auf dunklem Chrome" bedeutet (z.B. Header, Modal-Backdrop). Gleicher Wert wie txt-primary — der Header wird trotzdem lesbar. */ --txt-primary-rgb: 239 232 220; --txt-secondary-rgb: 186 177 160; --txt-muted-rgb: 138 131 120; --txt-disabled-rgb: 90 85 77; --txt-inverse-rgb: 239 232 220; /* Steel-Tokens sind dunkle Chrome-Flaechen (Header, Sidebar, Modal- Backdrop). Im Dark-Mode bleiben sie dunkel — sie heben sich aber etwas vom bg-base ab (steel-dark = leicht heller als bg-base, damit der Header sichtbar ueber dem Body liegt). */ --steel-dark-rgb: 40 35 32; --steel-mid-rgb: 60 55 50; --steel-light-rgb: 138 131 120; --steel-pale-rgb: 186 177 160; /* Borders — heller, alpha hoch */ --rim-rgb: 255 248 234; --rim-alpha: 0.10; --rim-subtle-alpha: 0.05; /* rim-active bleibt brand */ /* Feedback — bg/soft/border in dunkleren Tints, Text bleibt lesbar */ --success-rgb: 74 222 128; --success-bg-rgb: 8 47 33; --success-soft-rgb: 14 76 54; --success-border-rgb: 22 101 73; --success-deep-rgb: 134 239 172; --warning-rgb: 251 191 36; --warning-bg-rgb: 67 39 7; --warning-soft-rgb: 87 49 9; --warning-border-rgb: 113 63 18; --warning-deep-rgb: 252 211 77; --danger-rgb: 248 113 113; --danger-bg-rgb: 69 17 17; --danger-soft-rgb: 87 22 22; --danger-border-rgb: 127 29 29; --danger-deep-rgb: 252 165 165; /* Schatten — staerker damit Cards auf dunklem Hintergrund noch heben */ --shadow-alpha-sm: 0.30; --shadow-alpha-md: 0.45; --shadow-alpha-lg: 0.60; --shadow-rgb: 0 0 0; }