:root {
  /* === Light Theme — Material Design 3 (precise) === */
  /* Surfaces */
  --bd-color: #F5F5F5; /* Grey 100 - page background */
  --ct-color: #FFFFFF; /* White - card/container */
  --div-color: #FFFFFF; /* White - inner card */
  --blk-color: #1A1C1A; /* Grey 900 near-black for text - WCAG AAA on white */
  --header-color: #E8F5E9; /* Green 50 - header bg (Material) */

  /* Primary - Material Green */
  --bt-color: #43A047; /* Green 600 - button */
  --bt-h-color: #2E7D32; /* Green 800 - button hover (4.5:1 contrast) */
  --bt-f-color: #FFFFFF;
  --link-color: #2E7D32; /* Green 800 - link (5.1:1 on white, WCAG AA) */
  --link-h-color: #1B5E20; /* Green 900 - link hover */
  
  /* Green tonal palette (Material 500 scale) */
  --green50-color: #E8F5E9;  /* Green 50 */
  --green100-color: #C8E6C9; /* Green 100 */
  --green200-color: #A5D6A7; /* Green 200 */
  --green300-color: #81C784; /* Green 300 */
  --green400-color: #66BB6A; /* Green 400 */
  --green500-color: #4CAF50; /* Green 500 */
  --green600-color: #43A047; /* Green 600 */
  --green700-color: #388E3C; /* Green 700 */
  --green800-color: #2E7D32; /* Green 800 */
  --green900-color: #1B5E20; /* Green 900 */

  /* Orange accent - for light theme subtle highlights */
  --accent-color: #EF6C00; /* Orange 800 - use sparingly */
  --accent-light: #FFB74D; /* Orange 300 */
  --accent-h-color: #E65100; /* Orange 900 */

  /* Grey - Material Grey */
  --alt-div-color: #F5F5F5; /* Grey 100 */
  --alt-div-hover-color: #EEEEEE; /* Grey 200 */
  --grey50-color: #FAFAFA; /* Grey 50 */
  --grey100-color: #F5F5F5;
  --grey200-color: #EEEEEE; /* Grey 200 */
  --grey300-color: #E0E0E0; /* Grey 300 */
  --grey400-color: #BDBDBD; /* Grey 400 */
  --grey600-color: #757575; /* Grey 600 - secondary text (4.6:1 on white) */

  /* Semantic */
  --red600-color: #E53935; /* Red 600 */
  --yellow600-color: #FDD835; /* Yellow 600 */
  --lightblue600-color: #039BE5; /* Light Blue 600 */

  /* Overlay über dem Header-Hintergrundbild (background_haus.jpg) */
  --header-img-overlay: rgba(255,255,255,0); /* transparent = keine Abdunkelung im Hell */
}

