/* CLAUDE: Bewertungs-Wizard Hauptstylesheet */
/* CLAUDE: Multi-Step Formular für Immobilienbewertung */
/* CLAUDE: Anpassen: Farben über CSS-Variablen in base.css */

/* ========================================
   CLAUDE: WIZARD CONTAINER
   Hauptcontainer und Layout
   ======================================== */

/* CLAUDE: Wizard-Wrapper mit max-width und Zentrierung */
/* CLAUDE: Anpassen: max-width für breitere/schmalere Formulare */
.lhi-wizard {
    /* CLAUDE: Maximale Breite für optimale Lesbarkeit */
    max-width: 800px;
    /* CLAUDE: Horizontale Zentrierung */
    margin: 0 auto;
    /* CLAUDE: Außenabstand zum Seitenrand */
    padding: var(--lhi-space-md);
}

/* CLAUDE: Wizard-Card mit Hintergrund und Schatten */
.lhi-wizard__card {
    /* CLAUDE: Weißer Hintergrund für Kontrast */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-radius-lg);
    /* CLAUDE: Subtiler Schatten */
    box-shadow: var(--lhi-shadow-lg);
    /* CLAUDE: Overflow für abgerundete Ecken */
    overflow: hidden;
}

/* CLAUDE: Wizard-Header mit Fortschrittsanzeige */
.lhi-wizard__header {
    /* CLAUDE: Padding oben/unten */
    padding: var(--lhi-space-lg) var(--lhi-space-lg) var(--lhi-space-md);
    /* CLAUDE: Hintergrund-Akzent */
    background-color: var(--lhi-color-bg);
    /* CLAUDE: Untere Trennlinie */
    border-bottom: 1px solid var(--lhi-color-border);
}

/* CLAUDE: Wizard-Body für Step-Content */
.lhi-wizard__body {
    /* CLAUDE: Großzügiges Padding */
    padding: var(--lhi-space-lg);
    /* CLAUDE: Minimale Höhe für konsistentes Layout */
    min-height: 400px;
}

/* CLAUDE: Step-Container - standardmäßig versteckt */
/* CLAUDE: Nur der aktive Step wird angezeigt */
.lhi-wizard__step {
    /* CLAUDE: Standardmäßig versteckt */
    display: none;
}

/* CLAUDE: Aktiver Step wird angezeigt */
.lhi-wizard__step.is-active {
    /* CLAUDE: Block-Display für aktiven Step */
    display: block;
}

/* CLAUDE: Versteckte Steps mit hidden-Attribut */
.lhi-wizard__step[hidden] {
    /* CLAUDE: Sicherstellen dass hidden-Attribut funktioniert */
    display: none !important;
}

/* CLAUDE: Wizard-Footer mit Navigation */
.lhi-wizard__footer {
    /* CLAUDE: Padding und Trennlinie */
    padding: var(--lhi-space-md) var(--lhi-space-lg);
    border-top: 1px solid var(--lhi-color-border);
    /* CLAUDE: Hintergrund passend zum Header */
    background-color: var(--lhi-color-bg);
}

/* CLAUDE: Trust-Footer unter Navigation */
.lhi-wizard__trust {
    /* CLAUDE: Zentrierter Text */
    text-align: center;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) var(--lhi-space-lg) var(--lhi-space-md);
    /* CLAUDE: Sans-Serif für UI-Elemente */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kleinere Schrift */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Dezente Farbe */
    color: var(--lhi-color-secondary);
}

/* CLAUDE: Trust-Items inline mit Trenner */
.lhi-wizard__trust span {
    /* CLAUDE: Inline-Block für Spacing */
    display: inline-block;
    /* CLAUDE: Margin zwischen Items */
    margin: 0 var(--lhi-space-xs);
}

/* CLAUDE: Step-Headline */
.lhi-wizard__headline {
    /* CLAUDE: Serif für Headlines */
    font-family: var(--lhi-font-serif);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-xl);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-xs);
}

/* CLAUDE: Step-Subheadline */
.lhi-wizard__subheadline {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-base);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-lg);
}

/* ========================================
   CLAUDE: PROGRESS BAR
   Fortschrittsanzeige mit Steps
   ======================================== */

/* CLAUDE: Progress-Container */
.lhi-progress {
    /* CLAUDE: Flexbox für horizontale Anordnung */
    display: flex;
    /* CLAUDE: Vertikale Zentrierung */
    align-items: center;
    /* CLAUDE: Abstand unten */
    margin-bottom: var(--lhi-space-md);
}

/* CLAUDE: Step-Indicators Container */
.lhi-progress__steps {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Volle Breite */
    flex: 1;
    /* CLAUDE: Gleiche Verteilung */
    justify-content: space-between;
    /* CLAUDE: Relative Positionierung für Linie */
    position: relative;
}

/* CLAUDE: Verbindungslinie zwischen Steps */
.lhi-progress__steps::before {
    /* CLAUDE: Pseudo-Element für Linie */
    content: '';
    /* CLAUDE: Absolute Positionierung */
    position: absolute;
    /* CLAUDE: Vertikale Mitte */
    top: 50%;
    /* CLAUDE: Volle Breite */
    left: 0;
    right: 0;
    /* CLAUDE: Linienhöhe */
    height: 3px;
    /* CLAUDE: Inaktive Farbe */
    background-color: var(--lhi-color-border);
    /* CLAUDE: Transformation */
    transform: translateY(-50%);
    /* CLAUDE: Hinter den Kreisen */
    z-index: 1;
}

/* CLAUDE: Aktive Linie (wird per JS gesteuert) */
.lhi-progress__line {
    /* CLAUDE: Absolute Positionierung */
    position: absolute;
    /* CLAUDE: Vertikale Mitte */
    top: 50%;
    /* CLAUDE: Von links starten */
    left: 0;
    /* CLAUDE: Breite wird per JS gesetzt */
    width: 0%;
    /* CLAUDE: Linienhöhe */
    height: 3px;
    /* CLAUDE: Aktive Farbe */
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Transformation */
    transform: translateY(-50%);
    /* CLAUDE: Über inaktiver Linie */
    z-index: 2;
    /* CLAUDE: Smooth Animation */
    transition: width 400ms ease-in-out;
}

/* CLAUDE: Einzelner Step-Indicator */
.lhi-progress__step {
    /* CLAUDE: Flexbox für Icon + Label */
    display: flex;
    /* CLAUDE: Vertikal stapeln */
    flex-direction: column;
    /* CLAUDE: Zentrieren */
    align-items: center;
    /* CLAUDE: Über der Linie */
    position: relative;
    z-index: 3;
}

/* CLAUDE: Step-Kreis */
.lhi-progress__dot {
    /* CLAUDE: Feste Größe */
    width: 36px;
    height: 36px;
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Inaktiver Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Border */
    border: 3px solid var(--lhi-color-border);
    /* CLAUDE: Flexbox für Nummer */
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Fett */
    font-weight: 700;
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Transition */
    transition: all 200ms ease;
}

/* CLAUDE: Aktiver Step-Kreis */
.lhi-progress__step.is-active .lhi-progress__dot {
    /* CLAUDE: Aktive Border-Farbe */
    border-color: var(--lhi-color-gold);
    /* CLAUDE: Aktiver Hintergrund */
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Weiße Schrift */
    color: var(--lhi-color-white);
    /* CLAUDE: Leichte Vergrößerung */
    transform: scale(1.1);
}

/* CLAUDE: Abgeschlossener Step-Kreis */
.lhi-progress__step.is-completed .lhi-progress__dot {
    /* CLAUDE: Erfolgs-Farbe */
    border-color: var(--lhi-color-success);
    background-color: var(--lhi-color-success);
    color: var(--lhi-color-white);
}

/* CLAUDE: Checkmark für abgeschlossene Steps */
.lhi-progress__step.is-completed .lhi-progress__dot::after {
    /* CLAUDE: Checkmark Unicode */
    content: '✓';
}

/* CLAUDE: Step-Label */
.lhi-progress__label {
    /* CLAUDE: Abstand nach oben */
    margin-top: var(--lhi-space-xs);
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kleine Schrift */
    font-size: var(--lhi-font-size-xs);
    /* CLAUDE: Dezente Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Transition */
    transition: color 200ms ease;
}

/* CLAUDE: Aktives Label */
.lhi-progress__step.is-active .lhi-progress__label {
    /* CLAUDE: Hervorgehobene Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Fett */
    font-weight: 600;
}

/* CLAUDE: Progress-Step clickable wenn completed */
.lhi-progress__step.is-completed {
    /* CLAUDE: Pointer Cursor */
    cursor: pointer;
}

/* CLAUDE: Hover-Effekt für clickable Steps */
.lhi-progress__step.is-completed:hover .lhi-progress__number {
    /* CLAUDE: Leichte Vergrößerung */
    transform: scale(1.15);
    /* CLAUDE: Schatten */
    box-shadow: var(--lhi-shadow-md);
}

/* CLAUDE: Focus-State für Accessibility */
.lhi-progress__step.is-completed:focus-visible {
    /* CLAUDE: Outline */
    outline: 3px solid var(--lhi-color-gold);
    outline-offset: 4px;
    /* CLAUDE: Radius für Outline */
    border-radius: var(--lhi-radius-sm);
}

/* CLAUDE: Mobile Progress (vereinfacht) */
/* CLAUDE: Bugfix: Klassenname korrigiert von .lhi-progress__mobile zu .lhi-progress-mobile */
.lhi-progress-mobile {
    /* CLAUDE: Standard ausgeblendet */
    display: none;
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Abstand */
    margin-bottom: var(--lhi-space-sm);
}

/* CLAUDE: Mobile Progress Dots Container */
.lhi-progress-mobile__dots {
    /* CLAUDE: Flexbox für horizontale Anordnung */
    display: flex;
    /* CLAUDE: Zentrierung */
    justify-content: center;
    /* CLAUDE: Gap zwischen Dots */
    gap: var(--lhi-space-xs);
    /* CLAUDE: Abstand */
    margin-bottom: var(--lhi-space-xs);
}

/* CLAUDE: Mobile Progress Dot Basis-Style */
.lhi-progress-mobile__dot {
    /* CLAUDE: Größe */
    width: 10px;
    height: 10px;
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Inaktiver Hintergrund */
    background-color: var(--lhi-color-border);
    /* CLAUDE: Transition */
    transition: all 200ms ease;
}

/* CLAUDE: Mobile Dot aktiv */
.lhi-progress-mobile__dot.is-active {
    /* CLAUDE: Gold Hintergrund */
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Leichte Vergrößerung */
    transform: scale(1.3);
}

/* CLAUDE: Mobile Dot abgeschlossen */
.lhi-progress-mobile__dot.is-completed {
    /* CLAUDE: Erfolgs-Farbe */
    background-color: var(--lhi-color-success);
}

/* CLAUDE: Mobile Progress Text Container */
.lhi-progress-mobile__text {
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Abstand */
    margin-bottom: var(--lhi-space-xs);
}

/* CLAUDE: Mobile Progress aktuelle Zahl */
.lhi-progress-mobile__current {
    /* CLAUDE: Fett */
    font-weight: 700;
    /* CLAUDE: Gold */
    color: var(--lhi-color-gold);
}

/* CLAUDE: Mobile Progress-Bar Container */
.lhi-progress-mobile__bar {
    /* CLAUDE: Höhe */
    height: 6px;
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-border);
    /* CLAUDE: Abgerundet */
    border-radius: 3px;
    /* CLAUDE: Abstand */
    margin-top: var(--lhi-space-xs);
    /* CLAUDE: Overflow */
    overflow: hidden;
}

/* CLAUDE: Mobile Progress-Bar Fill */
.lhi-progress-mobile__bar-fill {
    /* CLAUDE: Höhe */
    height: 100%;
    /* CLAUDE: Aktive Farbe */
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Breite initial */
    width: 20%;
    /* CLAUDE: Transition */
    transition: width 400ms ease-in-out;
}

/* CLAUDE: Mobile Progress-Bar (alte BEM-Konvention - behalten für Kompatibilität) */
.lhi-progress__bar {
    /* CLAUDE: Höhe */
    height: 6px;
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-border);
    /* CLAUDE: Abgerundet */
    border-radius: 3px;
    /* CLAUDE: Abstand */
    margin-top: var(--lhi-space-xs);
    /* CLAUDE: Overflow */
    overflow: hidden;
}

/* CLAUDE: Mobile Progress-Bar Fill */
.lhi-progress__bar-fill {
    /* CLAUDE: Höhe */
    height: 100%;
    /* CLAUDE: Aktive Farbe */
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Transition */
    transition: width 400ms ease-in-out;
}

/* ========================================
   CLAUDE: TYPE CARDS
   Immobilientyp-Auswahl
   ======================================== */

/* CLAUDE: Cards-Grid Container */
.lhi-type-cards {
    /* CLAUDE: CSS Grid */
    display: grid;
    /* CLAUDE: Responsive Grid - min 140px für lange Wörter wie "Einfamilienhaus" */
    /* CLAUDE: Anpassen: minmax(140px, 1fr) für breitere/schmalere Cards */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    /* CLAUDE: Abstand zwischen Cards */
    gap: var(--lhi-space-md);
    /* CLAUDE: Margin */
    margin: var(--lhi-space-lg) 0;
}

/* CLAUDE: Subtype Cards (kleinere Variante) */
.lhi-type-cards--small {
    /* CLAUDE: 4 Spalten Grid - alle Cards gleich breit */
    /* CLAUDE: Fallback auf 3 Spalten wenn Container zu schmal */
    grid-template-columns: repeat(4, 1fr);
    /* CLAUDE: Kleinerer Gap */
    gap: var(--lhi-space-sm);
}

/* CLAUDE: Einzelne Type-Card */
.lhi-type-card {
    /* CLAUDE: Flexbox für vertikale Anordnung */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Padding - etwas reduziert für mehr Textplatz */
    padding: var(--lhi-space-sm) var(--lhi-space-xs);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-radius-md);
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition */
    transition: all 200ms ease;
    /* CLAUDE: Minimum-Höhe */
    min-height: 56px;
    /* CLAUDE: Overflow visible - Text wird nicht abgeschnitten */
    overflow: visible;
    /* CLAUDE: Keine Silbentrennung - Wörter bleiben intakt */
    hyphens: none;
    -webkit-hyphens: none;
    /* CLAUDE: Box-Sizing für konsistente Größen */
    box-sizing: border-box;
}

/* CLAUDE: Card Hover-State */
.lhi-type-card:hover {
    /* CLAUDE: Border-Farbe */
    border-color: var(--lhi-color-gold);
    /* CLAUDE: Schatten */
    box-shadow: var(--lhi-shadow-md);
    /* CLAUDE: Leichte Anhebung */
    transform: translateY(-4px);
}

/* CLAUDE: Card Focus-State (Accessibility) */
.lhi-type-card:focus-visible {
    /* CLAUDE: Outline */
    outline: 3px solid var(--lhi-color-gold);
    outline-offset: 2px;
}

/* CLAUDE: Card Selected-State */
.lhi-type-card.is-selected {
    /* CLAUDE: Dickere Border */
    border-width: 3px;
    /* CLAUDE: Gold Border */
    border-color: var(--lhi-color-gold);
    /* CLAUDE: Leichter Hintergrund */
    background-color: rgba(138, 107, 63, 0.08);
    /* CLAUDE: Schatten */
    box-shadow: var(--lhi-shadow-md);
}

/* CLAUDE: Card-Icon */
.lhi-type-card__icon {
    /* CLAUDE: Große Emoji/Icon */
    font-size: 2.5rem;
    /* CLAUDE: Abstand nach unten */
    margin-bottom: var(--lhi-space-sm);
    /* CLAUDE: Line-Height */
    line-height: 1;
}

/* CLAUDE: Card-Label */
.lhi-type-card__label {
    /* CLAUDE: Sans-Serif für UI */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe - etwas kleiner für lange Labels */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Fett */
    font-weight: 600;
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Maximale Breite für konsistentes Layout */
    max-width: 100%;
    /* CLAUDE: Line-Height für mehrzeilige Labels */
    line-height: 1.3;
    /* CLAUDE: Keine Wortumbrüche - wichtig für "Einfamilienhaus", "Doppelhaushälfte" */
    white-space: nowrap;
    /* CLAUDE: Keine Silbentrennung */
    hyphens: none;
    -webkit-hyphens: none;
}

/* CLAUDE: Kleine Card-Variante */
.lhi-type-cards--small .lhi-type-card {
    /* CLAUDE: Quadratisch aufheben */
    aspect-ratio: auto;
    /* CLAUDE: Kompakteres Padding für mehr Textplatz */
    padding: var(--lhi-space-sm) var(--lhi-space-xs);
    /* CLAUDE: Minimale Höhe */
    min-height: 48px;
}

.lhi-type-cards--small .lhi-type-card__icon {
    /* CLAUDE: Kleineres Icon */
    font-size: 1.5rem;
    /* CLAUDE: Weniger Abstand */
    margin-bottom: var(--lhi-space-xs);
}

.lhi-type-cards--small .lhi-type-card__label {
    /* CLAUDE: Kleinere Schrift für lange Wörter wie Bauerwartungsland */
    font-size: 0.8125rem;
    /* CLAUDE: Text darf umbrechen wenn nötig */
    white-space: normal;
    /* CLAUDE: Aber nur an Wortgrenzen */
    word-break: keep-all;
    overflow-wrap: normal;
}

/* CLAUDE: Hidden Radio-Inputs */
.lhi-type-card input[type="radio"] {
    /* CLAUDE: Visuell verstecken aber zugänglich */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ========================================
   CLAUDE: FORM INPUTS
   Textfelder, Selects, Labels
   ======================================== */

/* CLAUDE: Form-Gruppe (Label + Input) */
.lhi-form-group {
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-md);
    /* CLAUDE: Relative für Icon-Positionierung */
    position: relative;
}

/* CLAUDE: Form-Field Wrapper (alternative Benennung) */
.lhi-form-field {
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-md);
}

/* CLAUDE: Form-Label (alternative Benennung) */
.lhi-form-label {
    /* CLAUDE: Block */
    display: block;
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Fett */
    font-weight: 600;
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-xs);
}

/* CLAUDE: Pflichtfeld-Marker */
.lhi-form-label .required {
    /* CLAUDE: Rot */
    color: var(--lhi-color-error);
}

/* CLAUDE: Optional-Marker */
.lhi-form-label .optional {
    /* CLAUDE: Dezent */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Normal */
    font-weight: 400;
}

/* CLAUDE: Form-Input (alternative Benennung) */
.lhi-form-input {
    /* CLAUDE: Block */
    display: block;
    /* CLAUDE: Volle Breite */
    width: 100%;
    /* CLAUDE: Höhe */
    height: 56px;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) var(--lhi-space-md);
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Schrift */
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-base);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Transition */
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* CLAUDE: Form-Input Focus */
.lhi-form-input:focus {
    /* CLAUDE: Outline entfernen */
    outline: none;
    /* CLAUDE: Gold Border */
    border-color: var(--lhi-color-gold);
    /* CLAUDE: Glow */
    box-shadow: 0 0 0 4px rgba(138, 107, 63, 0.15);
}

