/* CSS Document */

body{
display: flex:
margin: 0;
}

#header{
display: flex;
background          : linear-gradient(to right, white 15%, #006600);
}

#headerschrift{
font-family         : DejaVu Sans;
font-size           : 30pt;
font-weight         : bold;
color               : #006600;
} 

#menue {
    display: block;
}

#fuss {
    position: relative;
    display: block;
    padding-top:  20px;
    padding-left:  50px;
}

#inhalt{
display: flex;
padding-top:   70px;
padding-left:  50px;
}

h1{
font-family         : DejaVu Sans;
color               : #004400;
font-size           : 15pt;
}
  
#aktiveSeite{
font-family         : DejaVu Sans;
font-size           : 16pt;
color               : #004400;
font-weight         : bold;
}

.textschrift{
font-family         : DejaVu Sans;
color               : #004400;
font-size           : 13pt;
}

a:link{
color               : #004400;
}

a:visited{
color               : #004400;
}

a:hover{
color               : #ffd75e;
}

a:active{
color               : #004400;
}

.schalter {
position            : relative;
color               : #004400;
height              : 27px;
width               : 160px;
left                : 2px;
font-size           : 12pt;
font-weight         : bold;
background          : linear-gradient(to bottom, white, #FFFF00); 
box-shadow          : inset 0px 0px 6px #fff,inset 0px -1px 6px #fff;
border              : 1px solid #5ea617;
border-radius       : 1em;
margin-top          : 15px;
margin-bottom       : 15px;
text-align          : center;
}

.foto  {
max-width           : 100%;
height              : auto;
}

a  {
text-decoration:none;}
.schalter:hover {
box-shadow          : #006600 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}

.schalter:active {
box-shadow          : #FFFF00 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}

#frei_schild  {
      position: absolute;
      -moz-transform: rotate(10deg); /* Firefox 3.6 Firefox 4 */
      -webkit-transform: rotate(10deg); /* Safari */
      -o-transform: rotate(10deg); /* Opera */
      -ms-transform: rotate(10deg); /* IE9 */
      transform: rotate(10deg); /* W3C */
    }  

.slideshow {
    width: 100%;
    max-width: 700px;
    aspect-ratio: 4 / 3;
    box-shadow: 0px 0px 15px grey;
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    opacity: 0;
}

.slide-bild {
    width: 100%;
}

.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: white;
}

.pfeil-links {
    left: 0;
}

.pfeil-rechts {
    right: 0;
}

.indikatorenliste {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    list-style-type: none;
    font-size: 40px;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.indikator {
    padding: 0 10px;
    user-select: none;
    cursor: pointer;
    color: white;
    opacity: 0.5;
}

.aktiv {
    opacity: 1;
}