html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #fff;
  --bg: #000;
  --body: #e5e5e5;
  --secondary: #999;
  --accent: #4d9fff;
  --hover-bg: #fff;
  --hover-text: var(--body);
  --border: rgba(255, 255, 255, 0.2);
}

/* Dark Mode via Media Query (Fallback für iOS Safari) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --primary: #fff;
    --bg: #000;
    --body: #e5e5e5;
    --secondary: #999;
    --accent: #4d9fff;
    --hover-bg: #fff;
    --hover-text: var(--body);
    --border: rgba(255, 255, 255, 0.2);
  }
}

html[data-theme="dark"] label.cat[for^=tog].expanded {
  color: var(--hover-text) !important;
  background-color: var(--hover-bg) !important;
}

html[data-theme="dark"] .lb_header {
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0.85) 80%, transparent 100%) !important;
}

html[data-theme="dark"] .cv-portrait {
  filter: grayscale(100%) brightness(.9);
}

html[data-theme="dark"] tr:nth-child(odd),
html[data-theme="dark"] .white_content tr:nth-child(odd),
html[data-theme="dark"] .cat_text tr:nth-child(odd) {
  background: rgba(255, 255, 255, .05);
}

html[data-theme="dark"] .info-box {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-left-color: var(--primary) !important;
  color: var(--body) !important;
}

html[data-theme="dark"] .info-box-minimal {
  background-color: transparent !important;
  border-left-color: var(--border) !important;
}

/* Dark Mode: Abstandsflächen-Bilder invertieren */
/* Unterstützt sowohl data-theme als auch prefers-color-scheme für iOS Safari */
html[data-theme="dark"] img[src*="abstandsflaeche"],
html[data-theme="dark"] .cat_text img[src*="abstandsflaeche"] {
  filter: invert(1) !important;
}

@media (prefers-color-scheme: dark) {
  img[src*="abstandsflaeche"],
  .cat_text img[src*="abstandsflaeche"] {
    filter: invert(1) !important;
  }
}

/* Hero-Slideshow: Optik unverändert in Dark Mode (Caption/Dots bleiben weiß auf Bild) */
html[data-theme="dark"] .hero-slide-caption,
html[data-theme="dark"] .hero-slide-caption-link,
html[data-theme="dark"] .hero-slide-dot {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}
html[data-theme="dark"] .hero-slide-caption-link {
  color: inherit;
}
html[data-theme="dark"] .hero-slide-dot:hover,
html[data-theme="dark"] .hero-slide-dot:focus-visible {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.3);
}
html[data-theme="dark"] .hero-slide-dot.active {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

/* Architekturwissen-Slideshow: Dark Mode wie Artikelbilder (invertieren) */
html[data-theme="dark"] .knowledge-hero .hero-slide {
  background-color: #fff !important;
  filter: invert(1);
}
html[data-theme="dark"] .knowledge-hero .hero-slide-caption,
html[data-theme="dark"] .knowledge-hero .hero-slide-caption-link {
  color: #000 !important;
}
@media (prefers-color-scheme: dark) {
  .knowledge-hero .hero-slide {
    background-color: #fff !important;
    filter: invert(1);
  }
  .knowledge-hero .hero-slide-caption,
  .knowledge-hero .hero-slide-caption-link {
    color: #000 !important;
  }
}