/**
 * Immobilien-Wertermittlung – Frontend-Styles v2.0
 */

/* ══════════════════════════ RESET & VARS ══════════════════════════ */
.imwo-form-wrapper *,
.imwo-form-wrapper *::before,
.imwo-form-wrapper *::after { box-sizing: border-box; }

:root {
  --imwo-primary:      #1a3a6b;
  --imwo-primary-mid:  #2c5f9a;
  --imwo-accent:       #c5d8f0;
  --imwo-accent-light: #e8f0f9;
  --imwo-success:      #28a745;
  --imwo-error:        #dc3545;
  --imwo-border:       #dde6f0;
  --imwo-bg:           #f5f8fc;
  --imwo-text:         #1e293b;
  --imwo-muted:        #64748b;
  --imwo-radius:       14px;
  --imwo-radius-sm:    8px;
  --imwo-radius-xs:    6px;
  --imwo-shadow:       0 8px 40px rgba(26,58,107,.10);
  --imwo-shadow-card:  0 2px 12px rgba(26,58,107,.08);
  --imwo-trans:        .2s ease;
}

/* ══════════════════════════ WRAPPER ═══════════════════════════════ */
.imwo-form-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--imwo-radius);
  box-shadow: var(--imwo-shadow);
  overflow: hidden;
}

/* ══════════════════════════ PROGRESS BAR ══════════════════════════ */
.imwo-progress-bar {
  padding: 32px 36px 0;
  background: #fff;
}

.imwo-progress-steps {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.imwo-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
  flex-shrink: 0;
}

.imwo-step-connector {
  flex: 1;
  height: 2px;
  background: var(--imwo-border);
  margin: 0 4px;
  margin-bottom: 22px;
  transition: background var(--imwo-trans);
}

.imwo-step-connector.is-done { background: var(--imwo-success); }
.imwo-step-connector.is-active { background: var(--imwo-primary-mid); }

.imwo-step-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--imwo-bg);
  color: var(--imwo-muted);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--imwo-trans);
  border: 2px solid var(--imwo-border);
  position: relative;
}

.imwo-step-label {
  font-size: 11px;
  color: var(--imwo-muted);
  text-align: center;
  white-space: nowrap;
  transition: color var(--imwo-trans);
  font-weight: 500;
}

.imwo-step-indicator.is-active .imwo-step-dot {
  background: var(--imwo-primary);
  color: #fff;
  border-color: var(--imwo-primary);
  box-shadow: 0 0 0 5px rgba(26,58,107,.12);
}
.imwo-step-indicator.is-active .imwo-step-label {
  color: var(--imwo-primary);
  font-weight: 700;
}

.imwo-step-indicator.is-done .imwo-step-dot {
  background: var(--imwo-success);
  border-color: var(--imwo-success);
  color: transparent;
  font-size: 0;
}
.imwo-step-indicator.is-done .imwo-step-dot::after {
  content: '';
  position: absolute;
  left: 10px; top: 7px;
  width: 7px; height: 12px;
  border: 2.5px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.imwo-step-indicator.is-done .imwo-step-label { color: var(--imwo-success); }

.imwo-progress-track {
  height: 4px;
  background: var(--imwo-border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0;
}
.imwo-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--imwo-primary), var(--imwo-primary-mid));
  border-radius: 99px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════ STEP PANELS ═══════════════════════════ */
.imwo-form { padding: 0 36px 36px; }

.imwo-step {
  display: none;
  animation: imwo-fade-in .3s ease;
}
.imwo-step.is-active { display: block; }

@keyframes imwo-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.imwo-step-header { margin: 28px 0 24px; }

.imwo-step-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--imwo-primary) !important;
  margin: 0 0 6px !important;
  letter-spacing: -.3px;
}
.imwo-step-desc {
  color: var(--imwo-muted);
  font-size: 14px;
  margin: 0;
}

/* ══════════════════════════ FIELDS ════════════════════════════════ */
.imwo-field-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.imwo-field-row .imwo-field-group { flex: 1; margin-bottom: 0; }
.imwo-field-row .imwo-field-grow  { flex: 2; }
.imwo-field-row .imwo-field-small { flex: 0 0 110px; }

.imwo-field-group { margin-bottom: 16px; }

.imwo-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--imwo-text);
  margin-bottom: 7px;
  letter-spacing: .1px;
}
.imwo-optional {
  color: var(--imwo-muted);
  font-weight: 400;
  font-size: 12px;
}

.imwo-input,
.imwo-select,
.imwo-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--imwo-border);
  border-radius: var(--imwo-radius-sm);
  font-size: 15px;
  color: var(--imwo-text);
  background: #fff;
  transition: border-color var(--imwo-trans), box-shadow var(--imwo-trans), background var(--imwo-trans);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.imwo-input:hover,
.imwo-select:hover { border-color: #b0c4de; }

.imwo-input:focus,
.imwo-select:focus,
.imwo-textarea:focus {
  outline: none;
  border-color: var(--imwo-primary-mid);
  box-shadow: 0 0 0 3.5px rgba(44,95,154,.13);
  background: #fafcff;
}
.imwo-input.has-error,
.imwo-select.has-error,
.imwo-textarea.has-error {
  border-color: var(--imwo-error);
  box-shadow: 0 0 0 3px rgba(220,53,69,.10);
}

.imwo-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}
.imwo-textarea { resize: vertical; min-height: 100px; }

.imwo-error-msg {
  display: block;
  color: var(--imwo-error);
  font-size: 12px;
  margin-top: 5px;
  min-height: 18px;
}

.imwo-input-suffix-wrap { position: relative; display: flex; align-items: center; }
.imwo-input-suffix-wrap .imwo-input { padding-right: 44px; }
.imwo-input-suffix {
  position: absolute;
  right: 13px;
  color: var(--imwo-muted);
  font-size: 13px;
  pointer-events: none;
  font-weight: 500;
}

/* ══════════════════════════ PROPERTY GRID ═════════════════════════ */
.imwo-property-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}

.imwo-property-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 20px 12px 16px;
  border: 1.5px solid var(--imwo-border);
  border-radius: var(--imwo-radius);
  cursor: pointer;
  transition: all var(--imwo-trans);
  text-align: center;
  background: #fff;
  box-shadow: var(--imwo-shadow-card);
  position: relative;
  overflow: hidden;
}
.imwo-property-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--imwo-accent-light);
  opacity: 0;
  transition: opacity var(--imwo-trans);
}
.imwo-property-card:hover {
  border-color: var(--imwo-primary-mid);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26,58,107,.14);
}
.imwo-property-card:hover::before { opacity: 1; }

.imwo-property-card input[type="radio"] { display: none; }

.imwo-property-card:has(input:checked) {
  border-color: var(--imwo-primary);
  box-shadow: 0 6px 20px rgba(26,58,107,.18);
}
.imwo-property-card:has(input:checked)::before { opacity: 1; }
.imwo-property-card:has(input:checked)::after {
  content: '';
  position: absolute;
  top: 9px; right: 9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--imwo-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4,7.5 8,3' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.imwo-property-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.imwo-property-icon svg {
  width: 100%;
  height: 100%;
}

.imwo-property-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--imwo-text);
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════ UPLOAD ════════════════════════════════ */
.imwo-upload-area {
  border: 2px dashed var(--imwo-border);
  border-radius: var(--imwo-radius);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--imwo-trans);
  position: relative;
  background: var(--imwo-bg);
}
.imwo-upload-area:hover,
.imwo-upload-area.drag-over {
  border-color: var(--imwo-primary-mid);
  background: var(--imwo-accent-light);
}

.imwo-file-input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.imwo-upload-icon {
  display: block;
  margin: 0 auto 12px;
}
.imwo-upload-placeholder p {
  color: var(--imwo-muted);
  margin: 4px 0;
  font-size: 14px;
}
.imwo-upload-placeholder p strong { color: var(--imwo-primary-mid); }
.imwo-upload-hint { font-size: 12px !important; color: #aab !important; }

.imwo-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding-top: 16px;
}
.imwo-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--imwo-radius-xs);
  overflow: hidden;
  border: 1.5px solid var(--imwo-border);
}
.imwo-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.imwo-preview-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: rgba(220,53,69,.88);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 0;
  line-height: 1;
}

/* ══════════════════════════ SUMMARY ═══════════════════════════════ */
.imwo-summary {
  background: var(--imwo-bg);
  border: 1.5px solid var(--imwo-border);
  border-radius: var(--imwo-radius-sm);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.imwo-summary h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--imwo-primary);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.imwo-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.imwo-summary-item { font-size: 13px; }
