/* ═══════════════════════════════════════════════════════════════════════════
   Immobilien Manager Pro – Wizard CSS  v2.0
   Clean · Light · Material floating labels · Icon-driven · No accent colors
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────────────────────── */
.im-scope .im-wizard-page {
    --wz-bg:           #f8f9fb;
    --wz-surface:      #ffffff;
    --wz-surface-2:    #f3f4f6;
    --wz-border:       #e5e7eb;
    --wz-border-focus: #374151;
    --wz-text:         #111827;
    --wz-text-2:       #6b7280;
    --wz-text-3:       #9ca3af;
    --wz-active:       #111827;
    --wz-active-bg:    #f1f2f4;
    --wz-done:         #374151;
    --wz-error:        #dc2626;
    --wz-success:      #16a34a;
    --wz-radius:       10px;
    --wz-shadow-sm:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --wz-shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --wz-shadow-lg:    0 12px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.04);
    --wz-font-body:    system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wz-font-head:    system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wz-transition:   0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ── Page shell ───────────────────────────────────────────────────────────── */
.im-scope .im-wizard-page {
    min-height: 100vh !important;
    background: var(--wz-bg) !important;
    padding-bottom: 80px !important;
    font-family: var(--wz-font-body) !important;
    color: var(--wz-text) !important;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.im-scope .im-wizard-hero {
    background: var(--wz-surface) !important;
    border-bottom: 1px solid var(--wz-border) !important;
    padding: 48px 24px 40px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}
.im-scope .im-wizard-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    opacity: 0.35 !important;
    pointer-events: none !important;
}
.im-scope .im-wizard-hero-glow { display: none !important; }
.im-scope .im-wizard-hero-title {
    font-family: var(--wz-font-head) !important;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: var(--wz-text) !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
    position: relative !important;
}
.im-scope .im-wizard-hero-sub {
    font-size: 0.95rem !important;
    color: var(--wz-text-2) !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
    position: relative !important;
}

/* ── Container ────────────────────────────────────────────────────────────── */
.im-scope .im-wizard-container {
    max-width: 740px !important;
    margin: 0 auto !important;
    padding: 0 clamp(16px,4vw,28px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP PROGRESS
   ═══════════════════════════════════════════════════════════════════════════ */
.im-scope .im-wizard-progress-wrap { padding: 28px 0 0 !important; }
.im-scope .im-wizard-steps-bar {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
}
.im-scope .im-wizard-steps-bar::-webkit-scrollbar { display: none !important; }

.im-scope .im-wz-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 1 !important;
}
.im-scope .im-wz-step-bubble {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--wz-surface) !important;
    border: 1.5px solid var(--wz-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--wz-transition) !important;
    box-shadow: var(--wz-shadow-sm) !important;
    color: var(--wz-text-3) !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    position: relative !important;
}

/* Tooltip on hover */
.im-scope .im-wz-step-bubble[data-tip]::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    bottom: calc(100% + 9px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    background: var(--wz-text) !important;
    color: #fff !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateX(-50%) translateY(4px) !important;
    transition: opacity 0.15s, transform 0.15s !important;
    z-index: 100 !important;
}
.im-scope .im-wz-step-bubble[data-tip]::before {
    content: '' !important;
    position: absolute !important;
    bottom: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 5px solid transparent !important;
    border-top-color: var(--wz-text) !important;
    opacity: 0 !important;
    transition: opacity 0.15s !important;
    pointer-events: none !important;
    z-index: 100 !important;
}
.im-scope .im-wz-step-bubble[data-tip]:hover::after,
.im-scope .im-wz-step-bubble[data-tip]:hover::before {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Hover states: done steps brighten, future steps get border hint */
.im-scope .im-wz-step.done .im-wz-step-bubble:hover {
    background: #374151 !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 0 5px rgba(17,24,39,0.12), var(--wz-shadow-sm) !important;
}
.im-scope .im-wz-step:not(.active):not(.done) .im-wz-step-bubble:hover {
    border-color: #9ca3af !important;
    color: var(--wz-text-2) !important;
    box-shadow: var(--wz-shadow-md) !important;
}
.im-scope .im-wz-step-icon  { display: flex !important; }
.im-scope .im-wz-step-num   { display: none !important; }
.im-scope .im-wz-step-label {
    font-size: 0.63rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--wz-text-3) !important;
    white-space: nowrap !important;
    transition: color var(--wz-transition) !important;
}
/* Active */
.im-scope .im-wz-step.active .im-wz-step-bubble {
    background: var(--wz-active) !important;
    border-color: var(--wz-active) !important;
    color: #fff !important;
    box-shadow: 0 0 0 5px rgba(17,24,39,0.1), var(--wz-shadow-sm) !important;
    transform: scale(1.08) !important;
}
.im-scope .im-wz-step.active .im-wz-step-label { color: var(--wz-active) !important; font-weight: 700 !important; }
/* Done */
.im-scope .im-wz-step.done .im-wz-step-bubble {
    background: var(--wz-done) !important;
    border-color: var(--wz-done) !important;
    color: #fff !important;
}
.im-scope .im-wz-step.done .im-wz-step-icon { display: none !important; }
.im-scope .im-wz-step.done .im-wz-step-num {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
}
.im-scope .im-wz-step.done .im-wz-step-num::before { content: '✓' !important; font-size: 0.9rem !important; font-weight: 700 !important; }
.im-scope .im-wz-step.done .im-wz-step-label { color: var(--wz-done) !important; }

