/* Dark Mode Stile */
body.dark-mode {
  background: #0a1a2e; /* Dunkelblauer Hintergrund */
  color: #d0e7ff; /* Heller bläulicher Text */
}

/* Dark Mode für Header */
body.dark-mode .header {
  background: #102a44;
  color: #d0e7ff;
}

/* Dark Mode für die Werbebalken */
body.dark-mode .ad-bar {
  background: #0d3b66;
  color: #d0e7ff;
  border-bottom: 2px solid #184a73;
}

/* Dark Mode für die Logo- und Dark Mode-Bereiche */
body.dark-mode .logo-container {
  background: #102a44;
}

body.dark-mode .dark-mode-toggle {
  color: #a3d8ff;
}

/* Dark Mode für den Tracking-Bereich */
body.dark-mode .tracking {
  background: linear-gradient(92.93deg, #0a1a2e 1.24%, #153a5c 98.76%);
}

body.dark-mode .tracking h1 {
  color: #64d8ff; /* Türkisfarbener Akzent */
}

/* Dark Mode für die Suchleiste */
body.dark-mode .search-input {
  background: #102a44;
  color: white;
  border-color: #184a73;
}

body.dark-mode .search-input:focus {
  border-color: #64d8ff;
  box-shadow: 0 6px 15px rgba(100, 216, 255, 0.4);
  color: white;
}

body.dark-mode .search-icon {
  color: #64d8ff;
}

body.dark-mode .search-icon:hover {
  color: #89e2ff;
}

/* Dark Mode für die Aufträge */
body.dark-mode .auftrag {
  background: #0a1a2e;
  color: #d0e7ff;
}

body.dark-mode .auftrag h2{
    color: #64d8ff;
}

body.dark-mode .auftrag-item {
  background: #102a44;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), -4px -4px 10px rgba(40, 60, 80, 0.9);
}

body.dark-mode .auftrag-item.erfolgreich {
  background: rgba(76, 175, 80, 0.15);
}

body.dark-mode .auftrag-item.ausstehend {
  background: rgba(255, 193, 7, 0.15);
}

body.dark-mode .auftrag-item.fehlgeschlagen {
  background: rgba(244, 67, 54, 0.15);
}

body.dark-mode .auftrag-name {
  color: #d0e7ff;
}

/* Dark Mode für Fortschrittsbalken */
body.dark-mode .progress-bar {
  background: #184a73;
}

body.dark-mode .progress-fill {
  background: #64d8ff;
}

/* Dark Mode für die Werbe-Sektion */
body.dark-mode .promo {
  background: linear-gradient(135deg, #0a1a2e, #102a44);
}

body.dark-mode .promo-title {
  color: #64d8ff;
}

body.dark-mode .promo-text {
  color: #d0e7ff;
}

body.dark-mode .promo-btn {
  background: #64d8ff;
  color: #0a1a2e;
  text-decoration: none;
}

body.dark-mode .promo-btn:hover {
  background: #89e2ff;
  color: #0a1a2e;
}

/* Dark Mode für Werbe-Sektion 2 */
body.dark-mode .promo2 {
  background: linear-gradient(135deg, #8a4b08, #c2780c); /* Dunklerer Orange-Verlauf */
  color: #f3f4f6; /* Helles Grau für bessere Lesbarkeit */
}

/* Dark Mode: Logo */
body.dark-mode .promo2-logo {
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* Dezenter weißer Schatten */
}

/* Dark Mode: Titel */
body.dark-mode .promo2-title {
  color: #ffcc80; /* Sanftes Orange für den Titel */
}

/* Dark Mode: Dynamischer Text */
body.dark-mode .promo2-text {
  color: #f3f4f6; /* Helles Grau für bessere Sichtbarkeit */
}

/* Dark Mode: Button */
body.dark-mode .promo2-btn {
  color: #f59e0b; /* Orange Text */
  background: #333; /* Dunkler Button */
  border: 1px solid #f59e0b; /* Orange Rand */
  text-decoration: none;
}

body.dark-mode .promo2-btn:hover {
  background: #f59e0b;
  color: #222; /* Fast Schwarz für Kontrast */
  transform: scale(1.05);
}

/* Dark Mode: Hintergrundanimation */
body.dark-mode .promo2::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
}


/* Dark Mode für die FAQ */
body.dark-mode .faq {
  background: #0a1a2e;
}

body.dark-mode .faq h2 {
  color: #64d8ff;
}

body.dark-mode .faq-btn {
  background: #102a44;
  color: #d0e7ff;
  border-color: #184a73;
}

body.dark-mode .faq-btn:hover {
  background: #153a5c;
  color: #64d8ff;
}

body.dark-mode .faq-content {
  background: #102a44;
  color: #d0e7ff;
  border-color: #184a73;
}

/* ===== DARK MODE STYLING ===== */
body.dark-mode .footer {
  background: linear-gradient(
      92.93deg,
      #121212 1.24%,
      #1e1e1e 98.76%
    ),
    radial-gradient(
      146.22% 164.16% at 48.99% 0%,
      rgba(50, 50, 50, 0.65) 0%,
      rgba(20, 20, 20, 0) 65%
    );
  color: #f0f0f0;
}

body.dark-mode .footer-container {
  background-color: #1e1e1e;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1); /* Subtiler weißer Schatten */
}

body.dark-mode .footer-top-right,
body.dark-mode .footer-bottom-left,
body.dark-mode .footer-bottom-right {
  color: #ddd;
}

body.dark-mode .footer-bottom-left a,
body.dark-mode .footer-links a {
  color: #66b2ff; /* Helles Blau für bessere Lesbarkeit */
}

body.dark-mode .footer-bottom-left a:hover,
body.dark-mode .footer-links a:hover {
  color: #ffffff;
}

body.dark-mode .footer-copyright {
  color: #aaa;
}

/* Logo im Dark Mode etwas heller machen */
body.dark-mode .footer-logo {
  filter: brightness(0.8);
}