.imwo-summary-item strong {
  display: block;
  color: var(--imwo-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.imwo-summary-item span { color: var(--imwo-text); font-weight: 500; }

/* ══════════════════════════ PRIVACY CHECKBOX ══════════════════════ */
.imwo-privacy-group { margin-top: 8px; }
.imwo-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.imwo-checkbox-label input[type="checkbox"] { display: none; }
.imwo-checkbox-custom {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--imwo-border);
  border-radius: 5px;
  margin-top: 1px;
  background: #fff;
  transition: all var(--imwo-trans);
  position: relative;
}
.imwo-checkbox-label input:checked + .imwo-checkbox-custom {
  background: var(--imwo-primary);
  border-color: var(--imwo-primary);
}
.imwo-checkbox-label input:checked + .imwo-checkbox-custom::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 10px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.imwo-checkbox-text { font-size: 14px; color: var(--imwo-text); line-height: 1.6; }
.imwo-checkbox-text a { color: var(--imwo-primary-mid); }

/* ══════════════════════════ NAVIGATION ════════════════════════════ */
.imwo-form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1.5px solid #edf2f7;
}

.imwo-btn {
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--imwo-radius-sm);
  cursor: pointer;
  transition: all var(--imwo-trans);
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  letter-spacing: .1px;
}
.imwo-btn-primary {
  background: var(--imwo-primary);
  color: #fff;
  border-color: var(--imwo-primary);
}
.imwo-btn-primary:hover {
  background: #142f5a;
  border-color: #142f5a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26,58,107,.28);
}
.imwo-btn-secondary {
  background: #fff;
  color: var(--imwo-muted);
  border-color: var(--imwo-border);
}
.imwo-btn-secondary:hover {
  background: var(--imwo-bg);
  color: var(--imwo-text);
  border-color: #b0c4de;
}
.imwo-btn-submit {
  background: linear-gradient(135deg, var(--imwo-success), #20a63a);
  border-color: transparent;
  padding: 13px 32px;
  font-size: 15px;
}
.imwo-btn-submit:hover {
  background: linear-gradient(135deg, #218838, #18882e);
  box-shadow: 0 6px 20px rgba(40,167,69,.30);
  transform: translateY(-1px);
}
.imwo-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ══════════════════════════ SPINNER ════════════════════════════════ */
.imwo-spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: imwo-spin .7s linear infinite;
}
@keyframes imwo-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════ ALERTS ════════════════════════════════ */
.imwo-alert {
  padding: 13px 17px;
  border-radius: var(--imwo-radius-xs);
  font-size: 14px;
  margin-top: 16px;
}
.imwo-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* ══════════════════════════ SUCCESS PANEL ══════════════════════════ */
.imwo-success-panel {
  padding: 64px 36px;
  text-align: center;
}
.imwo-success-icon {
  margin-bottom: 20px;
  animation: imwo-bounce .5s ease;
}
@keyframes imwo-bounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}
.imwo-success-panel h2 {
  font-size: 26px;
  color: var(--imwo-success);
  margin: 0 0 12px;
  font-weight: 700;
}
.imwo-success-panel p {
  color: var(--imwo-muted);
  font-size: 16px;
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ══════════════════════════ RESPONSIVE ════════════════════════════ */
@media (max-width: 640px) {
  .imwo-form-wrapper { border-radius: 0; box-shadow: none; }
  .imwo-progress-bar { padding: 20px 16px 0; }
  .imwo-step-label   { display: none; }
  .imwo-form         { padding: 0 16px 24px; }
  .imwo-field-row    { flex-direction: column; gap: 0; }
  .imwo-field-row .imwo-field-small { flex: 1; }
  .imwo-property-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .imwo-preview-grid  { grid-template-columns: repeat(3, 1fr); }
  .imwo-summary-grid  { grid-template-columns: 1fr; }
  .imwo-btn           { padding: 11px 18px; font-size: 14px; }
}
@media (max-width: 400px) {
  .imwo-step-dot      { width: 28px; height: 28px; font-size: 11px; }
  .imwo-step-connector { margin: 0 2px; margin-bottom: 20px; }
}

.imwo-no-progress .imwo-progress-bar { display: none; }

/* ══════════════════════════ SLIDER ════════════════════════════════ */
.imwo-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.imwo-slider-top {
  position: relative;
  display: flex;
  align-items: center;
}

.imwo-slider-top .imwo-input {
  padding-right: 44px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--imwo-primary);
}

