/*
 * assets/css/lightmode/expert-card-skin.css
 *
 * Lightmode-Skin der Ergebniskarte (.expert-card aus assets/js/card-template.js).
 * Ausgelagert aus light-skin.css, damit suche.php UND die Live-Vorschau im
 * Berater-Dashboard (dashboard/index.php) exakt dieselbe Karte zeigen.
 * Braucht die --lm-* Tokens aus wald-sand-tokens.css. Gilt nur ohne html.dark.
 */

/* ------------------------------------------------------------ Ergebniskarten ("Waldrahmen")
 * Anzeigen-Block greift das Waldgrün des Hero auf, Sandkarten liegen darauf. Chips als
 * randlose Sandflächen. Band und Fußleiste der Karte: expert-card-waldband.css. */
/* ------------------------------------------------------------ Generische Tailwind-Mappings, auf die Karte gescoped
 * Auszug aus light-skin.css (dort seitenweit). Nötig, damit die Karte auch OHNE light-skin.css
 * (Berater-Dashboard, Live-Vorschau) exakt so aussieht wie in der Suche – inkl. aufgeklapptem Profil.
 * Werte identisch zu light-skin.css → in suche.php ohne Effekt. */
html:not(.dark) .expert-card.text-slate-900,
html:not(.dark) .expert-card .text-slate-900,
html:not(.dark) .expert-card .text-slate-800 { color: var(--lm-text); }
html:not(.dark) .expert-card .text-slate-700,
html:not(.dark) .expert-card .text-slate-600,
html:not(.dark) .expert-card .text-blue-700 { color: var(--lm-text-2); }
html:not(.dark) .expert-card .text-slate-500 { color: var(--lm-text-3); }
html:not(.dark) .expert-card .text-slate-400 { color: var(--lm-text-4); }
html:not(.dark) .expert-card .text-emerald-600,
html:not(.dark) .expert-card .text-emerald-700,
html:not(.dark) .expert-card .text-green-700,
html:not(.dark) .expert-card .hover\:text-emerald-700:hover,
html:not(.dark) .expert-card.group:hover .group-hover\:text-green-700 { color: var(--lm-accent-text); }
html:not(.dark) .expert-card .text-emerald-500,
html:not(.dark) .expert-card .text-green-500 { color: var(--lm-accent); }

html:not(.dark) .expert-card .bg-white { background-color: var(--lm-surface); }
html:not(.dark) .expert-card .bg-slate-50,
html:not(.dark) .expert-card .bg-slate-100,
html:not(.dark) .expert-card .bg-blue-50 { background-color: var(--lm-surface-sunken); }
html:not(.dark) .expert-card .hover\:bg-slate-200:hover { background-color: var(--lm-border); }
html:not(.dark) .expert-card .bg-emerald-50,
html:not(.dark) .expert-card .bg-green-50 { background-color: var(--lm-accent-soft); }
html:not(.dark) .expert-card .bg-green-500,
html:not(.dark) .expert-card .hover\:bg-green-600:hover,
html:not(.dark) .expert-card .hover\:bg-blue-600:hover,
html:not(.dark) .expert-card.group:hover .group-hover\:bg-green-500 { background-color: var(--lm-accent); }

html:not(.dark) .expert-card .border-slate-200,
html:not(.dark) .expert-card .border-slate-100,
html:not(.dark) .expert-card .border-slate-50 { border-color: var(--lm-border); }
html:not(.dark) .expert-card .border-emerald-200\/80,
html:not(.dark) .expert-card .border-green-200,
html:not(.dark) .expert-card .hover\:border-emerald-400:hover { border-color: var(--lm-accent-soft-border); }
html:not(.dark) .expert-card .border-green-500 { border-color: var(--lm-accent); }
html:not(.dark) .expert-card .ring-white { --tw-ring-color: var(--lm-surface); }

