/* ============================================================ Wandelwerker – gemeinsames Theme (Hell + Dark) ------------------------------------------------------------ Wird auf ALLEN Seiten eingebunden und liefert: • einheitliche Marken-Tokens (--ww-*) fuer Hell und Dark • einheitliches Logo-Lockup (.ww-logo) • einheitlichen Theme-Umschalter (.ww-theme-toggle) • dunklen Grund + neuronales Netz (nur im Dark-Mode) Standard = Hell (wie research). Dark wird ueber aktiviert (theme-toggle.js). ============================================================ */ :root { /* Marke */ --ww-blue: #072659; --ww-blue-2: #0b3a82; --ww-accent: #277AFF; --ww-accent-hover: #1560E0; --ww-beige: #E0D09D; /* Flaechen & Text – HELL (Standard) */ --ww-bg: #f4f7fc; --ww-surface: #ffffff; --ww-surface-2: #eef2f8; --ww-text: #10192b; --ww-heading: #072659; --ww-muted: #647089; --ww-border: #e4e9f2; /* on-dark (z. B. navy Sidebar/Header) – in beiden Themes gleich */ --ww-on-dark: #ffffff; --ww-on-dark-muted: #adbbd6; --ww-ring: 0 0 0 3px rgba(39, 122, 255, 0.30); --ww-shadow-md: 0 12px 34px rgba(7, 38, 89, 0.10); } /* ---------- DARK ---------- */ :root[data-theme="dark"] { --ww-bg: #060f1f; --ww-surface: #0c1c37; --ww-surface-2: #0a1830; --ww-text: #e9eefb; --ww-heading: #ffffff; --ww-muted: #97a8c6; --ww-border: #1b3258; --ww-shadow-md: 0 12px 34px rgba(0, 0, 0, 0.5); --ww-ring: 0 0 0 3px rgba(39, 122, 255, 0.5); } /* Dunkler Marken-Grund als Basis fuer das neuronale Netz. Nur im Dark-Mode; hell bleibt clean. */ :root[data-theme="dark"] { background: radial-gradient(120% 85% at 82% -12%, rgba(39, 122, 255, 0.22), transparent 55%), radial-gradient(90% 70% at 8% 108%, rgba(224, 208, 157, 0.08), transparent 60%), #051d45; } /* ============================================================ Neuronales Netz – Hintergrund in Hell UND Dark (Farben/Intensitaet steuert neural-bg.js je Theme) ============================================================ */ #ww-neural-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* ============================================================ Einheitliches Logo-Lockup (weisses W im navy Chip + Wortmarke) – funktioniert auf hellen und dunklen Flaechen gleich. ============================================================ */ .ww-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .ww-logo .ww-mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, var(--ww-blue-2) 0%, var(--ww-blue) 100%); box-shadow: 0 6px 16px rgba(7, 38, 89, 0.28), 0 0 18px rgba(39, 122, 255, 0.35); } .ww-logo .ww-mark img { width: 30px; height: auto; display: block; /* weisses Logo + weicher blauer Schein -> verschmilzt mit dem Grund */ filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(39, 122, 255, 0.6)); } .ww-logo .ww-word { font-weight: 800; letter-spacing: -0.03em; font-size: 1.15rem; color: var(--ww-heading); } /* Auf navy Flaechen (Sidebar/Header) ist die Wortmarke immer weiss */ .ww-logo.on-dark .ww-word { color: var(--ww-on-dark); } /* ============================================================ Einheitlicher Theme-Umschalter (schwebende Pille) ============================================================ */ .ww-theme-toggle { position: fixed; bottom: 18px; right: 18px; z-index: 1400; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ww-border); background: var(--ww-surface); color: var(--ww-heading); box-shadow: var(--ww-shadow-md); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease; } .ww-theme-toggle:hover { border-color: var(--ww-accent); transform: translateY(-1px); } .ww-theme-toggle:focus-visible { outline: none; box-shadow: var(--ww-ring); } .ww-theme-toggle .ww-tt-icon { width: 18px; height: 18px; display: block; } /* Sonne im Hell-Mode, Mond im Dark-Mode */ .ww-theme-toggle .ww-tt-sun { display: block; } .ww-theme-toggle .ww-tt-moon { display: none; } :root[data-theme="dark"] .ww-theme-toggle .ww-tt-sun { display: none; } :root[data-theme="dark"] .ww-theme-toggle .ww-tt-moon { display: block; } @media (max-width: 640px) { .ww-theme-toggle .ww-tt-label { display: none; } .ww-theme-toggle { padding: 0 10px; } }