body {
    background-color: #F0F0F0;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}




/*----------------------- Header-Section ----------------------------- */
.H_ImageContainer {
    height: 400px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.image-stack {
    width: 100%; /* Vollständige Breite des Containers */
    height: 100%;
    display: flex;
    overflow: hidden;
}

.image {
    width: 33.33%; /* Ein Drittel der Breite für jedes Bild */
    height: 100%;
    overflow: hidden;
}

.image img {
    width: 100%; /* Vollständige Breite des Bildes */
    height: 100%;
    border: 2px solid transparent;
    object-fit: cover; /* Um die Bilder in voller Breite anzuzeigen und abzuschneiden, falls nötig */
    /*opacity: 0;*/ /* Setze die Transparenz auf 0 (versteckt das Bild) */
    /*transition: linear opacity 1s ease-in-out;*/ /* Füge eine Übergangsanimation hinzu */
}



/*----------------------- Menue-Section ----------------------------- */

.Nav_Container {
    background-color: silver;
    max-width: 1180px; /* Maximale Breite des Menüs */
    width: 100%; /* Breite des Menüs */
    height: 80px;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    justify-content: space-between; /* Hiermit wird die Navigationsleiste rechts und das Logo links ausgerichtet */
    align-items: center; /* Hiermit wird die Navigationsleiste vertikal zentriert */
    z-index:100;
}


    /* Logo und Hamburger-Symbol ausblenden */
#Logo_Mob,
#HamburgerIcon {
    display: none;
}




.PartnerFLag_Container {
    background-color: white;
    max-width: 1180px; /* Maximale Breite des Menüs */
    width: 100%; /* Breite des Menüs */
    height: auto;
    margin: 0 auto;
    padding-bottom: 20px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between; /* Hiermit wird die Navigationsleiste rechts und das Logo links ausgerichtet */
    align-items: center; /* Hiermit wird die Navigationsleiste vertikal zentriert */
    z-index: 100;
}


.PartnerFlag_Image_Container {
    flex: 0 0 auto; /* Kein Flex-Wachstum, feste Breite */
    width: auto; /*Automatische Breite basierend auf dem Inhalt */
    height: 80px;
    white-space: nowrap; /*Verhindert Textumbruch*/
    text-align: center;
    margin-left: 60px; /*Spaltenabstand von 10px */
    margin-right: 60px; /* Spaltenabstand von 10px */
    margin-top: 20px;
}




/*------------------------------ kleiner größer als 942px und kleiner als 1220px --------------------------------*/
/* Media Query für Bildschirme mit einer Breite zwischen 942px und 1220 Pixeln */
@media only screen and (min-width: 942px) and (max-width: 1220px) {
    /* Angepasste Stile für den .Nav_Container auf Bildschirmen mit mittlerer Breite */
    .Nav_Container {
        /* Hier kannst du weitere Stile für den .Nav_Container für Bildschirme mit mittlerer Breite hinzufügen */
    }

    #Nav_Container {
        width: 100%; /* Volle Breite des Headers */
        max-width: calc(100% - 20px); /* Maximale Breite des Nav_Container (100% - 200px Abstand auf beiden Seiten) */
        margin: 0 auto; /* Zentriert den Nav_Container */
        display: block; /* Nav_Container anzeigen */
        padding: 10px;
        display: flex;
    }

    /* Logo und Hamburger-Symbol ausblenden */
    #Logo_Mob,
    #NavMenu__Mob,
    #NavigationMenu_Mob,
    #HamburgerIcon {
        display: none;
    }


    .PartnerFLag_Container {
        background-color: white;
        width: 100%; /*Volle Breite des Headers*/
        max-width: calc(100% - 20px); /* Maximale Breite des Nav_Container (100% - 200px Abstand auf beiden Seiten) */
        margin: 0 auto; /* Zentriert den Nav_Container */
        display: block; /* Nav_Container anzeigen */
        padding: 10px;
        justify-content: space-between; /* Füge space-between hinzu für gleichen Abstand zwischen den Blöcken */
        display: flex;
        flex-wrap: wrap;
    }
}


