:root {
  --phantiwood-blau: #4a90e2; /* Beispiel-Blau aus dem Logo */
  --phantiwood-gruen: #7ed321; /* Beispiel-Grün aus dem Logo */
  --akzent-blau-hell: #a6c9f4;
  --akzent-gruen-hell: #c3ed8e;
  --neutral-hell: #f4f4f4;
  --neutral-mittel: #ddd;
  --text-primary: #333;
  --text-secondary: #555;
  --white: #fff;
  --phantiwood-blau-rgb: 74, 144, 226;
  --phantiwood-gruen-rgb: 126, 211, 33;
  --akzent-blau-hell-rgb: 166, 201, 244;
  --akzent-gruen-hell-rgb: 195, 237, 142;
  --grau: #e8e8ed;
  --black: #000;
 }

 body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--neutral-hell);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
 }

 header {
  background-color: var(--white);
  color: var(--text-primary);
  padding: 30px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-bottom: 3px solid var(--akzent-blau-hell); /* Farblicher Akzent unten */
 }
 @media (max-width: 768px) {
  header .secondary-nav nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  header .secondary-nav nav ul li {
    margin: 5px;
  }

  header .secondary-nav nav ul li a {
    font-size: 0.9em;
    padding: 8px 10px;
  }
}
 
header .secondary-nav {
  margin-top: 15px; /* für 10 Pixel Abstand */
    background-color: rgba(0, 0, 0, 0.02); /* Sehr hellgrau */
  box-shadow: 0 2px 5px rgba(var(--phantiwood-blau-rgb), 0.15); /* Blauer Schatten mit mehr Intensität */
  padding: 10px 20px; /* Optional: Innenabstand */
}
header .first-nav { 
  margin-top: 15px; /* für 10 Pixel Abstand */
    background-color: rgba(0, 0, 0, 0.02); /* Sehr hellgrau */
  box-shadow: 0 2px 5px rgba(var(--phantiwood-blau-rgb), 0.15); /* Grüner Schatten */
  padding: 10px 20px; /* Optional: Innenabstand */
}
 .logo {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 15px;
  animation: pulseLogo 2s infinite alternate;
  color: var(--phantiwood-blau); /* Logo-Text in Blau */
 }
 /* Standard-Größe des Logos */
#headerLogoImage {
    /* Füge hier deine Standard-Größenangaben ein, z.B.: */
    max-width: 200px;
    height: auto;
}

/* Größe des Logos im Dark Mode */
body.dark-mode #headerLogoImage {
    max-width: 300px; /* Hier die gewünschte größere Breite */
    height: auto; /* Die Höhe passt sich proportional an */
}
 

 @keyframes pulseLogo {
  0% {
   transform: scale(1);
  }

  100% {
   transform: scale(1.05);
   color: var(--phantiwood-gruen); /* Pulsierender Farbwechsel */
  }
 }

 .logo img {
  height: 200px;
  vertical-align: middle;
  margin-right: 10px;
 }
 
 nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
 }

