/* ---------------------------------------------------------
   Mobile styles 
   ---------------------------------------------------------*/
@media only screen and (min-width:501px) and (max-width: 1024px) 
{
   
   main[role="start"] .teaser
   {
    width: 360px;  
    margin: 0 0 40px 20px;
   }
   
   main[role="content"] #mitte
   {
    width: 80%;
   }   
   
   main[role="content"] .m4_links .teaser
   {
    max-width: 360px;
    width: 35.15625%;  /* 360 zu 1024 */      
    margin: 0 0 20px 20px;
   } 
      
   main[role="content"] .m4_links h1
   {
    text-align: left;
    margin: 0 0 20px 20px;
   }         
   
   
  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,
  label,
  input,
  textarea
  
  {
    float: left;
    width: 100%;
  }  
  
  main[role="content"] .m2_rechts
  {
    padding: 0 2.5641025641025641025641025641026% 2.5641025641025641025641025641026% 2.5641025641025641025641025641026%;   /* 20 zu 780 */
    
    _padding: 1.754385964912281%;   /* 20 zu 1140 */
  }
  

  main[role="content"] .m1_rechts
  {
    padding: 0 5% 5% 5%;   /* 20 zu 1100 */
    /* ist moch ein Fehler: der Abstand stimmt nicht; muessen 20 Pixel zur Basis sein */
  }
  
  
  footer[role="footer"] #gruen
  {
  
    _border: 1px solid #000;
  }
  
  footer[role="footer"] #weiss
  {

    _border: 1px solid #000;
  }
  
   main[role="content"] .go
   {
    width: 50%;
    margin: 0px;
   }  
  
}

@media only screen and (min-width:501px) and (max-width: 750px)
{
   main[role="content"] .go,
   main[role="content"] .floristik
   {
    width: 100%;
    margin: 0px 0px 20px 0px;
    height: auto;
   }  

}


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

  main[role="start"]  .teaser p {height: auto;}
}


@media only screen and (min-width:501px) and (max-width: 640px)
{

   main[role="content"] #mitte #flex,
   main[role="content"] #mitte .links
   {
    position: relative;
   }

   main[role="content"] #mitte .links 
   {
    float: left;
   }

   main[role="content"] #mitte .rechts  
   {
    clear: both;
    float: left;
    margin: 20px 0px 0px 0px;    
    padding: 0px;
    
    _border: 1px solid #000;
   }


}