/*  ==========================================
    Einstieg in HTML und CSS  
    Stylesheet für die Übungswebsite 

    navi-responsiv.css  
    wird in style.css per @import eingebunden  

    Stylesheet zur Gestaltung der Site-Navigation
    
    Die Navigation basiert dabei auf dem Prinzip des *Progressive Enhancement*: 
    Ohne JavaScript funktioniert alles, mit ist es besser. 

    1. Navigation in schmalen Viewports *ohne* JS
       - Vertikale Navigation mit grundlegender Gestaltung. 
       - Menübutton wird mit der Klasse .no-js ausgeblendet. 

    2. Navigation in schmalen Viewports *mit* JS 
       - Nur der Menübutton ist zu sehen. 
       - Navigationsliste wird durch Antippen/Anklicken des Buttons eingeblendet 

    3. Navigation in Viewports > 600px 
       - Navigationsliste wird horizontal dargestellt.
       - JavaScript spielt für die Navigation keine Rolle. 

    ======================================= */
/** 
  * Mobile First 
  * Gestaltung der Navigation in einem schmalen Viewport 
  */
.site-nav {
	position: sticky;
	top: 0;
  z-index: 50;
  margin-bottom: 0rem; /* Abstand Navigationsleiste zu Content unten */
  padding: 0 0 0.25rem 0; /* Höhe Navigationsleiste vergrössern */
  box-shadow: var(--shadow-navi);
  height: auto; /* Keine Höhe fixieren, sonst transparenter Hintergrund im ausgefahrenen Zustand */
	background-color: var(--color-white);
}
.nav-links {
	width: 80%; /* xxx */
  }
.nav-links img {
	yymargin-top: 1rem;
    margin-left: 1rem; /* Abstand Logo zum linken Rand */
  }
.site-nav .inside {
  padding: 0;
}
.site-nav ul {
  display: flex;
  flex-flow: column;
  list-style: none;
  padding: 0;
  margin: 1.05rem 0 0.9rem 0;
}
.site-nav a {
  display: inline-block;
  margin-bottom: 0.5rem; /* Vertikaler Abstand zw. Menüeinträgen */
  margin-right: 0.5rem;
  text-decoration: none;
  font-family: "FigTree";
  color: var(--color-prim1);
  font-size: 1.25rem;
  font-weight: 500;
  padding: 0.5rem 1.15rem 0.5rem 0.9rem;
}
.site-nav a:hover, .site-nav a:focus {
  border-radius: var(--border-radius-medium);
  color: var(--color-prim3);
  text-decoration: none;
  background-color: var(--color-prim3-10);
}
.current a {
  color: var(--color-prim2); /* Farbe = Rot */
}
/** 
  * Kein JavaScript? Menübutton ausblenden  
  */
.no-js .menubutton {
  display: none;
}
/** 
* Wenn JavaScript aktiviert ist:  
* - Menübutton gestalten 
* - Burger-Symbol einbauen 
*/
.js .menubutton {
  display: flex;
  justify-content: flex-end; /* Menü am rechten Rand anzeigen */
  width: 100%;
  cursor: pointer;
  background: inherit;
  font: inherit;
  font-family: "FigTree";
  color: var(--color-prim1);
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  padding: 0 1rem;
  border: 0;
  margin: 0;
}
.js .menubutton::before {
  content: url(../bilder/menuburger.svg);
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.2rem;
  margin-right: 1.00rem;
}
/**
  * Navigationsliste ausblenden 
  */
.js .site-nav img {
  max-height: 3rem;
  overflow: hidden;
}
.js .site-nav ul {
  max-height: 0;
  overflow: hidden;
  flex-flow: row-reverse; /* Reihenfolge in Navigationsleiste umdrehen */
}
/**
  * Navigationsliste einblenden 
  * Klick/Druck auf den Button fügt im HTML .showmenu hinzu 
  */
.js .showmenu + ul {
  margin-left: 6rem;
  max-height: 100rem;
  transition: max-height 0.25s ease-in-out;
  overflow: auto;
  flex-flow: column-reverse; /* Reihenfolge im Flyout umdrehen */
}
.js .showmenu.menubutton::before {
  content: url(../bilder/menuclose.svg);
}
/**
  * Horizontale Navigation für breitere Viewports  
  */
@media screen and (min-width: 1024px) {
  .menubutton {
    display: none !important;
  }
  .site-nav {
    position: sticky;
    background-color: var(--color-white);
    top: 0;
    padding-left: 1rem;
  }
  .site-nav .inside {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
  }
  .nav-links {
    flex: 34%;
  }
  .nav-links a {
    margin: 0;
    padding: 0;
  }
  .nav-rechts {
    flex: 66%;
    flow-direction: row-reverse;
  }
  .site-nav ul {
    display: flex;
    flex-flow: row-reverse;
    align-items: stretch;
    max-height: none !important;
    padding: 0;
  }
  .site-nav img {
    max-height: none !important;
	padding-top: 0.5rem;
	width: 25rem;
  }
  .site-nav > li {
    width: 100%;
    text-align: center;
    background-color: aqua;
  }
  .site-nav a {
    display: inline-block;
    margin: 0 0.5rem;
    margin-right: 0.15rem;
    font-family: "Figtree";
    font-weight: 500;
    font-size: 1.25rem;
    text-indent: 3%;
  }
  .site-nav li.last-menu-item {
    margin-right: 0; /* Menüpunkt Kontakt nach rechtsbündig ausrichten */
  }
  .site-nav a:hover, .site-nav a:hover {
    margin-bottom: none;
  }
} /* Ende @media */
/** 

/**
  * Horizontale Navigation für miitelbreite Viewports – Menüeinträge kleiner 
  */
@media screen and (min-width: 1024px) and (max-width: 1280px) {

  .site-nav a {
    display: inline-block;
    margin: 0 0.5rem;
    margin-right: 0.25rem;
    font-family: "Figtree";
    font-weight: 500;
    font-size: 1.1rem;
    text-indent: 3%;
  } 
 
  .nav-links {
    flex: 38%;
  }
  .nav-rechts {
    flex: 62%;
  }
	.site-nav img {
    max-height: none !important;
	padding-top: 0.5rem;
	width: 23rem;
  }
} /* Ende @media */
/** 
  * Ende navi-reponsiv.css 
  */