/* ============================================================ DIVOTLOG – CSS-VARIABLEN v3.0 (CD-01) ============================================================ Design-Token-System nach TORSERVICE24-Vorbild, Farbwelt exakt aus dem Divotlog Corporate Design (Brand Guide, Stand 09/2026): sieben Farben, Montserrat, dunkelgrüne Navigation, helle Inhalts- flächen. Alle Farben an EINER Stelle. Umschaltung hell/dunkel über . Anwendungslogik laut Guide: Dunkelgrün – Navigation, große Markenflächen, Headlines Sekundär – Linien, Charts, interaktive Textfarbe/Tabs Frischgrün – Datenpunkte, positive Trends, Buttons (Signal!) Hellgrün – zweite Grünstufe in Icons/Verläufen Orange – Warnung oder gezielter Sonderakzent Offwhite – ruhige Seiten- und Kartenhintergründe Die alten Variablennamen (--brand, --ok-bg, --radius, --sidebar-*) bleiben als Verweise erhalten – alle Seiten laufen unverändert. Die frei wählbaren Akzentfarben (data-accent) sind mit CD-01 entfallen: "keine anderen Grün- oder Neonfarben" (Guide, S. 11). ============================================================ */ /* === SCHRIFT: Montserrat, selbst gehostet (SIL OFL) === Kein Google-Fonts-Import (DSGVO). Dateien: assets/fonts/ */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); } :root { /* === CD-PALETTE (die sieben Farben – nur hier als Hex) === */ --cd-dark: #0F3D32; /* Primär */ --cd-mid: #1E6F5A; /* Sekundär */ --cd-green: #6DBE6A; /* Frischgrün */ --cd-light: #A7D46F; /* Hellgrün */ --cd-orange: #E08A2E; /* Akzent */ --cd-offwhite: #F4F6F5; /* Hintergrund */ --cd-text: #1A1F24; /* Text */ /* === MARKE (semantische Rollen) === */ /* brand-primary = interaktive Markenfarbe für Text, Tabs, Rahmen, Fokus (Sekundärgrün: genug Kontrast auf Weiß). */ --brand-primary: var(--cd-mid); --brand-primary-hover: #17594A; --brand-primary-light: #E4F3E2; /* Kachel-/Tint-Fläche (TORSERVICE-Tile) */ --brand-primary-text: var(--cd-dark); /* Icon/Text auf der Tint-Fläche */ --brand-primary-rgb: 30, 111, 90; --brand-dark: var(--cd-dark); /* Headlines, Kennzahlen, Sidebar */ --brand-signal: var(--cd-green); /* Datenpunkte, positive Trends, Buttons */ --brand-signal-hover: #5FB05C; --brand-signal-rgb: 109, 190, 106; --brand-light: var(--cd-light); --brand-orange: var(--cd-orange); /* Buttons: Frischgrün-Fläche, Dunkelgrün-Schrift (Website-Kit .button) */ --btn-bg: var(--brand-signal); --btn-bg-hover: var(--brand-signal-hover); --btn-text: var(--brand-dark); --btn-border: var(--brand-signal); /* Icons (CD-04): Zweit-/Drittfarbe der zweifarbigen CD-Icons; Hauptstrich = currentColor */ --icon-accent: var(--cd-green); --icon-secondary: var(--cd-mid); /* Diagramme */ --chart-line: var(--cd-mid); --chart-point: var(--cd-green); --chart-grid: var(--border); /* === DATENFARBEN (CD-03) – alles, was vorher hart in Seiten stand === */ /* Scorecard: Ergebnis relativ zum Par (Golf-Konvention, CD-Töne) */ --score-eagle: var(--cd-dark); --score-birdie: var(--cd-mid); --score-par: var(--cd-green); --score-bogey: var(--cd-orange); --score-double: var(--danger); /* Qualitätsstufen (z. B. Garmin-Bewertung POOR..EXCELLENT) */ --q-poor: var(--danger); --q-fair: var(--cd-orange); --q-good: var(--cd-light); --q-great: var(--cd-green); /* Dokumenttypen (Rundendokumente) */ --doc-image: var(--cd-green); --doc-pdf: var(--danger); --doc-word: var(--cd-mid); --doc-excel: var(--cd-light); --doc-other: var(--text-muted); /* Datenquellen-Icons */ --src-skytrak: var(--cd-mid); --src-garmin: var(--cd-green); --src-golfde: var(--cd-orange); --src-manual: var(--text-muted); /* Loch-Karte / Leaflet-Overlays (liegen auf Bildern -> immer weiß/dunkel) */ --on-image: #ffffff; --map-bg: var(--cd-dark); --map-text: #8FB3A6; --map-path: var(--on-image); --map-shot: var(--cd-mid); --map-pin: var(--danger); --overlay-strong: rgba(0,0,0,0.75); --lightbox-bg: #0C1B17; --toggle-knob: #ffffff; --danger-soft: #E07A70; --highlight-bg: var(--accent-light); --highlight-text: var(--accent-text); /* Schlägerfarben: Farbkeil warm (Driver) -> CD-Grün (Eisen) -> kühl (Wedges/Putter). PHP-Zuordnung in core/UI/ClubColors.php, hier NUR die Werte. */ --club-dr: #8E2A20; --club-3w: #C0392B; --club-5w: #E08A2E; --club-4h: #E9A94F; --club-5h: #CFC04A; --club-4i: #A7D46F; --club-5i: #8CCB6A; --club-6i: #6DBE6A; --club-7i: #45A36A; --club-8i: #1E6F5A; --club-9i: #17594A; --club-pw: #0F3D32; --club-gw: #2F6F6F; --club-sw: #4F7F8F; --club-lw: #6E8F9F; --club-pt: #66737B; /* Alte Namen (überall im Projekt genutzt) */ --brand: var(--brand-primary); --brand-hover: var(--brand-primary-hover); --brand-contrast: #ffffff; --brand-rgb: var(--brand-primary-rgb); /* === SEMANTISCHE FARBEN === */ /* Jeweils: Basis (kräftig) / -light (Hintergrund) / -border / -text */ --success: var(--cd-green); --success-light: #E4F3E2; --success-border: #BFE3BC; --success-text: #1E6F5A; --warning: var(--cd-orange); --warning-light: #FBEEDD; --warning-border: #F3D3AE; --warning-text: #8A4F0E; --danger: #C0392B; /* Fehler brauchen Rot – gedämpft, CD-nah */ --danger-light: #FBE5E2; --danger-border: #F1BFB9; --danger-text: #8E2A20; --info: var(--cd-mid); /* Hinweise in Sekundärgrün statt Blau */ --info-light: #E3EFEB; --info-border: #B9D6CC; --info-text: #14503F; --accent: var(--cd-light); /* ehemals Violett -> Hellgrün */ --accent-light: #EEF7DF; --accent-text: #3F6B14; /* Alte Namen für Meldungen */ --ok-bg: var(--success-light); --ok-border: var(--success-border); --ok-text: var(--success-text); --err-bg: var(--danger-light); --err-border: var(--danger-border); --err-text: var(--danger-text); /* === ABSTANDS-SKALA === */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* === TYPOGRAFIE (Guide: Überschriften Bold/Semibold, Lauftext Regular/Medium) === */ --font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'SF Mono', 'Consolas', 'Monaco', monospace; --font-xs: 12px; --font-sm: 13px; --font-base: 14.5px; /* Montserrat läuft breiter als Segoe – halbe Stufe kleiner */ --font-md: 16.5px; --font-lg: 19px; --font-xl: 23px; --font-2xl: 29px; --line-height: 1.55; --heading-weight: 700; --heading-tracking: -0.01em; /* === RÄNDER & RADIEN === */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --radius: var(--radius-md); /* alter Name */ /* === SCHATTEN (grün getönt wie im Website-Kit) === */ --shadow-xs: 0 1px 2px rgba(15,61,50,0.05); --shadow-sm: 0 1px 3px rgba(15,61,50,0.07), 0 1px 2px rgba(15,61,50,0.04); --shadow-md: 0 4px 6px rgba(15,61,50,0.06), 0 2px 4px rgba(15,61,50,0.04); --shadow-lg: 0 10px 30px rgba(15,61,50,0.08), 0 4px 10px rgba(15,61,50,0.04); --shadow-xl: 0 20px 50px rgba(15,61,50,0.12); --shadow: var(--shadow-sm); /* alter Name */ /* === LAYOUT === */ --sidebar-width: 250px; --sidebar-collapsed: 68px; --header-height: 60px; /* === ÜBERGÄNGE === */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; } /* ============================================================ HELLES THEME (Standard) – Offwhite-Flächen, weiße Karten ============================================================ */ [data-theme="light"], :root { --bg: var(--cd-offwhite); --bg-subtle: #FAFBFA; --card-bg: #ffffff; --text: var(--cd-text); --text-secondary: #3F4A52; --text-muted: #66737B; --muted: var(--text-muted); /* alter Name */ --heading: var(--cd-dark); /* Headlines & Kennzahlen in Dunkelgrün */ --border: #DCE5E1; --border-light: #EAF0ED; --input-bg: #ffffff; --hover-bg: #EEF3F0; --link: var(--cd-mid); /* Sidebar: Dunkelgrün in BEIDEN Themes (Guide: "dunkelgrüne Navigation") */ --sidebar-bg: var(--cd-dark); --sidebar-text: #D9E8E3; --sidebar-muted: #8FB3A6; --sidebar-category-text: var(--sidebar-muted); --sidebar-brand: #ffffff; --sidebar-hover: rgba(255,255,255,0.07); --sidebar-active-bg: rgba(109,190,106,0.16); --sidebar-active-text: var(--cd-green); /* Frischgrün nur als Signal */ --sidebar-border: rgba(255,255,255,0.08); /* Kopfleiste (Altbestand) */ --topbar-bg: var(--sidebar-bg); --topbar-text: var(--sidebar-text); --topbar-brand: var(--sidebar-brand); --overlay: rgba(15,61,50,0.5); } /* ============================================================ DUNKLES THEME – aus der CD-Palette abgeleitet (kein Schieferblau) ============================================================ */ [data-theme="dark"] { --bg: #0C1B17; --bg-subtle: #11241E; --card-bg: #14302A; --text: #EEF3F0; --text-secondary: #C3D3CC; --text-muted: #8FA79E; --muted: var(--text-muted); --heading: #F1F5F0; --border: #24463D; --border-light: #1C3A32; --input-bg: #0F231E; --hover-bg: #1B3A32; --link: var(--cd-light); /* Sidebar: noch etwas dunkler als der Inhalt */ --sidebar-bg: #08211B; --sidebar-text: #C7DAD3; --sidebar-muted: #7E9E92; --sidebar-category-text: var(--sidebar-muted); --sidebar-brand: #ffffff; --sidebar-hover: rgba(255,255,255,0.05); --sidebar-active-bg: rgba(109,190,106,0.18); --sidebar-active-text: var(--cd-green); --sidebar-border: rgba(255,255,255,0.05); --topbar-bg: var(--sidebar-bg); --topbar-text: var(--sidebar-text); --topbar-brand: var(--sidebar-brand); --overlay: rgba(0,0,0,0.6); /* Schatten kräftiger im Dunkelmodus */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.25); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.3); --shadow-lg: 0 10px 25px rgba(0,0,0,0.4); --shadow-xl: 0 20px 50px rgba(0,0,0,0.5); /* Marke im Dunkeln: getönte Flächen, helle Texte */ --brand-primary: #3A9B80; --brand-primary-hover: #4AAE92; --brand-primary-light: rgba(109,190,106,0.16); --brand-primary-text: var(--cd-light); --brand-primary-rgb: 58, 155, 128; --chart-line: #3A9B80; /* Semantische Farben (dunkel): getönter Grund, heller Text */ --success-light: rgba(109,190,106,0.15); --success-border: rgba(109,190,106,0.35); --success-text: var(--cd-light); --warning-light: rgba(224,138,46,0.15); --warning-border: rgba(224,138,46,0.35); --warning-text: #F3B872; --danger-light: rgba(192,57,43,0.16); --danger-border: rgba(192,57,43,0.35); --danger-text: #F0958B; --info-light: rgba(30,111,90,0.22); --info-border: rgba(30,111,90,0.45); --info-text: #9DD3C2; --accent-light: rgba(167,212,111,0.16); --accent-text: var(--cd-light); --icon-secondary: #3A9B80; /* Datenfarben im Dunkeln: dunkle Töne aufhellen */ --score-eagle: var(--cd-light); --score-birdie: #3A9B80; --doc-word: #3A9B80; --src-skytrak: #3A9B80; --map-shot: #3A9B80; --club-pw: #9DD3C2; --club-9i: #3A9B80; --club-dr: #D8695E; }