/* Allgemeine Stile */
body {
    margin: 0 auto; /* Zentriert den Body horizontal */
    padding: 0; /* Entfernt den Standard-Innenabstand des Body-Elements */
    background-color: #f0f2f5; /* Setzt die Hintergrundfarbe des Body-Elements */
    font-family: 'Roboto', sans-serif; /* Setzt die Schriftart für die Webseite */
    color: #333; /* Setzt die Textfarbe für die Webseite */
    max-width: 1800px; /* Setzt die maximale Breite des Body-Inhalts */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Fügt einen leichten Schatten hinzu */
    padding: 20px; /* Fügt einen Innenabstand für mehr Platz hinzu */
    
	
}

/* Header Section */
.header_section {
    width: 100%; /* Setzt die Breite der Header-Sektion auf 100% */
    background-color: #fff; /* Setzt die Hintergrundfarbe der Header-Sektion */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Fügt einen leichten Schatten hinzu */
    padding: 20px 0; /* Entfernt den Innenabstand der Header-Sektion */
    position: fixed; /* Fixiert die Position des Headers */
    top: 0; /* Setzt den Header oben an */
    left: 0; /* Setzt den Header links an */
    right: 0; /* Setzt den Header rechts an */
    transition: transform 0.3s; /* Übergangseffekt für die Transformation */
    z-index: 1000; /* Stellt sicher, dass der Header über anderen Elementen bleibt */
    transform: translateY(0); /* Zeigt den Header */
}

/* Klassen für das Ein- und Ausblenden des Headers */
.header_section.hide-header {
    transform: translateY(-100%); /* Versteckt den Header */
}

.header_section.show-header {
    transform: translateY(0); /* Zeigt den Header */
}

/* Container */
.container_header {
    width: 100%; /* Setzt die maximale Breite des Containers */
    margin: 0 auto; /* Zentriert den Container horizontal */
    display: flex; /* Verwendet Flexbox für das Layout */
    justify-content: space-between; /* Verteilt den Platz gleichmäßig zwischen den Elementen */
    align-items: center; /* Zentriert die Elemente vertikal */
    padding: 0 10px; /* Fügt einen Innenabstand links und rechts hinzu */
}

/* Logo */
.logo img {
    max-width: 150px; /* Setzt die maximale Breite des Logos */
    height: auto; /* Beibehaltung des Seitenverhältnisses des Logos */
    padding-left: 25%;
}

/* Main Menu */
.main-menu {
    display: flex; /* Verwendet Flexbox für das Layout */
}

.main-menu ul {
    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
    display: flex; /* Verwendet Flexbox für das Layout */
    gap: 50px; /* Fügt einen Abstand zwischen den Listenelementen hinzu */
    margin: 0; /* Entfernt den Außenabstand der Liste */
    padding: 0; /* Entfernt den Innenabstand der Liste */
}

.main-menu ul li a {
    text-decoration: none; /* Entfernt die Standard-Unterstreichung der Links */
    font-size: 16px; /* Setzt die Schriftgröße der Links */
    color: rgb(29, 81, 32); /* Setzt die Textfarbe der Links */
    font-weight: 500; /* Setzt die Schriftstärke der Links */
    transition: color 0.3s, transform 0.3s, border-bottom 0.3s; /* Fügt Übergänge für Farbe, Skalierung und Rahmen hinzu */
    padding-bottom: 5px; /* Fügt einen Innenabstand am unteren Rand der Links hinzu */
    border-bottom: 2px solid transparent; /* Setzt einen unsichtbaren Rahmen am unteren Rand der Links */
}

.main-menu ul li a:hover {
    color: #AAC527; /* Setzt die Textfarbe der Links */
    transform: scale(1.1); /* Skaliert das Element beim Hover */
    border-bottom: 2px solid #AAC527; /* Setzt einen sichtbaren Rahmen am unteren Rand beim Hover */
}

/* User Menu */
.user-menu{
padding-right: 5%;
}
.user-menu ul {
    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
    display: flex; /* Verwendet Flexbox für das Layout */
    gap: 15px; /* Fügt einen Abstand zwischen den Listenelementen hinzu */
    margin: 0; /* Entfernt den Außenabstand der Liste */
    padding: 0; /* Entfernt den Innenabstand der Liste */
	
}

.user-menu ul li a {
    text-decoration: none; /* Entfernt die Standard-Unterstreichung der Links */
    font-size: 16px; /* Setzt die Schriftgröße der Links */
    color: rgb(29, 81, 32); /* Setzt die Textfarbe der Links */
    font-weight: 500; /* Setzt die Schriftstärke der Links */
    transition: color 0.3s, transform 0.3s, border-bottom 0.3s; /* Fügt Übergänge für Farbe, Skalierung und Rahmen hinzu */
    padding-bottom: 5px; /* Fügt einen Innenabstand am unteren Rand der Links hinzu */
    border-bottom: 2px solid transparent; /* Setzt einen unsichtbaren Rahmen am unteren Rand der Links */
}

.user-menu ul li a:hover {
    color: #AAC527; /* Setzt die Textfarbe der Links */
    transform: scale(1.1); /* Skaliert das Element beim Hover */
    border-bottom: 2px solid #AAC527; /* Setzt einen sichtbaren Rahmen am unteren Rand beim Hover */
}

/* Benutzer Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #fff; /* Gleiche Hintergrundfarbe wie die Header-Sektion */
    color: #28a745; /* Gleiche Textfarbe wie die anderen Menüpunkte */
    font-size: 16px; /* Gleiche Schriftgröße wie die anderen Menüpunkte */
    font-weight: 500; /* Gleiche Schriftstärke wie die anderen Menüpunkte */
    border: none; /* Entfernt die Umrandung */
    cursor: pointer; /* Zeigt den Zeiger beim Hover */
    text-decoration: none; /* Entfernt die Unterstreichung */
    padding: 10px; /* Fügt Innenabstand hinzu */
    transition: color 0.3s, transform 0.3s; /* Fügt Übergänge für Farbe und Skalierung hinzu */
    border-bottom: 2px solid transparent; /* Setzt einen unsichtbaren Rahmen am unteren Rand */
}

.dropbtn:hover {
    color: #218838; /* Ändert die Textfarbe beim Hover */
    transform: scale(1.1); /* Skaliert das Element beim Hover */
    border-bottom: 2px solid #218838; /* Setzt einen sichtbaren Rahmen am unteren Rand beim Hover */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff; /* Gleiche Hintergrundfarbe wie die Header-Sektion */
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 4px;
    margin-top: 10px; /* Fügt Abstand vom Button hinzu */
}

.dropdown-content a {
    color: #333; /* Setzt die Textfarbe der Links */
    padding: 12px 16px;
    text-decoration: none; /* Entfernt die Unterstreichung */
    display: block;
    transition: background-color 0.3s, color 0.3s; /* Fügt Übergänge für Hintergrundfarbe und Textfarbe hinzu */
}

.dropdown-content a:hover {
    background-color: #f1f1f1; /* Ändert die Hintergrundfarbe beim Hover */
    color: #28a745; /* Ändert die Textfarbe beim Hover */
}

/* Hamburger Menu */
.hamburger-menu {
    display: none; /* Versteckt das Hamburger-Menü standardmäßig */
    cursor: pointer; /* Ändert den Mauszeiger beim Hover */
    transition: transform 0.3s; /* Fügt einen Übergang für die Skalierung hinzu */
    margin-left: 25%;
}

/* Dropdown Menu */
.dropdown-menu {
    display: none; /* Versteckt das Dropdown-Menü standardmäßig */
    position: absolute; /* Setzt das Dropdown-Menü absolut zum übergeordneten Element */
    top: 70px; /* Setzt die obere Position des Dropdown-Menüs */
    right: 20px; /* Setzt die rechte Position des Dropdown-Menüs */
    background-color: #fafafa; /* Setzt die Hintergrundfarbe des Dropdown-Menüs */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Fügt einen Schatten hinzu */
    z-index: 1000; /* Setzt den Stapelindex des Dropdown-Menüs */
    width: 250px; /* Setzt die Breite des Dropdown-Menüs */
    border-radius: 8px; /* Fügt abgerundete Ecken hinzu */
    padding: 15px; /* Fügt einen Innenabstand hinzu */
    left: 18%;
    margin-top: 20px;
	
}

.dropdown-menu ul {
    list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
    margin: 0; /* Entfernt den Außenabstand der Liste */
    padding: 0; /* Entfernt den Innenabstand der Liste */

	
}

.dropdown-menu ul li {
    padding: 10px; /* Fügt einen Innenabstand oben und unten hinzu */
}

.dropdown-menu ul li a {
    text-decoration: none; /* Entfernt die Standard-Unterstreichung der Links */
    color: #333; /* Setzt die Textfarbe der Links */
    display: block; /* Setzt den Anzeigemodus auf Block */
    transition: background-color 0.3s, color 0.3s; /* Fügt Übergänge für Hintergrundfarbe und Textfarbe hinzu */
}

.dropdown-menu ul li a:hover {
    background-color: #f0f0f0; /* Ändert die Hintergrundfarbe beim Hover */
    color: #28a745; /* Ändert die Textfarbe beim Hover */
}

/* Cookie-Banner */
#cookie-banner {
    position: fixed; /* Fixiert das Cookie-Banner */
    bottom: 0; /* Setzt das Cookie-Banner unten an */
    left: 50%; /* Zentriert das Cookie-Banner horizontal */
    transform: translateX(-50%); /* Zentriert das Cookie-Banner horizontal */
    background-color: #fff; /* Setzt die Hintergrundfarbe des Cookie-Banners */
    padding: 20px; /* Fügt einen Innenabstand hinzu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Fügt einen leichten Schatten hinzu */
    border-radius: 8px 8px 0 0; /* Fügt abgerundete Ecken nur oben hinzu */
    display: flex; /* Verwendet Flexbox für das Layout */
    flex-wrap: wrap; /* Erlaubt Umbruch der Elemente innerhalb des Banners */
    justify-content: space-between; /* Verteilt den Platz gleichmäßig zwischen den Elementen */
    align-items: center; /* Zentriert die Elemente vertikal */
    max-width: 90%; /* Setzt die maximale Breite des Cookie-Banners */
    z-index: 1001; /* Stellt sicher, dass das Cookie-Banner über anderen Elementen bleibt */
    color: #333; /* Setzt die Textfarbe des Cookie-Banners */
}

#cookie-banner p {
    margin: 0; /* Entfernt den Außenabstand des Paragraphen */
    font-size: 14px; /* Setzt die Schriftgröße des Paragraphen */
    line-height: 1.5; /* Setzt die Zeilenhöhe des Paragraphen */
}

#cookie-banner a {
    color: #28a745; /* Setzt die Textfarbe des Links */
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    font-weight: 500; /* Setzt die Schriftstärke des Links */
}

#cookie-banner button {
    background-color: #28a745; /* Setzt die Hintergrundfarbe des Buttons */
    color: #fff; /* Setzt die Textfarbe des Buttons */
    border: none; /* Entfernt die Umrandung des Buttons */
    padding: 10px 20px; /* Fügt Innenabstand hinzu */
    border-radius: 4px; /* Fügt abgerundete Ecken hinzu */
    cursor: pointer; /* Ändert den Mauszeiger beim Hover */
    transition: background-color 0.3s, transform 0.3s; /* Fügt Übergänge für Hintergrundfarbe und Skalierung hinzu */
    margin-left: 10px; /* Fügt einen Abstand zwischen den Buttons hinzu */
}

#cookie-banner button:hover {
    background-color: #218838; /* Ändert die Hintergrundfarbe beim Hover */
    transform: scale(1.05); /* Skaliert das Element beim Hover */
}

/* Media Query für Bildschirmbreite unter 1350px */
@media (max-width: 1100px) {
    .logo {
        display: none;
    }
    /* Hauptmenü ausblenden */
    .main-menu {
        display: none;
    }
    .user-menu {   
        display: none;
    }

    /* Hamburger-Button anzeigen */
    .hamburger-menu {
        display: block;
    	
	}

    /* Dropdown-Menü anzeigen */
    #dropdown-menu {
        display: none;
    }

    /* Container-Header: Spacing anpassen */
    .container_header {
        padding: 0; /* Verringert den Abstand links und rechts */
    }

    #cookie-banner {
        flex-direction: column; /* Ändert die Richtung der Flexbox auf Spaltenrichtung */
        padding: 10px; /* Verringert den Innenabstand */
    }

    #cookie-banner p {
        margin-bottom: 10px; /* Fügt Abstand unter dem Paragraphen hinzu */
        text-align: center; /* Zentriert den Text */
    }

    #cookie-banner button {
        margin-left: 0; /* Entfernt den linken Außenabstand */
        margin-bottom: 10px; /* Fügt unteren Außenabstand hinzu */
        width: 100%; /* Setzt die Breite der Buttons auf 100% */
    }
}

/* Media Query für Bildschirmbreite über 1350px */
@media (min-width: 1301px) {
    /* Dropdown-Menü ausblenden */
    #dropdown-menu {
        display: none;
    }

}