/*JH CSS Datei fuer Header der Seiten  CSS-Datei */

/*header ist das direkte Kind von body (vgl. Bühler 2017, S. 50, 54) Hintergrund weiß setzen=background,  grüne Linie=border bottom, Innenabstand=adding  und Flex-Container = Logo links und Menü rechts nebeneinander. */
body > header {
  background: white;
  border-bottom: 2px solid #00A86B;
  padding: 16px 32px;
  display: flex;
}

/* Ausrichtung Logo Link ohne Unterstreichung=text decoration (vgl. Bühler 2017, S. 62); flex: 1= dehnt den Logo-Bereich aus und schiebt das Menü nach rechts (vgl. Bühler 2017, S. 72) */
.logo-header {
  text-decoration: none;
  flex: 1;
}

/*  Höhe festlegen=height, als Block=display (vgl. Bühler 2017, S. 67, 74) */
.logo-header img {
  height: 48px;
  display: block;
}

/* flex macht das Element zum Flex-Container, seine direkten Kinder stehen nebeneinander (vgl. Bühler 2017, S. 72) und padding-top Innenabstand oben für die Höhe des Logos (vgl. Bühler 2017, S. 66-67) */
.nav-startseite {
  display: flex;
  padding-top: 13px;
}

/*color= dunkelblau, kleinere Schrift, Abstand links (vgl. Bühler 2017, S. 58, 61, 62, 67) */
.nav-startseite a {
  color: #2C3E50;
  text-decoration: none;
  font-size: 0.9em;
  margin-left: 16px;
}


/* fuer schmale Bildschirme daher Logo und Menue untereinander statt nebeneinander (vgl. Bühler 2017, S. 72, 77) */
@media (max-width: 600px) {
  body > header {
    flex-direction: column;
  }
  .nav-startseite {
    padding-top: 8px;
  }
  .nav-startseite a:first-child {
    margin-left: 0;
  }
}