/* ============================================================ Dunkles Thema (premium, warm, Glassmorphism) Greift nur, wenn am data-theme="dark" gesetzt ist. Überschreibt das helle style.css – dieses bleibt unverändert. ============================================================ */ [data-theme="dark"]{ --paper:#091a23; --white:rgba(255,255,255,.05); --ink:#cfe0e7; --muted:#93a9b2; --navy:#ffffff; /* Überschriften/Marke -> hell */ --line:rgba(255,255,255,.10); --shadow-sm:0 8px 26px rgba(0,0,0,.40); --shadow:0 22px 60px rgba(0,0,0,.55); --grad-soft:linear-gradient(120deg,rgba(255,158,44,.20),rgba(52,201,163,.16)); } [data-theme="dark"] body{ background: radial-gradient(110% 80% at 82% -8%, #173544 0%, transparent 45%), radial-gradient(90% 70% at 0% 0%, #12303d 0%, transparent 40%), linear-gradient(180deg, #0b1d27 0%, #06141c 100%); background-attachment:fixed; color:var(--ink); } /* ---- Navbar als dunkles Milchglas ---- */ [data-theme="dark"] .nav{ background:rgba(9,26,35,.55); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid rgba(255,255,255,.06); } [data-theme="dark"] .nav.scrolled{ background:rgba(9,26,35,.82); border-color:rgba(255,255,255,.10); box-shadow:0 8px 30px rgba(0,0,0,.45); } [data-theme="dark"] .nav-links a.nav-link{color:var(--ink);} [data-theme="dark"] .nav-toggle span{background:#fff;} /* ---- Aurora etwas dezenter (sonst zu grell auf Dunkel) ---- */ [data-theme="dark"] .aurora::before{opacity:.32;} [data-theme="dark"] .aurora::after{opacity:.30;} /* ---- Karten / Schritte als Glassmorphism ---- */ [data-theme="dark"] .card, [data-theme="dark"] .step{ background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 44px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16); } [data-theme="dark"] .card:hover, [data-theme="dark"] .step:hover{ background:rgba(255,255,255,.10); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.22); } [data-theme="dark"] .card .ic{color:#fff;} /* ---- Hero-Glaskarte ---- */ [data-theme="dark"] .node-card{ background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(255,255,255,.16); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.20); } [data-theme="dark"] .node-card .glowline{opacity:.6;} /* ---- Lösung: Rahmen + innere Fläche ---- */ [data-theme="dark"] .media-frame{background:var(--grad-soft);} [data-theme="dark"] .media-frame .inner{ background:rgba(255,255,255,.05); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } /* ---- Mentora-Bühne: Übergänge weicher, bleibt das Highlight ---- */ [data-theme="dark"] .stage{ background: radial-gradient(120% 120% at 25% 12%, rgba(40,80,98,.55) 0%, transparent 55%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); } /* ---- CTA-Band: kräftiger Schatten auf Dunkel ---- */ [data-theme="dark"] .cta-inner{box-shadow:0 24px 70px rgba(0,0,0,.5);} /* ---- Footer an den dunklen Grund angleichen ---- */ [data-theme="dark"] .footer{ background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.08); } /* ---- Rechtsseiten als Glaskarte ---- */ [data-theme="dark"] .legal-card{ background:rgba(255,255,255,.04); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.10); } [data-theme="dark"] .legal-card h2{border-top-color:rgba(255,255,255,.10);} [data-theme="dark"] .legal-card a{color:#5fd6b8;} [data-theme="dark"] .legal-card strong{color:#fff;} /* ---- Kontaktseite: Kacheln, Formular, Felder ---- */ [data-theme="dark"] .contact-card{ background:rgba(255,255,255,.045); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.10); } [data-theme="dark"] .contact-card .ic{color:#fff;} [data-theme="dark"] .form-wrap{ background:rgba(255,255,255,.04); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.10); } [data-theme="dark"] .form-wrap label{color:#fff;} [data-theme="dark"] .form-wrap input, [data-theme="dark"] .form-wrap textarea{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:#e7f1f4; } [data-theme="dark"] .form-wrap input:focus, [data-theme="dark"] .form-wrap textarea:focus{ background:rgba(255,255,255,.08); border-color:var(--teal); } [data-theme="dark"] .form-status.error{ background:rgba(179,38,30,.18); color:#ffb4ad; border:1px solid rgba(243,194,189,.30); }