@media (max-width: 768px) {
  nav ul {
    display: flex;
    flex-wrap: wrap; /* Umbruch aktivieren */
    justify-content: center; /* Zentriert die umgebrochenen Links */
  }

  nav ul li {
    margin: 5px; /* Reduzierter Margin für umgebrochene Elemente */
  }

  nav ul li a {
    font-size: 0.9em;
    padding: 8px 10px;
  }
}

 nav ul li {
  margin: 0 15px;
  animation: slideInNav 0.5s ease-out forwards;
  opacity: 0;
 }

 nav ul li:nth-child(1) {
  animation-delay: 0.2s;
 }

 nav ul li:nth-child(2) {
  animation-delay: 0.4s;
 }

 nav ul li:nth-child(3) {
  animation-delay: 0.6s;
 }

 nav ul li:nth-child(4) {
  animation-delay: 0.8s;
 }

 nav ul li:nth-child(5) {
  animation-delay: 1.0s;
 }

 nav ul li:nth-child(6) {
  animation-delay: 1.2s;
 }

 nav ul li:nth-child(7) {
  animation-delay: 1.4s;
 }

 nav ul li:nth-child(8) {
  animation-delay: 1.6s;
 }

 nav ul li:nth-child(9) {
  animation-delay: 1.8s;
 }

 @keyframes slideInNav {
  0% {
   transform: translateX(-20px);
   opacity: 0;
  }

  100% {
   transform: translateX(0);
   opacity: 1;
  }
 }

 nav a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 8px 12px;
  border-radius: 5px;
 }

 nav a:hover {
  background-color: rgba(var(--akzent-gruen-hell-rgb), 0.2);
  color: var(--phantiwood-blau);
  transform: scale(1.1);
 }

 .hero {
  background: linear-gradient(to bottom right, var(--akzent-blau-hell), var(--akzent-gruen-hell));
  padding: 100px 40px;
  text-align: center;
  overflow: hidden;
  color: var(--white); /* Helle Textfarbe auf dem farbigen Hintergrund */
 }
 .hero-content {
  max-width: 800px;
  margin: 0 auto;
 }

 .hero h1 {
  font-size: 3em;
  margin-bottom: 20px;
  animation: fadeInUp 1s ease-out;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Leichter Schatten für mehr Tiefe */
 }
 
 @media (max-width: 768px) { /* Regeln für Bildschirme bis 768 Pixel Breite (typische Mobilgeräte) */
  .hero h1 {
    font-size: 2em; /* Kleinere Schriftgröße für mobile Geräte */
    margin-bottom: 15px; /* Ggf. auch den unteren Margin etwas reduzieren */
  }
}

 .hero p {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 30px;
  animation: fadeInUp 1.5s ease-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 }

 .button {
  display: inline-block;
  background-color: var(--phantiwood-blau);
  color: var(--white);
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulseButton 2s infinite alternate;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten für Hervorhebung */
 }

 @keyframes pulseButton {
  0% {
   transform: scale(1);
  }

  100% {
   transform: scale(1.08);
   background-color: var(--phantiwood-gruen); /* Pulsierender Farbwechsel */
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  }
 }

 .button:hover {
  background-color: var(--akzent-blau-hell);
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }

 .decorative-line {
  width: 80%;
  height: 2px;
  background-color: var(--akzent-gruen-hell); /* Farbige Linie */
  margin: 30px auto;
 }

 .services {
  padding: 40px 30px;
  background-color: var(--neutral-hell);
  text-align: center;
  overflow: auto;
 }

 .services h2 {
  font-size: 2.5em;
  color: var(--phantiwood-blau); /* Farbige Überschrift */
  text-align: center;
  margin-bottom: 40px;
  transform: translateX(50px);
  opacity: 0;
  animation: slideInRight 1s ease-out forwards;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 }

 @keyframes slideInTitle {
  0% {
   opacity: 0;
   transform: translateY(-20px);
  }

  100% {
   opacity: 1;
   transform: translateY(0);
  }
 }

 .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding-top: 30px;
 }

 .service-item {
  background-color: var(--white);
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  animation: fadeInUpService 0.6s ease-out forwards, subtleMove 2s infinite alternate ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-top: 5px solid var(--akzent-gruen-hell); /* Farbiger Akzentbalken */
 }

 .service-grid>.service-item:nth-child(1) {
  animation-delay: 0.2s;
 }

 .service-grid>.service-item:nth-child(2) {
  animation-delay: 0.4s;
 }

 .service-grid>.service-item:nth-child(3) {
  animation-delay: 0.6s;
 }

 .service-grid>.service-item:nth-child(4) {
  animation-delay: 0.8s;
 }

 @keyframes fadeInUpService {
  0% {
   opacity: 0;
   transform: translateY(30px);
  }

  100% {
   opacity: 1;
   transform: translateY(0);
  }
 }

 @keyframes subtleMove {
  0% {
   transform: translateY(0) scale(1);
  }

  100% {
   transform: translateY(-5px) scale(1.03);
  }
 }

 .service-item:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border-top-color: var(--phantiwood-blau); /* Farbwechsel beim Hover */
 }

 .service-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  opacity: 0;
  transform: scale(0.8);
  animation: zoomInImage 0.6s ease-out forwards 0.4s;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1)); /* Leichter Bildschatten */
 }

 @keyframes zoomInImage {
  0% {
   opacity: 0;
   transform: scale(0.8);
  }

  100% {
   opacity: 1;
   transform: scale(1);
  }
 }

 .service-item h3 {
  font-size: 1.2em;
  color: var(--phantiwood-gruen); /* Farbige Überschrift */
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpText 0.6s ease-out forwards 0.6s;
 }

 .service-item p {
  color: var(--text-secondary);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpText 0.6s ease-out forwards 0.8s;
 }

 @keyframes slideUpText {
  0% {
   opacity: 0;
   transform: translateY(10px);
  }

  100% {
   opacity: 1;
   transform: translateY(0);
  }
 }

 .gallery {
  padding: 80px 40px;
  background: linear-gradient(180deg, var(--neutral-mittel), var(--akzent-blau-hell)); /* Farbiger Hintergrund */
  overflow: hidden;
 }
 .gallery h2 {
  font-size: 2.5em;
  color: var(--phantiwood-blau); /* Farbige Überschrift */
  text-align: center;
  margin-bottom: 40px;
  transform: translateX(50px);
  opacity: 0;
  animation: slideInRight 1s ease-out forwards;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 }

 .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding-top: 20px;
 }

 .gallery-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: scale(0.9);
  opacity: 0;
  animation: zoomIn 0.6s ease-out forwards;
  animation-delay: calc(0.15s * var(--animation-order));
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }

 .gallery-item:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }

 @keyframes zoomIn {
  0% {
   transform: scale(0.9);
   opacity: 0;
  }

  100% {
   transform: scale(1);
   opacity: 1;
  }
 }

 .gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease-in-out;
  filter: brightness(90%); /* Subtile Abdunklung */
 }

 .gallery-item:hover img {
  transform: scale(1.1);
  filter: brightness(100%); /* Aufhellung beim Hover */
 }

 .contact {
  padding: 80px 40px;
  background-color: var(--neutral-hell);
  text-align: center;
  overflow: hidden;
 }

 .contact h2 {
  font-size: 2.5em;
  color: var(--phantiwood-blau); /* Farbige Überschrift */
  margin-bottom: 30px;
  animation: fadeIn 1s ease-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 }

 @keyframes fadeIn {
  0% {
   opacity: 0;
  }

  100% {
   opacity: 1;
  }
 }

 .contact p {
  font-size: 1.2em;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 30px;
  animation: fadeInUp 1.2s ease-out;
 }

 .contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: pulseContactInfo 1.8s infinite alternate;
 }

 @keyframes pulseContactInfo {
  0% {
   transform: scale(1);
   opacity: 0.8;
   color: var(--phantiwood-blau); /* Pulsierende Textfarbe */
  }

  100% {
   transform: scale(1.03);
   opacity: 1;
   color: var(--phantiwood-gruen); /* Pulsierende Textfarbe */
  }
 }

 .contact-info p {
  margin-bottom: 10px;
 }

 .contact-info a {
  color: var(--phantiwood-blau);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
 }
 .contact-info a:hover {
  color: var(--akzent-blau-hell);
  transform: scale(1.05);
 }

 @keyframes slideInUp {
  0% {
   transform: translateY(20px);
   opacity: 0;
  }

  100% {
   transform: translateY(0);
   opacity: 1;
  }
 }

 .contact-form {
  max-width: 600px;
  margin: 30px auto;
  padding: 30px;
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
  border-left: 5px solid var(--phantiwood-gruen); /* Farbiger Rand links */
 }

 .contact-form h2 {
  font-size: 2em;
  color: var(--phantiwood-blau); /* Farbige Überschrift */
  margin-bottom: 20px;
  text-align: center;
 }

 .form-group {
  margin-bottom: 20px;
 }

 .form-group label {
  display: block;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 5px;
 }

 .form-group input[type="text"],
 .form-group input[type="email"],
 .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--akzent-blau-hell); /* Farbiger Rahmen für Eingabefelder */
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 1em;
  color: var(--text-primary);
 }

 .form-group textarea {
  resize: vertical;
 }

 .contact-form button[type="submit"] {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: var(--phantiwood-gruen); /* Farbiger Button */
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .contact-form button[type="submit"]:hover {
  background-color: var(--akzent-gruen-hell);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .g-recaptcha {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
 }
 footer {
  background-color: var(--grau); /* Farbiger Footer */
  color: var(--black);
  padding: 22px 0; /* Mehr Padding für den Footer */
  font-size: 0.9em;
  border-top: 2px solid var(--grau); /* Farbiger oberer Rand */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
 }

 .footer-container {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 .copyright {
  flex-grow: 1;
 }

 .footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
 }

 .footer-navigation li {
  margin-left: 20px;
 }

 .footer-navigation li:first-child {
  margin-left: 0;
 }

 .footer-navigation a {
  color: var(--black); /* Farbige Links im Footer */
  text-decoration: none;
  transition: color 0.3s ease;
 }

 .footer-navigation a:hover {
  color: var(--black);
 }

 @media (max-width: 768px) { /* Regeln für die mobile Ansicht */
  footer { /* Korrigierter Selektor mit Punkt */
    position: static; /* Oder initial, um die feste Positionierung aufzuheben */
    bottom: auto;
    left: auto;
    width: auto;
    z-index: auto;
    padding-top: 15px; /* Reduzierter oberer Innenabstand für Mobil */
    padding-bottom: 15px; /* Reduzierter unterer Innenabstand für Mobil */
    font-size: 1em; /* Verkleinerte Schriftgröße für Mobil */
  }

  .footer-container {
    flex-direction: nowrap; /* Inhalte untereinander anordnen für Mobil */
    align-items: center; /* Horizontal zentrieren für Mobil */
  }

  .footer-navigation ul {
    margin-top: 0px; /* Reduzierter oberer Margin für Mobil */
    flex-direction: nowrap; /* Navigationselemente untereinander für Mobil */
    align-items: center; /* Horizontal zentrieren für Mobil */
  }

  .footer-navigation li {
    margin-left: 0; /* Entferne linken Margin für Mobil */
    margin-bottom: 0px; /* Füge etwas Abstand zwischen den Links für Mobil hinzu */
  }

  .copyright {
    margin-bottom: 1px; /* Reduziere den unteren Margin für Mobil */
  }
}

 .animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
 }

 .animated {
  opacity: 1 !important;
  transform: translateY(0) !important;
 }

 .gallery-item,
 .service-item,
 .services h2,
 .gallery h2,
 .contact h2,
 .contact p {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
 }

 .in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 1.0s ease-out;
 }

 nav ul li,
 .hero h1,
 .hero p,
 .button,
 .service-item,
 .gallery-item,
 .contact h2,
 .contact p {
  animation: none !important;
 }

 nav ul li,
 .hero h1,
 .hero p,
 .button {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.0s ease-out;
 }
