@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Oswald:wght@500;700&display=swap");
/* Mx2 Startseite: Designs (gleiche Auswahl wie im Portal) - aktiv ueber <html data-theme="..."> */

/* ---------- Farbvarianten ---------- */
html[data-theme="mx2-blau"]  { --bg:#070a12; --surface:rgba(150,190,255,.05); --border:rgba(150,190,255,.10); --text:#e6ecf5; --muted:#93a1b8; --accent:#3fa9ff; --accent2:#6a5cff; --accent-rgb:63,169,255; }
html[data-theme="mx2-rot"]   { --bg:#0c0708; --surface:rgba(255,160,170,.05); --border:rgba(255,160,170,.09); --text:#f2e6e8; --muted:#b09a9e; --accent:#ff3b4e; --accent2:#ff8a3d; --accent-rgb:255,59,78; }
html[data-theme="mx2-gruen"] { --bg:#060b09; --surface:rgba(150,255,200,.05); --border:rgba(150,255,200,.09); --text:#e4f2ea; --muted:#95ab9f; --accent:#2fe08a; --accent2:#00b4d8; --accent-rgb:47,224,138; }

/* ---------- Hell ---------- */
html[data-theme="mx2-hell"] { --bg:#eef0f5; --surface:#ffffff; --border:rgba(20,25,40,.10); --text:#1c1f2a; --muted:#5d6475; --accent:#e09a00; --accent2:#ff6a00; --accent-rgb:224,154,0; color-scheme: light; }
html[data-theme="mx2-hell"] body { background: var(--bg); color: var(--text); }
html[data-theme="mx2-hell"] .nav.scrolled { background: rgba(255,255,255,.85); }
html[data-theme="mx2-hell"] .nav a, html[data-theme="mx2-hell"] .nav .logo { color: var(--text); }
html[data-theme="mx2-hell"] .nav nav a.nav-cta { color: #fff; }
html[data-theme="mx2-hell"] .card, html[data-theme="mx2-hell"] .stat, html[data-theme="mx2-hell"] section .box { box-shadow: 0 8px 26px rgba(20,25,40,.07); }
html[data-theme="mx2-hell"] .toast { background: #fff; color: var(--text); }
html[data-theme="mx2-hell"] .preloader { background: var(--bg) !important; }
html[data-theme="mx2-hell"] .globe-badge, html[data-theme="mx2-hell"] .globe-zoom button, html[data-theme="mx2-hell"] .gs-switch, html[data-theme="mx2-hell"] .globe-tip { background: rgba(255,255,255,.9) !important; color: var(--text) !important; }
html[data-theme="mx2-hell"] .hero { color: var(--text); }
html[data-theme="mx2-hell"] .hero-bg { filter: blur(6px) brightness(1.15) saturate(.9) !important; opacity: .28; }
html[data-theme="mx2-hell"] .hero p, html[data-theme="mx2-hell"] .hero .lead { color: #3d4252; }
@media (max-width: 800px) { html[data-theme="mx2-hell"] .nav nav { background: rgba(255,255,255,.97); } }

/* ---------- Neon ---------- */
html[data-theme="mx2-neon"] { --bg:#05030d; --surface:rgba(40,30,80,.38); --border:rgba(160,120,255,.20); --text:#ece8ff; --muted:#a49cc8; --accent:#22e4ff; --accent2:#ff2fd0; --accent-rgb:34,228,255; --font-head:"Orbitron","Rajdhani",sans-serif; }
html[data-theme="mx2-neon"] body { background: radial-gradient(1200px 700px at 0% -10%, rgba(255,47,208,.16), transparent 60%), radial-gradient(1100px 700px at 110% 20%, rgba(34,228,255,.14), transparent 60%), #05030d fixed; }
html[data-theme="mx2-neon"] h1, html[data-theme="mx2-neon"] h2, html[data-theme="mx2-neon"] h3 { letter-spacing: .04em; }
html[data-theme="mx2-neon"] h2 { text-shadow: 0 0 18px rgba(34,228,255,.35); }
html[data-theme="mx2-neon"] .card, html[data-theme="mx2-neon"] .stat { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(160,120,255,.12), 0 18px 46px rgba(0,0,0,.45); }
html[data-theme="mx2-neon"] .card:hover { box-shadow: 0 0 0 1px rgba(34,228,255,.45), 0 0 30px rgba(34,228,255,.18); }
html[data-theme="mx2-neon"] .nav.scrolled { background: rgba(8,4,24,.72); }

/* ---------- Carbon ---------- */
html[data-theme="mx2-carbon"] { --bg:#0e0f11; --surface:#17181c; --border:rgba(255,255,255,.07); --text:#ececee; --muted:#9b9da4; --accent:#e8283c; --accent2:#ff5a36; --accent-rgb:232,40,60; --radius:4px; --font-head:"Oswald","Rajdhani",sans-serif; }
html[data-theme="mx2-carbon"] body { background: repeating-linear-gradient(45deg, #0e0f11 0 6px, #101114 6px 12px) fixed; }
html[data-theme="mx2-carbon"] h1, html[data-theme="mx2-carbon"] h2, html[data-theme="mx2-carbon"] h3, html[data-theme="mx2-carbon"] .btn, html[data-theme="mx2-carbon"] .nav nav a { text-transform: uppercase; letter-spacing: .04em; }
html[data-theme="mx2-carbon"] .card, html[data-theme="mx2-carbon"] .stat { border-top: 3px solid var(--accent); }
html[data-theme="mx2-carbon"] .btn, html[data-theme="mx2-carbon"] .nav nav a.nav-cta { border-radius: 4px; }
html[data-theme="mx2-carbon"] .nav nav a { letter-spacing: .02em; font-size: .86rem; }
@media (min-width: 801px) and (max-width: 1100px) { html[data-theme="mx2-carbon"] .nav nav { gap: 2px; } html[data-theme="mx2-carbon"] .nav nav a { padding-left: 8px; padding-right: 8px; font-size: .8rem; } }
html[data-theme="mx2-carbon"] .btn.primary, html[data-theme="mx2-carbon"] .nav nav a.nav-cta, html[data-theme="mx2-carbon"] .gs-btn.on { color: #fff; }

/* ---------- Auswahl im Footer ---------- */
.theme-pick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; font-size: .8rem; color: var(--muted); }
.theme-pick span { margin-right: 4px; }
.theme-pick button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--muted); font: inherit; cursor: pointer; }
.theme-pick button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(127,127,127,.45); }
.theme-pick button:hover { color: var(--text); border-color: var(--accent); }
.theme-pick button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
html.theme-anim, html.theme-anim * { transition: background-color .35s, color .35s, border-color .35s !important; }

.theme-pick span a { color: var(--accent); }