/* ───────────────────────────────────────────────────────────────── fuenfsieben e.V. – Dark Theme Override Aktiviert durch: ───────────────────────────────────────────────────────────────── */ /* ─── CSS Custom Properties ──────────────────── */ :root[data-theme="dark"] { --bg: #0a0a0a; --bg2: #111111; --bg3: #161616; --fg: #ffffff; --pink: #e8006b; --pink2: #ff3d9a; --muted: #7a7a7a; --border:#1e1e1e; } /* ─── Navigation ─────────────────────────────── */ [data-theme="dark"] nav { background: rgba(10,10,10,0.93); } [data-theme="dark"] .mobile-menu { background: rgba(10,10,10,.97); } /* ─── Hero / Page-Hero ───────────────────────── */ [data-theme="dark"] .hero::before, [data-theme="dark"] .page-hero::before { background-image: radial-gradient(circle, rgba(232,0,107,.15) 1px, transparent 1px); } [data-theme="dark"] .hero::after { background: radial-gradient(circle, rgba(232,0,107,.1) 0%, transparent 65%); } [data-theme="dark"] .bg-glow { background: radial-gradient(circle, rgba(232,0,107,.12) 0%, transparent 65%); } /* ─── Outline-Button ─────────────────────────── */ [data-theme="dark"] .btn-out { border-color: #333; color: #888; } [data-theme="dark"] .btn-out:hover { border-color: var(--pink); color: var(--pink); } /* ─── Events ─────────────────────────────────── */ [data-theme="dark"] .ev-num { color: rgba(232,0,107,.05); } [data-theme="dark"] .ev-band { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); } [data-theme="dark"] .ev-band-link:hover { background: rgba(232,0,107,.18); } [data-theme="dark"] .tag { border-color: #2a2a2a; } /* ─── Membership Cards ───────────────────────── */ [data-theme="dark"] .mem-card.featured { background: #0d0d0d; } /* ─── Formulare ──────────────────────────────── */ [data-theme="dark"] .check-label { color: rgba(255,255,255,.65); } [data-theme="dark"] .fg input, [data-theme="dark"] .fg textarea, [data-theme="dark"] .fg select { border-color: #222; } [data-theme="dark"] .fg select option { background: #111; } [data-theme="dark"] .form-error, [data-theme="dark"] .form-feedback.error { color: #ff9090; } /* ─── Footer-Logo ────────────────────────────── */ [data-theme="dark"] .foot-logo img { opacity: .5; filter: grayscale(1); } [data-theme="dark"] .foot-logo img:hover { opacity: 1; filter: none; } /* ─── Legal Pages (impressum, datenschutz) ───── */ [data-theme="dark"] .legal-pg p { color: rgba(255,255,255,.55); } /* ─── Theme-Toggle-Button ────────────────────── */ .theme-btn { background: none; border: 1px solid var(--border); color: var(--muted); cursor: pointer; padding: .4rem .55rem; line-height: 0; transition: border-color .2s, color .2s; flex-shrink: 0; } .theme-btn-fixed { position: fixed; top: 1rem; right: 1rem; z-index: 1000; } .theme-btn:hover { border-color: var(--pink); color: var(--pink); } .theme-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; } /* Mond-Icon sichtbar im Light-Mode (Click → Dark) */ .theme-btn .icon-sun { display: none; } .theme-btn .icon-moon { display: block; } /* Sonne-Icon sichtbar im Dark-Mode (Click → Light) */ [data-theme="dark"] .theme-btn .icon-sun { display: block; } [data-theme="dark"] .theme-btn .icon-moon { display: none; }