/* theme.css — einzige Quelle fuer die Farbrollen des Cockpits (Dunkel + Hell). Werte kommen aus design-tokens.md: erst dort eintragen, dann hier. Umschaltung: - ohne data-theme folgt die Seite dem System (prefers-color-scheme) - data-theme="hell" bzw. "dunkel" auf erzwingt eine Seite theme.js setzt das Attribut noch im , also vor dem ersten Paint. Ohne JS bleibt der System-Pfad — deshalb steht der Hell-Block zweimal. Diese App ist dunkel entstanden. Der Dunkel-Block bleibt deshalb die Basis in :root, und Hell ist die Abweichung — genau umgekehrt zu hatetime. */ /* ── Saira, selbst ausgeliefert ────────────────────────────────────────────── Das Cockpit zeigt Reichweiten, Umsaetze und Plattform-Zugaenge. Eine solche Seite holt keine Schrift bei einem Dritten. Dieselben Dateien wie in hatetime - die Schrift ist der Familienteil des Hausstils. Variable Schrift mit Breiten- UND Strichstaerkenachse: Messwerte laufen kondensiert (wdth 72), Labels breiter (wdth 95). Das ersetzt, wofuer andere Systeme eine zweite Schrift braeuchten. Das unicode-range laedt fuer eine deutsche Oberflaeche nur das latin-Subset. Herkunft, Version und Lizenz (SIL OFL 1.1): fonts/LIES-MICH.md */ @font-face{ font-family:"Saira"; font-style:normal; font-weight:100 900; font-stretch:50% 125%; font-display:swap; src:url(/fonts/saira-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Saira"; font-style:normal; font-weight:100 900; font-stretch:50% 125%; font-display:swap; src:url(/fonts/saira-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root{ color-scheme:dark; --bg:#090C0B; --panel:#1F2624; --panel2:#262F2C; --panel-hover:#171E1C; --vertiefung:#000000; --border:#2E3935; --border2:#64726D; --trenner:#273230; --txt:#E9EEEB; --muted:#A7B0AD; --muted2:#8B9793; --accent:#F2F7F4; --auf-akzent:#090C0B; --accent-stark:#FFFFFF; --accent-tief:#B5C0BC; --accent2:#B98CFF; --live:#35D6A0; --warn:#FFB454; --gelb:#D7E052; --blue:#6BA8FF; --red:#FF6B6B; --net-yt:#FF4E4E; --net-ig:#E879C7; --net-tt:#43D9C9; --net-none:#8B9793; --e1:0 1px 0 rgba(255,255,255,.03); --e2:0 4px 14px -6px rgba(0,0,0,.55); --e3:0 16px 40px -12px rgba(0,0,0,.68); --mono:ui-monospace,"Cascadia Mono",Consolas,monospace; /* Maschinenkante. 6/10/14px war exakt shadcns Ableitung, also die Voreinstellung - der Hausstil "Instrument" entscheidet dagegen. GETEILTE SKALA: hatetime steht seit v1.23.0 ebenso. */ --r-sm:2px; --r:2px; --r-lg:2px; /* Modal-Schleier. Steht in BEIDEN Themen auf demselben dunklen Ton, und das ist eine Entscheidung, keine Nachlaessigkeit: ein Scrim verdunkelt, was dahinter liegt - ein heller Schleier auf hellem Grund verdeckt nichts. Vorher stand der Wert hart in planen.css und schaltete deshalb nicht mit; jetzt schaltet er bewusst nicht mit. */ --scrim:rgba(1,4,9,.72); /* Inhaltsbreiten. Es gab fuenf (880/1000/1100/1240/1400px) - ohne Regel, wer welche bekommt, und die Seite sprang bei jedem Navigationsschritt in der Breite. Jetzt zwei, und die Zuordnung ist eine Aussage: --inhalt Datenflaechen: Kalender, Tabellen, Kennzahlen nebeneinander --inhalt-schmal Lese- und Formularflaechen: eine Spalte, die man liest Wer eine dritte braucht, braucht in Wahrheit eine der beiden. */ --inhalt:1400px; --inhalt-schmal:880px; /* Mindestbreite einer Karte in einem auto-fit-Raster. Keine dritte INHALTS-breite (davon bleiben es zwei) - eine Rasterspur ist etwas anderes als die Breite einer Seite. */ --karte-min:320px; --dur-1:120ms; --dur-2:160ms; --dur-3:180ms; --ease-out:cubic-bezier(0.23, 1, 0.32, 1); /* Vorschauen simulieren FREMDE Oberflaechen (Handy-Rahmen, IG/TikTok-Screen). Sie zeigen, wie der Beitrag DORT aussieht — nicht, wie das Cockpit aussieht. Deshalb stehen diese Werte bewusst NUR hier und schalten nicht mit; im Hellen waere der Screen sonst weiss und die weisse Overlay-Schrift unlesbar. */ --geraet:#23282f; /* Handy-Rahmen */ --geraet-tief:#000000; /* Screen hinter dem Video */ --geraet-flaeche:#161b22; /* Platzhalter-Flaeche ohne Video */ --geraet-muted:#8b949e; /* Platzhalter-Text darauf */ --geraet-ovl:#ffffff; /* Overlay-Schrift ueber dem Video */ --geraet-akzent:#d4a373; /* Avatar-Bubble im fremden Screen */ --geraet-auf-akzent:#1a1100; } @media (prefers-color-scheme: light){ :root:not([data-theme="dunkel"]){ color-scheme:light; --bg:#DEE4E2; --panel:#FFFFFF; --panel2:#EDF1EF; --panel-hover:#E5EBE9; --vertiefung:#D3DAD8; --border:#C1CCC8; --border2:#767E7C; --trenner:#D5DEDA; --txt:#0F1513; --muted:#5A6664; --muted2:#586462; --accent:#0F1513; --auf-akzent:#FFFFFF; --accent-stark:#000000; --accent-tief:#3A4442; --accent2:#6A2FB5; --live:#0A6B4C; --warn:#8A4B00; --gelb:#4F5B00; --blue:#0B4FA8; --red:#B32318; --net-yt:#A32019; --net-ig:#96297F; --net-tt:#0A6A93; --net-none:#5A6664; --e1:0 1px 2px rgba(15,21,19,.05); --e2:0 4px 14px -6px rgba(15,21,19,.16); --e3:0 16px 40px -12px rgba(15,21,19,.22); } } :root[data-theme="hell"]{ color-scheme:light; --bg:#DEE4E2; --panel:#FFFFFF; --panel2:#EDF1EF; --panel-hover:#E5EBE9; --vertiefung:#D3DAD8; --border:#C1CCC8; --border2:#767E7C; --trenner:#D5DEDA; --txt:#0F1513; --muted:#5A6664; --muted2:#586462; --accent:#0F1513; --auf-akzent:#FFFFFF; --accent-stark:#000000; --accent-tief:#3A4442; --accent2:#6A2FB5; --live:#0A6B4C; --warn:#8A4B00; --gelb:#4F5B00; --blue:#0B4FA8; --red:#B32318; --net-yt:#A32019; --net-ig:#96297F; --net-tt:#0A6A93; --net-none:#5A6664; --e1:0 1px 2px rgba(15,21,19,.05); --e2:0 4px 14px -6px rgba(15,21,19,.16); --e3:0 16px 40px -12px rgba(15,21,19,.22); } /* ── Hausstil-Skalen ───────────────────────────────────────────────────────── Wortgleich in creator-cockpit, hatetime und knowledge-base. Werte aus design-tokens.md, Abschnitt "Geteilte Skalen" — dort zuerst eintragen, dann hier, dann in den anderen beiden Apps nachziehen. Warum ausserhalb der Themenbloecke: eine Groesse, ein Abstand, ein Radius sind in Hell und Dunkel dieselben. Nur Farben schalten. */ :root{ /* Typografie. --mono steht historisch oben bei der Palette, --ui kommt hier dazu; Hausstil sind beide. */ --ui:"Saira",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* fs-2xs ist die dichte Stufe: Gitter, Achsen, kleine Bedienelemente. .625rem sind bei Browser-Default genau 10px — der Wert, den cockpit und hatetime unabhaengig voneinander gebraucht haben. Kein Fliesstext hier. */ --fs-2xs:.625rem; --lh-2xs:1.3; /* dichte Gitter, Achsen, Mini-Controls */ --fs-xs:.7rem; --lh-xs:1.35; /* Labels, Chips */ --fs-sm:.8rem; --lh-sm:1.45; /* Sekundaertext, Tabellenzellen */ --fs-md:.9rem; --lh-md:1.5; /* Fliesstext (Basis) */ --fs-lg:1.05rem; --lh-lg:1.45; /* Karten-Ueberschrift */ --fs-xl:1.5rem; --lh-xl:1.25; /* Seitentitel */ --fs-2xl:2.2rem; --lh-2xl:1.15; /* Kennzahlen, Hero */ /* Abstaende. Zwischenwerte sind kein Feinschliff, sondern Drift: wer .35rem braucht, braucht --sp-2. */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2.5rem; /* Radien. --r-sm und --r stehen oben bei der Palette. --r-lg 14px ist eine dokumentierte Abweichung dieser App — der Hausstil kennt nur sm/r/pill. */ --r-pill:99px; /* Fokus. Der Ring wird unten global gesetzt; das Token macht ihn fuer die Bausteine zitierbar, statt die Werte dort erneut zu schreiben. */ --focus:2px solid var(--accent); /* z-index — vier Ebenen statt ad hoc 5/10/100. */ --z-erhoeht:10; --z-sticky:100; --z-overlay:1000; --z-toast:10000; } /* ── Rollennamen ───────────────────────────────────────────────────────────── Die "Bausteine" in design-tokens.md sind in allen drei Apps wortgleich und sprechen deshalb Rollen an (--surface, --line, --ink), nicht die app-eigenen Palettennamen (--panel, --border, --txt). Diese Aliase machen beides deckungsgleich, ohne einen einzigen bestehenden Namen anzufassen — alter Code laeuft unveraendert weiter. Sie stehen absichtlich NUR hier und nicht zusaetzlich in den Themenbloecken: eine Custom-Property wird erst am Einsatzort aufgeloest, --surface zeigt also immer auf den dann gueltigen Wert von --panel. Ein Alias pro Rolle reicht damit fuer Hell und Dunkel. */ :root{ --ground:var(--bg); --surface:var(--panel); --surface-2:var(--panel2); --surface-hover:var(--panel-hover); --sunken:var(--vertiefung); --line:var(--border); --line-strong:var(--border2); --line-quiet:var(--trenner); --ink:var(--txt); --ink-2:var(--muted); --ink-3:var(--muted2); --on-accent:var(--auf-akzent); --accent-strong:var(--accent-stark); --accent-2:var(--accent2); /* Status. --warn heisst in beiden Sprachen gleich und braucht kein Alias. */ --ok:var(--live); --amber:var(--gelb); --err:var(--red); --info:var(--blue); } /* A11y: sichtbarer Fokus-Ring fuer Tastaturnutzer (Maus-Klicks bleiben ringfrei) */ :focus-visible{outline:var(--focus);outline-offset:2px;border-radius:var(--r-sm)} /* Autofill: color-scheme deckt Chromes Autofill-Highlight NICHT ab (live geprueft) — dafuer braucht es den Inset-Schatten, der die UA-Farbe verdeckt. Betrifft die Konto-Felder (E-Mail/Passwort aendern) und die Anmeldeseite. Steht hier statt in den Seiten: dieselbe Aufgabe wie color-scheme — browsereigene Malerei den Rollen unterwerfen — und sonst in fuenf Dateien kopiert. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--txt); -webkit-box-shadow:0 0 0 1000px var(--bg) inset; box-shadow:0 0 0 1000px var(--bg) inset; caret-color:var(--txt); }