/* Galaxy Design 07.11.2026: Schwarz, weisse Schrift, Sterne, Nebel, Animationen. Gilt fuer Homepage, Shop, Admin. */
html:root,html[data-theme],html[data-theme] body{--bg:#000;--alt:#05050a;--surface:rgba(255,255,255,.045);--text:#fff;--muted:#b8b8c4;--border:rgba(255,255,255,.18);--blue:#fff;--onblue:#000;--soft:rgba(255,255,255,.08);
--bg-soft:#05050a;--panel:rgba(255,255,255,.045);--border-strong:rgba(255,255,255,.35);--text-muted:#b8b8c4;--text-faint:#8d8d9c;--blue-strong:#fff;--blue-soft:rgba(255,255,255,.08);--glow:#fff;--glow-strong:#fff;--glow-soft:rgba(255,255,255,.1);color-scheme:dark}
html{background:#000!important}body{background:transparent!important;color:#fff}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 20% 15%,rgba(110,90,255,.28),transparent 70%),radial-gradient(ellipse 50% 45% at 85% 40%,rgba(60,140,255,.2),transparent 70%),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(170,80,255,.18),transparent 70%);background-size:140% 140%;animation:gx-neb 40s ease-in-out infinite alternate}
@keyframes gx-neb{to{background-position:100% 100%;filter:hue-rotate(25deg)}}
#gx-st{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
#gx-cur{position:fixed;left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;pointer-events:none;z-index:9999;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%);mix-blend-mode:screen;will-change:transform}
.s-sec.alt,.alt{background:rgba(255,255,255,.02)!important}
.s-card,.card,.s-steps li,.panel,.jtw-menu,.jtw-sbox{background:var(--surface)!important;backdrop-filter:blur(8px);border-color:var(--border)!important;box-shadow:0 0 30px rgba(255,255,255,.05),inset 0 0 0 1px rgba(255,255,255,.04);transition:transform .25s,box-shadow .3s,border-color .3s}
.s-card:hover,.card:hover,.s-steps li:hover{border-color:rgba(255,255,255,.7)!important;box-shadow:0 0 40px rgba(255,255,255,.16)}
.s-hero h1 em{color:#fff;text-shadow:0 0 24px rgba(255,255,255,.8);animation:gx-pulse 3.5s ease-in-out infinite}
@keyframes gx-pulse{50%{text-shadow:0 0 42px rgba(255,255,255,1)}}
.btn,.jtw-btn.pri,button.primary,.btn-primary{background:#fff!important;color:#000!important;border-color:#fff!important;box-shadow:0 0 28px rgba(255,255,255,.45);position:relative;overflow:hidden;transition:transform .2s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(255,255,255,.8)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(0,0,0,.18),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:130%}
.btn-2,.jtw-btn:not(.pri){background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.6)!important;box-shadow:none}
.btn-2:hover{box-shadow:0 0 26px rgba(255,255,255,.35)}
input,textarea,select{background:rgba(255,255,255,.06)!important;color:#fff!important;border-color:var(--border)!important}
input:focus,textarea:focus,select:focus{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 22px rgba(255,255,255,.25)}
#jtw-header,#jtw-header>*{background:rgba(0,0,0,.55)!important;color:#fff;backdrop-filter:blur(10px)}
.gx-r{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.gx-r.gx-in{opacity:1;transform:none}
body{animation:gx-page .7s ease both}body.gx-out{animation:gx-away .35s ease forwards}
@keyframes gx-page{from{opacity:0;filter:blur(8px);transform:scale(1.02)}}
@keyframes gx-away{to{opacity:0;filter:blur(8px);transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}.gx-r{opacity:1;transform:none}#gx-cur{display:none}}
#site-header,#site-header *,#jtw-header *{--bg:#000;--surface:#0b0b10;--text:#fff;--muted:#b8b8c4;--border:rgba(255,255,255,.22);--soft:rgba(255,255,255,.1);--blue:#fff;--onblue:#000}
#site-header,#site-header>*,.nav{background:rgba(0,0,0,.55)!important;color:#fff;border-color:var(--border)!important;backdrop-filter:blur(10px)}
.jtw-btn.pri{color:#000!important}

/* ---- Phase 1: Techno Schrift, Planet, Warp ---- */
@font-face{font-family:"Orbitron";src:url(fonts/orbitron.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(fonts/rajdhani-500.woff2) format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(fonts/rajdhani-600.woff2) format("woff2");font-weight:600 800;font-display:swap}
html:root{--font:"Rajdhani",system-ui,sans-serif;--font-d:"Orbitron","Rajdhani",sans-serif}
body{font-family:"Rajdhani",system-ui,sans-serif;font-size:19px;font-weight:500;letter-spacing:.02em}
h1,h2,h3,.btn,.jtw-btn,.pill,.eyebrow,.s-price,.s-fact b,.jtw-nav a{font-family:"Orbitron",sans-serif!important}
h1{font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:clamp(30px,5.2vw,68px)!important;line-height:1.1}
h2{font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:clamp(22px,3.4vw,40px)!important}
h3{font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:16px!important}
.btn,.jtw-btn,.jtw-nav a{letter-spacing:.1em;text-transform:uppercase;font-size:12.5px!important;font-weight:600}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;font-size:11px!important;color:#b8b8c4}
.eyebrow::before{content:"// ";opacity:.6}
.s-lead,.s-head p{font-size:21px;line-height:1.45}
.s-card,.card,.s-steps li,.btn{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.s-card,.card{border-radius:0!important}.btn{border-radius:0!important}
.hx{min-height:calc(100vh - 70px);display:flex;flex-direction:column;justify-content:center;position:relative}
.hx-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.hx-scroll{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:11px "Orbitron";letter-spacing:.4em;text-transform:uppercase;color:#888;animation:gx-bob 2s ease-in-out infinite}
.hx-scroll::after{content:"";display:block;width:1px;height:34px;margin:8px auto 0;background:linear-gradient(#fff,transparent)}
@keyframes gx-bob{50%{transform:translate(-50%,8px)}}
.planet{position:relative;width:min(420px,80vw);aspect-ratio:1;margin:auto;display:grid;place-items:center;perspective:900px;animation:gx-float 7s ease-in-out infinite}
@keyframes gx-float{50%{transform:translateY(-16px)}}
.planet img{width:58%;height:auto;position:relative;z-index:2;filter:drop-shadow(0 0 26px rgba(255,255,255,.75)) drop-shadow(0 0 70px rgba(150,130,255,.55));animation:gx-glow 4s ease-in-out infinite}
@keyframes gx-glow{50%{filter:drop-shadow(0 0 40px #fff) drop-shadow(0 0 110px rgba(150,130,255,.9))}}
.planet::before{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(120,100,255,.08) 55%,transparent 70%);animation:gx-glow 4s ease-in-out infinite}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.75);box-shadow:0 0 22px rgba(255,255,255,.5),inset 0 0 22px rgba(255,255,255,.25);transform:rotateX(72deg) rotateZ(0);animation:gx-spin 14s linear infinite}
.ring.r2{inset:-9%;border-width:1px;border-style:dashed;opacity:.55;animation-duration:24s;animation-direction:reverse;transform:rotateX(72deg)}
@keyframes gx-spin{to{transform:rotateX(72deg) rotateZ(360deg)}}
.orb{position:absolute;inset:0;transform:rotateX(72deg);animation:gx-spin 14s linear infinite;transform-style:preserve-3d}
.orb::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px #fff}
.scr-c{opacity:.5}
#gx-warp{position:fixed;inset:0;z-index:100000;background:#000;display:grid;place-items:center;transition:opacity .7s}
#gx-warp canvas{position:absolute;inset:0;width:100%;height:100%}
#gx-warp img{position:relative;width:150px;opacity:0;filter:drop-shadow(0 0 30px #fff);transition:opacity .6s,transform 1s;transform:scale(.6)}
#gx-warp.l img{opacity:1;transform:scale(1)}#gx-warp.o{opacity:0;pointer-events:none}
/* Hologramm-Karten */
.s-card::before,.card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,rgba(150,130,255,.12) 52%,transparent 70%);transform:translateX(-120%);transition:transform .9s;pointer-events:none}
.s-card,.card{position:relative}.s-card:hover::before,.card:hover::before{transform:translateX(120%)}
.s-card img{filter:grayscale(1) contrast(1.1) brightness(.9);transition:filter .4s}.s-card:hover img{filter:none}
.s-card:hover{animation:gx-holo 2.4s ease-in-out infinite}
@keyframes gx-holo{50%{box-shadow:0 0 60px rgba(255,255,255,.28)}}
.gx-cart{position:fixed;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 20px 8px #fff;z-index:9999;pointer-events:none;transition:transform .9s cubic-bezier(.5,0,.2,1),opacity .9s}
.gx-ban{background:#fff;color:#000;overflow:hidden;white-space:nowrap;font:600 12px Orbitron;letter-spacing:.3em;text-transform:uppercase;padding:8px 0}
.gx-ban span{display:inline-block;padding-left:100%;animation:gx-mq 28s linear infinite}@keyframes gx-mq{to{transform:translateX(-100%)}}
.gx-term{font-family:"JetBrains Mono",monospace}.gx-term::after{content:"_";animation:gx-bl 1s steps(2) infinite}@keyframes gx-bl{50%{opacity:0}}
@media(max-width:800px){.hx-grid{grid-template-columns:1fr}.planet{order:-1;width:240px}.s-card,.card,.btn,.s-steps li{clip-path:none}}
.jtw-nav a{white-space:nowrap;padding-inline:9px!important;font-size:11px!important}
/* Terminal (Kontakt) und Sternenkarte (Status) */
form input,form textarea,form select{font-family:"JetBrains Mono",monospace!important;font-size:15px!important;border-radius:0!important;border-width:0 0 1px 0!important;border-bottom:1px solid rgba(255,255,255,.4)!important;background:rgba(255,255,255,.03)!important}
form label::before{content:"> ";opacity:.6}
form label{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.gx-rocket{position:fixed;font-size:46px;z-index:99999;pointer-events:none;filter:drop-shadow(0 0 16px #fff);transition:transform 1.6s cubic-bezier(.5,0,.9,.5),opacity 1.6s}
.st-top,[class*="st-"]{border-radius:0}
.st-top{position:relative;box-shadow:0 0 50px rgba(255,255,255,.08)}
.st-top.good{box-shadow:0 0 70px rgba(80,255,160,.2),inset 0 0 40px rgba(80,255,160,.06)}
.st-top.bad{box-shadow:0 0 70px rgba(255,60,80,.3)}
.pill.good::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#5fffa8;box-shadow:0 0 10px #5fffa8;animation:gx-ping 1.8s infinite}
@keyframes gx-ping{50%{opacity:.3;transform:scale(1.6)}}
#steps>*{transition:transform .3s,box-shadow .3s}#steps>*:hover{transform:translateY(-6px);box-shadow:0 0 40px rgba(255,255,255,.2)}

#gx-st{z-index:0!important}main,#jtw-header,#jtw-footer,#site-header,.nav{position:relative;z-index:1}
/* Korrekturen Shop: Sterne sichtbar, kleinere Schrift, gleichmäßige kleine Karten */
html body section,html body .section,html body .section-tight,html body .hero,html body main,html body footer,html body .container{background:transparent!important}
h1{font-size:clamp(26px,3.4vw,44px)!important}.hx h1{font-size:clamp(30px,5.2vw,68px)!important}
h2{font-size:clamp(20px,2.6vw,32px)!important}
.gx-ban{background:transparent!important;color:#fff!important;border-block:1px solid rgba(255,255,255,.25)}
#products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:18px!important;align-items:stretch}
.pcard{height:100%;background:rgba(255,255,255,.04)!important}
.pcard-art{aspect-ratio:16/9!important;background:#000!important}
.pcard-art img,.p-art img{filter:none!important}
.pcard-body{padding:16px 18px 18px!important;gap:8px!important}
.pcard-body h3{font-size:14px!important}
.pcard-body p{font-size:15px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.s-card img{filter:none!important}
.s-g4{grid-template-columns:repeat(4,minmax(0,1fr))}.s-card{padding:18px}.s-card img{aspect-ratio:16/9!important;object-fit:cover!important}
/* Kästchen blickdicht (keine Sterne darin), Plan-Pillen lesbar */
html body .pcard,html body .s-card,html body .card,html body .s-steps li,html body .panel,html body .glow-mark,html body .dc,html body .s-band,html body details{background:linear-gradient(160deg,#0c0c1c,#06060b)!important;backdrop-filter:none!important}
.plan-pill{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.35)!important;color:#fff!important}
.plan-pill b{color:#fff!important;font-weight:600}
/* Footer überall im Galaxy-Look */
#jtw-footer,#site-footer,#jtw-footer *,#site-footer *,footer,footer *{--bg:#000;--surface:#0b0b10;--text:#fff;--muted:#b8b8c4;--border:rgba(255,255,255,.2);--soft:rgba(255,255,255,.1);--blue:#fff;--onblue:#000}
#jtw-footer,#site-footer,#jtw-footer>*,#site-footer>*,footer{background:rgba(0,0,0,.6)!important;color:#fff!important;border-top:1px solid rgba(255,255,255,.18)!important}
#jtw-footer a,#site-footer a,footer a{color:#d8d8e4!important}#jtw-footer a:hover,#site-footer a:hover,footer a:hover{color:#fff!important;text-shadow:0 0 12px #fff}
.jtw-status{background:rgba(255,255,255,.08)!important;color:#fff!important}
/* Menüs müssen über dem Inhalt liegen */
#jtw-header,#site-header{position:relative;z-index:500!important}
.jtw-menu,.jtw-sd{z-index:600}
/* Shop: Produkt, Formulare, Tabellen, Badges gut lesbar */
html body .plan-option,html body .panel-box,html body .table-wrap,html body .table tr{background:linear-gradient(160deg,#0c0c1c,#06060b)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}
.plan-option *,.panel-box *,.table td,.table th{color:#fff!important}
.plan-option .muted,.plan-option small,.plan-option .hint,.plan-option span:not(:first-child){color:#c0c0cc!important}
.plan-option:hover,.plan-option:has(input:checked){border-color:#fff!important;box-shadow:0 0 24px rgba(255,255,255,.3)}
input[type=radio],input[type=checkbox]{accent-color:#fff}
form label:has(input[type=checkbox]),form label:has(input[type=radio]),.plan-option,.plan-option label{font-family:"Rajdhani",sans-serif!important;text-transform:none!important;letter-spacing:.01em!important;font-size:17px!important}
form label:has(input[type=checkbox])::before,form label:has(input[type=radio])::before{content:none}
.badge,.badge.neu,.badge.angenommen,.badge.in_bearbeitung,.badge.fast_fertig,.badge.offen,.badge.storniert{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)}
.badge.fertig,.badge.paid,.badge.active{background:rgba(95,255,168,.15)!important;color:#7dffbc!important;border-color:rgba(95,255,168,.5)}
.msg.err{background:rgba(255,80,100,.12)!important;color:#ffb3bf!important;border-color:rgba(255,80,100,.5)!important}
.msg.ok{background:rgba(95,255,168,.12)!important;color:#9affc9!important}
.msg.info{background:rgba(255,255,255,.08)!important;color:#fff!important}
.muted,.hint,small{color:#b8b8c4!important}
a.link,.prose a,main p a{color:#fff;text-decoration:underline}
/* Auswahllisten (Dropdowns) dunkel */
select,select option,select optgroup,datalist option{background-color:#0b0b14!important;color:#fff!important}
select option:checked,select option:hover{background:#2a2a44!important;color:#fff!important}
select{color-scheme:dark}
/* Knöpfe: Varianten eindeutig (nie weiß auf weiß) */
html body .btn.btn-secondary,html body .btn.btn-ghost,html body .btn.btn-2,html body button.btn-secondary,html body a.btn-secondary{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55)!important;box-shadow:none!important}
html body .btn.btn-secondary:hover,html body .btn.btn-ghost:hover,html body .btn.btn-2:hover{background:rgba(255,255,255,.12)!important;box-shadow:0 0 22px rgba(255,255,255,.3)!important}
html body .btn.btn-danger{background:transparent!important;color:#ff9aa8!important;border:1.5px solid rgba(255,100,120,.7)!important;box-shadow:none!important}
html body .btn.btn-danger:hover{background:rgba(255,80,100,.18)!important}
html body .btn.btn-primary,html body .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.btn-2):not(.btn-text){background:#fff!important;color:#000!important}
html body .btn *{color:inherit!important}
html body .btn-text{background:transparent!important;color:#fff!important;box-shadow:none!important}
html body .btn[disabled]{opacity:.5}