:root{--bg:#f6f8fb;--card:#fff;--accent:#2563eb;--accent2:#1e40af;--muted:#6b7280;--success:#16a34a;--danger:#ef4444}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:linear-gradient(180deg,var(--bg),#fff);color:#0f172a}
.container{max-width:1000px;margin:40px auto;padding:20px}
.card{background:#fff;padding:32px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);margin-bottom:24px}
h1,h2,h3{margin-top:0}
label{display:block;margin:10px 0;color:var(--muted)}
input[type=text],input[type=email],input[type=password]{width:100%;padding:12px;border-radius:10px;border:1px solid #e5e7eb}
button{padding:12px 18px;border:none;border-radius:10px;font-weight:700;cursor:pointer}
.primary{background:var(--accent);color:#fff}
button:disabled{opacity:.6;cursor:not-allowed}
.status{margin-top:10px;font-size:14px}
.success{color:var(--success)}
.error{color:var(--danger)}
.progress{height:12px;background:#e5e7eb;border-radius:20px;overflow:hidden;margin-bottom:10px}
.progress div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:.4s}
.survey-step{display:none}
.survey-step.active{display:block}
video{width:100%;border-radius:14px;margin-top:15px}
.nav{display:flex;gap:20px;margin-bottom:20px}
.nav button{background:none;color:var(--accent);padding:0}
.small{font-size:13px;color:var(--muted)}
footer{
  text-align:center;
  margin-top:20px;
}
.card button{
  display:block;
  margin:15px auto 0 auto;
}
.nav button{
  display:inline-block;
  margin:0;
}
.step-error{
  color: var(--danger);
  font-size: 14px;
  margin-top: 8px;
  text-align: center;
}
.btn-invalid{
  border:2px solid var(--danger);
  box-shadow:0 0 0 3px rgba(239,68,68,0.2);
}
.study-video,
#video,
#testVideo {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;   /* <- sorgt für stabile Größe schon vor Play */
  height: auto;
  display: block;
  margin: 12px auto 0;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}