/* ============================================================================ GRAVID Design Tokens – EINZIGE Quelle der Wahrheit ---------------------------------------------------------------------------- Zentrale CSS-Custom-Properties für die GANZE Seite (Startseite index.php, Tool-Seiten, Tool-Übersicht, Standalone-Rechtsseiten). Wird von ALLEN Seiten als erstes Stylesheet geladen; css/index.css, css/style2024.css und tools/tools.css bauen nur noch darauf auf und definieren KEINE eigenen :root-Tokens mehr (2026-07-20, zusammengeführt – vorher doppelt in index.css UND style2024.css gepflegt). Übersicht/Doku dieser Tokens: gravid.de/design-token/ (nicht verlinkt). Aufgelöste Doppel-Definition: --ink-faint war im Hellmodus doppelt und unterschiedlich (Index #667382 vs. Tools #8592A0) → vereinheitlicht auf den kontraststärkeren Wert #667382. Theme-Modi: Basis-:root = Hell (Standard beim Erstbesuch). Dunkel/Hell werden ausschließlich über data-theme am gesetzt (Toggle + localStorage), NIE über prefers-color-scheme. ============================================================================ */ :root { /* ---- Text / Flächen ---- */ --ink: #10151B; /* Haupttext, Überschriften */ --ink-soft: #56626F; /* Sekundärtext, Beschreibungen */ --ink-faint: #667382; /* dezenter/gedämpfter Text (Labels, Ladehinweis) */ --paper: #F5F7FA; /* Seitenhintergrund */ --paper-raised: #FFFFFF; /* Karten/Panels/Modals */ /* ---- Akzent (Blau, aus dem Logo) ---- */ --accent: #1B4E7E; /* Primärfarbe als TEXT/Icon (WCAG: 8,03:1 auf --paper) */ --accent-deep: #123A5E; /* dunklere Textvariante / Hover von Text-Akzent */ --accent-solid: #2569A7; /* Primärfarbe als FLÄCHE mit weißer Schrift (Buttons); EIN Wert für beide Themes */ --accent-solid-hover: #276EAF; --accent-vivid: #2C7BC4; /* nur für GROSSE Hervorhebungen (>=32px), nie Fließtext */ --accent-tint: #E4EEF7; /* zarte Akzentfläche (Hover-Tönung, Icon-Badge) */ /* ---- Komplementär-Akzent (Warm/Orange) ---- */ --accent-warm: #DE8735; --accent-warm-deep: #B5661E; --accent-warm-tint: #F7EDE3; /* Downloads/Verweis-Flächen */ --accent-warm-text: #9C5619; /* ---- Semantisch ---- */ --success: #2e7d32; --success-deep: #1b5e20; --warning: #f9a825; --danger: #c62828; /* ---- Linien / Ränder ---- */ --line: rgba(16, 21, 27, 0.11); /* Haarlinien, 1px-Ränder, Trenner */ /* ---- Footer (theme-unabhängig: bleibt in beiden Modi dunkelblau) ---- */ --footer-bg: #16273A; --footer-ink: #E7ECF2; --footer-ink-soft: #93A1B0; --footer-line: rgba(255, 255, 255, 0.10); /* ---- Schatten ---- */ --shadow: 0 1px 2px rgba(16,21,27,0.04), 0 12px 32px -12px rgba(16,21,27,0.16); --shadow-tight: 0 1px 2px rgba(16,21,27,0.04), 0 6px 18px -8px rgba(16,21,27,0.14); /* ---- Radius-/Squircle-Skala (Rechteck-Rundungen; Form global via corner-shape:squircle, siehe css/index.css + style2024.css) ---- */ --squircle-sm: 8px; /* Icon-Badges, kleine Felder */ --squircle-md: 16px; /* mittelgroße Karten/Felder */ --squircle-lg: 24px; /* große Karten/Panels/Modal, Tools-Liste, Kontakt */ --squircle-xl: 32px; /* sehr große Flächen */ --squircle-circle: 50%; /* echte Kreise (bleiben rund, kein Squircle) */ /* ---- Typografie ---- */ --font-display: 'Quicksand', ui-sans-serif, system-ui, sans-serif; --font-body: 'Quicksand', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace; /* ---- Bewegung ---- */ --highlight-gap: clamp(10px, 1.2vw, 18px); /* Nav-Sprungmarkierung */ /* Vertikaler Rhythmus der Rubriken (section.block). Eigenes Token, weil --anchor-offset unten damit rechnet - der Wert darf nur EINMAL existieren. */ --section-pad-y: clamp(56px, 8vw, 96px); /* Wo die Oberkante der Nav-Sprungmarkierung nach einem Ankersprung landen soll, gemessen vom oberen Bildschirmrand: Höhe der fixierten Nav-Leiste im gescrollten Zustand (74px = Logo 34px + 2x20px Padding) + 34px Luft. Ohne diese Luft klebt der aufleuchtende Rahmen direkt am Menü. */ --nav-clear: 108px; /* scroll-margin-top der Sprungziele. Rückwärts gerechnet aus --nav-clear: die Markierung sitzt --highlight-gap oberhalb von .wrap, und .wrap beginnt erst nach dem Innenabstand der Section. Dadurch stimmt der sichtbare Abstand zum Menü auf jeder Viewport-Breite, obwohl --section-pad-y und --highlight-gap beide mitskalieren. */ --anchor-offset: calc(var(--nav-clear) - var(--section-pad-y) + var(--highlight-gap)); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* ---- Alias-Namen (historisch in tools.css / Tool-Seiten verwendet) ---- */ --font-family: var(--font-body); --primary-color: var(--ink); --secondary-color: var(--ink-soft); --accent-color: var(--accent); --accent-color-hover: var(--accent-deep); --background-color: var(--paper-raised); --card-background: var(--paper-raised); --card-shadow: var(--shadow); } :root[data-theme="dark"] { --ink: #EDF1F5; --ink-soft: #B3BFCC; --ink-faint: #7A8794; --paper: #0C1117; --paper-raised: #131A22; /* --accent-solid/-hover bewusst NICHT überschrieben (gleiche Buttonfarbe in beiden Themes, Wert kommt aus der Basis-:root). */ --accent: #5CA8E6; --accent-deep: #8FC6F2; --accent-vivid: #5CA8E6; /* im Dark Mode setzt sich das helle Blau ohnehin ab */ --accent-tint: rgba(92,168,230,0.14); --accent-warm: #E79C55; --accent-warm-deep: #DE8735; --accent-warm-tint: rgba(231,156,85,0.14); --accent-warm-text: #DE8735; --success: #66bb6a; --success-deep: #43a047; --warning: #ffca28; --danger: #ef5350; --line: rgba(255,255,255,0.10); --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 20px 40px -16px rgba(0,0,0,0.5); --shadow-tight: 0 1px 2px rgba(0,0,0,0.3), 0 8px 20px -10px rgba(0,0,0,0.45); } :root[data-theme="light"] { --ink: #10151B; --ink-soft: #56626F; --ink-faint: #667382; --paper: #F5F7FA; --paper-raised: #FFFFFF; --accent: #1B4E7E; --accent-deep: #123A5E; --accent-vivid: #2C7BC4; --accent-tint: #E4EEF7; --accent-warm: #DE8735; --accent-warm-deep: #B5661E; --accent-warm-tint: #F7EDE3; --accent-warm-text: #9C5619; --success: #2e7d32; --success-deep: #1b5e20; --warning: #f9a825; --danger: #c62828; --line: rgba(16,21,27,0.11); --shadow: 0 1px 2px rgba(16,21,27,0.04), 0 12px 32px -12px rgba(16,21,27,0.16); --shadow-tight: 0 1px 2px rgba(16,21,27,0.04), 0 6px 18px -8px rgba(16,21,27,0.14); }