/* ========================================================================== udokerzinger.de · Dachmarke — lokale Token-Zuordnung Die Farbwerte selbst stehen NICHT hier, sondern in design-system/brand-tokens.css. Diese Datei übersetzt sie nur in die Rollennamen, die die Komponenten dieser Seite verwenden. Wer eine Farbe ändern will, ändert sie im Markensystem — dann ändert sie sich in allen drei Welten gleichzeitig. Wer nur diese Seite ändern will, ändert die Zuordnung hier. ========================================================================== */ :root { /* ---------- Flächen und Schrift --------------------------------------- Die Dachmarke steht auf warmem Off-White. Sie ist die neutrale Ebene, die den drei Produktfarben Raum gibt. */ --paper: var(--brand-cream); --paper-warm: var(--brand-cream-soft); --paper-deep: var(--brand-sand); --white: var(--brand-white); --ink: var(--brand-dark); --ink-deep: var(--brand-dark-deep); --muted: var(--brand-muted); --muted-soft: var(--brand-muted-soft); --on-dark: var(--brand-on-dark); --on-dark-muted: var(--brand-on-dark-muted); --line: var(--brand-line); --line-strong: var(--brand-line-strong); --line-dark: var(--brand-line-dark); --focus: var(--brand-focus); --error: var(--brand-error); --success: var(--brand-success); /* ---------- Neutraler Akzent ------------------------------------------ Gilt, solange keine Welt gewählt ist. Sobald data-world am steht, überschreiben die Weltenpaletten aus brand-tokens.css diese Werte — ohne dass eine Komponente davon wissen muss. */ --accent: var(--brand-dark); --accent-strong: var(--brand-dark); --accent-second: var(--brand-muted-soft); --accent-third: var(--brand-dark-deep); --accent-soft: var(--brand-sand); --accent-wash: rgba(23, 33, 43, .06); --accent-on: var(--brand-white); --world-deep: var(--brand-dark-deep); --world-tint: var(--brand-cream); --seg-1: var(--brand-muted-soft); --seg-2: var(--brand-muted); --seg-3: var(--brand-dark); /* ---------- Ebenen ---------------------------------------------------- Nur hier, weil Stapelreihenfolge eine Eigenschaft dieser Seite ist und nicht der Marke. */ /* Die Weltenebene liegt hinter dem Inhalt. Negativ, nicht 0: ein positioniertes Element mit z-index 0 wird über nicht positionierten Inhalt gemalt — der Schleier lag sonst über der mobilen Weltenliste und hat sie ausgewaschen. .hero isoliert den Stapel, deshalb bleibt die Ebene trotzdem vor dem Seitenhintergrund. */ --z-world: -1; --z-base: 1; --z-wheel: 5; --z-header: 100; --z-skip: 300; }