:root {
    --bg-color:  #5F9D23;
    --light-green: #defcc2;
    --light-text: #888d8f;
}

* {
    margin: 0px;
    padding: 0px;
    border: none;
    font-family:Arial, Georgia, "Trebuchet MS", Verdana, Tahoma, Helvetica, sans-serif;
}

#header {
    clear: both;
    margin: 0 auto;
    width: 90%;
    border: 2px solid #fff;
}

#navi_top {
    background-color: var(--bg-color);
    border-bottom: 2px solid #fff;
}

#navi_top_liste {
    display: flex;
    margin:auto;
    align-items: center;
    justify-content: space-around;
}

ul#navi_top_liste li {
	display:flex;
	list-style:none;
    position: relative;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

ul#navi_top_liste li a {
	display:block;
	color:#eaeaea;
	text-decoration:underline;
	text-transform:uppercase;
}

ul#navi_top_liste li a:hover {
	background:#defcc2;
	text-decoration:none;
        color: var(--bg-color);
}

#navi {
    border-bottom: 2px solid #fff;
    display: flex;
    background-color: var(--light-green);

}

#logo {
    text-align: center;
    margin: auto;
    flex: 1.5;
}


#bild {
/*    background-image: url(../img/bruecke.jpg);*/
    position: relative;
    float: right;
    flex: 3;
    justify-content: flex-end;
}

.slideshow {
    z-index: -50;


}

.slides {
    display: none;
    width: 100%;
    object-fit: cover;
    height: 350px;
}



#navi_bar {
    background-color: #888d8f;
    z-index: 20;
}

#navi_im_bild {
    position: absolute;
    bottom: 0;
    background: #dbe8ec;
    width: 100%;
    opacity: 0.85;
}

#bild {
    z-index: 100;
}

#navi_im_bild li {
    padding: 10px;
    float: right;
    list-style:none;
    z-index: 10;
    opacity: 1;
}


#navi_im_bild li a {
    text-decoration: underline;
    color:#000000;
    font-size:20px;
    text-transform:uppercase;
}

#navi_im_bild li a:hover {
    text-decoration:none;
    background:#defcc2;
}