/* Einfache Textseiten: Impressum, Datenschutz, AGB, Erstinformation */
.legal-page { padding-block: var(--sp-8) var(--sp-9); }
.legal-page h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.legal-page h2 { font-size: var(--fs-lg); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.legal-page h3 { font-size: var(--fs-md); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.legal-page p, .legal-page li { max-width: 78ch; }
.legal-page .updated { color: var(--c-text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.todo {
  background: var(--c-cta-tint);
  border-left: 4px solid var(--c-cta);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
}
.todo strong { display: block; margin-bottom: 4px; }

/* ===========================================================================
   Vertragstexte aus vertraege/*.md
   =========================================================================== */

.vertrag h2 {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-lg);
}
.vertrag h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vertrag h3 { margin-top: var(--sp-6); font-size: var(--fs-md); }

.vertrag p, .vertrag li { max-width: 78ch; }
.vertrag ul, .vertrag ol { padding-left: 1.3em; }

/* Der Vorspann der Datei ist an den Anwalt gerichtet, nicht an Besucher —
   deshalb ruhig und abgesetzt statt als Zitat im Fliesstext. */
.vertrag blockquote {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface-soft);
  border-left: 4px solid var(--c-line-strong);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.vertrag blockquote p:last-child { margin-bottom: 0; }

.vertrag hr { margin: var(--sp-7) 0; }

.vertrag code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
  background: var(--c-surface-soft-2);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

.vertrag .table { font-size: var(--fs-sm); }
.vertrag .table-wrap { margin: var(--sp-5) 0; }

/* Offene Stellen sollen ins Auge springen. Wer über den Text liest, soll
   nicht übersehen, dass hier noch etwas fehlt. */
.md-offen {
  background: var(--c-cta-tint);
  color: #7A5200;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.md-offen strong { color: inherit; }

/* Buchstabengliederung a) b) c) aus Vertragstexten.
   Hängender Einzug, damit Folgezeilen unter dem Text stehen und nicht unter
   dem Buchstaben. */
.vertrag .md-alpha { list-style: none; padding-left: 0; margin: var(--sp-4) 0; }
.vertrag .md-alpha > li {
  display: flex;
  gap: 10px;
  margin-bottom: var(--sp-3);
  max-width: 78ch;
}
.vertrag .md-alpha__marke {
  flex: 0 0 1.6em;
  font-weight: var(--fw-bold);
  color: var(--c-brand-dark);
}