/* ============================================================================ * Clu:Kennwort — themes.css * Farb-Token-Ebene fuer sechs Themes der Clu:Swiss Security AG. * ---------------------------------------------------------------------------- * Diese Datei enthaelt AUSSCHLIESSLICH Design-Tokens (Custom Properties) plus * die Vorschau-Swatches der Einstellungsseite. Layout und Komponenten leben in * style.css und konsumieren die hier definierten Variablen. * * Aktivierung: das Theme wird am -Element gesetzt, z. B. * document.documentElement.setAttribute('data-theme', 'alpenglow'); * * Themes: * dark Tiefes Nachtblau, violetter Akzent (dunkel) * light Helles Neutralgrau, violetter Akzent (hell) * alpenglow Daemmerungsindigo, Alpengluehen Rose/Orange (dunkel) * glacier Eisweiss/Blaugrau, Gletscher-Tuerkis (hell) * gotthard Basalt/Anthrazit, Kupfer/Bernstein (dunkel) * edelweiss Creme/Elfenbein, Salbeigruen mit Goldstich (hell) * * Regeln: * - 100% offline: kein @import, keine externen Fonts, keine externen url(). * - --swiss-red und --swiss-white sind in JEDEM Theme identisch (Flagge/Logo). * - Kontrast: --text-primary und --text-secondary erreichen auf --bg-base * mindestens 4.5:1, --text-muted mindestens 3:1, --accent-contrast auf * --accent mindestens 4.5:1 (WCAG 2.1 AA, nachgerechnet). * - Die fuenf --strength-N Stufen variieren zusaetzlich zum Farbton deutlich * in der Helligkeit, damit sie bei Rot-Gruen-Blindheit unterscheidbar sind. * ==========================================================================*/ /* --------------------------------------------------------------------------- * (b) Theme-unabhaengige Tokens * Diese Werte gelten in allen Themes gleichermassen. * -------------------------------------------------------------------------*/ :root { /* --- Schweizer Flaggenfarben: in KEINEM Theme ueberschreiben --- */ --swiss-red: #d52b1e; --swiss-white: #ffffff; /* --- Schriftfamilien: ausschliesslich Systemschriften, keine Downloads --- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --font-mono: "SFMono-Regular", "JetBrains Mono", "Fira Mono", Consolas, "Liberation Mono", "DejaVu Sans Mono", Menlo, monospace; --font-display: var(--font-sans); /* --- Schriftgroessen und Gewichte --- */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 20px; --font-size-xl: 26px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 600; --line-height-tight: 1.25; --line-height-base: 1.5; /* --- Radien --- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; /* --- Abstaende --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* --- Bewegung --- */ --transition-fast: 120ms; --transition-base: 240ms; --transition-slow: 420ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* --- Fokus --- */ --focus-ring-width: 2px; --focus-ring-offset: 2px; /* --- Z-Indizes --- */ --z-background: 0; --z-content: 1; --z-sticky: 100; --z-titlebar: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* --- Legacy-Aliase: halten das bestehende style.css lauffaehig. * var() wird erst bei der Benutzung aufgeloest, daher greifen diese * Aliase automatisch auf die Tokens des aktiven Themes zu. --- */ --bg-primary: var(--bg-base); --bg-secondary: var(--bg-elevated); --bg-tertiary: var(--bg-sunken); --card-bg: var(--glass-bg); --hover-bg: var(--accent-soft); --titlebar-bg: var(--bg-elevated); --sidebar-bg: var(--bg-elevated); --input-focus: var(--input-focus-ring); --radius: var(--radius-md); --transition-speed: var(--transition-base); } /* --------------------------------------------------------------------------- * (c1) THEME "dark" — tiefes Nachtblau mit violettem Akzent * Standard-Theme, greift auch ohne gesetztes data-theme-Attribut. * -------------------------------------------------------------------------*/ :root:not([data-theme]), [data-theme="dark"] { color-scheme: dark; --bg-base: #0a0a1a; --bg-elevated: #15152f; --bg-sunken: #050510; --glass-bg: rgba(255, 255, 255, 0.055); --glass-border: rgba(255, 255, 255, 0.12); --glass-blur: 20px; --glass-shadow: rgba(0, 0, 0, 0.45); --text-primary: #f6f7ff; --text-secondary: #bcc0e4; --text-muted: #9095c2; --text-inverse: #0a0a1a; --accent: #6c5ce7; --accent-hover: #8272ef; --accent-active: #5646d0; --accent-contrast: #ffffff; --accent-soft: rgba(108, 92, 231, 0.18); --accent-glow: rgba(108, 92, 231, 0.40); --success: #2fd07a; --success-soft: rgba(47, 208, 122, 0.16); --warning: #ffb020; --warning-soft: rgba(255, 176, 32, 0.16); --danger: #ff5f56; --danger-hover: #ff7a72; --danger-soft: rgba(255, 95, 86, 0.16); --info: #4cc2ff; --info-soft: rgba(76, 194, 255, 0.16); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.24); --divider: rgba(255, 255, 255, 0.07); --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.14); --input-focus-ring: rgba(108, 92, 231, 0.55); --scrollbar-thumb: rgba(108, 92, 231, 0.45); --scrollbar-track: rgba(255, 255, 255, 0.05); --overlay: rgba(4, 4, 14, 0.72); /* Passwortstaerke: Helligkeit steigt/faellt bewusst deutlich zwischen den * Stufen, damit die Skala auch ohne Farbwahrnehmung lesbar bleibt. */ --strength-0: #ff5c5c; --strength-1: #ffa733; --strength-2: #ffe45e; --strength-3: #3ddc84; --strength-4: #4c8dff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.32); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.46); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.58); --gradient-accent: linear-gradient(135deg, #6c5ce7 0%, #a06cf0 100%); --gradient-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 100%); } /* --------------------------------------------------------------------------- * (c2) THEME "light" — helles Neutralgrau, gleicher violetter Akzent * -------------------------------------------------------------------------*/ [data-theme="light"] { color-scheme: light; --bg-base: #f3f4f8; --bg-elevated: #ffffff; --bg-sunken: #e5e7ef; --glass-bg: rgba(255, 255, 255, 0.68); --glass-border: rgba(22, 23, 43, 0.10); --glass-blur: 18px; --glass-shadow: rgba(24, 28, 60, 0.12); --text-primary: #16172b; --text-secondary: #474a66; --text-muted: #64687f; --text-inverse: #ffffff; --accent: #5f4dd8; --accent-hover: #6f5ee6; --accent-active: #4c3cc0; --accent-contrast: #ffffff; --accent-soft: rgba(95, 77, 216, 0.12); --accent-glow: rgba(95, 77, 216, 0.28); --success: #0f7a46; --success-soft: rgba(15, 122, 70, 0.12); --warning: #9a6200; --warning-soft: rgba(154, 98, 0, 0.13); --danger: #c62828; --danger-hover: #9e1f1f; --danger-soft: rgba(198, 40, 40, 0.11); --info: #0b6bb5; --info-soft: rgba(11, 107, 181, 0.12); --border: rgba(22, 23, 43, 0.12); --border-strong: rgba(22, 23, 43, 0.30); --divider: rgba(22, 23, 43, 0.08); --input-bg: rgba(255, 255, 255, 0.86); --input-border: rgba(22, 23, 43, 0.16); --input-focus-ring: rgba(95, 77, 216, 0.45); --scrollbar-thumb: rgba(95, 77, 216, 0.38); --scrollbar-track: rgba(22, 23, 43, 0.06); --overlay: rgba(18, 20, 40, 0.45); --strength-0: #7f1010; --strength-1: #c2410c; --strength-2: #ab7d10; --strength-3: #1b7a3f; --strength-4: #0b4f8f; --shadow-sm: 0 1px 2px rgba(24, 28, 60, 0.10), 0 1px 3px rgba(24, 28, 60, 0.07); --shadow-md: 0 6px 18px rgba(24, 28, 60, 0.12); --shadow-lg: 0 18px 48px rgba(24, 28, 60, 0.18); --gradient-accent: linear-gradient(135deg, #5f4dd8 0%, #8f6ce8 100%); --gradient-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.58) 100%); } /* --------------------------------------------------------------------------- * (c3) THEME "alpenglow" — Alpengluehen (dunkel) * Daemmerungsblau/Indigo als Grund, warmes Rose-Magenta bis Orange als Akzent, * wie das letzte Licht auf Schnee. * -------------------------------------------------------------------------*/ [data-theme="alpenglow"] { color-scheme: dark; --bg-base: #0e0b1f; --bg-elevated: #191333; --bg-sunken: #080513; --glass-bg: rgba(255, 240, 246, 0.06); --glass-border: rgba(255, 190, 215, 0.16); --glass-blur: 24px; --glass-shadow: rgba(10, 4, 24, 0.52); --text-primary: #fdf2f7; --text-secondary: #d9c8e4; --text-muted: #a996bd; --text-inverse: #0e0b1f; --accent: #ff7a9c; --accent-hover: #ff96b0; --accent-active: #f25a84; --accent-contrast: #2b0a1a; --accent-soft: rgba(255, 122, 156, 0.16); --accent-glow: rgba(255, 138, 110, 0.38); --success: #3fd68f; --success-soft: rgba(63, 214, 143, 0.16); --warning: #ffb35c; --warning-soft: rgba(255, 179, 92, 0.16); --danger: #ff6274; --danger-hover: #ff8090; --danger-soft: rgba(255, 98, 116, 0.16); --info: #8fa8ff; --info-soft: rgba(143, 168, 255, 0.16); --border: rgba(255, 214, 232, 0.11); --border-strong: rgba(255, 214, 232, 0.26); --divider: rgba(255, 214, 232, 0.07); --input-bg: rgba(255, 240, 246, 0.065); --input-border: rgba(255, 200, 220, 0.16); --input-focus-ring: rgba(255, 122, 156, 0.55); --scrollbar-thumb: rgba(255, 122, 156, 0.42); --scrollbar-track: rgba(255, 214, 232, 0.06); --overlay: rgba(8, 4, 18, 0.74); --strength-0: #ff5c6e; --strength-1: #ff9d4d; --strength-2: #ffe07a; --strength-3: #4fd99b; --strength-4: #7f9dff; --shadow-sm: 0 1px 2px rgba(8, 3, 18, 0.55), 0 1px 3px rgba(8, 3, 18, 0.35); --shadow-md: 0 6px 20px rgba(8, 3, 18, 0.5); --shadow-lg: 0 20px 52px rgba(8, 3, 18, 0.62); --gradient-accent: linear-gradient(135deg, #ff6f9a 0%, #ff9f6e 55%, #ffc46b 100%); --gradient-surface: linear-gradient(160deg, rgba(255, 190, 215, 0.09) 0%, rgba(140, 120, 255, 0.03) 100%); } /* --------------------------------------------------------------------------- * (c4) THEME "glacier" — Gletscher (hell) * Sehr helles Eisweiss/Blaugrau, Gletscher-Cyan als Akzent, kuehle Schatten. * -------------------------------------------------------------------------*/ [data-theme="glacier"] { color-scheme: light; --bg-base: #eef4f8; --bg-elevated: #ffffff; --bg-sunken: #dde8f0; --glass-bg: rgba(255, 255, 255, 0.62); --glass-border: rgba(13, 58, 77, 0.12); --glass-blur: 16px; --glass-shadow: rgba(16, 62, 84, 0.13); --text-primary: #0c2430; --text-secondary: #35525f; --text-muted: #5a7484; --text-inverse: #ffffff; --accent: #0e7c8f; --accent-hover: #0c6a7b; --accent-active: #095462; --accent-contrast: #ffffff; --accent-soft: rgba(14, 124, 143, 0.12); --accent-glow: rgba(14, 124, 143, 0.30); --success: #0f7a4f; --success-soft: rgba(15, 122, 79, 0.12); --warning: #96640a; --warning-soft: rgba(150, 100, 10, 0.13); --danger: #c22f28; --danger-hover: #9b241e; --danger-soft: rgba(194, 47, 40, 0.11); --info: #0b6ba8; --info-soft: rgba(11, 107, 168, 0.12); --border: rgba(13, 58, 77, 0.14); --border-strong: rgba(13, 58, 77, 0.32); --divider: rgba(13, 58, 77, 0.09); --input-bg: rgba(255, 255, 255, 0.88); --input-border: rgba(13, 58, 77, 0.18); --input-focus-ring: rgba(14, 124, 143, 0.45); --scrollbar-thumb: rgba(14, 124, 143, 0.38); --scrollbar-track: rgba(13, 58, 77, 0.07); --overlay: rgba(10, 40, 56, 0.44); --strength-0: #8a1010; --strength-1: #a84008; --strength-2: #a37a12; --strength-3: #12734a; --strength-4: #0a5580; --shadow-sm: 0 1px 2px rgba(16, 62, 84, 0.11), 0 1px 3px rgba(16, 62, 84, 0.08); --shadow-md: 0 6px 18px rgba(16, 62, 84, 0.13); --shadow-lg: 0 18px 48px rgba(16, 62, 84, 0.19); --gradient-accent: linear-gradient(135deg, #0e7c8f 0%, #35b0bd 100%); --gradient-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(214, 234, 244, 0.6) 100%); } /* --------------------------------------------------------------------------- * (c5) THEME "gotthard" — Gotthard (dunkel) * Anthrazit und Basaltgrau wie Tunnelfels und Eisenbahn, Akzent in Kupfer * und Bernstein. * -------------------------------------------------------------------------*/ [data-theme="gotthard"] { color-scheme: dark; --bg-base: #17181b; --bg-elevated: #212328; --bg-sunken: #0f1012; --glass-bg: rgba(255, 246, 235, 0.05); --glass-border: rgba(220, 190, 150, 0.14); --glass-blur: 18px; --glass-shadow: rgba(0, 0, 0, 0.52); --text-primary: #f4f1ec; --text-secondary: #c7c0b5; --text-muted: #968f85; --text-inverse: #17181b; --accent: #c9832d; --accent-hover: #dd9640; --accent-active: #a86a1c; --accent-contrast: #150e05; --accent-soft: rgba(201, 131, 45, 0.16); --accent-glow: rgba(201, 131, 45, 0.36); --success: #57b98a; --success-soft: rgba(87, 185, 138, 0.16); --warning: #e8b23a; --warning-soft: rgba(232, 178, 58, 0.16); --danger: #e5645b; --danger-hover: #f07d74; --danger-soft: rgba(229, 100, 91, 0.16); --info: #7fb3d5; --info-soft: rgba(127, 179, 213, 0.16); --border: rgba(235, 225, 210, 0.10); --border-strong: rgba(235, 225, 210, 0.26); --divider: rgba(235, 225, 210, 0.07); --input-bg: rgba(255, 246, 235, 0.055); --input-border: rgba(235, 225, 210, 0.15); --input-focus-ring: rgba(201, 131, 45, 0.55); --scrollbar-thumb: rgba(201, 131, 45, 0.42); --scrollbar-track: rgba(235, 225, 210, 0.06); --overlay: rgba(8, 8, 10, 0.74); --strength-0: #e2554d; --strength-1: #e8933c; --strength-2: #f5d572; --strength-3: #5cc48c; --strength-4: #5290cb; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.62); --gradient-accent: linear-gradient(135deg, #a8631d 0%, #c9832d 50%, #e0aa52 100%); --gradient-surface: linear-gradient(160deg, rgba(235, 220, 200, 0.07) 0%, rgba(120, 120, 130, 0.025) 100%); } /* --------------------------------------------------------------------------- * (c6) THEME "edelweiss" — Edelweiss (hell) * Warmes Creme und Elfenbein, Akzent in Salbei-/Silbergruen mit Goldstich. * -------------------------------------------------------------------------*/ [data-theme="edelweiss"] { color-scheme: light; --bg-base: #f8f4ec; --bg-elevated: #fffdf7; --bg-sunken: #ece4d5; --glass-bg: rgba(255, 253, 247, 0.66); --glass-border: rgba(74, 60, 38, 0.12); --glass-blur: 16px; --glass-shadow: rgba(80, 66, 40, 0.14); --text-primary: #2a2418; --text-secondary: #524a38; --text-muted: #7a7160; --text-inverse: #fffdf7; --accent: #5a7550; --accent-hover: #4c6543; --accent-active: #3f5537; --accent-contrast: #ffffff; --accent-soft: rgba(90, 117, 80, 0.14); --accent-glow: rgba(168, 147, 64, 0.28); --success: #2f7d4f; --success-soft: rgba(47, 125, 79, 0.13); --warning: #8f6410; --warning-soft: rgba(143, 100, 16, 0.14); --danger: #b3352c; --danger-hover: #8f2720; --danger-soft: rgba(179, 53, 44, 0.12); --info: #37648a; --info-soft: rgba(55, 100, 138, 0.13); --border: rgba(74, 60, 38, 0.14); --border-strong: rgba(74, 60, 38, 0.32); --divider: rgba(74, 60, 38, 0.09); --input-bg: rgba(255, 255, 252, 0.88); --input-border: rgba(74, 60, 38, 0.18); --input-focus-ring: rgba(90, 117, 80, 0.48); --scrollbar-thumb: rgba(90, 117, 80, 0.42); --scrollbar-track: rgba(74, 60, 38, 0.07); --overlay: rgba(46, 38, 24, 0.45); --strength-0: #8a1f14; --strength-1: #a05308; --strength-2: #9d8213; --strength-3: #2f6b3c; --strength-4: #234a63; --shadow-sm: 0 1px 2px rgba(80, 66, 40, 0.12), 0 1px 3px rgba(80, 66, 40, 0.08); --shadow-md: 0 6px 18px rgba(80, 66, 40, 0.14); --shadow-lg: 0 18px 48px rgba(80, 66, 40, 0.20); --gradient-accent: linear-gradient(135deg, #5a7550 0%, #8a9b62 55%, #b89a44 100%); --gradient-surface: linear-gradient(160deg, rgba(255, 253, 247, 0.94) 0%, rgba(236, 228, 213, 0.62) 100%); } /* --------------------------------------------------------------------------- * (d) Reduzierte Bewegung * Neutralisiert Transitions und Animationen fuer Nutzer, die das im System * angefordert haben. * -------------------------------------------------------------------------*/ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --ease-standard: linear; --ease-out: linear; --ease-in: linear; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- * (e) Erhoehter Kontrast * Verstaerkt Rahmen, Trennlinien und gedaempften Text, sobald das System mehr * Kontrast anfordert. * -------------------------------------------------------------------------*/ @media (prefers-contrast: more) { :root { --focus-ring-width: 3px; } /* Dunkle Themes: helle Rahmen deutlich anheben */ :root:not([data-theme]), [data-theme="dark"], [data-theme="alpenglow"], [data-theme="gotthard"] { --border: rgba(255, 255, 255, 0.30); --border-strong: rgba(255, 255, 255, 0.62); --divider: rgba(255, 255, 255, 0.22); --glass-border: rgba(255, 255, 255, 0.42); --input-border: rgba(255, 255, 255, 0.48); --glass-bg: rgba(255, 255, 255, 0.09); } :root:not([data-theme]), [data-theme="dark"] { --text-muted: #b9bde0; } [data-theme="alpenglow"] { --text-muted: #cbb9dc; } [data-theme="gotthard"] { --text-muted: #bdb6ac; } /* Helle Themes: dunkle Rahmen deutlich anheben */ [data-theme="light"], [data-theme="glacier"], [data-theme="edelweiss"] { --border-strong: rgba(0, 0, 0, 0.72); --glass-bg: rgba(255, 255, 255, 0.88); } [data-theme="light"] { --border: rgba(22, 23, 43, 0.34); --divider: rgba(22, 23, 43, 0.24); --glass-border: rgba(22, 23, 43, 0.36); --input-border: rgba(22, 23, 43, 0.46); --text-muted: #3c4058; } [data-theme="glacier"] { --border: rgba(13, 58, 77, 0.36); --divider: rgba(13, 58, 77, 0.26); --glass-border: rgba(13, 58, 77, 0.38); --input-border: rgba(13, 58, 77, 0.48); --text-muted: #2b4653; } [data-theme="edelweiss"] { --border: rgba(74, 60, 38, 0.36); --divider: rgba(74, 60, 38, 0.26); --glass-border: rgba(74, 60, 38, 0.38); --input-border: rgba(74, 60, 38, 0.48); --text-muted: #4a4230; } } /* --------------------------------------------------------------------------- * Theme-Vorschau (Swatches) fuer die Einstellungsseite * Die Farben sind bewusst fest verdrahtet: der Swatch zeigt das Zielthema, * nicht das gerade aktive. Der Streifen unten rechts markiert den Akzent. * -------------------------------------------------------------------------*/ .theme-swatch { position: relative; display: inline-block; width: 64px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); overflow: hidden; flex: none; } .theme-swatch::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 18px; height: 6px; border-radius: var(--radius-pill); background: var(--swiss-white); opacity: 0.9; } .theme-swatch--dark { background: linear-gradient(135deg, #0a0a1a 0%, #15152f 46%, #6c5ce7 100%); } .theme-swatch--dark::after { background: #a06cf0; } .theme-swatch--light { background: linear-gradient(135deg, #ffffff 0%, #e5e7ef 46%, #5f4dd8 100%); } .theme-swatch--light::after { background: #8f6ce8; } .theme-swatch--alpenglow { background: linear-gradient(135deg, #0e0b1f 0%, #191333 40%, #ff7a9c 82%, #ffc46b 100%); } .theme-swatch--alpenglow::after { background: #ffc46b; } .theme-swatch--glacier { background: linear-gradient(135deg, #ffffff 0%, #dde8f0 44%, #0e7c8f 100%); } .theme-swatch--glacier::after { background: #35b0bd; } .theme-swatch--gotthard { background: linear-gradient(135deg, #0f1012 0%, #212328 46%, #c9832d 100%); } .theme-swatch--gotthard::after { background: #e0aa52; } .theme-swatch--edelweiss { background: linear-gradient(135deg, #fffdf7 0%, #ece4d5 44%, #5a7550 88%, #b89a44 100%); } .theme-swatch--edelweiss::after { background: #b89a44; } /* Ausgewaehlter Swatch in der Theme-Liste */ .theme-swatch[aria-selected="true"], .theme-swatch.is-selected { outline: var(--focus-ring-width) solid var(--accent); outline-offset: var(--focus-ring-offset); } /* ========================================================================= Hintergrundschleier ------------------------------------------------------------------------- Der Nutzer darf ein beliebiges Hintergrundbild wählen — auch ein sehr helles, kontrastreiches. Damit Text und Karten IMMER lesbar bleiben, liegt zwischen Bild und Inhalt eine themenabhängige Deckschicht. Die Werte leiten sich von --bg-base ab und sind so gewählt, dass die im Abschnitt oben gemessenen Kontrastwerte auch über einem Foto erhalten bleiben. Bewusst NICHT über --gradient-surface gelöst: das ist ein Oberflächenverlauf für Karten und viel zu durchsichtig, um als Schleier zu taugen. ====================================================================== */ [data-theme="dark"] { --scrim: linear-gradient(150deg, rgba(10, 10, 26, 0.90) 0%, rgba(10, 10, 26, 0.74) 55%, rgba(10, 10, 26, 0.88) 100%); } [data-theme="light"] { --scrim: linear-gradient(150deg, rgba(243, 244, 248, 0.93) 0%, rgba(243, 244, 248, 0.82) 55%, rgba(243, 244, 248, 0.92) 100%); } [data-theme="alpenglow"] { --scrim: linear-gradient(150deg, rgba(14, 11, 31, 0.91) 0%, rgba(30, 14, 40, 0.76) 55%, rgba(14, 11, 31, 0.90) 100%); } [data-theme="glacier"] { --scrim: linear-gradient(150deg, rgba(238, 244, 248, 0.94) 0%, rgba(238, 244, 248, 0.83) 55%, rgba(230, 240, 246, 0.93) 100%); } [data-theme="gotthard"] { --scrim: linear-gradient(150deg, rgba(23, 24, 27, 0.92) 0%, rgba(23, 24, 27, 0.78) 55%, rgba(23, 24, 27, 0.90) 100%); } [data-theme="edelweiss"] { --scrim: linear-gradient(150deg, rgba(248, 244, 236, 0.94) 0%, rgba(248, 244, 236, 0.83) 55%, rgba(244, 238, 227, 0.93) 100%); } /* Ohne Hintergrundbild wird der Schleier nicht gebraucht. */ .background-layer[data-empty="1"] + .background-scrim { opacity: 0; }