/* SCI-FI · Neon-Portal, Sternenfeld, Umlaufbahnen. Portal sitzt hinter dem Cover (--cx/--cy aus core.js). */
html[data-theme] .fxt { background: linear-gradient(180deg, #ffffff 0%, #b8dcff 40%, #3ca0ff 70%, #ff46c8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 12px rgba(60, 160, 255, 0.7)) drop-shadow(0 0 40px rgba(255, 70, 200, 0.25)); }
html[data-theme] .ph-t { font-size: clamp(60px, 12cqi, 180px); letter-spacing: 0.08em; }
html[data-theme] .ph-s { letter-spacing: 0.8em; color: #9fd0ff; }
html[data-theme] .ph-bg { opacity: 0.35; }
.fx-portal { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-portal .stars i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%; background: #cfe6ff; animation: twinkle var(--t) ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.15; transform: scale(0.5); } }
.fx-portal .ring { position: absolute; left: 0; top: 0; translate: var(--cx, 50vw) var(--cy, calc(var(--head-h) + 22vh)); border-radius: 50%; transform: translate(-50%, -50%); }
.fx-portal .ring.a { width: min(560px, 80vw); aspect-ratio: 1; background: conic-gradient(from 0deg, transparent 0 10%, rgba(60, 160, 255, 0.9) 18%, transparent 26% 48%, rgba(255, 70, 200, 0.7) 56%, transparent 64% 100%); -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 93% 98%, transparent 99%); mask: radial-gradient(closest-side, transparent 92%, #000 93% 98%, transparent 99%); filter: drop-shadow(0 0 14px #3ca0ff); animation: rspin 8s linear infinite; }
.fx-portal .ring.b { width: min(470px, 68vw); aspect-ratio: 1; border: 1px dashed rgba(120, 190, 255, 0.5); animation: rspin 40s linear infinite reverse; }
.fx-portal .ring.c { width: min(640px, 90vw); aspect-ratio: 1; border: 1px solid rgba(60, 160, 255, 0.15); box-shadow: 0 0 80px rgba(60, 160, 255, 0.15), inset 0 0 80px rgba(60, 160, 255, 0.12); }
@keyframes rspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
html[data-theme] .ph-cover .glow { background: radial-gradient(closest-side, rgba(60, 160, 255, 0.6), rgba(255, 70, 200, 0.15) 55%, transparent); }
html[data-theme] .btn--acc { background: transparent; color: #fff; border: 1px solid #3ca0ff; box-shadow: 0 0 20px rgba(60, 160, 255, 0.5), inset 0 0 20px rgba(60, 160, 255, 0.25); font-family: var(--t-disp); letter-spacing: 0.2em; }
html[data-theme] .btn--acc:hover { background: rgba(60, 160, 255, 0.2); }
html[data-theme] .ph-meta li + li::before, html[data-theme] .pb .gem { border-radius: 50%; transform: none; width: 6px; height: 6px; background: #ff46c8; box-shadow: 0 0 10px #ff46c8; }
html[data-theme] .pb .marq-row span { color: transparent; -webkit-text-stroke: 1px #3ca0ff; text-shadow: 0 0 20px rgba(60, 160, 255, 0.5); }
html[data-theme] .pb .marq-row span.o { color: #3ca0ff; -webkit-text-stroke: 0; }
html[data-theme] .pt-card { border-radius: 30px 4px 30px 4px; border-color: rgba(60, 160, 255, 0.3); background: linear-gradient(160deg, rgba(60, 160, 255, 0.12), transparent 50%), rgba(4, 4, 14, 0.9); }
html[data-theme] .pt-card .br { border-color: #ff46c8; }
html[data-theme] .pd .num { color: #9fd0ff; filter: drop-shadow(0 0 0.15em rgba(60, 160, 255, 0.8)); }
/* Umlaufbahnen */
.rl { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.rl-orbits { position: relative; aspect-ratio: 1; }
.rl-orbits .o { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(60, 160, 255, 0.35); }
.rl-orbits .o::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #3ca0ff; box-shadow: 0 0 16px #3ca0ff; }
.rl-orbits .o1 { width: 92%; height: 92%; animation: orb 14s linear infinite; } .rl-orbits .o2 { width: 66%; height: 66%; animation: orb 9s linear infinite reverse; } .rl-orbits .o3 { width: 40%; height: 40%; animation: orb 6s linear infinite; }
.rl-orbits .o2::after { background: #ff46c8; box-shadow: 0 0 16px #ff46c8; } .rl-orbits .o3::after { background: #fff; box-shadow: 0 0 16px #fff; }
@keyframes orb { to { transform: rotate(360deg); } }
.rl-core { position: absolute; inset: 0; margin: auto; width: 26%; height: 26%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, rgba(60, 160, 255, 0.35), transparent 70%); font: 400 clamp(22px, 2.4vw, 34px)/1 var(--t-disp); color: #fff; }
.rl-core small { display: block; margin-top: 4px; font: 600 9px var(--body); letter-spacing: 0.3em; text-transform: uppercase; color: #9fd0ff; }
.rl-list { display: grid; gap: 14px; }
.rl-i { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; column-gap: 16px; padding: 20px 22px; border: 1px solid rgba(60, 160, 255, 0.25); border-radius: 20px 4px 20px 4px; background: rgba(60, 160, 255, 0.04); }
.rl-i span { grid-row: span 2; font: 400 22px/1 var(--t-disp); color: #ff46c8; }
.rl-i b { font: 400 22px/1.1 var(--t-disp); }
.rl-i em { font: 600 11px var(--mono); font-style: normal; color: #9fd0ff; align-self: center; }
.rl-i p { grid-column: 2 / -1; margin-top: 6px; color: var(--fg-2); font-size: 14px; }
.rl-topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }
.rl-topics li { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 70, 200, 0.4); font: 400 12px var(--t-disp); letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 860px) { .rl { grid-template-columns: minmax(0, 1fr); } .rl-orbits { max-width: 360px; width: 100%; margin: 0 auto; } }