/* wenn kein Punkt for dem "body folgt alle Texte bekommen diese Schriftart zugewiesen" */
body {
    font-family: 'Open Sans', sans-serif;
    background:rgb(171, 241, 142);
    padding-left: 50px; /* links einrücken */ 
    padding-right: 50px; 
}





/* Header der Website*/
.logo-image{
    width: 100%;
    height: 50px; 
    object-fit: cover;  /*keine Verzerrungen */
    /*display: block; Wenn Bildunterschrift wird kein Abstand dazwiwschen gelassen*/
}
.headline {
    color:rgb(17, 0, 255);
    padding-left: 15px;
}
.image-div {
    background:rgb(250, 200, 1);
    padding: 1px; /* Container bekommt einen Rahmen */
}
.header-kopf {
    
    /* ein Element des div-Containers wird ganz links bzw ganz rechts angezeigt*/        
    display: flex;
    justify-content: flex-start; 
    /* auf y-Achse mittig im Container*/
    align-items: center;
}
.list-container {
    background: rgb(25, 248, 218);
    margin: 1px 1px 1px 1px;
    /*border:1px solid red;*/
    border-radius: 15px; 
}
.list-container ul {
    padding-top: 10px;
    padding-bottom: 10px;
}



/* Menuestruktur*/
.nav {
    /* ein Element des div-Containers wird ganz links bzw ganz rechts angezeigt*/        
    display: flex;
    justify-content: center; 
    /* auf y-Achse mittig im Container*/
    align-items: center;
    border: 2px;
    border-radius: 5px;
    border-color: black;
}
nav ul {   /* wenn kein "." folgt alle nav ul sollen so aussehen */
    display: flex;
    padding: 30px;
    list-style-type: none; /* läst aufzählungspunkte verschwinden */
}
.toggle-button {
    position: absolute;
    top: 25px;
    right: 25px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 23px;
}
.toggle-button .bar {
    height: 4px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 100px;
}




a {    /* wenn kein "." folgt alle Links sollen so aussehen */
    color: darkblue;
    text-decoration: none;
    margin-left: 16px; /* Abstand der Links nebeneinander */
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: rgb(200, 63, 228);
}

.text-highlight {
    color:darkgoldenrod;
    font-size: 36px;
}
.Ueber_uns-Container {
    display: flex;
    justify-content: flex-start;
}
.maps-container {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
}
.maps-frame {
    border: 0px;
    height: 300px;
    width: 70%;

}
.text-container {
    background-color: rgb(51, 138, 150);
    padding: 8px;
    color: rgb(24, 21, 228);
    font-weight: 600;
}






/* Slideshow*/
.slideframe {
    background-color: crimson; /*         um den Container sichtbar zu machen*/
    display: flex;
    justify-content: center; /*horizontale Ausrichtung*/
    align-items: center; /*vertikale Ausrichtung*/
    margin-bottom: 15px; /*Abstand nach unten*/
}
.slideshow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(183, 223, 37);
    width: 85vw; /*70% vom Anzeigebereich*/
    height: 45vh;
    box-shadow: 0px 0px 20px rgb(248, 209, 82); /*horiz und vertical Versatz und 10px für weichzeichner Radius*/
    position: relative; /* Folien kann absulute Position zugewiesen werden innerhalb slideshow element*/
}
.slide {
    position: absolute; /* um Element absulute position zuweisen zu können */
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: chartreuse;
    overflow: hidden; /* schneidet bild ausen ab*/
}
.slide-bild {
    width: 100%;
}
.slide-textbereich {     /*um Text vors Bild zu legen*/
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 70%;
    background-color: rgba(231, 231, 22, 0.5); /*0.5 bedeutet halb durchsichtig*/
    color: rgb(67, 52, 202);
    text-align: center;
    font-family: sans-serif;
    padding: 0 15% 0 15%;
}
.slide-ueberschrift {
    font-size: 1.5em;
}
.slide-beschreibung {
    font-size: 1.0em;
}
.pfeil {
    position: absolute;
    top: 0;
    bottom: 0;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    color: rgba(255,255,255,0.5);
    user-select: none;
    cursor: pointer;
}
.pfeil:hover {
    color: rgb(104, 119, 252);
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;   
}
b {    /* wenn kein "." folgt alle Pfeile sollen so aussehen */
    color: darkblue;
    text-decoration: none;
    margin-left: 16px; /* Abstand der Pfeile nebeneinander */
    font-weight: bold;
}
b:hover {
    text-decoration: none;
    text-decoration-thickness: 2px;
}    
.maps-right {
    margin-left: 16px;
    width: 30%;

}






/* Footer bereich */
.legal-container {
    background-color: rgb(25, 248, 218);
    padding: 10px;
    color: rgb(24, 21, 228);
    font-weight: 400;
    border-radius: 15px;
}
.legal-text {
    margin-right: 16px;
}

.impressum {
    background-color: rgb(159, 189, 185);
    padding: 10px;
    color: rgb(24, 21, 228);
    font-weight: 400;
    border-radius: 15px;
}




/* Handy/Tabletgrösse 576px */
@media screen and (max-width:576px) {
    body {
        
        padding-left: 3px; /* links einrücken */ 
        padding-right: 3px;
    }
    .list-container {
        display: none;
        width: 100%;
    }
    .toggle-button {
        display: flex;
    }
    nav {
        flex-direction: column;
        align-items: flex-start;
    }
    .list-container ul {
        flex-direction: column;
        width: 100%;
    }
    .list-container li {
        text-align: center;
    }
    .list-container.active { /* damit kann über Java Navliste ein und ausgeschaltet werden */
        display: flex;
    }

}