/* ============================================
   Buchungsformular – Harmony's Jukebox
   ============================================ */

:root {
  --accent: #7c4dff;          /* Akzentfarbe (Stepper, Buttons, Fokus) */
  --accent-hover: #9575ff;
  --done: #28a745;            /* Farbe für erledigte Schritte */
}

/* ---------- Grundgerüst ---------- */

.booking-card {
  width: 100%;
  max-width: 50rem;
  border: 1px solid rgba(255, 255, 255, .08);
}

.header-logo {
  border-radius: 10px;
  width: 100%;
}

/* Pflichtfeld-Stern */
.required-star {
  color: #ff5252;
}

/* Honeypot-Feld: für Menschen unsichtbar, Bots füllen es aus */
.honeypot-field {
  position: absolute;
  left: -9999px;
}

/* ---------- Stepper (Fortschrittsanzeige) ---------- */

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 2px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .5);
  background: transparent;
  transition: all .3s ease;
}

.step-label {
  font-size: .75rem;
  color: rgba(255, 255, 255, .5);
  transition: color .3s ease;
}

/* Verbindungslinie zwischen den Kreisen */
.step-line {
  flex: 1;
  max-width: 60px;
  height: 2px;
  background: rgba(255, 255, 255, .15);
  margin: 0 .5rem 1.2rem .5rem;
  transition: background .3s ease;
}

/* Aktiver Schritt */
.step.active .step-circle {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(124, 77, 255, .5);
}

.step.active .step-label {
  color: #fff;
  font-weight: 600;
}

/* Erledigter Schritt */
.step.done .step-circle {
  border-color: var(--done);
  color: #fff;
  background: var(--done);
}

.step.done .step-label {
  color: var(--done);
}

/* Linie hinter einem erledigten Schritt ebenfalls einfärben */
.step.done + .step-line {
  background: var(--done);
}

/* ---------- Formular-Schritte ---------- */

.form-step {
  display: none;
  border: none;
  padding: 0;
  margin: 0;
}

.form-step.active {
  display: block;
  animation: stepIn .3s ease;
}

.step-title {
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* Sanftes Einblenden beim Schrittwechsel */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Fokus & Validierung ---------- */

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem rgba(124, 77, 255, .25);
}

/* Ungültige Felder (von unserer JS-Validierung markiert) */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #ff5252;
  background-image: none;
}

.invalid-feedback {
  color: #ff8a80;
}

/* ---------- Sendungs-Tabelle ---------- */

.sendungs-table tbody tr {
  cursor: pointer;
  transition: background .15s ease;
}

/* Angeklickte (ausgewählte) Zeile hervorheben */
.sendungs-table tbody tr.row-selected {
  background: rgba(124, 77, 255, .15);
}

/* ---------- Zusammenfassung ---------- */

.summary-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
}

.summary-card dt {
  color: rgba(255, 255, 255, .6);
}

/* ---------- Buttons ---------- */

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ---------- Shake-Animation bei Validierungsfehlern ---------- */

.form-step.shake {
  animation: shake .4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ---------- Handy-Anpassungen ---------- */

@media (max-width: 576px) {
  .step-label {
    display: none;   /* Labels ausblenden, Kreise reichen auf kleinem Screen */
  }
  .step-circle {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
}