/* ---------------------------------------------------------
   Mobile styles 
   ---------------------------------------------------------*/
@media only screen and (max-width: 500px) 
{

   .socialmedia_baublog,
   .socialmedia_facebook,
   .computer
   {
    display: none;
   }
   
   .smartphone
   {
    display: block;
   }
   
   main[role="start"] .teaser,
   main[role="content"] .m1_links .teaser,
   main[role="content"] .m2_links .teaser,
   main[role="content"] .m4_links .teaser   
   {
    float: left;
    _width: 360px;  
    _width: 100px;
    width: 90%;
    margin: 0 0 20px 20px;    
   }
   
   main[role="content"] .m4_links .teaser
   {
    _margin: 0px;

   }   
   
   
   main[role="content"] .rechtsbuendig,
   main[role="content"] .rechtsbuendig #filter button
   {
    float: left;
    clear: left;
    margin-left: 0;    
   }
    
   
   main[role="content"] .m4_links h1
   {
    text-align: left;
    margin: 0 0 20px 20px;
   }   
     
   main[role="start"] .teaser
   {
    margin-bottom: 40px;
   }
   
   main[role="content"] #mitte
   {
    width: 90%;
   }   
      
   main[role="content"] #mitte .rechts
   {
    clear: both;
    float: left;
    _width: 100%;
    margin: 220px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    padding: 0px;
   }
   
   main[role="content"] #mitte #flex,
   main[role="content"] #mitte .links
   {
    position: relative;
   }
   
   main[role="content"] #mitte .links
   {
    float: left;
    width: 100%;
   }
   

  main[role="content"] #m1, 
  main[role="content"] .m1_links,
  main[role="content"] .m2_links, 
  main[role="content"] .m4_links, 
  main[role="content"] .m1_rechts,
  main[role="content"] .m2_rechts
  {
    float: left;
    width: 100%;
  
  }  
  
  main[role="content"] .m1_rechts,
  main[role="content"] .m2_rechts
  {
    padding: 0 20px 20px 20px;
  }



  footer[role="footer"] #gruen,
  footer[role="footer"] #weiss
  {
    display: block;  
  }
  
  footer[role="footer"] #weiss
  {
    line-height: 1.5rem;
  }
  
   main[role="content"] .links .teaser dt,
   main[role="content"] .links .teaser dd,
   main[role="content"] .links .teaser dd a
   {
    font-size: 1.5rem;
    
    font-size: 1.00rem;
   }  
   
   main[role="content"] .go
   {
    width: 100%;
    height: auto;
   }
   
   main[role="content"] .m4_links h1,
   main[role="content"] .rechts h1,
   main[role="content"] .links h1
   {
    margin-top: 20px;
    text-align: left;
   }

  /* ---------------------------------------------------------
   Kontaktformular
   ---------------------------------------------------------*/

    label,
    input,
    textarea

    {
      width: 100%;
    }
    
    
  /* ---------------------------------------------------------
   Kopfbereich
   ---------------------------------------------------------*/
    
    #banner
    {
      padding-top: 65px;
    }
     
}  

@media only screen and (min-width:250px) and (max-width: 350px) {.oeffnungszeiten dt,  .oeffnungszeiten dd, main[role="content"] .teaser dt, main[role="content"] .teaser dd, main[role="content"] .teaser dd a { font-size: 0.90rem !important; }}
@media only screen and (min-width:50px) and (max-width: 249px) {.oeffnungszeiten dt,  .oeffnungszeiten dd, main[role="content"] .teaser dt, main[role="content"] .teaser dd, main[role="content"] .teaser dd a { font-size: 0.80rem !important; }}