.cookie-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: var(--white);
  width: 250px; /* Beispiel für die Breite (und Höhe) */
  height: 250px; /* Muss gleich der Breite sein für einen perfekten Kreis */
  padding: 20px; /* Innenabstand */
  text-align: center;
  z-index: 10000;
  border-radius: 50%; /* Macht ihn kreisförmig */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  display: flex; /* Für die vertikale Zentrierung des Inhalts */
  flex-direction: column; /* Inhalt untereinander anordnen */
  justify-content: center; /* Vertikal zentrieren */
  align-items: center; /* Horizontal zentrieren */
  padding-top: 40px; /* Oder ein anderer passender Wert */
  padding-bottom: 0px;
}

.cookie-banner p {
  margin-top: 20px; /*verschiebung text*/
  margin-bottom: 10px;
  font-size: 0.9em;
  line-height: 1.2;
  word-break: break-word; /* Verhindert Überlauf bei langen Wörtern */
  text-align: center;
}

.cookie-banner a {
  color: var(--akzent-blau-hell);
  text-decoration: underline;
  font-size: 0.8em; /* Etwas kleinere Schrift für den Link */
}

.cookie-banner a:hover {
  color: var(--white);
}

#cookie-accept-button {
  background-color: var(--phantiwood-gruen);
  color: var(--white);
  border: none;
  padding: 8px 15px; /* Kleinere Schaltfläche, um in den Kreis zu passen */
  border-radius: 20px; /* Runde Ecken für den Button */
  cursor: pointer;
  font-size: 0.8em;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#cookie-accept-button:hover {
  background-color: var(--akzent-gruen-hell);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* --- Dark Mode Toggle Button Styling --- */
