/* ===== Steps (Überschriften + Grundabstände) ===== */
.step h2{
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

.step .panel{
  padding: var(--space-2);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(2,8,23,.06);
}

/* Formelemente */
.step select,
.step input[type="text"],
.step input[type="number"],
.step input[type="date"],
.step input[type="time"]{
  width:100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: var(--fs-body);
}

/* Slide-Down Animation */
.step{
  display:block; overflow:hidden;
  opacity:0; transform: translateY(-8px);
  max-height:0;
  transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .25s ease, transform .25s ease;
}
.step.is-active{
  opacity:1; transform: translateY(0); max-height: 5000px;
}



/* Breadcrumbs / Fortschritt */
.step-breadcrumbs{ padding: 8px 0; }
.step-bc{
  list-style:none; margin:0 0 8px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.step-bc li{ display:inline-flex; }
.step-bc button{
  appearance:none; border:1px solid var(--border, #e6eaf2);
  background:#fff; color:var(--text, #0f172a);
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:.95rem;
  cursor:pointer;
}
.step-bc li.is-active button{ border-color:var(--brand, #008FFF); box-shadow:0 0 0 3px rgba(59,130,246,.18); background:#008FFF;color:white;}
.step-bc li.is-done button{ background:white; }
.step-bc li.is-lock button{ opacity:.55; cursor:default; pointer-events:none; }
@media (max-width: 600px){
  .step-bc button{ padding:6px 10px; font-size:.9rem; }
}