body.dark-mode {
    /* Dark Mode Palette */
    --bg-page: #121212;
    --bg-section-alt: #1e1e1e;
    --bg-card: #1e1e1e;
    --text-main: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-link: #90cdf4;
    --border-subtle: #333333;
}

/* Globale Transitions */
body,
header,
main,
section,
footer,
.service-card,
.blog-card,
.cta-button,
.form-button,
input,
textarea,
a,
.form-input,
#contact-form input,
#contact-form textarea,
#form-submit,
[class*="text-gray"],
[class*="bg-gray"],
.contact-form-wrapper,
.service-title,
.blog-card-title,
#contact-title,
#contact-intro,
#contact-info-title,
.mobile-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   Dark Mode Regeln
   ========================================================================== */

/* Layout */
body.dark-mode,
.dark-mode header,
.dark-mode main,
.dark-mode footer {
    background-color: var(--bg-page);
    color: var(--text-main);
}

.dark-mode section,
.dark-mode .bg-white,
.dark-mode #home,
.dark-mode #about,
.dark-mode #contact {
    background-color: var(--bg-page);
}

.dark-mode .bg-gray-100,
.dark-mode #services,
.dark-mode .blog-section,
.dark-mode .contact-info-box {
    background-color: var(--bg-section-alt);
}

.dark-mode .header-bg {
    background-color: rgba(18, 18, 18, 0.9);
}

.dark-mode #mobile-menu {
    background-color: var(--bg-page);
}

/* Karten & Formulare */
.dark-mode .service-card,
.dark-mode .blog-card,
.dark-mode #contact-form,
.dark-mode .contact-form-wrapper {
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Textfarben */
.dark-mode .text-gray-800,
.dark-mode .headline,
.dark-mode .section-title,
.dark-mode .about-title,
.dark-mode .service-title,
.dark-mode .blog-title,
.dark-mode .blog-card-title,
.dark-mode #contact-title,
.dark-mode #contact-info-title,
.dark-mode #contact-phone,
.dark-mode #contact-email,
.dark-mode #contact-address {
    color: var(--text-main);
}

.dark-mode .text-gray-600,
.dark-mode .subheadline,
.dark-mode .section-intro,
.dark-mode .about-text,
.dark-mode .service-desc,
.dark-mode .blog-card-desc,
.dark-mode .blog-intro,
.dark-mode #contact-intro {
    color: var(--text-secondary);
}

/* Links */
.dark-mode .nav-link,
.dark-mode a:not(.cta-button):not(.form-button) {
    color: var(--text-link);
}

/* Inputs */
.dark-mode input,
.dark-mode textarea,
.dark-mode .form-input,
.dark-mode #contact-form input,
.dark-mode #contact-form textarea {
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-secondary);
}

/* Dark Mode Fix für Kontaktbereich */
.dark-mode #contact {
    background: var(--bg-page) !important;
    /* Überschreibt das Light-Gradient */
}

.dark-mode .contact-info-box,
.dark-mode .bg-gray-100 {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.dark-mode .contact-info-box a,
.dark-mode .bg-gray-100 a {
    color: var(--text-link) !important;
}