:root{
  --bg:#070b11; --bg2:#0c1320; --fg:#ecf2fb; --muted:#9fb0c8;
  --primary:#86d6ff; --ok:#6cffbe; --border:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.07); --danger:#ff9f9f;
  --wa:#25D366; --tg:#27A7E7; --ig:#E1306C; --ph:#86d6ff; --ml:#cfeeff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg); background:
   radial-gradient(1200px 600px at 20% -10%, rgba(134,214,255,.08), transparent 60%),
   linear-gradient(180deg,var(--bg),var(--bg2) 70%);
  min-height:100svh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* NAV */
.nav{position:fixed; inset:16px 50% auto auto; transform:translateX(50%);
  width:min(1080px,calc(100% - 32px)); display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:16px; background:var(--glass); backdrop-filter: blur(14px) saturate(130%);
  border:1px solid var(--border); z-index:1000}
.logo{font-weight:800; display:flex; gap:8px; text-decoration:none; color:var(--fg)}
.toplinks a{color:var(--muted); margin-left:12px; text-decoration:none; font-weight:700}
.toplinks a:hover{color:#fff}

/* HERO */
.hero{ position:relative; padding-top:78px; overflow:hidden; isolation:isolate; } /* ↓ kompakter: vorher 120px */
.hero-inner{ padding:26px 0 14px } /* ↓ kompakter: vorher 70px 0 40px */
.eyebrow{letter-spacing:.16em;text-transform:uppercase;opacity:.7;font-weight:700}
.display{font-size:clamp(36px,7vw,66px);line-height:1.04;margin:6px 0 10px;letter-spacing:-.02em}
.display .gradient{background:linear-gradient(90deg,#fff,#cfeeff 40%,#fff 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:19px;color:var(--muted);margin:0 0 16px}
.hero .grid-lines{position:absolute;inset:-10% -10% auto -10%;height:60vh;opacity:.08}
.hero .orb{position:absolute;filter:blur(60px);opacity:.35;pointer-events:none}
.orb-a{width:440px;height:440px;background:radial-gradient(closest-side, rgba(134,214,255,.30), transparent 70%);left:-120px;top:-60px}
.orb-b{width:560px;height:560px;background:radial-gradient(closest-side, rgba(108,255,190,.25), transparent 70%);right:-160px;top:-40px}
.noise{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:soft-light}

/* Sections + cards */
.section{padding:26px 0} /* ↓ kompakter: vorher 56px 0 */
.card{
  border:1px solid var(--border); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  padding:16px; display:grid; gap:12px;
}
.card.alt{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03))}
.support-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px}
@media (max-width:960px){ .support-grid{grid-template-columns:1fr} }

/* Form */
.form .row{display:grid; gap:8px; margin:8px 0}
.form .row.two{grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){ .form .row.two{grid-template-columns:1fr} }
.field label{font-weight:800}
input, select, textarea{
  color:var(--fg); background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:12px; padding:12px; font:inherit; outline:none;
}
textarea{resize:vertical}
input:focus, select:focus, textarea:focus{border-color:rgba(134,214,255,.65); box-shadow:0 0 0 3px rgba(134,214,255,.18)}
.err{color:var(--danger); font-size:.92rem}

/* Abstände zwischen Gruppen (ohne Überschrift) */
.group.space{margin:18px 0}

/* Select (gut lesbar) */
.select{
  appearance:none; -webkit-appearance:none; background:
   linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  position:relative; padding-right:42px; font-weight:700;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 10px center; background-size:22px 22px;

  /* NEU: bessere Lesbarkeit Dark */
  color:var(--fg) !important;
  border:1px solid var(--border) !important;
  opacity:1 !important;
  filter:none !important;
}
/* NEU: Dropdown-Optionen im Dark Theme */
select option{
  background:#0b1220 !important;
  color:#ecf2fb !important;
}
select option[value=""], select option[disabled]{
  color:var(--muted) !important;
}
/* NEU: Firefox-Fix für sichtbaren Text */
select:-moz-focusring{
  color:transparent !important;
  text-shadow:0 0 0 var(--fg) !important;
}

/* Checkbox & Actions */
.chk{margin-top:2px}
.chk-lab{display:flex;gap:8px;align-items:flex-start}
.chk input{margin-top:4px}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid var(--border);color:var(--fg);text-decoration:none;cursor:pointer;font-weight:800;transition:transform .12s ease, box-shadow .18s ease, filter .18s ease}
.pill{border-radius:999px;padding:14px 20px}
.primary{background:linear-gradient(180deg, rgba(134,214,255,.96), rgba(134,214,255,.86)); color:#062238; border-color:rgba(134,214,255,.92); box-shadow:0 8px 22px rgba(134,214,255,.18), inset 0 1px 0 rgba(255,255,255,.45)}
.primary:hover{filter:brightness(1.03); box-shadow:0 10px 26px rgba(134,214,255,.22)}
.primary:active{transform:translateY(1px); box-shadow:0 6px 16px rgba(134,214,255,.20)}
.spinner{width:14px;height:14px;border-radius:999px;border:2px solid rgba(0,0,0,.0);border-top-color:#062238;margin-left:8px;display:none}
.btn.loading .spinner{display:inline-block; animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Channels */
.channels{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.channels li{display:flex;gap:10px;align-items:center;border:1px dashed var(--border);border-radius:12px;padding:10px}
.c-body{display:flex;flex-direction:column;text-decoration:none;color:var(--fg)}
.c-body b{line-height:1.1}
.c-body em{color:var(--muted)}
.c-ic{
  width:36px;height:36px;border-radius:999px;display:inline-block;flex:0 0 36px;
  border:1px solid var(--border); background:rgba(255,255,255,.05); position:relative;
}
.c-ic::after{content:""; position:absolute; inset:0; display:block; mask-size:60% 60%; mask-position:center; mask-repeat:no-repeat; background:#fff; opacity:.9}

/* einfache Mono-„Logos“ */
.c-whatsapp{background:rgba(37,211,102,.15); border-color:rgba(37,211,102,.4)}
.c-whatsapp::after{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3.9A10 10 0 0 0 3.1 20L2 22l2.2-1.1A10 10 0 1 0 20 3.9ZM6.7 19l-.7.4l.3-.8a7.7 7.7 0 1 1 2.8 2.2l-.7-.3a.6.6 0 0 0-.6.1ZM8.9 7.6c.2-.5.4-.5.6-.5h.5c.2 0 .5 0 .7.6c.3.6.8 2 .9 2.1c.1.2.1.3 0 .5c0 .1-.1.2-.3.4c-.1.1-.3.3-.5.5c-.2.2-.3.3-.1.6c.2.3.9 1.5 2 2.4c1.4 1.2 2.5 1.6 2.8 1.8c.3.1.5.1.6-.1l.9-1.1c.1-.2.3-.2.5-.1l2 .9c.2.1.5.2.6.4c.1.2.1 1.2-.3 1.9c-.4.7-1.3 1.1-2.2 1.1c-.6 0-1.2-.1-2-.4c-.8-.3-1.7-.8-2.7-1.5c-1-.7-2-1.7-2.9-2.9c-.9-1.2-1.5-2.3-1.9-3.1c-.4-.8-.6-1.5-.7-2.1c0-.6.1-1 .3-1.3Z'/%3E%3C/svg%3E"); background:var(--wa); }

.c-telegram{background:rgba(39,167,231,.15); border-color:rgba(39,167,231,.4)}
.c-telegram::after{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.04 15.34 8.9 19.3c.41 0 .59-.17.8-.37l1.92-1.84 3.98 2.9c.73.4 1.25.19 1.45-.68l2.63-12.34h0c.23-1.08-.39-1.5-1.1-1.24L2.7 9.43c-1.05.41-1.03 1 .19 1.27l4.86 1.2L18.1 6.3c.59-.36 1.12-.16.68.23'/%3E%3C/svg%3E"); background:var(--tg); }

.c-instagram{background:rgba(225,48,108,.15); border-color:rgba(225,48,108,.5)}
.c-instagram::after{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3a5 5 0 1 1 0 10a5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6a3 3 0 0 0 0-6Zm5.5-.75a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5Z'/%3E%3C/svg%3E"); background:var(--ig); }

.c-phone{background:rgba(134,214,255,.15); border-color:rgba(134,214,255,.4)}
.c-phone::after{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.6 3.1 3.5 5 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2c1 .4 2 .6 3 .6c.4 0 .8.3.8.8v3.6c0 .4-.4.8-.8.8A17.8 17.8 0 0 1 3 6.6c0-.4.4-.8.8-.8H8c.4 0 .8.3.8.8c0 1 .2 2 .6 3c.2.4.1.9-.2 1.2l-2.6 2.6Z'/%3E%3C/svg%3E"); background:var(--ph); }

.c-mail{background:rgba(207,238,255,.15); border-color:rgba(207,238,255,.4)}
.c-mail::after{ mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.2l9 5.3l9-5.3V7H3Zm18 10V9.3l-9 5.3l-9-5.3V17h18Z'/%3E%3C/svg%3E"); background:var(--ml); }

/* Footer */
.foot{padding:28px 20px;border-top:1px solid var(--border);display:grid;gap:10px;text-align:center;color:var(--muted)}

/* Reveal */
.reveal{opacity:.001;transform:translateY(8px) scale(.98)}
.reveal.reveal-in{animation:revealSoft .46s cubic-bezier(.2,.6,0,.999) both}
@keyframes revealSoft{to{opacity:1;transform:none}}
.no-js .reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .grid-lines,.noise{display:none!important}
}

/* === OVERRIDES: volle Eingabezeilen =============================== */
.field { width: 100%; }

.field input,
.field select,
.field textarea {
  width: 100% !important;   /* volle Zeile */
  display: block;
  padding: 14px 16px;       /* höher / angenehmer */
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.35;
}

/* Select gut klickbar, ohne Mini-Dropdown */
.field select {
  padding-right: 48px;      /* Platz für Pfeil */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
}

/* Textarea als lange Zeile, nicht winzige Box */
.field textarea {
  min-height: 140px;
  resize: vertical;
}
/* ================================================================== */