/* ══════════════════════════════════════════════════
   v2 NAVIGATION
   Header/Nav-Link/User-Avatar 1:1 aus Zeile 252-284 des Prototyps.
   Der Prototyp ist ein statischer Mockup ohne echte Unterseiten und braucht
   deshalb keine Aufklappmenues — .dropdown/.header-menu/.header-burger sind
   eigene Ergaenzungen fuer die echte App (Bestellungen/Auswertung haben
   Unterpunkte, Sprache/Nutzer brauchen ein Menue, schmale Displays brauchen
   einen Umschalter), im selben Aesthetik-Vokabular gebaut wie der Rest.
   ══════════════════════════════════════════════════ */
.header {
  position: sticky; top: 0; z-index: var(--ms-z-header);
  background: var(--ms-topbar-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--ms-border-light);
  height: var(--ms-topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--ms-space-6);
}
.header-nav { display: flex; align-items: center; gap: var(--ms-space-5); }
.header-logo { cursor: pointer; display: flex; align-items: center; margin-right: var(--ms-space-2); }
/* Feste Bildhoehe: die Datei ist groesser als die Kopfzeile hoch ist. */
.header-logo img { height: 28px; }
.header-divider { width: 1px; height: 24px; background: var(--ms-border-light); }
.nav-link {
  font-size: var(--ms-text-small);
  font-weight: var(--ms-weight-medium);
  color: var(--ms-text-secondary);
  cursor: pointer; text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--ms-transition-base);
  border: none; background: none;
  padding: 0;
}
.nav-link:hover { color: var(--ms-accent); }
.nav-link.active { color: var(--ms-text-primary); font-weight: var(--ms-weight-semibold); }
/* `.nav-link--icon` ist am 2026-09-16 entfallen: die Sprachwahl trug als
   einzige Stelle ein Symbol vor dem Wort, und das ist abbestellt. Eine Regel
   ohne Aufrufer ist genau der Rest, den designsystem.md Abschnitt 27.6
   beschreibt — sie geht mit. */

.header-right { display: flex; align-items: center; gap: var(--ms-space-4); }
/* Nutzermenue: ist ein <button> (Aufklappmenue per Tastatur bedienbar), soll
   aber wie Avatar plus Name aussehen — deshalb die Knopfoptik zuruecksetzen. */
.header-user {
  display: flex; align-items: center; gap: var(--ms-space-2);
  background: none; border: none; padding: 0;
  cursor: pointer;
}
/* `flex: none` ist hier kein Feinschliff, sondern die Rundung selbst: der
   Kreis ist ein Flex-Element in einer Zeile, die auf schmalen Schirmen nicht
   aufgeht. Ohne die Regel gibt ER nach — er ist das einzige Element ohne
   festen Inhalt — und aus 32x32 werden gemessene 24,6x32. `border-radius:
   50%` auf einem nicht-quadratischen Kasten ergibt ein Ei, kein Zeichen.
   Gemessen am 2026-09-14 bei 375px Fensterbreite. */
.user-avatar {
  flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ms-gradient);
  display: flex; align-items: center; justify-content: center; color: var(--ms-on-accent);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-semibold);
}
.user-name { font-size: var(--ms-text-small); font-weight: var(--ms-weight-medium); }

/* ── Mobiles Menue ── */
.header-burger {
  display: none;
  width: 36px; height: 36px; align-items: center; justify-content: center;
  border: 1px solid var(--ms-border-light); border-radius: var(--ms-radius-sm);
  background: transparent; cursor: pointer;
}
.header-burger .burger-icon,
.header-burger .burger-icon::before,
.header-burger .burger-icon::after {
  display: block; width: 18px; height: 2px; background: var(--ms-text-primary); border-radius: var(--ms-radius-pill);
}
.header-burger .burger-icon { position: relative; }
.header-burger .burger-icon::before { content: ''; position: absolute; top: -6px; }
.header-burger .burger-icon::after { content: ''; position: absolute; top: 6px; }

@media (max-width: 991.98px) {
  .header { flex-wrap: wrap; height: auto; padding-top: var(--ms-space-2); padding-bottom: var(--ms-space-2); }
  .header-burger { display: flex; }
  .header-menu {
    display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: var(--ms-space-3);
  }
  .header-menu.show { display: flex; padding: var(--ms-space-3) 0; }
}
@media (min-width: 992px) {
  /* .header-menu trägt zugleich `.collapse` fürs Burger-Menü unter 992px.
     Die generische Regel `.collapse:not(.show) { display:none }` (overlays.css)
     hat Spezifität 0,2,0 — eine einfache `.header-menu { display:flex }` hier
     (0,1,0) würde dagegen verlieren, unabhängig von der Ladereihenfolge.
     Deshalb hier dieselbe Spezifität (drei Klassen) für beide Collapse-
     Zustände, damit die Navigation ab 992px immer sichtbar bleibt. */
  .header-menu.collapse:not(.show),
  .header-menu.collapse.show {
    display: flex; align-items: center; gap: var(--ms-space-5);
  }
}