.imwo-slider-top .imwo-input-suffix {
  position: absolute;
  right: 13px;
  pointer-events: none;
  color: var(--imwo-muted);
  font-size: 13px;
  font-weight: 500;
}

/* Range track & thumb – cross-browser */
.imwo-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--imwo-primary) 0%,
    var(--imwo-primary) var(--range-pct, 0%),
    var(--imwo-border)  var(--range-pct, 0%),
    var(--imwo-border)  100%
  );
  outline: none;
  cursor: pointer;
  transition: background var(--imwo-trans);
}

.imwo-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--imwo-primary);
  box-shadow: 0 2px 8px rgba(26,58,107,.20);
  cursor: grab;
  transition: border-color var(--imwo-trans), box-shadow var(--imwo-trans), transform .1s;
}
.imwo-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.imwo-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--imwo-primary);
  box-shadow: 0 2px 8px rgba(26,58,107,.20);
  cursor: grab;
}

.imwo-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--imwo-muted);
  margin-top: -2px;
}

/* ══════════════════════════ SECTION LABEL ══════════════════════════ */
.imwo-field-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--imwo-primary);
  padding: 6px 0 10px;
  margin-top: 8px;
  border-bottom: 1.5px solid var(--imwo-accent-light);
  margin-bottom: 16px;
}

/* ══════════════════════════ TOGGLE BUTTONS (Ja/Nein etc.) ══════════ */
.imwo-toggle-group {
  display: flex;
  gap: 8px;
}
.imwo-toggle-group--three { gap: 8px; }

.imwo-toggle-btn {
  flex: 1;
  cursor: pointer;
}
.imwo-toggle-btn input[type="radio"] { display: none; }

.imwo-toggle-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1.5px solid var(--imwo-border);
  border-radius: var(--imwo-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--imwo-muted);
  background: #fff;
  transition: all var(--imwo-trans);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.imwo-toggle-btn:hover span {
  border-color: var(--imwo-primary-mid);
  color: var(--imwo-primary);
  background: var(--imwo-accent-light);
}

.imwo-toggle-btn input:checked + span {
  background: var(--imwo-primary);
  border-color: var(--imwo-primary);
  color: #fff;
  font-weight: 600;
}

/* ══════════════════════════ CHECKBOX PILLS ════════════════════════ */
.imwo-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.imwo-checkbox-pill {
  cursor: pointer;
}
.imwo-checkbox-pill input[type="checkbox"] { display: none; }

.imwo-checkbox-pill span {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1.5px solid var(--imwo-border);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 500;
  color: var(--imwo-muted);
  background: #fff;
  transition: all var(--imwo-trans);
  cursor: pointer;
  user-select: none;
}

.imwo-checkbox-pill:hover span {
  border-color: var(--imwo-primary-mid);
  color: var(--imwo-primary);
  background: var(--imwo-accent-light);
}

.imwo-checkbox-pill input:checked + span {
  background: var(--imwo-primary);
  border-color: var(--imwo-primary);
  color: #fff;
  font-weight: 600;
}

/* ══════════════════════════ RENTAL FIELD (conditional) ════════════ */
.imwo-rental-field {
  animation: imwo-fade-in .25s ease;
}

/* ══════════════════════════ 6er PROPERTY GRID ══════════════════════ */
.imwo-property-grid--6 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) {
  .imwo-property-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════ HAUS-TYP KARTEN ════════════════════════ */
.imwo-house-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}

.imwo-house-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  border: 1.5px solid var(--imwo-border);
  border-radius: var(--imwo-radius-sm);
  cursor: pointer;
  transition: all var(--imwo-trans);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.imwo-house-type-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--imwo-accent-light);
  opacity: 0;
  transition: opacity var(--imwo-trans);
}
.imwo-house-type-card:hover {
  border-color: var(--imwo-primary-mid);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(26,58,107,.12);
}
.imwo-house-type-card:hover::before { opacity: 1; }

.imwo-house-type-card input[type="radio"] { display: none; }

