/* ============================================================================ HAUSNORM-TOKENS v2 — Grigo Cockpit (grigo.haus) Kanonisches Token-Blatt (Stand 23.07.2026, umgesetzt in U0). Quelle der Wahrheit: Landing-Repo grigo-cockpit-landing/hausnorm-tokens.css Lesekopie: Tower/geteilt/regeln-geteilt/hausnorm-tokens.css Regeln + Wortlaute: HAUSNORM.md (liegt daneben). App-Symbole: app-logos.svg. Änderungen gegenüber v1 (destilliert aus der Landing, Welle 1, 22.07.2026): · --f-body wird 'Instrument Sans' (Schrift-Paket "Verlag", Typo-Review 23.07.). Fraunces (Display/Kursiv) und IBM Plex Mono (Etiketten/Status/Zahlen) BLEIBEN. · Familie-Slot auf das dezente Familien-Rosa gesetzt (vorher als Mockup-Override im familie_mockup, jetzt kanonisch hier). · Neuer Bereichs-Slot data-bereich="todo" (Cyan) — löst das Verwechseln der alten To-Do-Gold-Nähe mit dem Ampel-Grün "erledigt". GRUNDSATZ: Die Hausnorm ist ein gemeinsames SKELETT — KEINE Einheitsfarbe. Jeder Bereich behält seine eigene Akzentfarbe; sie ist ein Token-SLOT (--acc), den jede App für sich setzt. Alles andere (Flächen, Linien, Text, Ampeln, Typo-Logik, Radien) ist überall gleich. Verwendung in einer App (Welle 2): Skelett-Tokens kommen von hier; die App überschreibt NUR ihren Akzent-Block (oder nutzt die vorgeschlagenen Bereichs-Slots unten). ========================================================================== */ /* ---------- 1) SKELETT: Schrift, Radien, Maße (design-unabhängig) ---------- */ :root{ /* Schriftfamilien (ein Satz für alles — der Klassik/Modern-Schalter entfällt) */ --f-body:'Instrument Sans',system-ui,sans-serif; /* Fließtext, Bedienelemente */ --f-mono:'IBM Plex Mono',monospace; /* Etiketten, Status, Zahlen */ --f-disp:'Fraunces',serif; /* Überschriften, Kachel-Namen */ --f-serif:'Fraunces',serif; /* kursiver Serifen-Akzent */ --h1-w:400;--h1-ls:-.015em; /* Radien */ --r:13px; /* kleine Flächen: Chips, Eingaben */ --r-lg:18px; /* Karten/Kacheln */ --mark-r:9px; /* Logo-Monogramm */ /* Wiederkehrende Maße */ --kachel-pad:22px; /* Innenabstand Karten */ --raster-gap:16px; /* Abstand zwischen Karten */ --touch-min:44px; /* Mindest-Trefffläche (Wand-Tablet/iPhone) */ } /* ---------- 2) ANZEIGE NACHT (Haus-Standard, = Finanz-Cockpit dark 1:1) ---------- */ html[data-theme="night"]{ --bg:#0B0B0D;--surface:#141417;--elev:#1B1B1F;--line:#1F1F24;--line2:#2A2A30; --text:#F2F2F0;--mut:#9C9CA4;--dim:#6B6B73; --pos:#79B584;--warn:#D9B36A;--neg:#CF8272; --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px -12px rgba(0,0,0,.5); color-scheme:dark; } /* ---------- 3) ANZEIGE TAG (= Finanz-Cockpit light 1:1) ---------- */ html[data-theme="day"]{ --bg:#F4F2EC;--surface:#FFFFFF;--elev:#FBFAF4;--line:#EDE9DF;--line2:#E4E0D6; --text:#1B1B1A;--mut:#67676E;--dim:#9A9AA0; --pos:#3C7A4B;--warn:#B07A1E;--neg:#A8543F; --shadow:0 1px 2px rgba(20,18,12,.05),0 10px 28px -16px rgba(20,18,12,.18); color-scheme:light; } /* ---------- 4) AKZENT-SLOT (je Bereich EIGENE Farbe — kein Vereinheitlichungsziel!) ---------- --acc : die Akzentfarbe des Bereichs --acc-ink : Textfarbe AUF der Akzentfarbe (gefüllte Buttons, Monogramm) --acc-soft : zarte Hinterlegung (14 % Nacht / 10–12 % Tag) --hover : Rahmenfarbe bei Hover Standard (ohne data-bereich) = Landing-Gold. */ html[data-theme="night"]{--acc:#CBA25C;--acc-ink:#1B1206;--acc-soft:rgba(203,162,92,.14);--hover:#8B6F43} html[data-theme="day"] {--acc:#8D681E;--acc-ink:#FBFAF4;--acc-soft:rgba(141,104,30,.12);--hover:#C89F5A} /* Vorgeschlagene Bereichs-Slots (aus den Landing-Kachel-Farben destilliert). VOR der Welle-2-Begradigung je App per Mockup mit Marcel bestätigen! */ html[data-theme="night"][data-bereich="finanz"] {--acc:#CBA25C;--acc-ink:#1B1206;--acc-soft:rgba(203,162,92,.14);--hover:#8B6F43} html[data-theme="day"][data-bereich="finanz"] {--acc:#8D681E;--acc-ink:#FBFAF4;--acc-soft:rgba(141,104,30,.12);--hover:#C89F5A} html[data-theme="night"][data-bereich="points"] {--acc:#A99BFF;--acc-ink:#14102A;--acc-soft:rgba(147,130,255,.13);--hover:#6C5ACF} html[data-theme="day"][data-bereich="points"] {--acc:#6C57DF;--acc-ink:#F6F4FF;--acc-soft:rgba(110,90,230,.09);--hover:#9C8CEB} /* Familie = dezentes Familien-Rosa (Runde 1 freigegeben, jetzt kanonisch) */ html[data-theme="night"][data-bereich="familie"]{--acc:#D8A5B3;--acc-ink:#241017;--acc-soft:rgba(216,165,179,.11);--hover:#9E7280} html[data-theme="day"][data-bereich="familie"] {--acc:#96455C;--acc-ink:#FBF6F8;--acc-soft:rgba(150,69,92,.08);--hover:#B57A8C} html[data-theme="night"][data-bereich="post"] {--acc:#82B4E8;--acc-ink:#0D1A28;--acc-soft:rgba(109,165,227,.13);--hover:#4F7EB0} html[data-theme="day"][data-bereich="post"] {--acc:#2F6FB4;--acc-ink:#F2F7FC;--acc-soft:rgba(43,108,180,.09);--hover:#6FA0D6} /* To-Do = Cyan (Runde 3): eigener Slot statt Haus-Gold — kein Verwechseln mit Ampel-Grün */ html[data-theme="night"][data-bereich="todo"] {--acc:#74C3D4;--acc-ink:#0C2227;--acc-soft:rgba(116,195,212,.13);--hover:#4E8A98} html[data-theme="day"][data-bereich="todo"] {--acc:#1F7A8C;--acc-ink:#F0F9FB;--acc-soft:rgba(31,122,140,.09);--hover:#6FAABA} /* ---------- 5) AMPEL-BAUSTEIN (überall identisch) ---------- */ .dot{width:7px;height:7px;border-radius:50%;flex:none} .dot.ok{background:var(--pos)} .dot.warn{background:var(--warn)} .dot.neg{background:var(--neg)} .dot.plan{background:none;border:1.5px solid var(--dim)} /* ---------- 6) ZWEI BUTTON-STUFEN (überall identisch) ---------- */ .btn-prim{font-family:var(--f-body);font-weight:600;background:var(--acc);color:var(--acc-ink); border:none;border-radius:var(--r);padding:9px 16px;cursor:pointer} .btn-sek{font-family:var(--f-body);background:var(--surface);color:var(--mut); border:1px solid var(--line2);border-radius:var(--r);padding:8px 15px;cursor:pointer} .btn-sek:hover{border-color:var(--hover);color:var(--text)} /* ---------- 7) ETIKETTEN & STATUS (Mono-Stimme) ---------- */ .etikett{font-family:var(--f-mono);font-size:.68rem;color:var(--mut); text-transform:uppercase;letter-spacing:.15em} .status-zeile{font-family:var(--f-mono);font-size:.7rem;color:var(--mut); display:flex;align-items:center;gap:8px}