/* ── Dropdown (Bestellungen/Auswertung/Sprache/Nutzer) ── */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + var(--ms-space-2)); left: 0;
  z-index: var(--ms-z-dropdown);
  display: none;
  min-width: 12rem;
  margin: 0;
  padding: var(--ms-space-2) 0;
  list-style: none;
  background: var(--ms-bg-primary);
  border: 1px solid var(--ms-border-light);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-card-shadow-hover);
}
.dropdown-menu.show { display: block; }
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-item {
  display: flex; align-items: center; gap: var(--ms-space-2);
  width: 100%;
  padding: var(--ms-space-2) var(--ms-space-4);
  font-size: var(--ms-text-small);
  color: var(--ms-text-primary);
  text-align: left;
  text-decoration: none;
  background: none; border: 0;
  cursor: pointer;
}
.dropdown-item:hover { background: var(--ms-bg-secondary); color: var(--ms-text-primary); }
.dropdown-item:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: -2px; }
/* `[hidden]` BRAUCHT HIER EINE REGEL, sonst wirkt es nicht: `display: flex`
   oben schlaegt die Voreinstellung `[hidden] { display: none }` des Browsers,
   und ein ausgefilterter Eintrag bleibt stehen.

   DAS IST NICHT THEORETISCH (Befund des Betreibers, 2026-09-16): im
   Adressdialog zeigte der Zaehler nach dem Tippen von „essen" richtig
   „1 von 14" — und darunter standen unveraendert alle vierzehn. Die Regel
   stand bis dahin nur an `.select-option`, also an der engeren Klasse des
   Auswahlfeldes; wer `.dropdown-item` fuer eine eigene Liste leiht, bekam sie
   nicht mit. Sie gehoert an das Bauteil, das den Konflikt verursacht. */
.dropdown-item[hidden] { display: none; }
/* ── Zweizeiliger Eintrag ──
   Fuer eine Liste, in der jede Zeile aus einem Namen und einer Beizeile
   besteht — die gespeicherten Adressen im Bestellassistenten: oben die Firma,
   darunter die Anschrift. Einzeilig gelesen sahen fuenfzehn Adressen alle
   gleich aus.

   Die senkrechte Polsterung waechst mit: `.dropdown-item` ist auf eine Zeile
   gerechnet, zwei brauchen Luft. */
.dropdown-item--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ms-space-05);
  padding-top: var(--ms-space-3);
  padding-bottom: var(--ms-space-3);
}
.dropdown-item-title { font-weight: var(--ms-weight-medium); }
.dropdown-item-meta { font-size: var(--ms-text-caption); color: var(--ms-text-secondary); }
.dropdown-divider { height: 0; margin: var(--ms-space-2) 0; border-top: 1px solid var(--ms-border-light); }
/* Zwischenueberschrift IN einem Aufklappmenue — kein Eintrag, nur eine
   Aufschrift. Seit die Sprachwahl im Nutzermenue steht (2026-09-14), braucht
   das Menue eine Zeile, die sagt, worauf sich die zwei folgenden Eintraege
   beziehen; ohne sie stuenden dort zwei Woerter ohne Zusammenhang zwischen
   „Profil" und „Abmelden". */
.dropdown-label {
  display: flex; align-items: center; gap: var(--ms-space-2);
  padding: var(--ms-space-1) var(--ms-space-4);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-semibold);
  color: var(--ms-text-secondary);
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* Die gerade gueltige Wahl. Fett und in der Betonungsfarbe statt eines
   Hakens: ein Haken braucht eine eigene Spalte, und die muesste JEDER Eintrag
   des Menues einruecken, auch „Profil" und „Abmelden". */
.dropdown-item.is-active { font-weight: var(--ms-weight-semibold); color: var(--ms-accent); }
/* Pfeil am Aufklapp-Schalter — im Header selbst nicht gebraucht (dort oeffnen
   Icon-Knoepfe ohne Pfeil), aber fuer Dropdown-Knoepfe ausserhalb des Headers
   (z.B. "Status setzen" im Bestelldetail). */
.dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: var(--ms-space-2);
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.header .dropdown-toggle::after { content: none; }