html:not(.dark) .expert-card {
    background-color: var(--lm-card);
    border-color: var(--lm-card-border);
}
html:not(.dark) .expert-card:hover { border-color: color-mix(in srgb, var(--lm-cta) 45%, var(--lm-card-border)); }
html:not(.dark) .expert-card.group:hover .card-header-clickable { background-color: color-mix(in srgb, var(--lm-chip) 40%, transparent); }
html:not(.dark) .expert-card .border-slate-100 { border-color: var(--lm-card-divider); }
html:not(.dark) .expert-card h3 { color: var(--lm-text); }
html:not(.dark) .expert-card.group:hover h3 { color: var(--lm-cta); }

html:not(.dark) .expert-card-premium {
    background-color: var(--lm-card-premium);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.55);
}
html:not(.dark) .expert-card-premium:hover {
    border-color: color-mix(in srgb, var(--lm-cta-mint) 45%, transparent);
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.6);
}

html:not(.dark) .expert-card .bg-slate-50\/80 {
    background-color: var(--lm-chip);
    border-color: transparent;
    color: var(--lm-chip-text);
    box-shadow: none;
}
html:not(.dark) .expert-card .bg-slate-50\/80.before\:text-green-500::before { color: var(--lm-cta); }
html:not(.dark) .expert-card .bg-emerald-50\/90 {
    background-color: var(--lm-cta);
    border-color: var(--lm-cta);
    color: var(--lm-cta-text);
    box-shadow: none;
}
html:not(.dark) .expert-card .bg-emerald-50\/90::before { color: var(--lm-cta-mint); }

html:not(.dark) .expert-card .rounded-full.bg-slate-50 {
    background-color: var(--lm-chip);
    border-color: transparent;
    color: var(--lm-text-2);
}
html:not(.dark) .expert-card .rounded-full.bg-slate-50 .text-green-500 { color: var(--lm-cta); }

html:not(.dark) .expert-card .expand-content { background-color: var(--lm-bg-alt); border-color: var(--lm-card-divider); }
html:not(.dark) .expert-card .expand-content .bg-white { background-color: var(--lm-card); border-color: var(--lm-card-border); }

/* ------------------------------------------------------------ Kontakt-Buttons (Telefon im Kopf; E-Mail/Telefon/Webseite im Profil)
 * Tailwinds hover:text-white verliert gegen die Mappings oben (.text-blue-700/.text-green-700 → dunkle
 * Schrift) – beim Hover stand dunkle Schrift auf Waldgrün. Daher explizit: helle Fläche mit Kontur,
 * Hover füllt Waldgrün mit heller Schrift, Icon springt auf Mint. */
html:not(.dark) .expert-card [data-card-contact-label] { color: var(--lm-text-2); }
html:not(.dark) .expert-card [data-card-contact] {
    background-color: var(--lm-surface-elev);
    border: 1px solid var(--lm-card-border);
    color: var(--lm-text);
}
html:not(.dark) .expert-card [data-card-contact] i { color: var(--lm-cta); }
html:not(.dark) .expert-card [data-card-contact]:hover {
    background-color: var(--lm-cta);
    border-color: var(--lm-cta);
    color: var(--lm-cta-text);
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--lm-cta) 80%, transparent);
}
html:not(.dark) .expert-card [data-card-contact]:hover i { color: var(--lm-cta-mint); }

/* Profilbild, Band, Fußleiste und „Profil öffnen“: expert-card-waldband.css (Waldband seit 23.10.2026). */

/* ------------------------------------------------------------ Telefon-Hover (beide Modi)
 * Farbwechsel + leichte Skalierung, Icon dreht sich minimal "zum Ohr". */
.expert-card [data-card-contact] {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}
.expert-card [data-card-contact] .fa-phone { transition: transform .18s ease, color .18s ease; }
.expert-card [data-card-contact="phone"]:hover { transform: translateY(-1px) scale(1.03); }
.expert-card [data-card-contact="phone"]:hover .fa-phone { transform: scale(1.2) rotate(-10deg); }
html.dark .expert-card [data-card-contact="phone"]:hover {
    color: #6ee7b7;
    border-color: rgba(110, 231, 183, 0.6);
}
html.dark .expert-card [data-card-contact="phone"]:hover .fa-phone { color: #6ee7b7; }
@media (prefers-reduced-motion: reduce) {
    .expert-card [data-card-contact="phone"]:hover,
    .expert-card [data-card-contact="phone"]:hover .fa-phone { transform: none; }
}