/**
 * Leica Welt Buchungswidget — widget-eigenes CSS
 *
 * Enthält NUR das, was ausschliesslich dieses Widget betrifft: das
 * zweispaltige Schrittlayout, die Fortschrittsanzeige und ein paar
 * Feldbesonderheiten.
 *
 * Schaltflaechen, Hinweisflaechen, Auswahlzustaende, Verfuegbarkeitsangaben,
 * Fokusringe und Formularfelder liegen seit dem 04.09.2026 zentral in
 * /assets/leica-design-system.css unter dem Scope `#leica-booking`.
 * Sie standen vorher doppelt hier und dort und sind auseinandergelaufen.
 */

:root {
  /* Farben kommen aus /assets/leica-design-system.css — hier nur Aliase,
     damit die verbleibenden widget-eigenen Regeln dieselbe Palette nutzen
     und nicht wieder auseinanderlaufen. */
  --lw-acc:    var(--lw-rot, #e2001a);
  --lw-border: var(--lw-linie-stark, #c9c6c2);
  --lw-text:   var(--lw-schwarz, #141414);
  --lw-fs: 1em;
  --lw-py: 0.8rem;
}

/* ── Layout ──────────────────────────────────────────────────────── */

.step-left {
  position: sticky;
  top: 0;
  min-height: 100vh;
  background: #000;
}

.step-left figure {
  height: 50vh;
  margin: 0;
}

.step-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}

.step-left img.changing {
  opacity: 0.15;
}

.step-info {
  padding: 2rem;
  background: #fff;
}

.step-info small {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* ── Progress Bar ────────────────────────────────────────────────── */

.progress-thin {
  height: 4px;
  background: #eaeaea;
  border-radius: 999px;
}

.progress-thin .bar {
  height: 100%;
  background: var(--lw-acc);
  width: 0;
  border-radius: 999px;
  transition: width 0.3s;
}

/* ── Formularfelder, Schaltflaechen, Auswahlzustaende ────────────────
   BEWUSST LEER. Diese Regeln standen hier bis zum 06.09.2026 ein zweites Mal
   und liefen mit /assets/leica-design-system.css auseinander. Weil dieses
   Stylesheet spaeter geladen wird, gewannen die hiesigen `!important`-Angaben
   — unter anderem `font-size: var(--lw-fs) !important` auf .form-label,
   .form-check-label und .input-group .btn. Genau daran scheiterte die
   Vereinheitlichung der Typografie. Alles dazu liegt jetzt ausschliesslich in
   leica-design-system.css, Abschnitte 7, 10, 13 und 14.
   ──────────────────────────────────────────────────────────────────── */

/* ── Flatpickr Overrides ─────────────────────────────────────────── */

.flatpickr-current-month {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  #leica-booking .card-body .row {
    margin-bottom: 0.5rem;
  }

  #leica-booking .card-body .row .col-sm-4 {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
}