/* ============================================================ AUTO-GENERIERT von ui-kit/sync.py — NICHT hier editieren! Quelle: ui-kit/tokens.css Aussehen aendern? -> in der Quelle, dann "Sync". ============================================================ */ @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; } @font-face { font-family: 'Roboto Mono'; src: url('../fonts/RobotoMono-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; } :root { /* === HINTERGRÜNDE === */ --flaeche: #121A23; /* Workspace + ausgewählte Karten ("sinkt rein") */ --flaeche-erhaben: #17212C; /* Panel-Fläche — etwas heller als bg-base (auch Topbar-Grund) */ --flaeche-gehoben: #1c232e; /* Header, Tabs, Modal-Header */ --karte: #222B3C; /* Karten default — heller als Sidebar ("schwebt drauf") */ --karte-aktiv: #2a3345; /* Karten hover */ --eingabe: #151D27; --vertieft: #0e131c; /* dunkle Widget-/Block-Fläche, kein Border */ /* Die Meldung, die über dem Inhalt schwebt (V-6, 05.08.2026). Wert ist der bisherige Toast-Grund der Suite — es ändert sich nichts, die Fläche ist nur endlich eine Rolle und damit teilbar. Das Büro-Dunkel löst dieselbe Rolle mit #1c232e auf; Chris hat beide am Bild bestätigt. */ --flaeche-schwebend: #222B3C; /* === BORDERS === */ --linie: #2e3748; /* Neu in V-2a (04.08.2026): Die Suite hatte keine zarte Linie, das Büro nutzt sie 79-mal. Der geteilte Dialog braucht sie als HOVER-FLÄCHE des Schließen-Knopfs — die Rolle hat im Haus zwei Jobs, Haarlinie und leise Fläche. Nicht erfunden: Der Wert steht als --dunkel-linie-zart in farben.css und ist von Chris am 02.08.2026 am gerenderten Bild entschieden worden (dunkel-blicke.html); die Suite hat ihn nur nie adoptiert. */ --linie-zart: #232c3a; --linie-stark: #3f4a5e; --linie-tief: #0B1119; /* fast schwarz — stärkste Trennlinie (z. B. Sidebar↔Workspace) */ /* === TEXT === */ --text: #e6e9ef; --text-gedaempft: #8a94a6; --text-leise: #79839a; --text-auf-akzent: #ffffff; /* Schrift auf gefüllten Akzent-/Destructive-Buttons */ /* === GEZEICHNETER HAKEN === Der Haken im Konto-Menü ist ein SVG in einer `data:`-URL. Dort kann `var()` NICHT hineingreifen: Das SVG ist ein eigenes Dokument und sieht die Variablen dieser Seite nicht. Die Farbe muss als Literal im Bild stehen. Was geht, ist die URL als GANZES zu einer Rolle zu machen — dann steht der Ton EINMAL hier statt verstreut in vier Modulen (Chris 04.08.2026). Der Wert ist `--text-gedaempft` von oben. HIER STAND BIS 05.08.2026 auch `--menue-pfeil`, der Pfeil im Auswahlfeld. Er ist mit V-4c/2 entfallen: Die Auswahl trägt jetzt einen Chevron aus zwei gedrehten Rahmenlinien, dessen Ton eine echte Rolle ist und der Farbwelt von allein folgt. Der Haken bleibt der letzte Fall, in dem wir eine Farbe in ein Bild schreiben müssen. */ --konto-haken: url("data:image/svg+xml;utf8,"); /* === AKZENT === */ --akzent: #4d7da8; --akzent-aktiv: #5e8eb9; /* === STATUS (Toasts, Indicators, Feedback) ============================ Fehler-Rot nach Rolle getrennt: --fehler = Vordergrund (Text, Icons, dünne Streifen) auf dunklem BG --fehler-flaeche = Background mit weißer Schrift drauf (Destructive-Buttons) --fehler-flaeche-aktiv = Hover-Variante für --fehler-flaeche Ink = dunkler Vordergrund-Ton auf dem hellen --c-*-Icon-Kreis. */ --ok: #4ade80; /* grün — Erfolg (Pastell-Trio 14.08. probiert & zurückgestellt) */ --warnung: #fbbf24; /* gelb — Warnung */ --fehler: #ef5e6e; /* rot Vordergrund — Text, Toast-Stripe, Status */ --fehler-flaeche: #d04040; /* rot Background — Destructive-Buttons */ --fehler-flaeche-aktiv: #b91c1c; /* dunklerer Hover-Stand für --fehler-flaeche */ --fehler-tinte: #ffffff; /* Text auf Fehler-Flaeche (war Literal im Toast) */ --info: #38bdf8; /* cyan — Info */ --ok-tinte: #0a3d18; --warnung-tinte: #4a3200; --info-tinte: #073049; /* === SPACING === Die Leiter fuehrte bis F6-5 nur jede zweite Stufe — 6/10/14/20 px standen trotzdem 227× hart im Code (Befund der Formkarte F6-1: "der Rhythmus ist laengst gemeinsam, nur halb aufgeschrieben"). Seit 02.08.2026 vollstaendig. Modell wie im Buero-Dach: unter 4px = Feinjustage (kein Raster), 4-24 = die benannte Leiter, ueber 24 = 4er-Raster. */ --abstand-4: 4px; --abstand-6: 6px; --abstand-8: 8px; --abstand-10: 10px; --abstand-12: 12px; --abstand-14: 14px; --abstand-16: 16px; --abstand-20: 20px; --abstand-24: 24px; --abstand-40: 40px; /* Formular-Rhythmus: Abstand zwischen zwei Feldzeilen im Dialog. ENTSCHIEDEN Chris 16.08.2026 am Bild (design/formularkarte.html) — 16px fuer das ganze Haus. Vorher Buero 14, Suite 12; der Unterschied war nie beschlossen. Eigene Rolle statt --abstand-16, weil es EINE Entscheidung ist, die man als Ganzes nachjustiert (Argument wie bei der Schrift-Leiter). Sie vereinheitlicht den WERT, nicht die Bauweise: Das Buero setzt ihn auf sein 2-Spalten-Raster, die Suite auf den Rhythmus ihres Dialog-Rumpfs. Quelle: Material/design/formen.css. */ --formular-reihe: 16px; /* === RADIUS === */ --rundung-mittel: 6px; --rundung-gross: 12px; /* Modal-Fenster — Chris 02.08.2026 (war 14px) */ /* === SHADOW === */ --schatten: 0 4px 16px rgba(0,0,0,0.3); /* Bedienknopf auf Farbe — der Griff des Schalters hebt sich von seiner Bahn ab. Kam mit V-4c/1 (05.08.2026) aus dem Büro-Dach, wo er schon stand; gleicher Wert in beiden Dächern, damit es eine Rolle bleibt und kein zweiter Wert. Gehört NICHT zu den drei Schatten aus O-8 (Kante, Schwebend, Modal) — die bleiben offen. */ --schatten-knopf: 0 1px 2px rgba(0,0,0,0.2); /* Schatten einer schwebenden Meldung (V-6). Stand bisher HART im toast.css — derselbe Fall wie das Zebra in V-5. Wert unverändert übernommen. */ --schatten-schwebend: 0 6px 24px rgba(0,0,0,0.35); /* === TYPOGRAFIE === */ /* Kette wie in der Werkstatt (formen.css) und im Büro-Kit — seit 16.08.2026 mit "Segoe UI": Roboto liegt lokal und steht auf Platz 1; die Plätze dahinter sind der Notfall, falls die Datei einmal nicht lädt. Ohne Segoe fiel Windows (der Truck!) dabei auf Arial zurück. */ --schriftart-ui: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --schriftart-mono: "Roboto Mono", "SF Mono", Menlo, monospace; /* Type-Scale (Screen) — Major-Third-Skala */ --schrift-2xs: 10px; /* Mini-Mini-Labels */ --schrift-xs: 11px; /* Mini-Labels, getrackte Caps */ /* Neu in V-3a (05.08.2026): Die Suite-Leiter kannte kein 12px, der geteilte LEISE Knopf braucht es. Wert aus der Büro-Leiter (formen.css), nicht erfunden. Steht bewusst UNTER sm — die Leiter bleibt aufsteigend. */ --schrift-kompakt: 12px; /* leise Knöpfe, Nebenbemerkungen */ --schrift-sm: 13px; /* Body Default, Buttons, Inputs, Tabellen-Zellen */ /* Hieß bis V-2a (04.08.2026) `--schrift-md` — umbenannt, weil derselbe Name im Büro-Dach 14px bedeutet. Für einen GETEILTEN Baustein war das eine Mine: Er hätte eine Rolle geschrieben und wäre in einem Dach zwei Pixel kleiner geworden, ohne dass es jemand entschieden hat. Gefunden nur durchs Nebeneinanderlegen der beiden Leitern; kein Wächter kannte das Merkmal. `grund` heißt jetzt in BEIDEN Dächern 16px. */ --schrift-grund: 16px; /* Sektion-Headers, Modal-Titel, Grundgröße */ --schrift-lg: 18px; /* Block-Titel */ /* Neu in V-2a: Die Suite-Leiter kannte kein 20px, der geteilte Dialog braucht es für den Schließen-Knopf. Der Wert stammt aus der Büro-Leiter (formen.css), ist also nicht erfunden. */ --schrift-titel: 20px; /* Schließen-Knopf im Dialog, große Kopfzeilen */ --schrift-xl: 24px; /* große Zahlen / KPI (O-4, Chris 02.08.2026: war 26px — jetzt derselbe Wert wie im Büro) */ /* Schriftstärken — vom Roboto Variable Font nativ abgedeckt */ --gewicht-leicht: 300; --gewicht-normal: 400; --gewicht-mittel: 500; --gewicht-halbfett: 600; --gewicht-fett: 700; /* Letter-Spacing */ --laufweite: 0.08em; }