/* ACU Nord – Hell/Dunkel. Dunkel ist der Standard (Werte unverändert), Hell über html[data-theme="light"]. */
:root {
  --ink-rgb: 246, 241, 232;
  --coal-rgb: 7, 8, 8;
}

html[data-theme="light"] {
  color-scheme: light;
  --ink-rgb: 27, 24, 21;
  --coal-rgb: 250, 248, 244;
  --coal: #faf8f4;
  --coal-2: #f1ede6;
  --ink: #1b1815;
  --muted: rgba(27, 24, 21, 0.8);
  --quiet: rgba(27, 24, 21, 0.74);
  --line: rgba(27, 24, 21, 0.18);
  --copper: #9a4f1c;
  --lichen: #4d6849;
  --steel: #4a5a63;
  --cyan: #0b6a86;
  --amber: #8f5410;
  --shadow: rgba(60, 45, 30, 0.2);
  --deep: #f1ede6;
  --copper-hi: #8f4c1f;
  --copper-ink: #8f4c1f;
}

/* ---------- Schalter ---------- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.28);
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--ink-rgb), 0.86);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--ink);
  border-color: var(--copper);
  background: rgba(var(--ink-rgb), 0.06);
}
.theme-toggle:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.theme-toggle svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Dunkel aktiv: Sonne zeigen (Klick = hell). Hell aktiv: Mond zeigen (Klick = dunkel). */
.theme-toggle .ti-moon { display: none; }
html[data-theme="light"] .theme-toggle .ti-sun { display: none; }
html[data-theme="light"] .theme-toggle .ti-moon { display: block; }
.topbar .main-nav .theme-toggle { margin-left: -4px; }
.theme-toggle--float, .theme-toggle--menu { display: none; }
@media (max-width: 820px) {
  .theme-toggle--float {
    position: fixed;
    top: max(20px, calc(env(safe-area-inset-top) + 4px));
    right: 72px;
    z-index: 300;
    display: inline-grid;
    width: 40px;
    height: 40px;
    background: rgba(var(--coal-rgb), 0.74);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .theme-toggle--menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 46px;
    margin-top: 4px;
    padding: 0 14px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 12px 12px;
    color: rgba(var(--ink-rgb), 0.78);
    font: 700 13px/1.2 "Montserrat", "Inter", system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
  }
  .theme-toggle--menu svg { width: 18px; height: 18px; }
}

/* ---------- Medien-Bereiche bleiben dunkel (Text liegt auf Bild/Video) ---------- */
html[data-theme="light"] :is(.hero:has(> .hero-bg), .project-card, .portrait) {
  color: #f6f1e8;
  --ink: #f6f1e8;
  --ink-rgb: 246, 241, 232;
  --coal-rgb: 7, 8, 8;
  --coal: #070808;
  --muted: rgba(246, 241, 232, 0.72);
  --quiet: rgba(246, 241, 232, 0.5);
  --line: rgba(246, 241, 232, 0.18);
  --copper: #c77b43;
  --lichen: #9fb19b;
  --steel: #a8b5bd;
  --cyan: #78d8f3;
  --amber: #f2b16b;
}

/* ---------- Seitenhintergrund ---------- */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 10% 6%, rgba(11, 106, 134, 0.07), transparent 32rem),
    radial-gradient(circle at 86% 16%, rgba(154, 79, 28, 0.08), transparent 34rem),
    linear-gradient(180deg, #fcfbf8 0%, #f4f0e9 46%, #faf8f4 100%);
}

/* ---------- Logo (hellgraue Linien -> dunkel auf Weiß) ---------- */
html[data-theme="light"] .mark,
html[data-theme="light"] .topbar .mark {
  filter: invert(1) brightness(0.28) contrast(1.15) drop-shadow(0 10px 14px rgba(60, 45, 30, 0.12)) !important;
}
html[data-theme="light"] .brand:hover .mark,
html[data-theme="light"] .topbar .brand:hover .mark {
  filter: invert(1) brightness(0.2) contrast(1.15) drop-shadow(0 14px 20px rgba(60, 45, 30, 0.18)) !important;
}

