/*
 * header -- der Inhalt der Kopfleiste: Menüknopf links, gleich daneben der
 * Name der Anwendung (links, nicht mittig -- User, 17. September 2026),
 * rechts die Sprachwahl und der Kontoknopf. Sitzt im
 * layout__inner des layout__header und ist auf jeder Seite gleich aufgebaut,
 * egal ob Gast, angemeldeter Kunde oder Verwaltung.
 *
 * gap: 0, weil die Symbolknöpfe ihren Abstand aus dem herausgerechneten
 * Überstand ihrer unsichtbaren Trefferfläche beziehen.
 *
 * header__languages ist die Sprachwahl, ein Formular mit einem Knopf je
 * Sprache; header__language zeigt das Kürzel, header__language--current die
 * gewählte.
 */

.header {
  display: flex;
  align-items: center;
  gap: 0;
  inline-size: 100%;
  min-width: 0;
}

.header__brand {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* Der Name in der Hausfarbe (trail-style.md) */
.header__name {
  color: var(--color-primary);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-heavy);
}

/* Sehr schmal (300px): Neben Menü, Sprache und Konto passt der Name nur in normaler
   Größe in eine Zeile */
@media (max-width: 22rem) {
  .header__name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
  }
}

.header__languages {
  display: flex;
  align-items: center;
}

.header__language {
  position: relative;
  min-inline-size: 36px;
  min-height: var(--tap-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-small);
  cursor: pointer;
}

.header__language:hover {
  color: var(--color-primary);
}

/* Der Strich zwischen den Kürzeln, „DE | EN". Als eigene Linie statt als
   Rahmen, damit die Trefferfläche die volle Höhe behält */
.header__language + .header__language::before {
  content: "";
  position: absolute;
  inset-block: 30%;
  inset-inline-start: 0;
  border-inline-start: 1px solid var(--color-border-strong);
}

.header__language--current {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}