/*------------------------------ kleiner als 942px --------------------------------*/

/* Media Query für Mobilgeräte mit einer Breite bis zu 942 Pixeln */
@media only screen and (max-width: 942px) {
    /* Angepasste Stile für den .Nav_Container auf Mobilgeräten */
    .Nav_Container {
        flex-direction: column; /* Ändere die Ausrichtung auf Spaltenlayout */
        height: auto; /* Setze die Höhe automatisch, um den Inhalt anzupassen */
    }
    



    /* Angepasste Stile für den Header */
    header {
        background-image: url('../Images/Master_Header/Header.png');
        background-position: center; /* Horizontale Ausrichtung in der Mitte */
        background-repeat: no-repeat;
        padding: 0; /* Kein Innenabstand für den Header */
        color: #333; /* Anderer Header-Stil */
        position: relative; /* Relative Positionierung für z-index */
    }

    #Nav_Container {
        display: none; /* Nav_Container ausblenden */
    }



    #HeaderContainer {
        position: relative;
    }

    #HeaderContainer img {
        position: absolute; /* Absolute Positionierung innerhalb von #HeaderContainer */
        top: 50%; /* 50% von oben */
        left: 0; /* Links ausgerichtet */
        transform: translateY(-50%); /* Verschiebe das Bild um 50% seiner Höhe nach oben, um es vertikal zu zentrieren */
    }




    /* Hamburger-Symbol */
    #Logo_Mob {
        position: absolute; /*Absolute Positionierung innerhalb des Headers */
        top: 26%; /*Vertikal zentrieren */
        right: 10px; /*10 Pixel Abstand vom rechten Rand */
        transform: translateY(-50%); /*Verschiebe das Symbol um 50% seiner Höhe nach oben, um es vertikal zu zentrieren */
    }

    #NavMenu__Mob {
        position: absolute;
        width: 90%; /* Auf mobilen Geräten 90% der Bildschirmbreite */
        /*        top: 45px;
        left: 50px;*/
        top: 45px; /* Direkt unter dem Hamburger-Icon */
        left: calc(12px + 6%); /* Links ausgerichtet */
        z-index: 120;
        display: block; /* Standardmäßig ausgeblendet */
    }

    #HamburgerIcon {
        position: absolute; /* Absolute Positionierung innerhalb des Headers */
        top: 20%; /* Vertikal zentriert in Bezug auf den Header */
        left: 10px; /* 10 Pixel Abstand vom linken Rand */
        transform: translateY(-50%);
        z-index: 150;  /*Über das Menü legen */
    }

    #Logo_Mob,
    #HamburgerIcon {
        display: block; /* anzeigen */
    }


    .PartnerFLag_Container {
        background-color:white;
        width: 100%; /* Volle Breite des Headers */
        max-width: 942px; /* Maximale Breite des Nav_Container (100% - 200px Abstand auf beiden Seiten) */
        margin: 0 auto; /* Zentriert den Nav_Container */
        padding: 10px; /* Padding entfernen */
        box-sizing: border-box; /* Berücksichtigt Polsterungen und Ränder in der Breite */
        justify-content: space-between; /* Füge space-between hinzu für gleichen Abstand zwischen den Blöcken */
        display: flex;
        flex-wrap: wrap;
    }

}


.festkleben {
    position: sticky;
    top: 0px;
    width: 100%;
    opacity: 1.0;
}

.festkleben + Cont {
    padding-top: 80px;
}

/* Stil für das Navigationsmenü innerhalb des Headers */


.Navigations_Menu {
    margin: 0 auto;
    z-index: 50;
    display: flex;
    justify-content: center; /* Zentriert die Menüpunkte horizontal */
}


