/*
 * assets/css/lightmode/light-skin.css
 *
 * Lightmode-Skin der Startseite (suche.php). Bildet die Tailwind-Lightmode-
 * Utilities der Seite auf semantische Farbtokens ab, damit der Lightmode
 * getönte Flächen mit echter Hierarchie bekommt (Seite < Karte < Formular)
 * statt Weiß auf Weiß. Gilt nur, solange <html> nicht die Klasse "dark" trägt.
 *
 * Tokens werden in variant-*.css gesetzt (--lm-*). Diese Datei enthält nur
 * das Mapping und ist bewusst variantenneutral.
 */

/* ------------------------------------------------------------ Grundflächen */
html:not(.dark) body {
    background-color: var(--lm-bg);
    color: var(--lm-text);
}

html:not(.dark) .bg-gray-50 { background-color: var(--lm-bg); }
html:not(.dark) section.bg-white { background-color: var(--lm-bg-alt); }
html:not(.dark) section.bg-white .bg-gray-50 { background-color: var(--lm-surface); }

html:not(.dark) .bg-white { background-color: var(--lm-surface); }
html:not(.dark) .bg-white\/95 { background-color: var(--lm-surface-elev); }
html:not(.dark) .bg-white\/80 { background-color: color-mix(in srgb, var(--lm-surface) 84%, transparent); }
html:not(.dark) .bg-white\/70 { background-color: color-mix(in srgb, var(--lm-surface) 72%, transparent); }
html:not(.dark) .hover\:bg-white:hover { background-color: var(--lm-surface-elev); }
html:not(.dark) .group:hover .group-hover\:bg-slate-50\/40 { background-color: color-mix(in srgb, var(--lm-surface-sunken) 60%, transparent); }

/* Formularkarte: leicht transluzent über der Seite, Eingabefelder darin heller */
html:not(.dark) #searchForm { background-color: color-mix(in srgb, var(--lm-surface) 80%, transparent); }
html:not(.dark) #searchForm .bg-white { background-color: var(--lm-surface-elev); }
html:not(.dark) #searchSuggestions { background-color: var(--lm-surface-elev); }

/* Abgesenkte Flächen: Eingabe-Hintergründe, Chips, Segment-Gruppe */
html:not(.dark) .bg-slate-100,
html:not(.dark) .bg-slate-50,
html:not(.dark) .bg-slate-50\/80,
html:not(.dark) .bg-blue-50 { background-color: var(--lm-surface-sunken); }
html:not(.dark) .hover\:bg-slate-200:hover { background-color: var(--lm-border); }
html:not(.dark) .bg-gray-200 { background-color: var(--lm-border); }
html:not(.dark) .bg-slate-300 { background-color: var(--lm-border-strong); }

/* ------------------------------------------------------------ Akzentflächen */
html:not(.dark) .bg-emerald-50,
html:not(.dark) .bg-emerald-50\/70,
html:not(.dark) .bg-emerald-50\/80,
html:not(.dark) .bg-emerald-50\/90,
html:not(.dark) .bg-emerald-100,
html:not(.dark) .bg-green-50,
html:not(.dark) .peer:checked ~ .peer-checked\:bg-emerald-50\/90,
html:not(.dark) .aria-pressed\:bg-emerald-50\/70[aria-pressed="true"] { background-color: var(--lm-accent-soft); }
html:not(.dark) .hover\:bg-emerald-50:hover,
html:not(.dark) .hover\:bg-emerald-100:hover { background-color: var(--lm-accent-soft-hover); }

html:not(.dark) .bg-emerald-500,
html:not(.dark) .bg-green-500,
html:not(.dark) .bg-primary,
html:not(.dark) .hover\:bg-green-600:hover,
html:not(.dark) .hover\:bg-blue-600:hover,
html:not(.dark) .group:hover .group-hover\:bg-emerald-500,
html:not(.dark) .group:hover .group-hover\:bg-green-500 { background-color: var(--lm-accent); }
html:not(.dark) .hover\:bg-primaryDark:hover { background-color: var(--lm-accent-hover); }

/* Hinweisflächen (Amber) */
html:not(.dark) .bg-amber-50\/70,
html:not(.dark) .bg-amber-100 { background-color: var(--lm-warn-soft); }
html:not(.dark) .border-amber-200\/80,
html:not(.dark) .border-amber-300,
html:not(.dark) .border-amber-300\/70 { border-color: var(--lm-warn-border); }
html:not(.dark) .text-amber-700,
html:not(.dark) .text-amber-700\/80,
html:not(.dark) .text-amber-800 { color: var(--lm-warn-text); }

/* ------------------------------------------------------------ Text */
html:not(.dark) .text-slate-900,
html:not(.dark) .text-gray-900,
html:not(.dark) .text-slate-800,
html:not(.dark) .text-gray-800,
html:not(.dark) .hover\:text-slate-800:hover { color: var(--lm-text); }

html:not(.dark) .text-slate-700,
html:not(.dark) .text-gray-700,
html:not(.dark) .text-slate-600,
html:not(.dark) .text-gray-600,
html:not(.dark) .text-blue-700 { color: var(--lm-text-2); }

html:not(.dark) .text-slate-500,
html:not(.dark) .text-gray-500 { color: var(--lm-text-3); }

html:not(.dark) .text-slate-400,
html:not(.dark) .text-gray-400,
html:not(.dark) .placeholder-slate-400::placeholder { color: var(--lm-text-4); }

html:not(.dark) #searchInput::placeholder { color: #94a3b8; }

html:not(.dark) .text-emerald-600,
html:not(.dark) .text-emerald-700,
html:not(.dark) .text-emerald-700\/70,
html:not(.dark) .text-emerald-800,
html:not(.dark) .text-emerald-900,
html:not(.dark) .text-green-700,
html:not(.dark) .text-primary,
html:not(.dark) .hover\:text-primary:hover,
html:not(.dark) .hover\:text-emerald-600:hover,
html:not(.dark) .hover\:text-emerald-700:hover,
html:not(.dark) .hover\:text-emerald-900:hover,
html:not(.dark) .peer:checked ~ .peer-checked\:text-emerald-700,
html:not(.dark) .group:hover .group-hover\:text-emerald-600,
html:not(.dark) .group:hover .group-hover\:text-green-700 { color: var(--lm-accent-text); }

html:not(.dark) .text-emerald-500,
html:not(.dark) .text-emerald-500\/80,
html:not(.dark) .text-green-500,
html:not(.dark) .before\:text-emerald-500::before,
html:not(.dark) .before\:text-green-500::before,
html:not(.dark) .peer:checked ~ .peer-checked\:before\:text-emerald-500::before { color: var(--lm-accent); }
html:not(.dark) .before\:text-slate-300::before { color: var(--lm-border-strong); }

/* ------------------------------------------------------------ Ränder */
html:not(.dark) .border-slate-200,
html:not(.dark) .border-slate-200\/80,
html:not(.dark) .border-gray-200\/80,
html:not(.dark) .border-gray-100,
html:not(.dark) .border-slate-100,
html:not(.dark) .border-gray-50,
html:not(.dark) .border-slate-50,
html:not(.dark) .border-white\/90,
html:not(.dark) .border-white\/60,
html:not(.dark) .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--lm-border); }

html:not(.dark) .border-white { border-color: var(--lm-image-frame); }
html:not(.dark) .ring-white { --tw-ring-color: var(--lm-surface); }

html:not(.dark) .border-emerald-200,
html:not(.dark) .border-emerald-200\/80,
html:not(.dark) .border-emerald-300,
html:not(.dark) .border-emerald-300\/60,
html:not(.dark) .border-emerald-300\/70,
html:not(.dark) .border-green-200,
html:not(.dark) .hover\:border-emerald-200:hover,
html:not(.dark) .hover\:border-emerald-300:hover,
html:not(.dark) .hover\:border-green-300:hover,
html:not(.dark) .peer:checked ~ .peer-checked\:border-emerald-300 { border-color: var(--lm-accent-soft-border); }

html:not(.dark) .border-emerald-500,
html:not(.dark) .border-green-500,
html:not(.dark) .hover\:border-emerald-500:hover,
html:not(.dark) .aria-pressed\:border-emerald-400[aria-pressed="true"] { border-color: var(--lm-accent); }
html:not(.dark) .border-emerald-500\/40 { border-color: color-mix(in srgb, var(--lm-accent) 40%, transparent); }
html:not(.dark) .group:hover .group-hover\:border-emerald-500\/50 { border-color: color-mix(in srgb, var(--lm-accent) 55%, transparent); }
html:not(.dark) .group:focus-within .group-focus-within\:\!border-emerald-500 { border-color: var(--lm-accent) !important; }

html:not(.dark) .ring-emerald-500\/20,
html:not(.dark) .group:focus-within .group-focus-within\:ring-emerald-500\/20 { --tw-ring-color: color-mix(in srgb, var(--lm-accent) 22%, transparent); }
html:not(.dark) .peer:focus-visible ~ .peer-focus-visible\:ring-emerald-500\/40 { --tw-ring-color: color-mix(in srgb, var(--lm-accent) 40%, transparent); }

/* ------------------------------------------------------------ Verläufe */
html:not(.dark) .from-emerald-500,
html:not(.dark) .aria-checked\:from-emerald-500[aria-checked="true"] {
    --tw-gradient-from: var(--lm-grad-a) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--lm-grad-a) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html:not(.dark) .to-teal-600,
html:not(.dark) .aria-checked\:to-teal-600[aria-checked="true"] { --tw-gradient-to: var(--lm-grad-b) var(--tw-gradient-to-position); }
html:not(.dark) .hover\:from-emerald-400:hover {
    --tw-gradient-from: var(--lm-grad-a-hover) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--lm-grad-a-hover) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html:not(.dark) .hover\:to-teal-500:hover { --tw-gradient-to: var(--lm-grad-b-hover) var(--tw-gradient-to-position); }

/* H1 "Energieberater" als Verlaufstext */
html:not(.dark) .from-emerald-600 {
    --tw-gradient-from: var(--lm-heading-grad-a) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--lm-heading-grad-a) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html:not(.dark) .to-teal-500 { --tw-gradient-to: var(--lm-heading-grad-b) var(--tw-gradient-to-position); }

/* Logo-Kachel */
html:not(.dark) .from-primary {
    --tw-gradient-from: var(--lm-accent) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--lm-accent) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html:not(.dark) .to-primaryDark { --tw-gradient-to: var(--lm-accent-hover) var(--tw-gradient-to-position); }

