:root{
  --bg:#050a05; --bg2:#090f09;
  --cyan:#00ff41; --magenta:#ffe600;
  --text:#cdecd4; --dim:#5d7860;
  --glow-c:0 0 6px var(--cyan), 0 0 18px rgba(0,255,65,.55);
  --glow-m:0 0 6px var(--magenta), 0 0 18px rgba(255,230,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:'Rajdhani','Segoe UI',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  position:relative; padding:40px 24px 24px; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(0,255,65,.10), transparent 60%),
    radial-gradient(700px 500px at 90% 110%, rgba(255,230,0,.10), transparent 60%),
    linear-gradient(var(--bg2),var(--bg));
}
body::after{
  content:""; position:fixed; inset:-2px; z-index:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(0,255,65,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,.07) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 42%, #000 26%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 26%, transparent 80%);
}
.scan{position:fixed; inset:0; z-index:6; pointer-events:none; opacity:.45;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; animation:scanmove 8s linear infinite;}
@keyframes scanmove{from{background-position:0 0}to{background-position:0 100px}}

/* Stromleitungen */
.circuits{position:fixed; inset:0; width:100%; height:100%; z-index:1;
  pointer-events:none; opacity:.55}
.circuits .trace{fill:none; stroke:rgba(0,255,65,.18); stroke-width:1.5}
.circuits .trace.m{stroke:rgba(255,230,0,.16)}
.circuits .node{fill:var(--cyan); filter:drop-shadow(0 0 4px var(--cyan))}
.circuits .node.m{fill:var(--magenta); filter:drop-shadow(0 0 4px var(--magenta))}
.pulse{fill:#afffca; filter:drop-shadow(0 0 6px var(--cyan))}
.pulse.m{fill:#fff5a0; filter:drop-shadow(0 0 6px var(--magenta))}

/* Blitze */
.bolts{position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none}
.bolt{fill:none; stroke:#f5ffe0; stroke-width:2.2; opacity:0;
  filter:drop-shadow(0 0 6px var(--magenta)) drop-shadow(0 0 14px var(--cyan));
  stroke-linejoin:round; stroke-linecap:round}
.flash{position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 30%, rgba(200,255,80,.16), transparent 65%)}

main{position:relative; z-index:10; width:100%; max-width:560px; text-align:center;
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center}

.tag{font-family:'Share Tech Mono',monospace; color:var(--cyan);
  letter-spacing:.32em; font-size:.78rem; text-transform:uppercase;
  text-shadow:var(--glow-c); margin-bottom:16px; opacity:.9}
.tag .br{color:var(--magenta); text-shadow:var(--glow-m)}

h1{font-family:'Orbitron',sans-serif; font-weight:900;
  font-size:clamp(2.86rem,13vw,7rem); line-height:.95; letter-spacing:.04em;
  color:#ffe600; position:relative; text-shadow:var(--glow-m);}
h1.sm{font-size:clamp(1.8rem,7vw,3.2rem)}
h1 .glitch{position:relative; display:inline-block}
h1 .glitch::before,h1 .glitch::after{
  content:attr(data-t); position:absolute; left:0; top:0; width:100%; overflow:hidden;}
h1 .glitch::before{color:var(--magenta); text-shadow:var(--glow-m);
  animation:glitch1 2.4s infinite steps(2,end); clip-path:inset(0 0 62% 0)}
h1 .glitch::after{color:var(--cyan); text-shadow:var(--glow-c);
  animation:glitch2 2.9s infinite steps(2,end); clip-path:inset(58% 0 0 0)}
@keyframes glitch1{
  0%,84%,100%{transform:translate(0,0);opacity:1}
  85%{transform:translate(-6px,-3px);opacity:.8}
  88%{transform:translate(5px,2px);opacity:1}
  91%{transform:translate(-8px,1px);opacity:.75}
  94%{transform:translate(4px,-2px)}
  97%{transform:translate(-3px,3px);opacity:.9}
}
@keyframes glitch2{
  0%,82%,100%{transform:translate(0,0);opacity:1}
  83%{transform:translate(6px,4px);opacity:.7}
  87%{transform:translate(-5px,-3px);opacity:1}
  90%{transform:translate(8px,-2px);opacity:.8}
  93%{transform:translate(-4px,3px)}
  96%{transform:translate(3px,-1px);opacity:.9}
}

.rule{height:1px; width:min(420px,80%); margin:22px auto;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);
  box-shadow:0 0 12px rgba(0,255,65,.5)}

.welcome{font-size:clamp(1rem,2.6vw,1.2rem); color:var(--text); line-height:1.6;
  max-width:32ch; margin:0 auto 6px}
.cursor{display:inline-block; width:.6ch; background:var(--cyan);
  box-shadow:var(--glow-c); animation:blink 1.05s steps(1) infinite; margin-left:2px}
@keyframes blink{50%{opacity:0}}

/* Buttons / Links */
.cta{margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:14px}
.btn{display:inline-flex; align-items:center; gap:.6em;
  font-family:'Share Tech Mono',monospace; font-size:1rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--cyan);
  padding:14px 30px; border:1px solid var(--cyan); border-radius:2px;
  background:linear-gradient(180deg, rgba(0,255,65,.06), rgba(0,255,65,.02));
  box-shadow:var(--glow-c), inset 0 0 14px rgba(0,255,65,.08);
  transition:.18s ease; cursor:pointer}