/* === Dark Theme — Material Dark + Orange accent (as requested) === */
/* Automatisch via System + manuell via html[data-theme="dark"] */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces - Material Dark */
    --bd-color: #121212; /* Dark bg */
    --ct-color: #1E1E1E; /* Surface */
    --div-color: #252525; /* Card */
    --blk-color: #E8E8E8; /* High-emphasis text (15.8:1) */
    --header-color: #16110A; /* Dark warm - header bg (dunkler Banner) */

    /* Primary becomes Orange in dark for requested accent */
    --bt-color: #FF9800; /* Orange 500 - button (great on dark) */
    --bt-h-color: #FB8C00; /* Orange 600 - hover */
    --bt-f-color: #000000; /* Text on orange */
    --link-color: #FFB74D; /* Orange 300 - link (10.5:1 on #121212, WCAG AAA) */
    --link-h-color: #FFCC80; /* Orange 200 - hover */

    /* Green tints map to orange equivalents in dark (orange tonal palette) */
    --green50-color: #2A1E10;  /* dunkles Orange-50 (Hintergrund Töne) */
    --green100-color: #3B2916; /* dunkles Orange-100 (Flächen) */
    --green200-color: #54371A; /* dunkles Orange-200 */
    --green300-color: #7A4A16; /* dunkles Orange-300 (Th-Bg, heller Text ok) */
    --green400-color: #D84315; /* Deep Orange 700 - weißer Text 4.5:1 */
    --green500-color: #F57C00; /* Orange 700 */
    --green600-color: #FF9800; /* Orange 500 - Akzente/Borders in dark */
    --accent-color: #FF9800;
    --accent-light: #FFCC80;
    --accent-h-color: #FFB74D;

    --alt-div-color: #2A2A2A;
    --alt-div-hover-color: #3A3A3A;
    --grey200-color: #2E2E2E;
    --grey300-color: #3A3A3A;
    --grey50-color: #1E1E1E;
    --grey400-color: #5A5A5A;
    --grey600-color: #B0B0B0; /* secondary text on dark (7:1) */

    --header-img-overlay: rgba(18,18,18,0.62); /* Header-Bild abdunkeln */
  }
}
html[data-theme="dark"] {
  --bd-color: #121212;
  --ct-color: #1E1E1E;
  --div-color: #252525;
  --blk-color: #E8E8E8;
  --header-color: #16110A;
  --header-img-overlay: rgba(18,18,18,0.62);
  --bt-color: #FF9800;
  --bt-h-color: #FB8C00;
  --bt-f-color: #000000;
  --link-color: #FFB74D;
  --link-h-color: #FFCC80;
  --green50-color: #2A1E10;
  --green100-color: #3B2916;
  --green200-color: #54371A;
  --green300-color: #7A4A16;
  --green400-color: #D84315;
  --green500-color: #F57C00;
  --green600-color: #FF9800;
  --accent-color: #FF9800;
  --accent-light: #FFCC80;
  --accent-h-color: #FFB74D;
  --alt-div-color: #2A2A2A;
  --alt-div-hover-color: #3A3A3A;
  --grey200-color: #2E2E2E;
  --grey300-color: #3A3A3A;
  --grey50-color: #1E1E1E;
  --grey400-color: #5A5A5A;
  --grey600-color: #B0B0B0;
}
html[data-theme="light"] {
  --bd-color: #F5F5F5;
  --ct-color: #FFFFFF;
  --div-color: #FFFFFF;
  --blk-color: #1A1C1A;
  --header-color: #E8F5E9;
  --bt-color: #43A047;
  --bt-h-color: #2E7D32;
  --bt-f-color: #FFFFFF;
  --link-color: #2E7D32;
  --link-h-color: #1B5E20;
  --green50-color: #E8F5E9;
  --green100-color: #C8E6C9;
  --green200-color: #A5D6A7;
  --green300-color: #81C784;
  --green400-color: #66BB6A;
  --green600-color: #43A047;
  --accent-color: #EF6C00;
  --accent-light: #FFB74D;
  --accent-h-color: #E65100;
  --alt-div-color: #F5F5F5;
  --alt-div-hover-color: #EEEEEE;
  --grey200-color: #EEEEEE;
  --grey300-color: #E0E0E0;
  --grey50-color: #FAFAFA;
  --grey400-color: #BDBDBD;
  --grey600-color: #757575;
  --header-img-overlay: rgba(255,255,255,0); /* explizit kein Overlay im Hell */
}

