/* ============================================================
   Verflixt und zugenäht — Rechtsseiten (Impressum, Datenschutz)
   Baut auf stil.css auf (Tokens, Schriften, .buehne, .wortmarke).
   Kein Hero, kein dunkler Stoff: helles Leinen, ruhige Typografie,
   viel Luft. Wird nur von impressum.html und datenschutz.html geladen.
   ============================================================ */

/* ---------- Kopfzeile: steht im Fluss statt über dem Inhalt ----------
   .kopf aus stil.css ist absolut positioniert (für den Hero).
   Hier braucht sie ihren Platz im Dokument. */
.kopf--seite {
  position: relative;
  inset: auto;
  padding-block: var(--raum-3);
  border-bottom: 1px solid var(--linie-fein);
}

.kopf__zurueck {
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--tinte-leise);
  white-space: nowrap;
  transition: color 180ms ease-out;
}

.kopf__zurueck:hover {
  color: var(--tinte);
}

/* ---------- Der Text: schmale Spalte, ruhige Lauflänge ---------- */
.recht {
  max-width: 65ch;
  padding-block: var(--raum-5) var(--raum-6);
  font-size: var(--t-body);
  line-height: 1.65;
}

.recht h1 {
  font-size: var(--t-h2);
  line-height: 1.15;
  margin-bottom: var(--raum-4);
}

.recht h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: var(--raum-5);
  margin-bottom: var(--raum-2);
}

.recht p,
.recht ul {
  margin-bottom: var(--raum-2);
}

.recht ul {
  padding-left: 1.2em;
}

.recht li + li {
  margin-top: var(--raum-1);
}

/* Links im Fließtext: unterstrichen, damit sie als Links erkennbar sind */
.recht a {
  text-decoration: underline;
  text-decoration-color: var(--akzent-hell);
  text-underline-offset: 0.15em;
  color: var(--akzent);
}

.recht a:hover {
  color: var(--akzent-hell);
}

/* Anschrift-Block: Zeilen ohne Absatzabstand, wie auf einem Briefkopf */
.anschrift {
  font-style: normal;
  line-height: 1.55;
  margin-bottom: var(--raum-2);
}

/* Kleine Nebenzeile am Ende (Stand, Website-Hinweis) */
.recht__notiz {
  margin-top: var(--raum-5);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--linie-fein);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}

/* Platzhalter: gepunktet unterstrichen wie in stil.css —
   sichtbar, damit nichts davon versehentlich live geht */
.platzhalter {
  border-bottom: 1px dotted var(--garn);
  color: var(--tinte-leise);
}

/* ---------- Fuß: helle Variante der Fußzeile ---------- */
.fuss--seite {
  padding-block: var(--raum-4);
  border-top: 1px solid var(--linie);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}

.fuss--seite .fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-2) var(--raum-4);
}

.fuss--seite a:hover {
  color: var(--tinte);
}