legen. Der Glas-Verlauf sitzt bereits auf body (über die --accent/--accent-hover-Aliase, die aufs Portal auflösen). Ein zweiter Verlauf auf

ließ die Portal-Startseite sichtbar HELLER wirken als die Unterseiten (gemeldet).

bleibt daher transparent → Portal und Unterseiten teilen denselben einen Body-Verlauf. */ html[data-style="glass"] main{ background: transparent; } /* ---- Portal-Topbar ---- */ html[data-style="glass"] .topbar{ background: color-mix(in srgb, var(--card, var(--bg-card)) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text, var(--fg)) 12%, transparent); } html[data-style="glass"] .brand .dot{ color: var(--nve); } html[data-style="glass"] .theme-sel, html[data-style="glass"] .fb-btn{ background: color-mix(in srgb, var(--card) 55%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: 11px; -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3); } html[data-style="glass"] .fb-btn:hover{ border-color: color-mix(in srgb, var(--nve) 50%, transparent); background: color-mix(in srgb, var(--card-h) 65%, transparent); } /* ---- Portal-Bereichskarten (.grid > .card.nve / .card.hub) ---- */ html[data-style="glass"] .grid > .card{ background: color-mix(in srgb, var(--card) 38%, transparent); border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: 26px; -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9); box-shadow: 0 18px 52px rgba(0,0,0,.24), 0 2px 10px rgba(0,0,0,.12), inset 0 1px 0 color-mix(in srgb, var(--text) 22%, transparent), inset 1px 0 0 color-mix(in srgb, var(--text) 12%, transparent); } html[data-style="glass"] .grid > .card:hover{ background: color-mix(in srgb, var(--card-h) 48%, transparent); transform: translateY(-4px); box-shadow: 0 26px 64px rgba(0,0,0,.30), 0 2px 10px rgba(0,0,0,.12), inset 0 1px 0 color-mix(in srgb, var(--text) 28%, transparent), inset 1px 0 0 color-mix(in srgb, var(--text) 14%, transparent); } html[data-style="glass"] .card.nve:hover{ border-color: color-mix(in srgb, var(--nve) 55%, transparent); } html[data-style="glass"] .card.hub:hover{ border-color: color-mix(in srgb, var(--hub) 55%, transparent); } html[data-style="glass"] .card.nve .ic{ background: color-mix(in srgb, var(--nve) 16%, transparent); } html[data-style="glass"] .card.hub .ic{ background: color-mix(in srgb, var(--hub) 16%, transparent); } html[data-style="glass"] .card.nve .go{ color: var(--nve); } html[data-style="glass"] .card.hub .go{ color: var(--hub); } /* ---- Login-Gate & Feedback-Modal (Glas-Boxen) ---- */ html[data-style="glass"] .gate-box, html[data-style="glass"] .fb-modal{ background: color-mix(in srgb, var(--card) 56%, transparent); border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 24px; -webkit-backdrop-filter: blur(34px) saturate(2); backdrop-filter: blur(34px) saturate(2); box-shadow: 0 30px 80px rgba(0,0,0,.50), inset 0 1px 0 color-mix(in srgb, var(--text) 24%, transparent), inset 1px 0 0 color-mix(in srgb, var(--text) 12%, transparent); } html[data-style="glass"] .gate-box input, html[data-style="glass"] .fb-modal input, html[data-style="glass"] .fb-modal textarea{ background: color-mix(in srgb, var(--bg, var(--card)) 45%, transparent); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: 12px; } html[data-style="glass"] .gate-box input:focus, html[data-style="glass"] .fb-modal input:focus, html[data-style="glass"] .fb-modal textarea:focus{ border-color: color-mix(in srgb, var(--nve) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nve) 18%, transparent); } html[data-style="glass"] .gate-box button, html[data-style="glass"] .fb-send{ border-radius: 12px; box-shadow: 0 4px 16px color-mix(in srgb, var(--nve) 30%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent); } /* --------------------------------------------------------------------------- RESPONSIVE: mobile-first sauber, keine überlaufenden Breiten --------------------------------------------------------------------------- */ @media (max-width: 640px){ html[data-style="glass"] .card, html[data-style="glass"] .stat-card, html[data-style="glass"] .menu-card, html[data-style="glass"] .grid > .card{ border-radius: 18px; } html[data-style="glass"] .gate-box, html[data-style="glass"] .fb-modal{ border-radius: 18px; max-width: 100%; } /* schwächerer Blur auf kleinen Geräten = flüssiger */ html[data-style="glass"] .card, html[data-style="glass"] .stat-card, html[data-style="glass"] .menu-card, html[data-style="glass"] .grid > .card{ -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); } } /* ===== STRUKTUR: schwebende Glas-Leiste + Toolbar-Pille ===== */ /* Markante Kopf-Architektur (bleibt OBEN, klar abgesetzt von Sidebar-Styles): die Kopfleiste löst sich vom Rand und schwebt als freistehende Glas-Leiste; die in-content .toolbar wird zur schwebenden Glas-Pille. Farben nur über Theme- Variablen, Transluzenz via color-mix(... transparent). Portal nutzt --card/--text, NVE/HUB nutzen --bg-card/--fg — beide werden mit Fallback abgedeckt. */ /* --- Schwebende Glas-Leiste (.topbar als direktes Body-Kind, bleibt oben) --- */ html[data-style="glass"] .topbar{ position: sticky; top: 12px; z-index: 40; margin: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--fg, var(--text)) 16%, transparent); background: color-mix(in srgb, var(--bg-card, var(--card)) 40%, transparent); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); box-shadow: 0 16px 48px rgba(0,0,0,.26), 0 0 0 1px color-mix(in srgb, var(--fg, var(--text)) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--fg, var(--text)) 22%, transparent); } /* heller Rand-Reflex an der Oberkante der schwebenden Leiste */ html[data-style="glass"] .topbar{ background-image: linear-gradient( to bottom, color-mix(in srgb, #fff 8%, transparent), transparent 42% ); } /* .brand leicht leuchtend, damit die Leiste markant bleibt */ html[data-style="glass"] .topbar .brand{ text-shadow: 0 0 14px color-mix(in srgb, var(--accent, var(--nve)) 45%, transparent); } /* --- Schwebende Glas-Pille: .toolbar im Dashboard-Content --- */ html[data-style="glass"] .toolbar{ margin: 4px 0 18px; padding: 12px 16px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--fg, var(--text)) 16%, transparent); background: color-mix(in srgb, var(--bg-card, var(--card)) 40%, transparent); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 1px 0 color-mix(in srgb, var(--fg, var(--text)) 22%, transparent); } /* Buttons in der Pille noch etwas glasiger + rund (gewinnt über Basis-.btn) */ html[data-style="glass"] .toolbar .btn{ border-radius: 999px; -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); } html[data-style="glass"] .toolbar .btn.btn-secondary{ background: color-mix(in srgb, var(--fg, var(--text)) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fg, var(--text)) 18%, transparent); } /* --- MOBILE: enger absetzen, leichterer Blur (flüssiger) --- */ @media (max-width: 640px){ html[data-style="glass"] .topbar{ top: 8px; margin: 8px; border-radius: 14px; -webkit-backdrop-filter: blur(10px) saturate(135%); backdrop-filter: blur(10px) saturate(135%); } html[data-style="glass"] .toolbar{ border-radius: 16px; padding: 10px 12px; -webkit-backdrop-filter: blur(10px) saturate(135%); backdrop-filter: blur(10px) saturate(135%); } } /* ============================================================================ GLASS — KONSEQUENTE DURCHGÄNGIGKEIT (alle Unterseiten, v.a. HUB-Dashboard) ---------------------------------------------------------------------------- Problem: HUB/dashboard.html setzt seine Spezial-Komponenten über einen inline danach. Daher überschreibt der Seiten-