/* Leiste im Header mit Logo, Burger, Navigation */
.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

/* Checkbox für Burger unsichtbar machen, aber fokussierbar lassen */
#nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Burger-Label */
.header-bar > .menu-toggle-label {
  order: 1;
  flex: 0 0 auto;     /* bleibt so breit wie Inhalt */
  display: flex;
  align-items: center;
  cursor: pointer;

}

/* Burger-Icon */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;

}

/* Linien des Burgers */
.burger span {
  display: block;
  height: 3px;
  background: #232323;
  border-radius: 1px;
  position: relative;

  /* Animationen für die X-Transformation */
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* Checkbox AN: Burger zu X transformieren */

/* obere Linie nach unten in die Mitte und drehen */
#nav-toggle:checked + .menu-toggle-label .burger span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

/* mittlere Linie ausblenden */
#nav-toggle:checked + .menu-toggle-label .burger span:nth-child(2) {
  opacity: 0;
}

/* untere Linie nach oben in die Mitte und drehen */
#nav-toggle:checked + .menu-toggle-label .burger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Logo-Bereich */
.header-bar > .logo {
  order: 2;
  flex: 1 1 auto;     /* füllt den Rest der Zeile */
  display: inline-flex;
  align-items: baseline;
  gap: 1em;
  color: var(--main-color);
  transition: color 0.8s ease;
  line-height: 0rem;
}

.logo img {
  height: 1.5em;
}

.logo .hover-text {
  font-size: 1rem;
  font-style: italic;
  color: #777;
}

.logo .hover-text {
  display: none;
}

.logo:hover .hover-text {
  display: block;
}

/* Farben des Logos ändern sich */ 

.logo-svg path {
  fill: var(--main-color);      /* CI-Farbe */
  transition: fill 0.8s ease;
}

.hover-text {
  color: var(--main-color);     /* CI-Farbe auch für den Text */
  transition: color 0.8s ease;
}

.logo:hover .logo-svg path,
.logo:hover .hover-text {
  animation: ci-color-pulse 8s ease-in-out infinite;
}

@keyframes ci-color-pulse {
  0%   { 
    fill:  var(--main-color);
    color: var(--main-color);
  }
  5%   { 
    fill:  rgb(0, 151, 151);
    color: rgb(0, 151, 151);
  }
  20%  { 
    fill:  rgb(40, 191, 191); 
    color: rgb(40, 191, 191);
  }
  40%  { 
    fill:  rgb(0, 121, 191);  
    color: rgb(0, 121, 191);
  }
  60%  { 
    fill:  rgb(210, 11, 91);    
    color: rgb(210, 11, 91);
  }
  80%  { 
    ffill:  rgb(171, 81, 196);    
    color: rgb(171, 81, 196);
  }
 95% { 
    fill:  rgb(0, 151, 151);   
    color: rgb(0, 151, 151);
  }
  100%   { 
    fill:  var(--main-color);
    color: var(--main-color);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Animation komplett ausschalten */
  .logo:hover .logo-svg path,
  .logo:hover .hover-text {
    animation: none;
    fill:  var(--main-color);   /* oder eine feste, barrierefreie Farbe */
    color: var(--main-color);
  }
}

/* ENDE Logo */

/* Navigation zunächst versteckt (Mobile) */
.header-bar nav {
  display: none;
  order: 3;
  flex: 0 0 100%;     /* neue Zeile, volle Breite */
}

/* Wenn Checkbox gecheckt: Menü anzeigen (Mobile) */
#nav-toggle:checked ~ nav {
  display: flex;
  order: 3;
  flex: 0 0 100%;     /* neue Zeile, volle Breite */
}

/* Navigation: Liste */
.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  text-decoration: none;
  color: var(--link);
  font-size: 0.95rem;
}
.nav-menu li {
  display: inline-block;          /* li so breit wie der Inhalt */
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

/* Wenn li gehovt oder per Tastatur fokussiert wird: Unterstreichung als Border */
.nav-menu li:hover,
.nav-menu li:focus-within {
  border-bottom-color: var(--link); /* oder eine andere Farbe */
}

/* Header-Bild */
.header-image-row img {
  width: 100%;
  height: auto;
  display: block;
}


#footer-menu a { color: var(--main-color); }


/* ---------- Desktop / größere Geräte ---------- */

@media (min-width: 576px) { /* kleine Geräte  */

  /* Burgermenü in Desktop mode ausblenden */
  #nav-toggle + label[for="nav-toggle"] {
    display: none;
  }

  /* Header bleibt einzeilig */
  .header-bar {
    display: flex;
    flex-wrap: nowrap;
  }

  /* Menü immer sichtbar in Desktop */
  .header-bar nav,
  #nav-toggle:checked ~ nav {
    display: flex;
    order: 3;
    margin-left: auto; /* schiebt die Nav ganz nach rechts */
    flex: 0 0 auto;    /* keine neue Zeile */
  }

  /* Menüeinträge nebeneinander */
  .nav-menu {
    flex-direction: row;
    gap: 1rem;
    justify-content: center; /* zentriert die Items in der Reihe */
  }

  .nav-menu li a { padding: 0 0.5rem; }

  #main-menu a:hover,
  a:active { background-color: var(--bg-hover); }



}