/* ========================================================================== Omni – Redesign-Tokens (Runde 318, Phase 1; Runde 324: Korrekturauftrag Runde 2, design/KORREKTUR-PROMPT.md Punkt 1-3) Einzige Quelle für Farben, Größen, Abstände und Schrift im neuen Apple-Design (siehe design/PLAN.md, design/UX-REGELN.md Regel 10). Kein Screen setzt nach Phase 4 noch eigene Farben/Größen – alles kommt von hier. WICHTIG: Diese Datei ist noch von NICHT jeder Live-Seite eingebunden (siehe design/KORREKTUR-PROMPT.md Punkt 4: 19 Alt-Seiten stehen noch aus). Sie nutzt bewusst dieselben Variablennamen wie das bisherige style.css (--bg, --card, --text, --text-dim, --border, --accent, --ok, --danger, --radius, --radius-sm), weil das genau der Mechanismus ist, mit dem ein Bereich in Phase 4 umgestellt wird: sobald eine Seite tokens.css NACH style.css einbindet, gewinnen hier die neuen Werte, ohne dass die hunderten bestehenden CSS-Regeln in style.css angefasst werden müssen, die bereits var(--bg) usw. verwenden. Bis dahin bleibt jede bestehende Seite unverändert, weil sie tokens.css gar nicht lädt. Dark Mode folgt wie bisher automatisch prefers-color-scheme (keine manuelle Umschaltung in der echten App). Zusätzlich gibt es einen [data-theme="dark"]/[data-theme="light"]-Override NUR für die Komponenten-Vorschauseite (design-system-preview.html), damit man beide Modi nebeneinander sehen kann, ohne das Betriebssystem umzustellen. ========================================================================== */ /* -------------------------------------------------------------------- */ /* Schrift: SF Pro per System-Stack, Inter selbst gehostet als Fallback */ /* (nie als Webfont-Nachladung von einem fremden Server). */ /* -------------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; --font-stack-mono: ui-monospace, "SF Mono", Menlo, monospace; /* Runde 320, Phase 4, Bereich 10 (Schreiben): design/PLAN.md Phase 1 "Schrift"-Zeile - "im Editor New York". NUR im Editor-Fließtext verwendet (nicht global wie --font-stack), siehe components.css Abschnitt 20. ui-serif/"New York" wird nur auf Apple-Plattformen aufgelöst, sonst greift die Georgia/serif-Rückfalltkette. */ --font-stack-serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif; /* ---------------------------------------------------------------- */ /* Farben – hell (Standard: macOS-Werte; Begründung siehe unten) */ /* ---------------------------------------------------------------- */ --accent: #007aff; /* Systemblau, NUR für Interaktives */ --bg: #f5f5f7; /* Seiten-Grundfarbe (Alt-Seiten, bis sie Phase 4 erreichen) */ --card: #ffffff; /* Karten: deckend weiß */ --card-haarlinie: rgba(60, 60, 67, 0.18); /* 0,5pt Haarlinie auf Karten */ --text: #1d1d1f; --text-dim: #5e5e63; /* Sekundärtext macOS, ≥4,5:1 auf Weiß */ --border: rgba(60, 60, 67, 0.18); /* Trennlinien 0,5pt, rgba(60,60,67,.16–.2) */ --ok: #248a3d; /* Status Grün – nur mit Text/Symbol */ --danger: #c4282d; /* Status Rot – nur mit Text/Symbol */ /* Runde 324 (Korrekturauftrag Runde 2, Punkt 3 - design/KORREKTUR- PROMPT.md): "Inhaltsfläche fast deckend" - ersetzt den vorherigen radial-gradient-Seitenhintergrund (--bg-verlauf-1/2/3, Runde 322, Hassans damaliger ausdrücklicher Wunsch). Nach Hassans eigener Korrektur jetzt bewusst zurückgenommen: "Der Fensterhintergrund hinter der Seitenleiste ... entfällt. Bunt ist nur die Seitenleiste." Siehe body.omni-redesign weiter unten. */ --inhalt-hintergrund: #f7f7fa; /* Radien (konzentrisch: innen = außen − Abstand) */ --radius: 15px; /* Karten macOS (14–16) */ --radius-sm: 10px; --radius-pill: 999px; /* Buttons als Kapsel */ /* Raster: 8pt-Basis */ --grid: 8px; --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; /* Typografie macOS: Titel/Fenstertitel/Text/Unterzeile/Sidebar-Überschrift */ --fs-large-title: 28px; --fs-section: 15px; --fs-body: 13px; --fs-subtitle: 12px; --fs-label: 11px; /* Glas – nur Toolbar-Kapseln, Tab Bar, Menüs (Seitenleiste malt ab Runde 324 ihren eigenen, deckenden Verlauf, siehe sidebar-chrome.css - kein backdrop-filter/Transparenz mehr dort, design/KORREKTUR- PROMPT.md Punkt 2). */ --glass-blur: 20px; --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-opaque-fallback: #f5f5f7; /* deckend, ohne Unschärfe */ --glass-border: rgba(60, 60, 67, 0.12); /* Toolbar im Inhalt (Punkt 3): eigener, fast deckender Wert statt des durchsichtigeren --glass-bg, das für Menüs/Kapseln gedacht ist. */ --toolbar-glass-bg: rgba(250, 250, 252, 0.95); /* ------------------------------------------------------------------ */ /* Bereichsfarben und Frag Omni - einzige Quelle: Mockup 01 "macOS - */ /* Übersicht" (design/redesign/01-macos-uebersicht.png), siehe */ /* design/PLAN.md "Bereichsfarben und Symbole" + design/KORREKTUR- */ /* PROMPT.md Punkt 1. NUR fürs Icon-Quadrat und das Sidebar-Symbol, */ /* nie für Text/Flächen (UX-REGELN.md Regel 10). Runde 324: ersetzt */ /* die bisherigen --farbe-*-Tokens (teils andere, teils aus einem */ /* anderen Mockup-Blatt fälschlich übernommene Werte, siehe Git- */ /* Historie) - jetzt 1:1 aus der Korrektur-Tabelle, keine Abweichung. */ /* In sidebar.js/dashboard.html steht dafür kein Hex-Wert mehr, nur */ /* noch var(--bereich-*) (siehe dort). */ /* ------------------------------------------------------------------ */ --bereich-freizeit: #5856d6; --bereich-reisen: #0a84d0; --bereich-autogramme: #af52de; --bereich-bilderrahmen: #e8590c; --bereich-comics: #0a7ea4; --bereich-news: #d70015; --bereich-rezepte: #3a8f2e; --bereich-schreiben: #3634a3; --bereich-arbeit: #248a3d; --bereich-aufgaben: #248a3d; --bereich-finanzen: #636366; --bereich-ziele: #8944ab; --bereich-inventar: #636366; --bereich-kleidung: #8e5a2b; --bereich-sendungsverfolgung: #6e56cf; --bereich-wunschliste: #e0245e; --bereich-daten: #0e8c7e; --bereich-developer: #c93400; /* Runde 356 (Hassans Auftrag: "Einstellungen ... als eigenen Punkt unter System hinter Developer"): neutraler Grauton wie Finanzen/ Inventar - Einstellungen ist kein inhaltlicher Bereich mit eigener "Themenfarbe", sondern Werkzeug/Utility, genau wie diese beiden. */ --bereich-einstellungen: #636366; --frag-omni: #af52de; /* Aktivitätstyp-Farben im Freizeit-/Reisen-Planer (reisen.js TYP_META) - EIGENSTÄNDIG von den 18 Bereichsfarben oben (keine Bereiche, sondern Kategorien innerhalb von Freizeit/Reisen, z.B. "Einkaufen"/"Termine"). Runde 324: unverändert aus Runde 318 übernommen (reine Verschiebung von reisen.js hierher), weil mehrere dieser Werte zufällig dieselben Apple-Systemfarben-Hex-Codes wie die alten (jetzt korrigierten) Bereichsfarben waren und sonst den Hex-Grep aus design/KORREKTUR- PROMPT.md Punkt 1 ausgelöst hätten, obwohl sie fachlich etwas anderes sind - siehe Bericht an Hassan für diese Einordnung. */ --reiseart-besuch: #5856d6; --reiseart-einkaufen: #34c759; --reiseart-termine: #ff9500; --reiseart-ausflug: #00c7be; --reiseart-transport: #007aff; --reiseart-date: #ff2d55; --reiseart-treffen: #af52de; --reiseart-geburtstag: #ff3b30; --reiseart-sport: #ff6482; --reiseart-baden: #5ac8fa; --reiseart-paket: #8e8e93; --reiseart-essen: #ffcc00; --reiseart-hotel: #a2845e; --reiseart-fallback: #8e8e93; /* ------------------------------------------------------------------ */ /* Dekorative Akzentfarben (Runde 348, UX-UI-CleanUp Phase B3, */ /* design/CLEANUP-BACKLOG.md Punkt 1.10): vier Hex-Werte, die schon */ /* vorher wiederholt und konsistent für dieselbe Bedeutung verwendet */ /* wurden (Section-Dots in Toolbars/Überschriften via style="--dot- */ /* color:#..." sowie vereinzelte Status-Badges), aber nirgends als */ /* Variable existierten - reine Benennung des bestehenden Zustands, */ /* kein neuer Farbwert, keine Design-Entscheidung. */ /* ------------------------------------------------------------------ */ --akzent-amber: #d97706; /* bisher u.a. Fortbildung-Status, Converter-Akzent */ --akzent-teal: #0891b2; /* bisher u.a. Homeoffice-Status, Reisen-Kachel */ --akzent-grau: #9aa3b2; /* bisher u.a. Insights-Kachel, neutrale Section-Dots */ --akzent-favorit: #f59e0b; /* eigener, hellerer Ton - "markiert/gespeichert" (News-Feed merken, Autogramme), keine Status- aussage wie --ok/--danger, daher kein Alias */ /* Layout (Phase 6: Sidebar 236px, Toolbar 52px) */ --sidebar-breite: 236px; --toolbar-hoehe: 52px; } /* ---------------------------------------------------------------------- */ /* Breakpoint < 900px: Seite verhält sich wie die iPhone-Variante */ /* (Phase 6, Punkt 7) – Typografie wechselt auf die iOS-Größen. */ /* ---------------------------------------------------------------------- */ @media (max-width: 899px) { :root { --bg: #f2f2f7; /* iOS-Hintergrund */ --text-dim: #6c6c70; /* Sekundärtext iOS */ --radius: 23px; /* Karten iOS (22–24) */ --fs-large-title: 34px; --fs-section: 20px; --fs-body: 17px; --fs-subtitle: 15px; --fs-label: 13px; } } /* ---------------------------------------------------------------------- */ /* Dark Mode – folgt automatisch der Systemeinstellung, siehe Kopfkommentar */ /* in style.css (kein manueller Umschalter in der echten App). */ /* ---------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --card: #1c1c1e; --card-haarlinie: rgba(84, 84, 88, 0.6); --text: #f5f5f7; --text-dim: #98989d; --border: rgba(84, 84, 88, 0.6); --ok: #30d158; --danger: #ff453a; --inhalt-hintergrund: #1c1c1e; --glass-bg: rgba(28, 28, 30, 0.72); --glass-bg-opaque-fallback: #1c1c1e; --glass-border: rgba(84, 84, 88, 0.3); --toolbar-glass-bg: rgba(28, 28, 30, 0.85); } } /* Manueller Override – ausschließlich für design-system-preview.html, damit beide Modi ohne Betriebssystem-Umschaltung nebeneinander gezeigt werden können. Reale Omni-Seiten setzen data-theme nie. */ :root[data-theme="dark"] { --bg: #000000; --card: #1c1c1e; --card-haarlinie: rgba(84, 84, 88, 0.6); --text: #f5f5f7; --text-dim: #98989d; --border: rgba(84, 84, 88, 0.6); --ok: #30d158; --danger: #ff453a; --inhalt-hintergrund: #1c1c1e; --glass-bg: rgba(28, 28, 30, 0.72); --glass-bg-opaque-fallback: #1c1c1e; --glass-border: rgba(84, 84, 88, 0.3); --toolbar-glass-bg: rgba(28, 28, 30, 0.85); } /* Grund-Reset auf den Token-Werten – wird von jeder Seite geerbt, die dieses Stylesheet einbindet. Runde 324 (Korrekturauftrag Runde 2, Punkt 3): der bisherige bunte radial-gradient-Seitenhintergrund (Runde 322) entfällt auf Hassans eigene Korrektur hin wieder - "Kein Verlauf, kein Glas hinter Listen, Tabellen, Karten" / "Bunt ist nur die Seitenleiste". Die Inhaltsfläche ist jetzt fast deckend einfarbig (--inhalt-hintergrund). */ body.omni-redesign { background: var(--inhalt-hintergrund); min-height: 100vh; color: var(--text); font-family: var(--font-stack); font-size: var(--fs-body); -webkit-font-smoothing: antialiased; }