/* CLAUDE: Premium Property Card Styles */
/* CLAUDE: Professionelle Immobilien-Karten mit Logo, Overlay, Icons */
/* CLAUDE: Responsive für 4/3/2/1 Spalten-Layouts */

/* ============================================
   CLAUDE: CSS Custom Properties
   ============================================ */

/* CLAUDE: Zentrale Variablen für einfache Anpassung */
/* CLAUDE: v4.0: Erweitert um Customizer-steuerbare Variablen */
:root {
    /* CLAUDE: Card-Dimensionen */
    --lhi-premium-card-radius: 12px;
    --lhi-premium-card-padding: 0;

    /* CLAUDE: Schatten-Varianten */
    --lhi-premium-card-shadow: 0 4px 20px rgba(59, 42, 26, 0.12);
    --lhi-premium-card-shadow-hover: 0 12px 40px rgba(59, 42, 26, 0.2);

    /* CLAUDE: Badge-Farben (werden per inline-style überschrieben) */
    --lhi-badge-neuzugang: #2E7D32;
    --lhi-badge-exklusiv: #8a6b3f;
    --lhi-badge-reserviert: #F57C00;
    --lhi-badge-verkauft: #C62828;

    /* CLAUDE: v4.0 - Bild-Aspect-Ratio (via Customizer änderbar) */
    /* CLAUDE: 3/2 = 1.5 (optimal für Immobilien) */
    /* CLAUDE: 16/9 = 1.78, 4/3 = 1.33 */
    --lhi-premium-image-ratio: 3 / 2;

    /* CLAUDE: v4.0 OPTIMIERT - Overlay für optionalen Text auf Bild */
    /* CLAUDE: Default: ausgeblendet (Bild dominiert) */
    --lhi-premium-overlay: linear-gradient(
        to top,
        rgba(59, 42, 26, 0.7) 0%,
        rgba(59, 42, 26, 0.3) 20%,
        transparent 40%
    );

    /* CLAUDE: Transitions */
    --lhi-premium-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* CLAUDE: v4.0 - Icon/Tag-Größen */
    --lhi-premium-tag-font-size: 0.9375rem;
    --lhi-premium-tag-padding: 0.5rem 1rem;
}

/* ============================================
   CLAUDE: Grid Container (vom Shortcode)
   ============================================ */

/* CLAUDE: 2-Spalten Grid auf Desktop - OPTIMIERT für Premium-Darstellung */
/* CLAUDE: v3.0: Größere Cards für bessere Bild-Präsentation */
.lhi-premium-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--xl, 2.5rem);
    padding: var(--wp--preset--spacing--md, 1.5rem) 0;
}

/* CLAUDE: Tablet Portrait: 2 Spalten beibehalten */
@media (max-width: 1023px) {
    .lhi-premium-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wp--preset--spacing--lg, 2rem);
    }
}

/* CLAUDE: Mobile: 1 Spalte */
@media (max-width: 767px) {
    .lhi-premium-grid {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--lg, 2rem);
    }
}