/* CLAUDE: Form-Input Placeholder */
.lhi-form-input::placeholder {
    /* CLAUDE: Dezente Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Leichte Transparenz */
    opacity: 0.7;
}

/* CLAUDE: Form-Input Error */
.lhi-form-input.has-error {
    /* CLAUDE: Rote Border */
    border-color: var(--lhi-color-error);
    /* CLAUDE: Leichter roter Hintergrund */
    background-color: rgba(220, 53, 69, 0.05);
}

/* CLAUDE: Form-Hint (alternative Benennung) */
.lhi-form-hint {
    /* CLAUDE: Block */
    display: block;
    /* CLAUDE: Margin */
    margin-top: var(--lhi-space-xs);
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kleine Schrift */
    font-size: var(--lhi-font-size-xs);
    /* CLAUDE: Dezente Farbe */
    color: var(--lhi-color-secondary);
}

/* CLAUDE: Info-Box für Hinweise */
.lhi-info-box {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Gap */
    gap: var(--lhi-space-sm);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-md);
    /* CLAUDE: Hintergrund */
    background-color: rgba(138, 107, 63, 0.08);
    /* CLAUDE: Border */
    border: 1px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-md);
    /* CLAUDE: Margin */
    margin-top: var(--lhi-space-lg);
}

/* CLAUDE: Info-Box Icon */
.lhi-info-box__icon {
    /* CLAUDE: Flex-Shrink verhindern */
    flex-shrink: 0;
    /* CLAUDE: Größe */
    font-size: 1.25rem;
}

/* CLAUDE: Info-Box Content */
.lhi-info-box__content {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.5;
}

/* CLAUDE: Form-Select (alternative Benennung) */
.lhi-form-select {
    /* CLAUDE: Block */
    display: block;
    /* CLAUDE: Volle Breite */
    width: 100%;
    /* CLAUDE: Höhe */
    height: 56px;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) var(--lhi-space-md);
    /* CLAUDE: Appearance entfernen */
    appearance: none;
    /* CLAUDE: Pfeil-Icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233B2A1A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    /* CLAUDE: Padding rechts für Pfeil */
    padding-right: 2.5rem;
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Schrift */
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-base);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition */
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* CLAUDE: Form-Select Focus */
.lhi-form-select:focus {
    /* CLAUDE: Outline entfernen */
    outline: none;
    /* CLAUDE: Gold Border */
    border-color: var(--lhi-color-gold);
    /* CLAUDE: Glow */
    box-shadow: 0 0 0 4px rgba(138, 107, 63, 0.15);
}

/* CLAUDE: Form-Group Grid Layout */
.lhi-form-group--grid {
    /* CLAUDE: Grid */
    display: grid;
    /* CLAUDE: 2 Spalten auf Desktop */
    grid-template-columns: repeat(2, 1fr);
    /* CLAUDE: Gap */
    gap: var(--lhi-space-md);
}

/* CLAUDE: Kompaktes Grid */
.lhi-form-group--compact {
    /* CLAUDE: Weniger Margin */
    margin-top: var(--lhi-space-lg);
}

/* CLAUDE: Volle Breite im Grid */
.lhi-form-field--full {
    /* CLAUDE: Über beide Spalten */
    grid-column: 1 / -1;
}

/* CLAUDE: Stepper-Input Styling */
.lhi-stepper__input {
    /* CLAUDE: Breite */
    width: 80px;
    /* CLAUDE: Höhe */
    height: 48px;
    /* CLAUDE: Zentrierter Text */
    text-align: center;
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Schrift */
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-lg);
    font-weight: 600;
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Spinner verstecken */
    -moz-appearance: textfield;
}

.lhi-stepper__input::-webkit-outer-spin-button,
.lhi-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* CLAUDE: Stepper Unit */
.lhi-stepper__unit {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Margin */
    margin-left: var(--lhi-space-xs);
}

/* CLAUDE: Form-Unit nach Input */
.lhi-form-unit {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Margin */
    margin-left: var(--lhi-space-xs);
}

/* CLAUDE: Range-Input Wrapper */
.lhi-range-wrapper {
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-sm);
}

/* CLAUDE: Einfacher Range-Slider mit CSS Custom Property Fill */
/* CLAUDE: Verwendet --range-progress für dynamischen Fill (per JS gesetzt) */
input[type="range"].lhi-range {
    /* CLAUDE: Volle Breite */
    width: 100%;
    /* CLAUDE: Höhe */
    height: 8px;
    /* CLAUDE: Appearance entfernen */
    -webkit-appearance: none;
    appearance: none;
    /* CLAUDE: Hintergrund mit Gradient für Fill-Effekt */
    /* CLAUDE: Anpassen: --range-progress per JS setzen (0% - 100%) */
    background: linear-gradient(
        to right,
        var(--lhi-color-gold, #c4a55a) 0%,
        var(--lhi-color-gold, #c4a55a) var(--range-progress, 20%),
        var(--lhi-color-border, #e0e0e0) var(--range-progress, 20%),
        var(--lhi-color-border, #e0e0e0) 100%
    );
    /* CLAUDE: Abgerundet */
    border-radius: 4px;
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Kein Outline */
    outline: none;
    /* CLAUDE: Initial-Wert für Fill */
    --range-progress: 20%;
}

/* CLAUDE: Webkit Thumb für einfachen Range-Slider */
input[type="range"].lhi-range::-webkit-slider-thumb {
    /* CLAUDE: Appearance entfernen */
    -webkit-appearance: none;
    /* CLAUDE: Größe */
    width: 24px;
    height: 24px;
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Weiß mit Gold-Rand */
    background: var(--lhi-color-white, #fff);
    border: 3px solid var(--lhi-color-gold, #c4a55a);
    /* CLAUDE: Schatten */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* CLAUDE: Cursor */
    cursor: grab;
    /* CLAUDE: Transition */
    transition: transform 150ms ease, box-shadow 150ms ease;
}

/* CLAUDE: Hover-Effekt */
input[type="range"].lhi-range::-webkit-slider-thumb:hover {
    /* CLAUDE: Vergrößern */
    transform: scale(1.1);
    /* CLAUDE: Stärkerer Schatten */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* CLAUDE: Active-Effekt */
input[type="range"].lhi-range::-webkit-slider-thumb:active {
    /* CLAUDE: Grabbing-Cursor */
    cursor: grabbing;
}

/* CLAUDE: Firefox Thumb */
input[type="range"].lhi-range::-moz-range-thumb {
    /* CLAUDE: Größe */
    width: 24px;
    height: 24px;
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Weiß mit Gold-Rand */
    background: var(--lhi-color-white, #fff);
    border: 3px solid var(--lhi-color-gold, #c4a55a);
    /* CLAUDE: Schatten */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* CLAUDE: Cursor */
    cursor: grab;
}

/* CLAUDE: Firefox Track */
input[type="range"].lhi-range::-moz-range-track {
    /* CLAUDE: Transparent - Fill wird über background gemacht */
    background: transparent;
}

/* CLAUDE: Firefox Progress (für Fill-Effekt) */
input[type="range"].lhi-range::-moz-range-progress {
    /* CLAUDE: Gold-Farbe */
    background-color: var(--lhi-color-gold, #c4a55a);
    /* CLAUDE: Abgerundet */
    border-radius: 4px;
}

/* CLAUDE: Range-Input-Wrapper für Nummer + Einheit */
.lhi-range-input-wrapper {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Zentriert */
    align-items: center;
    /* CLAUDE: Margin */
    margin-top: var(--lhi-space-sm);
}

/* CLAUDE: Range-Input Small Variant */
.lhi-form-input--small {
    /* CLAUDE: Kleinere Breite */
    width: 100px;
    /* CLAUDE: Zentriert */
    text-align: center;
}

/* CLAUDE: Checkbox-Styling */
.lhi-checkbox {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Align-Items */
    align-items: flex-start;
    /* CLAUDE: Gap */
    gap: var(--lhi-space-sm);
    /* CLAUDE: Cursor */
    cursor: pointer;
}

/* CLAUDE: Checkbox Input verstecken */
.lhi-checkbox input[type="checkbox"] {
    /* CLAUDE: Position */
    position: absolute;
    /* CLAUDE: Opacity */
    opacity: 0;
    /* CLAUDE: Größe */
    width: 0;
    height: 0;
}

/* CLAUDE: Checkbox Checkmark */
.lhi-checkbox__checkmark {
    /* CLAUDE: Flex-Shrink */
    flex-shrink: 0;
    /* CLAUDE: Größe */
    width: 24px;
    height: 24px;
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Transition */
    transition: all 150ms ease;
    /* CLAUDE: Flexbox für Checkmark */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CLAUDE: Checkbox Checkmark Hover */
.lhi-checkbox:hover .lhi-checkbox__checkmark {
    /* CLAUDE: Border-Farbe */
    border-color: var(--lhi-color-gold);
}

/* CLAUDE: Checkbox Checkmark Checked */
.lhi-checkbox input:checked + .lhi-checkbox__checkmark {
    /* CLAUDE: Gold */
    background-color: var(--lhi-color-gold);
    border-color: var(--lhi-color-gold);
}

/* CLAUDE: Checkbox Checkmark Icon */
.lhi-checkbox input:checked + .lhi-checkbox__checkmark::after {
    /* CLAUDE: Checkmark */
    content: '✓';
    /* CLAUDE: Weiß */
    color: var(--lhi-color-white);
    /* CLAUDE: Größe */
    font-size: 14px;
    /* CLAUDE: Fett */
    font-weight: 700;
}

/* CLAUDE: Checkbox Text */
.lhi-checkbox__text {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.5;
}

/* CLAUDE: Checkbox Text Link */
.lhi-checkbox__text a {
    /* CLAUDE: Gold */
    color: var(--lhi-color-gold);
}

/* CLAUDE: Submit-Info Box */
.lhi-submit-info {
    /* CLAUDE: Margin */
    margin-top: var(--lhi-space-lg);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-md);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-bg);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-md);
}

.lhi-submit-info p {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Margin */
    margin: 0;
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.6;
}

/* CLAUDE: Energy-Scale */
.lhi-energy-scale {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Gap */
    gap: 2px;
    /* CLAUDE: Margin */
    margin: var(--lhi-space-sm) 0;
}

/* CLAUDE: Energy-Scale Item */
.lhi-energy-scale__item {
    /* CLAUDE: Flex */
    flex: 1;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-xs) var(--lhi-space-sm);
    /* CLAUDE: Hintergrund (CSS Variable) */
    background-color: var(--energy-color, var(--lhi-color-border));
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition */
    transition: all 150ms ease;
    /* CLAUDE: Erste und letzte abgerundet */
}

.lhi-energy-scale__item:first-child {
    border-radius: var(--lhi-radius-sm) 0 0 var(--lhi-radius-sm);
}

.lhi-energy-scale__item:last-child {
    border-radius: 0 var(--lhi-radius-sm) var(--lhi-radius-sm) 0;
}

/* CLAUDE: Energy-Scale Item Unknown */
.lhi-energy-scale__item--unknown {
    /* CLAUDE: Grauer Hintergrund */
    background-color: var(--lhi-color-border);
}

/* CLAUDE: Energy-Scale Label */
.lhi-energy-scale__label {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Fett */
    font-weight: 700;
    /* CLAUDE: Weiß für Kontrast */
    color: var(--lhi-color-white);
    /* CLAUDE: Text-Shadow für Lesbarkeit */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* CLAUDE: Energy-Scale Item Selected */
.lhi-energy-scale__item.is-selected {
    /* CLAUDE: Outline */
    outline: 3px solid var(--lhi-color-text);
    outline-offset: 2px;
    /* CLAUDE: Transform */
    transform: scale(1.05);
    /* CLAUDE: Z-Index */
    position: relative;
    z-index: 1;
}

/* CLAUDE: Hidden Radio in Energy-Scale */
.lhi-energy-scale__item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* CLAUDE: Type-Cards Row Layout */
.lhi-type-cards--row {
    /* CLAUDE: Flexbox statt Grid für einzeilige Darstellung */
    display: flex;
    flex-wrap: wrap;
}

/* CLAUDE: Zweispaltige Gruppen */
.lhi-form-row {
    /* CLAUDE: Grid */
    display: grid;
    /* CLAUDE: Zwei Spalten */
    grid-template-columns: repeat(2, 1fr);
    /* CLAUDE: Gap */
    gap: var(--lhi-space-md);
}

/* CLAUDE: Label */
.lhi-form-group__label {
    /* CLAUDE: Block */
    display: block;
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Fett */
    font-weight: 600;
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-xs);
}

/* CLAUDE: Pflichtfeld-Marker */
.lhi-form-group__label--required::after {
    /* CLAUDE: Stern */
    content: ' *';
    /* CLAUDE: Rot */
    color: var(--lhi-color-error);
}

/* CLAUDE: Text-Input */
.lhi-form-group__input {
    /* CLAUDE: Block */
    display: block;
    /* CLAUDE: Volle Breite */
    width: 100%;
    /* CLAUDE: Höhe */
    height: 56px;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) var(--lhi-space-md);
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Schrift */
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-base);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Transition */
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* CLAUDE: Textarea */
.lhi-form-group__textarea {
    /* CLAUDE: Block */
    display: block;
    /* CLAUDE: Volle Breite */
    width: 100%;
    /* CLAUDE: Minimale Höhe */
    min-height: 120px;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) var(--lhi-space-md);
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Schrift */
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-base);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Resize nur vertikal */
    resize: vertical;
    /* CLAUDE: Transition */
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* CLAUDE: Input mit Icon */
.lhi-form-group--icon .lhi-form-group__input {
    /* CLAUDE: Padding links für Icon */
    padding-left: 3rem;
}

/* CLAUDE: Icon im Input */
.lhi-form-group__icon {
    /* CLAUDE: Absolute Positionierung */
    position: absolute;
    /* CLAUDE: Links */
    left: var(--lhi-space-md);
    /* CLAUDE: Vertikal unter Label (Label ca. 24px + 8px margin) */
    bottom: 18px;
    /* CLAUDE: Größe */
    font-size: 1.25rem;
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Pointer Events deaktivieren */
    pointer-events: none;
}

/* CLAUDE: Input Focus-State */
.lhi-form-group__input:focus,
.lhi-form-group__textarea:focus {
    /* CLAUDE: Outline entfernen */
    outline: none;
    /* CLAUDE: Gold Border */
    border-color: var(--lhi-color-gold);
    /* CLAUDE: Glow */
    box-shadow: 0 0 0 4px rgba(138, 107, 63, 0.15);
}

/* CLAUDE: Input Error-State */
.lhi-form-group__input.has-error,
.lhi-form-group__textarea.has-error {
    /* CLAUDE: Rote Border */
    border-color: var(--lhi-color-error);
    /* CLAUDE: Leichter roter Hintergrund */
    background-color: rgba(220, 53, 69, 0.05);
}

/* CLAUDE: Fehlermeldung */
.lhi-form-group__error {
    /* CLAUDE: Margin */
    margin-top: var(--lhi-space-xs);
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kleine Schrift */
    font-size: var(--lhi-font-size-xs);
    /* CLAUDE: Rot */
    color: var(--lhi-color-error);
}

/* CLAUDE: Hilfetext */
.lhi-form-group__hint {
    /* CLAUDE: Margin */
    margin-top: var(--lhi-space-xs);
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kleine Schrift */
    font-size: var(--lhi-font-size-xs);
    /* CLAUDE: Dezente Farbe */
    color: var(--lhi-color-secondary);
}

/* CLAUDE: Select-Dropdown */
.lhi-form-group__select {
    /* CLAUDE: Appearance entfernen */
    appearance: none;
    /* CLAUDE: Pfeil-Icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233B2A1A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    /* CLAUDE: Padding rechts für Pfeil */
    padding-right: 2.5rem;
    /* CLAUDE: Cursor */
    cursor: pointer;
}

/* ========================================
   CLAUDE: RANGE SLIDER
   Flächen-Eingabe
   ======================================== */

/* CLAUDE: Slider-Container */
.lhi-range {
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) 0;
}

/* CLAUDE: Slider-Track Wrapper */
.lhi-range__track-wrapper {
    /* CLAUDE: Relative für Positionierung */
    position: relative;
    /* CLAUDE: Höhe */
    height: 8px;
    /* CLAUDE: Margin für Thumb */
    margin: 0 12px;
}

/* CLAUDE: Inaktiver Track */
.lhi-range__track {
    /* CLAUDE: Absolute */
    position: absolute;
    /* CLAUDE: Volle Größe */
    width: 100%;
    height: 100%;
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-border);
    /* CLAUDE: Abgerundet */
    border-radius: 4px;
}

/* CLAUDE: Aktiver Track (gefüllt) */
.lhi-range__fill {
    /* CLAUDE: Absolute */
    position: absolute;
    /* CLAUDE: Höhe */
    height: 100%;
    /* CLAUDE: Breite per JS */
    width: 0%;
    /* CLAUDE: Gold */
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Abgerundet */
    border-radius: 4px;
    /* CLAUDE: Transition */
    transition: width 100ms ease;
}

/* CLAUDE: Native Range Input */
.lhi-range__input {
    /* CLAUDE: Absolute über Track */
    position: absolute;
    /* CLAUDE: Volle Breite */
    width: 100%;
    /* CLAUDE: Zentriert */
    top: 50%;
    transform: translateY(-50%);
    /* CLAUDE: Transparent */
    background: transparent;
    /* CLAUDE: Appearance entfernen */
    -webkit-appearance: none;
    appearance: none;
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Margin */
    margin: 0;
}

/* CLAUDE: Webkit Thumb */
.lhi-range__input::-webkit-slider-thumb {
    /* CLAUDE: Appearance */
    -webkit-appearance: none;
    /* CLAUDE: Größe */
    width: 24px;
    height: 24px;
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Weiß */
    background: var(--lhi-color-white);
    /* CLAUDE: Gold Border */
    border: 3px solid var(--lhi-color-gold);
    /* CLAUDE: Schatten */
    box-shadow: var(--lhi-shadow-md);
    /* CLAUDE: Cursor */
    cursor: grab;
    /* CLAUDE: Transition */
    transition: transform 150ms ease;
}

.lhi-range__input::-webkit-slider-thumb:hover {
    /* CLAUDE: Vergrößern */
    transform: scale(1.1);
}

.lhi-range__input::-webkit-slider-thumb:active {
    /* CLAUDE: Grab-Cursor */
    cursor: grabbing;
}

/* CLAUDE: Firefox Thumb */
.lhi-range__input::-moz-range-thumb {
    /* CLAUDE: Größe */
    width: 24px;
    height: 24px;
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Weiß */
    background: var(--lhi-color-white);
    /* CLAUDE: Gold Border */
    border: 3px solid var(--lhi-color-gold);
    /* CLAUDE: Schatten */
    box-shadow: var(--lhi-shadow-md);
    /* CLAUDE: Cursor */
    cursor: grab;
}

/* CLAUDE: Value Display */
.lhi-range__value {
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Margin */
    margin-top: var(--lhi-space-md);
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
}

.lhi-range__value-number {
    /* CLAUDE: Große Zahl */
    font-size: var(--lhi-font-size-xl);
    /* CLAUDE: Fett */
    font-weight: 700;
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
}

.lhi-range__value-unit {
    /* CLAUDE: Kleinere Einheit */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Dezent */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Abstand */
    margin-left: 4px;
}

/* ========================================
   CLAUDE: STEPPER
   +/- Eingabe für Zimmeranzahl
   ======================================== */

/* CLAUDE: Stepper-Container */
.lhi-stepper {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Zentriert */
    align-items: center;
    /* CLAUDE: Gap */
    gap: var(--lhi-space-sm);
}

/* CLAUDE: Stepper-Button */
.lhi-stepper__btn {
    /* CLAUDE: Feste Größe */
    width: 48px;
    height: 48px;
    /* CLAUDE: Flexbox für Zentrierung */
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Schrift */
    font-size: 1.5rem;
    font-weight: 600;
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition */
    transition: all 150ms ease;
    /* CLAUDE: User-Select verhindern */
    user-select: none;
}

/* CLAUDE: Button Hover */
.lhi-stepper__btn:hover:not(:disabled) {
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-bg);
    /* CLAUDE: Border-Farbe */
    border-color: var(--lhi-color-gold);
}

/* CLAUDE: Button Disabled */
.lhi-stepper__btn:disabled {
    /* CLAUDE: Transparenz */
    opacity: 0.4;
    /* CLAUDE: Cursor */
    cursor: not-allowed;
}

/* CLAUDE: Stepper-Value */
.lhi-stepper__value {
    /* CLAUDE: Minimale Breite */
    min-width: 60px;
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Große Zahl */
    font-size: var(--lhi-font-size-xl);
    /* CLAUDE: Fett */
    font-weight: 700;
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
}

/* ========================================
   CLAUDE: CHECKBOX CHIPS
   Ausstattungsmerkmale
   ======================================== */

/* CLAUDE: Chips-Container */
.lhi-chips {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Umbruch */
    flex-wrap: wrap;
    /* CLAUDE: Gap */
    gap: var(--lhi-space-sm);
}

/* CLAUDE: Einzelner Chip */
.lhi-chip {
    /* CLAUDE: Inline-Flex */
    display: inline-flex;
    /* CLAUDE: Zentriert */
    align-items: center;
    /* CLAUDE: Gap für Checkmark */
    gap: 6px;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-xs) var(--lhi-space-md);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Pill-Form */
    border-radius: 9999px;
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-sm);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: User-Select */
    user-select: none;
    /* CLAUDE: Transition */
    transition: all 150ms ease;
}

/* CLAUDE: Chip Hover */
.lhi-chip:hover {
    /* CLAUDE: Border-Farbe */
    border-color: var(--lhi-color-gold);
}

/* CLAUDE: Chip Checked */
.lhi-chip.is-checked {
    /* CLAUDE: Leichter Gold-Hintergrund */
    background-color: rgba(138, 107, 63, 0.1);
    /* CLAUDE: Gold Border */
    border-color: var(--lhi-color-gold);
}

/* CLAUDE: Checkmark-Icon */
.lhi-chip__check {
    /* CLAUDE: Versteckt wenn unchecked */
    display: none;
    /* CLAUDE: Erfolgs-Farbe */
    color: var(--lhi-color-success);
    /* CLAUDE: Größe */
    font-size: 1rem;
}

.lhi-chip.is-checked .lhi-chip__check {
    /* CLAUDE: Anzeigen wenn checked */
    display: inline;
}

/* CLAUDE: Hidden Checkbox */
.lhi-chip input[type="checkbox"] {
    /* CLAUDE: Versteckt */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ========================================
   CLAUDE: EMOJI SCALE
   Zustands-Bewertung
   ======================================== */

/* CLAUDE: Scale-Container */
.lhi-emoji-scale {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Gleichmäßig verteilen */
    justify-content: space-between;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-md);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-md);
}

/* CLAUDE: Einzelne Option */
.lhi-emoji-scale__option {
    /* CLAUDE: Flexbox vertikal */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* CLAUDE: Gap */
    gap: var(--lhi-space-xs);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm);
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition */
    transition: all 200ms ease;
}

/* CLAUDE: Option Hover */
.lhi-emoji-scale__option:hover .lhi-emoji-scale__emoji {
    /* CLAUDE: Vergrößern */
    transform: scale(1.2);
}

/* CLAUDE: Emoji */
.lhi-emoji-scale__emoji {
    /* CLAUDE: Größe */
    font-size: 2rem;
    /* CLAUDE: Grayscale wenn nicht ausgewählt */
    filter: grayscale(50%) opacity(0.7);
    /* CLAUDE: Transition */
    transition: all 200ms ease;
}

/* CLAUDE: Emoji bei Auswahl */
.lhi-emoji-scale__option.is-selected .lhi-emoji-scale__emoji {
    /* CLAUDE: Volle Farbe */
    filter: none;
    /* CLAUDE: Vergrößert */
    transform: scale(1.2);
}

/* CLAUDE: Radio-Dot */
.lhi-emoji-scale__radio {
    /* CLAUDE: Größe */
    width: 20px;
    height: 20px;
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Transition */
    transition: all 150ms ease;
}

/* CLAUDE: Radio-Dot bei Auswahl */
.lhi-emoji-scale__option.is-selected .lhi-emoji-scale__radio {
    /* CLAUDE: Gold */
    border-color: var(--lhi-color-gold);
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Innerer weißer Ring */
    box-shadow: inset 0 0 0 4px var(--lhi-color-white);
}

/* CLAUDE: Label */
.lhi-emoji-scale__label {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kleine Schrift */
    font-size: var(--lhi-font-size-xs);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Max-Breite */
    max-width: 80px;
}

/* CLAUDE: Hidden Radio */
.lhi-emoji-scale__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ========================================
   CLAUDE: CONDITION-SCALE (ZUSTAND)
   Professionelle Zustandsanzeige mit Farbbalken
   Ersetzt die Emoji-Scale für bessere UX
   ======================================== */

/* CLAUDE: Container für Condition-Scale */
.lhi-condition-scale {
    /* CLAUDE: Flexbox für horizontale Anordnung */
    display: flex;
    /* CLAUDE: Gleichmäßig verteilen */
    justify-content: space-between;
    /* CLAUDE: Gap zwischen Items */
    gap: var(--lhi-space-sm);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-md);
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-md);
}

/* CLAUDE: Einzelne Zustandsoption */
.lhi-condition-scale__item {
    /* CLAUDE: Flexbox vertikal */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* CLAUDE: Gap zwischen Balken und Label */
    gap: var(--lhi-space-xs);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm);
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition für Hover-Effekt */
    transition: all 200ms ease;
    /* CLAUDE: Flexible Breite */
    flex: 1;
    /* CLAUDE: Min-Breite */
    min-width: 60px;
    /* CLAUDE: Max-Breite */
    max-width: 100px;
}

/* CLAUDE: Hover-Effekt */
.lhi-condition-scale__item:hover {
    /* CLAUDE: Leichter Hintergrund */
    background-color: var(--lhi-color-background);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
}

/* CLAUDE: Fokus-Styles für Accessibility */
.lhi-condition-scale__item:focus {
    /* CLAUDE: Outline */
    outline: 2px solid var(--lhi-color-gold);
    outline-offset: 2px;
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
}

/* CLAUDE: Ausgewählter Zustand */
.lhi-condition-scale__item.is-selected {
    /* CLAUDE: Hintergrund */
    background-color: rgba(var(--lhi-color-gold-rgb, 184, 154, 80), 0.1);
    /* CLAUDE: Border */
    border-radius: var(--lhi-radius-sm);
}

/* CLAUDE: Vertikaler Balken */
.lhi-condition-scale__bar {
    /* CLAUDE: Feste Breite */
    width: 40px;
    /* CLAUDE: Höhe für visuellen Effekt */
    height: 60px;
    /* CLAUDE: Hintergrund (grau) */
    background-color: var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-xs);
    /* CLAUDE: Relative Position für Fill */
    position: relative;
    /* CLAUDE: Overflow hidden */
    overflow: hidden;
    /* CLAUDE: Transition */
    transition: all 200ms ease;
}

/* CLAUDE: Farbiger Fill im Balken */
.lhi-condition-scale__fill {
    /* CLAUDE: Absolute Position */
    position: absolute;
    /* CLAUDE: Von unten füllen */
    bottom: 0;
    left: 0;
    right: 0;
    /* CLAUDE: Höhe aus CSS-Variable */
    height: var(--condition-level, 50%);
    /* CLAUDE: Farbe aus CSS-Variable */
    background-color: var(--condition-color, #888);
    /* CLAUDE: Radius oben */
    border-radius: var(--lhi-radius-xs) var(--lhi-radius-xs) 0 0;
    /* CLAUDE: Transition */
    transition: all 300ms ease;
    /* CLAUDE: Sanfter Gradient für 3D-Effekt */
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

/* CLAUDE: Hover-Effekt auf Balken */
.lhi-condition-scale__item:hover .lhi-condition-scale__bar {
    /* CLAUDE: Leicht vergrößern */
    transform: scaleY(1.05);
}

/* CLAUDE: Ausgewählter Balken */
.lhi-condition-scale__item.is-selected .lhi-condition-scale__bar {
    /* CLAUDE: Box-Shadow für Hervorhebung */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* CLAUDE: Etwas größer */
    transform: scaleY(1.1);
}

/* CLAUDE: Label unter dem Balken */
.lhi-condition-scale__label {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Kleine Schrift */
    font-size: var(--lhi-font-size-xs);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Line-Height */
    line-height: 1.2;
    /* CLAUDE: Transition */
    transition: color 200ms ease;
}

/* CLAUDE: Label bei Auswahl */
.lhi-condition-scale__item.is-selected .lhi-condition-scale__label {
    /* CLAUDE: Dunklere Farbe */
    color: var(--lhi-color-primary);
    /* CLAUDE: Fett */
    font-weight: 600;
}

/* CLAUDE: Hidden Radio Input */
.lhi-condition-scale__item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* CLAUDE: Responsive - Tablet */
@media (max-width: 768px) {
    .lhi-condition-scale {
        /* CLAUDE: Weniger Padding */
        padding: var(--lhi-space-sm);
        /* CLAUDE: Kleinerer Gap */
        gap: var(--lhi-space-xs);
    }

    .lhi-condition-scale__bar {
        /* CLAUDE: Kleinerer Balken */
        width: 32px;
        height: 50px;
    }

    .lhi-condition-scale__label {
        /* CLAUDE: Kleinere Schrift */
        font-size: 0.65rem;
    }

    .lhi-condition-scale__item {
        /* CLAUDE: Weniger Padding */
        padding: var(--lhi-space-xs);
        /* CLAUDE: Min-Breite anpassen */
        min-width: 50px;
    }
}

/* CLAUDE: Responsive - Mobile */
@media (max-width: 480px) {
    .lhi-condition-scale {
        /* CLAUDE: Horizontal scrollen erlauben */
        overflow-x: auto;
        /* CLAUDE: Flex-Wrap verhindern */
        flex-wrap: nowrap;
        /* CLAUDE: Scroll-Snap */
        scroll-snap-type: x mandatory;
        /* CLAUDE: Scrollbar verstecken */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .lhi-condition-scale::-webkit-scrollbar {
        display: none;
    }

    .lhi-condition-scale__item {
        /* CLAUDE: Scroll-Snap */
        scroll-snap-align: center;
        /* CLAUDE: Mindestbreite */
        min-width: 70px;
        /* CLAUDE: Flex-Shrink verhindern */
        flex-shrink: 0;
    }

    .lhi-condition-scale__bar {
        /* CLAUDE: Noch kleinerer Balken */
        width: 28px;
        height: 45px;
    }
}

/* ========================================
   CLAUDE: NAVIGATION
   Zurück/Weiter Buttons
   ======================================== */

/* CLAUDE: Navigation-Container */
.lhi-wizard-nav {
    /* CLAUDE: Flexbox */
    display: flex;
    /* CLAUDE: Space-between */
    justify-content: space-between;
    /* CLAUDE: Zentriert */
    align-items: center;
    /* CLAUDE: Gap */
    gap: var(--lhi-space-md);
}

/* CLAUDE: Zurück-Button */
.lhi-wizard-nav__back {
    /* CLAUDE: Flexbox */
    display: flex;
    align-items: center;
    gap: var(--lhi-space-xs);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) var(--lhi-space-md);
    /* CLAUDE: Transparent */
    background-color: transparent;
    /* CLAUDE: Border */
    border: 2px solid var(--lhi-color-border);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-base);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition */
    transition: all 150ms ease;
}

.lhi-wizard-nav__back:hover {
    /* CLAUDE: Border-Farbe */
    border-color: var(--lhi-color-text);
    /* CLAUDE: Text-Farbe */
    color: var(--lhi-color-text);
}

/* CLAUDE: Verstecken auf Step 1 */
.lhi-wizard-nav__back.is-hidden {
    visibility: hidden;
}

/* CLAUDE: Weiter-Button */
.lhi-wizard-nav__next {
    /* CLAUDE: Flexbox */
    display: flex;
    align-items: center;
    gap: var(--lhi-space-xs);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) var(--lhi-space-lg);
    /* CLAUDE: Gold Hintergrund */
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Weiß */
    color: var(--lhi-color-white);
    /* CLAUDE: Keine Border */
    border: none;
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-sm);
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-base);
    /* CLAUDE: Fett */
    font-weight: 600;
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition */
    transition: all 150ms ease;
}

.lhi-wizard-nav__next:hover {
    /* CLAUDE: Dunklerer Hintergrund */
    background-color: var(--lhi-color-secondary);
}

.lhi-wizard-nav__next:disabled {
    /* CLAUDE: Transparenz */
    opacity: 0.5;
    /* CLAUDE: Cursor */
    cursor: not-allowed;
}

/* CLAUDE: Pfeil-Animation */
.lhi-wizard-nav__next .lhi-wizard-nav__arrow {
    /* CLAUDE: Transition */
    transition: transform 150ms ease;
}

.lhi-wizard-nav__next:hover .lhi-wizard-nav__arrow {
    /* CLAUDE: Pfeil nach rechts */
    transform: translateX(4px);
}

/* CLAUDE: Submit-Button (letzter Step) */
.lhi-wizard-nav__submit {
    /* CLAUDE: Volle Breite */
    width: 100%;
    /* CLAUDE: Größere Höhe */
    height: 64px;
    /* CLAUDE: Größere Schrift */
    font-size: var(--lhi-font-size-lg);
}

/* ========================================
   CLAUDE: SUCCESS STATE
   Bestätigungs-Ansicht
   ======================================== */

/* CLAUDE: Success-Container */
.lhi-success {
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Padding */
    padding: var(--lhi-space-xl) var(--lhi-space-lg);
}

/* CLAUDE: Checkmark-Container */
.lhi-success__checkmark {
    /* CLAUDE: Größe */
    width: 100px;
    height: 100px;
    /* CLAUDE: Zentriert */
    margin: 0 auto var(--lhi-space-lg);
}

/* CLAUDE: SVG Checkmark */
.lhi-success__checkmark svg {
    /* CLAUDE: Volle Größe */
    width: 100%;
    height: 100%;
}

/* CLAUDE: Checkmark Kreis */
.lhi-success__circle {
    /* CLAUDE: Erfolgs-Farbe */
    stroke: var(--lhi-color-success);
    stroke-width: 3;
    /* CLAUDE: Dash-Array für Animation */
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    fill: none;
    /* CLAUDE: Animation */
    animation: lhi-draw-circle 0.6s ease forwards;
}

/* CLAUDE: Checkmark Haken */
.lhi-success__check {
    /* CLAUDE: Erfolgs-Farbe */
    stroke: var(--lhi-color-success);
    stroke-width: 3;
    /* CLAUDE: Dash-Array */
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    fill: none;
    /* CLAUDE: Animation mit Delay */
    animation: lhi-draw-check 0.3s 0.4s ease forwards;
}

/* CLAUDE: Headline */
.lhi-success__headline {
    /* CLAUDE: Serif */
    font-family: var(--lhi-font-serif);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-2xl);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-sm);
}

/* CLAUDE: Subheadline */
.lhi-success__subheadline {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-lg);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-secondary);
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-lg);
}

/* CLAUDE: Next-Steps Box */
.lhi-success__steps {
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-bg);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-md);
    /* CLAUDE: Radius */
    border-radius: var(--lhi-radius-md);
    /* CLAUDE: Text links */
    text-align: left;
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-lg);
}

/* CLAUDE: Steps-Titel */
.lhi-success__steps-title {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Fett */
    font-weight: 600;
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-md);
}

/* CLAUDE: Einzelner Step */
.lhi-success__step {
    /* CLAUDE: Flexbox */
    display: flex;
    align-items: flex-start;
    gap: var(--lhi-space-sm);
    /* CLAUDE: Margin */
    margin-bottom: var(--lhi-space-sm);
}

/* CLAUDE: Step-Nummer */
.lhi-success__step-number {
    /* CLAUDE: Feste Größe */
    width: 28px;
    height: 28px;
    /* CLAUDE: Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Hintergrund */
    background-color: var(--lhi-color-gold);
    /* CLAUDE: Weiß */
    color: var(--lhi-color-white);
    /* CLAUDE: Rund */
    border-radius: 50%;
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-sm);
    font-weight: 600;
    /* CLAUDE: Flex-Shrink verhindern */
    flex-shrink: 0;
}

/* CLAUDE: Step-Text */
.lhi-success__step-text {
    /* CLAUDE: Sans-Serif */
    font-family: var(--lhi-font-sans);
    /* CLAUDE: Größe */
    font-size: var(--lhi-font-size-base);
    /* CLAUDE: Farbe */
    color: var(--lhi-color-text);
}

/* CLAUDE: CTA-Buttons */
.lhi-success__actions {
    /* CLAUDE: Flexbox */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--lhi-space-sm);
}

/* ========================================
   CLAUDE: RESPONSIVE
   Mobile-Anpassungen
   ======================================== */

/* CLAUDE: Tablet und kleiner */
@media (max-width: 768px) {
    /* CLAUDE: Progress Desktop ausblenden */
    .lhi-progress__steps {
        display: none;
    }

    /* CLAUDE: Progress Mobile anzeigen */
    /* CLAUDE: Bugfix: Klassenname korrigiert */
    .lhi-progress-mobile {
        display: block;
    }

    /* CLAUDE: Type-Cards - 2 Spalten auf Tablet */
    .lhi-type-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CLAUDE: Small Cards - 3 Spalten auf Tablet für lange Wörter */
    .lhi-type-cards--small {
        grid-template-columns: repeat(3, 1fr);
    }

    /* CLAUDE: Row-Layout auf Tablet als Grid */
    .lhi-type-cards--row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--lhi-space-sm);
    }

    /* CLAUDE: Form-Row einspaltig */
    .lhi-form-row {
        grid-template-columns: 1fr;
    }

    /* CLAUDE: Emoji-Scale kompakter */
    .lhi-emoji-scale {
        padding: var(--lhi-space-sm);
    }

    .lhi-emoji-scale__emoji {
        font-size: 1.5rem;
    }

    .lhi-emoji-scale__label {
        font-size: 0.7rem;
        max-width: 60px;
    }

    /* CLAUDE: Wizard Padding reduzieren */
    .lhi-wizard__body {
        padding: var(--lhi-space-md);
    }

    .lhi-wizard__header,
    .lhi-wizard__footer {
        padding-left: var(--lhi-space-md);
        padding-right: var(--lhi-space-md);
    }

    /* CLAUDE: Form-Group Grid auf Tablet einspaltig */
    /* CLAUDE: Wichtig für Step 3 - Grundstück/Zimmer nicht abschneiden */
    .lhi-form-group--grid {
        grid-template-columns: 1fr;
    }

    /* CLAUDE: Stepper-Buttons etwas kleiner auf Tablet */
    .lhi-stepper__btn {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    /* CLAUDE: Stepper-Input anpassen */
    .lhi-stepper__input {
        height: 44px;
        width: 70px;
    }

    /* CLAUDE: Energy-Scale Items kompakter auf Tablet */
    .lhi-energy-scale__item {
        padding: var(--lhi-space-xs) var(--lhi-space-xs);
    }

    /* CLAUDE: Energy-Scale Label etwas kleiner */
    .lhi-energy-scale__label {
        font-size: 0.8rem;
    }
}

/* CLAUDE: Mobile (klein) */
@media (max-width: 480px) {
    /* CLAUDE: Wizard kein Rand-Padding */
    .lhi-wizard {
        padding: 0;
    }

    /* CLAUDE: Wizard-Card keine abgerundeten Ecken */
    .lhi-wizard__card {
        border-radius: 0;
    }

    /* CLAUDE: Type-Cards - 2 Spalten auf Mobile */
    .lhi-type-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--lhi-space-sm);
    }

    /* CLAUDE: Small Cards auch 2 Spalten auf Mobile */
    .lhi-type-cards--small {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CLAUDE: Row-Layout auf Mobile als Grid für symmetrische Verteilung */
    .lhi-type-cards--row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--lhi-space-sm);
    }

    /* CLAUDE: Row-Cards volle Breite der Grid-Zelle */
    .lhi-type-cards--row .lhi-type-card {
        width: 100%;
        justify-content: center;
    }

    /* CLAUDE: Bei sehr kleinen Screens Labels umbrechen erlauben */
    .lhi-type-card__label {
        white-space: normal;
        hyphens: auto;
        -webkit-hyphens: auto;
        font-size: 0.75rem;
    }

    /* CLAUDE: Kleinere Cards */
    .lhi-type-card {
        padding: var(--lhi-space-xs);
        min-height: 48px;
    }

    .lhi-type-card__icon {
        font-size: 2rem;
    }

    /* CLAUDE: Navigation volle Breite */
    .lhi-wizard-nav {
        flex-direction: column;
    }

    .lhi-wizard-nav__back,
    .lhi-wizard-nav__next {
        width: 100%;
        justify-content: center;
    }

    .lhi-wizard-nav__back {
        order: 2;
    }

    .lhi-wizard-nav__next {
        order: 1;
    }

    /* CLAUDE: Emoji-Scale vertikal */
    .lhi-emoji-scale {
        flex-direction: column;
        gap: var(--lhi-space-sm);
    }

    .lhi-emoji-scale__option {
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        padding: var(--lhi-space-sm);
        border-bottom: 1px solid var(--lhi-color-border);
    }

    .lhi-emoji-scale__option:last-child {
        border-bottom: none;
    }

    .lhi-emoji-scale__label {
        max-width: none;
        text-align: left;
    }

    /* CLAUDE: Energy-Scale horizontal scrollbar auf Mobile */
    /* CLAUDE: Padding oben/unten für Outline + Scale der Selection */
    .lhi-energy-scale {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0;
        margin: 0;
    }

    /* CLAUDE: Energy-Scale Items minimale Breite */
    .lhi-energy-scale__item {
        min-width: 36px;
        flex: 0 0 auto;
        padding: var(--lhi-space-xs);
    }

    /* CLAUDE: Energy-Scale Label kleiner */
    .lhi-energy-scale__label {
        font-size: 0.75rem;
    }

    /* CLAUDE: Stepper noch kompakter auf kleinen Screens */
    .lhi-stepper__btn {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }

    /* CLAUDE: Stepper-Input kompakt */
    .lhi-stepper__input {
        height: 40px;
        width: 60px;
        font-size: 1rem;
    }

    /* CLAUDE: Stepper Unit kleiner */
    .lhi-stepper__unit {
        font-size: 0.875rem;
    }

    /* CLAUDE: Range-Input-Wrapper responsive */
    .lhi-range-input-wrapper {
        flex-wrap: wrap;
        gap: var(--lhi-space-xs);
    }

    /* CLAUDE: Form-Input Small responsive Breite */
    /* CLAUDE: Breiter für 3-stellige Zahlen (z.B. 246 m²) */
    .lhi-form-input--small {
        width: 100%;
        max-width: 120px;
        min-width: 80px;
    }
}

/* ========================================
   CLAUDE: ANIMATIONS
   Übergänge und Micro-Interactions
   ======================================== */

/* CLAUDE: Step Slide-In */
@keyframes lhi-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes lhi-slide-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

/* CLAUDE: Step-Container Animation nur für aktive Steps */
.lhi-wizard__step.is-active {
    animation: lhi-slide-in-right 0.3s ease forwards;
}

.lhi-wizard__step.is-leaving {
    animation: lhi-slide-out-left 0.3s ease forwards;
}

/* CLAUDE: Draw Circle (Success) */
@keyframes lhi-draw-circle {
    to {
        stroke-dashoffset: 0;
    }
}

/* CLAUDE: Draw Check (Success) */
@keyframes lhi-draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

/* CLAUDE: Shake (Error) */
@keyframes lhi-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.lhi-form-group.has-error {
    animation: lhi-shake 0.4s ease;
}

/* CLAUDE: Fade-In */
@keyframes lhi-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* CLAUDE: Conditional Content Fade */
.lhi-conditional {
    animation: lhi-fade-in 0.2s ease forwards;
}

/* CLAUDE: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   CLAUDE: RECHTLICHE COMPLIANCE STYLES
   Neue Styles für B2B/B2C, Widerruf, Trust-Badges
   Version 2.0 - Phase 1 Implementierung
   ======================================== */

/* CLAUDE: Legal Notice Box - Wichtiger Hinweis */
.lhi-legal-notice {
    /* CLAUDE: Flexbox für Icon und Text */
    display: flex;
    align-items: flex-start;
    gap: var(--lhi-space-sm);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-md);
    /* CLAUDE: Hintergrundfarbe - dezent */
    background-color: var(--lhi-color-warning-light, #FFF7DF);
    /* CLAUDE: Rahmen links */
    border-left: 4px solid var(--lhi-color-warning, #8C6E00);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: 0 var(--lhi-radius-sm) var(--lhi-radius-sm) 0;
    /* CLAUDE: Abstand nach oben und unten */
    margin: var(--lhi-space-lg) 0;
}

/* CLAUDE: Legal Notice Icon */
.lhi-legal-notice__icon {
    /* CLAUDE: Flex-Shrink verhindern */
    flex-shrink: 0;
    /* CLAUDE: Icon-Farbe */
    color: var(--lhi-color-warning, #8C6E00);
    /* CLAUDE: Leichtes Margin für Ausrichtung */
    margin-top: 2px;
}

/* CLAUDE: Legal Notice Content */
.lhi-legal-notice__content {
    /* CLAUDE: Text-Styling */
    font-size: var(--lhi-font-size-sm);
    line-height: 1.5;
    color: var(--lhi-color-text);
}

/* CLAUDE: Legal Checkboxes Container */
.lhi-legal-checkboxes {
    /* CLAUDE: Flex-Column für gestapelte Checkboxen */
    display: flex;
    flex-direction: column;
    gap: var(--lhi-space-md);
    /* CLAUDE: Oberer Abstand */
    margin-top: var(--lhi-space-lg);
}

/* CLAUDE: Widerruf Container - Conditional Display */
.lhi-form-field--widerruf {
    /* CLAUDE: Standardmäßig hidden per HTML */
    /* CLAUDE: Wird per JS eingeblendet wenn kundentyp="privat" */
}

/* CLAUDE: Widerruf Container - Animation bei Einblenden */
.lhi-form-field--widerruf:not([hidden]) {
    animation: lhi-fade-in 0.3s ease forwards;
}

/* CLAUDE: Kundentyp Cards - Icons */
.lhi-type-cards--kundentyp .lhi-type-card {
    /* CLAUDE: Flexbox für Icon + Label */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lhi-space-xs);
    /* CLAUDE: Etwas mehr Padding */
    padding: var(--lhi-space-md);
}

/* CLAUDE: Kundentyp Card Icon */
.lhi-type-card__icon {
    /* CLAUDE: Icon-Größe */
    width: 40px;
    height: 40px;
    /* CLAUDE: Zentriertes Icon */
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Kreisförmiger Hintergrund */
    background-color: var(--lhi-color-bg);
    border-radius: 50%;
    /* CLAUDE: Transition für Hover */
    transition: all var(--lhi-transition-fast);
}

/* CLAUDE: Kundentyp Card Icon - Selected State */
.lhi-type-card.is-selected .lhi-type-card__icon {
    /* CLAUDE: Gold-Hintergrund bei Auswahl */
    background-color: var(--lhi-color-gold);
    color: var(--lhi-color-white);
}

/* CLAUDE: Trust Badges Inline Container */
.lhi-trust-badges--inline {
    /* CLAUDE: Flexbox für horizontale Anordnung */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--lhi-space-md);
    /* CLAUDE: Oberer Abstand */
    margin-top: var(--lhi-space-lg);
    /* CLAUDE: Padding */
    padding: var(--lhi-space-sm) 0;
}

/* CLAUDE: Single Trust Badge */
.lhi-trust-badge {
    /* CLAUDE: Flexbox für Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: var(--lhi-space-xs);
    /* CLAUDE: Styling */
    font-size: var(--lhi-font-size-xs);
    color: var(--lhi-color-graphite);
    /* CLAUDE: Dezenter Hintergrund */
    background-color: var(--lhi-color-bg);
    padding: var(--lhi-space-xs) var(--lhi-space-sm);
    border-radius: var(--lhi-radius-sm);
}

/* CLAUDE: Trust Badge Icon */
.lhi-trust-badge svg {
    /* CLAUDE: Icon-Größe */
    width: 16px;
    height: 16px;
    /* CLAUDE: Icon-Farbe - Success Green */
    color: var(--lhi-color-success, #2E7D32);
}

/* CLAUDE: Fieldset Reset für Kundentyp */
.lhi-form-field--kundentyp fieldset {
    /* CLAUDE: Reset Browser-Styles */
    border: none;
    padding: 0;
    margin: 0;
}

/* CLAUDE: Legend als Label */
.lhi-form-field--kundentyp legend {
    /* CLAUDE: Wie andere Labels stylen */
    font-weight: 600;
    margin-bottom: var(--lhi-space-sm);
    color: var(--lhi-color-text);
}

/* CLAUDE: Marketing Checkbox - dezenter Stil */
.lhi-form-field--marketing {
    /* CLAUDE: Optischer Hinweis, dass optional */
    opacity: 0.9;
}

.lhi-form-field--marketing .lhi-checkbox__text {
    /* CLAUDE: Etwas kleinere Schrift */
    font-size: var(--lhi-font-size-sm);
}

/* ========================================
   CLAUDE: RESPONSIVE ANPASSUNGEN
   ======================================== */

@media (max-width: 767px) {
    /* CLAUDE: Legal Notice - Stack auf Mobile */
    .lhi-legal-notice {
        padding: var(--lhi-space-sm);
    }

    /* CLAUDE: Trust Badges - Vertikal auf Mobile */
    .lhi-trust-badges--inline {
        flex-direction: column;
        gap: var(--lhi-space-xs);
    }

    /* CLAUDE: Trust Badge - Volle Breite */
    .lhi-trust-badge {
        width: 100%;
        justify-content: center;
    }

    /* CLAUDE: Kundentyp Cards - Volle Breite */
    .lhi-type-cards--kundentyp .lhi-type-card {
        flex: 1 1 100%;
    }
}

/* ========================================
   CLAUDE: WIZARD DESIGN-OPTIMIERUNGEN
   CLAUDE: SEO-Update 2026-01-13
   CLAUDE: Verbesserte Schatten, Hover, Micro-Interactions
   ======================================== */

/* CLAUDE: Verfeinerte Schatten für Wizard-Card */
/* CLAUDE: Anpassen: rgba-Werte für Schatten-Intensität */
.lhi-wizard__card {
    box-shadow: 0 4px 24px rgba(59, 42, 26, 0.12);
    transition: box-shadow 0.3s ease;
}

/* CLAUDE: Type-Cards verbesserte Hover-Animation */
/* CLAUDE: Anpassen: translateY-Wert für Lift-Effekt */
.lhi-type-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.lhi-type-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(138, 107, 63, 0.2);
}

/* CLAUDE: Progress-Bar mit Gradient */
/* CLAUDE: Anpassen: Gradient-Farben aus Theme-Palette */
.lhi-progress__line {
    background: linear-gradient(90deg,
        var(--lhi-color-gold, #8a6b3f) 0%,
        var(--lhi-color-gold-light, #C19A6B) 100%
    );
}

/* CLAUDE: Micro-Interaction: Card Selection Pulse */
/* CLAUDE: Anpassen: scale-Wert und Dauer */
.lhi-type-card.is-selected {
    animation: lhi-pulse 0.3s ease;
}

@keyframes lhi-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* CLAUDE: Mobile Sticky Navigation */
/* CLAUDE: Footer bleibt beim Scrollen sichtbar */
/* CLAUDE: Anpassen: bottom-Wert falls CTA-Bar vorhanden */
@media (max-width: 768px) {
    .lhi-wizard__footer {
        position: sticky;
        bottom: 0;
        z-index: 100;
        background-color: var(--lhi-color-white);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    }

    /* CLAUDE: Wenn Mobile CTA-Bar aktiv, Footer anpassen */
    .has-mobile-cta-bar .lhi-wizard__footer {
        bottom: 60px;
    }
}

/* CLAUDE: Reduced Motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    .lhi-type-card,
    .lhi-wizard__card {
        transition: none;
    }

    .lhi-type-card:hover {
        transform: none;
    }

    .lhi-type-card.is-selected {
        animation: none;
    }
}

/* ========================================
   CLAUDE: PLZ AUTOCOMPLETE
   CLAUDE: Dropdown für Postleitzahl-Vorschläge
   CLAUDE: Step 2 des Bewertungs-Wizards
   ======================================== */

/* CLAUDE: Autocomplete-Container */
/* CLAUDE: Anpassen: max-height für mehr/weniger Einträge */
.lhi-plz-autocomplete {
    /* CLAUDE: Absolute Positionierung unter Input */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* CLAUDE: Z-Index über anderen Elementen */
    z-index: 1000;
    /* CLAUDE: Maximale Höhe mit Scroll */
    max-height: 280px;
    overflow-y: auto;
    /* CLAUDE: Weißer Hintergrund */
    background-color: var(--lhi-color-white);
    /* CLAUDE: Border passend zum Input */
    border: 2px solid var(--lhi-color-gold);
    border-top: none;
    /* CLAUDE: Abgerundete Ecken unten */
    border-radius: 0 0 var(--lhi-radius-sm) var(--lhi-radius-sm);
    /* CLAUDE: Schatten für Tiefe */
    box-shadow: 0 8px 24px rgba(59, 42, 26, 0.15);
    /* CLAUDE: Margin oben für Abstand zum Input */
    margin-top: -2px;
}

/* CLAUDE: Versteckter Zustand */
.lhi-plz-autocomplete[hidden] {
    display: none;
}

/* CLAUDE: Einzelner Vorschlag-Eintrag */
/* CLAUDE: Anpassen: Padding für größere/kleinere Klickfläche */
.lhi-plz-autocomplete__item {
    /* CLAUDE: Flexbox für PLZ + Ort */
    display: flex;
    align-items: center;
    gap: var(--lhi-space-sm);
    /* CLAUDE: Padding für Klickfläche */
    padding: var(--lhi-space-sm) var(--lhi-space-md);
    /* CLAUDE: Cursor */
    cursor: pointer;
    /* CLAUDE: Transition für Hover */
    transition: background-color 150ms ease;
    /* CLAUDE: Border zwischen Einträgen */
    border-bottom: 1px solid var(--lhi-color-border);
}

/* CLAUDE: Letzter Eintrag ohne Border */
.lhi-plz-autocomplete__item:last-child {
    border-bottom: none;
}

/* CLAUDE: Hover-State */
.lhi-plz-autocomplete__item:hover {
    /* CLAUDE: Heller Gold-Hintergrund */
    background-color: rgba(138, 107, 63, 0.08);
}

/* CLAUDE: Aktiver State (Keyboard-Navigation) */
.lhi-plz-autocomplete__item.is-active {
    /* CLAUDE: Stärkerer Hintergrund */
    background-color: rgba(138, 107, 63, 0.15);
}

/* CLAUDE: PLZ-Nummer im Vorschlag */
.lhi-plz-autocomplete__plz {
    /* CLAUDE: Fett und hervorgehoben */
    font-family: var(--lhi-font-sans);
    font-weight: 700;
    font-size: var(--lhi-font-size-base);
    color: var(--lhi-color-text);
    /* CLAUDE: Feste Breite für Ausrichtung */
    min-width: 60px;
}

/* CLAUDE: Ortsname im Vorschlag */
.lhi-plz-autocomplete__ort {
    /* CLAUDE: Normal gewichteter Text */
    font-family: var(--lhi-font-sans);
    font-weight: 400;
    font-size: var(--lhi-font-size-sm);
    color: var(--lhi-color-secondary);
    /* CLAUDE: Ellipsis für lange Ortsnamen */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CLAUDE: PLZ-Input mit Autocomplete - angepasste Border-Radius */
#bewertung-plz[aria-expanded="true"] {
    /* CLAUDE: Nur oben abgerundet wenn Dropdown offen */
    border-radius: var(--lhi-radius-sm) var(--lhi-radius-sm) 0 0;
    /* CLAUDE: Gold Border wenn aktiv */
    border-color: var(--lhi-color-gold);
}

/* CLAUDE: Scrollbar-Styling für Autocomplete */
.lhi-plz-autocomplete::-webkit-scrollbar {
    width: 8px;
}

.lhi-plz-autocomplete::-webkit-scrollbar-track {
    background: var(--lhi-color-bg);
    border-radius: 4px;
}

.lhi-plz-autocomplete::-webkit-scrollbar-thumb {
    background: var(--lhi-color-border);
    border-radius: 4px;
}

.lhi-plz-autocomplete::-webkit-scrollbar-thumb:hover {
    background: var(--lhi-color-secondary);
}

/* CLAUDE: Mobile Anpassungen für Autocomplete */
@media (max-width: 480px) {
    .lhi-plz-autocomplete {
        /* CLAUDE: Kleinere Max-Höhe auf Mobile */
        max-height: 200px;
    }

    .lhi-plz-autocomplete__item {
        /* CLAUDE: Größere Touch-Fläche */
        padding: var(--lhi-space-md);
    }

    .lhi-plz-autocomplete__plz {
        /* CLAUDE: Etwas größer für Touch */
        font-size: var(--lhi-font-size-lg);
    }
}