/* Tokens: einzige Quelle für alle Rohwerte. Änderungen hier gelten für jede Seite. Komponenten benutzen ausschließlich Tokens, nie feste Werte. Hell und Dunkel stehen mit light-dark() in derselben Zeile, jeder Wert also nur einmal. Ohne data-theme folgt die Seite der Systemeinstellung; data-theme="light" oder "dark" auf schaltet von Hand um. */ :root { color-scheme: light dark; --hue: 40; --color-bg: light-dark(oklch(0.985 0 0), oklch(0.185 0.008 var(--hue))); --color-surface: light-dark(oklch(1 0 0), oklch(0.235 0.011 var(--hue))); --color-surface-muted: light-dark(oklch(0.968 0.003 var(--hue)), oklch(0.285 0.014 var(--hue))); --color-text: light-dark(oklch(0.22 0.012 var(--hue)), oklch(0.96 0.004 var(--hue))); --color-text-muted: light-dark(oklch(0.52 0.015 var(--hue)), oklch(0.70 0.016 var(--hue))); --color-border: light-dark(oklch(0.9 0.006 var(--hue)), oklch(0.33 0.014 var(--hue))); --color-border-strong: light-dark(oklch(0.78 0.01 var(--hue)), oklch(0.46 0.018 var(--hue))); --color-primary: light-dark(oklch(0.55 0.17 var(--hue)), oklch(0.70 0.15 var(--hue))); --color-primary-hover: light-dark(oklch(0.47 0.17 var(--hue)), oklch(0.78 0.14 var(--hue))); --color-primary-text: light-dark(oklch(1 0 0), oklch(0.18 0.02 var(--hue))); --color-primary-soft: light-dark(oklch(0.95 0.03 var(--hue)), oklch(0.30 0.05 var(--hue))); --color-focus: light-dark(oklch(0.55 0.17 var(--hue)), oklch(0.78 0.14 var(--hue))); --color-danger: light-dark(oklch(0.54 0.19 25), oklch(0.68 0.17 25)); --color-danger-hover: light-dark(oklch(0.46 0.19 25), oklch(0.76 0.16 25)); --color-danger-text: light-dark(oklch(1 0 0), oklch(0.18 0.03 25)); --color-success: light-dark(oklch(0.52 0.13 150), oklch(0.72 0.14 150)); --color-scrim: light-dark(oklch(0.2 0.02 var(--hue) / 0.45), oklch(0 0 0 / 0.6)); /* Meldungsfarben. Je Stufe eine kräftige Linien- und Textfarbe und eine sehr dezente Fläche. Hinweis liegt bei 230 und damit weit genug von der Primärfarbe entfernt, damit Meldung und Aktion nicht verwechselt werden. */ --color-status-success: var(--color-success); --color-status-success-soft: light-dark(oklch(0.96 0.03 150), oklch(0.30 0.045 150)); --color-status-info: light-dark(oklch(0.55 0.13 230), oklch(0.75 0.12 230)); --color-status-info-soft: light-dark(oklch(0.96 0.03 230), oklch(0.30 0.045 230)); /* Im Hellen deutlich dunkler als ein übliches Warngelb: auf der weichen Fläche reicht 0.62 nicht für 4,5:1. */ --color-status-warning: light-dark(oklch(0.50 0.11 75), oklch(0.80 0.13 85)); --color-status-warning-soft: light-dark(oklch(0.96 0.04 75), oklch(0.30 0.045 85)); /* Nicht var(--color-danger): auf der weichen Fläche der Meldung reicht dessen Helligkeit im Dunkelmodus nicht für 4,5:1. */ --color-status-danger: light-dark(oklch(0.54 0.19 25), oklch(0.76 0.15 25)); --color-status-danger-soft: light-dark(oklch(0.96 0.03 25), oklch(0.30 0.045 25)); --space-05: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.125rem; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.2; --leading-normal: 1.55; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 999px; --border-width: 1px; --shadow-sm: 0 1px 2px light-dark(oklch(0.2 0.02 var(--hue) / 0.06), oklch(0 0 0 / 0.4)); --shadow-lg: 0 8px 32px light-dark(oklch(0.2 0.02 var(--hue) / 0.18), oklch(0 0 0 / 0.6)); /* Bedienelemente */ --tap-min: 44px; --control-height-lg: 52px; --switch-height: 30px; --switch-inset: 3px; --switch-thumb: 24px; --textarea-min-height: 96px; --icon-size: 18px; /* Ausgleich für die unsichtbare 44-px-Trefferfläche um ein Symbol */ --control-flush: calc((var(--tap-min) - var(--icon-size)) / -2); --focus-ring: 2px; --focus-offset: 2px; /* Maßgaben des Grundlayouts */ --header-height: 56px; --drawer-width: min(300px, 86vw); --content-max: 500px; --page-gutter: var(--space-4); /* Höhe der Bildstreifen auf der Startseite */ --photo-strip: 150px; background: var(--color-bg); color: var(--color-text); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }