/* WELTRAD – Rechtliche Seiten (Impressum, Datenschutz, Kontakt)
   Eigenes, leichtgewichtiges Stylesheet, bewusst getrennt von style.css
   (die Bühne ist für das Video gebaut, nicht für langen Lesetext).
   Gleiche Schriften und Farben wie der Rundgang, damit der Übergang ruhig
   bleibt. Keine Fremd-Requests: dieselben selbstgehosteten Fonts wie die
   Hauptseite – wichtig gerade auf der Datenschutzseite. */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/hanken-grotesk-var.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('assets/fonts/cormorant-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('assets/fonts/cormorant-italic-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-bg: #34301f;        /* einen Hauch tiefer als die Marke (#3b3527), ruhiger zum Lesen */
  --color-ivory: #f5efe3;
  --text: rgba(245, 239, 227, 0.88);
  --text-soft: rgba(245, 239, 227, 0.6);
  --rule: rgba(245, 239, 227, 0.14);
  --font-body: 'Hanken Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-display: 'Cormorant', 'Didot', Georgia, serif;
  --measure: 64ch;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 350;
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Der Lesetext ist im Rundgang ein Schleier (siehe style.css); diese Seite
   bleibt die direkt erreichbare Quelle. Inhalt und Rückweg teilen die Breite. */
.legal,
.legal-return {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* Körper */
.legal { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 9vw, 6rem); }
.legal h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3rem);
  line-height: 1.1;
  color: var(--color-ivory);
  margin: 0 0 0.6rem;
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  line-height: 1.2;
  color: var(--color-ivory);
  margin: 2.75rem 0 0.85rem;
}
.legal h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--color-ivory);
  margin: 1.6rem 0 0.5rem;
}
.legal p { margin: 0 0 1rem; }
.legal a {
  color: var(--color-ivory);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule);
  word-break: break-word;
}
.legal a:hover { text-decoration-color: currentColor; color: #fff; }
.legal ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal li { margin: 0.2rem 0; }
.legal .lead { color: var(--text); font-size: 1.12rem; }
.legal .meta { color: var(--text-soft); font-size: 0.92rem; }

/* Adressblock / Kontaktzeilen */
.legal address { font-style: normal; margin: 0 0 1rem; line-height: 1.6; }
.legal dl.contact {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  margin: 0 0 1.5rem;
}
.legal dl.contact dt { color: var(--text-soft); }
.legal dl.contact dd { margin: 0; }

/* Inhaltsübersicht */
.toc { columns: 2; column-gap: 2.5rem; }
.toc li { break-inside: avoid; }
@media (max-width: 560px) { .toc { columns: 1; } }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* Der ruhige Rückweg in den Rundgang (nur beim direkten Aufruf dieser Seite). */
.legal-return { padding-block: 0 clamp(3rem, 9vw, 6rem); font-size: 0.95rem; }
.legal-return a { color: var(--text-soft); text-decoration: none; }
.legal-return a:hover { color: #fff; }

:where(a):focus-visible {
  outline: 2px solid var(--color-ivory);
  outline-offset: 3px;
  border-radius: 2px;
}