/* Glaze – gemeinsames Designsystem (Referenz-Stylesheet) Abgeleitet aus cleas und guardian. Nur Tokens + Shell + Kernkomponenten; app-spezifisches kommt in eine eigene Datei. */ /* ---------- 1. Tokens ---------- */ :root { --bg: #090c13; --bg2: #0e1220; --card: rgba(255,255,255,.045); --card-hi: rgba(255,255,255,.07); --line: rgba(255,255,255,.09); --text: #eef1f8; --muted: #8d96aa; --accent: #8b9cff; --accent2: #c58bff; --on-accent: #fff; --ok: #34d399; --warn: #fbbf24; --crit: #f87171; --unknown: #6b7388; /* "-t" = Textvariante: auf hellem Grund dunkler, damit Kontrast >= 4.5:1 */ --ok-t: var(--ok); --warn-t: var(--warn); --crit-t: var(--crit); --accent-t: var(--accent); --grad-a: var(--accent); --grad-b: var(--accent2); --shadow: 0 10px 40px rgba(0,0,0,.35); --r-card: 20px; --r-ctl: 11px; --r-pill: 999px; color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } } /* Hell: gleiche Werte für OS-Vorgabe und explizites data-theme="light" (per Sass/Build zusammenfassen) */ :root[data-theme="light"] { color-scheme: light; --bg: #f3f5fa; --bg2: #e9edf7; --card: rgba(255,255,255,.8); --card-hi: #fff; --line: rgba(20,30,60,.1); --text: #151a2b; --muted: #586179; --ok: #12a874; --warn: #d99100; --crit: #e0454a; --unknown: #98a0b3; --ok-t: #086a49; --warn-t: #7a4e00; --crit-t: #a52127; --accent-t: color-mix(in srgb, var(--accent) 76%, #000); --grad-a: color-mix(in srgb, var(--accent) 80%, #000); --grad-b: color-mix(in srgb, var(--accent2) 80%, #000); --shadow: 0 10px 40px rgba(30,40,90,.1); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f3f5fa; --bg2: #e9edf7; --card: rgba(255,255,255,.8); --card-hi: #fff; --line: rgba(20,30,60,.1); --text: #151a2b; --muted: #586179; --ok: #12a874; --warn: #d99100; --crit: #e0454a; --unknown: #98a0b3; --ok-t: #086a49; --warn-t: #7a4e00; --crit-t: #a52127; --accent-t: color-mix(in srgb, var(--accent) 76%, #000); --grad-a: color-mix(in srgb, var(--accent) 80%, #000); --grad-b: color-mix(in srgb, var(--accent2) 80%, #000); --shadow: 0 10px 40px rgba(30,40,90,.1); } } /* Akzentpaletten (data-accent am ) */ :root[data-accent="indigo"] { --accent: #7b8cff; --accent2: #b98bff; } :root[data-accent="blue"] { --accent: #4c9aff; --accent2: #22d3ee; } :root[data-accent="teal"] { --accent: #2dd4bf; --accent2: #38bdf8; --on-accent: #06302b; } :root[data-accent="green"] { --accent: #4ade80; --accent2: #2dd4bf; --on-accent: #052e16; } :root[data-accent="amber"] { --accent: #fbbf24; --accent2: #fb923c; --on-accent: #3a2600; } :root[data-accent="rose"] { --accent: #fb7185; --accent2: #f472b6; } :root[data-accent="violet"] { --accent: #a78bfa; --accent2: #f472b6; } :root[data-accent="slate"] { --accent: #94a3b8; --accent2: #cbd5e1; --on-accent: #0f172a; } :root[data-theme="light"][data-accent="indigo"] { --accent: #5b6cf0; --accent2: #9b5bf0; } :root[data-theme="light"][data-accent="teal"] { --accent: #0d9488; --accent2: #0284c7; --on-accent: #fff; } :root[data-theme="light"][data-accent="green"] { --accent: #16a34a; --accent2: #0d9488; --on-accent: #fff; } :root[data-theme="light"][data-accent="amber"] { --accent: #d97706; --accent2: #ea580c; --on-accent: #fff; } :root[data-theme="light"][data-accent="slate"] { --accent: #475569; --accent2: #64748b; --on-accent: #fff; } /* ---------- 2. Basis ---------- */ @font-face { font-family: "Grenze Gotisch"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/GrenzeGotisch-Bold.woff2") format("woff2"); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { background: var(--bg); } body { margin: 0; color: var(--text); min-height: 100vh; font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: radial-gradient(900px 500px at 12% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(700px 500px at 100% 0%, color-mix(in srgb, var(--accent2) 11%, transparent), transparent 70%), var(--bg); background-attachment: fixed; } main { max-width: 1320px; margin: 0 auto; padding: 22px 20px 56px; } h1, h2, h3, p { margin: 0; } a { color: inherit; text-decoration: none; } small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; } .muted { color: var(--muted); } .spacer { flex: 1; } .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- 3. Shell: Kopfzeile + Navigation (in ALLEN Apps identisch) ---------- */ .top { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; cursor: pointer; } .brand .ic { width: 28px; height: 28px; color: var(--accent-t); } .wm { display: inline-flex; flex-direction: column; align-items: flex-start; } .wm-t { font-family: "Grenze Gotisch", ui-serif, Georgia, serif; font-weight: 700; letter-spacing: .01em; font-size: 1.75rem; line-height: 1; padding-bottom: 2px; } .ipa { margin-top: 2px; font: 500 .75rem/1.2 "Segoe UI", "Noto Sans", system-ui, sans-serif; letter-spacing: .1em; color: var(--muted); white-space: nowrap; } .clock { text-align: right; line-height: 1.15; margin-right: 6px; } .clock-t { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; } .clock-d { font-size: .72rem; color: var(--muted); } /* Desktop: