/* ========================================================================== tokens.css — ALLE Farb-, Schrift- und Abstandswerte des Portals. -------------------------------------------------------------------------- Regel: Die Optik-Angleichung fasst NUR diese Datei und kacheln.css an — kein HTML. Wer hier einen Wert aendert, aendert ihn ueberall. In kacheln.css steht daher KEIN roher Farbwert. STAND: Struktur nach Anweisung 76, Werte nach 'Markenkleid Stil-News v1' (Anweisung 77). Geaendert wurden ausschliesslich die WERTE, nicht die Namen. KONTRAST-REGEL (verbindlich): Weisse Schrift auf --marke ist NICHT zulaessig (~2:1). Auf Markenflaechen steht --text-auf-marke. Orange ist Akzent, nicht Grundflaeche. Die Statusfarben sind KEINE Markenfarben und werden nie durch Orange ersetzt. ========================================================================== */ /* -------------------------------------------------------------------------- Open Sans — lokal eingebettet (Markenkleid Stil-News v1, SIL OFL). EINE variable woff2-Datei traegt die Gewichte 400-700 im Latin-Umfang (Umlaute und Eszett eingeschlossen) — kein Fremd-CDN, keine Ladeabhaengigkeit von Dritten. Rueckfallkette siehe --schrift-familie. -------------------------------------------------------------------------- */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/schrift/open-sans-latin.woff2") format("woff2"); } :root { /* ====================================================================== PFLICHT-TOKEN (Namen nach 'Markenkleid Stil-News v1') ====================================================================== */ --marke: #FA9302; /* Marken-Orange — Akzent und Interaktion */ --flaeche: #F6F6F6; /* Seitengrund */ --karte: #FFFFFF; /* Kachel-/Kopfgrund */ --linie: #EBEBEB; /* Haarlinien, Rahmen */ --text: #202020; /* Haupttext */ --text-still: #555555; /* Nebentext, Zeitstempel, Labels */ /* Statusfarben — EIN System. Sie sind KEINE Markenfarben und werden nie durch die Marke ersetzt. */ --status-ok: #2F8A43; --status-warn: #C99700; /* bewusst gelblich — unterscheidbar vom Orange */ --status-crit: #C0392B; --status-info: #4A6FA5; /* ---------------------------------------------------------------------- LOKALE ABLEITUNGEN Nicht im Markenkleid-Dokument benannt, aber noetig, damit Bauteile ohne rohe Farbwerte auskommen. Alle sind aus den Pflicht-Token abgeleitet und werden mit ihnen zusammen gepflegt. ---------------------------------------------------------------------- */ --marke-hover: #D47D02; /* Marke, ca. 15 % dunkler */ --marke-flaeche: #FDF1E0; /* Marke als ruhige Flaeche (Badges, Aktiv) */ /* Schrift AUF Markenflaechen. Bewusst ein FESTER dunkler Wert und NICHT var(--text): --text kippt in der dunklen Darstellung auf hell, und Weiss auf Orange ist genau das, was die Kontrast-Regel verbietet. Gemessen: #202020 auf #FA9302 = 7,17:1. */ --text-auf-marke: #202020; /* ---------------------------------------------------------------------- TEXT-TOENE der Signalfarben Die Signalfarben oben sind fuer FLAECHEN und PUNKTE gedacht — als kleiner Text auf ihrem hellen Flaechenpartner tragen sie nicht: --marke auf Karte 2,27:1 --status-warn auf Flaechenpartner 2,40:1 --status-ok auf Flaechenpartner 3,88:1 Alle drei liegen unter 4,5:1. Diese abgedunkelten Toene sind daher ausschliesslich fuer SCHRIFT gedacht; Punkte, Balken, Rahmen und Statuskanten behalten die Signalfarben aus dem Dokument. ---------------------------------------------------------------------- */ --marke-text: #8A5000; /* auf Karte 6,51:1 · Markenflaeche 5,83:1 */ --status-ok-text: #1E6630; /* auf Flaechenpartner 6,26:1 */ --status-warn-text: #8A6800; /* auf Flaechenpartner 4,67:1 */ --status-crit-text: #A82F23; /* auf Flaechenpartner 5,80:1 */ --status-info-text: #3C5C8A; /* auf Flaechenpartner 6,00:1 */ /* Flaechenpartner der Statusfarben (Baender, Pillen, Meldungen) */ --status-ok-flaeche: #EAF5EC; --status-warn-flaeche: #FAF3DF; --status-crit-flaeche: #F9EAE8; --status-info-flaeche: #EDF1F7; --flaeche-still: #FAFAFA; /* Eingabefelder, ruhige Innenflaechen */ --linie-kraeftig: #CFCFCF; /* Rahmen von Eingaben und stillen Knoepfen */ --text-umkehr: #ffffff; /* Schrift auf dunklem Grund */ /* Kopfleiste: heller Kopf auf --karte mit Haarlinie unten (Markenkleid). Der aktive Navigationspunkt wird in --marke unterstrichen. */ --kopf-flaeche: #FFFFFF; --kopf-text: #202020; --kopf-aktiv: #FDF1E0; /* ====================================================================== TYPOGRAFIE ====================================================================== */ --schrift-familie: "Open Sans", "Helvetica Neue", Arial, sans-serif; --schrift-familie-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Grundgroesse bewusst 1rem = 16px: kein Zoomzwang am Handy, und Eingabefelder loesen unter iOS kein Hineinzoomen aus. */ --schrift-grund: 1rem; --schrift-klein: 0.875rem; --schrift-winzig: 0.8125rem; --schrift-gross: 1.125rem; --schrift-titel: 1.25rem; --schrift-marke: 1.125rem; --schrift-normal: 400; --schrift-halbfett: 600; --schrift-fett: 700; --zeilenhoehe: 1.55; --zeilenhoehe-eng: 1.3; /* ====================================================================== LAYOUT ====================================================================== */ --abstand-1: 0.25rem; --abstand-2: 0.5rem; --abstand-3: 0.75rem; --abstand-4: 1rem; --abstand-5: 1.5rem; --abstand-6: 2rem; --abstand-7: 3rem; --radius-klein: 4px; --radius: 8px; --radius-gross: 10px; /* Kachel-Eckenradius — 10px laut Kachel-System v1 */ /* Innenabstand der Kachel: 12-14px laut Kachel-System v1. Vorher lag er mit 16px knapp darueber. */ --kachel-innen: 0.875rem; --schatten-kachel: 0 1px 2px rgba(31, 41, 51, 0.06), 0 2px 8px rgba(31, 41, 51, 0.05); --schatten-hover: 0 4px 14px rgba(31, 41, 51, 0.12); --schatten-kopf: 0 1px 3px rgba(31, 41, 51, 0.18); /* 44px ist das Mindestmass fuer Touch-Ziele — nie unterschreiten. */ --touchziel: 44px; --inhalt-breite: 72rem; --schmal-breite: 26rem; /* Rasterabstand 12px nach Anweisung 76 */ --raster-luecke: 0.75rem; /* Statusoberkante der Kennzahl-Kachel */ --statuskante: 3px; --dauer-kurz: 120ms; --kurve: ease-out; } /* Dunkle Darstellung: ausschliesslich Token-Werte werden getauscht. Kein Bauteil in kacheln.css weiss davon — genau das ist der Zweck. */ @media (prefers-color-scheme: dark) { :root { /* Die MARKE bleibt unveraendert — sie ist die Marke, keine Flaeche. Auf dunklem Grund traegt #FA9302 ausreichend Kontrast. */ --marke: #FA9302; --marke-hover: #FFA733; --flaeche: #17181A; --karte: #1F2124; --linie: #2E3134; --text: #ECECEC; --text-still: #A8A8A8; --status-ok: #5BC073; --status-warn: #E0B84A; --status-crit: #E8776A; --status-info: #7C9BD1; --marke-flaeche: #33240B; /* Auf dunklem Grund tragen die hellen Signalfarben als Schrift bereits; die Text-Toene fallen mit ihnen zusammen. */ --marke-text: #FFB040; --status-ok-text: #5BC073; --status-warn-text: #E0B84A; --status-crit-text: #E8776A; --status-info-text: #7C9BD1; --status-ok-flaeche: #16281B; --status-warn-flaeche: #2B2413; --status-crit-flaeche: #2E1A18; --status-info-flaeche: #1B2230; --flaeche-still: #26282C; --linie-kraeftig: #454A50; --kopf-flaeche: #1F2124; --kopf-text: #ECECEC; --kopf-aktiv: #33240B; --schatten-kachel: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); --schatten-hover: 0 4px 14px rgba(0, 0, 0, 0.45); } }