/* CLAUDE: Spalten-Varianten via data-Attribut */
/* CLAUDE: v3.0: Standard ist jetzt 2 Spalten für Premium-Look */
.lhi-premium-grid[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.lhi-premium-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

/* CLAUDE: 4 Spalten → 2 auf Tablet */
@media (max-width: 1199px) {
    .lhi-premium-grid[data-columns="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
    .lhi-premium-grid[data-columns="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* CLAUDE: Alle auf 1 Spalte bei Mobile */
@media (max-width: 767px) {
    .lhi-premium-grid[data-columns="4"],
    .lhi-premium-grid[data-columns="3"],
    .lhi-premium-grid[data-columns="2"] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CLAUDE: Premium Card Container
   ============================================ */

/* CLAUDE: Haupt-Card-Container */
.lhi-premium-card {
    /* CLAUDE: Flexbox für vertikale Anordnung */
    display: flex;
    flex-direction: column;
    /* CLAUDE: WICHTIG - Volle Breite der Grid-Zelle ausfüllen */
    /* CLAUDE: Ohne width:100% schrumpft Flex-Container auf Inhaltsgröße */
    /* CLAUDE: Dies verhindert inkonsistente Kartenbreiten bei unterschiedlichem Inhalt */
    width: 100%;
    /* CLAUDE: Weißer Hintergrund */
    background-color: var(--wp--preset--color--white, #FFFFFF);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-premium-card-radius);
    /* CLAUDE: Schatten */
    box-shadow: var(--lhi-premium-card-shadow);
    /* CLAUDE: Overflow für abgerundete Ecken */
    overflow: hidden;
    /* CLAUDE: v6.3: Padding für Bild-Abstand (verhindert Margin-Collapse) */
    /* CLAUDE: Mindestens 5px Abstand gefordert - wir nutzen 12px für Konsistenz */
    padding: 12px 12px 0 12px;
    /* CLAUDE: Transition für Hover */
    transition: transform var(--lhi-premium-transition),
                box-shadow var(--lhi-premium-transition);
}

/* CLAUDE: Hover-Effekt */
@media (hover: hover) {
    .lhi-premium-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--lhi-premium-card-shadow-hover);
    }
}

/* CLAUDE: Focus-within für Accessibility */
.lhi-premium-card:focus-within {
    outline: 3px solid var(--wp--preset--color--heritage-gold, #8a6b3f);
    outline-offset: 2px;
}

/* ============================================
   CLAUDE: Logo-Bereich
   ============================================ */

/* CLAUDE: Logo-Container oben in der Karte */
.lhi-premium-card__logo {
    /* CLAUDE: Zentriert */
    display: flex;
    justify-content: center;
    align-items: center;
    /* CLAUDE: Hintergrund */
    background-color: var(--wp--preset--color--white, #FFFFFF);
    /* CLAUDE: Padding */
    padding: var(--wp--preset--spacing--sm, 0.75rem) var(--wp--preset--spacing--md, 1.5rem);
    /* CLAUDE: Border unten */
    border-bottom: 1px solid rgba(59, 42, 26, 0.08);
}

/* CLAUDE: Logo-Bild */
.lhi-premium-card__logo-img {
    max-width: 160px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* CLAUDE: Fallback: Text statt Logo */
.lhi-premium-card__logo-text {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--dark-umber, #3B2A1A);
    letter-spacing: 0.05em;
}

/* ============================================
   CLAUDE: v5.1 - Dezenter Header-Abstand
   ============================================ */

/* CLAUDE: Weißer Abstand für eleganten Look */
/* CLAUDE: Gibt dem Bild Luft zum oberen Card-Rand */
/* CLAUDE: v5.1: Kein farbiger Streifen mehr, nur weißer Abstand */
.lhi-premium-card__header-accent {
    /* CLAUDE: Größerer Abstand für bessere Optik */
    height: 16px;
    /* CLAUDE: Dezent: Gleiche Farbe wie Card-Hintergrund */
    background-color: var(--wp--preset--color--white, #FFFFFF);
    /* CLAUDE: Kein Flex-Shrink */
    flex-shrink: 0;
}

/* ============================================
   CLAUDE: Bild-Container
   ============================================ */

/* CLAUDE: Wrapper für Bild und Overlays */
.lhi-premium-card__image-wrapper {
    position: relative;
    /* CLAUDE: v5.0: Overflow VISIBLE für Ribbon-Badges! */
    overflow: visible;
    /* CLAUDE: v6.3: Kein Margin nötig - Card hat padding */
}

/* CLAUDE: Bild-Container mit Aspect-Ratio - v6.3 */
.lhi-premium-card__image {
    /* CLAUDE: 3:2 Aspect-Ratio optimal für Immobilienfotos */
    /* CLAUDE: v4.0: Zeigt mehr vom Gebäude als 16:9 */
    /* CLAUDE: Anpassbar via Customizer: lhi_cards_aspect_ratio */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    /* CLAUDE: v6.3: ALLE 4 Ecken abgerundet - Bild schwebt in der Card */
    /* CLAUDE: Oben UND unten abgerundet für eleganten, modernen Look */
    border-radius: var(--lhi-premium-card-radius);
    /* CLAUDE: FALLBACK - Hintergrund für fehlende Bilder */
    /* CLAUDE: Eleganter Gradient statt grauer Leerfläche */
    background: linear-gradient(
        135deg,
        var(--wp--preset--color--porous-stone, #DCD7CE) 0%,
        var(--wp--preset--color--graphite, #594834) 100%
    );
    /* CLAUDE: Zusätzlich: Placeholder-Icon via CSS */
    position: relative;
}

/* CLAUDE: Placeholder-Icon wenn kein Bild vorhanden */
/* CLAUDE: Zeigt ein dezentes Haus-Symbol */
.lhi-premium-card__image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    /* CLAUDE: SVG Haus-Icon als Hintergrund */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
    /* CLAUDE: Versteckt wenn Bild vorhanden (img überdeckt) */
    z-index: 0;
}

/* CLAUDE: Das Bild selbst */
.lhi-premium-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* CLAUDE: Zoom bei Hover */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* CLAUDE: Über dem Placeholder positionieren */
    position: relative;
    z-index: 1;
}

/* CLAUDE: Broken Image Styling - versteckt hässliche broken-img Icons */
.lhi-premium-card__image img[src=""],
.lhi-premium-card__image img:not([src]) {
    opacity: 0;
}

/* CLAUDE: Zoom-Effekt bei Card-Hover */
@media (hover: hover) {
    .lhi-premium-card:hover .lhi-premium-card__image img {
        transform: scale(1.08);
    }
}

/* ============================================
   CLAUDE: v6.0 - Eck-Banner System
   ============================================ */

/* CLAUDE: v6.0: Eck-Banner statt diagonale Ribbons */
/* CLAUDE: Vorteile: Kein Clipping, bessere Lesbarkeit, sauberes Design */
.lhi-premium-card__badge {
    /* CLAUDE: Absolute Position in der Ecke */
    position: absolute;
    /* CLAUDE: Dynamische Farbe via CSS Variable */
    background-color: var(--badge-color, #2E7D32);
    color: var(--wp--preset--color--white, #FFFFFF);
    /* CLAUDE: v6.0: Kompakteres Padding für Eck-Banner */
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* CLAUDE: Kein Umbruch */
    white-space: nowrap;
    /* CLAUDE: Dezenter Schatten */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* CLAUDE: Z-Index über Bild */
    z-index: 20;
    /* CLAUDE: Text zentrieren */
    text-align: center;
}

/* CLAUDE: =============================================
   CLAUDE: v6.0 - ECK-BANNER RECHTS OBEN (Neuzugang, Exklusiv)
   ============================================= */

/* CLAUDE: v6.2: Eck-Banner rechts oben - mit passenden Ecken */
.lhi-premium-card__badge--right {
    /* CLAUDE: Position: rechte obere Ecke */
    top: 0;
    right: 0;
    left: auto;
    /* CLAUDE: v6.0: KEINE Rotation - horizontaler Text */
    transform: none;
    /* CLAUDE: v6.2: Außenecke passend zur Card/Bild abrunden */
    /* CLAUDE: top-left: 0, top-right: 12px (Außen), bottom-right: 0, bottom-left: 8px (Innen) */
    border-radius: 0 var(--lhi-premium-card-radius) 0 8px;
}

/* CLAUDE: =============================================
   CLAUDE: v6.0 - ECK-BANNER LINKS OBEN (Verkauft, Reserviert)
   ============================================= */

/* CLAUDE: v6.2: Eck-Banner links oben - mit passenden Ecken */
.lhi-premium-card__badge--left {
    /* CLAUDE: Position: linke obere Ecke */
    top: 0;
    left: 0;
    right: auto;
    /* CLAUDE: v6.0: KEINE Rotation - horizontaler Text */
    transform: none;
    /* CLAUDE: v6.2: Außenecke passend zur Card/Bild abrunden */
    /* CLAUDE: top-left: 12px (Außen), top-right: 0, bottom-right: 8px (Innen), bottom-left: 0 */
    border-radius: var(--lhi-premium-card-radius) 0 8px 0;
}

/* CLAUDE: =============================================
   CLAUDE: v6.0 - Mobile Anpassungen für Eck-Banner
   ============================================= */

@media (max-width: 767px) {
    .lhi-premium-card__badge {
        font-size: 0.625rem;
        padding: 0.375rem 0.625rem;
    }
}

/* CLAUDE: =============================================
   CLAUDE: Badge-Farben für verschiedene Status
   ============================================= */

/* CLAUDE: Neuzugang - Grün */
.lhi-premium-card__badge[data-badge-type="neuzugang"] {
    --badge-color: #2E7D32;
}

/* CLAUDE: Exklusiv - Gold */
.lhi-premium-card__badge[data-badge-type="exklusiv"] {
    --badge-color: #8a6b3f;
}

/* CLAUDE: Reserviert - Orange */
.lhi-premium-card__badge[data-badge-type="reserviert"] {
    --badge-color: #E65100;
}

/* CLAUDE: Verkauft - Rot/Dunkel */
.lhi-premium-card__badge[data-badge-type="verkauft"] {
    --badge-color: #B71C1C;
}

/* CLAUDE: Vermietet - Blaugrau */
.lhi-premium-card__badge[data-badge-type="vermietet"] {
    --badge-color: #455A64;
}

/* ============================================
   CLAUDE: Text-Overlay auf Bild
   ============================================ */

/* CLAUDE: Overlay mit Gradient - v3.0 Minimal */
/* CLAUDE: Icons sind jetzt UNTER dem Bild, Overlay nur noch für dezente Textlegierung */
.lhi-premium-card__overlay {
    /* CLAUDE: Absolute über dem Bild */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* CLAUDE: Minimaler Gradient-Hintergrund */
    background: var(--lhi-premium-overlay);
    /* CLAUDE: Reduziertes Padding da keine Icons mehr */
    padding: var(--wp--preset--spacing--md, 1.5rem);
    /* CLAUDE: Text weiß */
    color: var(--wp--preset--color--white, #FFFFFF);
    /* CLAUDE: Pointer-Events nur auf Text */
    pointer-events: none;
}

/* CLAUDE: Text-Elemente im Overlay klickbar machen */
.lhi-premium-card__overlay > * {
    pointer-events: auto;
}

/* CLAUDE: Label (kursiv, z.B. "Einfaches") */
.lhi-premium-card__label {
    display: block;
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

/* CLAUDE: Titel - OPTIMIERT für lange Texte */
/* CLAUDE: Problem: "Gartenoase in Tauberbischofsheim" wurde abgeschnitten */
/* CLAUDE: Lösung: Mehrzeilige Darstellung mit line-clamp */
.lhi-premium-card__title {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    /* CLAUDE: Responsive Schriftgröße - kleiner auf schmalen Karten */
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.25rem 0;
    color: inherit;
    /* CLAUDE: Mehrzeilige Darstellung mit max 2 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* CLAUDE: Wortumbruch für lange Wörter wie "Tauberbischofsheim" */
    word-break: break-word;
    hyphens: auto;
    /* CLAUDE: Text-Shadow für bessere Lesbarkeit auf Bildern */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* CLAUDE: Untertitel */
.lhi-premium-card__subtitle {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.3;
}

/* ============================================
   CLAUDE: Icons-Leiste
   ============================================ */

/* CLAUDE: Icons-Leiste v3.0 - UNTER dem Bild im Content-Bereich */
/* CLAUDE: v6.0 - Icons-Leiste - Transparente Info-Tags */
/* CLAUDE: Klar unterscheidbar vom Button durch dezentes Styling */
.lhi-premium-card__icons {
    /* CLAUDE: Keine absolute Positionierung */
    position: static;
    /* CLAUDE: Flexbox horizontal zentriert */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* CLAUDE: v6.0: Mehr Gap für bessere Lesbarkeit */
    gap: 1.25rem;
    /* CLAUDE: Transparenter Hintergrund */
    background-color: transparent;
    padding: 0.75rem 0;
    margin-top: 0.5rem;
    /* CLAUDE: Dezente Trennlinie oben */
    border-top: 1px solid rgba(59, 42, 26, 0.1);
}

/* CLAUDE: v6.1 - Einzelnes Icon-Item - TRANSPARENT und NICHT KLICKBAR */
/* CLAUDE: Tags sind nur informativ → kein Button-ähnliches Styling */
.lhi-premium-card__icon-item {
    /* CLAUDE: Flexbox für Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    /* CLAUDE: v6.0: TRANSPARENT - keine Verwechslung mit Button */
    background: transparent;
    color: var(--wp--preset--color--graphite, #594834);
    /* CLAUDE: v6.0: Kein Padding, nur natürlicher Abstand */
    padding: 0;
    border-radius: 0;
    /* CLAUDE: Dezente Schrift */
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    /* CLAUDE: v6.1: Explizit NICHT klickbar */
    cursor: default;
    /* CLAUDE: Keine Text-Selektion (wirkt interaktiver) */
    user-select: none;
}

/* CLAUDE: v6.1 - Kein Hover-Effekt auf Tags (zeigt: nicht interaktiv) */
.lhi-premium-card__icon-item:hover {
    /* CLAUDE: Bewusst KEIN Effekt - nur Button hat Hover */
    color: var(--wp--preset--color--graphite, #594834);
}

/* CLAUDE: Icon SVG - v4.0 noch größer für bessere Sichtbarkeit */
.lhi-premium-card__icon {
    /* CLAUDE: v4.0: 18px statt 16px für bessere Erkennbarkeit */
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* CLAUDE: v6.0 - Mobile: Icons angepasst */
@media (max-width: 479px) {
    .lhi-premium-card__icons {
        gap: 0.75rem;
    }

    .lhi-premium-card__icon-item {
        font-size: 0.75rem;
        /* CLAUDE: v6.0: Kein Padding mehr */
        padding: 0;
    }

    .lhi-premium-card__icon {
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   CLAUDE: Content-Bereich unter der Karte
   ============================================ */

/* CLAUDE: Container für Titel, Ort, CTA */
.lhi-premium-card__content {
    /* CLAUDE: Flexbox vertikal */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* CLAUDE: Padding */
    padding: var(--wp--preset--spacing--md, 1.5rem);
    /* CLAUDE: Flex-grow um Platz zu füllen */
    flex-grow: 1;
    /* CLAUDE: Gap zwischen Elementen */
    gap: 0.25rem;
}

/* CLAUDE: Titel unter der Karte - OPTIMIERT */
/* CLAUDE: Mehrzeilige Darstellung für lange Titel */
.lhi-premium-card__content-title {
    font-family: var(--wp--preset--font-family--serif, Georgia, serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp--preset--color--dark-umber, #3B2A1A);
    margin: 0;
    line-height: 1.35;
    /* CLAUDE: Max 2 Zeilen mit Ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* CLAUDE: Wortumbruch für lange Ortsnamen */
    word-break: break-word;
    hyphens: auto;
}

/* CLAUDE: v4.0: Untertitel (aus Overlay hierher verschoben) */
.lhi-premium-card__content-subtitle {
    font-size: 0.9rem;
    color: var(--wp--preset--color--graphite, #594834);
    margin: 0 0 0.25rem 0;
    font-style: italic;
}

/* CLAUDE: Ort mit Location-Icon */
.lhi-premium-card__content-location {
    /* CLAUDE: Flexbox für Icon + Text */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wp--preset--color--graphite, #594834);
    margin: 0.25rem 0 0 0;
}

/* CLAUDE: Location-Icon Styling */
.lhi-premium-card__location-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

/* CLAUDE: CTA-Button */
.lhi-premium-card__cta {
    /* CLAUDE: Display */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Margin-Top auto für unten ausrichten */
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--sm, 0.75rem);
    /* CLAUDE: Styling */
    background-color: var(--wp--preset--color--heritage-gold, #8a6b3f);
    color: var(--wp--preset--color--white, #FFFFFF);
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    /* CLAUDE: Transition */
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.lhi-premium-card__cta:hover {
    background-color: var(--wp--preset--color--dark-umber, #3B2A1A);
    transform: translateY(-2px);
}

.lhi-premium-card__cta:focus {
    outline: 3px solid var(--wp--preset--color--heritage-gold, #8a6b3f);
    outline-offset: 2px;
}

/* CLAUDE: v6.1 - Mobile: Button größer für bessere Touch-Targets */
/* CLAUDE: Apple HIG empfiehlt mindestens 44x44px Touch-Target */
@media (max-width: 767px) {
    .lhi-premium-card__cta {
        /* CLAUDE: Größeres Padding für 44px+ Höhe */
        padding: 0.875rem 1.5rem;
        /* CLAUDE: Größere Schrift */
        font-size: 0.9375rem;
        /* CLAUDE: Minimale Höhe für Touch-Target */
        min-height: 44px;
    }
}

/* CLAUDE: Erfolgsanzeige (Verkauft in X Wochen) */
.lhi-premium-card__success {
    /* CLAUDE: Margin-Top auto für unten ausrichten */
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--sm, 0.75rem);
    /* CLAUDE: Styling */
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wp--preset--color--heritage-gold, #8a6b3f);
}

/* ============================================
   CLAUDE: v5.0 - Status-Varianten (verbessert)
   ============================================ */

/* CLAUDE: Verkaufte/Vermietete Objekte visuell gedämpft */
.lhi-premium-card[data-status="verkauft"] .lhi-premium-card__image img,
.lhi-premium-card[data-status="vermietet"] .lhi-premium-card__image img {
    /* CLAUDE: Grayscale + reduzierte Sättigung für "abgeschlossen" Look */
    filter: grayscale(60%) brightness(0.95);
    transition: filter 0.4s ease;
}

/* CLAUDE: Bei Hover: Grayscale reduzieren */
@media (hover: hover) {
    .lhi-premium-card[data-status="verkauft"]:hover .lhi-premium-card__image img,
    .lhi-premium-card[data-status="vermietet"]:hover .lhi-premium-card__image img {
        filter: grayscale(30%) brightness(1);
    }
}

/* CLAUDE: Verkauft-Overlay mit "Erfolgreich verkauft" Stempel-Effekt */
.lhi-premium-card[data-status="verkauft"] .lhi-premium-card__image::after,
.lhi-premium-card[data-status="vermietet"] .lhi-premium-card__image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* CLAUDE: Dezenter dunkler Overlay */
    background: rgba(59, 42, 26, 0.15);
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   CLAUDE: Reduced Motion
   ============================================ */

/* CLAUDE: Animationen deaktivieren bei Präferenz */
@media (prefers-reduced-motion: reduce) {
    .lhi-premium-card,
    .lhi-premium-card__image img,
    .lhi-premium-card__cta {
        transition: none !important;
    }

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

    .lhi-premium-card:hover .lhi-premium-card__image img {
        transform: none;
    }
}

/* ============================================
   CLAUDE: Print Styles
   ============================================ */

@media print {
    .lhi-premium-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .lhi-premium-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

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

    .lhi-premium-card__cta {
        display: none;
    }

    .lhi-premium-card__badge {
        position: static;
        transform: none;
        display: inline-block;
        margin: 0.5rem;
    }
}