/* ============================================================ Wetter-App · sascharadler.com Marke: Grün #59b23e, Navy #1e2749, Font Switzer (self-hosted) Hell und dunkel über prefers-color-scheme; die Chart-Renderer nutzen die Variablen --hoch (Temperatur), --niedrig (Regen), --akzent (Grün), --nachtstreif, --dim, --text, --linie-zart. ============================================================ */ @font-face { font-family: 'Switzer'; src: url('fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Switzer'; src: url('fonts/switzer-800.woff2') format('woff2'); font-weight: 800; font-display: swap; } :root { --gruen: #59b23e; --gruen-dunkel: #47962f; --navy: #1e2749; --akzent: #47962f; /* Interaktion/aktive Chips: dunkleres Markengrün, auf Weiß lesbar */ --akzent-dim: rgba(71, 150, 47, .35); --hoch: #d9480f; /* Temperaturlinie (warm) */ --niedrig: #1971c2; /* Regen (blau) */ --mittel: #e8a13c; /* Ampel gelb */ --text: #2a3352; --dim: #7a829c; --bg: #f5f7fa; --card: #ffffff; --card2: #ffffff; --line: #e4e8f0; --linie-zart: rgba(30, 39, 73, .08); --nachtstreif: rgba(30, 39, 73, .10); --schatten: 0 1px 2px rgba(20, 26, 56, .06), 0 4px 12px rgba(20, 26, 56, .06); --sans: 'Switzer', system-ui, -apple-system, sans-serif; } /* Dunkle Variablen doppelt: einmal für die Systemautomatik, einmal für den manuellen Schalter (data-thema am ). Beide Blöcke IMMER synchron halten. */ @media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) { --akzent: #6cc94e; --akzent-dim: rgba(108, 201, 78, .4); --hoch: #ff9a5c; --niedrig: #5aa9ff; --mittel: #ffb84d; --text: #e7ebf5; --dim: #97a0bc; --bg: #0c1128; --card: #161d3d; --card2: #1c2447; --line: #2a3358; --linie-zart: rgba(231, 235, 245, .07); --nachtstreif: rgba(0, 0, 0, .30); --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .3); } } :root[data-thema="dunkel"] { --akzent: #6cc94e; --akzent-dim: rgba(108, 201, 78, .4); --hoch: #ff9a5c; --niedrig: #5aa9ff; --mittel: #ffb84d; --text: #e7ebf5; --dim: #97a0bc; --bg: #0c1128; --card: #161d3d; --card2: #1c2447; --line: #2a3358; --linie-zart: rgba(231, 235, 245, .07); --nachtstreif: rgba(0, 0, 0, .30); --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .3); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Knöpfe erben die Schrift NICHT von selbst: ohne diese Regel läuft jeder