/* Basic styling for the form */
:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #2563eb;
  --success: #16a34a;
  --error: #dc2626;
  --border: #e5e7eb;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

.container {
  max-width: 740px;
  margin: 40px auto;
  background: var(--card);
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
}

.header-banner {
  margin-bottom: 16px;
}
.header-banner img {
  display: block;
  width: 100%;
  height: auto;
}

h1 {
  margin-top: 0;
  font-size: 1.5rem;
}

p { color: var(--muted); }

.field { margin-bottom: 16px; }
.label, label { display: block; margin-bottom: 8px; font-weight: 600; }

input[type="text"], input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}

.steps-indicator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 8px 0 16px;
}
.step-badge {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-align: center;
  color: var(--muted);
  background: #fff;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.step-badge.active {
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
  border-color: rgba(37, 99, 235, 0.3);
}
.step-badge.completed {
  background: #ecfdf5; /* green-50 */
  color: var(--success);
  border-color: #bbf7d0; /* green-200 */
}
.step-badge.completed::before {
  content: '✓';
  color: var(--success);
  font-weight: 700;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkbox { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.checkbox input { width: auto; }

.nav { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }
.btn, button[type="submit"] {
  background: var(--primary);
  border: none;
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.btn:hover, button[type="submit"]:hover { filter: brightness(0.95); }
.btn.prev { background: #6b7280; }
.btn.submit { background: var(--success); }

.alert {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.alert.success { background: #ecfdf5; color: var(--success); border: 1px solid #bbf7d0; }
.alert.error { background: #fef2f2; color: var(--error); border: 1px solid #fecaca; }

footer { margin-top: 20px; color: var(--muted); }

.hint {
  margin: 6px 0 14px;
  padding: 10px 12px;
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
}

/* Range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(var(--track, var(--success)) 0 0) 0/var(--p, 0%) 100% no-repeat,
    #e5e7eb;
  outline: none;
}
input[type="range"]:focus { outline: none; }

/* WebKit */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent; /* we color via main background */
  border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  margin-top: -5px; /* center thumb on track */
}

/* Firefox */
input[type="range"]::-moz-range-track {
  height: 8px;
  background: transparent;
  border-radius: 999px;
}
input[type="range"]::-moz-range-progress {
  height: 8px;
  background: var(--track, var(--success));
  border-radius: 999px 0 0 999px;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Edge/IE */
input[type="range"]::-ms-track {
  height: 8px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower { background: var(--track, var(--success)); border-radius: 999px; }
input[type="range"]::-ms-fill-upper { background: #e5e7eb; border-radius: 999px; }
input[type="range"]::-ms-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
}

/* Modernization single-row layout (first item only for now) */
.modern-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.modern-row .modern-title {
  flex: 0 0 220px; /* tighter label column */
  max-width: 260px;
  font-weight: 600;
  font-size: 0.95rem;
}
.modern-row .year-input {
  width: 100px; /* tighter year input */
}
.modern-row .range-wrap {
  flex: 1 1 240px; /* allow slider to occupy remaining space */
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modern-row .range-wrap .range-val {
  min-width: 44px;
  text-align: right;
}

/* Responsive tweaks for small screens */
@media (max-width: 720px) {
  /* Title on its own line */
  .modern-row .modern-title { flex: 1 1 100%; }
  /* Year + slider on same line below */
  .modern-row .year-input { width: 110px; }
  .modern-row .range-wrap { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 420px) {
  .modern-row { gap: 10px; }
  .modern-row .modern-title { flex-basis: 100%; }
  .modern-row .year-input { width: 96px; }
  .modern-row .range-wrap { flex: 1 1 auto; min-width: 0; }
}

/* On wider screens keep items on a single line */
@media (min-width: 721px) {
  .modern-row { flex-wrap: nowrap; }
}

/* Single-column container for modernization fields */
.modern-list {
  display: block;
}
.modern-list .field {
  margin-bottom: 14px;
}

/* Generic inline row: label + input on one line */
.inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.inline-row.tight {
  gap: 4px;
}
.inline-row > label {
  flex: 0 0 220px;
  max-width: 260px;
  margin: 0; /* override default label margin */
}
.inline-row > input,
.inline-row > div > input {
  width: 240px;
  max-width: 100%;
}
.inline-row.tight { gap: 4px; }
.inline-row.tight > label { margin-bottom: 0; }
.ml-auto { margin-left: auto; }
.captcha-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Extra spacing for specific fields (e.g., Anmerkungen in Schritt 4) */
.field-spaced {
  margin-top: 28px;
}

/* Thin grey divider (hairline) to separate sections (before Sicherheitsabfrage) */
.hairline {
  border: 0;
  border-top: 1px solid var(--success);
  margin: 16px 0 12px;
}

@media (max-width: 720px) {
  /* Stack step badges vertically on mobile */
  .steps-indicator {
    grid-template-columns: 1fr;
  }
  .step-badge {
    justify-content: flex-start;
  }
  /* Increase bottom spacing for modernization rows on mobile */
  .modern-row { margin: 8px 0 30px; }
  .inline-row { flex-wrap: wrap; }
  .inline-row > label { flex: 1 1 100%; }
  .inline-row > input,
  .inline-row > div > input { width: 100%; max-width: 100%; }
}