:root{
  --bg:#0a0710; --line:rgba(255,255,255,.14); --txt:#f6f1ff; --muted:#a396b8;
  --acc:#00e5ff; --acc2:#ff2d95; --acc3:#b6ff3d;
  --bright:1;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  min-height:100vh;padding:56px 16px 80px;overflow-x:hidden;filter:brightness(var(--bright))}

/* Backdrop: Ziegelwand + Vignette */
.wall{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(700px 500px at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 2px, transparent 2px 128px),
    #100b17;
  animation:hum 6s ease-in-out infinite alternate}
.wall::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%, transparent 30%, rgba(0,0,0,.75))}
@keyframes hum{to{filter:brightness(1.12)}}

.wrap{position:relative;z-index:2;width:min(940px,100%);margin:0 auto}
.head{text-align:center;margin-bottom:34px}
.pill{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--line);padding:7px 15px;border-radius:99px;background:rgba(255,255,255,.05)}
h1{font-size:clamp(34px,7vw,56px);margin:16px 0 8px;letter-spacing:-.02em}
h1 span{color:var(--acc2);text-shadow:0 0 6px var(--acc2),0 0 18px var(--acc2),
  0 0 42px rgba(255,45,149,.8),0 0 90px rgba(255,45,149,.55)}
.head p{color:var(--muted);font-size:15px}

/* Schild */
.sign{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap;
  padding:46px 20px;margin-bottom:26px;border-radius:26px;
  background:rgba(6,4,12,.55);border:1px solid var(--line);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 90px rgba(0,0,0,.8)}
.tube{font-size:clamp(34px,8vw,68px);font-weight:800;letter-spacing:.06em;cursor:default;
  font-family:'Space Grotesk',sans-serif;transition:.35s}
.cyan{color:#d8fbff;animation:glowCyan 3.4s ease-in-out infinite alternate}
.cyan{text-shadow:0 0 6px var(--acc),0 0 20px var(--acc),0 0 48px rgba(0,229,255,.85),
  0 0 110px rgba(0,229,255,.55)}
.pink{color:#ffe6f2;text-shadow:0 0 6px var(--acc2),0 0 20px var(--acc2),
  0 0 48px rgba(255,45,149,.85),0 0 110px rgba(255,45,149,.5)}
.lime{color:#f2ffe0;text-shadow:0 0 6px var(--acc3),0 0 18px var(--acc3),
  0 0 44px rgba(182,255,61,.8),0 0 100px rgba(182,255,61,.45)}
.outline{color:transparent;-webkit-text-stroke:2px #eaffd4;
  text-shadow:0 0 14px rgba(182,255,61,.8),0 0 50px rgba(182,255,61,.5)}
@keyframes glowCyan{to{text-shadow:0 0 8px var(--acc),0 0 26px var(--acc),
  0 0 64px rgba(0,229,255,.95),0 0 140px rgba(0,229,255,.7)}}
.tube:hover{transform:scale(1.05) rotate(-1deg)}

/* Flackern */
.flicker{animation:flicker 4s linear infinite}
@keyframes flicker{
  0%,18%,22%,25%,53%,57%,100%{opacity:1;
    text-shadow:0 0 6px var(--acc2),0 0 20px var(--acc2),0 0 48px rgba(255,45,149,.85),0 0 110px rgba(255,45,149,.5)}
  20%,24%,55%{opacity:.35;text-shadow:0 0 4px rgba(255,45,149,.4)}
}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:26px}
.nc{padding:26px;border-radius:22px;text-align:center;background:rgba(8,5,16,.6);
  border:1px solid var(--line);transition:.4s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.nc:hover{transform:translateY(-8px)}
.tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mini{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:.08em;margin:14px 0 10px;
  transition:.3s}
.neon-cyan .mini{color:#d8fbff;text-shadow:0 0 5px var(--acc),0 0 16px var(--acc),0 0 44px rgba(0,229,255,.8)}
.neon-pink .mini{color:#ffe6f2;text-shadow:0 0 5px var(--acc2),0 0 16px var(--acc2),0 0 44px rgba(255,45,149,.8)}
.neon-lime .mini{color:#f2ffe0;text-shadow:0 0 5px var(--acc3),0 0 16px var(--acc3),0 0 44px rgba(182,255,61,.8)}
.neon-cyan:hover{border-color:var(--acc);box-shadow:0 0 40px rgba(0,229,255,.4),inset 0 0 30px rgba(0,229,255,.12)}
.neon-pink:hover{border-color:var(--acc2);box-shadow:0 0 40px rgba(255,45,149,.45),inset 0 0 30px rgba(255,45,149,.14)}
.neon-lime:hover{border-color:var(--acc3);box-shadow:0 0 40px rgba(182,255,61,.4),inset 0 0 30px rgba(182,255,61,.12)}
.nc:hover .mini{transform:scale(1.07);filter:brightness(1.4)}
.nc p{color:var(--muted);font-size:13.5px;line-height:1.6}

/* Steuerung */
.panel{padding:26px;border-radius:24px;background:rgba(8,5,16,.65);border:1px solid var(--line);
  backdrop-filter:blur(12px)}
.row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.row label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.row output{font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:9px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,var(--acc),var(--acc2)) 0/var(--fill,50%) 100% no-repeat,
             rgba(255,255,255,.12);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:4px solid var(--acc2);cursor:grab;box-shadow:0 0 22px var(--acc2)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--acc2)}
.btns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.btns button{padding:12px 20px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer;transition:.3s}
.btns button:hover{color:var(--txt);border-color:var(--acc);transform:translateY(-3px)}
.btns button.on{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#07111a;border-color:transparent;font-weight:700}
.btns .ghost{border-style:dashed}
.hint{margin-top:16px;font-size:13.5px;color:var(--muted);text-align:center;line-height:1.6}

/* Stromstoß */
.surging{animation:surge .5s steps(2) 3}
@keyframes surge{50%{filter:brightness(1.9) saturate(1.5)}}
body.surge .sign .tube{text-shadow:0 0 12px #fff,0 0 40px #fff,0 0 120px var(--acc)}
body.off .sign .tube{animation:none;opacity:.12;text-shadow:none}
body.off .tube.outline{-webkit-text-stroke-color:rgba(255,255,255,.3)}
body.flickerMode .sign .pink{animation:flicker 1.6s linear infinite}
body.steady .sign .pink{animation:none}

@media (max-width:640px){
  .sign{padding:30px 14px;gap:16px}
  .panel{padding:20px}
  .btns button{flex:1;min-width:120px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}