/* Gemeinsame Arbeitsdarstellung für Impressum und Datenschutzerklärung. */

@keyframes legal-page-out {
  to {
    opacity: 0;
  }
}

@keyframes legal-page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

::view-transition-old(root) {
  animation: 160ms ease both legal-page-out;
}

::view-transition-new(root) {
  animation: 320ms var(--motion-easing) both legal-page-in;
}

/* Der aktive Menüpunkt erhält dieselbe ruhige Gleitgeschwindigkeit wie das Hauptmenü. */
::view-transition-group(legal-navigation-indicator) {
  animation-duration: var(--motion-standard);
  animation-timing-function: var(--motion-easing);
}

/* Lokale Farben trennen Rechtstexte bewusst vom One-Pager, bis ihr Design final ist. */
.legal-page {
  --legal-background: #f5f5f1;
  --legal-text: #1a1a19;
  --legal-muted: #656560;
  --legal-content-max: 760px;
  --legal-inline-gutter: 64px;
  --legal-control-surface: rgb(26 26 25 / 4.5%);
  --legal-control-subtle: rgb(26 26 25 / 3.5%);
  --legal-control-hover: rgb(26 26 25 / 6%);
  --legal-control-active: rgb(26 26 25 / 8%);

  min-height: 100vh;
  background: var(--legal-background);
  color: var(--legal-text);
}

/* Die Dokumentnavigation liegt ohne eigene Leiste auf derselben Fläche wie der Inhalt. */
.legal-header {
  position: relative;
  width: 100%;
  background: transparent;
  color: var(--legal-text);
}

/* Rückweg und Dokumenttabs teilen sich eine einzige ruhige Inhaltszeile. */
.legal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(
    var(--legal-content-max),
    calc(100% - var(--legal-inline-gutter))
  );
  margin: 0 auto;
  padding-top: clamp(24px, 4vw, 40px);
}

/* Begrenzte Textbreite sorgt für gut lesbare lange Absätze. */
.legal-content {
  width: min(
    var(--legal-content-max),
    calc(100% - var(--legal-inline-gutter))
  );
  margin: 0 auto;
  padding: clamp(48px, 7vh, 80px) 0 clamp(88px, 12vh, 144px);
}

/* Große, leichte Hauptüberschrift als ruhiger Einstieg. */
.legal-content h1 {
  margin: 0 0 clamp(56px, 8vh, 88px);
  font-size: clamp(3rem, 7vw, 5.8rem);
  font-weight: 350;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* Einheitlicher Abstand zwischen allen rechtlichen Themenblöcken. */
.legal-section + .legal-section {
  margin-top: clamp(40px, 6vh, 64px);
}

/* Unterüberschriften und Fließtext bilden eine konsistente Hierarchie. */
.legal-section h2 {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
}

.legal-section p,
.legal-section address,
.legal-section li {
  color: var(--legal-muted);
  font-size: 1.05rem;
  font-style: normal;
  line-height: 1.65;
}

/* Absatz-, Listen- und Linkregeln für längere Rechtstexte. */
.legal-section p,
.legal-section address,
.legal-section ul {
  margin: 0;
}

.legal-section p + p {
  margin-top: 14px;
}

.legal-section ul {
  padding-left: 1.25em;
}

.legal-section a {
  color: var(--legal-text);
  text-decoration: underline;
  text-decoration-color: rgb(26 26 25 / 42%);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition:
    color var(--motion-fast) ease,
    text-decoration-color var(--motion-fast) ease;
}

@media (hover: hover) {
  .legal-section a:hover {
    color: var(--color-accent);
    text-decoration-color: currentcolor;
  }
}

/* Auf kleinen Geräten bleibt die Navigation bewusst in einer einzigen Zeile. */
@media (max-width: 720px) {
  .legal-page {
    --legal-inline-gutter: 32px;
  }

  .legal-header-inner {
    gap: 10px;
    padding-top: 18px;
  }

  .legal-content {
    padding-top: 36px;
  }
}

/* Reduzierte Bewegung entfernt Seiten- und Linkübergänge vollständig. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(legal-navigation-indicator) {
    animation: none;
  }

  .legal-section a {
    transition: none;
  }
}