/* Kopfzeile — reduziert, aber strukturiert.

   Links die Marke, rechts drei klar getrennte Gruppen: Sprungmarken, Sprache,
   Zugang. Alle drei tragen dieselbe Pillenform, damit die Zeile als Ordnung
   liest und nicht als Aufzählung.

   Sie steht immer da und liegt fest am oberen Rand. Über dem Hero ist sie ohne
   Fläche, damit der Hero seinen Raum behält; sobald der Hero durch ist, bekommt
   sie Grund und Trennlinie, sonst stünde die Schrift ungeschützt auf dem
   Inhalt. Die Höhe ist gesetzt, nicht aus dem Innenabstand abgeleitet — der
   Hero rechnet mit ihr. */

:root { --hd-h: 78px; }

.hd {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  min-height: var(--hd-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 64px;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}

.hd.is-on,
.no-js .hd {
  border-bottom-color: rgba(var(--text-rgb), .08);
  background: rgba(var(--grund-rgb), .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Anker nicht unter die Kopfzeile springen lassen. */
.stg,
#netzwerk,
.rv { scroll-margin-top: calc(var(--hd-h) + 16px); }

/* Marke ---------------------------------------------------------------- */
.hd-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-right: auto;
  text-decoration: none;
}

.hd-logo .bt-mark { width: 28px; height: 28px; }

.hd-word {
  font-family: Syncopate, Manrope, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pale);
}

/* Sprungmarken --------------------------------------------------------- */
.hd-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  background: var(--ink-800);
  overflow-x: auto;
  scrollbar-width: none;
}

.hd-nav::-webkit-scrollbar { display: none; }

.hd-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--tx-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}

.hd-link:hover { color: var(--pale); background: var(--ink-600); }
.hd-link:focus-visible { outline: 2px solid var(--mint-300); outline-offset: 2px; }

/* Sprache — erbt die Pille aus .bt-lang, nur etwas schmaler beschriftet. */
.hd-lang { flex: 0 0 auto; }
.hd-lang .bt-lang-btn { min-width: 46px; min-height: 38px; padding: 0 12px; }

/* Zugang --------------------------------------------------------------- */
.hd-konto { position: relative; flex: 0 0 auto; }

.hd-login {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--mint-800);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--mint);
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease);
}

.hd-login:hover { background: var(--mint-800); color: var(--pale); }
.hd-login:focus-visible { outline: 2px solid var(--mint-300); outline-offset: 2px; }

.hd-login-pfeil {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}

.hd-login[aria-expanded="true"] .hd-login-pfeil { transform: translateY(1px) rotate(-135deg); }

.hd-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--ink-500);
  border-radius: var(--r-card);
  background: var(--ink-700);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

.hd-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--pale);
  text-decoration: none;
  transition: background-color .2s var(--ease);
}

.hd-menu a:hover { background: var(--ink-600); }
.hd-menu a:focus-visible { outline: 2px solid var(--mint-300); outline-offset: -2px; }

.hd-menu-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.hd-menu-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--tx-3);
}

/* Ohne JavaScript gibt es kein Aufklappen — dann stehen beide Zugaenge als
   schlichte Links nebeneinander, sonst waere der Login unerreichbar. */
.no-js .hd-login { display: none; }

.no-js .hd-menu[hidden] {
  display: flex;
  gap: 4px;
  position: static;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.no-js .hd-menu a { padding: 11px 14px; font-size: 15px; font-weight: 600; }
.no-js .hd-menu-sub { display: none; }

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1500px) { .hd { padding: 0 40px; } }

@media (max-width: 1180px) {
  .hd-link { padding: 0 14px; font-size: 14px; }
  .hd-word { display: none; }
}

@media (max-width: 900px) {
  .hd { padding: 0 24px; }
}

/* Ab hier passen Marken, Sprache und Zugang nicht mehr nebeneinander. Die
   Sprungmarken bekommen deshalb eine eigene Zeile über die volle Breite,
   statt zu einem Burger zusammenzufallen. */
@media (max-width: 760px) {
  :root { --hd-h: 112px; }
  .hd {
    flex-wrap: wrap;
    align-content: center;
    gap: 8px;
    padding: 10px 20px;
  }
  .hd-nav { order: 3; flex: 1 0 100%; }
  .hd-link { min-height: 36px; padding: 0 14px; }
  .hd-lang .bt-lang-btn { min-height: 36px; }
  .hd-login { min-height: 42px; }
  .hd-menu { top: calc(100% + 8px); }
}

@media (max-width: 400px) {
  :root { --hd-h: 106px; }
  .hd { padding: 8px 16px; gap: 6px; }
  .hd-link { padding: 0 12px; font-size: 13px; }
  .hd-login { padding: 0 16px; font-size: 14px; }
  .hd-lang .bt-lang-btn { min-width: 42px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hd, .hd-link, .hd-login, .hd-login-pfeil, .hd-menu a { transition: none; }
}