:root{
    --bg: #070a12;
    --bg-2:#0b1220;
    --line:#1e293b80;
    --txt:#e5e7eb;
    --muted:#94a3b8;
    --brand:#22d3ee;
    --brand-2:#60a5fa;
    --radius: 18px;
    --shadow: 0 10px 40px rgba(2,8,23,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color:var(--txt);
    background:
            radial-gradient(60% 40% at 100% 0%, rgba(34,211,238,.15), transparent 60%),
            radial-gradient(45% 40% at 0% 100%, rgba(96,165,250,.12), transparent 60%),
            linear-gradient(180deg, #05070c, #0a0f1a);
    letter-spacing:.2px;
}
a{color:var(--brand); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* NAV */
header{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line);
    background: linear-gradient(180deg, #070a12cc, #070a1200); backdrop-filter: blur(8px)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:700}
.badge{width:28px; height:28px; border-radius:10px; display:grid; place-items:center;
    background: conic-gradient(from 180deg, var(--brand), var(--brand-2), var(--brand));
    box-shadow: 0 0 0 2px #0b1220, 0 0 40px rgba(34,211,238,.35)}
.badge svg{width:18px; height:18px; color:#00111a}
.accent{color:var(--brand)}
.cta{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
    color:#00111a;
    background: radial-gradient(80% 120% at 20% 0%, var(--brand), var(--brand-2));
    font-weight:700; box-shadow: var(--shadow); transition: transform .1s ease}
.cta:hover{transform:translateY(-1px)}

/* HERO */
.hero{padding:86px 0 36px}
h1{margin:0 0 10px; font-size:clamp(28px,4.5vw,52px); line-height:1.05}
.lead{margin:0 0 18px; font-size:clamp(15px,2vw,18px); color:var(--muted)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 22px}
.chip{border:1px solid #3b4a63; background:#0b1220aa; color:var(--txt);
    padding:8px 12px; border-radius:999px; font-size:13px}

/* FEATURES */
.features{padding:36px 0}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.card{border:1px solid #20324d; border-radius:16px;
    background:linear-gradient(180deg,#0b1220cc,#0b122060); padding:16px}
.card h3{margin:6px 0 6px; font-size:18px}
.mini{color:var(--muted); font-size:14px}

/* FORM */
.wait{padding:24px 0 70px}
.h2{margin:0 0 10px; font-size:24px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* Inputs & Textarea */
input, textarea{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #23324a;
    background:#0b1220;
    color:var(--txt);
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{min-height:120px; resize:vertical}
input:focus, textarea:focus{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(34,211,238,.20);
}

/* Labels + Pflichtfeld Stern */
label{font-size:13px; color:var(--muted); display:block; margin-bottom:4px}
label .required{
    color:#f87171; /* rot */
    margin-left:3px;
}
.required-note{
    font-size:12px; color:var(--muted);
    margin-top:4px; margin-bottom:12px;
}

/* Checkbox */
.consent{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:var(--muted);
    margin:8px 0 6px;
}
.consent input[type="checkbox"]{
    appearance:none; -webkit-appearance:none;
    width:22px; height:22px;
    border-radius:6px;
    border:1px solid #23324a;
    background:#0b1220;
    position:relative;
    cursor:pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.consent input[type="checkbox"]:hover{ border-color:#2a3a58; }
.consent input[type="checkbox"]:active{ transform: scale(.96); }
.consent input[type="checkbox"]:checked{
    background: radial-gradient(80% 120% at 20% 0%, var(--brand), var(--brand-2));
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(34,211,238,.35), inset 0 0 0 1px rgba(0,0,0,.15);
}
.consent input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:6px; height:12px;
    border:2px solid #00111a;
    border-top:0; border-left:0;
    transform: translate(-50%,-55%) rotate(45deg); /* zentriert */
}
.consent label{cursor:pointer; user-select:none}

/* Button */
button{
    cursor:pointer; border:0;
    border-radius:12px;
    padding:14px 18px;
    font-weight:700;
    color:#00111a;
    background:radial-gradient(80% 120% at 20% 0%, var(--brand), var(--brand-2));
    box-shadow: var(--shadow);
    transition: transform .1s ease, box-shadow .2s ease;
    width:100%;
}
button:hover{ transform: translateY(-1px); box-shadow:0 8px 30px rgba(34,211,238,.35); }
button:active{ transform: translateY(0); box-shadow: var(--shadow); }
.hint{font-size:12px; color:var(--muted); margin-top:4px}

/* FOOTER */
footer{border-top:1px solid var(--line); color:var(--muted); padding:26px 0}
.cols{display:grid; grid-template-columns:2fr 1fr; gap:14px}
.list{list-style:none; padding-left:0; margin:8px 0 0}

/* LEGAL */
.legal{padding:32px 0; max-width:700px}
.legal h1{margin-bottom:16px}
.legal p, .legal ul{color:var(--muted); line-height:1.6}

/* RESPONSIVE */
@media (max-width: 900px){
    .row{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}
    .cols{grid-template-columns:1fr}
}