/* ==========================================================================
   Etappe 8 – Rechtsseiten (Impressum, Datenschutzerklärung)
   Gleiche Farben, Schriften und Abstände wie die Hauptseite, nur ruhiger
   gesetzt: eine Lesespalte, keine Bilder, keine Bewegung. Das Logo kommt hier
   als Maske aus der SVG-Datei, damit die Seiten nicht jedes Mal die komplette
   Signatur im Markup tragen müssen.
   ========================================================================== */

.legal__header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--header-h);
  padding-block: clamp(0.75rem, 0.55rem + 0.7vw, 1.25rem);
  background-color: var(--paper);
  border-bottom: 1px solid var(--line);
}

.legal__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

.legal__brand {
  display: block;
  width: clamp(9rem, 7.5rem + 6vw, 12rem);
  aspect-ratio: 1978 / 374;
  background-color: var(--sea);
  -webkit-mask: url("../assets/logo/signature.svg") no-repeat left center / contain;
  mask: url("../assets/logo/signature.svg") no-repeat left center / contain;
}

.legal {
  padding-block: 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-ink);
}

.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;
}