/* ---------------------------------------------------------
   Navigation 
   ---------------------------------------------------------*/

/* === Kapitel 7 - Basisnavigation ohne Media Queries === */

nav[role="navigation"] {
  background: #f9b3b3; 
  color: #111111; 
}
nav[role="navigation"] ul {
  padding: 0;
  margin: 0; 
}
nav[role="navigation"] li {
  display: inline-block;
  padding: 0;
  margin: 0; 
}
nav[role="navigation"] li a {
  text-decoration: none; 
  color: #111111;
  padding: 1em; 
}
nav[role="navigation"] li.active a {
  color: black;
  text-decoration: underline;
}

nav li a:first-child {
  padding-left: 0;
}

/* ===  Kapitel 12 - Erweiterung um Media Queries  === */

body { min-width: 280px; }
nav[role="navigation"]  div.menubutton { display: none; }

/* === Screens mit 320 bis 800 px Breite haben ein Pulldown Menü === */
/*         bei Veränderungen gridprozent.css nicht vergessen         */

@media screen and (min-width: 320px) and (max-width: 800px) {

/* Fuer Browser mit Media Query Menuebutton einblenden */ 
nav[role="navigation"]  div.menubutton { display: block; }

  body { 
    position: relative; 
  }
  
  header[role="banner"] {    
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
  }
 
  /* Menü-Button positionieren */
  div.menubutton {
    display: block;
    position: absolute;
    right: 1em;
    top: 1em;
    z-index: 1000;
  }

  /* Menü-Button gestalten */ 
  div.menubutton a {
    display: block; 
    color: #333333;
    background: #f9b3b3;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 0em;
    border: 2px solid #ffffff;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
  }
  div.menubutton a.shownavlist:after {
    content: " \25bc";
    font-size: 0.7rem;
  }
  div.menubutton a.hidenavlist:after {
    content: " \25b2";
    font-size: 0.7rem; 
  }  
  div.menubutton a.hidenavlist {
    display:none;
  }

  /* Navigationsliste gestalten */
  nav[role="navigation"] {
    padding: 0 ; 
    margin-left: 1em ;
    margin-right: 3em;
    width: 10em;
    background: white;
  }
  nav[role="navigation"] ul#navlist {
    max-height: 0;
    overflow: hidden; 
    transition: 0.25s;  
    list-style-type: none;
    padding: 0; 
    border-radius: 0 0 1rem 1rem;
    margin: 0;
    -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
  }
  nav[role="navigation"] li { 
    display: block; 
    border-bottom: 1px solid #dddddd; 
  }
  nav[role="navigation"] li:last-of-type {
    border-bottom: 0;
  }

  /* Gestaltung der Hyperlinks */
  nav[role="navigation"] li a {
    display: block; 
    text-decoration: none;
    background: #f9b3b3;
    color: #333333;
    padding: 1em; 
    border: 2px solid #f9b3b3;
  }
  nav[role="navigation"] a:hover, 
  nav[role="navigation"] a:focus {
    border: 2px solid #ef3a3a;
    text-decoration: underline;
  }
 
  nav[role="navigation"] li.active a {
    background: #ef3a3a;
    border: none;
    color: white;
    text-decoration: none;
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
  }

  /* Navigationsliste einblenden */
  #menu:target ul#navlist { 
    max-height: 25em; 
  }
  #menu:target a.shownavlist { 
    display: none; 
  }
  #menu:target a.hidenavlist { 
    display: block; 
  }

} /* Ende @media */


/* === Screens mit mind. 801 px haben die Karteireiter === */

@media screen and (min-width: 801px) {

  header[role="banner"] {

    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);

    margin-bottom: 1em;
  }
  
  nav[role="navigation"] {
    background: white;
    border-bottom: 2px solid #ef3a3a;
    padding: 0.5em 1em 0em 1em;
    margin: 0;
  }

  nav[role="navigation"] ul {
    position: relative;
    padding-left: 0; 
    margin: 0;
  }
  
  nav[role="navigation"] li {
    list-style-type: none; 
    display: inline-block;
  }
    
  /* das sind die eigentlichen Nav-Buttons */
  nav[role="navigation"] li a {
    display: block;
    min-width: 6em;
    background-color: #f9b3b3;
    color: #111111;
    text-align: center;
    text-decoration: none;
    
    /* abgerundete Ecken
    border-radius: 0.15em 1.5em 0em 0em ; 
    */ 
    
    /* scharfe Ecken */
    border-radius: 0em 0em 0em 0em ; 

    border: 2px solid #f9b3b3;
    padding: 0.25em 0.5em ;
    margin: 1em 0em 0em 0em;
        
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);    
  }
  
  /* das ist der aktive Nav-Button */
  nav[role="navigation"] li.active a {
    background: #ef3a3a;
    color: #ffffff;
    text-decoration: none; 
    border: 2px solid #ef3a3a;
    
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
  }
  
  /* Nav-Button mit Mauszeiger darüber */
  nav[role="navigation"] a:hover,
  nav[role="navigation"] a:focus {
    border: 2px solid #ef3a3a;
    text-decoration: underline;
  }


} /* Ende @media */

/* eof */