/* ==========================================================================
   pages/legal.css  ·  Impressum / AGB / Datenschutz  (WP-E12)
   Nuechtern: kein Fisch, kein Tiefenmesser, keine Pins, keine Deko-Welt.
   Nur sanfte Reveals (JS-armiert, siehe pages/legal.js). Lange Texte sauber,
   max-width 72ch. Diese Datei wird NUR auf den drei Legal-Seiten geladen.
   ========================================================================== */

/* Sticky-Header (72px) nicht ueber Anker-Sprungziele legen. */
html { scroll-padding-top: 6rem; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.legal {
  padding-block: clamp(5.5rem, 11vh, 8rem) clamp(4.5rem, 11vh, 7.5rem);
}
.legal__inner {
  max-width: 72ch;
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* clip (nicht hidden) verhindert horizontalen Sub-Pixel-Overflow der
     scrollbaren Tabellenkarte, ohne die Vertikal-Achse auf auto zu zwingen
     oder einen Scroll-Container fuer Anker/sticky zu etablieren. */
  overflow-x: clip;
}

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.85rem 0 1.1rem;
}
.legal__lead {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 72ch;
  margin-bottom: clamp(2.5rem, 6vh, 3.5rem);
}

/* --------------------------------------------------------------------------
   Inhaltsverzeichnis (nur Datenschutz)
   -------------------------------------------------------------------------- */
.legal__toc {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 1.25rem 1.5rem;
  margin-bottom: clamp(2.5rem, 6vh, 3.5rem);
}
.legal__toc .kicker { margin-bottom: 0.75rem; }
.legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: toc;
  font-size: 0.95rem;
}
.legal__toc li { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Textkoerper
   -------------------------------------------------------------------------- */
.legal__body {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 5.5vh, 3.25rem);
  min-width: 0;
}
/* min-width:0 erlaubt den Flex-Kindern, schmaler als ihr Inhalt zu werden,
   damit die overflow-x:auto-Tabellenkarte nicht die Seite aufweitet. */
.legal__body > section { scroll-margin-top: 6rem; min-width: 0; }

.legal__body h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-caribbean);
  margin-bottom: 1.1rem;
}
.legal__body h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.45rem;
}
.legal__body p {
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 72ch;
  margin: 0 0 0.9rem;
}
.legal__body p:last-child { margin-bottom: 0; }

.legal__body a { /* uses .link from design-system where set inline */ }

.legal__body address {
  font-style: normal;
  color: var(--text-muted);
  line-height: 1.85;
}

/* gruppierte Unterabschnitte (Datenschutz Sec. 2 / Sec. 7) */
.legal__group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Listen */
.legal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.legal__list li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.legal__list li::before {
  content: "·";
  position: absolute;
  left: 0.3rem;
  color: var(--accent-caribbean);
}
.legal__list li strong { color: var(--text-primary); font-weight: 600; }

/* Pending-Platzhalter dezent kennzeichnen, Text bleibt exakt */
.legal__pending {
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.85;
}

/* Callout (Datenschutz: sensible Mandatsdaten) */
.legal__callout {
  border: 1px solid var(--caribbean-25);
  background: var(--caribbean-15);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.legal__callout strong { color: var(--accent-caribbean); }

/* --------------------------------------------------------------------------
   KI-Tool-Tabellen (Datenschutz Sec. 3, DSGVO-Transparenz)
   -------------------------------------------------------------------------- */
.legal__tablecard {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.legal__tablecard .kicker { margin-bottom: 1rem; }
.legal__table-scroll { overflow-x: auto; max-width: 100%; }
.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 30rem;
}
.legal__table th,
.legal__table td {
  text-align: left;
  padding: 0.6rem 0.85rem 0.6rem 0;
  vertical-align: top;
}
.legal__table thead th {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
}
.legal__table tbody td {
  color: var(--text-muted);
  line-height: 1.55;
  border-bottom: 1px solid rgba(155, 163, 181, 0.08);
}
.legal__table tbody tr:last-child td { border-bottom: none; }
.legal__table .is-local { color: var(--accent-caribbean); }

/* --------------------------------------------------------------------------
   Quer-Links (zwischen den drei Seiten)
   -------------------------------------------------------------------------- */
.legal__crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Sanfte Reveals  (Initial-State NUR aktiv, wenn JS die Klasse setzt;
   ohne JS und bei reduced-motion bleibt alles sichtbar. Guide §10.6)
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}