/* Smooth transition for theme switch - keep subtle to avoid motion sickness */
html {
  transition: background-color 0.25s ease, color 0.25s ease;
}
body {
  background-color: var(--bd-color);
  color: var(--blk-color);
}
/* Ensure links/buttons use accent in dark with proper focus */
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* Orange accents for dark mode - headline, cards, etc.
   Guarded with html:not([data-theme="light"]) so manual "Hell" wins over system dark */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .headline_bg.headline_plain { color: var(--blk-color); }
  html:not([data-theme="light"]) .headline_bg.headline_plain::after { background: linear-gradient(90deg, #FF9800, #FFB74D); }
  html:not([data-theme="light"]) .news > div[show-date],
  html:not([data-theme="light"]) .news > div[data-show-date] { border-left-color: #FF9800; }
  html:not([data-theme="light"]) .aktiv_schoolyear .aktiv_element { border-left-color: #FF9800; }
  html:not([data-theme="light"]) .contact-table { border-left-color: #FF9800; }
  html:not([data-theme="light"]) .nav_icon { filter: brightness(3); }
}
html[data-theme="dark"] .headline_bg.headline_plain { color: var(--blk-color); }
html[data-theme="dark"] .headline_bg.headline_plain::after { background: linear-gradient(90deg, #FF9800, #FFB74D); box-shadow: 0 6px 20px rgba(255,152,0,0.15); }
html[data-theme="dark"] .news > div[show-date],
html[data-theme="dark"] .news > div[data-show-date] { border-left-color: #FF9800; }
html[data-theme="dark"] .aktiv_schoolyear .aktiv_element { border-left-color: #FF9800; }
html[data-theme="dark"] .contact-table { border-left-color: #FF9800; }
html[data-theme="dark"] .download { background-color: var(--bt-color); color: var(--bt-f-color); }
html[data-theme="dark"] .download:hover { background-color: var(--bt-h-color); }
html[data-theme="dark"] .nav_icon { filter: brightness(3); }
html[data-theme="dark"] .aktiv_schoolyear { background: var(--green100-color); }
html[data-theme="dark"] .chronic_schoolyear { background: var(--green100-color); }
html[data-theme="dark"] .headline_bg { color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .headline_bg { color: #FFFFFF; }
}

/* Hartcodierte grüne Schatten/Ringe → Orange-Äquivalente in dark */
html[data-theme="dark"] .contact-table {
  box-shadow: 0 6px 18px rgba(0,0,0,0.40), inset 0 0 0 6px rgba(255,152,0,0.10);
}
html[data-theme="dark"] .contact-table thead th,
html[data-theme="dark"] .contact-table th {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 6px 14px -8px rgba(255,152,0,0.20),
    inset 6px 0 14px -8px rgba(255,152,0,0.16),
    inset -6px 0 14px -8px rgba(255,152,0,0.16),
    inset 0 0 0 6px rgba(255,152,0,0.10);
}
html[data-theme="dark"] .styled-table {
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 6px rgba(255,152,0,0.12);
}
html[data-theme="dark"] .styled-table thead th,
html[data-theme="dark"] .styled-table th {
  box-shadow: inset 0 0 0 6px rgba(255,152,0,0.10);
}
html[data-theme="dark"] .stunden-table {
  box-shadow: 0 8px 20px rgba(0,0,0,0.40);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .contact-table {
    box-shadow: 0 6px 18px rgba(0,0,0,0.40), inset 0 0 0 6px rgba(255,152,0,0.10);
  }
  html:not([data-theme="light"]) .contact-table thead th,
  html:not([data-theme="light"]) .contact-table th {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow:
      inset 0 6px 14px -8px rgba(255,152,0,0.20),
      inset 6px 0 14px -8px rgba(255,152,0,0.16),
      inset -6px 0 14px -8px rgba(255,152,0,0.16),
      inset 0 0 0 6px rgba(255,152,0,0.10);
  }
  html:not([data-theme="light"]) .styled-table {
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 6px rgba(255,152,0,0.12);
  }
  html:not([data-theme="light"]) .styled-table thead th,
  html:not([data-theme="light"]) .styled-table th {
    box-shadow: inset 0 0 0 6px rgba(255,152,0,0.10);
  }
  html:not([data-theme="light"]) .stunden-table {
    box-shadow: 0 8px 20px rgba(0,0,0,0.40);
  }
}

/* Google Maps & Kalender im dark mode abdunkeln (Invert-Trick für iframes) */
html[data-theme="dark"] .mapouter iframe,
html[data-theme="dark"] .calendar-facade iframe,
html[data-theme="dark"] iframe.map,
html[data-theme="dark"] iframe.upcoming_dates,
html[data-theme="dark"] iframe.calendar {
  filter: invert(0.90) hue-rotate(180deg) brightness(0.95) contrast(0.90);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .mapouter iframe,
  html:not([data-theme="light"]) .calendar-facade iframe,
  html:not([data-theme="light"]) iframe.map,
  html:not([data-theme="light"]) iframe.upcoming_dates,
  html:not([data-theme="light"]) iframe.calendar {
    filter: invert(0.90) hue-rotate(180deg) brightness(0.95) contrast(0.90);
  }
}