/* Gemeinsame Navigation der beiden Rechtstextseiten. */

/* Der Zweifach-Umschalter verbindet nur die beiden zusammengehörigen Rechtstexte. */
.legal-page-navigation {
  --active-index: 0;

  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
  width: clamp(190px, 18vw, 216px);
  min-width: 0;
  min-height: 38px;
  padding: 2px;
  border-radius: var(--radius-navigation);
  background: var(--legal-control-surface);
  isolation: isolate;
}

.legal-page--privacy .legal-page-navigation {
  --active-index: 1;
}

/* Das echte Element kann bei unterstützten Browsern zwischen Dokumenten gleiten. */
.legal-navigation-indicator {
  position: absolute;
  z-index: 0;
  inset: 2px auto 2px 2px;
  width: calc((100% - 4px) / 2);
  border-radius: var(--radius-navigation);
  background: rgb(255 255 255 / 70%);
  pointer-events: none;
  transform: translateX(calc(var(--active-index) * 100%));
  transition: transform var(--motion-standard) var(--motion-easing);
  view-transition-name: legal-navigation-indicator;
}

/* Beide Rechtstexte bleiben gleich groß und eindeutig beschriftet. */
.legal-page-navigation a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--control-min-size);
  margin-block: -5px;
  padding: 0 10px;
  border-radius: var(--radius-navigation);
  color: var(--legal-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition:
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.legal-page-navigation a[aria-current="page"] {
  color: var(--legal-text);
  font-weight: 650;
}

/* Hover- und Presszustände geben Rückmeldung, ohne den aktiven Zustand zu übermalen. */
@media (hover: hover) {
  .legal-page-navigation a:not([aria-current="page"]):hover {
    color: var(--legal-text);
  }
}

.legal-page-navigation a:active {
  opacity: 0.68;
}

/* Die sichtbare Fläche bleibt kleiner als die 44-Pixel-Klickfläche des Rückwegs. */
.legal-home-link {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  isolation: isolate;
  min-height: var(--control-min-size);
  padding: 0 11px 0 10px;
  color: var(--legal-muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition:
    color var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-easing);
}

/* Die dezente Fläche ordnet den Rückweg ein, ohne mit dem Rechtsseiten-Umschalter zu konkurrieren. */
.legal-home-link::before {
  position: absolute;
  z-index: -1;
  inset: 4px 0;
  border-radius: var(--radius-navigation);
  background: var(--legal-control-subtle);
  content: "";
  transition: background-color var(--motion-fast) ease;
}

/* Das spiegelsymmetrische Chevron ist kleiner als die nebenstehende Beschriftung. */
.legal-home-icon {
  width: 7px;
  height: 11px;
  overflow: visible;
  fill: currentcolor;
  transition: transform var(--motion-fast) var(--motion-easing);
}

.legal-home-label--short {
  display: none;
}

@media (hover: hover) {
  .legal-home-link:hover {
    color: var(--legal-text);
  }

  .legal-home-link:hover::before {
    background: var(--legal-control-hover);
  }

  .legal-home-link:hover .legal-home-icon {
    transform: translateX(-1px);
  }
}

.legal-home-link:active {
  color: var(--legal-text);
  transform: scale(0.985);
}

.legal-home-link:active::before {
  background: var(--legal-control-active);
}

/* Sehr schmale Geräte erhalten eine eigene kompakte, weiterhin einzeilige Fassung. */
@media (max-width: 420px) {
  .legal-page-navigation a {
    padding: 0 6px;
    font-size: 0.72rem;
  }

  .legal-home-link {
    font-size: 0.76rem;
  }

  .legal-home-label--long {
    display: none;
  }

  .legal-home-label--short {
    display: inline;
  }
}

/* Tablet und Mobil reduzieren nur die Tabbreite, nicht die Informationsordnung. */
@media (max-width: 720px) {
  .legal-page-navigation {
    width: min(190px, calc(100vw - 122px));
  }
}

/* Alle Zustände bleiben bei reduzierter Bewegung direkt und eindeutig. */
@media (prefers-reduced-motion: reduce) {
  .legal-navigation-indicator,
  .legal-page-navigation a,
  .legal-home-link,
  .legal-home-link::before {
    transition: none;
  }

  .legal-home-link:hover,
  .legal-home-link:active {
    transform: none;
  }

  .legal-home-icon {
    transition: none;
  }
}