/* Stylesheet der Rechtsseiten (Impressum, Datenschutz).
 *
 * Bewusst eine EXTERNE Datei, anders als bei der Landingpage: dort ist das CSS
 * inline, weil ein Ads-Besucher genau eine Seite sieht und der Cache-Treffer nie
 * kommt — der render-blocking Roundtrip aber immer. Hier ist es umgekehrt: wer
 * das Impressum aufruft, hat die Datenschutzseite oft gleich mit im Blick, und
 * beide Seiten teilen sich dieselbe Datei.
 *
 * Farben sind die VS-CI aus goldankauf/index.html. Schriften bewusst vom System:
 * die Landingpage-Fonts liegen unter goldankauf/assets/ und gehoeren zur
 * Landingpage — eine Rechtsseite, die auf ein Kampagnenverzeichnis zeigt, ist
 * beim ersten Umbau kaputt. Fliesstext braucht keine Marke.
 */
:root {
  --onyx: #1f1a16;
  --onyx-2: #2a231d;
  --ivory: #fdfbf7;
  --ivory-2: #ece3d2;
  --paper: #fff;
  --gold: #ceb195;
  --gold-3: #e3d1bd;
  --gold-ink: #6b5a46;
  --ink: #1a1a1a;
  --ink-2: #4a4a4a;
  --ink-3: #6e6258;
  --line: rgba(26, 26, 26, .12);
  --line-soft: rgba(26, 26, 26, .06);
  --warn: #b58300;
}

* { 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(--ivory);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.wrap { max-width: 74ch; margin: 0 auto; padding: 0 22px; }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.kopf {
  background: linear-gradient(135deg, var(--onyx), var(--onyx-2));
  color: var(--ivory);
  padding: 30px 0 34px;
  border-bottom: 3px solid var(--gold);
}
.kopf h1 { margin: 14px 0 0; font-size: clamp(26px, 5vw, 34px); line-height: 1.15; font-weight: 700; }
.zurueck { color: var(--gold-3); text-decoration: none; font-size: 14.5px; }
.zurueck:hover { text-decoration: underline; }

/* ── Inhalt ───────────────────────────────────────────────────────────── */
main { padding: 8px 22px 72px; }
main > p:first-child { font-size: 17.5px; color: var(--ink-2); }

section { margin: 38px 0 0; scroll-margin-top: 16px; }
h2 {
  font-size: 22px; line-height: 1.25; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--gold-3); color: var(--onyx);
}
h3 { font-size: 17.5px; margin: 26px 0 6px; color: var(--gold-ink); }
p { margin: 12px 0; }
ul, ol { margin: 12px 0; padding-left: 22px; }
li { margin: 6px 0; }
a { color: var(--gold-ink); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold-ink); outline-offset: 2px; border-radius: 3px;
}
strong { color: var(--onyx); }
code {
  background: var(--ivory-2); border-radius: 4px; padding: 1px 6px;
  font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
address { font-style: normal; margin: 12px 0; line-height: 1.6; }

dl { margin: 12px 0; }
dt { font-weight: 600; color: var(--onyx); margin-top: 10px; }
dd { margin: 2px 0 0; padding: 0; color: var(--ink-2); }

/* Tabellen muessen auf dem Telefon scrollen duerfen, ohne die Seite zu kippen. */
section > table, .tabelle { display: block; overflow-x: auto; }
table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 15px; background: var(--paper); border: 1px solid var(--line);
}
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { background: var(--ivory-2); color: var(--onyx); font-weight: 600; font-size: 13.5px; }
tr:last-child td { border-bottom: 0; }

/* Offene Stellen sollen beim Korrekturlesen ins Auge springen, nicht untergehen. */
main :is(p, li, td, dd):has(+ *) { }
main p:only-child { }

/* ── Widerspruchs-Schalter ────────────────────────────────────────────── */
.schalter {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: 10px;
  padding: 18px 20px; margin: 20px 0;
}
.schalter-status { margin: 0 0 12px; font-weight: 600; color: var(--onyx); }
.schalter-status.ist-aus::before { content: "\2713\00a0"; color: #2f7d52; }
.schalter-status.ist-an::before  { content: "\25cf\00a0"; color: var(--warn); }
.schalter-btn {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--gold); color: var(--onyx);
  border: 1px solid var(--gold); border-radius: 8px;
  padding: 11px 18px; min-height: 44px;
}
.schalter-btn:hover { background: var(--gold-3); }
.schalter-hinweis { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-3); }

/* ── Fuss ─────────────────────────────────────────────────────────────── */
.fuss {
  background: var(--onyx); color: rgba(247, 243, 234, .75);
  padding: 26px 0; font-size: 14.5px; margin-top: 40px;
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; }
.fuss a { color: var(--gold-3); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss p { margin: 0; }

/* ── Offene Stellen ───────────────────────────────────────────────────────
 * Platzhalter stehen als «…» im Text. Sie sollen beim Korrekturlesen ins Auge
 * springen und im Zweifel auch einem Besucher auffallen — eine still
 * ausgelieferte Leerstelle in einer Datenschutzerklaerung ist schlimmer als
 * eine sichtbare. Wenn alle gefuellt sind, greift diese Regel nirgends mehr.
 */
main mark, main .todo {
  background: #fff3cd; border-bottom: 2px dotted var(--warn);
  color: #6b5300; padding: 0 3px; font-style: italic;
}