/* Connectors */
.im-scope .im-wz-connector {
    flex: 1 !important;
    height: 1.5px !important;
    background: var(--wz-border) !important;
    margin-top: -28px !important;
    min-width: 16px !important;
    max-width: 56px !important;
    transition: background 0.3s !important;
}
.im-scope .im-wz-connector.done { background: var(--wz-done) !important; }

/* Progress bar */
.im-scope .im-wizard-progress-bar {
    height: 2px !important;
    background: var(--wz-border) !important;
    border-radius: 2px !important;
    margin: 18px 0 0 !important;
    overflow: hidden !important;
}
.im-scope .im-wizard-progress-fill {
    height: 100% !important;
    background: var(--wz-active) !important;
    border-radius: 2px !important;
    width: 0% !important;
    transition: width 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}

@media (max-width: 560px) {
    .im-scope .im-wz-step-label { display: none !important; }
    .im-scope .im-wz-step-bubble { width: 34px !important; height: 34px !important; font-size: 0.85rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.im-scope .im-wizard-form-wrap {
    margin-top: 24px !important;
    background: var(--wz-surface) !important;
    border: 1px solid var(--wz-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--wz-shadow-lg) !important;
    overflow: hidden !important;
}
.im-scope .im-wizard-form-wrap::before { display: none !important; }

.im-scope .im-wizard-result {
    padding: 12px 20px !important;
    background: #fef2f2 !important;
    border-bottom: 1px solid #fecaca !important;
    color: var(--wz-error) !important;
    font-size: 0.86rem !important;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.im-scope .im-wz-panel { display: none !important; padding: 32px 32px 24px !important; }
.im-scope .im-wz-panel.active { display: block !important; }

.im-scope .im-wz-panel-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--wz-border) !important;
}
.im-scope .im-wz-panel-icon {
    width: 46px !important;
    height: 46px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    background: var(--wz-surface-2) !important;
    border: 1px solid var(--wz-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    color: var(--wz-text) !important;
}
.im-scope .im-wz-panel-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--wz-text) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 2px !important;
}
.im-scope .im-wz-panel-sub { font-size: 0.83rem !important; color: var(--wz-text-2) !important; line-height: 1.5 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MATERIAL FLOATING LABEL INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */
.im-scope .im-wz-field-group { margin-bottom: 20px !important; position: relative !important; }

/* Float wrapper */
.im-scope .im-wz-float-wrap { position: relative !important; }

/* Base input styles */
.im-scope .im-wz-input,
.im-scope .im-wz-select,
.im-scope .im-wz-textarea {
    width: 100% !important;
    padding: 22px 14px 8px !important;
    background: var(--wz-surface) !important;
    border: 1.5px solid var(--wz-border) !important;
    border-radius: var(--wz-radius) !important;
    color: var(--wz-text) !important;
    font-size: 0.94rem !important;
    font-family: var(--wz-font-body) !important;
    outline: none !important;
    transition: border-color var(--wz-transition), box-shadow var(--wz-transition) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
}

/* Floating label */
.im-scope .im-wz-float-label {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: var(--wz-text-3) !important;
    pointer-events: none !important;
    transition:
        top 0.18s cubic-bezier(0.4,0,0.2,1),
        font-size 0.18s cubic-bezier(0.4,0,0.2,1),
        color 0.18s cubic-bezier(0.4,0,0.2,1),
        transform 0.18s cubic-bezier(0.4,0,0.2,1) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 28px) !important;
    background: transparent !important;
}

