/* ===================================================================== theme.css — Verbindliche Gestaltungswerte des Blickmodells ===================================================================== Destilliert aus den vier eingefrorenen Wegwerf-Prototypen (Überblick, Innenansicht, Dokumente, Zeiterfassung), entschieden auf Lastenheft-Stand. Bestätigte Gabelungen: Gabelung 1 — Fünfstufige Dringlichkeitsskala (06_ueberblick.md): Rot/Orange/Gelb aus dem Prototyp übernommen; Grün und Blau neu besetzt, bewusst getrennt vom Bestätigungs-Grün und vom Akzentblau. Gabelung 2 — Grundflächen: Die Desktop-Palette gilt verbindlich für alle Ansichten, auch mobil. Die minimal abweichenden Grautöne des Zeiterfassungs-Prototyps entfallen. Regel: Jede neue Ansicht bezieht ihre Werte AUSSCHLIESSLICH aus diesen Variablen. Kein Hex-Wert direkt im Ansichts-Code. Die Prinzipien in Worten stehen in gestaltung.md. ===================================================================== */ :root { /* ------------------------------------------------------------- 1 · GRUNDFLÄCHEN (dunkle Werkstatt-Optik) Vier Helligkeitsstufen tragen die gesamte Flächenstruktur. ------------------------------------------------------------- */ --grundflaeche: #0f1216; /* Seitenhintergrund, tiefste Ebene */ --flaeche: #161a20; /* Panels, Leisten, abgesetzte Bereiche */ --zeile: #1b2027; /* Karten, Blickzeilen, Eingabefelder */ --zeile-hell: #212833; /* Hover-Zustand von Zeilen und Karten */ /* Linien — Struktur kommt aus Linien, nicht aus Schatten */ --linie: #272e38; /* Standard-Rahmen und Trenner */ --linie-fein: #1f262f; /* leiser Rahmen ruhender Karten, Trenner innerhalb einer Karte */ /* ------------------------------------------------------------- 2 · TEXT (drei Stufen, mehr gibt es nicht) ------------------------------------------------------------- */ --text: #e7ebf1; /* Haupttext, Titel, Werte */ --text-zweit: #9aa6b6; /* Zweittext, Beschreibungen, Untertitel */ --text-gedaempft: #6b7686; /* Nebensächliches: Hinweise, Etiketten, Zeitstempel, Fußzeilen */ /* ------------------------------------------------------------- 3 · BEDEUTUNGSFARBEN (exklusiv — jede Farbe bedeutet genau eines, siehe gestaltung.md Prinzip 2) ------------------------------------------------------------- */ --akzent: #5a9de0; /* NUR interaktiv: Links, Auswahl, Fokus, Projektnummern-Chip. Nie Dringlichkeit. Logoblau (helle Stufe für dunklen Grund) seit Gabelung 4 (Sept. 2026); Gabelung 3 Koralle #f4715f; davor Blau #4aa3d8. */ --bestaetigung: #4cc38a; /* NUR Bestätigung/lebendig: gesendetes ✓, laufende Stempeluhr, KI-Puls. Nie ein gespeicherter Zustand. */ --warnung: #e9b23a; /* Prüf-Hinweise, Minus-Werte (Flexkonto). Teilt den Wert mit --dring-dringend — dokumentierte Autoren-Entscheidung, siehe gestaltung.md. */ /* Transparente Begleitflächen der Bedeutungsfarben */ --akzent-flaeche: rgba(90, 157, 224, .12); /* Auswahl-Füllung */ --akzent-rahmen: rgba(90, 157, 224, .45); /* Auswahl-Rahmen */ --bestaetigung-flaeche: rgba(76, 195, 138, .08); /* Bestätigungs-Box */ --bestaetigung-rahmen: rgba(76, 195, 138, .25); --warnung-flaeche: rgba(233, 178, 58, .08); --warnung-rahmen: rgba(233, 178, 58, .25); /* ------------------------------------------------------------- 4 · DRINGLICHKEIT — die fünfstufige Farbskala (06, verbindlich) nicht dringend · normal · dringend · sehr dringend · sofort Diese fünf Farben bedeuten NUR Dringlichkeit, sonst nichts. ------------------------------------------------------------- */ --dring-sofort: #ff4338; /* rot — sofort */ --dring-sehr-dringend: #ff8a2b; /* orange — sehr dringend */ --dring-dringend: #e9b23a; /* gelb — dringend */ --dring-normal: #5fae74; /* grün — normal (≠ Bestätigung) */ --dring-nicht: #7c8794; /* grau — nicht dringend; seit Gabelung 4 Grau statt Blau, damit es sich vom Logoblau-Akzent trennt */ /* Glühen — ausschließlich für die Stufe „sofort" */ --dring-sofort-gluehen: 0 0 12px 1px var(--dring-sofort); /* Breite der Dringlichkeitsleiste am linken Zeilenrand */ --dring-leiste: 5px; /* ------------------------------------------------------------- 5 · CHRONIK-MARKER (Innenansicht, 10) Art-bezogene, ruhige Farben — KEINE Dringlichkeit, KEIN Status. Sie sagen nur, welcher Art ein Ereignis ist. ------------------------------------------------------------- */ --chronik-beobachtung: #7e8aa0; --chronik-eingabe: #7e8aa0; /* bewusst gleich der Beobachtung */ --chronik-dokument: #5a93b8; --chronik-handlung: #c06f9b; /* Beere — eigenstaendig, klar getrennt von Freigabe */ --chronik-termin: #b59a52; --chronik-mail: #8a86b8; --chronik-korrektur: #b87a6a; --chronik-freigabe: #5fa98a; /* gruen, "gruenes Licht" — eigene Bedeutung, nicht mehr gleich Handlung */ /* ------------------------------------------------------------- 6 · KNÖPFE (feste Farbpaare aus den Prototypen) ------------------------------------------------------------- */ /* Standard-Knopf: Zeile + Linie, siehe Zustände unten */ --knopf-primaer: #26405a; /* Haupthandlung, Fläche */ --knopf-primaer-rahmen: #356089; --knopf-primaer-text: #dcebf7; --knopf-primaer-hover: #2d4a68; --knopf-ja: #1f4435; /* Zustimmung („Ja, schaffbar") */ --knopf-ja-rahmen: #2f6b52; --knopf-ja-text: #cdeede; --knopf-ja-hover: #244f3d; /* Stempelknöpfe der Zeiterfassung (Verlauf 160°, dunkler Endton) */ --stempel-kommen: linear-gradient(160deg, #1a5fa8, #0d4d8f); /* Logoblau */ /* ------------------------------------------------------------- 6b · BEREICHSPALETTE „MEINE ZEITEN" — PAPIER (Gabelung 4) Die Smartphone-App ist hell: Papiergrund, Logoblau-Knöpfe, Marine-Text — draußen lesbar. Gilt nur unter [data-bereich= "meine-zeiten"]; der Desktop bleibt in der Werkstatt-Optik. Bedeutungen bleiben exklusiv (Prinzip 2): Akzent = interaktiv, Bestätigung = geschehen/lebendig, Warnung = Aufmerksamkeit. ------------------------------------------------------------- */ --papier-grundflaeche: #f3f5f7; --papier-flaeche: #ffffff; --papier-zeile: #ffffff; --papier-zeile-hell: #e3e8ed; --papier-linie: #c4ccd4; --papier-linie-fein: #d8dee5; --papier-text: #12294a; /* Marine */ --papier-text-zweit: #3f5570; --papier-text-gedaempft: #7a8896; --papier-akzent: #0d4d8f; /* Logoblau, dunkle Stufe */ --papier-bestaetigung: #2f8f5b; /* Grün, auf Weiß lesbar */ --papier-warnung: #b7791f; /* Bernstein, auf Weiß lesbar */ --papier-akzent-flaeche: rgba(13, 77, 143, .08); --papier-akzent-rahmen: rgba(13, 77, 143, .35); --papier-stempel-kommen: #0d4d8f; /* gefüllt, weiße Schrift */ --papier-stempel-feierabend: #12294a; /* Marine gefüllt, weiße Schrift */ --papier-druck: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(18,41,74,.14); --papier-gedrueckt: inset 0 2px 5px rgba(18,41,74,.20); /* Knopfstile „Meine Zeiten" (Papier) — alle Knöpfe nach diesem Muster: Stempelknöpfe: volle Breite, gefüllt (Kommen Logoblau, Feierabend Marine), weiße Schrift, Anzeigeschrift versal 19px, Radius 6, Kante unten (inset 0 -5px 0 rgba(0,0,0,.22)), gedrückt 3px tiefer. Querbalken und Zweitknöpfe: weiß (--papier-zeile), 1px --papier-linie, Radius 4, Text Marine 600, Mindesthöhe 44px, --papier-druck, gedrückt 2px tiefer mit --papier-gedrueckt. Bestätigende Handlungen (senden, setzen): gefüllt Logoblau wie Kommen, aber in Textgröße. Verwerfen/Zurück: Zweitknopf. */ --stempel-feierabend: linear-gradient(160deg, #b8543f, #9a4434); /* ------------------------------------------------------------- 7 · TYPOGRAFIE Zwei Schriften: Sans für Sprache, Mono für Kennungen, Zeiten, Zahlen und Etiketten. ------------------------------------------------------------- */ --schrift-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Sans von "Meine Zeiten" (Gabelung 4): Exo 2, eingebettet (offline), mit der System-Sans als Rückfall. Desktop bleibt bei --schrift-sans. */ --schrift-sans-mobil: "Exo 2", var(--schrift-sans); --schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Anzeigeschrift — große Werte der Zeiterfassung (laufende Uhr, Flexkonto-Stand, Verpflegungsbetrag) und seit Gabelung 4 in "Meine Zeiten" auch Name im Kopf, Stempelknöpfe, Bildschirmtitel (Schrift der Wortmarke). Nie für Listen, Chips, Uhrzeiten in Zeilen, Fließtext — dort Mono/Sans, weil die Anzeigeschrift nicht dicktengleich ist. Eingebettet (offline), nie aus dem Netz geladen. gestaltung.md Prinzip 3. */ --schrift-anzeige: "Michroma", var(--schrift-mono); /* Tastengefühl der Smartphone-Knöpfe (Retro-Haptik, Prinzip 10) */ --taste-druck: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.35); --taste-gedrueckt: inset 0 2px 5px rgba(0,0,0,.45); --zeilenhoehe: 1.45; /* Grund-Zeilenhöhe überall */ /* Schriftgrößen Desktop (dichte Arbeitsansicht) */ --gr-seitentitel: 18px; /* Gewicht 650 */ --gr-titel: 14.5px; /* Blick-/Kartentitel, Gewicht 600 */ --gr-grundtext: 13.5px; /* Fließtext, Ereignistext */ --gr-zweittext: 12.5px; /* Beschreibungen, Knopftext */ --gr-klein: 11.5px; /* Hinweise, Zeitstempel */ --gr-etikett: 10.5px; /* Abschnitts-Etiketten: Mono, VERSALIEN, Sperrung .7px */ --gr-chip: 9.5px; /* Typ-Chips: Mono, VERSALIEN, Sperrung .6px */ /* Schriftgrößen Smartphone (großzügig, touch-tauglich) */ --gr-mobil-uhr: 54px; /* Uhrzeit groß, Mono, Gewicht 600 */ --gr-mobil-uhr-klein: 34px; --gr-mobil-frage: 21px; /* Leitfrage je Schritt, Gewicht 750 */ --gr-mobil-gruss: 20px; /* Begrüßung, Gewicht 700 */ --gr-mobil-knopf: 16.5px; /* Haupthandlung (CTA), Gewicht 700 */ --gr-mobil-text: 13.5px; --gr-mobil-hinweis: 11.5px; /* ------------------------------------------------------------- 8 · ABSTÄNDE (Raster aus den Prototypen destilliert) ------------------------------------------------------------- */ --abstand-1: 4px; /* Chip-Innenluft, engste Fugen */ --abstand-2: 8px; /* Fugen zwischen Knöpfen/Chips */ --abstand-3: 12px; /* Karten-Innenluft klein */ --abstand-4: 16px; /* Karten-Innenluft Standard */ --abstand-5: 22px; /* Seitenrand, Abschnittsabstand */ --abstand-6: 28px; /* Seiten-Außenluft oben */ --zeilen-fuge: 7px; /* Lücke zwischen Blickzeilen */ --inhalt-breite: 1060px; /* maximale Inhaltsbreite Desktop */ /* ------------------------------------------------------------- 9 · ECKENRADIEN — ZWEI DICHTEN (Autoren-Entscheidung) Desktop klein und dicht, Smartphone groß und touch- freundlich. Nie mischen. ------------------------------------------------------------- */ /* Desktop */ --radius-chip: 4px; /* Typ-Chips, kleine Etiketten */ --radius-knopf: 6px; /* Knöpfe, Eingabefelder */ --radius-karte: 7px; /* Blickzeilen, Karten (--radius der Prototypen) */ --radius-panel: 9px; /* Panels, Filterleisten, Sichten-Umschalter */ /* Smartphone */ --radius-mobil-feld: 10px; /* kleine Eingabefelder */ --radius-mobil-karte: 14px; /* Info-Karten, Summenkästen */ --radius-mobil-knopf: 16px; /* Auswahl- und Weiter-Knöpfe */ --radius-mobil-gross: 22px; /* Stempelknöpfe Kommen/Feierabend */ --radius-rund: 999px; /* Chips in Pillenform (Flexkonto) */ /* ------------------------------------------------------------- 10 · SCHATTEN Desktop ist flach — Struktur kommt aus Linien und Flächen- stufen. Schatten nur mobil für schwebende Vorschlagskarten. ------------------------------------------------------------- */ --schatten-keiner: none; --schatten-vorschlag: 0 10px 28px rgba(0, 0, 0, .35); /* ------------------------------------------------------------- 11 · ZUSTÄNDE (einheitlich in allen Ansichten) ------------------------------------------------------------- */ /* Hover: Fläche eine Stufe heller, Linie eine Stufe kräftiger */ --zustand-hover-flaeche: var(--zeile-hell); --zustand-hover-rahmen: var(--linie); /* Auswahl (gewählter Eintrag, gedrückter Auswahlknopf) */ --zustand-auswahl-rahmen: var(--akzent); --zustand-auswahl-flaeche: var(--akzent-flaeche); /* Fokus (Tastatur): sichtbar, schmal, akzentfarben */ --zustand-fokus: 1px solid var(--akzent); /* Deaktiviert */ --zustand-deaktiviert: .5; /* opacity; Zeiger: default */ /* ------------------------------------------------------------- 12 · BEWEGUNG (sparsam; reduced-motion wird respektiert) ------------------------------------------------------------- */ --dauer-kurz: .12s; /* Hover, Farb- und Rahmenwechsel */ --dauer-mittel: .18s; /* Aufklappen, Einblenden */ --dauer-blatt: .22s; /* Bildschirmwechsel mobil */ } /* --------------------------------------------------------------- GRUNDREGELN (gelten für jede Ansicht, direkt einbindbar) --------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--schrift-sans); background: var(--grundflaeche); color: var(--text); line-height: var(--zeilenhoehe); -webkit-font-smoothing: antialiased; } /* Barrierefreiheit: Wer weniger Bewegung wünscht, bekommt keine. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }