/**
 * CLAUDE: Kontaktdaten-Card Komponenten CSS
 * CLAUDE: Ansprechendes Card-Design mit SVG-Icons
 * CLAUDE: Für Seite: /kontakt/
 * CLAUDE: Stand: 2026-01-14
 */

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

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

    /* CLAUDE: Spacing */
    --lhi-card-padding: 1.5rem;
    --lhi-card-radius: 12px;
    --lhi-card-accent-width: 4px;
}

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

/* CLAUDE: Haupt-Container mit Border-Left-Akzent */
.lhi-kontakt-card {
    /* CLAUDE: Weißer Hintergrund */
    background-color: var(--lhi-card-bg);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: var(--lhi-card-radius);
    /* CLAUDE: Dezenter Rahmen */
    border: 1px solid var(--lhi-card-border);
    /* CLAUDE: Linke Akzentlinie (wie FAQ-Items) */
    border-left: var(--lhi-card-accent-width) solid var(--lhi-card-accent);
    /* CLAUDE: Subtiler Schatten */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* CLAUDE: Overflow für abgerundete Ecken */
    overflow: hidden;
    /* CLAUDE: Transition für Hover */
    transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
}

/* CLAUDE: Hover-Effekt */
.lhi-kontakt-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-left-color: var(--lhi-card-accent-hover);
}

/* ========================================
   CLAUDE: 3. CARD HEADER
   ======================================== */

/* CLAUDE: Header mit Firmenname */
.lhi-kontakt-card__header {
    /* CLAUDE: Padding */
    padding: var(--lhi-card-padding);
    /* CLAUDE: Heller Hintergrund */
    background-color: var(--lhi-card-bg-light);
    /* CLAUDE: Untere Trennlinie */
    border-bottom: 1px solid var(--lhi-card-border);
}

/* CLAUDE: Firmenname */
.lhi-kontakt-card__title {
    /* CLAUDE: Keine Margin */
    margin: 0;
    /* CLAUDE: Schriftgröße */
    font-size: 1.25rem;
    /* CLAUDE: Fett */
    font-weight: 700;
    /* CLAUDE: Farbe */
    color: var(--lhi-card-text);
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.3;
}

/* CLAUDE: Rechtsform */
.lhi-kontakt-card__subtitle {
    /* CLAUDE: Minimale Margin */
    margin: 0.25rem 0 0 0;
    /* CLAUDE: Kleinere Schrift */
    font-size: 0.875rem;
    /* CLAUDE: Leichtere Farbe */
    color: var(--lhi-card-text-light);
}

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

/* CLAUDE: Body Container */
.lhi-kontakt-card__body {
    /* CLAUDE: Padding */
    padding: var(--lhi-card-padding);
    /* CLAUDE: Flexbox für Items */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ========================================
   CLAUDE: 5. KONTAKT-ITEMS
   ======================================== */

/* CLAUDE: Einzelnes Kontakt-Item */
.lhi-kontakt-card__item {
    /* CLAUDE: Flexbox für Icon + Content */
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* CLAUDE: Icon-Container */
.lhi-kontakt-card__icon {
    /* CLAUDE: Feste Größe */
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    /* CLAUDE: Zentriert */
    display: flex;
    align-items: center;
    justify-content: center;
    /* CLAUDE: Runder Hintergrund */
    background-color: var(--lhi-card-bg-light);
    border-radius: 50%;
    /* CLAUDE: Icon-Farbe */
    color: var(--lhi-card-accent);
    /* CLAUDE: Transition */
    transition: background-color 0.2s ease, color 0.2s ease;
}

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

/* CLAUDE: Hover auf Item -> Icon färben */
.lhi-kontakt-card__item:hover .lhi-kontakt-card__icon {
    background-color: var(--lhi-card-accent);
    color: var(--lhi-card-bg);
}

/* CLAUDE: Content Container */
.lhi-kontakt-card__content {
    /* CLAUDE: Flexibles Wachstum */
    flex: 1;
    min-width: 0;
}

/* CLAUDE: Label */
.lhi-kontakt-card__label {
    /* CLAUDE: Block für eigene Zeile */
    display: block;
    /* CLAUDE: Kleinere Schrift */
    font-size: 0.75rem;
    /* CLAUDE: Uppercase */
    text-transform: uppercase;
    /* CLAUDE: Letter-Spacing */
    letter-spacing: 0.05em;
    /* CLAUDE: Leichtere Farbe */
    color: var(--lhi-card-text-light);
    /* CLAUDE: Abstand nach unten */
    margin-bottom: 0.25rem;
}

/* CLAUDE: Wert */
.lhi-kontakt-card__value {
    /* CLAUDE: Normale Schriftgröße */
    font-size: 1rem;
    /* CLAUDE: Farbe */
    color: var(--lhi-card-text);
    /* CLAUDE: Zeilenhöhe */
    line-height: 1.5;
}

/* CLAUDE: Address Reset */
.lhi-kontakt-card__value address {
    /* CLAUDE: Kein Italic */
    font-style: normal;
}

/* CLAUDE: Link-Styling */
.lhi-kontakt-card__link {
    /* CLAUDE: Farbe */
    color: var(--lhi-card-accent);
    /* CLAUDE: Keine Unterstreichung */
    text-decoration: none;
    /* CLAUDE: Transition */
    transition: color 0.2s ease;
}

/* CLAUDE: Link Hover */
.lhi-kontakt-card__link:hover {
    color: var(--lhi-card-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* CLAUDE: Bürozeiten Zeilen */
.lhi-kontakt-card__hours {
    /* CLAUDE: Block für eigene Zeile */
    display: block;
}

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

/* CLAUDE: Footer mit Hinweis */
.lhi-kontakt-card__footer {
    /* CLAUDE: Padding */
    padding: 1rem var(--lhi-card-padding);
    /* CLAUDE: Heller Hintergrund */
    background-color: var(--lhi-card-bg-light);
    /* CLAUDE: Obere Trennlinie */
    border-top: 1px solid var(--lhi-card-border);
}

/* CLAUDE: Footer-Paragraph */
.lhi-kontakt-card__footer p {
    /* CLAUDE: Keine Margin */
    margin: 0;
    /* CLAUDE: Kleinere Schrift */
    font-size: 0.875rem;
    /* CLAUDE: Leichtere Farbe */
    color: var(--lhi-card-text-light);
    /* CLAUDE: Flexbox für Icon + Text */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* CLAUDE: Footer Icon */
.lhi-kontakt-card__footer svg {
    width: 16px;
    height: 16px;
    color: var(--lhi-card-accent);
    flex-shrink: 0;
}

/* ========================================
   CLAUDE: 7. COLUMN STRETCH FÜR GLEICHE HÖHE
   ======================================== */

/* CLAUDE: Parent-Columns: Stretch statt Center für gleiche Spalten-Höhe */
/* CLAUDE: Überschreibt die center-Ausrichtung aus layout.css für Sections mit Hintergrund */
/* CLAUDE: Selector :has() für moderne Browser (Chrome 105+, Safari 15.4+, Firefox 121+) */
.wp-block-columns:has(.lhi-kontakt-card) {
    /* CLAUDE: align-items: stretch → beide Spalten haben gleiche Höhe */
    /* CLAUDE: !important wegen layout.css Regel die center setzt */
    align-items: stretch !important;
}

/* CLAUDE: Parent-Column: Flexbox für Card-Stretch */
.wp-block-column:has(.lhi-kontakt-card) {
    /* CLAUDE: Flexbox aktivieren für Stretch-Verhalten */
    display: flex;
    flex-direction: column;
}

/* CLAUDE: Card soll den verfügbaren Platz füllen */
.lhi-kontakt-card {
    /* CLAUDE: flex: 1 → Card wächst auf volle Spalten-Höhe */
    flex: 1;
    /* CLAUDE: Interne Flexbox für Content-Ausrichtung */
    display: flex;
    flex-direction: column;
}

/* CLAUDE: Body soll den restlichen Platz füllen */
.lhi-kontakt-card__body {
    /* CLAUDE: Body wächst und füllt den Raum zwischen Header und Footer */
    flex: 1;
    /* CLAUDE: Content gleichmäßig verteilen (Items nach oben, Abstand nach unten zum Footer) */
    justify-content: flex-start;
}

/* CLAUDE: Desktop: Card füllt volle Spalten-Höhe */
@media (min-width: 782px) {
    .lhi-kontakt-card {
        /* CLAUDE: Card wächst auf volle Höhe der Spalte */
        /* CLAUDE: align-self: stretch ist default bei flex, daher nicht nötig */
        /* CLAUDE: Kein Sticky mehr - Card soll sich der Formular-Spalte anpassen */
    }

    /* CLAUDE: Body: Content oben gruppiert, natürlicher Abstand */
    .lhi-kontakt-card__body {
        /* CLAUDE: flex-start: Items bleiben oben gruppiert */
        /* CLAUDE: Mit mehr Content füllt sich die Card natürlich */
        justify-content: flex-start;
    }
}

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

@media (max-width: 600px) {
    .lhi-kontakt-card {
        --lhi-card-padding: 1.25rem;
    }

    .lhi-kontakt-card__title {
        font-size: 1.125rem;
    }

    .lhi-kontakt-card__icon {
        width: 36px;
        height: 36px;
    }

    .lhi-kontakt-card__icon svg {
        width: 18px;
        height: 18px;
    }

    .lhi-kontakt-card__body {
        gap: 1rem;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .lhi-kontakt-card,
    .lhi-kontakt-card__icon,
    .lhi-kontakt-card__link {
        transition: none;
    }
}

/* ========================================
   CLAUDE: 10. CTA-BUTTON SECTION
   ======================================== */

/* CLAUDE: CTA-Button Container */
.lhi-kontakt-card__cta {
    /* CLAUDE: Abstand nach oben */
    margin-top: 0.5rem;
    /* CLAUDE: Padding für visuellen Abstand */
    padding-top: 1.25rem;
    /* CLAUDE: Dezente Trennlinie */
    border-top: 1px solid var(--lhi-card-border);
}

/* CLAUDE: CTA-Button Styling */
.lhi-kontakt-card__cta-button {
    /* CLAUDE: Volle Breite */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    /* CLAUDE: Padding für angenehme Klickfläche */
    padding: 0.875rem 1.5rem;
    /* CLAUDE: Akzentfarbe als Hintergrund */
    background-color: var(--lhi-card-accent);
    /* CLAUDE: Weiße Schrift */
    color: var(--lhi-card-bg);
    /* CLAUDE: Abgerundete Ecken */
    border-radius: 8px;
    /* CLAUDE: Keine Unterstreichung */
    text-decoration: none;
    /* CLAUDE: Mittlere Schriftgröße, fett */
    font-size: 1rem;
    font-weight: 600;
    /* CLAUDE: Transition für Hover */
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* CLAUDE: CTA-Button Hover */
.lhi-kontakt-card__cta-button:hover {
    background-color: var(--lhi-card-accent-hover);
    transform: translateY(-2px);
    color: var(--lhi-card-bg);
    text-decoration: none;
}

/* CLAUDE: CTA-Button Active */
.lhi-kontakt-card__cta-button:active {
    transform: translateY(0);
}

/* CLAUDE: CTA-Button Icon */
.lhi-kontakt-card__cta-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ========================================
   CLAUDE: 11. SOCIAL MEDIA SECTION
   ======================================== */

/* CLAUDE: Social Media Container */
.lhi-kontakt-card__social {
    /* CLAUDE: Abstand nach oben */
    margin-top: 0.5rem;
    /* CLAUDE: Padding für visuellen Abstand */
    padding-top: 1.25rem;
    /* CLAUDE: Dezente Trennlinie */
    border-top: 1px solid var(--lhi-card-border);
}

/* CLAUDE: Social Label */
.lhi-kontakt-card__social-label {
    /* CLAUDE: Kleinere Schrift */
    font-size: 0.75rem;
    /* CLAUDE: Uppercase */
    text-transform: uppercase;
    /* CLAUDE: Letter-Spacing */
    letter-spacing: 0.05em;
    /* CLAUDE: Leichtere Farbe */
    color: var(--lhi-card-text-light);
    /* CLAUDE: Abstand nach unten */
    margin-bottom: 0.75rem;
}

/* CLAUDE: Social Icons Container */
.lhi-kontakt-card__social-icons {
    /* CLAUDE: Flexbox für Icons */
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* CLAUDE: Einzelner Social Link */
.lhi-kontakt-card__social-link {
    /* CLAUDE: Feste Größe */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* CLAUDE: Runder Hintergrund */
    background-color: var(--lhi-card-bg-light);
    border-radius: 50%;
    /* CLAUDE: Icon-Farbe */
    color: var(--lhi-card-accent);
    /* CLAUDE: Transition */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* CLAUDE: Social Link Hover */
.lhi-kontakt-card__social-link:hover {
    background-color: var(--lhi-card-accent);
    color: var(--lhi-card-bg);
    transform: translateY(-2px);
}

/* CLAUDE: Social Link Icon */
.lhi-kontakt-card__social-link svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   CLAUDE: 12. QUALITÄTSSIEGEL SECTION
   ======================================== */

/* CLAUDE: Siegel Container */
.lhi-kontakt-card__badges {
    /* CLAUDE: Abstand nach oben */
    margin-top: 0.5rem;
    /* CLAUDE: Padding für visuellen Abstand */
    padding-top: 1.25rem;
    /* CLAUDE: Dezente Trennlinie */
    border-top: 1px solid var(--lhi-card-border);
}

/* CLAUDE: Siegel Label */
.lhi-kontakt-card__badges-label {
    /* CLAUDE: Kleinere Schrift */
    font-size: 0.75rem;
    /* CLAUDE: Uppercase */
    text-transform: uppercase;
    /* CLAUDE: Letter-Spacing */
    letter-spacing: 0.05em;
    /* CLAUDE: Leichtere Farbe */
    color: var(--lhi-card-text-light);
    /* CLAUDE: Abstand nach unten */
    margin-bottom: 0.75rem;
}

/* CLAUDE: Siegel Items Container */
.lhi-kontakt-card__badges-items {
    /* CLAUDE: Flexbox für Siegel */
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* CLAUDE: Einzelnes Siegel Item */
.lhi-kontakt-card__badge {
    /* CLAUDE: Flexbox für Icon + Text */
    display: flex;
    align-items: center;
    gap: 0.625rem;
    /* CLAUDE: Kleinere Schrift */
    font-size: 0.875rem;
    /* CLAUDE: Farbe */
    color: var(--lhi-card-text);
}

/* CLAUDE: Siegel Icon */
.lhi-kontakt-card__badge svg {
    width: 18px;
    height: 18px;
    color: var(--lhi-card-accent);
    flex-shrink: 0;
}

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

@media print {
    .lhi-kontakt-card {
        box-shadow: none;
        border: 1px solid #333;
    }

    .lhi-kontakt-card__link {
        color: inherit;
        text-decoration: underline;
    }

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