.imwo-house-type-card:has(input:checked) {
  border-color: var(--imwo-primary);
  box-shadow: 0 4px 16px rgba(26,58,107,.18);
}
.imwo-house-type-card:has(input:checked)::before { opacity: 1; }
.imwo-house-type-card:has(input:checked)::after {
  content: '';
  position: absolute;
  top: 7px; right: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--imwo-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpolyline points='1.5,4 3.2,6 6.5,2' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.imwo-house-type-icon {
  width: 60px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.imwo-house-type-icon svg { width: 100%; height: 100%; }

.imwo-house-type-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--imwo-text);
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .imwo-house-type-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════ HAUSTYP-GRID (8 Karten) ════════════════ */
.imwo-haustyp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.imwo-haustyp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border: 1.5px solid var(--imwo-border);
  border-radius: var(--imwo-radius-sm);
  cursor: pointer;
  transition: all var(--imwo-trans);
  background: #fff;
  position: relative;
  text-align: center;
}
.imwo-haustyp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--imwo-accent-light);
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--imwo-trans);
}
.imwo-haustyp-card:hover {
  border-color: var(--imwo-primary-mid);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26,58,107,.12);
}
.imwo-haustyp-card:hover::before { opacity: 1; }
.imwo-haustyp-card input[type="radio"] { display: none; }
.imwo-haustyp-card:has(input:checked) {
  border-color: var(--imwo-primary);
  box-shadow: 0 4px 14px rgba(26,58,107,.18);
}
.imwo-haustyp-card:has(input:checked)::before { opacity: 1; }
.imwo-haustyp-card:has(input:checked)::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--imwo-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpolyline points='1.5,4 3.2,6 6.5,2' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.imwo-haustyp-icon {
  width: 48px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.imwo-haustyp-icon svg { width: 100%; height: 100%; }

.imwo-haustyp-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.imwo-haustyp-label strong {
  font-size: 11px;
  font-weight: 700;
  color: var(--imwo-primary);
  line-height: 1.2;
}
.imwo-haustyp-label em {
  font-size: 10px;
  font-style: normal;
  color: var(--imwo-text);
  line-height: 1.2;
}
.imwo-haustyp-label span {
  font-size: 10px;
  color: var(--imwo-muted);
  line-height: 1.2;
}

@media (max-width: 640px) {
  .imwo-haustyp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════ STELLPLATZ-GRID ════════════════════════ */
.imwo-parking-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.imwo-parking-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.imwo-parking-label { margin-bottom: 0; }
.imwo-parking-count { display: flex; align-items: center; gap: 6px; }
.imwo-input-tiny {
  width: 72px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
}

/* ══════════════════════════ CONDITIONAL INPUT ══════════════════════ */
.imwo-conditional-input { animation: imwo-fade-in .2s ease; }

/* ══════════════════════════════════════════════════════════
   MOBILE-OPTIMIERUNG – vollständige Überarbeitung
   Ziel: Touch-freundlich, lesbar, professionell auf 375px+
   ══════════════════════════════════════════════════════════ */

/* Basis: größere Touch-Targets überall */
@media (max-width: 768px) {

  /* Wrapper: kein Schatten, kein Radius auf kleinen Screens */
  .imwo-form-wrapper {
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }

  /* Progress: kompakter */
  .imwo-progress-bar { padding: 16px 16px 0; }
  .imwo-step-dot     { width: 30px; height: 30px; font-size: 12px; }
  .imwo-step-label   { display: none; }          /* Labels weg – Nummern bleiben */
  .imwo-step-connector { margin-bottom: 16px; }

  /* Formular-Padding */
  .imwo-form         { padding: 0 16px 24px; }
  .imwo-step-title   { font-size: 19px !important; }
  .imwo-step-desc    { font-size: 13px; }
  .imwo-step-header  { margin: 20px 0 18px; }

  /* Alle Rows werden zu Spalten */
  .imwo-field-row            { flex-direction: column; gap: 0; }
  .imwo-field-row .imwo-field-group,
  .imwo-field-row .imwo-field-grow,
  .imwo-field-row .imwo-field-small { flex: 1; }

  /* Inputs: größere Tipp-Fläche */
  .imwo-input,
  .imwo-select,
  .imwo-textarea {
    font-size: 16px;   /* verhindert iOS-Zoom */
    padding: 13px 15px;
    border-radius: 10px;
  }
  .imwo-select { padding-right: 40px; }

  /* Labels */
  .imwo-label { font-size: 14px; margin-bottom: 8px; }
  .imwo-field-group { margin-bottom: 14px; }

  /* Toggle-Buttons: Full-Width in Zweier-Gruppen */
  .imwo-toggle-group { gap: 8px; }
  .imwo-toggle-btn span {
    padding: 12px 10px;
    font-size: 14px;
    border-radius: 10px;
  }

  /* Drei-Toggle: Wrap erlauben */
  .imwo-toggle-group--three { flex-wrap: wrap; }
  .imwo-toggle-group--three .imwo-toggle-btn { flex: 1 0 calc(33% - 8px); min-width: 90px; }

  /* Checkbox-Pills: größer */
  .imwo-checkbox-pill span {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 99px;
  }

  /* Property-Grid: 2 Spalten */
  .imwo-property-grid,
  .imwo-property-grid--6 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .imwo-property-icon    { width: 58px; height: 58px; }
  .imwo-property-label   { font-size: 12px; }
  .imwo-property-card    { padding: 14px 8px 12px; }

  /* Haustyp-Grid: 2×4 */
  .imwo-house-type-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .imwo-house-type-icon  { width: 52px; height: 38px; }

  /* Haustyp-Karten (8er Grid) */
  .imwo-haustyp-grid     { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .imwo-haustyp-icon     { width: 44px; height: 48px; }
  .imwo-haustyp-label strong { font-size: 11px; }
  .imwo-haustyp-label em,
  .imwo-haustyp-label span   { font-size: 10px; }

  /* Section-Labels */
  .imwo-field-section-label { font-size: 11px; padding: 4px 0 8px; margin-bottom: 14px; }

  /* Slider: größerer Thumb */
  .imwo-range::-webkit-slider-thumb { width: 26px; height: 26px; }
  .imwo-range::-moz-range-thumb     { width: 26px; height: 26px; }
  .imwo-range { height: 8px; }
  .imwo-range-labels { font-size: 11px; margin-top: 2px; }
  .imwo-slider-top .imwo-input { font-size: 16px; }

  /* Upload-Area: kompakter */
  .imwo-upload-area { padding: 24px 16px; }
  .imwo-preview-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  /* Zusammenfassung: 1 Spalte */
  .imwo-summary-grid { grid-template-columns: 1fr; gap: 8px; }
  .imwo-summary      { padding: 16px; }

  /* Navigation */
  .imwo-form-nav  { gap: 10px; padding-top: 20px; margin-top: 24px; }
  .imwo-btn       { padding: 13px 20px; font-size: 14px; }
  .imwo-btn-submit{ padding: 14px 24px; font-size: 15px; }

  /* Stellplatz-Anzahl */
  .imwo-parking-item { flex-wrap: wrap; gap: 8px; }
  .imwo-input-tiny   { width: 80px !important; }

  /* Erfolgs-Panel */
  .imwo-success-panel { padding: 40px 20px; }
  .imwo-success-panel h2 { font-size: 22px; }
  .imwo-success-panel p  { font-size: 15px; }
}

/* Sehr kleine Screens (< 390px / iPhone SE) */
@media (max-width: 390px) {
  .imwo-progress-bar { padding: 12px 12px 0; }
  .imwo-step-dot     { width: 26px; height: 26px; font-size: 11px; }
  .imwo-step-connector { margin: 0 2px; margin-bottom: 14px; }
  .imwo-form         { padding: 0 12px 20px; }
  .imwo-step-title   { font-size: 17px !important; }
  .imwo-property-grid,
  .imwo-property-grid--6,
  .imwo-house-type-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .imwo-haustyp-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .imwo-toggle-group--three .imwo-toggle-btn { min-width: 80px; }
}

/* Tablet (769–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .imwo-form-wrapper { max-width: 100%; }
  .imwo-property-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .imwo-haustyp-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════ DIVIDER ════════════════════════════════ */
.imwo-divider {
  border: none;
  border-top: 1.5px solid var(--imwo-border);
  margin: 4px 0 20px;
}

/* ══════════════════════════ DEAKTIVIERTE PROPERTY-KARTE ════════════ */
.imwo-property-card--disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.imwo-property-card--disabled:hover {
  transform: none;
  box-shadow: var(--imwo-shadow-card);
  border-color: var(--imwo-border);
}

.imwo-property-badge {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--imwo-muted);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  z-index: 2;
}
.imwo-property-card--disabled .imwo-property-label {
  margin-bottom: 14px; /* Platz für Badge */
}