.menu-level1 {
    /* Stile für Menüpunkte der Ebene 1 */
    font-family: 'Verdana', sans-serif;
    font-size: 18px;
    font-weight: bold;
    height: 40px;
    width: 150px;
    color: #030303;
    padding: 0 20px; /* Padding für gleichmäßige Abstände */
    line-height: 40px; /* Vertikale Zentrierung des Texts */
    background-color: transparent;
    display: inline-block;
    text-align: center;
}


    .menu-level1:hover {
        /* Stile für Menüpunkte der Ebene 1 */
        /*        font-weight: bold;*/
        color: #F8F8F8;
        text-decoration: underline; /* Unterstrich hinzufügen, wenn die Maus darüber schwebt */
        background-color: green;
        border-radius: 5px;
    }

.menu-level2 {
    /* Stile für Menüpunkte der Ebene 2 */
    font-family: 'Verdana', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #030303;
    height: 40px;
    line-height: 40px; /* Vertikale Zentrierung des Texts */
    margin-left: 0px;
    margin-right: 40px; /* Beispiel für den Abstand zwischen Menüpunkten */
    background-color: transparent;
    padding-left: 10px;
    width: calc(80% + 11px); /* Hier wird die Breite um 10px erhöht */
    display: inline-block;
    position: relative; /* Damit das Pseudo-Element relativ zum Menüeintrag positioniert wird */
    border-radius: 5px;
    top: 5px;
}

    .menu-level2::before {
        content: ""; /* Pseudo-Element ohne Inhalt, dient als Hintergrund */
        position: absolute;
        top: -5px;
        left: -5px;
        width: calc(100% + 10px); /* Nimmt die gesamte Breite des Menüs ein */
        height: calc(100% + 10px); /* Nimmt die gesamte Höhe des Menüs ein */
        background-color:lightgray; /* Der rote Hintergrund */
        z-index: -1; /* Stellt sicher, dass es hinter den Menüpunkten liegt */
        border-radius: 7px; /* Ecken des roten Hintergrunds auf 10px abgerundet */
    }



.menu-level1:hover .menu-level2 {
    display: block; /* Zeigt das Level-2-Menü, wenn man über Level-1-Menüpunkte fährt */
}

.menu-level2:hover {
    /* Stile für Menüpunkte der Ebene 2 */
    font-weight: bold;
    color: #F8F8F8;
    text-decoration: underline; /* Unterstrich hinzufügen, wenn die Maus darüber schwebt */
    background-color: green;
}








#Nav_Container_Mob {
    position: relative; /* Stellen Sie sicher, dass der Container relativ positioniert ist */
    z-index: 120;
}



/*#NavMenu__Mob {

    top: 17%;
    transform: translateY(-50%);
    left: calc(8%);*/ /* Position rechts vom Hamburger-Icon */
    /*width: 150px;*/ /* Breite des Containers */
    /*background-color: silver;*/ /* Hintergrundfarbe */
    /*z-index: 120;
    height:200px;
}*/


#NavMenu__Mob {
    background-color: silver;
    width: auto; /* Setzt die Breite dynamisch, abhängig vom Inhalt */
    max-width: 150px; /* Maximale Breite des Menüs */
    margin: 0 auto; /* Menü zentrieren */
    padding: 10px; /* Innenabstand hinzufügen, um es optisch zu verbessern */
}

    #NavMenu__Mob ul {
        display: flex;
        flex-direction: column; /* Menüpunkte untereinander anordnen */
        list-style-type: none;
        padding: 0;
    }

    #NavMenu__Mob ul li {
        display: block; /* Stellt sicher, dass jedes Listenelement in einer eigenen Zeile ist */
        padding: 5px;
        margin-left: -45px;
        border-bottom: 1px solid #ccc;
    }

            #NavMenu__Mob ul li:last-child {
                border-bottom: none; /* Keine Trennlinie für das letzte Element */
            }



img {
    background-color: white; /* Hintergrundfarbe des Logos auf Weiß setzen */
    border: 7px solid white; /* 1 Pixel weißer Rahmen um das Logo */
}


.menu-level1_Mob {
    /* Stile für Menüpunkte der Ebene 1 */
    font-family: 'Verdana', sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 20px;
    color: #030303;
    margin-right: 0px; 
    background-color: transparent;
}

    .menu-level1_Mob:hover {
        /* Stile für Menüpunkte der Ebene 1 */
        font-weight: bold;
        color: #F8F8F8;
        text-decoration: underline; /* Unterstrich hinzufügen, wenn die Maus darüber schwebt */
        background-color: green;
    }

.menu-level2_Mob {
    /* Stile für Menüpunkte der Ebene 2 */
    font-family: 'Verdana', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #030303;
    height: 20px;
    margin-left: 0px;
    margin-right: 40px; /* Beispiel für den Abstand zwischen Menüpunkten */
    background-color: orangered;
    padding-left: 10px;
    width: calc(80% + 10px); /* Hier wird die Breite um 10px erhöht */
}

    .menu-level2_Mob:hover {
        /* Stile für Menüpunkte der Ebene 2 */
        font-weight: bold;
        color: #F8F8F8;
        text-decoration: underline; /* Unterstrich hinzufügen, wenn die Maus darüber schwebt */
        background-color: #030303;
    }


.NavigationMenu_Mob {
    margin-left: 40px;
    z-index: 50;
}
/* --------------------------------------- Footer -------------------------------------------*/


/* Der Footer sollte position: relative oder sticky haben, um am unteren Rand zu haften */

footer {
    background-color: #009D48;
    max-width: 1180px; /* Maximale Breite des Menüs */
    width: 100%; /* Breite des Menüs */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    justify-content: center; /* Hiermit wird die Navigationsleiste rechts und das Logo links ausgerichtet */
    align-items: center; /* Hiermit wird die Navigationsleiste vertikal zentriert */
    z-index: 100;
    flex-wrap: wrap;
}


.Footer_Container {
    /*background-color: #009D48;
    max-width: 1180px;*/ /* Maximale Breite des Menüs */
    width: 100%; /* Breite des Menüs */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    justify-content: center; /* Hiermit wird die Navigationsleiste rechts und das Logo links ausgerichtet */
    align-items: center; /* Hiermit wird die Navigationsleiste vertikal zentriert */
    flex-wrap: wrap;
}


/* Stil für jede Footer-Spalte */
.CopywriteText {
    align-self: flex-end; /* Unten ausrichten */
    padding-right: 0px;
    white-space: nowrap;
    color: white;
}







.Col1 {
    /*flex: 0 0 auto;*/ /* Kein Flex-Wachstum, feste Breite */
    width: 210px; /* Automatische Breite basierend auf dem Inhalt */
    height: 80px;
    white-space: nowrap; /* Verhindert Textumbruch */
    margin: 0px auto 20px 50px;
    text-align: left;
    margin-left: 0px; /* Spaltenabstand von 10px */
}


/*.Col2 {
    flex: 0 0 auto;*/ /* Kein Flex-Wachstum, feste Breite */
    /*width: auto;*/ /* Automatische Breite basierend auf dem Inhalt */
    /*white-space: nowrap;*/ /* Verhindert Textumbruch */
    /*padding: 10px;
    text-align: left;
    margin-left: 20px;*/ /* Spaltenabstand von 10px */
/*}*/


/*.Col3 {
    flex: 0 0 auto;*/ /* Kein Flex-Wachstum, feste Breite */
    /*width: auto;*/ /* Automatische Breite basierend auf dem Inhalt */
    /*white-space: nowrap;*/ /* Verhindert Textumbruch */
    /*padding: 10px;
    text-align: left;
    margin-left: 20px;*/ /* Spaltenabstand von 10px */
/*}*/


/*.Col4 {
    flex: 0 0 auto;*/ /* Kein Flex-Wachstum, feste Breite */
    /*width: auto;*/ /* Automatische Breite basierend auf dem Inhalt */
    /*white-space: nowrap;*/ /* Verhindert Textumbruch */
    /*color: white;
    padding: 10px;
    text-align: left;
    margin-left: 20px;*/ /* Spaltenabstand von 10px */
/*}*/




    /* Stil für die Überschriften in den Spalten */
.footer-column h3 {
    font-family: Verdana, sans-serif;
    font-size: 10pt; /* Schriftgröße auf 11pt setzen */
    font-weight: bold;
    line-height: 1; /* Größerer Zeilenabstand (hier 1.5 entspricht 150%) */
    color: white;
}

    /* Stil für den Text in den Spalten */
.footer-column p {
    font-family: Verdana, sans-serif;
    font-size: 10pt; /* Schriftgröße auf 11pt setzen */
    line-height: 1.2; /* Größerer Zeilenabstand für den Text (hier 1.2 entspricht 120%) */
    color: white;
}

.footer-column a {
    color: white; /* Schriftfarbe für die Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
}


/* Stil für den Text in den Spalten */
.footer-column d {
    font-family: Verdana, sans-serif;
    font-size: 8pt; /* Schriftgröße auf 11pt setzen */
    line-height: 1.2; /* Größerer Zeilenabstand für den Text (hier 1.2 entspricht 120%) */
    color: white;
}









.rounded-textbox {
    border: 2px solid #009048; /* 2 Pixel Rahmen */
    border-radius: 8px; /* Abgerundete Ecken */
    padding: 5px; /* Innenabstand für den Text */
    max-width: 500px; /* Maximale Breite des Textfelds, ändere es nach Bedarf */
}



.custom-checkbox label {
    position: relative;
    padding-left: 30px; /* Erhöhe den Abstand zwischen CheckBox und Text */
    margin-left:30px;
    cursor: pointer; /* Ändere den Cursor, um anzuzeigen, dass auf die CheckBox geklickt werden kann */
}

    .custom-checkbox label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 20px; /* Breite des Rahmens */
        height: 20px; /* Höhe des Rahmens */
        border: 2px solid #009048; /* Rahmen um das Kästchen */
        border-radius: 5px; /* Abgerundete Ecken */
        box-sizing: border-box;
    }

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0; /* Verstecke die tatsächliche CheckBox */
}

    .custom-checkbox input[type="checkbox"] + label::before {
        background: #fff; /* Ändere den Hintergrund des Rahmens in Weiß */
        color: #000; /* Ändere die Textfarbe für das "X" in Schwarz */
        font-size: 16px; /* Ändere die Schriftgröße des "X" */
        content: " "; /* Füge das "X" als Content hinzu */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-checkbox input[type="checkbox"]:checked + label::before {
        background-color: white; /* Hintergrundfarbe des Rahmens, wenn das Kästchen aktiviert ist */
        color: black; /* Textfarbe des "X" ändern, wenn das Kästchen aktiviert ist */
        content: "X"; /* Füge das "X" als Content hinzu */
    }


/*------------------------------ kleiner größer als 942px und kleiner als 1220px --------------------------------*/
/* Media Query für Bildschirme mit einer Breite bis zu 1220px */
@media only screen and (max-width: 1220px) {
/* Media Query für Bildschirme mit einer Breite zwischen 942px und 1220 Pixeln */
/*@media only screen and (min-width: 942px) and (max-width: 1220px) {*/

    footer{
        width: 100%; /* Volle Breite des Headers */
        max-width: calc(100% - 20px); /* Maximale Breite des*/
    }



    .Footer_Container {
    }

    /*#Footer_Container {
        width: 100%;*/ /* Volle Breite des Headers */
        /*max-width: calc(100% - 20px);*/ /* Maximale Breite des Nav_Container (100% - 200px Abstand auf beiden Seiten) */
        /*margin: 0 auto;*/ /* Zentriert den Nav_Container */
        /*display: block;*/ /* Nav_Container anzeigen */
        /*padding: 10px;
        display: flex;
    }*/
}