#darkModeToggle {
  position: fixed; /* Bleibt beim Scrollen sichtbar */
  top: 20px;
  right: 20px;
  z-index: 1001; /* Stellt sicher, dass er über dem Footer liegt */
  padding: 8px 15px;
  background-color: var(--phantiwood-blau); /* Startfarbe */
  color: var(--white);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#darkModeToggle:hover {
  background-color: var(--phantiwood-gruen);
  transform: scale(1.1);
}

/* --- Bunter Dark Mode Stil --- */
/* Definiere die Dark Mode Farben basierend auf dem Bild */
body.dark-mode {
  --dark-bg: #1a1a1a; /* Sehr dunkler Hintergrund, fast schwarz */
  --dark-text-primary: #fff; /* Helles Grau für Haupttext */
  --dark-text-secondary: #fff; /* Etwas dunkleres Grau für Nebentext */
  --dark-card-bg: #2c2c2c;   /* Dunkler Hintergrund für Karten/Boxen */
  --dark-border: #444;      /* Dunkle Rahmenfarbe */

  /* Behalte oder intensiviere die Akzentfarben */
  --dm-phantiwood-blau: #4aa0f2; /* Evtl. leicht heller */
  --dm-phantiwood-gruen: #8efa26; /* Evtl. leicht heller */
  --dm-akzent-orange: #ffae42; /* Orange aus dem Bild */
  --dm-akzent-rot: #f04e5f;    /* Rot/Pink aus dem Bild */
  --dm-akzent-cyan: #29c7ac;   /* Cyan/Türkis aus dem Bild */

  /* Überschreibe die Standardvariablen */
  --neutral-hell: var(--dark-bg);
  --neutral-mittel: var(--dark-card-bg);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --white: #ffffff; /* Weiß bleibt oft nützlich */
  --black: #000000;
  --grau: var(--dark-card-bg);
  --phantiwood-blau: var(--dm-phantiwood-blau);
  --phantiwood-gruen: var(--dm-phantiwood-gruen);
  --akzent-blau-hell: var(--dm-akzent-cyan); /* Ersetze helle Akzente durch bunte */
  --akzent-gruen-hell: var(--dm-akzent-orange); /* Ersetze helle Akzente durch bunte */

  /* Allgemeine Übergänge für den Moduswechsel */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Spezifische Anpassungen für Elemente im Dark Mode */
body.dark-mode header {
  background-color: var(--dark-card-bg);
  color: var(--dark-text-primary);
  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1); /* Hellerer Schatten */
  border-bottom-color: var(--dm-phantiwood-blau);
}

