/* ========================================================================== tokens.css — Design-Tokens Zentrale Stellschrauben: Farben, Typografie, Abstände, Radien, Schatten. Wer die Optik ändern will, ändert hier — nicht in den anderen Dateien. ========================================================================== */ :root { /* --- Farben: Flächen ------------------------------------------------- Neutrale Dunkeltöne, bewusst ohne Braun- oder Beigestich. */ --bg: #000000; --bg-subtle: #141417; /* deckend: Eingaben, Platzhalterflächen */ --bg-elevated: #151519; /* Karten */ --bg-inverse: #ffffff; /* Kopf- und Fußzeile: derselbe Wert wie --bg — reines Schwarz, durchgehend, kein eigener Grauton mehr. */ --bg-chrome: #000000; /* --- Farben: Text ---------------------------------------------------- */ --text: #ffffff; --text-muted: #a5a5aa; --text-faint: #8a8a92; /* hält 4,5:1 auch auf der hellsten Kartenfläche */ --text-inverse: #0c0c0e; /* --- Farben: Akzent --------------------------------------------------- Gold aus dem Ampersand der Wortmarke, für dunklen Grund aufgehellt. */ --accent: #e0c063; --accent-hover: #eed08a; --accent-bright: #f0d489; --accent-soft: rgba(224, 192, 99, .13); --accent-2: #e0c063; --on-accent: #0c0c0e; /* Schrift/Icons auf goldener Fläche */ /* --- Farben: Aktionen ------------------------------------------------- Auf dunklem Grund tragen goldene Knöpfe mit schwarzer Schrift — 10,7:1 und deutlich markanter als Weiß auf Schwarz. */ --action: #e0c063; --action-hover: #eed08a; --action-fg: #0c0c0e; /* --- Farben: Linien -------------------------------------------------- */ --border: rgba(255, 255, 255, .13); --border-strong: rgba(255, 255, 255, .26); /* --- Hintergrundraster ------------------------------------------------ Übernommen von handbuch.lutzundleder.de: 28-px-Quadrate, 1-px-Linien. Dort dunkel auf hell, hier hell auf dunkel. */ /* --- Farben: Status --------------------------------------------------- Nur dort, wo sie Bedeutung tragen: Formularfehler und Vorzeichen im Rechner. Für dunklen Grund aufgehellt. */ --danger: #f0736a; --danger-soft: rgba(240, 115, 106, .14); --success: #5fc48f; --success-soft: rgba(95, 196, 143, .14); --info: #5b9bd5; --info-soft: rgba(91, 155, 213, .14); /* --- Verläufe -------------------------------------------------------- */ --gradient: linear-gradient(100deg, #b8912f 0%, var(--accent-bright) 100%); --gradient-glow: radial-gradient(65% 65% at 50% 0%, rgba(224, 192, 99, .30) 0%, rgba(224, 192, 99, .12) 40%, rgba(224, 192, 99, .04) 65%, rgba(12, 12, 14, 0) 85%); /* --- Typografie ------------------------------------------------------ */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "DM Serif Display", Georgia, "Times New Roman", serif; --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.0625rem; /* 17px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 2rem; /* 32px */ --fs-3xl: 2.5rem; /* 40px */ --fs-4xl: 3.5rem; /* 56px */ --lh-tight: 1.12; --lh-snug: 1.35; --lh-normal: 1.65; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.022em; --tracking-wide: 0.08em; /* --- Abstände -------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --section-py: 6rem; --section-head-gap: 3rem; /* Überschrift zum Inhalt des Abschnitts */ --container-max: 1140px; --container-wide: 1320px; --container-narrow: 780px; --container-pad: 1.5rem; --header-h: 76px; /* --- Radien ---------------------------------------------------------- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px; /* --- Schatten -------------------------------------------------------- */ /* Auf dunklem Grund trägt ein Schlagschatten kaum — die Tiefe kommt über hellere Ränder. Deshalb zusätzlich ein feiner Lichtring. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55); --shadow-md: 0 0 0 1px rgba(255, 255, 255, .07), 0 14px 34px -14px rgba(0, 0, 0, .9); --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .09), 0 28px 60px -20px rgba(0, 0, 0, .95); --shadow-action: 0 10px 26px -12px rgba(224, 192, 99, .5); --shadow-gold: 0 10px 24px -12px rgba(224, 192, 99, .55); /* --- Bewegung -------------------------------------------------------- */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.22, .61, .36, 1); --dur-fast: 140ms; --dur: 220ms; /* Einblendungen und Karussell haben eigene Dauern: 600 ms plus Staffelung fühlte sich zäh an, obwohl die Bildrate stimmte. */ --dur-reveal: 380ms; --dur-slide: 450ms; /* --- Ebenen ---------------------------------------------------------- */ --z-header: 100; --z-backdrop: 90; --z-dropdown: 110; --z-float: 80; } /* ========================================================================== Heller Modus Überschreibt ausschließlich die Farb-Tokens von :root — Abstände, Typografie, Radien, Bewegung bleiben unverändert. Wird per data-theme="light" auf aktiviert (siehe theme-toggle.js). Gold bleibt Markenfarbe, aber abgedunkelt: das helle Gold aus dem Dunkelmodus hat auf Weiß zu wenig Kontrast, um als Text zu funktionieren. ========================================================================== */ :root[data-theme="light"] { /* --- Flächen --- */ --bg: #ffffff; --bg-subtle: #f2f2f4; --bg-elevated: #ffffff; --bg-inverse: #0c0c0e; --bg-chrome: #ffffff; /* --- Text --- */ --text: #121214; --text-muted: #56565f; --text-faint: #68686f; --text-inverse: #ffffff; /* --- Akzent: dasselbe Gold, für helle Fläche abgedunkelt --- */ --accent: #7d621a; --accent-hover: #654e15; --accent-bright: #967a26; --accent-soft: rgba(125, 98, 26, .12); --accent-2: #7d621a; --on-accent: #ffffff; --action: #7d621a; --action-hover: #654e15; --action-fg: #ffffff; /* --- Linien --- */ --border: rgba(12, 12, 14, .12); --border-strong: rgba(12, 12, 14, .22); /* --- Status --- */ --danger: #c0392f; --danger-soft: rgba(192, 57, 47, .1); --success: #2f8f5b; --success-soft: rgba(47, 143, 91, .1); --info: #2f6fad; --info-soft: rgba(47, 111, 173, .1); /* --- Verläufe --- */ --gradient: linear-gradient(100deg, #654e15 0%, var(--accent-bright) 100%); --gradient-glow: radial-gradient(65% 65% at 50% 0%, rgba(125, 98, 26, .18) 0%, rgba(125, 98, 26, .08) 40%, rgba(125, 98, 26, .03) 65%, rgba(255, 255, 255, 0) 85%); /* --- Schatten: auf hellem Grund trägt ein Schlagschatten wieder normal, der Lichtring aus dem Dunkelmodus wird durch einen feinen dunklen Rand ersetzt. --- */ --shadow-xs: 0 1px 2px rgba(12, 12, 14, .06); --shadow-sm: 0 1px 3px rgba(12, 12, 14, .08); --shadow-md: 0 0 0 1px rgba(12, 12, 14, .06), 0 14px 34px -14px rgba(12, 12, 14, .18); --shadow-lg: 0 0 0 1px rgba(12, 12, 14, .08), 0 28px 60px -20px rgba(12, 12, 14, .22); --shadow-action: 0 10px 26px -12px rgba(156, 122, 31, .35); --shadow-gold: 0 10px 24px -12px rgba(156, 122, 31, .4); }