body {
    background: #ffffcc;
       margin: 0; 
    padding: 0;
    border-style: none;
   
 


}

.header {
    max-width: 100%;
    height: auto;
    padding: 0px 5px 20px 5px;
    /*Abstand Rand->Schrift*/
   
    /*Abstand Fensterrand->Headerfläche*/
    background: #0066cc;
    /*Headerfläche*/
    
}





.white {
    color: white;
}

.grey {
    color: #0066cc;
}

.red {
    color: #ffa384;
     margin-right: 4px;
    margin-left: 4px;
}





.header-titel {
    color: white;
    padding: 10px 10px;
    font-size: 15pt;
    font-family: Arial, Helvetica, SunSans-Regular, Trebuchet MS, Geneva,  sans-serif;
}



.header-link {
    padding-left: 10px;
    margin-top: -10px;
    /*Zeilenabstand p-Elemente*/
    font-size: 9pt;
    font-family: Arial, Helvetica, SunSans-Regular, Trebuchet MS, Geneva,  sans-serif;

}



.inner {
    max-width: 100%;
    height: auto;
    padding: 5px 5px 5px 5px;
   
    background-color: #ffffcc;

    margin-top: -15px;
}


.inhalt { 
 margin: 25px auto 25px auto;
    max-width: 1400px;
    width: 100%;
    
  
}





.footer {
    max-width: 100%;
    height: auto;
    padding: 0px 5px 20px 5px;
    /*Abstand Rand->Schrift*/
 
    /*Abstand Fensterrand->Headerfläche*/
    background: #0066cc;
    /*Headerfläche*/
}

.footer-link {
    padding-left: 10px;
    margin-top: -10px;
    /*Zeilenabstand p-Elemente*/
    font-size: 9pt;
    font-family: Trebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;

}




.titel-fläche {
    max-width: 100%;
    height: auto;
    padding: 2px 0px 10px 0px;
    margin: 0px 0px 20px 0px;
    border: 0px;
    background-color: #ff9933;
}


.navigation-fläche {
    max-width: 100%;
    height: auto;
    padding: 1px 10px 1px 0px;
    margin: -18px 0px 20px 0px;
    border: 0px;
    background-color: #0066cc;
   
    
}




.navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    padding-right: 5%;
    font-family: Arial, Helvetica, SunSans-Regular, Trebuchet MS, Geneva,  sans-serif;
     font-size: 13pt;
}



.kacheln {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}



h1 {
    color: white;
    margin-top: -10px;
    text-align: center;
    font-weight: 200;
    font-size: 30pt;
    font-family: Arial, Helvetica, SunSans-Regular, Trebuchet MS, Geneva,  sans-serif;
}


.h1small { 
font-size: 14pt;
    font-weight: 100;
       font-family: Arial, Helvetica, SunSans-Regular, Trebuchet MS, Geneva,  sans-serif;
}

h2 {
    color: white;
    text-align: center;
    font-weight: normal;
    font-size: 18pt;
    font-weight: 100;
    font-family: Arial, Helvetica, SunSans-Regular, Trebuchet MS, Geneva,  sans-serif;
    
}





p {
    padding: 0px 6% 0px 8%;
    font-size: 12pt;
    text-wrap: wrap;
    color: #3d3e41;
     hyphens: auto;
 
   
    
    
}






figure { 
  text-align: center; 
}

figcaption {
   display: inline-block;
   text-align: left;
}




img {

    display: flex;
    margin: auto;
    max-width: 100%;
    height: auto;
    padding-top: 20px;
} 





a {
    color: white;
    text-decoration: none;
  
}

a:hover { 
text-decoration: underline;
    color:#ff9933;
}


.flexbox { 
    width: 100%;
display: flex;
    flex-direction: row;
justify-content: center;
 
}


.box { 
width: 47%;
}


.box p { 
text-align: center;
}


.box1 { 
width: 55%;
    text-align:justify;
}



.whitespace {
white-space: nowrap;

}






/*Elemente NUR Opener!*/




.header_opener {
    max-width: 1500px;
    height: auto;
    padding: 0px 5px 20px 5px;
    /*Abstand Rand->Schrift*/
    margin-left: 20px;
    margin-right: 20px;
    /*Abstand Fensterrand->Headerfläche*/
    background: #ff9900;
    /*Headerfläche*/
}


.header-titel_opener {
    color: whitesmoke;
    padding: 10px 10px;
    font-size: 20pt;
    font-family: Trebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
}


.titel-fläche_opener {
    max-width: 1500px;
    height: auto;
    padding: 2px 0px 10px 0px;
    margin: 0px 0px 20px 0px;
    border: 0px;
    background-color: whitesmoke;
}


.inner_opener {
    max-width: 1500px;
    height: auto;
    padding: 5px 5px 5px 5px;
    margin-left: 20px;
    margin-right: 20px;
    background-color: whitesmoke;

    margin-top: -15px;
}


.kacheln_opener {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 50px;
     padding-right: 50px;
    flex-wrap: wrap;
}


.opener-text {
    padding-left: 80px;
    margin-top: 10px;
    /*Zeilenabstand p-Elemente*/
    font-size: 9,1pt;
    font-family: Trebuchet MS, Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
    color: #585757;

}

.opener-link {
      padding-left: 10px;
      color: #585757;
    font-size: 8,5pt;
  }



.img_opener {

    display: flex;
    margin: auto;
    max-width: 60%;
    height: auto;
   
} 


.background_opener { 
    background-image: url("https://doku-des-alltags.de/BDMuenchen/KBS900/920529%20Augsburg-Stuttgart/Film%202/08%20km%2032,4.jpg")
}








@media screen and (max-width: 1024px) {
    h1 {
        font-size: 30px;
    }
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 25px;
    }
}

@media screen and (max-width: 620px) {
    h1 {
        font-size: 20px;
    }
}


@media screen and (max-width: 1024px) {
    h1small {
        font-size: 10px;
    }
}

@media screen and (max-width: 768px) {
    h1small {
        font-size: 8px;
    }
}

@media screen and (max-width: 620px) {
    h1small {
        font-size: 6x;
    }
}



@media screen and (max-width: 375px) {
    h1small {
        font-size: 2x;
    }
}











@media screen and (max-width: 1024px) {
    h2 {
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    h2 {
        font-size: 12px;
    }
}

@media screen and (max-width: 620px) {
    h2 {
        font-size: 10px;
    }
}






@media screen and (max-width: 1300px) {
    img {
        max-width: 90%;
    }
}

@media screen and (max-width: 780px) {
    img {
        max-width: 85%;
    }
}


@media screen and (max-width: 620px) {
    img {
        max-width: 80%;
    }
}




@media screen and (max-width: 1000px) {
    .flexbox {
         
    flex-direction: column;
    }
    
    
        .box1 {
            justify-content: center;
                width: 100%;
  
    }
    
    

    
    
}