/* ==========================================================================
   Etappe 8 – Rechtsseiten (Impressum, Datenschutzerklärung)
   Gleiche Fläche, Schriften und Abstände wie die Hauptseite, nur ruhiger
   gesetzt: eine Lesespalte, keine Bilder. Die Kopfzeile ist seit 12.09.2026
   dieselbe wie auf der Startseite (css/nav.css), samt Logo, das beim Scrollen
   zusammenrückt.
   ========================================================================== */

.legal {
  /* die feste Kopfzeile liegt über dem Anfang */
  padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem)) var(--section-pad);
}

.legal__lead {
  max-width: 62ch;
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--line);
}

.legal__title {
  color: var(--heading);
  font-size: var(--step-4);
  font-variation-settings: "SOFT" 100;
}

.legal__note {
  max-width: 60ch;
  margin-top: var(--space-s);
  color: var(--fg-soft);
}

.legal__placeholder {
  max-width: 60ch;
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-media);
  color: var(--fg-soft);
}

/* Der Fließtext der Rechtstexte kommt aus dem Generator und bringt eigene
   Überschriften, Listen und Anker mit. Er wird hier nur eingekleidet. */
.legal__body {
  /* Rechtstexte sind lang. 62 Zeichen Zeilenbreite gilt hier erst recht,
     sonst verliert man beim Zeilenwechsel die Spur. */
  max-width: 62ch;
  margin-top: var(--space-2xl);
}

.legal__body h1 {
  color: var(--heading);
  font-size: var(--step-4);
  font-variation-settings: "SOFT" 100;
}

.legal__body h2 {
  margin-top: var(--space-2xl);
  color: var(--heading);
  font-size: var(--step-3);
  font-variation-settings: "SOFT" 100;
}

.legal__body h3 {
  margin-top: var(--space-xl);
  color: var(--heading);
  font-size: var(--step-2);
}

.legal__body h4 {
  margin-top: var(--space-l);
  font-family: var(--font-text);
  font-size: var(--step-0);
  font-weight: 600;
}

.legal__body p,
.legal__body ul,
.legal__body ol,
.legal__body dl {
  margin-top: var(--space-s);
}

.legal__body ul,
.legal__body ol {
  padding-left: 1.2em;
}

.legal__body li {
  margin-top: 0.35rem;
}

.legal__body li::marker {
  color: var(--brass);
}

/* Sprungmarken der Inhaltsübersicht landen unter der festen Kopfzeile */
.legal__body [id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-m));
}

.legal__body a {
  color: var(--fg);
  text-decoration-color: var(--brass);
  text-underline-offset: 0.25em;
}

.legal__body strong {
  font-weight: 600;
}

/* Die Inhaltsübersicht des Generators als ruhige Liste ohne Aufzählungszeichen. */
.legal__body ul.index {
  padding-left: 0;
  list-style: none;
}

.legal__footer {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--line);
}

.legal__footer p + p {
  margin-top: 0.5rem;
}