.btn:hover{color:#050a05; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan),0 0 34px rgba(0,255,65,.7); transform:translateY(-2px)}
.btn .ar{color:var(--magenta); text-shadow:var(--glow-m)}
.btn:hover .ar{color:#06060d; text-shadow:none}
.linkrow{font-family:'Share Tech Mono',monospace; font-size:.82rem; letter-spacing:.1em}
.tlink{color:var(--magenta); text-decoration:none; text-shadow:var(--glow-m);
  border-bottom:1px dashed rgba(255,230,0,.4); padding-bottom:1px; transition:.16s}
.tlink:hover{color:#fff; border-bottom-color:var(--magenta)}

/* Kontaktformular */
.form-wrap{margin-top:22px; text-align:left;
  border:1px solid rgba(0,255,65,.28); border-radius:4px; padding:22px 22px 24px;
  background:linear-gradient(180deg, rgba(0,255,65,.04), rgba(255,230,0,.03));
  box-shadow:var(--glow-c), inset 0 0 22px rgba(0,255,65,.05); backdrop-filter:blur(2px)}
.field{margin-bottom:14px}
.field label{display:block; font-family:'Share Tech Mono',monospace;
  font-size:.72rem; letter-spacing:.12em; color:var(--dim);
  text-transform:uppercase; margin-bottom:5px}
.field input,.field textarea{
  width:100%; background:rgba(2,8,2,.6); color:var(--text);
  border:1px solid rgba(0,255,65,.25); border-radius:3px;
  padding:11px 12px; font-family:'Rajdhani',sans-serif; font-size:1rem;
  transition:.16s ease; outline:none}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field textarea:focus{
  border-color:var(--cyan); box-shadow:var(--glow-c), inset 0 0 10px rgba(0,255,65,.08)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.submit{display:inline-flex; align-items:center; gap:.6em; margin-top:4px;
  font-family:'Share Tech Mono',monospace; font-size:.95rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cyan); cursor:pointer;
  padding:12px 26px; border:1px solid var(--cyan); border-radius:2px;
  background:linear-gradient(180deg, rgba(0,255,65,.06), rgba(0,255,65,.02));
  box-shadow:var(--glow-c), inset 0 0 14px rgba(0,255,65,.08); transition:.18s ease}
.submit:hover:not(:disabled){color:#06060d; background:var(--cyan);
  box-shadow:0 0 10px var(--cyan),0 0 34px rgba(0,255,65,.7); transform:translateY(-2px)}
.submit:disabled{opacity:.5; cursor:not-allowed}
.submit .ar{color:var(--magenta); text-shadow:var(--glow-m)}
.submit:hover:not(:disabled) .ar{color:#06060d; text-shadow:none}
.status{margin-top:12px; font-family:'Share Tech Mono',monospace; font-size:.82rem;
  letter-spacing:.06em; min-height:1.2em}
.status.ok{color:#5dffa0; text-shadow:0 0 8px rgba(93,255,160,.6)}
.status.err{color:#ff5d7a; text-shadow:0 0 8px rgba(255,93,122,.6)}
.status.send{color:var(--cyan); text-shadow:var(--glow-c)}

footer{position:relative; z-index:10; width:100%; padding:20px 0 4px; text-align:center;
  font-family:'Share Tech Mono',monospace; font-size:.7rem; letter-spacing:.2em;
  color:var(--dim); text-transform:uppercase}
footer b{color:var(--cyan)}

@media (prefers-reduced-motion:reduce){
  .scan,h1 .glitch::before,h1 .glitch::after,.cursor,.bolt,.pulse{animation:none!important}
}