/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 20 version
*/

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

  /* Generell */
  body{
      padding-top:95px;
    }

  h1{
    font-size: 1.5em;
  }
  
  /* Leiste oben */
  #top{
    height: auto;
  }

  /*Telefonnummer oben verbergen*/
  #call{
    position: absolute;
    left:-9999em;
  }

  #logo{
    margin-top:10px;
  }
  /* Logo-Größe anpassen */
  #logo img{
    width:70px;
    height:auto;
  }

  /* Navigation */
  nav li.float-l{
    float:none;
    width:auto;
    padding: 5px 0px;
    }

  .open{
    display: block;
  }

  .open:target ~  .resp-menu,.resp-menu{
    max-height:0px;
    overflow:hidden;
    width:auto;
  }

  .open:target ~  .resp-menu{
    max-height:300px;
    position: absolute;
    top:80px;
    left:0;
    background:#F4F4F9;
    -webkit-box-shadow: 5px 2px 2px #31393C;
            box-shadow: 5px 2px 2px #31393C;
    width:100%;
    padding-top:20px;
    padding-bottom: 20px;
  }

  .open:target ~ .close{
    display:block;
    position: absolute;
    top:50px;
    right:10px;
  }

  .open:target {
    display:none;
  } 

  .open, .close{
    width:2em;
    height:1.5em;
    overflow:hidden;
    margin-left:auto;
  }

  .open{
      color:transparent;
  }

  .open:before{
      content:"";
      border-top:5px solid;
      border-bottom:double 14px;
      display:inline-block;
      width:30px;
      padding:4px 0 0;
      position: absolute;
      top:10px;
      right:10px;             
      background:#F4F4F9;
      color:#335170;
  }

  .close:before{
    content:"x";
    display:inline-block;
    width:100%;
    text-transform:capitalize;
    font-size:2em;
    line-height:18px;
  }

  a.open:hover,a.close:hover{
    color:transparent;
    background:transparent;
  } 


  /* Banner */

  #banner{
    height:250px;
    min-height:250px;
    background-position-x: center;     
    background-size:cover;
  }

  h2{
    font-size:0.9em;
  }

  /* Content */

  h3{
    text-align: center;
  }

  #start_content>div,section#content>div{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  #start_content .col-33, .main_content.col-50, .main_content, section#content>div:last-child{
    width:80%;
    margin-left:auto;
    margin-right: auto;
  }

  
  #kanzlei1,#kanzlei2{
      float:none;
      display: block;
      margin-left:auto;
      margin-right: auto;
      padding-left:0;
      padding-right:0;
      width: 100%;
      max-width: 300px;
      height: auto;
  }

  /* Kontaktformular */
  fieldset{
    padding:0;
  }

  select,input{
    display:block;
  }

  fieldset>div{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  textarea{
    width: 100%;
    max-width:400px;
    min-width:200px;
  }

  /* Footer */
  #adress{
    text-align: center;
}

  #portrait{
    position: absolute;
    left:-9999em;
  }

  #footer_contact .col-33{
    width:50%;
  }

  #footer_links a{
    padding-left:5px;
    padding-right:5px;
  }    
}

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

  /* Generell */
  body{
      padding-top:70px;
    }

    html {
      word-wrap:break-word;
    }
    
  /* Leiste oben */  
  #top{
      height:auto;
  }

  /* Navigation */
  #logo img{
      width:25px;
      height:auto;
      margin-top:10px;
  }

  #logo h1{
      font-size:1em;
  }

  #logo h2{
      font-size: 0.9em;
  }

  .open{
      color:transparent;
  }

  .open::before{
      position: absolute;        
      background:#F4F4F9;
      color:#335170;
      top:10px;
      right:10px;
      width:30px;
  }

  .open:target ~  .resp-menu{
      top:50px;
  }

  .close:before{
      position: absolute;        
      background:#F4F4F9;
      color:#335170;
      z-index: 1;
  }

  /* User-Menü*/
  #user_menue ul li{
    padding-left:25px;
  }

  .current_user{
    font-style: italic;
  }

  /* Banner */

  #banner{
    height:100px;
    min-height:100px;
    background-position-x: center;     
    background-size:cover;
  }

  h1{
    padding-left:25px;
  }

  #banner h2{
      font-size: 0.6em;
  }

  h3,h4{
      font-size: 0.9em;
  }

  /* User-Profil */
  .profil{
    flex-wrap: wrap;
  }

  /* Kontaktformular */

  textarea{
    width: 100%;
    max-width:200px;
    min-width:50px;
  }

  #vorname,#nachname,#email,#tel,#thema{
    width:100%;
    max-width: 200px;
    min-width: 50px;
  }

  /* Download-Bereich*/
  #download_table td,#download_table th { 
    display: block ;
  }

  /* Content */

  h3{
    margin-top:10px;
  }

  .main_content,#content,footer{
      font-size:0.75em;
  }

  /* Footer */

  #address{
    text-align: center;
  }

  #footer_contact>div{
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
  }

  #footer_contact .col-33{
      width:100%;
  }

}