/* base.css */
* {
    box-sizing: border-box; 
}
html {
    font-size: 62.5%; 
}
body {
    font-family: Arial, sans-serif;
    font-size: 1.6rem; 
    background-color: #282838;
    color: #e0e0e0;
    overflow-x: hidden;
    line-height: 1.6;
    margin: 0;
}
p, h1, h2, h3, h4 {
    -webkit-hyphens: auto;
    hyphens: auto;
}
a:link {
    color: #73dadd; 
    text-decoration: none;
    transition: color 0.3s ease;
}
a:visited {
    color: #73dadd;
}
a:hover {
    color: #73dadd;
    text-decoration: none;
}
/* ------------------------------------------------ */
/* Hauptcontainer des Headers */
/* ------------------------------------------------ */
.header {
    background: linear-gradient(to left, #334, #556);
    color: white;
}
/* ------------------------------------------------ */
/* Overlay für Menü auf Mobilgeräten */
/* ------------------------------------------------ */
#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: none;
    z-index: 50;
}
#overlay.show {
    display: block;
}
/* ------------------------------------------------ */
/* Innerer Container für die Zentrierung und Flex-Anordnung */
/* ------------------------------------------------ */
.header-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}
/* ------------------------------------------------ */
/* Logo-Bereich */
/* ------------------------------------------------ */
.header-logo {
    display: flex;
    width: 25%;
    margin: 0 auto;
}
.header-logo img {
	height: 50px;
    margin: auto 0;
}
/* ------------------------------------------------ */
/* Allgemeine Link-Stile */
/* ------------------------------------------------ */
.header a:link {
    color: white;  
    text-decoration: none;
    transition: color 0.3s ease;
}
.header a:visited {
    color: white;
}
.header a:hover {
    color: white;
    text-decoration: underline;
}
/* ------------------------------------------------ */
/* Navigationsbereich */
/* ------------------------------------------------ */
.nav {
    width: 50%;
}
.nav-menu {
    list-style: none;
    display: flex;
    padding: 0;
    justify-content: center;
}
.nav-item {
    padding: 5px;
}
.nav-link {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 5px;
}
.dropdown-button {
    display: none;
}
.nav-link:hover {
    background-color: #555;
}
/* ------------------------------------------------ */
/* Dropdown-Menü */
/* ------------------------------------------------ */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #334;
    min-width: 150px;
    padding: 0;
    list-style: none;
    z-index: 999;
}
.dropdown-link {
    display: block;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.dropdown:hover .dropdown-content {
    display: block;
}
/* ------------------------------------------------ */
/* Leerraum (Header-Space) */
/* ------------------------------------------------ */
.header-space {
    width: 25%;
}
/* ------------------------------------------------ */
/* Hamburger-Menü-Button (Desktop versteckt) */
/* ------------------------------------------------ */
.hamburger-menu {
    display: none;
    font-size: 2.88rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}
.dropdown-button {
    display: none;
    background: none;
    border: none;
    padding: 0 10px;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
}
/* ------------------------------------------------ */
/* Media Query: Mobile Ansicht (max-width: 975px) */
/* ------------------------------------------------ */
@media (max-width: 975px) {
    
    /* ------------------------------------------------ */
    /* Logo-Bereich (Mobile) */
    /* ------------------------------------------------ */
    .header-logo {
        width: 100%;
        /*padding: 0px 5%;*/
    }
    
    /* ------------------------------------------------ */
    /* Navigationsbereich (Mobile) */
    /* ------------------------------------------------ */
    .nav {
        width: auto;
    }
    
    .nav-menu.show {
        display: flex;
    }
    
    .nav-menu {
        display: none;
        flex-direction: column;
        background-color: #334;
        position: absolute;
        right: 0;
        width: 60%;
        padding: 20px;
        border-radius: 15px 0 0 15px;
        z-index: 100;
    }
    
    /* ------------------------------------------------ */
    /* Nav-Links (Mobile) */
    /* ------------------------------------------------ */
    .nav-link {
        font-size: 1.28rem;
    }
    
    /* ------------------------------------------------ */
    /* Dropdown-Item-Ausrichtung (Mobile) */
    /* ------------------------------------------------ */
    .nav-item.dropdown{
        display: block;
    }
    
    .nav-item.dropdown > a.nav-link,
    .nav-item.dropdown > button.dropdown-button {
        display: inline-block; 
        vertical-align: middle;
    }
    
    /* ------------------------------------------------ */
    /* Dropdown-Button anzeigen (Mobile) */
    /* ------------------------------------------------ */
    .dropdown-button {
        display: block;
    }
    
    /* ------------------------------------------------ */
    /* Dropdown-Inhalt (Mobile) */
    /* ------------------------------------------------ */
    .dropdown-content {
        position: relative;  
        margin-top: 5px;
        background-color: #334;
    }
    
    .dropdown-content.show {
        display: block !important;
    }
    
    .dropdown:hover .dropdown-content {
        display: none;
    }
    
    /* ------------------------------------------------ */
    /* Dropdown-Links (Mobile) */
    /* ------------------------------------------------ */
    .dropdown-link {
        font-size: 1.28rem;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 5px;
    }

    /* ------------------------------------------------ */
    /* Hamburger-Menü anzeigen (Mobile) */
    /* ------------------------------------------------ */
    #hamburger-button {
	line-height: 0;
    }
    
    .hamburger-menu {
        display: block;
    }
    
    .hamburger-menu {
        display: block;
    }
    
    /* ------------------------------------------------ */
    /* Leerraum verstecken (Mobile) */
    /* ------------------------------------------------ */
    .header-space {
        display: none;
    }
}
/* footer.css */
footer {
    text-align: center;
    padding: 10px;
}