/**
 * CLAUDE: Anfahrt-Sektion CSS
 * CLAUDE: Redesign mit Icon-Cards und optimiertem Layout
 * CLAUDE: Für Seite: /kontakt/
 * CLAUDE: Stand: 2026-01-14
 */

/* ========================================
   CLAUDE: 1. CSS CUSTOM PROPERTIES
   ======================================== */

.lhi-anfahrt {
    /* CLAUDE: Farben aus Theme */
    --lhi-anfahrt-card-bg: var(--wp--preset--color--white, #FFFFFF);
    --lhi-anfahrt-card-border: var(--wp--preset--color--porous-stone, #DCD7CE);
    --lhi-anfahrt-accent: var(--wp--preset--color--heritage-gold, #8a6b3f);
    --lhi-anfahrt-accent-dark: var(--wp--preset--color--dark-umber, #3B2A1A);
    --lhi-anfahrt-text: var(--wp--preset--color--dark-umber, #3B2A1A);
    --lhi-anfahrt-text-light: var(--wp--preset--color--graphite, #594834);
    --lhi-anfahrt-bg-light: var(--wp--preset--color--linen, #F6F4EF);

    /* CLAUDE: Spacing */
    --lhi-anfahrt-gap: 1.5rem;
    --lhi-anfahrt-padding: 1.5rem;
    --lhi-anfahrt-radius: 12px;
}

/* ========================================
   CLAUDE: 2. SECTION CONTAINER
   ======================================== */

/* CLAUDE: Haupt-Container für Anfahrt-Sektion */
.lhi-anfahrt {
    /* CLAUDE: Padding für Sektion */
    padding: 3rem 0;
}

/* CLAUDE: Fix: alignwide Container innerhalb Anfahrt zentrieren */
/* CLAUDE: Was: Überschreibt negative margin-left aus layout.css:292 */
/* CLAUDE: Warum: layout.css setzt margin-left: calc(-1 * padding) was Container nach links verschiebt */
/* CLAUDE: Anpassen: max-width hier ändern für breiteren/schmaleren Content */
.lhi-anfahrt .alignwide {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: var(--lhi-content-wide, 1100px);
}

/* CLAUDE: Überschrift */
.lhi-anfahrt__title {
    /* CLAUDE: Zentriert */
    text-align: center;
    /* CLAUDE: Abstand nach unten */
    margin-bottom: 2.5rem;
    /* CLAUDE: Schriftgröße */
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    /* CLAUDE: Farbe */
    color: var(--lhi-anfahrt-text);
}

/* ========================================
   CLAUDE: 3. CARDS GRID
   ======================================== */

/* CLAUDE: Grid-Container für Info-Cards */
.lhi-anfahrt__cards {
    /* CLAUDE: CSS Grid für 3 Spalten */
    display: grid;
    /* CLAUDE: 3 gleiche Spalten */
    grid-template-columns: repeat(3, 1fr);
    /* CLAUDE: Abstand zwischen Cards */
    gap: var(--lhi-anfahrt-gap);
    /* CLAUDE: Margin unter Cards */
    margin-bottom: 2.5rem;
}

/* ========================================
   CLAUDE: 4. INFO CARD
   ======================================== */

/* CLAUDE: Einzelne Info-Card */
.lhi-anfahrt__card {
    /* CLAUDE: Weißer Hintergrund */
    background-color: var(--lhi-anfahrt-card-bg);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-anfahrt-radius);
    /* CLAUDE: Dezenter Rahmen */
    border: 1px solid var(--lhi-anfahrt-card-border);
    /* CLAUDE: Subtiler Schatten */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    /* CLAUDE: Padding */
    padding: var(--lhi-anfahrt-padding);
    /* CLAUDE: Zentrierter Text */
    text-align: center;
    /* CLAUDE: Transition für Hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* CLAUDE: FIX 2026-01-26: Flexbox für gleichmäßige Höhe aller Cards */
    /* CLAUDE: flex-direction:column + align-items:center zentriert Icon+Text vertikal */
    /* CLAUDE: justify-content:center verteilt Content gleichmäßig bei gleicher Höhe */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* CLAUDE: Hover-Effekt */
.lhi-anfahrt__card:hover {
    /* CLAUDE: Leicht anheben */
    transform: translateY(-4px);
    /* CLAUDE: Stärkerer Schatten */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ========================================
   CLAUDE: 5. CARD ICON
   ======================================== */

/* CLAUDE: Icon-Container */
.lhi-anfahrt__icon {
    /* CLAUDE: Größe */
    width: 56px;
    height: 56px;
    /* CLAUDE: Zentriert */
    margin: 0 auto 1rem;
    /* CLAUDE: Flexbox für SVG-Zentrierung */
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Runder Hintergrund */
    background-color: var(--lhi-anfahrt-bg-light);
    border-radius: 50%;
    /* CLAUDE: Icon-Farbe */
    color: var(--lhi-anfahrt-accent);
    /* CLAUDE: Transition */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* CLAUDE: Icon SVG Größe */
.lhi-anfahrt__icon svg {
    width: 28px;
    height: 28px;
}

/* CLAUDE: Hover: Icon hervorheben */
.lhi-anfahrt__card:hover .lhi-anfahrt__icon {
    background-color: var(--lhi-anfahrt-accent);
    color: var(--lhi-anfahrt-card-bg);
}

/* ========================================
   CLAUDE: 6. CARD CONTENT
   ======================================== */

/* CLAUDE: Card-Titel */
.lhi-anfahrt__card-title {
    /* CLAUDE: Keine Margin oben */
    margin: 0 0 0.5rem 0;
    /* CLAUDE: Schriftgröße */
    font-size: 1.125rem;
    /* CLAUDE: Gewicht */
    font-weight: 600;
    /* CLAUDE: Farbe */
    color: var(--lhi-anfahrt-text);
}

/* CLAUDE: Card-Text */
.lhi-anfahrt__card-text {
    /* CLAUDE: Keine Margin */
    margin: 0;
    /* CLAUDE: Schriftgröße */
    font-size: 0.95rem;
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.5;
    /* CLAUDE: Leichtere Farbe */
    color: var(--lhi-anfahrt-text-light);
}

/* CLAUDE: Links in Card */
.lhi-anfahrt__card a {
    /* CLAUDE: Farbe */
    color: var(--lhi-anfahrt-accent);
    /* CLAUDE: Keine Unterstreichung */
    text-decoration: none;
    /* CLAUDE: Transition */
    transition: color 0.2s ease;
}

.lhi-anfahrt__card a:hover {
    color: var(--lhi-anfahrt-accent-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ========================================
   CLAUDE: 7. GOOGLE MAPS CONTAINER
   ======================================== */

/* CLAUDE: Maps-Wrapper */
.lhi-anfahrt__map-container {
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-anfahrt-radius);
    /* CLAUDE: Overflow für runde Ecken */
    overflow: hidden;
    /* CLAUDE: Subtiler Schatten */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* CLAUDE: Rahmen */
    border: 1px solid var(--lhi-anfahrt-card-border);
}

/* CLAUDE: Google Maps iframe */
.lhi-anfahrt__map-container iframe {
    /* CLAUDE: Volle Breite */
    display: block;
    width: 100%;
    /* CLAUDE: Feste Höhe */
    height: 400px;
    /* CLAUDE: Kein Rahmen */
    border: 0;
}

/* ========================================
   CLAUDE: 8. RESPONSIVE - TABLET
   ======================================== */

@media (max-width: 900px) {
    .lhi-anfahrt__cards {
        /* CLAUDE: 2 Spalten auf Tablet */
        grid-template-columns: repeat(2, 1fr);
    }

    /* CLAUDE: FIX 2026-01-26: Letzte Card spannt über volle Breite (Option A) */
    /* CLAUDE: Vorher: max-width:400px + margin:0 auto → Card war schmaler als Geschwister */
    /* CLAUDE: Jetzt: max-width:none → Card nutzt die volle Grid-Breite beider Spalten */
    /* CLAUDE: Ergebnis: 2+1 Layout mit 3. Card so breit wie beide oberen zusammen */
    .lhi-anfahrt__card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: none;
    }
}

/* ========================================
   CLAUDE: 9. RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 600px) {
    .lhi-anfahrt {
        --lhi-anfahrt-padding: 1.25rem;
        --lhi-anfahrt-gap: 1rem;
        padding: 2rem 0;
    }

    .lhi-anfahrt__title {
        margin-bottom: 1.5rem;
    }

    .lhi-anfahrt__cards {
        /* CLAUDE: 1 Spalte auf Mobile */
        grid-template-columns: 1fr;
    }

    .lhi-anfahrt__card:last-child:nth-child(odd) {
        max-width: none;
    }

    .lhi-anfahrt__icon {
        width: 48px;
        height: 48px;
    }

    .lhi-anfahrt__icon svg {
        width: 24px;
        height: 24px;
    }

    .lhi-anfahrt__map-container iframe {
        /* CLAUDE: Geringere Höhe auf Mobile */
        height: 300px;
    }
}

/* ========================================
   CLAUDE: 10. REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .lhi-anfahrt__card,
    .lhi-anfahrt__icon,
    .lhi-anfahrt__card a {
        transition: none;
    }

    .lhi-anfahrt__card:hover {
        transform: none;
    }
}

/* ========================================
   CLAUDE: 11. PRINT STYLES
   ======================================== */

@media print {
    .lhi-anfahrt__card {
        box-shadow: none;
        border: 1px solid #333;
        break-inside: avoid;
    }

    .lhi-anfahrt__card:hover {
        transform: none;
    }

    .lhi-anfahrt__map-container {
        display: none;
    }

    .lhi-anfahrt__card a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}