/* ======================================================
   Longworth Formular – Theme "Muster" Overrides
   Lädt NACH style.css. Ziel: größere Card, kräftigere Akzente,
   flacher Progress-Balken oben, große Buttons/Slider etc.
   ====================================================== */

.lw-form {
  /* Größen & Layout */
  max-width: 1040px;
  padding: 26px 28px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
  /* Farben (Muster-Rot) */
  --lw-primary: #a31e22;
  --lw-secondary: #f2f2f2;
  --lw-text: #222222;
}

.lw-h1 { font-size: 28px; text-align: center; letter-spacing:.2px; }
.lw-sub { text-align: center; font-size: 15px; }

/* Progress als schmale Leiste */
.lw-progress { margin: 10px auto 22px; max-width: 860px; }
.lw-progress__track { height: 4px; background: #e9e9e9; }
.lw-progress__bar { height: 4px; background: var(--lw-primary); }
.lw-progress__text { font-size: 12px; color:#888; min-width:auto; }

/* Card/Choice größer, luftiger */
.lw-card { padding: 18px 16px; border-radius: 14px; }
.lw-card__icon { font-size: 24px; }
.lw-card__title { font-size: 16px; }

/* Inputs größer */
.lw-input, .lw-select, .lw-textarea { padding: 12px 14px; font-size: 15px; border-radius: 12px; }
.lw-textarea { min-height: 120px; }

/* Range + Number größer & prägnanter */
.lw-range-row { grid-template-columns: 1fr 140px; }
.lw-range { height: 10px; }
.lw-range::-webkit-slider-thumb { width: 22px; height: 22px; box-shadow: 0 0 0 4px rgba(163,30,34,.18); }
.lw-range::-moz-range-thumb { width: 22px; height: 22px; }
#livingAreaNumber, #lotAreaNumber, #yearBuiltNumber { font-weight:600; }

/* Stepper (Zimmer) mittig & groß */
[data-stepper="rooms"] .lw-input { font-size: 18px; text-align: center; }
[data-stepper="rooms"] .lw-btn.lw-btn--ghost { padding: 10px 14px; border-radius: 12px; font-size: 18px; font-weight:800; }

/* Buttons wie im Muster (groß, rundlicher Pfeil-Style) */
.lw-nav { margin-top: 16px; }
.lw-btn { padding: 13px 18px; border-radius: 12px; font-size: 15px; box-shadow: 0 10px 22px rgba(163,30,34,.18); }
.lw-btn--ghost { background: #fff; border:1px solid #e6e6e6; }
.lw-btn[data-next]::after { content: "➜"; margin-left: 8px; }
.lw-btn[data-prev]::before { content: "⬅"; margin-right: 8px; }

/* Labels */
.lw-label { font-size: 15px; }
.lw-help { font-size: 12px; color:#8a8a8a; }

/* Fehler/Succes dezenter */
.lw-error { border-color: #f2bcbc; background: #fff5f5; }
.lw-success { border-color: #b7ead7; background: #eefcf6; }

/* Optionaler Full-Bleed/Breite-Trick (falls das Theme die Spalte zu schmal macht):
   Füge dem Root-Container die Klasse .lw-breakout hinzu. */
.lw-breakout { position: relative; left: 50%; right: 50%;
  margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw; }
.lw-breakout .lw-form { max-width: 1200px; margin: 0 auto; }

/* Kleinere Desktop-Optimierungen */
@media (min-width: 900px) {
  .lw-grid-2 { gap: 16px; }
  .lw-choice { gap: 16px; }
}

/* Bubble über Range */
.lw-range-row { position: relative; }
.lw-range-bubble {
  position: absolute;
  top: -26px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  background: var(--lw-primary);
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}