/* Weicher Schein hinter den Hero-Bildern */
html:not(.dark) .from-emerald-100 {
    --tw-gradient-from: var(--lm-accent-soft) var(--tw-gradient-from-position);
    --tw-gradient-to: color-mix(in srgb, var(--lm-accent-soft) 0%, transparent) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html:not(.dark) .to-teal-50 { --tw-gradient-to: var(--lm-surface-sunken) var(--tw-gradient-to-position); }

/* Hero-Lichtflecken */
html:not(.dark) .from-emerald-500\/20 {
    --tw-gradient-from: var(--lm-glow-a) var(--tw-gradient-from-position);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html:not(.dark) .from-teal-500\/20 {
    --tw-gradient-from: var(--lm-glow-b) var(--tw-gradient-from-position);
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html:not(.dark) .via-indigo-500\/10 {
    --tw-gradient-stops: var(--tw-gradient-from), var(--lm-glow-c) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html:not(.dark) .bg-emerald-400\/15 { background-color: var(--lm-glow-a); }

/* ------------------------------------------------------------ Schatten (auf den Flächenton getönt) */
html:not(.dark) .shadow-sm { --tw-shadow-color: var(--lm-shadow-soft); --tw-shadow: var(--tw-shadow-colored); }
html:not(.dark) .shadow-md,
html:not(.dark) .shadow-lg,
html:not(.dark) .shadow-xl,
html:not(.dark) .shadow-2xl,
html:not(.dark) .hover\:shadow-md:hover,
html:not(.dark) .hover\:shadow-lg:hover,
html:not(.dark) .hover\:shadow-xl:hover,
html:not(.dark) .hover\:shadow-2xl:hover { --tw-shadow-color: var(--lm-shadow); --tw-shadow: var(--tw-shadow-colored); }
html:not(.dark) .shadow-slate-200\/50,
html:not(.dark) .shadow-slate-300\/60 { --tw-shadow-color: var(--lm-shadow); }
html:not(.dark) .shadow-emerald-500\/10,
html:not(.dark) .hover\:shadow-emerald-500\/10:hover { --tw-shadow-color: color-mix(in srgb, var(--lm-accent) 12%, transparent); --tw-shadow: var(--tw-shadow-colored); }
html:not(.dark) .shadow-emerald-500\/20 { --tw-shadow-color: color-mix(in srgb, var(--lm-accent) 22%, transparent); --tw-shadow: var(--tw-shadow-colored); }
html:not(.dark) .shadow-emerald-500\/25 { --tw-shadow-color: color-mix(in srgb, var(--lm-accent) 28%, transparent); --tw-shadow: var(--tw-shadow-colored); }
html:not(.dark) .hover\:shadow-emerald-500\/40:hover { --tw-shadow-color: color-mix(in srgb, var(--lm-accent) 40%, transparent); --tw-shadow: var(--tw-shadow-colored); }
html:not(.dark) #searchForm { box-shadow: 0 18px 40px -18px var(--lm-shadow), 0 1px 0 var(--lm-surface-elev) inset; }

/* ------------------------------------------------------------ Footer (bleibt dunkel, aber im Farbton der Variante) */
html:not(.dark) footer.bg-dark { background-color: var(--lm-footer-bg); }
html:not(.dark) footer .border-gray-800 { border-color: var(--lm-footer-border); }
html:not(.dark) footer .text-gray-400 { color: var(--lm-footer-text); }
html:not(.dark) footer .text-gray-500 { color: var(--lm-footer-text-muted); }
html:not(.dark) footer .text-primary,
html:not(.dark) footer .hover\:text-primary:hover { color: var(--lm-footer-accent); }
html:not(.dark) footer .bg-primary { background-color: var(--lm-accent); }

/* Ergebniskarten ("Waldrahmen"): ausgelagert nach expert-card-skin.css, damit das
   Berater-Dashboard (Live-Vorschau) dieselbe Karte zeigt wie die Suche. */

html:not(.dark) #premiumContainer > div {
    background: var(--lm-ad-block-bg);
    border-color: var(--lm-ad-block-border);
    box-shadow: 0 24px 50px -28px rgba(11, 44, 32, 0.6);
}
html:not(.dark) #premiumContainer p.text-emerald-600 { color: var(--lm-cta-mint); }
html:not(.dark) #premiumContainer h2 { color: var(--lm-ad-block-text); }
html:not(.dark) #premiumContainer > div > div > .rounded-full {
    background-color: color-mix(in srgb, var(--lm-ad-block-text) 8%, transparent);
    border-color: color-mix(in srgb, var(--lm-ad-block-text) 35%, transparent);
    color: var(--lm-ad-block-text);
}
html:not(.dark) #resultCountBadge { background-color: var(--lm-border); color: var(--lm-text); }

/* ------------------------------------------------------------ Kleinkram */
html:not(.dark) ::selection { background-color: var(--lm-accent-soft-border); color: var(--lm-text); }
html:not(.dark) .filter-badge-active { animation: none; box-shadow: 0 0 12px color-mix(in srgb, var(--lm-accent) 40%, transparent); }

/* ------------------------------------------------------------ Ergebniskopf */
/* Rechte Aktionszeile: Umkreis-Chip in Hero-Waldgrün, "Ort oder Umkreis ändern" als Split-Pill (Waldgrün-Kachel + Sand), Rechner als gefüllter CTA */
html:not(.dark) #resultsHeader .results-meta-chip { background: var(--lm-ad-block-bg); color: var(--lm-ad-block-text); }
html:not(.dark) #resultsHeader .results-meta-chip .text-emerald-300 { color: var(--lm-cta-mint); }
html:not(.dark) #resultsEditSearch { background-color: var(--lm-surface-elev); color: var(--lm-text-2); box-shadow: inset 0 0 0 1px var(--lm-border-strong); --tw-ring-shadow: 0 0 #0000; }
html:not(.dark) #resultsEditSearch:hover { color: var(--lm-accent-text); box-shadow: inset 0 0 0 1.5px var(--lm-accent); }
/* Kachel im CTA-Grün (wie "Förderung berechnen"), Icon hell – heller als das Hero-Waldgrün der Vorschau */
html:not(.dark) #resultsEditSearch .results-edit-seg { background-color: var(--lm-accent); color: var(--lm-cta-text); }
html:not(.dark) #resultsCalculatorLink { background-color: var(--lm-cta); color: var(--lm-cta-text); box-shadow: 0 4px 12px -4px var(--lm-shadow); }
html:not(.dark) #resultsCalculatorLink:hover { background-color: var(--lm-accent-hover); }
html:not(.dark) #resultsCalculatorLink .text-emerald-200 { color: var(--lm-cta-mint); }