/* = Retro trifft Moderne – WOW Theme (no framework, no build) = */
:root{
  --bg-0:#070a16;
  --bg-1:#0b1229;
  --bg-2:#0f1a3a;
  --txt:#e6ecff;
  --muted:#a8b0c9;
  --accent-1:#00F5A0; /* neon mint */
  --accent-2:#00D9F5; /* neon cyan */
  --accent-3:#FF3CAC; /* magenta */
  --accent-4:#784BA0; /* purple */
  --card:#ffffff14;
  --border:#ffffff22;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 75% -10%, #18224c22 0%, transparent 60%),
              radial-gradient(900px 900px at -10% 80%, #5b1d5a22 0%, transparent 60%),
              linear-gradient(180deg, var(--bg-1), var(--bg-0) 40%, var(--bg-2));
  font:400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* Subtle animated background grid */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    linear-gradient(transparent 95%, #ffffff0f 96%) 0 0/100% 32px,
    linear-gradient(90deg, transparent 95%, #ffffff0f 96%) 0 0/32px 100%;
  opacity:.4;
}
@media (prefers-reduced-motion:no-preference){
  body::before{ animation:gridMove 18s linear infinite; }
  @keyframes gridMove{ to{ transform:translateY(32px)} }
}

/* CRT scanlines overlay (very subtle) */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, #0000, #0000 2px, #0000000f 3px, #0000000f 4px);
  mix-blend-mode:normal; opacity:.2;
}

/* Container */
.wrap{ width:min(1100px, 92%); margin-inline:auto; }

/* Header */
.header{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, #0b1229dd, #0b122900);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; gap:16px; padding:12px 0; }
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--txt);
  font-weight:700; letter-spacing:.2px;
}
.brand .logo{
  width:28px; height:28px; border-radius:6px;
  background: conic-gradient(from 90deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-4), var(--accent-1));
  box-shadow: 0 0 18px #00d9f588, inset 0 0 18px #00f5a055;
}
.nav{ margin-left:auto; display:flex; gap:10px; }
.nav a{ color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px; }
.nav a:hover{ color:var(--txt); background:#ffffff0f; }

/* Hero */
.hero{
  position:relative; padding:86px 0 36px; text-align:center;
}
.hero .halo{
  position:absolute; inset:-10% -10% auto -10%; height:60%;
  background: radial-gradient(700px 350px at 50% 0%, #00d9f533 0%, transparent 60%);
  filter: blur(20px);
  pointer-events:none;
}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 12px; border-radius:999px; font-size:12px; color:#041b24;
  background:linear-gradient(90deg, var(--accent-1), var(--accent-2));
  box-shadow:0 6px 30px #00f5a044;
}
.h1{
  margin:18px 0 10px; font-size: clamp(36px, 5vw, 64px); line-height:1.05; font-weight:800;
  letter-spacing:.3px; text-wrap:balance;
}
.glitch{
  position:relative; display:inline-block;
  text-shadow:
    0px 0 0 #fff,
    1px 0 0 rgba(0,217,245,.6),
   -1px 0 0 rgba(255,60,172,.6);
}
@media (prefers-reduced-motion:no-preference){
  .glitch{ animation:gl 3.5s infinite steps(1); }
  @keyframes gl{
    0%,89%,100%{ transform:none; }
    90%{ transform:translateX(0.6px); }
    91%{ transform:translateX(-0.6px); }
  }
}
.lead{ color:var(--muted); font-size: clamp(16px, 2.1vw, 20px); margin:0 auto 18px; max-width:860px; }

/* Buttons */
.btn{
  --glow: #00d9f5;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; border:1px solid #00d9f566;
  color:var(--txt); text-decoration:none; background:#0b1229aa;
  box-shadow:0 0 0 0 var(--glow), inset 0 0 24px #00f5a011;
  transition: box-shadow .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: var(--accent-1);
  box-shadow:0 0 24px 2px var(--glow), inset 0 0 28px #00f5a022;
}
.btn.primary{ --glow: #ff3cac; border-color:#ff3cac77; background: linear-gradient(180deg, #ff3cac22, #784ba022); }
.btn.small{ padding:8px 12px; border-radius:10px; font-size:14px }

/* Cards / Glass panels */
.panel{
  background: linear-gradient(180deg, #ffffff10, #ffffff06);
  border:1px solid var(--border);
  border-radius:16px; box-shadow: var(--shadow);
}
.panel .inner{ padding:20px; }

/* Grid helpers */
.grid{ display:grid; gap:14px; }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px){
  .grid.cols-3{ grid-template-columns:1fr; }
  .grid.cols-2{ grid-template-columns:1fr; }
}

/* Feature items */
.feature{ padding:18px; border-radius:14px; background:#00000022; border:1px solid var(--border); }
.feature h3{ margin:6px 0 6px; font-size:18px }
.feature p{ margin:0; color:var(--muted) }

/* Pricing */
.pricing .card{ padding:20px; border-radius:16px; border:1px solid var(--border); background:#0b122944; }
.pricing .card.pop{ outline:1.5px solid var(--accent-2); box-shadow:0 10px 40px #00d9f533; transform:translateY(-2px); }
.pricing h3{ margin:0 0 8px }
.pricing ul{ margin:0; padding-left:18px; color:var(--muted) }

/* ---------- Form (fixed) ---------- */
.form label{ display:block; margin-bottom:12px; }

/* Nur Textfelder/Select/Textarea vollflächig stylen – nicht Checkbox/Radio */
.form input:not([type="checkbox"]):not([type="radio"]),
.form select,
.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0a0f1faa;
  color:var(--txt);
  outline:none;
}
.form input:not([type="checkbox"]):not([type="radio"]):focus,
.form select:focus,
.form textarea:focus{
  border-color: var(--accent-2);
  box-shadow:0 0 0 4px #00d9f533;
}

/* Checkbox-Zeile: kompakt & ohne Fullwidth-Styling */
.form .agree{
  display:flex; align-items:center; gap:10px;
  margin-top:8px; color:var(--muted); font-size:14px;
}
.form .agree input{
  width:auto; height:18px; margin:0;
  padding:0; border:0; background:transparent; box-shadow:none;
  accent-color: var(--accent-2);
}
.form .agree input:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px; border-radius:4px;
}

/* Grid im Formular */
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width: 800px){ .form .row{ grid-template-columns:1fr } }

/* Footer */
.footer{ color:var(--muted); padding:28px 0 40px; text-align:center; }
.footer a{ color:var(--txt); }

/* Accessibility focus for links */
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px }
/* --- FIX: Checkbox nicht wie Textfeld stylen --- */
.form input[type="checkbox"],
.form label input[type="checkbox"]{
  appearance: auto !important;
  display: inline-block !important;
  width: auto !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  accent-color: var(--accent-2);
}

/* schöne Zeile für die Zustimmung */
.form .agree{
  display:flex; align-items:center; gap:10px;
  margin-top:8px; color:var(--muted); font-size:14px;
}
.form .agree{ cursor:pointer; user-select:none; }
.form .agree input{ cursor:pointer; }