/*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;
     background-color: hsl(220, 60%, 30%);
     margin-top: 1em;
     margin-bottom: 1em;
     }
   img {
    max-width: 100%;
    max-height: auto;
    width: auto;
   }
   .seite {
       max-width: 1024px;
       width: 100%;
      margin: auto;
      
   }
   .bgr01 {
       background-color: #fff;
   }
   .bgr02 {
       background-color: hsl(220, 60%, 30%);
   }

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

   }
   p {
       padding-bottom: 0.5em;
   }
   .textfarbe01 {
       color: hsl(220, 60%, 30%);
   }
   .texticon {
       color: hsl(220, 60%, 30%);
       font-size: 1.4em;
   }
   .textmitte {
       text-align: center;
   }
   .bildlinks {
       padding-top: 0.5em;
       padding-bottom: 0.5em;
       padding-left: 0.5em;
       padding-right: 0em;
   }
   .bildmitte {
       padding-top: 0.5em;
       padding-bottom: 0.5em;
       padding-left: 0.25em;
       padding-right: 0.25em;
   }
   .bildrechts{
       padding-top: 0.5em;
       padding-bottom: 0.25em;
       padding-left: 0em;
       padding-right: 0.5em;
   }
  
/*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;
}
.logo img{
    width: 20%;
    margin-left: 40%;
}
.bildgross {
    display: block;
}
.bildklein {
    display: none;
}
/*Text---------------------------------------------------------------*/
ul {
    margin-left: 4em;
    margin-bottom: 1em;
    list-style: square;
}
a {
    color: #000080;
}
.accordion {
    background-color: #fff;
    cursor: pointer;
    padding: 0.5em 3%;
    width: 100%;
    border: none;   
    outline: none;
    transition:0.4s;
    text-align: left;
    font-size: 1.1em;
}

.active, .accordion:hover {
    background-color: #E6E6E6;
}

.panel {
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 0.25em;
    padding-bottom: 2em;
    background-color: #E6E6E6;
    display: none;
    overflow: hidden;   
}

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

.active:before {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.button01 {
    width: 100%;
    background-color: hsl(220, 60%, 30%);
    padding: 0.5em;
    font-size: 1.1em;
    color: #fff;
    border-radius:10px;
    text-align: center;
}
.button02 {
    width: 90%;
    background-color: hsl(220, 60%, 30%);
    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;
}
.link a {
    text-decoration: none;
    color:  hsl(220, 60%, 30%);
    font-weight: 600;
}
.link a:hover {
    text-decoration: none;
    color: #888;
    font-weight: 600;
}
footer {
    color: #fff;
    text-align: center;
}
footer a{
color: #fff;
text-decoration: none;

}

@media screen and (max-width: 780px)  {
body  { 

  }
 .middle-0 {width: 50%;} 
 .middle-1 {width: 100%;} 
h1 {
      font-size: 1.8em;
      line-height: 1.2em;
     font-weight: 400;
   }

}
@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;
}  
}