header {
  box-sizing: border-box;
  background: var(--navy-blue);
  height: 15vh; /* 160px? */
  padding: 20px var(--seiten-rand);
  width: 100%;
  overflow: hidden;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box; /* <- padding wird von 100% width abgezogen, kein Überstand seitlich */
  /* das Overlay liegt absolut ueber dem Header und erbt dessen padding nicht,
     deshalb hier dieselbe Fluchtlinie setzen */
  padding-inline: var(--seiten-rand);
}
.header-logo{
  height: 100%;
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.header-overlay img {
  height: auto;
  max-height: 100%;
  width: auto;
  display: block;  
}
/* Dreiteilige Leiste: Logo, Einordnung, Aktionen. Bleibt bewusst ein Flex-
   Container wie die zweiteilige Fassung: .header-logo bemisst seine Hoehe mit
   100%, und das ergibt nur neben einer Hoehe einen Wert. Im Flex-Layout ist
   das die des Containers (50% des Kopfes), in einem Raster waere es die
   inhaltsabhaengige Zeile - das Logo liefe dann auf seine Originalgroesse auf
   und sprengte den Kopf.

   Die Mitte sitzt mittig, weil die beiden Aussenfelder sich denselben Rest
   teilen ("flex: 1 1 0"), nicht weil sie zufaellig gleich breit waeren. */
.header-overlay--mitte {
  gap: 16px;
}

.header-overlay--mitte > .header-logo,
.header-overlay--mitte > .header-actions {
  flex: 1 1 0;
  min-width: 0;
}

.header-overlay--mitte > .header-actions {
  justify-content: flex-end;
}

.header-campus {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.header-campus:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.header-search {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  color: #000;
}
.header-search-input::placeholder {
  color: #333;
  opacity: 1;
}
.header-search-input {
  color: #000;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  width: 200px;
}
.header-search-btn {
  border: none;
  background: var(--navy-blue);
  color: #000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.login {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  white-space: nowrap;
}
.login:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

header h1 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px var(--seiten-rand);
  font-size: 2rem;
}

/* ==========================
   Mobile
   ========================== */
@media (max-width: 640px) {
  header {
    /* feste Hoehe noetig: Overlay und h1 sind absolut positioniert,
       mit height:auto wuerde der Header auf 0 zusammenfallen */
    height: 150px;
    padding: 0;
  }

  .header-overlay {
    gap: 8px;
  }

  .header-logo {
    padding: 8px 0;
    min-width: 0;
  }

  .header-actions {
    gap: 8px;
    min-width: 0;
  }

  .header-search {
    padding: 4px 4px 4px 12px;
  }

  .header-search-input {
    width: 110px;
    font-size: 16px; /* < 16px loest auf iOS Auto-Zoom beim Fokus aus */
  }

  .login {
    padding: 6px 14px;
  }

  header h1 {
    padding: 10px var(--seiten-rand);
    font-size: 1.4rem;
  }
}

/* Zu dritt wird die Leiste zu eng. Der Campus faellt als erstes weg - er
   steht auf der Seite ohnehin noch einmal in der Titelzeile, und ohne ihn
   sitzen Logo und Aktionen wieder an den Aussenkanten. */
@media (max-width: 900px) {
  .header-campus {
    display: none;
  }
}

@media (max-width: 460px) {
  .header-search {
    display: none;
  }
}