html.dark-mode {
  background-color: #111;
  color: #eee;
  min-height: 100vh;
  overflow-x: hidden;
}

html.dark-mode body {
  background: #111;
  color: #eee;
}

/* NUR html und body bekommen min-height - nicht verschachtelte Elemente! */
html.dark-mode .site-wrap,
html.dark-mode .site-container,
html.dark-mode .site-content,
html.dark-mode .sidebar-content,
html.dark-mode main {
  background: #111;
  color: #eee;
  min-height: 0;
}

html.dark-mode .site-wrap:before,
html.dark-mode .site-header,
html.dark-mode .theme-container:before {
  background: transparent;
}

/* ========== TEXT-FARBEN (Hohe Spezifität für Mobile) ========== */
html.dark-mode,
html.dark-mode body,
html.dark-mode p,
html.dark-mode span,
html.dark-mode div,
html.dark-mode a,
html.dark-mode li,
html.dark-mode td,
html.dark-mode th,
html.dark-mode .rich-text,
html.dark-mode .rich-text div,
html.dark-mode .rich-text span,
html.dark-mode .rich-text p {
  color: #eee !important;
}

html.dark-mode a,
html.dark-mode .rich-text a {
  color: #ddd !important;
}

/* Inline-Styles überschreiben */
html.dark-mode [style*="color"] {
  color: #eee !important;
}

html.dark-mode [style*="#000"],
html.dark-mode [style*="#222"],
html.dark-mode [style*="#333"],
html.dark-mode [style*="#666"],
html.dark-mode [style*="#999"] {
  color: #ccc !important;
}

/* Logo & Navigation */
html.dark-mode .logo,
html.dark-mode .logo a,
html.dark-mode .logo-secondary,
html.dark-mode .logo-secondary a {
  color: #fff !important;
}

html.dark-mode nav .gallery-title a,
html.dark-mode nav .page-title a {
  color: #eee !important;
}

html.dark-mode nav .project-title a {
  color: #ccc !important;
}

/* Footer */
html.dark-mode .site-footer,
html.dark-mode .site-footer a {
  color: #ccc !important;
}

/* Page Header */
html.dark-mode .page-header .title {
  color: #eee !important;
}

html.dark-mode .page-header .description {
  color: #ccc !important;
}

/* Project Covers */
html.dark-mode .project-cover .title {
  color: #eee !important;
}

html.dark-mode .project-cover .date,
html.dark-mode .project-cover .custom1 {
  color: #ccc !important;
}

html.dark-mode .project-cover .cover-image:after {
  background-color: #111;
}

html.dark-mode .project-cover:hover .cover-image:after {
  background-color: #222;
}

/* Project Modules */
html.dark-mode .project-module-text .rich-text,
html.dark-mode .project-module-text .sub-title {
  color: #eee !important;
}

html.dark-mode .grid__image-caption {
  color: #ccc !important;
}

/* Mobile-spezifische Fixes - Hohe Spezifität für iOS Safari */
@media (max-width: 932px) {
  html.dark-mode body,
  html.dark-mode .site-header,
  html.dark-mode .logo,
  html.dark-mode .logo a,
  html.dark-mode .logo-secondary,
  html.dark-mode .logo-secondary a,
  html.dark-mode nav .gallery-title a,
  html.dark-mode nav .project-title a,
  html.dark-mode nav .page-title a,
  html.dark-mode .project-cover .title,
  html.dark-mode .project-cover .date,
  html.dark-mode .project-cover .custom1,
  html.dark-mode .site-footer,
  html.dark-mode .site-footer a,
  html.dark-mode p,
  html.dark-mode span,
  html.dark-mode div {
    color: #eee !important;
  }

  html.dark-mode .responsive-nav {
    background-color: #111 !important;
  }

  html.dark-mode .responsive-nav nav .gallery-title a,
  html.dark-mode .responsive-nav nav .project-title a,
  html.dark-mode .responsive-nav nav .page-title a {
    color: #eee !important;
  }

  /* Fix: Layout-Breite in Mobile */
  html.dark-mode .site-content,
  html.dark-mode main {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* iOS Safari spezifisch: -webkit-text-size-adjust */
  html.dark-mode body {
    -webkit-text-size-adjust: 100%;
  }
}

/* Hamburger & Close-Buttons */
html.dark-mode .hamburger i {
  background-color: #fff;
}

html.dark-mode .close-responsive-button:before,
html.dark-mode .close-responsive-button:after {
  background-color: #fff;
}

/* Formular-Elemente */
html.dark-mode .form-field label {
  color: #ccc !important;
}

html.dark-mode .form-field input,
html.dark-mode .form-field textarea {
  background: #222;
  border-color: #444;
  color: #eee !important;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
  position: fixed;
  top: 80px;
  right: 30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #ccc;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
  background: rgba(0,0,0,0.05);
  border-color: #666;
}

.dark-mode-toggle svg {
  fill: none;
  stroke: #666;
  stroke-width: 1.5;
  transition: stroke 0.3s ease;
}

.dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon {
  width: 18px;
  height: 18px;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dark-mode-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.dark-mode-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.dark-mode .dark-mode-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.dark-mode .dark-mode-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

html.dark-mode .dark-mode-toggle {
  background: transparent;
  border-color: #555;
}

html.dark-mode .dark-mode-toggle:hover {
  background: rgba(255,255,255,0.1);
  border-color: #999;
}

html.dark-mode .dark-mode-toggle svg {
  stroke: #555;
}

html.dark-mode .dark-mode-toggle:hover svg {
  stroke: #999;
}

@media (max-width: 932px) {
  .dark-mode-toggle {
    top: 95px;
    right: 20px;
    width: 36px;
    height: 36px;
    z-index: 10001;
  }
}

/* Transition */
body.transition-enabled.dark-mode-transition {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode-transition .site-wrap,
body.dark-mode-transition .sidebar-content,
body.dark-mode-transition main,
body.dark-mode-transition .site-header,
body.dark-mode-transition nav,
body.dark-mode-transition .logo,
body.dark-mode-transition .logo-secondary,
body.dark-mode-transition .site-footer {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Lazy Load Placeholder */
html.dark-mode .grid__item-image-lazy {
  background-color: rgba(255,255,255,0.05);
}