@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ============ NO-SCROLL: alles auf einen Blick, vertikal zentriert ============ */
html, body { height:100%; }
body {
  background:
    radial-gradient(880px 620px at 85% -10%, rgba(157,205,90,.10), transparent 60%),
    radial-gradient(760px 560px at -10% 110%, rgba(125,211,252,.07), transparent 60%),
    #0B0F18 !important;
  color:#C2CBD8 !important;
  font-family:'Nunito','Inter',-apple-system,sans-serif !important;
  min-height:100vh;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:24px 16px !important;
  box-sizing:border-box;
}
body::before {
  content:''; position:fixed; inset:0; z-index:-1;
  background:url('/assets/brain-circuit.jpg') center/cover no-repeat;
  opacity:.05; pointer-events:none;
}
body::after {
  content:''; position:fixed; left:0; top:0; height:2px; width:100%; z-index:120;
  background:linear-gradient(90deg,#d7ecb4,#9DCD5A);
  box-shadow:0 1px 8px rgba(93,158,16,.35);
}

/* ============ KOMPAKTE CARD ============ */
.wrap, #wrap, .container.wrap {
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:14px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  padding:30px 40px 26px !important;
  max-width:560px !important;
  width:100% !important;
  margin:0 auto !important;
  animation:fadeUp .55s ease both;
  box-sizing:border-box;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Logo kompakt */
.header { margin-bottom:6px !important; }
.header, .logo { text-align:center !important; }
.header .logo img, .logo img {
  max-width:360px !important; width:360px !important; height:auto !important;
  display:block !important; margin:0 auto !important;
  filter:drop-shadow(0 0 12px rgba(157,205,90,.22));
}

/* ============ TYPO kompakt ============ */
h1,h2,h3,h4 { color:#F2F5F9 !important; font-family:'Nunito','Inter',sans-serif !important; }
h2 { font-weight:800 !important; letter-spacing:-0.3px; font-size:21px !important; margin:10px 0 6px !important; }
h2:first-of-type::before {
  content:'NEWSLETTER';
  display:block; margin-bottom:8px;
  font-family:ui-monospace,'Courier New',monospace;
  font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase;
  color:#9DCD5A;
}
h2:first-of-type::after {
  content:''; display:block; width:30px; height:1px; background:#9DCD5A; margin-top:10px;
}
ul h2::before, li h2::before, ul h2::after, li h2::after { content:none !important; }
ul h2, li h2 { font-size:14px !important; margin:4px 0 !important; }
p, label, .description, .muted { color:#C2CBD8 !important; margin:6px 0 !important; font-size:14px !important; }
a { color:#9DCD5A !important; }
form p { margin:6px 0 !important; }
form { margin:0 !important; }

/* ============ FORMULAR kompakt ============ */
input[type=text], input[type=email] {
  background:#0B0F18 !important; color:#F2F5F9 !important;
  border:1px solid rgba(255,255,255,.12) !important; border-radius:10px !important;
  padding:11px 14px !important; font-size:14px !important;
  width:100% !important; box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s !important;
}
input[type=text]:focus, input[type=email]:focus {
  outline:none !important; border-color:#9DCD5A !important;
  box-shadow:0 0 0 3px rgba(157,205,90,.18) !important;
}
input[type=checkbox] { accent-color:#9DCD5A !important; width:16px; height:16px; }

/* Listenpunkt als kompakte Card */
ul { padding-left:0 !important; margin:8px 0 !important; }
li:has(input[type=checkbox]) {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  padding:10px 14px;
  list-style:none;
  transition:border-color .25s;
}
li:has(input[type=checkbox]):hover { border-color:rgba(157,205,90,.4); }
li:has(input[type=checkbox]) p { margin:2px 0 0 24px !important; font-size:12px !important; color:#97A3B1 !important; }
ul li::marker { content:'' !important; }

/* ============ BUTTON ============ */
.button, button, input[type=submit] {
  background:#9DCD5A !important; color:#16210a !important;
  border:none !important; border-radius:10px !important;
  font-weight:700 !important; font-size:14px !important;
  padding:12px 26px !important;
  box-shadow:0 8px 26px rgba(132,204,22,.35) !important;
  transition:transform .2s, box-shadow .2s, background .2s !important;
  cursor:pointer;
}
.button:hover, button:hover, input[type=submit]:hover {
  background:#b4e66e !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 38px rgba(132,204,22,.5) !important;
}

/* ============ SONSTIGES ============ */
footer.container { display:none !important; }
hr { border-color:rgba(255,255,255,.09) !important; }
.footer, #footer { color:#97A3B1 !important; }
p a[href*="archive"] { font-size:12px !important; color:#97A3B1 !important; }

@media (max-width:640px) {
  .wrap, #wrap, .container.wrap { padding:24px 20px !important; }
  .logo img { max-width:230px !important; width:230px !important; }
}

/* Ueberschrift + eyebrow zentriert */
h2 { text-align:center !important; }
h2:first-of-type::before { text-align:center; }
h2:first-of-type::after { margin-left:auto !important; margin-right:auto !important; }