/**
 * CLAUDE: Wissenswertes-Cards Komponenten-Styles
 * CLAUDE: Informative Cards für Verkaufsseite (Wertermittlung, Bodenrichtwert, etc.)
 * CLAUDE: Hover-Effekte analog zu USP-Cards
 * CLAUDE: Stand: 2026-01-12
 */

/* ============================================
   CLAUDE: 1. Grid-Container
   CLAUDE: Responsive 2x2 Grid für Desktop, 1 Spalte Mobile
   ============================================ */
/* CLAUDE: Hauptcontainer für das Card-Grid */
.lhi-wissenswertes-grid {
    /* CLAUDE: CSS Grid für responsive Spalten */
    display: grid;
    /* CLAUDE: 2 Spalten auf Desktop, min 280px pro Card */
    grid-template-columns: repeat(2, 1fr);
    /* CLAUDE: Abstand zwischen Cards */
    gap: var(--wp--preset--spacing--md, 1.5rem);
    /* CLAUDE: Max-Breite für Lesbarkeit */
    max-width: 1000px;
    /* CLAUDE: Zentriert im Container */
    margin: 0 auto;
    /* CLAUDE: Padding für Mobile */
    padding: 0 var(--wp--preset--spacing--sm, 1rem);
}

/* ============================================
   CLAUDE: 2. Card-Basis-Styles
   CLAUDE: Einzelne Wissenswertes-Card mit Hover-Effekt
   ============================================ */
/* CLAUDE: Einzelne Card */
.lhi-wissenswertes-card {
    /* CLAUDE: Weißer Hintergrund */
    background: var(--wp--preset--color--white, #ffffff);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: 8px;
    /* CLAUDE: Innenabstand */
    padding: var(--wp--preset--spacing--md, 1.5rem);
    /* CLAUDE: Subtiler Schatten im Ruhezustand */
    box-shadow: 0 2px 8px rgba(59, 42, 26, 0.06);
    /* CLAUDE: Position für Pseudo-Element */
    position: relative;
    /* CLAUDE: Overflow hidden für saubere Kanten */
    overflow: hidden;
    /* CLAUDE: Smooth Transition für Hover */
    transition:
        transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   CLAUDE: 3. Hover-Effekt
   CLAUDE: Card schwebt nach oben bei Hover
   ============================================ */
/* CLAUDE: Hover-State */
.lhi-wissenswertes-card:hover {
    /* CLAUDE: Leichte Anhebung */
    transform: translateY(-6px);
    /* CLAUDE: Verstärkter Schatten */
    box-shadow:
        0 16px 32px rgba(59, 42, 26, 0.10),
        0 6px 12px rgba(59, 42, 26, 0.06);
}

/* ============================================
   CLAUDE: 4. Linker Akzent-Streifen
   CLAUDE: Gold-Linie erscheint bei Hover
   ============================================ */
/* CLAUDE: Pseudo-Element für Akzentlinie */
.lhi-wissenswertes-card::before {
    /* CLAUDE: Leeres Element */
    content: '';
    /* CLAUDE: Absolute Position links */
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    /* CLAUDE: Breite der Linie */
    width: 4px;
    /* CLAUDE: Heritage-Gold Farbe */
    background: var(--wp--preset--color--heritage-gold, #8a6b3f);
    /* CLAUDE: Initial versteckt */
    transform: scaleY(0);
    transform-origin: center;
    /* CLAUDE: Smooth Animation */
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    /* CLAUDE: Abgerundete Ecken rechts */
    border-radius: 0 2px 2px 0;
}

/* CLAUDE: Akzentlinie bei Hover einblenden */
.lhi-wissenswertes-card:hover::before {
    transform: scaleY(1);
}

/* ============================================
   CLAUDE: 5. Überschriften
   CLAUDE: H3 Styling in den Cards
   ============================================ */
/* CLAUDE: Card-Überschrift */
.lhi-wissenswertes-card h3 {
    /* CLAUDE: Dunkle Textfarbe */
    color: var(--wp--preset--color--dark-umber, #3B2A1A);
    /* CLAUDE: Schriftgröße */
    font-size: 1.25rem;
    /* CLAUDE: Gewicht */
    font-weight: 600;
    /* CLAUDE: Abstand nach unten */
    margin: 0 0 0.75rem 0;
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.3;
}

/* ============================================
   CLAUDE: 6. Absatz-Styles
   CLAUDE: Einleitungstext und Schlusstext
   ============================================ */
/* CLAUDE: Absätze in Card */
.lhi-wissenswertes-card p {
    /* CLAUDE: Graphite Textfarbe */
    color: var(--wp--preset--color--graphite, #594834);
    /* CLAUDE: Schriftgröße */
    font-size: 0.95rem;
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.6;
    /* CLAUDE: Abstand */
    margin: 0 0 0.75rem 0;
}

/* CLAUDE: Letzter Absatz ohne Margin */
.lhi-wissenswertes-card p:last-child {
    margin-bottom: 0;
}

/* ============================================
   CLAUDE: 7. Listen-Styles
   CLAUDE: ul/ol mit inline Keyword-Beschreibung Format
   ============================================ */
/* CLAUDE: Ungeordnete Liste */
.lhi-wissenswertes-card ul,
.lhi-wissenswertes-card ol {
    /* CLAUDE: Reset Margin */
    margin: 0 0 0.75rem 0;
    /* CLAUDE: Kein Standard-Padding */
    padding: 0;
    /* CLAUDE: Keine Standard-Listenpunkte */
    list-style: none;
}

/* CLAUDE: Listen-Elemente */
.lhi-wissenswertes-card li {
    /* CLAUDE: Graphite Textfarbe */
    color: var(--wp--preset--color--graphite, #594834);
    /* CLAUDE: Schriftgröße */
    font-size: 0.9rem;
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.5;
    /* CLAUDE: Abstand zwischen Items */
    margin-bottom: 0.5rem;
    /* CLAUDE: Padding links für eigenen Marker */
    padding-left: 0;
}

/* CLAUDE: Letztes Listen-Element ohne Margin */
.lhi-wissenswertes-card li:last-child {
    margin-bottom: 0;
}

/* CLAUDE: Strong-Element (Keyword) */
.lhi-wissenswertes-card li strong {
    /* CLAUDE: Dunklere Farbe für Keywords */
    color: var(--wp--preset--color--dark-umber, #3B2A1A);
    /* CLAUDE: Fett */
    font-weight: 600;
}

/* ============================================
   CLAUDE: 8. Nummerierte Liste (ol)
   CLAUDE: Für Checklisten wie Hausverkauf-Schritte
   ============================================ */
/* CLAUDE: Counter für nummerierte Liste */
.lhi-wissenswertes-card ol {
    /* CLAUDE: Counter initialisieren */
    counter-reset: wissenswertes-counter;
}

/* CLAUDE: Nummerierte Liste Items */
.lhi-wissenswertes-card ol li {
    /* CLAUDE: Counter hochzählen */
    counter-increment: wissenswertes-counter;
    /* CLAUDE: Flexbox für Nummer + Text */
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* CLAUDE: Nummer vor Item */
.lhi-wissenswertes-card ol li::before {
    /* CLAUDE: Counter-Wert mit Punkt */
    content: counter(wissenswertes-counter) ".";
    /* CLAUDE: Heritage-Gold Farbe */
    color: var(--wp--preset--color--heritage-gold, #8a6b3f);
    /* CLAUDE: Fett */
    font-weight: 600;
    /* CLAUDE: Feste Breite für Alignment */
    min-width: 1.5rem;
    /* CLAUDE: Nicht schrumpfen */
    flex-shrink: 0;
}

/* ============================================
   CLAUDE: 9. Accessibility - Focus States
   CLAUDE: Sichtbarer Fokus für Keyboard-Navigation
   ============================================ */
/* CLAUDE: Focus-Visible State */
.lhi-wissenswertes-card:focus-within {
    /* CLAUDE: Fokus-Ring */
    outline: 3px solid var(--wp--preset--color--heritage-gold, #8a6b3f);
    outline-offset: 4px;
    /* CLAUDE: Hover-Effekte auch bei Focus */
    transform: translateY(-6px);
    box-shadow:
        0 16px 32px rgba(59, 42, 26, 0.10),
        0 6px 12px rgba(59, 42, 26, 0.06);
}

/* CLAUDE: Akzentlinie auch bei Focus */
.lhi-wissenswertes-card:focus-within::before {
    transform: scaleY(1);
}

/* ============================================
   CLAUDE: 10. Reduced Motion
   CLAUDE: Respektiert User-Präferenz
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* CLAUDE: Keine Transitions */
    .lhi-wissenswertes-card,
    .lhi-wissenswertes-card::before {
        transition: none;
    }

    /* CLAUDE: Kein Transform bei Hover */
    .lhi-wissenswertes-card:hover,
    .lhi-wissenswertes-card:focus-within {
        transform: none;
    }
}

/* ============================================
   CLAUDE: 11. Responsive - Tablet
   CLAUDE: 2 Spalten bleiben, kleinere Abstände
   ============================================ */
@media (max-width: 900px) {
    /* CLAUDE: Kleinerer Gap */
    .lhi-wissenswertes-grid {
        gap: var(--wp--preset--spacing--sm, 1rem);
    }

    /* CLAUDE: Kleineres Padding */
    .lhi-wissenswertes-card {
        padding: var(--wp--preset--spacing--sm, 1rem);
    }
}

/* ============================================
   CLAUDE: 12. Responsive - Mobile
   CLAUDE: 1 Spalte auf kleinen Screens
   ============================================ */
@media (max-width: 600px) {
    /* CLAUDE: Eine Spalte auf Mobile */
    .lhi-wissenswertes-grid {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--sm, 1rem);
    }

    /* CLAUDE: Kein Hover-Lift auf Touch */
    .lhi-wissenswertes-card:hover {
        transform: none;
    }

    /* CLAUDE: Akzentlinie immer dezent sichtbar */
    .lhi-wissenswertes-card::before {
        transform: scaleY(1);
        opacity: 0.5;
    }

    /* CLAUDE: Kleinere Überschrift */
    .lhi-wissenswertes-card h3 {
        font-size: 1.1rem;
    }

    /* ============================================
       CLAUDE: 12a. Optimierte Listen für Mobile
       CLAUDE: Block-Layout für besseren Textfluss
       ============================================ */
    /* CLAUDE: Listen-Items als Block für besseren Umbruch */
    .lhi-wissenswertes-card ol li {
        /* CLAUDE: Block statt Flex für natürlichen Textfluss */
        display: block;
        /* CLAUDE: Padding links für Nummer */
        padding-left: 2rem;
        /* CLAUDE: Position für ::before Nummer */
        position: relative;
    }

    /* CLAUDE: Nummer absolut positioniert links */
    .lhi-wissenswertes-card ol li::before {
        /* CLAUDE: Absolute Position */
        position: absolute;
        left: 0;
        top: 0;
        /* CLAUDE: Feste Breite für Alignment */
        width: 1.5rem;
        /* CLAUDE: min-width nicht mehr nötig */
        min-width: auto;
    }

    /* CLAUDE: Strong-Element inline für Textfluss */
    .lhi-wissenswertes-card ol li strong {
        /* CLAUDE: Inline mit Margin rechts */
        display: inline;
        margin-right: 0.25rem;
    }
}

/* ============================================
   CLAUDE: 12b. Responsive - Extra kleine Mobile
   CLAUDE: Kompakteres Layout für sehr kleine Screens
   ============================================ */
@media (max-width: 400px) {
    /* CLAUDE: Noch kompakteres Padding */
    .lhi-wissenswertes-grid {
        padding: 0 var(--wp--preset--spacing--xs, 0.75rem);
    }

    /* CLAUDE: Kompakteres Card-Padding */
    .lhi-wissenswertes-card {
        padding: var(--wp--preset--spacing--sm, 1rem) var(--wp--preset--spacing--xs, 0.75rem);
    }

    /* CLAUDE: Keyword auf eigener Zeile für sehr kleine Screens */
    .lhi-wissenswertes-card ol li strong {
        /* CLAUDE: Block für Keyword - Beschreibung darunter */
        display: block;
        margin-bottom: 0.25rem;
    }

    /* CLAUDE: Kleinere Schrift für Listen */
    .lhi-wissenswertes-card li {
        font-size: 0.85rem;
    }

    /* CLAUDE: Kompaktere Absätze */
    .lhi-wissenswertes-card p {
        font-size: 0.9rem;
    }
}

/* ============================================
   CLAUDE: 13. Print Styles
   CLAUDE: Optimierung für Druckausgabe
   ============================================ */
@media print {
    /* CLAUDE: Keine Schatten im Druck */
    .lhi-wissenswertes-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* CLAUDE: Keine Akzentlinie im Druck */
    .lhi-wissenswertes-card::before {
        display: none;
    }

    /* CLAUDE: Grid als Block */
    .lhi-wissenswertes-grid {
        display: block;
    }

    /* CLAUDE: Cards untereinander */
    .lhi-wissenswertes-card {
        margin-bottom: 1rem;
        page-break-inside: avoid;
    }
}