:root {
  --bg:#002849;
  --card:#ffffff;
  --ink:#ffffff;
  --muted:#cbd5e1;
  --primary:#002849;
  --primary-ink:#ffffff;
  --radius:16px;
}

* { box-sizing:border-box; }
html,body {
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

a { color:var(--ink);text-decoration:underline; }
.container { max-width:960px;margin-inline:auto;padding:20px; }

/* Header */
.header {
  background:#053055;
  color:#fff;
  text-align:center;
  padding:10px;
}
.logo-img {
  height:40px; width:auto; display:block; margin:0 auto;
}

.hero { padding:24px 0 8px;text-align:center; }
h1 { font-size:28px;margin:0 0 8px; }
.lead { color:var(--muted);margin:0 0 16px; }

/* Wizard */
.wizard-shell { max-width:720px;margin:30px auto; }
.wizard-card {
  background:#111827; color:#fff;
  border-radius:16px;
  box-shadow:0 10px 40px rgba(2,6,23,.5);
  padding:20px;
}
.progress {
  width:100%;height:8px;border-radius:999px;
  background:#333;margin-bottom:18px;overflow:hidden;
}
.progress>div {
  height:100%;
  width:0;
  background:#002849; /* Dunkelblau */
  transition:width .3s ease;
}

.q-title {
  font-size:22px;font-weight:700;margin-bottom:18px;text-align:center;
}
.options {
  display:flex;flex-direction:column;gap:12px;
}
.option-btn {
  padding:14px;
  border-radius:12px;
  border:2px solid #e5e7eb;
  background:#fff;
  color:#111827;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition:.2s;
  width:100%;
}
.option-btn:hover { border-color:#111827;box-shadow:0 6px 16px rgba(0,0,0,.08); }
.option-btn.selected {
  border-color:#002849;
  background:#e6f2f7;
  color:#002849;
  font-weight:700;
}

.actions { margin-top:20px;display:flex;justify-content:space-between;gap:12px; }
.btn-primary,.btn-ghost {
  border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;flex:1;
}
.btn-primary { background:#002849;border:0;color:#fff; }
.btn-ghost { background:#f3f4f6;border:1px solid #e5e7eb;color:#111827; }

.step { display:none; }
.step.active { display:block; }

/* Eingabefelder & Dropdowns */
input, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  margin-bottom: 12px;
  background: #fff;
  color: #111827;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23111827' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}

input:focus, select:focus {
  outline: none;
  border-color: #002849;
  box-shadow: 0 0 0 2px rgba(0,40,73,.2);
}

/* Ergebnis */
.result { text-align:center;padding:20px; }
.price { font-size:26px;font-weight:800;margin:18px 0; }

/* Footer */
.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #053055;
  color: #cbd5e1;
  padding: 10px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.15);
}
.footer-links { font-size: 14px; }
.footer-links a { color: #cbd5e1; text-decoration: none; margin: 0 6px; }
.footer-links a:hover { text-decoration: underline; }
.footer-copy { font-size: 12px; margin-top: 4px; }

/* Kontaktseite */
.contact-fields input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  margin-bottom: 12px;
  background: #fff;
  color: #111827;
}

.contact-fields input:focus {
  outline: none;
  border-color: #002849;
  box-shadow: 0 0 0 2px rgba(0,40,73,.2);
}

/* Datenschutzblock */
.privacy-block {
  margin: 16px 0 20px;
}

/* Runde Checkbox */
.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;   /* Wichtig: Bezugspunkt für den Haken */

  /* Hier kannst du die Position anpassen */
  vertical-align: middle;
  margin-top: 7px; /* ↑↓ verschieben */
}

/* Checkmark sichtbar nach Klick */
.checkbox input[type="checkbox"]:checked {
  background-color: #002849;
  border-color: #002849;
}

.checkbox input[type="checkbox"]:checked::after {
  content: "✔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* jetzt mittig */
  font-size: 12px; /* ggf. kleiner machen */
  color: #fff;
}

/* Fehler-Markierung für Pflichtfelder */
input.error, select.error {
  border-color: #e63946;
  box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.3);
}