/* ---------- Mobil-Menü ---------- */
html[data-theme="light"] .mobile-menu-button {
  background: rgba(250, 248, 244, 0.92) !important;
  border-color: rgba(27, 24, 21, 0.28) !important;
  box-shadow: 0 10px 30px rgba(60, 45, 30, 0.16) !important;
}
html[data-theme="light"] .mobile-site-menu {
  background: rgba(250, 248, 244, 0.98) !important;
  border-color: rgba(27, 24, 21, 0.18) !important;
  box-shadow: 0 18px 50px rgba(60, 45, 30, 0.2) !important;
}
html[data-theme="light"] .mobile-site-menu a { color: rgba(27, 24, 21, 0.82) !important; }
html[data-theme="light"] .mobile-site-menu a[aria-current="page"] { background: rgba(154, 79, 28, 0.14) !important; color: #1b1815 !important; }

/* ---------- Cookie-Banner ---------- */
html[data-theme="light"] .cookie-consent {
  background: rgba(250, 248, 244, 0.97);
  border-color: rgba(27, 24, 21, 0.2);
  box-shadow: 0 18px 50px rgba(60, 45, 30, 0.2);
}

/* ---------- Leistungen ---------- */
html[data-theme="light"] .viewport {
  background: linear-gradient(135deg, #ffffff, #efeae1);
  box-shadow: 0 24px 70px rgba(60, 45, 30, 0.16);
}
html[data-theme="light"] .image-shade {
  background:
    radial-gradient(circle at var(--mx, 65%) var(--my, 35%), rgba(255, 255, 255, 0.18), transparent 18rem),
    linear-gradient(180deg, transparent 58%, rgba(250, 248, 244, 0.94));
}

/* ---------- Projekte / Holzprojekte ---------- */
html[data-theme="light"] .project-card { background: #ebe6dd; border-color: rgba(27, 24, 21, 0.12); }
html[data-theme="light"] .modal { background: rgba(250, 248, 244, 0.96); }
html[data-theme="light"] .modal-close { background: rgba(27, 24, 21, 0.06); border-color: rgba(27, 24, 21, 0.3); color: #1b1815; }
html[data-theme="light"] .modal-close:hover { background: rgba(27, 24, 21, 0.14); }

/* ---------- Über uns ---------- */
html[data-theme="light"] .vision-block { box-shadow: 0 20px 60px rgba(60, 45, 30, 0.12); }
html[data-theme="light"] .vision-grid,
html[data-theme="light"] .competence-list { background: rgba(27, 24, 21, 0.14); }
html[data-theme="light"] .vision-card { background: rgba(255, 255, 255, 0.78); }
html[data-theme="light"] .competence-list span { background: rgba(255, 255, 255, 0.82); }
html[data-theme="light"] .portrait { background: #e9e4db; box-shadow: 0 20px 60px rgba(60, 45, 30, 0.2); }

/* ---------- Landing / Viewer ---------- */
html[data-theme="light"] .xp-frame {
  --glass: rgba(250, 248, 244, 0.88);
  background: radial-gradient(ellipse at 50% 38%, #ffffff 0%, var(--coal) 70%);
  box-shadow: 0 24px 60px -34px rgba(60, 45, 30, 0.45);
}
html[data-theme="light"] :is(.xp-toolbar, .xp-layers, .xp-exit, .xp-menu, .xp-sheet-pill) {
  box-shadow: 0 14px 34px -20px rgba(60, 45, 30, 0.45);
}
html[data-theme="light"] .walk-joy-knob { box-shadow: 0 2px 10px rgba(60, 45, 30, 0.3); }

/* ---------- Fußzeile mit Rechtslinks (erscheint am Seitenende) ---------- */
html[data-theme="light"] .footer-legal.is-visible { opacity: 1; }
html[data-theme="light"] .footer-legal a { color: rgba(27, 24, 21, 0.8); border-bottom-color: rgba(27, 24, 21, 0.4); }
html[data-theme="light"] .footer-legal a:hover { color: #1b1815; border-bottom-color: #1b1815; }

/* ---------- Kontakt: Planblatt bleibt Papier, hebt sich auf Weiß über Rahmen/Schatten ab ---------- */
html[data-theme="light"] .k-sheet {
  --paper: #ffffff;
  box-shadow: 0 0 0 1px rgba(27, 24, 21, 0.14), 0 28px 70px rgba(60, 45, 30, 0.18);
}
html[data-theme="light"] .modal-close { background: rgba(250, 248, 244, 0.94); border-color: rgba(27, 24, 21, 0.45); }

/* Inline-Farben der Projektseiten (Ansprechpartner-Zeile) */
html[data-theme="light"] .portfolio-footer small { color: rgba(27, 24, 21, 0.74) !important; }