/* =============================================================================
   legal.css — Rechtliche Seiten (Impressum, Haftung, Datenschutz, Quellen)

   Eigene Datei, weil diese Seiten ein grundsätzlich anderes Problem lösen:
   sehr viel Fließtext, der gut lesbar und schnell überfliegbar sein muss.
   Keine Inszenierung, nur Typografie.
   ========================================================================== */

.legal {
  padding-block: calc(var(--header-h) + var(--s-9)) var(--space-section);
}

.legal__inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  gap: clamp(var(--s-7), 5vw, var(--s-10));
}

@media (min-width: 1200px) {
  .legal__inner { padding-inline-start: max(var(--space-gutter), clamp(3.5rem, 4.4vw, 5rem)); }
}

/* --- Kopfbereich --------------------------------------------------------- */
.legal__head { display: grid; gap: var(--s-4); }

.legal__title {
  font-size: var(--t-3xl);
  max-width: 20ch;
}

.legal__intro {
  max-width: var(--w-prose);
  font-size: var(--t-lg);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}

/* --- Sprungmarken -------------------------------------------------------- */
.legal__toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-5);
  border-block: var(--b-hair);
}

.legal__toc a {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
  transition: color var(--d-fast) var(--e-out);
}

.legal__toc a:hover,
.legal__toc a:focus-visible { color: var(--c-accent-soft); }

/* --- Inhalt: zweispaltig ab Tablet --------------------------------------- */
.legal__section {
  display: grid;
  gap: var(--s-5);
  padding-block: clamp(var(--s-6), 4vw, var(--s-9));
  border-block-start: var(--b-hair);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

@media (min-width: 60rem) {
  .legal__section {
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
}

.legal__section-title {
  font-size: var(--t-xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
}

@media (min-width: 60rem) {
  .legal__section-title { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

.legal__body {
  display: grid;
  gap: var(--s-5);
  max-width: 74ch;
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
}

.legal__body h3 {
  margin-block-start: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text);
}

.legal__body h3:first-child { margin-block-start: 0; }

.legal__body strong { color: var(--c-text); font-weight: var(--fw-medium); }

.legal__body ul {
  display: grid;
  gap: var(--s-2);
  padding-inline-start: var(--s-4);
}

.legal__body li { position: relative; }

.legal__body li::before {
  content: "–";
  position: absolute;
  inset-inline-start: calc(-1 * var(--s-4));
  color: var(--c-text-faint);
}

/* Anschrift und ähnliche Blöcke */
.legal__block {
  padding: var(--s-5);
  border: var(--b-hair);
  border-inline-start: 2px solid var(--c-line-accent);
  border-radius: var(--r-xs);
  background-color: rgb(11 15 22 / 0.5);
  font-style: normal;
  line-height: var(--lh-normal);
}

.legal__block strong { display: block; margin-block-end: var(--s-2); }

/* Lange URLs in den Datenschutzhinweisen dürfen umbrechen */
.legal__body a { overflow-wrap: anywhere; }