/* ---------------------------------- */
/* Dunkelblau/Teal Theme Farben & Design */

:root {
    --primary-color: #2f4858;
    --nav-bg-color: #48657a;
    --nav-link-color: #ffffff;
    --nav-link-hover: #2f4858;
    --footer-bg-color: #48657a;
    --text-color: #ffffff;
    --background-color: #f9f9f9;
}

/* Grundfarben */
body {
    background-color: var(--background-color);
    color: #333333;
}

header {
    background-color: var(--primary-color);
    color: #ffffff;
}

nav {
    background-color: var(--nav-bg-color);
}

nav a {
    color: var(--nav-link-color);
}

nav a:hover {
    background-color: var(--nav-link-hover);
    color: #f9f9f9;
}

/* Footer */
footer {
    background-color: var(--footer-bg-color);
    color: #ffffff;
}

footer .footer-text {
    color: #ffffff;
}

/* Unterkunft-Boxen */
.unterkunft-box {
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(47, 72, 88, 0.4);
}

/* Menü-Button */
#nav-toggle {
    background-color: var(--nav-bg-color);
    color: var(--nav-link-color);
}

#nav-toggle:hover {
    background-color: var(--nav-bg-hover);
}

/* Mobile Navigation Links */
#mobile-text .mobile-nav-link {
    color: var(--nav-link-color);
    text-decoration: none;
    background-color: transparent;
}

#mobile-text .mobile-nav-link:hover {
    background-color: var(--nav-link-hover);
    color: #ffffff;
}