/** * Farbtokens der "Papier"-Anmutung — portiert aus * Fahrtenbuch/DesignSystem/ColorTokens.swift, erweitert um eine dezente * Glas-Ebene ("Apple Glass") für Karten, Tab-Bar und Overlays. * * Dark Mode ist bewusst KEINE Invertierung: warmes Anthrazit statt Schwarz, * gebrochenes Weiß statt Reinweiß, Kategoriefarben aufgehellt statt gespiegelt. * * Die Papier-Palette bleibt die Basis. Glas kommt NUR als Materialschicht * darüber: leichte Transluzenz + Blur + Lichtkante oben + weicher Schatten. * Textfarben und Kategoriefarben bleiben unverändert deckend, damit Zahlen * und Beträge kontraststark bleiben. * * Variablennamen (verbindlich für alle Screens): * Farben: --farbe-hintergrund, --farbe-karte, --farbe-kartenrahmen, * --farbe-text-primaer, --farbe-text-sekundaer, * --farbe-geschaeftlich, --farbe-privat, * --farbe-button-grund, --farbe-button-text, * --farbe-erfolg, --farbe-warnung * Rampen: --farbe-geschaeftlich-tint/-base/-deep, * --farbe-privat-tint/-base/-deep * (die alten Namen --farbe-geschaeftlich/--farbe-privat bleiben * als Alias auf -base bestehen — kein Screen muss angefasst werden) * Glas: --glas-fuellung, --glas-fuellung-stark, --glas-rand, * --glas-lichtkante, --glas-kante-unten, --glas-blur, * --glas-schatten, --glas-schatten-schwebend, --glas-fuellung-vertieft */ :root { color-scheme: light dark; /* ---------- Flächen (Papier) ---------- */ --farbe-hintergrund: #FCFBF7; --farbe-karte: #FFFFFF; --farbe-kartenrahmen: #E9E7DF; /* ---------- Text ---------- */ --farbe-text-primaer: #1A1D21; --farbe-text-sekundaer: #9AA0A7; /* ---------- Kategorien ---------- */ /* Rampen statt Einzelfarbe: -tint für dezente Flächen/Tints, -base für Text/Icons (= die bisherige Einzelfarbe), -deep für Balken/Akzente mit mehr Gewicht. Alte Namen bleiben unten als Alias auf -base bestehen. */ --farbe-geschaeftlich-tint: #E4EEE2; --farbe-geschaeftlich-base: #4F7A4A; --farbe-geschaeftlich-deep: #33532F; --farbe-privat-tint: #DCEAF0; --farbe-privat-base: #3E6E86; --farbe-privat-deep: #294A5B; --farbe-geschaeftlich: var(--farbe-geschaeftlich-base); --farbe-privat: var(--farbe-privat-base); /* ---------- Status ---------- */ --farbe-erfolg: #3E8E5C; --farbe-warnung: #B26A00; /* ---------- Primärbutton (dreht im Dark Mode um) ---------- */ --farbe-button-grund: #1A1D21; --farbe-button-text: #FFFFFF; /* ---------- Glas-Material ---------- */ /* Füllung der Karten: Papierweiß, deutlich durchlässiger als zuvor, damit die farbige Wäsche durchscheint und der Blur etwas zu brechen hat. */ --glas-fuellung: rgba(255, 255, 255, 0.58); /* Für Elemente, die vor bewegtem Inhalt stehen (Tab-Bar, Sheets). */ --glas-fuellung-stark: rgba(253, 252, 249, 0.68); /* Vertiefte Flächen innerhalb einer Karte (Eingabefelder, Chips). */ --glas-fuellung-vertieft: rgba(250, 249, 244, 0.60); --glas-rand: rgba(210, 205, 191, 0.55); /* Lichtkante an der Oberkante — macht die Scheibe erst als Scheibe lesbar. */ --glas-lichtkante: rgba(255, 255, 255, 0.85); /* Untere Schattenkante — dezente Gegenkante zur Lichtkante oben. */ --glas-kante-unten: rgba(26, 29, 33, 0.05); --glas-blur: saturate(180%) blur(20px); --glas-schatten: 0 1px 2px rgba(26, 29, 33, 0.04), 0 8px 24px -10px rgba(26, 29, 33, 0.12); --glas-schatten-schwebend: 0 1px 2px rgba(26, 29, 33, 0.05), 0 12px 32px -8px rgba(26, 29, 33, 0.18); /* Farbige Hintergrund-Wäsche, damit der Blur überhaupt etwas aufnimmt. Drei statt zwei Ebenen, deutlich kräftiger (18–22 % statt 8–10 %), damit über die Fläche hinweg eine sichtbare Farbwanderung entsteht. */ --wasch-privat: rgba(62, 110, 134, 0.20); --wasch-geschaeftlich: rgba(79, 122, 74, 0.18); --wasch-warm: rgba(198, 158, 96, 0.14); /* ---------- Geometrie / Abstände ---------- */ --radius-karte: 18px; --radius-button: 14px; --radius-chip: 11px; --radius-feld: 12px; --rahmen-breite: 1px; --abstand-s: 8px; --abstand-m: 12px; --abstand-l: 16px; --abstand-xl: 24px; --inhalt-max-breite: 560px; --tabbar-hoehe: 64px; /* ui-rounded bildet auf iOS/macOS SF Pro Rounded ab — das ist der Font, den die native App über `design: .rounded` verwendet. */ --font-stack: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --farbe-hintergrund: #141311; /* warmes Anthrazit, kein reines Schwarz */ --farbe-karte: #1C1A17; --farbe-kartenrahmen: #2A2723; --farbe-text-primaer: #EDEAE2; /* gebrochenes Weiß */ --farbe-text-sekundaer: #87837A; --farbe-geschaeftlich-tint: #253227; --farbe-geschaeftlich-base: #7FA877; --farbe-geschaeftlich-deep: #A6CB9C; --farbe-privat-tint: #212E35; --farbe-privat-base: #7FB0C4; --farbe-privat-deep: #A7D0E0; --farbe-geschaeftlich: var(--farbe-geschaeftlich-base); --farbe-privat: var(--farbe-privat-base); --farbe-erfolg: #6FBE8C; --farbe-warnung: #D99A3D; --farbe-button-grund: #EDEAE2; --farbe-button-text: #141311; --glas-fuellung: rgba(38, 35, 31, 0.56); --glas-fuellung-stark: rgba(28, 26, 23, 0.68); --glas-fuellung-vertieft: rgba(20, 19, 17, 0.48); --glas-rand: rgba(255, 255, 255, 0.10); --glas-lichtkante: rgba(255, 255, 255, 0.13); --glas-kante-unten: rgba(0, 0, 0, 0.35); --glas-blur: saturate(160%) blur(22px); --glas-schatten: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 28px -12px rgba(0, 0, 0, 0.55); --glas-schatten-schwebend: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 36px -10px rgba(0, 0, 0, 0.65); --wasch-privat: rgba(127, 176, 196, 0.18); --wasch-geschaeftlich: rgba(127, 168, 119, 0.15); --wasch-warm: rgba(217, 154, 61, 0.10); } } /* Kein Backdrop-Filter (ältere Browser, Firefox ohne Flag): Glas wird deckend. Dann greifen wieder exakt die Papierfarben der nativen App. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glas-fuellung: var(--farbe-karte); --glas-fuellung-stark: var(--farbe-karte); --glas-fuellung-vertieft: var(--farbe-hintergrund); --glas-rand: var(--farbe-kartenrahmen); } } /* Nutzer, die Transparenz reduzieren wollen, bekommen die flache Papierversion. */ @media (prefers-reduced-transparency: reduce) { :root { --glas-fuellung: var(--farbe-karte); --glas-fuellung-stark: var(--farbe-karte); --glas-fuellung-vertieft: var(--farbe-hintergrund); --glas-rand: var(--farbe-kartenrahmen); --glas-blur: none; } } /* ---------- Manueller Theme-Umschalter (Einstellungen → Darstellung) ---------- * Ohne data-theme-Attribut folgt die App weiterhin strikt dem OS * (prefers-color-scheme oben). Setzt js/screens/einstellungen.js ein explizites * data-theme="light"|"dark" auf , gewinnt das hier — unabhängig vom OS. */ :root[data-theme="dark"] { --farbe-hintergrund: #141311; --farbe-karte: #1C1A17; --farbe-kartenrahmen: #2A2723; --farbe-text-primaer: #EDEAE2; --farbe-text-sekundaer: #87837A; --farbe-geschaeftlich-tint: #253227; --farbe-geschaeftlich-base: #7FA877; --farbe-geschaeftlich-deep: #A6CB9C; --farbe-privat-tint: #212E35; --farbe-privat-base: #7FB0C4; --farbe-privat-deep: #A7D0E0; --farbe-geschaeftlich: var(--farbe-geschaeftlich-base); --farbe-privat: var(--farbe-privat-base); --farbe-erfolg: #6FBE8C; --farbe-warnung: #D99A3D; --farbe-button-grund: #EDEAE2; --farbe-button-text: #141311; --glas-fuellung: rgba(38, 35, 31, 0.56); --glas-fuellung-stark: rgba(28, 26, 23, 0.68); --glas-fuellung-vertieft: rgba(20, 19, 17, 0.48); --glas-rand: rgba(255, 255, 255, 0.10); --glas-lichtkante: rgba(255, 255, 255, 0.13); --glas-kante-unten: rgba(0, 0, 0, 0.35); --glas-blur: saturate(160%) blur(22px); --glas-schatten: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 28px -12px rgba(0, 0, 0, 0.55); --glas-schatten-schwebend: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 36px -10px rgba(0, 0, 0, 0.65); --wasch-privat: rgba(127, 176, 196, 0.18); --wasch-geschaeftlich: rgba(127, 168, 119, 0.15); --wasch-warm: rgba(217, 154, 61, 0.10); color-scheme: dark; } /* data-theme="light" erzwingt die Wurzelwerte von :root, auch wenn das OS Dark Mode meldet — die @media(prefers-color-scheme: dark)-Regel oben greift nur ohne explizites Attribut, hier gewinnt die höhere Spezifität. */ :root[data-theme="light"] { --farbe-hintergrund: #FCFBF7; --farbe-karte: #FFFFFF; --farbe-kartenrahmen: #E9E7DF; --farbe-text-primaer: #1A1D21; --farbe-text-sekundaer: #9AA0A7; --farbe-geschaeftlich-tint: #E4EEE2; --farbe-geschaeftlich-base: #4F7A4A; --farbe-geschaeftlich-deep: #33532F; --farbe-privat-tint: #DCEAF0; --farbe-privat-base: #3E6E86; --farbe-privat-deep: #294A5B; --farbe-geschaeftlich: var(--farbe-geschaeftlich-base); --farbe-privat: var(--farbe-privat-base); --farbe-erfolg: #3E8E5C; --farbe-warnung: #B26A00; --farbe-button-grund: #1A1D21; --farbe-button-text: #FFFFFF; --glas-fuellung: rgba(255, 255, 255, 0.58); --glas-fuellung-stark: rgba(253, 252, 249, 0.68); --glas-fuellung-vertieft: rgba(250, 249, 244, 0.60); --glas-rand: rgba(210, 205, 191, 0.55); --glas-lichtkante: rgba(255, 255, 255, 0.85); --glas-kante-unten: rgba(26, 29, 33, 0.05); --glas-blur: saturate(180%) blur(20px); --glas-schatten: 0 1px 2px rgba(26, 29, 33, 0.04), 0 8px 24px -10px rgba(26, 29, 33, 0.12); --glas-schatten-schwebend: 0 1px 2px rgba(26, 29, 33, 0.05), 0 12px 32px -8px rgba(26, 29, 33, 0.18); --wasch-privat: rgba(62, 110, 134, 0.20); --wasch-geschaeftlich: rgba(79, 122, 74, 0.18); --wasch-warm: rgba(198, 158, 96, 0.14); color-scheme: light; }