/* ================================================================ AURUM UI · Variables & Themes Farbe via --h: amber=38, copper=20, forest=148, slate=215, rose=345, choco=24, night=225. Dark Mode: Klasse .dark auf . ================================================================ */ /* ═══════════════════════════════════════════════════════════ AURUM UI · 2026 · Glassmorphism + Ceramic Gold Goldton-Hintergrund · Weiße Glas-Elemente · Tiefe & Licht ═══════════════════════════════════════════════════════════ */ :root { --h: 38; /* Goldpalette */ --p: hsl(var(--h), 58%, 52%); --pd: hsl(var(--h), 62%, 36%); --pdd: hsl(var(--h), 68%, 24%); --pl: hsl(var(--h), 52%, 64%); --pll: hsl(var(--h), 45%, 74%); --pbg: hsl(var(--h), 55%, 44%); /* dunkler BG-Ton */ /* Weißtöne */ --w: rgba(255,255,255,1); --w90: rgba(255,255,255,0.90); --w70: rgba(255,255,255,0.70); --w50: rgba(255,255,255,0.50); --w30: rgba(255,255,255,0.30); --w18: rgba(255,255,255,0.18); --w10: rgba(255,255,255,0.10); --w06: rgba(255,255,255,0.06); /* Glas */ --glass: rgba(255,255,255,0.14); --glass-border: rgba(255,255,255,0.28); --glass-hover: rgba(255,255,255,0.36); --glass-active: rgba(255,255,255,0.48); --blur: blur(18px); --blur-sm: blur(10px); /* Schatten */ --shadow: 0 8px 32px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.12) inset; --shadow-sm: 0 2px 12px rgba(0,0,0,0.16), 0 1px 0 rgba(255,255,255,0.10) inset; --shadow-lg: 0 20px 60px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.15) inset; --glow: 0 0 40px rgba(255,255,255,0.12); /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* Fonts */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-heading: 'Pacifico', cursive; } /* ── Farbvarianten ───────────────────────────────────────── */ .t-copper { --h: 20; --pbg: hsl(20,62%,38%); } .t-forest { --h: 148; --pbg: hsl(148,42%,30%); } .t-slate { --h: 215; --pbg: hsl(215,40%,36%); } .t-rose { --h: 345; --pbg: hsl(345,48%,42%); } .t-amber { --h: 38; --pbg: hsl(38,55%,44%); } /* Neue Farben von den Keramiken */ .t-choco { --h: 24; --pbg: hsl(24,45%,30%); --p: hsl(24,41%,36%); --pd: hsl(24,48%,24%); --pdd: hsl(24,55%,16%); --pl: hsl(24,38%,50%); } .t-night { --h: 225; --pbg: hsl(225,42%,28%); --p: hsl(225,37%,35%); --pd: hsl(225,44%,22%); --pdd: hsl(225,52%,14%); --pl: hsl(225,34%,50%); } /* ── Dark Mode ─────────────────────────────────────────────── Goldton-Hintergrund bleibt, weiße Elemente → dunkel. Statt rgba(255,255,255,x) → rgba(0,0,0,x) + angepasste Opazitäten. ─────────────────────────────────────────────────────────── */ .dark { /* Dunkelpalette ersetzt Weißpalette */ --w: rgba(10, 6, 2, 1); --w90: rgba(10, 6, 2, 0.92); --w70: rgba(10, 6, 2, 0.72); --w50: rgba(10, 6, 2, 0.50); --w30: rgba(10, 6, 2, 0.30); --w18: rgba(10, 6, 2, 0.18); --w10: rgba(10, 6, 2, 0.10); --w06: rgba(10, 6, 2, 0.06); /* Dunkles Glas statt helles */ --glass: rgba(0, 0, 0, 0.22); --glass-border: rgba(0, 0, 0, 0.35); --glass-hover: rgba(0, 0, 0, 0.30); --glass-active: rgba(0, 0, 0, 0.40); /* Schatten etwas tiefer */ --shadow: 0 8px 32px rgba(0,0,0,0.40), 0 1px 0 rgba(0,0,0,0.20) inset; --shadow-sm: 0 2px 12px rgba(0,0,0,0.30), 0 1px 0 rgba(0,0,0,0.15) inset; --shadow-lg: 0 20px 60px rgba(0,0,0,0.50), 0 1px 0 rgba(0,0,0,0.25) inset; --glow: 0 0 40px rgba(0,0,0,0.20); /* Text-Farben: dunkel auf goldenem BG */ color: rgba(10, 6, 2, 0.88); } /* Im Dark Mode: btn-solid = dunkel statt weiß */ .dark .btn-solid { background: rgba(10, 6, 2, 0.85); color: hsl(var(--h), 52%, 72%); } .dark .btn-solid:hover { background: rgba(10, 6, 2, 0.95); } /* Active nav-pill im Dark Mode */ .dark .nav-pill.active { background: rgba(10, 6, 2, 0.82); color: hsl(var(--h), 52%, 72%); } /* page-btn active */ .dark .page-btn.on { background: rgba(10, 6, 2, 0.82); color: hsl(var(--h), 52%, 72%); border-color: rgba(10, 6, 2, 0.6); } /* List item active */ .dark .list-item.active { background: rgba(10, 6, 2, 0.80); color: hsl(var(--h), 52%, 72%); } /* chip-solid */ .dark .chip-solid { background: rgba(10, 6, 2, 0.82); color: hsl(var(--h), 52%, 72%); } .dark .badge-solid { background: rgba(10, 6, 2, 0.82); color: hsl(var(--h), 52%, 72%); } /* Checkbox Haken im Dark Mode goldig */ .dark .chk input:checked { background: rgba(10,6,2,0.85); border-color: rgba(10,6,2,0.85); } /* Hintergrund-Radials im Dark Mode etwas tiefer */ .dark::before { background: radial-gradient(ellipse 80% 60% at 15% 20%, hsl(var(--h),60%,50%) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 85% 75%, hsl(var(--h),55%,30%) 0%, transparent 55%), radial-gradient(ellipse 50% 70% at 50% 50%, hsl(var(--h),50%,38%) 0%, transparent 70%), hsl(var(--h), 55%, 34%); } /* ── Dark-Mode Toggle Button ─────────────────────────────── */ .dark-toggle { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 999px; cursor: pointer; background: var(--glass); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); border: 1px solid var(--glass-border); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--w70); transition: all 0.18s; letter-spacing: 0.03em; } .dark-toggle:hover { background: var(--glass-hover); color: var(--w); } #iconDark { display: none; } .dark-toggle i { font-size: 1rem; line-height: 1; } .dark-toggle-knob { width: 30px; height: 17px; background: var(--w18); border-radius: 999px; border: 1px solid var(--glass-border); position: relative; flex-shrink: 0; transition: background 0.2s; } .dark-toggle-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; background: var(--w70); border-radius: 50%; transition: transform 0.2s cubic-bezier(.16,1,.3,1), background 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .dark .dark-toggle-knob::after { transform: translateX(13px); }