/* Dunkles Farbschema (Standard) */ :root { --bg: #060b18; --orb-1: #1e3a8a; --orb-2: #4f46e5; --orb-3: #0891b2; --card-bg: rgba(255, 255, 255, 0.035); --card-border: rgba(255, 255, 255, 0.09); --text-primary: #f1f5f9; --text-secondary: #e2e8f0; --text-muted: rgba(148, 163, 184, 0.75); --text-faint: rgba(148, 163, 184, 0.35); --accent-1: #3b82f6; --accent-2: #6366f1; --accent-text: #a5b4fc; --danger-bg: rgba(239, 68, 68, 0.12); --danger-border: rgba(239, 68, 68, 0.3); --danger-text: #fca5a5; /* verschiedene Transparenz-Stufen fuer Hintergruende/Rahmen, einzeln je Farbschema eingetragen */ --header-bg: rgba(6, 11, 24, 0.72); --autofill-bg: rgba(6, 11, 24, 1); --ov-03: rgba(255, 255, 255, 0.03); --ov-04: rgba(255, 255, 255, 0.04); --ov-05: rgba(255, 255, 255, 0.05); --ov-06: rgba(255, 255, 255, 0.06); --ov-07: rgba(255, 255, 255, 0.07); --ov-08: rgba(255, 255, 255, 0.08); --ov-09: rgba(255, 255, 255, 0.09); --ov-12: rgba(255, 255, 255, 0.12); --ov-16: rgba(255, 255, 255, 0.16); } /* Helles Farbschema, wird per data-theme="light" auf aktiviert */ :root[data-theme="light"] { --bg: #eef1f8; --text-primary: #0f172a; --text-secondary: #1e293b; --text-muted: rgba(71, 85, 105, 0.8); --text-faint: rgba(71, 85, 105, 0.4); --accent-text: #4338ca; --card-bg: rgba(15, 23, 42, 0.035); --card-border: rgba(15, 23, 42, 0.09); --header-bg: rgba(238, 241, 248, 0.72); --autofill-bg: rgba(238, 241, 248, 1); --ov-03: rgba(15, 23, 42, 0.03); --ov-04: rgba(15, 23, 42, 0.04); --ov-05: rgba(15, 23, 42, 0.05); --ov-06: rgba(15, 23, 42, 0.06); --ov-07: rgba(15, 23, 42, 0.07); --ov-08: rgba(15, 23, 42, 0.08); --ov-09: rgba(15, 23, 42, 0.09); --ov-12: rgba(15, 23, 42, 0.12); --ov-16: rgba(15, 23, 42, 0.16); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; background: var(--bg); font-family: "Inter", "Segoe UI", system-ui, sans-serif; color: var(--text-secondary); } /* Fixed background orbs */ .orb { position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.28; pointer-events: none; animation: drift linear infinite; } .orb-1 { width: 700px; height: 700px; background: radial-gradient(circle at center, var(--orb-1) 0%, transparent 70%); top: -260px; left: -220px; animation-duration: 24s; } .orb-2 { width: 560px; height: 560px; background: radial-gradient(circle at center, var(--orb-2) 0%, transparent 70%); bottom: -200px; right: -160px; animation-duration: 18s; animation-direction: reverse; } .orb-3 { width: 480px; height: 480px; background: radial-gradient(circle at center, var(--orb-3) 0%, transparent 70%); top: 220px; left: 220px; animation-duration: 26s; animation-delay: -10s; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(45px, -35px) scale(1.06); } 66% { transform: translate(-28px, 22px) scale(0.96); } 100% { transform: translate(0, 0) scale(1); } } /* Glass cards */ .glass-card { position: relative; background: var(--card-bg); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--card-border); border-radius: 20px; padding: 2rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06) inset; } .glass-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); } /* Forms */ .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } label { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0.025em; } input, select, textarea { width: 100%; padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid var(--ov-07); background: var(--ov-04); color: var(--text-secondary); font-size: 0.9375rem; font-family: inherit; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(99, 102, 241, 0.5); background: var(--ov-07); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.13), 0 0 14px rgba(99,102,241,0.08); } input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--autofill-bg) inset; -webkit-text-fill-color: var(--text-secondary); transition: background-color 9999s; } .btn-submit { position: relative; overflow: hidden; width: 100%; margin-top: 1.5rem; padding: 0.825rem; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%); color: #fff; font-size: 0.9375rem; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 20px rgba(99, 102, 241, 0.35); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; } .btn-submit::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%); pointer-events: none; } .btn-submit:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 28px rgba(99, 102, 241, 0.5); filter: brightness(1.07); } .btn-submit:active { transform: translateY(0); filter: brightness(0.97); } .alert { margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: 10px; background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text); font-size: 0.8125rem; line-height: 1.5; } .switch-link { margin-top: 1.5rem; text-align: center; font-size: 0.8125rem; color: var(--text-muted); } .switch-link a { color: var(--accent-text); text-decoration: none; font-weight: 600; } .switch-link a:hover { text-decoration: underline; }