/* Theme-Overrides, ausgewählt in /admin/settings, angewendet über in base.html. amber-noir ist der Default und braucht keinen eigenen Block (siehe :root in base.css). */ [data-theme="midnight-blue"]{ --bg: #0A0E17; --bg-2: #10162A; --line: #1D2740; --line-2: #2A3559; --ink: #E8ECF9; --ink-2: #9AA8CC; --ink-3: #6C7BA0; --amber: #7C93F0; --copper: #5468C4; --amber-soft: rgba(124,147,240,.16); --glow-1: rgba(124,147,240,.18); --glow-2: rgba(84,104,196,.12); } [data-theme="forest"]{ --bg: #0D1410; --bg-2: #131E17; --line: #22331F ; --line-2: #2E4630; --ink: #E9F1E7; --ink-2: #A9C2A9; --ink-3: #718F72; --amber: #79C68C; --copper: #4C8F5E; --amber-soft: rgba(121,198,140,.16); --glow-1: rgba(121,198,140,.16); --glow-2: rgba(76,143,94,.12); } /* Aurora: gleiche Grundfarben wie Amber Noir, aber mit einem zusätzlichen, langsam wandernden Verlauf hinter allem - die "dynamische" CSS-Option. */ [data-theme="aurora-dynamic"] .aurora-layer{ content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none; background:conic-gradient(from 0deg at 50% 50%, rgba(230,168,92,.20), rgba(194,112,58,.10), rgba(124,147,240,.16), rgba(121,198,140,.14), rgba(230,168,92,.20)); filter:blur(60px); animation:aurora-spin 26s linear infinite; opacity:.7; } @keyframes aurora-spin{ to{ transform:rotate(360deg); } } [data-theme="crimson-steel"]{ --bg: #0A0A0B; --bg-2: #151516; --line: #262629; --line-2: #38383C; --ink: #F2F2F0; --ink-2: #B8B4B0; --ink-3: #7C7A7D; --amber: #F04456; --copper: #8C8F94; --amber-soft: rgba(212,38,56,.16); --glow-1: rgba(212,38,56,.16); --glow-2: rgba(140,143,148,.12); } /* Crimson Steel: schwarz-weiß-rotes Metallic-Design mit einem diagonal wandernden Lichtschein statt der rotierenden Aurora - wirkt wie Licht auf gebürstetem Metall. */ [data-theme="crimson-steel"] .aurora-layer{ content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none; background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.05) 33%, rgba(212,38,56,.22) 48%, rgba(255,255,255,.05) 63%, transparent 78%); background-size:260% 260%; animation:crimson-sweep 16s ease-in-out infinite; opacity:.85; } @keyframes crimson-sweep{ 0%,100%{ background-position:0% 30%; } 50%{ background-position:100% 70%; } } @media (prefers-reduced-motion:reduce){ [data-theme="aurora-dynamic"] .aurora-layer{ animation:none; } [data-theme="crimson-steel"] .aurora-layer{ animation:none; } }