/* ============================================================================
   REITER — Unterseiten einer Detailseite.
   ============================================================================
   Reiter sind LINKS mit ?tab=... in der URL, kein JavaScript: damit
   funktionieren Zuruecktaste, Lesezeichen und "Link kopieren, Kollegen
   schicken". Ein Reiter, den man nicht verlinken kann, muss beim Empfaenger
   erst wieder gesucht werden.

   Zuerst stand dieses CSS im Kundendetail zwischen dem HTML. Beim zweiten
   Ort mit Reitern (Bestelldetail) waere daraus dieselbe Regel an zwei
   Stellen geworden — und zwei Stellen driften.
   ============================================================================ */

.reiter {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  /* Waagerecht rollbar fuer schmale Fenster, aber ohne sichtbare Leiste: die
     zeigte im Browser zwei Pfeile am rechten Rand, die wie Bedienung
     aussahen und keine waren. */
  overflow-x: auto;
  scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }

.reiter__link {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  /* Die eigene Linie liegt auf der Linie der Leiste, nicht darunter. */
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.reiter__link:hover { color: var(--color-text-primary); }
.reiter__link--aktiv {
  color: var(--color-brand-primary);
  border-bottom-color: var(--color-brand-primary);
}

/* Die Zahl am Reiter. Sie sagt, ob sich das Hinschauen lohnt — "Dokumente 0"
   spart den Klick, den "Dokumente" allein gekostet haette. */
.reiter__zahl {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  vertical-align: 1px;
}
.reiter__link--aktiv .reiter__zahl {
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
}