/* Filename: header-menu.css */

header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-bottom: 5px;
  padding-top: 10px;
  height: 70px;
  z-index: 1000;
  width: 100%;
}

header .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1145px;
  margin: 0 auto;
  height: 100%;
  padding: 0;
  position: relative;
}

/* Logo-Einstellungen mit mehr Platz für die Breadcrumb */
header .logo-link {
  display: block;
  height: 80%; /* Verkürzung, um Platz für Breadcrumb zu lassen */
  position: relative;
  z-index: 15;
  text-decoration: none;
  margin-top: 0;
}

/* Wichtig: Diese CSS überschreibt das inline-CSS in header.php */
header .logo-link .image {
  max-height: 45px; /* Reduzierte Höhe */
  width: auto;
  margin-top: 0;
  margin-left: 15px;
}

/* Navigation anpassen */
nav {
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

#horiznav {
  height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  max-width: none;
  z-index: 40;
}

ul#horiznav, #horiznav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#horiznav > li {
  position: relative;
}

#horiznav > li > a {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  height: 25px;
  /* padding: 0 7px; */
  padding: 2vh;
  color: var(--color-primary);
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
}

#horiznav > li:first-child > a {
  color: var(--color-secondary);
}

#horiznav > li:not(:first-child) > a:hover {
  color: #595F6E;
}

#horiznav > li:first-child > a:hover {
  color: #007d86;
}

/* Desktop Dropdown-Menu */
#horiznav li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: auto;
  min-width: 200px;
  background-color: var(--color-primary);
  z-index: 41;
}

#horiznav li:hover > ul,
#horiznav li:focus-within > ul,
#horiznav li ul:hover {
  display: block;
}

#horiznav li ul li {
  width: 100%;
}

#horiznav li ul a {
  display: block;
  padding: 10px 7px;
  color: var(--color-background);
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}

#horiznav li ul a:hover {
  background-color: #DCEAF9;
  color: var(--color-primary);
}

/* Burger Menu - Base Styles */
.burger-menu {
  display: none;
}

.burger-menu-button {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.burger-menu-icon {
  width: 30px;
  height: 25px;
  position: relative;
  margin-right: 20px;
}

.burger-menu-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.burger-menu-icon span:nth-child(1) { top: 0; }
.burger-menu-icon span:nth-child(2) { top: 10px; }
.burger-menu-icon span:nth-child(3) { top: 20px; }


/* Breadcrumb Styles */

nav.breadcrumb {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  align-items: center;
  height: auto;
  width: auto;
  left: 95px;
  bottom: 0; /* Ganz unten im Header */
  z-index: 24;
  text-shadow: none;
}

nav.breadcrumb ol {
  padding: 3px 0;
  margin: 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* Linien oben und unten */
nav.breadcrumb ol:before,
nav.breadcrumb ol:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #cccccc;
}

nav.breadcrumb ol:before {
  top: 5px;
}

nav.breadcrumb ol:after {
  bottom: 4px;
}

nav.breadcrumb li {
  display: inline;
}

nav.breadcrumb a,
nav.breadcrumb [aria-current="page"] {
  color: #aaaaaa;
  text-shadow: none;
  text-decoration: none;
  font-size: 0.85em;
}

/* Alle anderen "»" normal anzeigen */
nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  content: "»";
  color: #aaaaaa;
  text-shadow: none;
}


/* Abstand nach dem ersten Element */
nav.breadcrumb li:first-child {
    margin-right: 10px;
}

/* Das erste "»" ausblenden
nav.breadcrumb li:first-child + li::before {
    display: none;
}
*/


/* Breadcrumb Lines */
.breadcrumb-line-top,
.breadcrumb-line-bottom {
  height: var(--breadcrumb-line-height);
  background-color: var(--breadcrumb-line-color);
  width: 100%;
}

@media screen and (max-width: 1145px) {
  header .header {
    width: 100%;
    padding: 0 10px;
  }
}


/* Mobile Styles */
@media screen and (max-width: 955px) {
  /* Mobile Navigation */
  body.menu-open {
    overflow: hidden;
  }

nav {
    margin: 20px 0; /* Reduzierter margin */
  }

  nav.breadcrumb {
    /*left: 95px;
    padding: 0;*/
  }

  #horiznav {
    display: none;
  }

  /* Burger Menu - Mobile Specific */
  .burger-menu {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%); /* Zentriert vertikal */
    z-index: 1002;
    width: auto;
    height: auto;
    padding-right: 10px;
  }

  /* Mobile Menu Active State */
  #horiznav.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 1000;
    padding-top: 70px;
padding-bottom: 20px;
    padding-left: 20px;
  }

  #horiznav.active > li {
    margin: 10px 0;
    text-align: left;
    width: 100%;
  }

  /* Mobile Dropdown */
  #horiznav.active li.open > a {
    font-weight: bold;
  }

  #horiznav.active li ul {
    position: static;
    background-color: transparent;
    display: none;
    width: 100%;
    padding: 20px 0 0 20px;
    z-index: 1001;
  }

  #horiznav.active li.open > ul {
    display: block;
  }

  #horiznav.active li ul a {
    background-color: #d572b4;
    color: #fff;
    font-weight: bold;   
    padding: 5px 10px;
    margin: 5px 0;
    display: block;
  }

  #horiznav.active li ul a:hover,
  #horiznav.active li ul a:focus {
    background-color: #66C5CF;
    color: black;
  }

  /* Burger Menu Animation States */
  .burger-menu.active .burger-menu-icon span:nth-child(1) {
    top: 10px;
    transform: rotate(135deg);
  }

  .burger-menu.active .burger-menu-icon span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }

  .burger-menu.active .burger-menu-icon span:nth-child(3) {
    top: 10px;
    transform: rotate(-135deg);
  }
}


/* Mobile Styles */
@media screen and (max-width: 600px) {
  /* Mobile Breadcrumb */
  nav.breadcrumb {
    width: auto;
    padding: 0;
    left: 80px;
    font-size: 0.75em;
	 top: 15px;
  }

  nav.breadcrumb ol {
    padding: 3px 0;
  }
  
  nav.breadcrumb a,
  nav.breadcrumb [aria-current="page"] {
    font-size: 0.75em;
  }

nav.breadcrumb li:first-child {
  word-break: normal;
  margin-right: 5px;
  }
nav.breadcrumb li {
  word-break: break-all;
  display: inline;
  font-size: small;
  }

  header .logo-link {
    max-width: 110px;
    z-index: 25;
    height: 75%;
  }

  
  header .logo-link .image {
    max-height: 35px;

}

/* End of: header-menu.css */