/* Textarea: label at top */
.im-scope .im-wz-textarea-wrap .im-wz-float-label {
    top: 18px !important;
    transform: none !important;
}

/* Floated state */
.im-scope .im-wz-input:focus ~ .im-wz-float-label,
.im-scope .im-wz-input:not(:placeholder-shown) ~ .im-wz-float-label,
.im-scope .im-wz-textarea:focus ~ .im-wz-float-label,
.im-scope .im-wz-textarea:not(:placeholder-shown) ~ .im-wz-float-label,
.im-scope .im-wz-float-wrap.im-floated .im-wz-float-label {
    top: 7px !important;
    transform: none !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--wz-text-2) !important;
}
.im-scope .im-wz-input:focus ~ .im-wz-float-label,
.im-scope .im-wz-textarea:focus ~ .im-wz-float-label {
    color: var(--wz-border-focus) !important;
}

/* Select floated via JS class */
.im-scope .im-wz-select-wrap.im-has-value .im-wz-float-label {
    top: 7px !important;
    transform: none !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: var(--wz-text-2) !important;
}
.im-scope .im-wz-select:focus ~ .im-wz-float-label {
    top: 7px !important;
    transform: none !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: var(--wz-border-focus) !important;
}

/* Focus ring */
.im-scope .im-wz-input:focus,
.im-scope .im-wz-select:focus,
.im-scope .im-wz-textarea:focus {
    border-color: var(--wz-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(17,24,39,0.07) !important;
}
.im-scope .im-wz-input:hover:not(:focus),
.im-scope .im-wz-select:hover:not(:focus),
.im-scope .im-wz-textarea:hover:not(:focus) {
    border-color: #9ca3af !important;
}

/* Placeholder invisible (floating label trick) */
.im-scope .im-wz-input::placeholder,
.im-scope .im-wz-textarea::placeholder { color: transparent !important; }
.im-scope .im-wz-input:focus::placeholder,
.im-scope .im-wz-textarea:focus::placeholder {
    color: var(--wz-text-3) !important;
    transition: color 0.1s 0.1s !important;
}

/* Error */
.im-scope .im-wz-input.im-wz-error,
.im-scope .im-wz-select.im-wz-error,
.im-scope .im-wz-textarea.im-wz-error {
    border-color: var(--wz-error) !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.09) !important;
}

/* Input prefix/suffix */
.im-scope .im-wz-input-icon-wrap { position: relative !important; }
.im-scope .im-input-prefix {
    position: absolute !important;
    left: 13px !important;
    bottom: 9px !important;
    color: var(--wz-text-2) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    pointer-events: none !important;
}
.im-scope .im-input-suffix {
    position: absolute !important;
    right: 13px !important;
    bottom: 9px !important;
    color: var(--wz-text-2) !important;
    font-size: 0.8rem !important;
    pointer-events: none !important;
}
.im-scope .im-wz-has-prefix { padding-left: 30px !important; }
.im-scope .im-wz-has-suffix { padding-right: 46px !important; }

/* Hint */
.im-scope .im-wz-hint {
    font-size: 0.72rem !important;
    color: var(--wz-text-3) !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
    padding-left: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.im-scope .im-required { color: var(--wz-error) !important; margin-left: 2px !important; }

/* Select */
.im-scope .im-wz-select-wrap { position: relative !important; }
.im-scope .im-wz-select-wrap::after {
    content: '' !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important; height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid var(--wz-text-3) !important;
    pointer-events: none !important;
}
.im-scope .im-wz-select { padding-right: 38px !important; cursor: pointer !important; }
.im-scope .im-wz-select option { background: #fff !important; color: var(--wz-text) !important; }

/* Textarea */
.im-scope .im-wz-textarea { resize: vertical !important; min-height: 110px !important; padding-top: 26px !important; }

/* No spinners */
.im-scope .im-wz-input[type="number"] { -moz-appearance: textfield !important; appearance: textfield !important; }
.im-scope .im-wz-input[type="number"]::-webkit-outer-spin-button,
.im-scope .im-wz-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; }

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.im-scope .im-wz-row-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.im-scope .im-wz-row-3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 14px !important; }
.im-scope .im-wz-col-span-2 { grid-column: span 2 !important; }
@media (max-width: 600px) {
    .im-scope .im-wz-row-2 { grid-template-columns: 1fr !important; }
    .im-scope .im-wz-row-3 { grid-template-columns: 1fr 1fr !important; }
    .im-scope .im-wz-col-span-2 { grid-column: span 1 !important; }
}

