/* Zuschlag.ai · Marken-Tokens (--z-…) * * Idee: Papier, Tinte, Textmarker. Die Bildmarke ist ein Z aus Schlag und Markerbalken: Der Zuschlag fällt, * das Entscheidende wird markiert. Signalfarbe ist das Markergelb; es trägt keinen Text auf hellem Grund, * sondern hinterlegt ihn (wie ein Textmarker) oder steht auf Tinte. * * Schriften (alle selbst gehostet, keine externen Quellen): * Newsreader Überschriften, OFL 1.1, Teilmenge Latin, Optische Größe 56 fest, Stärke 400 bis 700 * Space Grotesk Text und Bedienelemente, OFL 1.1 * JetBrains Mono Daten, Fristen, Fundstellen, Kennzeichnungen, OFL 1.1 * * Farbschema: hell als Standard; dunkel per prefers-color-scheme oder data-theme="dark" am * (data-theme="light" erzwingt hell, wie in der Anwendung). */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("schriften/Newsreader-Anzeige-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: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/SpaceGrotesk-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: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/SpaceGrotesk-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; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/JetBrainsMono-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: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/JetBrainsMono-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 { /* Grundfarben der Marke (fest, unabhängig vom Farbschema) */ --z-tinte: #121A3B; /* Tinte: Bildmarke, dunkle Flächen, Text auf Marker */ --z-tinte-tief: #0B1126; /* Seitengrund im Dunkelmodus */ --z-papier: #F7F5EF; /* Seitengrund hell */ --z-weiss: #FFFFFF; /* Blatt: Karten, Dokumente */ --z-marker: #FFD83D; /* Signalfarbe Textmarker */ --z-marker-satt: #F5C400; /* Marker gedrückt/Hover */ --z-marker-zart: #FFF3B8; /* zarte Hinterlegung */ --z-ampel-gruen: #1E9E57; /* Ampelpunkte (immer mit Text oder Symbol) */ --z-ampel-gelb: #E8A000; --z-ampel-rot: #D63A2F; /* Rollen (wechseln mit dem Farbschema) */ --z-grund: var(--z-papier); --z-grund-2: #EFECE3; /* abgesetzte Bänder */ --z-flaeche: var(--z-weiss); /* Karten */ --z-flaeche-2: #F3F1EA; /* Flächen in Karten */ --z-text: #0F1733; /* 16:1 auf Papier */ --z-text-2: #343C59; /* 10:1 */ --z-text-leise: #5A6178; /* 5,6:1 auf Papier, 5,2:1 auf --z-grund-2 */ --z-linie: #E2DED3; --z-linie-stark: #C9C4B6; --z-rand-eingabe: #7A8197; /* 3,9:1 auf Weiß */ --z-auf-marker: #0F1733; /* Text auf Markergelb */ --z-auf-tinte: #F3F1EA; /* Text auf Tinte */ --z-hinterlegt: rgba(255, 216, 61, 0.55); /* Markerstrich hinter Text */ --z-fokus: #121A3B; --z-gut: #18703F; /* Ampeltexte, AA auf allen hellen Flächen */ --z-gut-flaeche: #E3F3E8; --z-mittel: #8A5A00; --z-mittel-flaeche: #FDF0D2; --z-schlecht: #B42318; --z-schlecht-flaeche: #FBE4E1; --z-schatten-1: 0 1px 2px rgba(18, 26, 59, 0.06), 0 2px 8px rgba(18, 26, 59, 0.05); --z-schatten-2: 0 2px 6px rgba(18, 26, 59, 0.06), 0 18px 48px rgba(18, 26, 59, 0.12); /* Schrift */ --z-schrift-anzeige: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --z-schrift-text: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --z-schrift-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Form */ --z-radius-klein: 6px; --z-radius: 10px; --z-radius-gross: 16px; --z-kachel-radius: 18.75%; /* Eckenradius der Bildmarke (12 von 64) */ color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --z-grund: var(--z-tinte-tief); --z-grund-2: #0F1631; --z-flaeche: #121A3B; --z-flaeche-2: #18214A; --z-text: #F3F1EA; --z-text-2: #CDD0DD; --z-text-leise: #A3A9BF; --z-linie: #222B57; --z-linie-stark: #34407A; --z-rand-eingabe: #6B75A8; --z-hinterlegt: rgba(255, 216, 61, 0.26); --z-fokus: #FFD83D; --z-ampel-gruen: #3DBB73; --z-ampel-gelb: #F2B33D; --z-ampel-rot: #FF6E61; --z-gut: #4CC27E; --z-gut-flaeche: #11301F; --z-mittel: #F2B33D; --z-mittel-flaeche: #33280F; --z-schlecht: #FF7A6E; --z-schlecht-flaeche: #3A1716; --z-schatten-1: 0 1px 2px rgba(0, 0, 0, 0.35); --z-schatten-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(0, 0, 0, 0.35); } } :root[data-theme="dark"] { color-scheme: dark; --z-grund: var(--z-tinte-tief); --z-grund-2: #0F1631; --z-flaeche: #121A3B; --z-flaeche-2: #18214A; --z-text: #F3F1EA; --z-text-2: #CDD0DD; --z-text-leise: #A3A9BF; --z-linie: #222B57; --z-linie-stark: #34407A; --z-rand-eingabe: #6B75A8; --z-hinterlegt: rgba(255, 216, 61, 0.26); --z-fokus: #FFD83D; --z-ampel-gruen: #3DBB73; --z-ampel-gelb: #F2B33D; --z-ampel-rot: #FF6E61; --z-gut: #4CC27E; --z-gut-flaeche: #11301F; --z-mittel: #F2B33D; --z-mittel-flaeche: #33280F; --z-schlecht: #FF7A6E; --z-schlecht-flaeche: #3A1716; --z-schatten-1: 0 1px 2px rgba(0, 0, 0, 0.35); --z-schatten-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(0, 0, 0, 0.35); }