/* ============================================================================ immo24 Design-System — Theme-Tokens (portabel) 3 Designs (immo24 · impower · immila) × 2 Modi (hell · dunkel) Anwendung: … Im Markup NUR var(--token) nutzen — nie Hex-Werte hardcoden. Quelle / Single Source of Truth: tools-ui src/index.css Bei Änderungen dort: diese Datei + SKILL.md mit-aktualisieren. Schriften (Google Fonts) einbinden: @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Public+Sans:wght@400;500;600;700;800&display=swap'); ============================================================================ */ /* ── immo24 (Default, hell): Navy + Gelbgrün, Barlow ───────────────────────── */ :root { --navy: #1a3a5c; --navy-dark: #122843; --navy-light:#254d7a; --accent: #B8CC3A; --amber: #d99826; --bg: #f9fafb; --bg-soft: #f3f4f6; --text: #111827; --muted: #6b7280; --border: #e5e7eb; --white: #ffffff; --on-navy: #ffffff; /* Text/Icons auf Navy/Akzent — immer hell, auch dunkel */ --red: #dc2626; --green: #16a34a; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.14); /* Abstände (Dichte) — Basis kompakt (immo24); immila überschreibt lockerer. Nur das UI-Kit (Card/Panel/Toolbar/Section) konsumiert diese Tokens. */ --pad-card: 1rem 1.2rem; --pad-panel: 0.7rem 0.85rem; --gap: 8px; --gap-lg: 1rem; --section-gap: 1.6rem; --font: 'Barlow', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* Status-Chips/Badges Vordergrundfarben am 13.08.2026 auf WCAG AA angehoben. Die vorherigen Werte (#2563eb / #b9791a / #16a34a / #dc2626) erreichen auf ihrem eigenen Chip-Grund nur 4,49 / 3,17 / 2,89 / 4,01 : 1 und verfehlen damit die geforderten 4,5 : 1 für kleine Schrift. Gemessen, nicht geschätzt (erp: tools/ui-pruefen.py). Neue Werte: 7,57 / 7,95 / 6,24 / 6,90 : 1. Farbton bleibt, nur die Helligkeit sinkt — der Marken-Eindruck ändert sich nicht. */ --chip-info-bg: rgba(37,99,235,0.10); --chip-info-fg: #1e40af; --chip-warn-bg: rgba(217,152,38,0.16); --chip-warn-fg: #78350f; --chip-ok-bg: rgba(22,163,74,0.12); --chip-ok-fg: #166534; --chip-danger-bg: rgba(220,38,38,0.12); --chip-danger-fg: #991b1b; /* Neutrales Chip: eigener Vordergrund. --muted (#6b7280) erreicht auf --bg-soft nur 4,39 : 1; #4b5563 erreicht 6,87 : 1. */ --chip-neutral-bg: var(--bg-soft); --chip-neutral-fg: #4b5563; /* KI/Magic-Akzent (Ultimate-Tools, KI-Aktionen) — bewusst lila, theme-übergreifend */ --ki: #7c3aed; --ki-fg: var(--ki); /* KI als TEXT/Icon-Farbe — im Dunkelmodus aufgehellt (--ki bleibt Füllung) */ --ki-bg: rgba(124,58,237,0.07); --ki-bg-strong: rgba(124,58,237,0.14); --ki-border: rgba(124,58,237,0.25); /* Rollen-Tokens (22.07.2026, Referenz Eingangstool/Dokumententool — Werte = Ist) */ --danger: #c0392b; /* dunkles Fehler-/Löschen-Rot */ --danger-bg: #fdecea; --warn: #b8860b; --warn-bg: #fbf3dd; --accent-bg: #f6f9e8; /* Accent-Tint (Auswahl/Treffer) */ --accent2: #d99826; /* Zweit-Akzent (Pin, Abzeichen) — heute == --amber */ --overlay: rgba(17,24,39,0.55); --radius-pill: 20px; --shadow-pop: 0 8px 26px rgba(0,0,0,0.18); --shadow-modal: 0 18px 50px rgba(0,0,0,0.35); --shadow-ki: 0 6px 22px rgba(124,58,237,0.35); --ki-ink: #2a2350; /* Kategorial-Palette (Badge-/Kategorie-Farbwelt) — eigene Familien NEBEN --chip-* */ --cat-green: #15803d; --cat-green-bg: rgba(22,163,74,0.14); --cat-sky: #0369a1; --cat-sky-bg: rgba(2,132,199,0.12); --cat-pink: #be185d; --cat-pink-bg: rgba(236,72,153,0.14); --cat-orange:#c2410c; --cat-orange-bg:rgba(234,88,12,0.16); --cat-slate: #64748b; --cat-slate-strong: #475569; /* Menü-Aktiv + aktive Auswahl */ --nav-active-bg: transparent; --nav-active-bar: var(--navy); --nav-radius: 0px; --sel-bg: var(--navy); --sel-fg: var(--on-navy); --sel-bd: transparent; /* Fokus + markierter Text — ZWEI EIGENE ROLLEN (21.08.2026). --fokus = „hier stehst Du gerade": Rahmen eines Feldes beim Hineinklicken UND der :focus-visible-Ring. --auswahl-bg/-fg = markierter Text (::selection). ⚠️ NICHT --sel-bd dafür nehmen: das ist der Rand der aktiven AUSWAHL (gedrückter Umschalter) und hier bewusst `transparent`, weil die aktive Fläche gefüllt ist. `var(--sel-bd, var(--navy))` fällt NIE auf Navy zurück — die Variable existiert ja, sie ist nur durchsichtig. Genau daran verloren Formularfelder monatelang beim Hineinklicken ihren Rahmen. ⚠️ --fokus braucht je MODUS eigene Werte: Navy auf der Feldfläche trägt hell 11,64:1, im Dunkelmodus nur 1,79:1. Werte je Theme+Modus weiter unten. Alle sechs Kombinationen nachgerechnet gegen die Feldfläche: 11,64 / 17,04 / 4,38 (hell) und 6,92 / 14,10 / 7,13 (dunkel) — alle über den 3:1 für grafische Objekte. */ --fokus: var(--navy); /* immo24 hell: 11,64:1 auf der Feldfläche --white */ --auswahl-bg: var(--navy); --auswahl-fg: var(--on-navy); /* IMMER #ffffff — nicht --white, das ist die Flächenfarbe */ /* aktive Kachel/Auswahlkarte */ --tile-active-bg: var(--white); --tile-active-fg: var(--text); --tile-active-sub: var(--muted); --tile-active-icon: var(--navy); --tile-active-iconbg: var(--white); --tile-active-iconborder: var(--navy); --tile-active-bar: var(--accent); --tile-active-border: var(--border); } /* Hell-Restore für Wrapper-Scoping: Steht auf dunkel, erbt ein hell gestellter Vorschau-Wrapper sonst die dunklen Chip-/Menü-Werte. BEWUSST VOR den Theme-Blöcken — theme-eigene Chip-Farben (immila) gewinnen per Reihenfolge. */ [data-mode="light"] { --chip-info-fg: #1e40af; --chip-warn-fg: #78350f; --chip-ok-fg: #166534; --chip-danger-fg: #991b1b; --chip-neutral-fg: #4b5563; --ki-fg: var(--ki); --ki-border: rgba(124,58,237,0.25); --nav-active-bg: transparent; } /* ── impower (hell): monochrom/minimal, IBM Plex Sans ─────────────────────── */ [data-theme="impower"] { --fokus: var(--navy); /* impower hell: 17,04:1 */ --navy: #1c1c1c; --navy-dark: #000000; --navy-light:#3a3a3a; --accent: #e3e3e3; --amber: #595959; --bg: #ffffff; --bg-soft: #eeeeee; --text: #111111; --muted: #777777; --border: #e2e2e2; --white: #ffffff; /* kompakt + Standard-Auswahl explizit: ein Wrapper darf diese Werte nicht vom umgebenden Theme (z. B. immila locker / blauer Auswahl-Rand) erben */ --pad-card: 1rem 1.2rem; --pad-panel: 0.7rem 0.85rem; --gap: 8px; --gap-lg: 1rem; --section-gap: 1.6rem; --sel-bg: var(--navy); --sel-fg: var(--on-navy); --sel-bd: transparent; --radius: 6px; --radius-lg: 8px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 2px 8px rgba(0,0,0,0.06); --shadow-lg: 0 6px 20px rgba(0,0,0,0.10); --font: 'IBM Plex Sans', -apple-system, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --tile-active-bg: #eeeeee; --tile-active-fg: #111111; --tile-active-sub: #777777; --tile-active-icon: #111111; --tile-active-iconbg: rgba(0,0,0,0.05); --tile-active-iconborder: transparent; --tile-active-bar: #111111; --tile-active-border: #e2e2e2; } /* ── immila (hell): Lila + Slate, Public Sans, weich/rund (MUI/Minimal) ───── */ [data-theme="immila"] { --fokus: #0081b4; /* Marken-Blau #00A1E4 trägt auf Weiß nur 2,91:1 — abgedunkelt 4,38:1 */ --navy: #212B36; --navy-dark: #161c24; --navy-light:#303a47; --accent: #843091; --amber: #EEB902; --bg: #ffffff; --bg-soft: #f4f6f8; --text: #212B36; --muted: #637381; --border: rgba(145,158,171,0.24); --white: #ffffff; /* explizit: Wrapper-Scoping darf kein dunkles --white erben */ --green: #3EC300; --radius: 8px; --radius-lg: 16px; /* Lockerer Aufbau wie das echte Immila — mehr Luft (nur im immila-Theme). */ --pad-card: 1.5rem 1.75rem; --pad-panel: 1rem 1.25rem; --gap: 12px; --gap-lg: 1.5rem; --section-gap: 2.25rem; --shadow-sm: 0 1px 2px rgba(145,158,171,0.18); --shadow: 0 0 2px rgba(145,158,171,0.2), 0 12px 24px -4px rgba(145,158,171,0.18); --shadow-lg: 0 0 2px rgba(145,158,171,0.2), 0 16px 32px -4px rgba(145,158,171,0.24); --font: 'Public Sans', 'Barlow', system-ui, sans-serif; /* Ebenfalls am 13.08.2026 auf WCAG AA angehoben: die vorherigen Werte (#0081b4 / #9c7400 / #2d8c00) erreichten nur 3,69 / 3,82 / 3,74 : 1. Neu: 6,39 / 6,77 / 6,58 : 1. */ --chip-info-bg: rgba(0,161,228,0.16); --chip-info-fg: #0a5a7d; --chip-warn-bg: rgba(238,185,2,0.18); --chip-warn-fg: #6b5000; --chip-ok-bg: rgba(62,195,0,0.16); --chip-ok-fg: #1f6100; --nav-active-bg: #eef1f4; --nav-active-bar: transparent; --nav-radius: 8px; --sel-bg: rgba(0,161,228,0.10); --sel-fg: #0081b4; --sel-bd: #00A1E4; --tile-active-bg: #ffffff; --tile-active-fg: #212B36; --tile-active-sub: #637381; --tile-active-icon: #843091; --tile-active-iconbg: rgba(132,48,145,0.10); --tile-active-iconborder: transparent; --tile-active-bar: #843091; --tile-active-border: rgba(145,158,171,0.30); } /* ── Dunkelmodus: Chips/Menü allgemein (Flächen je Design unten) ──────────── */ [data-mode="dark"] { --fokus: #7fb3e6; /* Dunkelmodus allgemein: 6,92:1 auf der Feldfläche */ --chip-info-fg: #4db8e8; --chip-warn-fg: #e0b020; --chip-ok-fg: #4ec76e; --chip-danger-fg: #f87171; /* KI-Text/Rahmen aufgehellt (wie die Chip-Farben); --ki selbst bleibt #7c3aed (Füllflächen) */ --ki-fg: #a78bfa; --ki-border: rgba(167,139,250,0.35); --nav-active-bg: rgba(255,255,255,0.07); } [data-theme="immo24"][data-mode="dark"] { --fokus: #7fb3e6; /* immo24 dunkel: 6,92:1 auf #1b2633 */ --navy: #20456b; --navy-dark: #16314c; --navy-light:#2c5a8a; --bg: #0e1621; --bg-soft: #18222f; --white: #1b2633; --text: #e6ebf2; --muted: #93a1b5; --border: #2a3644; --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow: 0 4px 16px rgba(0,0,0,0.55); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --tile-active-bg: var(--navy); --tile-active-fg: var(--on-navy); --tile-active-sub: rgba(255,255,255,0.65); --tile-active-icon: var(--accent); --tile-active-iconbg: rgba(255,255,255,0.12); --tile-active-iconborder: transparent; --tile-active-bar: var(--accent); --tile-active-border: transparent; } [data-theme="impower"][data-mode="dark"] { --fokus: #e3e3e3; /* impower dunkel: 14,10:1 auf #161616 — impower ist einfarbig */ --navy: #2c2c2c; --navy-dark: #000000; --navy-light:#3a3a3a; --accent: #e3e3e3; --bg: #0d0d0d; --bg-soft: #1a1a1a; --white: #161616; --text: #f0f0f0; --muted: #9a9a9a; --border: #2a2a2a; --shadow-sm: 0 1px 3px rgba(0,0,0,0.6); --shadow: 0 4px 16px rgba(0,0,0,0.6); --shadow-lg: 0 8px 32px rgba(0,0,0,0.65); --tile-active-bg: #242424; --tile-active-fg: #f0f0f0; --tile-active-sub: #9a9a9a; --tile-active-icon: #f0f0f0; --tile-active-iconbg: rgba(255,255,255,0.07); --tile-active-bar: #e3e3e3; --tile-active-border: #333333; } [data-theme="immila"][data-mode="dark"] { --fokus: #4dc3f5; /* immila dunkel: 7,13:1 auf #212b36 */ --navy: #2c3a48; --navy-dark: #161c24; --navy-light:#37485a; --accent: #a25ab0; --bg: #161c24; --bg-soft: #1f2731; --white: #212b36; --text: #e7ecf3; --muted: #8e9bab; --border: #2d3845; --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); --shadow: 0 4px 16px rgba(0,0,0,0.55); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --tile-active-bg: #283643; --tile-active-fg: #e7ecf3; --tile-active-sub: rgba(231,236,243,0.6); --tile-active-icon: #a25ab0; --tile-active-iconbg: rgba(162,90,176,0.20); --tile-active-bar: #a25ab0; --tile-active-border: #2d3845; } /* Marken-Logo bei impower/immila entfärben; im Dunkelmodus weiß */ [data-theme="impower"] .brand-logo, [data-theme="immila"] .brand-logo { filter: grayscale(1); } [data-mode="dark"] .brand-logo { filter: brightness(0) invert(1); } /* Markierter Text — sonst nimmt der Browser sein Blau, das auf dunklem Grund unter 3:1 fallen kann. --auswahl-fg ist immer #ffffff, --auswahl-bg die Markenfarbe des Themes. */ ::selection { background: var(--auswahl-bg); color: var(--auswahl-fg); } /* Sichtbarer Fokus für Tastaturbedienung. 2px, damit der Ring auch auf gefüllten Flächen trägt. */ :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }