/*allgemeine Angaben
 * ----------------------------------------------------------*/
 * {
     margin: 0;
     padding: 0;
     -moz-box-sizing: border-box;       /*neues Boxmodell definiert*/
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     }
     header, section, footer {
     display: block;
     }

  body, head {
     font-family: "Source Sans Pro", sans-serif;
     font-size: 1.1em;
     color: #888;
      
     }
   img {
    max-width: 100%;
    max-height: auto;
    width: auto;
   }
   .seite {
       max-width: 1270px;
       width: 100%;
       margin: auto;
       padding-left: 0.5em;
       padding-right: 0.5em;
      
   }
   .bgr01 {
       background-color: #ff6600;
       color: #fff;
   }
   .bgr02 {
       background-color: #212832;
       color: #fff;
   }
   

/*Schrift
 * *********************************************************************/
   h1 {
      font-size: 1.8em;
      line-height: 1.2em;
     font-weight: 400; 
   }
   h2 {
      font-size: 1.6em;
      line-height: 1.2em;
      font-weight: 400;
   }
   h3 {
   font-size: 1.4em;
      font-weight: 400;
      line-height: 1.2em;
       
   }
    h4 {
   font-size: 1.2em;
      font-weight: 600;
      line-height: 1.2em;

   }
   p {
       padding-bottom: 0.25em;
   }
  
   .textmitte {
       text-align: center;
   }
   .linieoben {
      border-top : solid 10px #35cac4;
   }
  
/*Raster
 * *****************************************************************+*/
.row {
    width: auto;
 }
.row:before,
.row:after {
    content: "";
    display: table;
}

.row:after {
    clear: both;
}

.columns {
    float: left;
}

/*large*/

    .large-0 {width: 12.5%;}
    .large-1 {width: 25%; }
    .large-2 {width: 33.33%; }
    .large-3 {width: 37.50%;}
    .large-4 {width: 50%;}
    .large-5 {width: 62.5%;}
    .large-6 {width: 66.66%; }
    .large-7 {width: 75%; }
    .large-8 {width: 87.5%;}
    .large-9 {width: 100%;}

/*abstände---------------------------------------------------------*/
.disoben01 {
    padding-top:  0.5em;
}
.disoben02 {
    padding-top: 1em;
}
.disoben03 {
    padding-top: 1.5em;
}
.disoben04 {
    padding-top: 2em;
}
.disunten01 {
    padding-bottom: 0.5em;
}
.disunten02 {
    padding-bottom: 1em;
}
.disunten03 {
    padding-bottom: 1.5em;
}
.disunten04 {
    padding-bottom: 2em;
}
.dislinks01 {
    padding-left: 3%;
}
.disrechts01 {
    padding-right: 3%;
}

/*Design------------------------------------------------------------*/
 .test {
    background-color: #FFFF00;
}
.headerbox {
    position: relative;
    width: 100%;
    height: 2.5em;
 }
.logo img{
  position: absolute;
  top: 0;
  left: 0;
  
}

.bildtest img {
  display: block  
  
}
.flex-container {
    display: flex;
    flex-direction:row;
}
.flex-box {
   width: 25%;
   padding: 0.25em;
 }
 


/*Text---------------------------------------------------------------*/
ul {
    margin-left: 4em;
    margin-bottom: 1em;
    list-style: square;
}
a {
    color: #000080;
}
.accordion {
    background-color: #fff;
    cursor: pointer;
    padding: 0.5em;
    width: 100%;
    border: none;   
    outline: none;
    transition:0.4s;
    text-align: left;
    font-size: 1.1em; 
    color: #888;
}

.active, .accordion:hover {
    color: #2DA8A2 ;
}

.panel {
    padding-bottom: 1.5em;
    padding-top: 0.5em;
    border-bottom: solid 1px #888;
    display: none;
    overflow: hidden; 
   font-size: 1.1em;
}

.accordion:before {
  content: '\002B'; /* Unicode character for "plus" sign (+) */
  float: left;
  margin-left: 5px;
  font-size: 1em !important;
}

.active:before {
  content: "\002D"; /* Unicode character for "minus" sign (-) */
}
.button01 {
    width: 75%;
    margin-left: 25%;
    background-color: #35cac4;
    border:solid 1px #2EADA4 ;
    padding: 0.5em;
    font-size: 1.2em;
    color: #fff;
    border-radius:5px;
    text-align: center;
}
.button02 {
    width: 90%;
    background-color: #35cac4;
    border:solid 1px #2EADA4 ;
    padding: 0.5em;
    font-size: 1.1em;
    color: #fff;
    border-radius:10px;
    text-align: center;
}
.button01 a {
    color: #fff;
    text-decoration: none;
    text-align: center;
}
.formular {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    background-color: #E6E6E6;
}
.label {
    padding: 0.5em;
}
.input {
    padding: 0.5em;
    width: 90%;
    border-radius:5px;
    border: solid 1px #ccc;
}
.link a {
    text-decoration: none;
    color:  #2EADA4;
    font-weight: 600;
}
.link a:hover {
    text-decoration: none;
    color: #888;
    font-weight: 600;
}
footer {
    
    
}
footer a{
color: #fff;
text-decoration: none;

}

@media screen and (max-width: 780px)  {
body  { 
        
  }
 .middle-0 {width: 50%;} 
 .middle-1 {width: 100%;} 
.flex-container {
    display: flex;
    flex-wrap:wrap;
}
.flex-box {
   width: 25%;
   padding: 0.25em;
 }
.flex-box {
   width: 50%;
   padding: 0.25em;
 }
 .bildzeige {
     display: none;
 }
}
@media screen and (max-width: 420px)  {
body  {  font-size: 1em;
     
  }
.small-0 { width: 50% ; }
.small-1 { width: 100% ; }

.logo img{
    width: 40%;
    margin-left: 30%;
}
h1 {
      font-size: 1.4em;
      line-height: 1.2em;
     font-weight: 400;
   }
h3 {
      font-size: 1.2em;
      line-height: 1.2em;
     font-weight: 400;
   }

.bildgross {
    display: none;
}
.bildklein {
    display: block;
}  
}