body.dark-mode header .secondary-nav,
body.dark-mode header .first-nav {
    background-color: rgba(255, 255, 255, 0.05); /* Sehr dezenter heller Hintergrund */
    box-shadow: 0 2px 5px rgba(var(--phantiwood-blau-rgb), 0.25); /* Schatten anpassen */
}

body.dark-mode nav a {
  color: var(--dark-text-primary);
}

body.dark-mode nav a:hover {
  background-color: rgba(var(--akzent-gruen-hell-rgb), 0.3); /* Etwas intensiver */
  color: var(--dm-phantiwood-gruen);
}

body.dark-mode .logo {
  color: var(--dm-phantiwood-blau); /* Dark Mode Logo Farbe */
}

body.dark-mode @keyframes pulseLogo {
  100% {
   transform: scale(1.05);
   color: var(--dm-phantiwood-gruen); /* Pulsierender Farbwechsel im Dark Mode */
  }
}


body.dark-mode .hero {
  /* Verwende dunklere, aber bunte Verläufe oder ein dunkles Bild */
  background: linear-gradient(to bottom right, #3a1c71, #d76d77, #ffaf7b); /* Beispiel für bunten Verlauf */
  color: var(--dark-text-primary);
}

body.dark-mode .hero h1,
body.dark-mode .hero p {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Dunklerer Textschatten */
}

body.dark-mode .button {
  background-color: var(--dm-phantiwood-blau);
  color: var(--dark-bg); /* Dunkler Text auf hellem Button */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .button:hover {
  background-color: var(--dm-akzent-orange);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

body.dark-mode @keyframes pulseButton {
  100% {
   transform: scale(1.08);
   background-color: var(--dm-phantiwood-gruen); /* Pulsierender Farbwechsel */
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  }
}

body.dark-mode .decorative-line {
    background-color: var(--dm-akzent-rot);
}

body.dark-mode .services {
  background-color: var(--dark-bg);
}

body.dark-mode .services h2 {
  color: var(--dm-phantiwood-blau);
}

body.dark-mode .service-item {
  background-color: var(--dark-card-bg);
  color: var(--dark-text-secondary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-top-color: var(--dm-akzent-orange);
}

body.dark-mode .service-item:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  border-top-color: var(--dm-phantiwood-blau);
}

body.dark-mode .service-item h3 {
  color: var(--dm-phantiwood-gruen);
}

body.dark-mode .service-item p {
  color: var(--dark-text-secondary);
}

body.dark-mode .gallery {
   background: linear-gradient(180deg, var(--dark-card-bg), var(--dm-akzent-cyan)); /* Dunkler Verlauf */
}

body.dark-mode .gallery h2 {
   color: var(--dm-phantiwood-blau);
}

body.dark-mode .gallery-item {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
body.dark-mode .gallery-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .gallery-item img {
  filter: brightness(80%); /* Bilder im Dark Mode etwas abdunkeln */
}

body.dark-mode .gallery-item:hover img {
  filter: brightness(100%);
}

body.dark-mode .contact {
  background-color: var(--dark-bg);
}

body.dark-mode .contact h2 {
  color: var(--dm-phantiwood-blau);
}

body.dark-mode .contact p {
  color: var(--dark-text-secondary);
}

body.dark-mode .contact-info a {
  color: var(--dm-phantiwood-blau);
}
body.dark-mode .contact-info a:hover {
  color: var(--dm-akzent-cyan);
}

body.dark-mode .contact-form {
  background-color: var(--dark-card-bg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border-left-color: var(--dm-phantiwood-gruen);
}

body.dark-mode .contact-form h2 {
  color: var(--dm-phantiwood-blau);
}

body.dark-mode .form-group label {
  color: var(--dark-text-secondary);
}

body.dark-mode .form-group input[type="text"],
body.dark-mode .form-group input[type="email"],
body.dark-mode .form-group textarea {
  background-color: var(--dark-bg);
  color: var(--dark-text-primary);
  border: 1px solid var(--dark-border);
}

body.dark-mode .contact-form button[type="submit"] {
  background-color: var(--dm-phantiwood-gruen);
  color: var(--dark-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .contact-form button[type="submit"]:hover {
  background-color: var(--dm-akzent-orange);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode footer {
  background-color: var(--dark-card-bg);
  color: var(--dark-text-primary);
  border-top-color: var(--dark-border);
}

body.dark-mode .footer-navigation a {
  color: var(--dark-text-primary);
}

body.dark-mode .footer-navigation a:hover {
  color: var(--dm-akzent-rot);
}

/* Dark Mode Toggle Button Aussehen im Dark Mode */
body.dark-mode #darkModeToggle {
    background-color: var(--dm-phantiwood-gruen);
    color: var(--dark-bg);
}
body.dark-mode #darkModeToggle:hover {
    background-color: var(--dm-akzent-orange);
}

/* Optional: Wenn Font Awesome Icons verwendet werden */
/*
body.dark-mode #darkModeToggle i::before {
    content: '\f185'; // Font Awesome Sun icon
}
#darkModeToggle i::before {
    content: '\f186'; // Font Awesome Moon icon
}
*/