/**
 * @file
 * Styles for the navbar.
 */

.region-navbar {
  padding-top: 34px;
  padding-left: 36px;
  padding-right: 36px;
  padding-bottom: 20px;
  background: rgba(0,0,0,0.9);
  width: -webkit-fill-available;
  width: -moz-available;
  display: flex;
} 

/* Keine Anstriche für Menüs in der Navbar */
.region-navbar ul {
  list-style-type: none;
}

.site-branding__logo {
  display: inline-block;
}

/* Menüeinträge in der Navbar sollen keinen extra Abstand von oben bekommen */
.region-navbar .menu-item {
  padding-top: 0px;
}

/* Die Schriftgröße von Links soll gleich den adneren Elementen sein */
.region-navbar ul.links {
  font-size: inherit;
}

/* Aktive Menüeinträge in der Navbar sollen nicht fett sein */
.region-navbar ul.links a.is-active {
  font-weight: initial;
}

/* Aufteilung des Flex-Layouts in x gleiche Stücken */
.region-navbar .site-branding,
.region-navbar .menu--account,
.region-navbar .menu--main,
.region-navbar .block-language {
  flex: auto;
}

/* Die Verteilung der x Bereiche ein wenig verschieben, damit es mittig ist */
.region-navbar .site-branding,
.region-navbar .menu--main {
  flex-grow: 1.5;
}
.region-navbar .block-language {
  flex-grow: 0;
  padding-top: 4px;
}

/* Die normalen Menüs (Main und Benutzer), sollen bei einer Breite von 959px ausgeblendet werden */
@media (max-width: 959px) {
  .region-navbar .menu--account,
  .region-navbar .menu--main {
    display: none;
  }
}

/* Alle Texte und Links sollen weiß sein und einentransparenten Border unten haben */
.region-navbar,
.region-navbar a,
.region-navbar li {
  color: #fffeff;
}

/* Aktive Menüs sollen einen weißen Border unten haben */
.region-navbar li a.is-active,
.region-navbar li a.is-active:hover,
.region-navbar li.menu-item--active-trail a {
  color: #fffeff;
  border-bottom-color: #fffeff;
  border-bottom: 1px solid #fffeff;
  padding-bottom: 2px;
}

/* Hover sollen einen TeamRed Border unten haben */
.region-navbar li a:hover, 
.region-navbar li a:focus {
  color: #fffeff;
  border-bottom-color: #e50043;
  border-bottom: 1px solid #e50043;  
  padding-bottom: 2px;
}

/* Der Bereich des Site Branding und das Logo soll nur genau 128px x 43px sein und keinerlei Margin oder Border haben */
.region-navbar .site-branding,
.region-navbar .site-branding .site-branding__logo {
  height: 43px;
  width: 176px;
  margin: 0px;
  border: none;
}

/* Einzelne Menüeinträge sollen in einer Zeile nebeneinander und ohne Einrückung sein */
.region-navbar .menu--main li,
.region-navbar .menu--account li,
.region-navbar .block-language li {
  float: left;
}

/* Um jeden Menüeintag soll ein Abstand von 8px sein */
.region-navbar .menu--main a,
.region-navbar .menu--account a,
.region-navbar .block-language a {
  margin: 8px;
}

/* Im Main Menu und im Sprachumschalter soll einen Zwischenbalken geben (bis auf beim letzten Eintrag) */
.region-navbar .menu--main li:not(:last-child),
.region-navbar .block-language li:not(:last-child) {
  border-right: 1px solid;
}