/* Section divider */
.im-scope .im-wz-section-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--wz-text-3) !important;
    margin: 24px 0 14px !important;
}
.im-scope .im-wz-section-label::before,
.im-scope .im-wz-section-label::after { content: '' !important; flex: 1 !important; height: 1px !important; background: var(--wz-border) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   RADIO CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.im-scope .im-wz-radio-cards { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 10px !important; }
@media (max-width: 480px) { .im-scope .im-wz-radio-cards { grid-template-columns: 1fr !important; } }
.im-scope .im-radio-card {
    position: relative !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 20px 12px 16px !important;
    background: var(--wz-surface) !important;
    border: 1.5px solid var(--wz-border) !important;
    border-radius: 12px !important;
    transition: all var(--wz-transition) !important;
    text-align: center !important;
}
.im-scope .im-radio-card input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
.im-scope .im-radio-card-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: var(--wz-surface-2) !important;
    border: 1px solid var(--wz-border) !important;
    color: var(--wz-text-2) !important;
    font-size: 1.3rem !important;
    transition: all var(--wz-transition) !important;
}
.im-scope .im-radio-card-label { font-size: 0.83rem !important; font-weight: 500 !important; color: var(--wz-text-2) !important; transition: color var(--wz-transition) !important; }
.im-scope .im-radio-card:hover { border-color: #9ca3af !important; box-shadow: var(--wz-shadow-sm) !important; }
.im-scope .im-radio-card.active,
.im-scope .im-radio-card:has(input:checked) {
    background: var(--wz-text) !important;
    border-color: var(--wz-text) !important;
    box-shadow: var(--wz-shadow-md) !important;
}
.im-scope .im-radio-card.active .im-radio-card-icon,
.im-scope .im-radio-card:has(input:checked) .im-radio-card-icon {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}
.im-scope .im-radio-card.active .im-radio-card-label,
.im-scope .im-radio-card:has(input:checked) .im-radio-card-label { color: #fff !important; font-weight: 600 !important; }

/* ── Radio Pills ──────────────────────────────────────────────────────────── */
.im-scope .im-wz-radio-pills { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.im-scope .im-pill { position: relative !important; cursor: pointer !important; }
.im-scope .im-pill input[type="radio"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
.im-scope .im-pill > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    background: var(--wz-surface) !important;
    border: 1.5px solid var(--wz-border) !important;
    color: var(--wz-text-2) !important;
    transition: all var(--wz-transition) !important;
    cursor: pointer !important;
}
.im-scope .im-pill > span:hover { border-color: #9ca3af !important; color: var(--wz-text) !important; }
.im-scope .im-pill.active > span,
.im-scope .im-pill:has(input:checked) > span {
    background: var(--wz-text) !important;
    border-color: var(--wz-text) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ── Price Toggle ─────────────────────────────────────────────────────────── */
.im-scope .im-wz-price-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: var(--wz-surface-2) !important;
    border: 1px solid var(--wz-border) !important;
    border-radius: var(--wz-radius) !important;
    margin-bottom: 20px !important;
}
.im-scope .im-toggle-switch { position: relative !important; display: inline-block !important; width: 42px !important; height: 24px !important; flex-shrink: 0 !important; cursor: pointer !important; }
.im-scope .im-toggle-switch input { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
.im-scope .im-toggle-slider { position: absolute !important; inset: 0 !important; background: var(--wz-border) !important; border-radius: 24px !important; transition: background 0.2s !important; }
.im-scope .im-toggle-slider::before {
    content: '' !important;
    position: absolute !important;
    width: 18px !important; height: 18px !important;
    left: 3px !important; top: 3px !important;
    background: #fff !important; border-radius: 50% !important;
    transition: transform 0.2s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.im-scope .im-toggle-switch input:checked + .im-toggle-slider { background: var(--wz-active) !important; }
.im-scope .im-toggle-switch input:checked + .im-toggle-slider::before { transform: translateX(18px) !important; }
.im-scope .im-toggle-label { font-size: 0.88rem !important; font-weight: 500 !important; color: var(--wz-text) !important; }

/* ── Price Grid ───────────────────────────────────────────────────────────── */
.im-scope .im-wz-price-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
@media (max-width: 560px) { .im-scope .im-wz-price-grid { grid-template-columns: 1fr !important; } }

/* ── Room Pickers ─────────────────────────────────────────────────────────── */
.im-scope .im-wz-room-pickers { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 24px !important; }
@media (max-width: 480px) { .im-scope .im-wz-room-pickers { grid-template-columns: 1fr !important; } }
.im-scope .im-room-picker {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: var(--wz-surface) !important;
    border: 1px solid var(--wz-border) !important;
    border-radius: var(--wz-radius) !important;
    transition: border-color var(--wz-transition) !important;
}
.im-scope .im-room-picker:hover { border-color: #9ca3af !important; }
.im-scope .im-room-icon {
    width: 32px !important; height: 32px !important;
    flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: var(--wz-text-2) !important;
    background: var(--wz-surface-2) !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
}
.im-scope .im-room-label { flex: 1 !important; font-size: 0.84rem !important; color: var(--wz-text) !important; font-weight: 500 !important; }

/* Counter */
.im-scope .im-counter { display: flex !important; align-items: center !important; background: var(--wz-surface-2) !important; border: 1px solid var(--wz-border) !important; border-radius: 8px !important; overflow: hidden !important; }
.im-scope .im-counter-btn {
    width: 30px !important; height: 30px !important; flex-shrink: 0 !important;
    background: none !important; border: none !important;
    color: var(--wz-text-2) !important; cursor: pointer !important;
    font-size: 1rem !important; font-weight: 600 !important; line-height: 1 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background var(--wz-transition), color var(--wz-transition) !important;
}
.im-scope .im-counter-btn:hover { background: var(--wz-text) !important; color: #fff !important; }
.im-scope .im-counter-input {
    width: 40px !important; text-align: center !important;
    background: none !important; border: none !important;
    color: var(--wz-text) !important; font-size: 0.9rem !important; font-weight: 700 !important;
    font-family: var(--wz-font-body) !important; outline: none !important;
    -moz-appearance: textfield !important; appearance: textfield !important; padding: 0 !important;
}
.im-scope .im-counter-input::-webkit-outer-spin-button,
.im-scope .im-counter-input::-webkit-inner-spin-button { -webkit-appearance: none !important; }

/* ── Feature Chips ────────────────────────────────────────────────────────── */
.im-scope .im-wz-feature-group { margin-bottom: 20px !important; }
.im-scope .im-wz-feature-group-title {
    font-size: 0.68rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.1em !important;
    color: var(--wz-text-3) !important; margin-bottom: 10px !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
}
.im-scope .im-wz-feature-group-title::after { content: '' !important; flex: 1 !important; height: 1px !important; background: var(--wz-border) !important; }
.im-scope .im-wz-feature-chips { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
.im-scope .im-feature-chip {
    position: relative !important; cursor: pointer !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 7px 13px !important;
    background: var(--wz-surface) !important;
    border: 1.5px solid var(--wz-border) !important;
    border-radius: 50px !important;
    font-size: 0.78rem !important; font-weight: 500 !important;
    color: var(--wz-text-2) !important;
    transition: all var(--wz-transition) !important;
    user-select: none !important;
}
.im-scope .im-feature-chip input { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
.im-scope .im-chip-icon { font-size: 0.9rem !important; line-height: 1 !important; }
.im-scope .im-chip-check { display: none !important; font-size: 0.7rem !important; font-weight: 800 !important; color: #fff !important; }
.im-scope .im-feature-chip:hover { border-color: #9ca3af !important; color: var(--wz-text) !important; }
.im-scope .im-feature-chip.selected,
.im-scope .im-feature-chip:has(input:checked) { background: var(--wz-text) !important; border-color: var(--wz-text) !important; color: #fff !important; }
.im-scope .im-feature-chip.selected .im-chip-check,
.im-scope .im-feature-chip:has(input:checked) .im-chip-check { display: inline !important; }
.im-scope .im-feature-chip:focus-within { outline: 2px solid var(--wz-active) !important; outline-offset: 2px !important; }

/* ── Energy Selector ──────────────────────────────────────────────────────── */
.im-scope .im-energy-selector { display: flex !important; gap: 5px !important; flex-wrap: wrap !important; }
.im-scope .im-energy-label { position: relative !important; cursor: pointer !important; }
.im-scope .im-energy-label input { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; }
.im-scope .im-energy-label > span {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 40px !important; height: 34px !important;
    border-radius: 7px !important; font-size: 0.76rem !important; font-weight: 800 !important;
    color: #fff !important; cursor: pointer !important; opacity: 0.45 !important;
    transition: all var(--wz-transition) !important; border: 2px solid transparent !important;
}
.im-scope .im-energy-label > span:hover { opacity: 0.8 !important; transform: scale(1.06) !important; }
.im-scope .im-energy-label:has(input:checked) > span { opacity: 1 !important; transform: scale(1.1) !important; border-color: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; }
.im-scope .im-energy-axx > span, .im-scope .im-energy-axplus > span { background: #00c853 !important; }
.im-scope .im-energy-a   > span { background: #4caf50 !important; }
.im-scope .im-energy-b   > span { background: #8bc34a !important; }
.im-scope .im-energy-c   > span { background: #cddc39 !important; color: #333 !important; }
.im-scope .im-energy-d   > span { background: #ffeb3b !important; color: #333 !important; }
.im-scope .im-energy-e   > span { background: #ff9800 !important; }
.im-scope .im-energy-f   > span { background: #ff5722 !important; }
.im-scope .im-energy-g   > span { background: #f44336 !important; }

/* ── Char counter ─────────────────────────────────────────────────────────── */
.im-scope .im-char-counter { display: flex !important; justify-content: flex-end !important; font-size: 0.7rem !important; color: var(--wz-text-3) !important; margin-top: 4px !important; }

/* ── Info boxes ───────────────────────────────────────────────────────────── */
.im-scope .im-wz-info-box {
    display: flex !important; gap: 10px !important; align-items: flex-start !important;
    padding: 12px 16px !important; margin-top: 16px !important;
    background: var(--wz-surface-2) !important;
    border: 1px solid var(--wz-border) !important;
    border-radius: var(--wz-radius) !important;
    font-size: 0.8rem !important; color: var(--wz-text-2) !important; line-height: 1.5 !important;
}
.im-scope .im-wz-tips-box {
    padding: 16px 18px !important; margin-top: 16px !important;
    background: var(--wz-surface-2) !important; border: 1px solid var(--wz-border) !important; border-radius: var(--wz-radius) !important;
}
.im-scope .im-wz-tips-box h4 { font-size: 0.73rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; color: var(--wz-text-3) !important; margin-bottom: 10px !important; }
.im-scope .im-wz-tips-box ul { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.im-scope .im-wz-tips-box li { font-size: 0.8rem !important; color: var(--wz-text-2) !important; padding-left: 14px !important; position: relative !important; }
.im-scope .im-wz-tips-box li::before { content: '–' !important; position: absolute !important; left: 0 !important; color: var(--wz-text-3) !important; }

.im-scope .im-wz-austria-hint {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 12px 16px !important; margin-top: 14px !important;
    background: var(--wz-surface-2) !important; border: 1px solid var(--wz-border) !important; border-radius: var(--wz-radius) !important;
    font-size: 0.82rem !important; color: var(--wz-text-2) !important;
}
.im-scope .im-austria-flag { font-size: 1.3rem !important; }

/* ── Summary ──────────────────────────────────────────────────────────────── */
.im-scope .im-wz-summary { padding: 18px !important; margin: 20px 0 !important; background: var(--wz-surface-2) !important; border: 1px solid var(--wz-border) !important; border-radius: 12px !important; }
.im-scope .im-summary-title { font-size: 0.72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; color: var(--wz-text-3) !important; margin-bottom: 14px !important; }
.im-scope .im-summary-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px 20px !important; }
@media (max-width: 480px) { .im-scope .im-summary-grid { grid-template-columns: 1fr !important; } }
.im-scope .im-summary-item { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 8px 0 !important; border-bottom: 1px solid var(--wz-border) !important; }
.im-scope .im-summary-item label { font-size: 0.67rem !important; color: var(--wz-text-3) !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; font-weight: 600 !important; }
.im-scope .im-summary-item span { font-size: 0.86rem !important; font-weight: 600 !important; color: var(--wz-text) !important; }

/* ── GDPR ─────────────────────────────────────────────────────────────────── */
.im-scope .im-wz-gdpr { margin-top: 16px !important; }
.im-scope .im-gdpr-label { display: flex !important; gap: 12px !important; align-items: flex-start !important; cursor: pointer !important; font-size: 0.82rem !important; color: var(--wz-text-2) !important; line-height: 1.5 !important; }
.im-scope .im-gdpr-label input[type="checkbox"] { width: 17px !important; height: 17px !important; flex-shrink: 0 !important; margin-top: 1px !important; cursor: pointer !important; accent-color: var(--wz-active) !important; }
.im-scope .im-gdpr-label a { color: var(--wz-text) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }

/* ── Navigation ───────────────────────────────────────────────────────────── */
.im-scope .im-wz-nav {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 32px 22px !important;
    border-top: 1px solid var(--wz-border) !important;
    background: var(--wz-surface-2) !important;
    gap: 12px !important;
}
.im-scope .im-wz-step-indicator { font-size: 0.76rem !important; color: var(--wz-text-3) !important; font-weight: 500 !important; white-space: nowrap !important; text-align: center !important; }
.im-scope .im-wz-next-btn, .im-scope .im-wz-submit-btn { min-width: 130px !important; }
.im-scope .im-wz-prev-btn { min-width: 90px !important; }
.im-scope .im-wz-nav .im-btn-primary { background: var(--wz-text) !important; border-color: var(--wz-text) !important; color: #fff !important; box-shadow: var(--wz-shadow-sm) !important; }
.im-scope .im-wz-nav .im-btn-primary:hover { background: #374151 !important; border-color: #374151 !important; }
.im-scope .im-wz-nav .im-btn-secondary { background: var(--wz-surface) !important; border: 1.5px solid var(--wz-border) !important; color: var(--wz-text-2) !important; }
.im-scope .im-wz-nav .im-btn-secondary:hover { border-color: #9ca3af !important; color: var(--wz-text) !important; }

/* ── Success & Error ──────────────────────────────────────────────────────── */
.im-scope .im-wz-success { text-align: center !important; padding: 64px 32px !important; }
.im-scope .im-wz-success-icon { font-size: 3.5rem !important; display: block !important; margin-bottom: 20px !important; animation: im-bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) !important; }
@keyframes im-bounce-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.im-scope .im-wz-success h2 { font-size: 1.9rem !important; font-weight: 700 !important; color: var(--wz-text) !important; margin-bottom: 10px !important; letter-spacing: -0.02em !important; }
.im-scope .im-wz-success p { color: var(--wz-text-2) !important; font-size: 0.93rem !important; margin-bottom: 28px !important; }
.im-scope .im-wz-error-msg { background: #fef2f2 !important; border: 1px solid #fecaca !important; border-radius: 8px !important; padding: 12px 16px !important; color: var(--wz-error) !important; font-size: 0.85rem !important; }

/* ── Shake ────────────────────────────────────────────────────────────────── */
.im-scope .im-shake { animation: im-shake 0.38s ease !important; }
@keyframes im-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

.im-scope .im-disabled-msg { padding: 24px !important; text-align: center !important; color: var(--wz-text-2) !important; font-size: 0.9rem !important; }

@media (max-width: 560px) {
    .im-scope .im-wz-panel { padding: 22px 18px 18px !important; }
    .im-scope .im-wz-nav   { padding: 14px 18px 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE UPLOAD  –  Titelbild + Galerie
   ═══════════════════════════════════════════════════════════════════════════ */

.im-scope .im-wz-hint-inline {
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: var(--wz-text-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-left: 4px !important;
}

/* ── Drop zone ────────────────────────────────────────────────────────────── */
.im-scope .im-upload-zone {
    position: relative !important;
    border: 2px dashed var(--wz-border) !important;
    border-radius: 12px !important;
    background: var(--wz-surface-2) !important;
    transition: border-color var(--wz-transition), background var(--wz-transition) !important;
    cursor: pointer !important;
    overflow: hidden !important;
}
.im-scope .im-upload-zone:hover,
.im-scope .im-upload-zone.im-drag-over {
    border-color: var(--wz-border-focus) !important;
    background: #f0f0f2 !important;
}
.im-scope .im-upload-zone.im-drag-over {
    box-shadow: 0 0 0 4px rgba(17,24,39,0.08) !important;
}

/* Hidden native input – covers entire zone */
.im-scope .im-upload-input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

/* Placeholder content */
.im-scope .im-upload-placeholder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 36px 24px !important;
    text-align: center !important;
    pointer-events: none !important;
    transition: opacity var(--wz-transition) !important;
}
.im-scope .im-upload-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: var(--wz-surface) !important;
    border: 1.5px solid var(--wz-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--wz-text-2) !important;
    box-shadow: var(--wz-shadow-sm) !important;
    transition: all var(--wz-transition) !important;
}
.im-scope .im-upload-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
}
.im-scope .im-upload-zone:hover .im-upload-icon,
.im-scope .im-upload-zone.im-drag-over .im-upload-icon {
    background: var(--wz-text) !important;
    border-color: var(--wz-text) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}
.im-scope .im-upload-text strong {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--wz-text) !important;
    margin-bottom: 3px !important;
}
.im-scope .im-upload-text span {
    font-size: 0.82rem !important;
    color: var(--wz-text-3) !important;
}
.im-scope .im-upload-meta {
    font-size: 0.72rem !important;
    color: var(--wz-text-3) !important;
    margin-top: 2px !important;
}

/* ── Single image preview (Titelbild) ─────────────────────────────────────── */
.im-scope .im-upload-preview-single {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background: #000 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.im-scope .im-upload-preview-single .im-preview-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.im-scope .im-upload-preview-single .im-upload-remove {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 3 !important;
    transition: background var(--wz-transition) !important;
}
.im-scope .im-upload-preview-single .im-upload-remove:hover {
    background: rgba(220,38,38,0.85) !important;
}
.im-scope .im-preview-label {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 6px 12px !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.55)) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Hide placeholder when preview is showing */
.im-scope .im-upload-zone.im-has-file .im-upload-placeholder { display: none !important; }
.im-scope .im-upload-zone.im-has-file .im-upload-input {
    /* keep input functional for re-upload but don't cover preview's remove button */
    z-index: 1 !important;
}

/* ── Gallery preview grid ─────────────────────────────────────────────────── */
.im-scope .im-gallery-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}
.im-scope .im-gallery-thumb {
    position: relative !important;
    aspect-ratio: 4/3 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: var(--wz-surface-2) !important;
    border: 1.5px solid var(--wz-border) !important;
    animation: im-thumb-in 0.22s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes im-thumb-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
.im-scope .im-gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.im-scope .im-gallery-thumb-remove {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.6) !important;
    border: none !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity var(--wz-transition), background var(--wz-transition) !important;
    z-index: 2 !important;
}
.im-scope .im-gallery-thumb:hover .im-gallery-thumb-remove { opacity: 1 !important; }
.im-scope .im-gallery-thumb-remove:hover { background: rgba(220,38,38,0.85) !important; }
.im-scope .im-gallery-thumb-num {
    position: absolute !important;
    bottom: 4px !important;
    left: 6px !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.85) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important;
    pointer-events: none !important;
}

/* Add-more button in gallery grid */
.im-scope .im-gallery-add-btn {
    aspect-ratio: 4/3 !important;
    border-radius: 8px !important;
    border: 2px dashed var(--wz-border) !important;
    background: var(--wz-surface-2) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    color: var(--wz-text-3) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    transition: all var(--wz-transition) !important;
    position: relative !important;
}
.im-scope .im-gallery-add-btn:hover {
    border-color: var(--wz-border-focus) !important;
    color: var(--wz-text-2) !important;
    background: #f0f0f2 !important;
}
.im-scope .im-gallery-add-btn svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
}
.im-scope .im-gallery-add-btn input {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 480px) {
    .im-scope .im-gallery-preview-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .im-scope .im-gallery-thumb-remove { opacity: 1 !important; }
}