html:not(.dark):not([data-theme="dark"]) {
  /* If your project is shadcn/ui style (CSS vars), these help globally */
  --aw-foreground: 15 23 42;     /* slate-900 */
  --aw-muted: 71 85 105;         /* slate-600 */
  --aw-border: 226 232 240;      /* slate-200 */
  --aw-card: 255 255 255;        /* white */
  --aw-surface: 248 250 252;     /* slate-50 */
}



html:not(.dark):not([data-theme="dark"]) header + div svg,
html:not(.dark):not([data-theme="dark"]) .topbar svg,
html:not(.dark):not([data-theme="dark"]) .header-info svg {
  opacity: .85;
}

/* ---------- 2) Separator under "Garantie & Gewährleistung ..." row ---------- */
/* If that row is the first section after hero, this makes the bottom border visible */
html:not(.dark):not([data-theme="dark"]) .benefits,
html:not(.dark):not([data-theme="dark"]) .trust-row,
html:not(.dark):not([data-theme="dark"]) .usp-row {
  border-bottom: 1px solid rgb(var(--aw-border)) !important;
}

/* Fallback: add a subtle divider to the first big horizontal row that contains those benefit items */
html:not(.dark):not([data-theme="dark"]) section[id] > div:where(.container, .mx-auto):first-child {
  /* no-op by default; keep lightweight */
}

/* More robust: if the benefit strip uses a wrapper with lots of spacing and sits above “Leistungen” */
html:not(.dark):not([data-theme="dark"]) section:where(:not(#leistungen)):has(+ section#leistungen) {
  border-bottom: 1px solid rgb(var(--aw-border));
}

/* ---------- 4) FAQ: headings + questions are too light in light mode ---------- */
html:not(.dark):not([data-theme="dark"]) #faq,
html:not(.dark):not([data-theme="dark"]) section[id="faq"] {
  color: rgb(var(--aw-foreground));
}

/* Give accordion rows a visible divider */
html:not(.dark):not([data-theme="dark"]) #faq .border-white\/10,
html:not(.dark):not([data-theme="dark"]) section[id="faq"] .border-white\/10 {
  border-color: rgb(var(--aw-border)) !important;
}



/* Cards in contact currently look like dark-mode cards; force light surfaces */
html:not(.dark):not([data-theme="dark"]) #kontakt [class*="bg-slate-9"],
html:not(.dark):not([data-theme="dark"]) #kontakt [class*="bg-slate-8"],
html:not(.dark):not([data-theme="dark"]) #kontakt [class*="bg-slate-950"],
html:not(.dark):not([data-theme="dark"]) #kontakt [class*="bg-black"],
html:not(.dark):not([data-theme="dark"]) section[id="kontakt"] [class*="bg-slate-9"],
html:not(.dark):not([data-theme="dark"]) section[id="kontakt"] [class*="bg-black"] {
  border: 1px solid rgb(var(--aw-border)) !important;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .06) !important;
}