/*
  legal.css
  Gestaltung der Rechtstexte: /terms, /privacy, /imprint

  ─── Dieselbe Sprache wie die App ──────────────────────────────────

  Farben, Schriften und Maße stammen aus `Theme` im iOS-Projekt. Wer von
  der Ausweichseite hierher klickt, soll nicht das Gefühl haben, die
  Domain gewechselt zu haben.

  ─── Warum durchgehend dunkel ──────────────────────────────────────

  Kein `prefers-color-scheme`. Die App ist durchgehend dunkel; eine
  Seite, die je nach Systemeinstellung anders aussieht, wäre die einzige
  Stelle, an der die Marke schwankt.

  ─── Ein Zugeständnis an die Lesbarkeit ────────────────────────────

  Fließtext bleibt in der Systemschrift. Bricolage Grotesque trägt
  Überschriften; über mehrere Absätze Kleingedrucktes gelesen, ermüdet
  eine ausgeprägte Schrift. Rechtstexte werden lang gelesen — das ist
  der eine Ort, an dem Lesbarkeit vor Auftritt geht.
*/

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #0F141A;
  --slate: #1A222B;
  --slate-raised: #232D38;
  --signal: #F2A33C;
  --paper: #F3EFE7;
  --dim: #8C97A3;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 32px 24px 80px;
  background: var(--ink);
  color: var(--paper);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 44rem; margin: 0 auto; }

/* ── Kopfzeile ───────────────────────────────────────────────────── */

nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 2.4em;
  font-size: 0.9rem;
}
nav a { color: var(--dim); text-decoration: none; }
nav a:hover { color: var(--paper); }

/* Der erste Verweis ist die Wortmarke, nicht ein Menüpunkt unter
   vielen. */
nav a:first-child {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-right: 6px;
}
nav a:first-child::after {
  content: ".";
  color: var(--signal);
}

/* ── Überschriften ───────────────────────────────────────────────── */

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin: 0 0 8px;
}

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 2.4em 0 0.5em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: none; padding-top: 0; }

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.8em 0 0.4em;
  color: var(--paper);
}

/* ── Fließtext ───────────────────────────────────────────────────── */

p, li { color: var(--paper); }
ul { padding-left: 1.2em; }
li { margin: 0.35em 0; }
strong { font-weight: 600; }

/* Datumszeile unter dem Titel: klein und gesperrt, wie die
   Beschriftungen in der App. */
.meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 2.6em;
}

/* Hervorhebung mit einseitigem Rand — deshalb ohne Eckenrundung, die
   dort immer schief aussieht. */
.note {
  border-left: 3px solid var(--signal);
  background: rgba(242, 163, 60, 0.07);
  padding: 0.9em 1.1em;
  margin: 1.6em 0;
  color: var(--dim);
  font-size: 0.95rem;
}

a { color: var(--signal); text-underline-offset: 3px; }

/* ── Sprachumschalter ────────────────────────────────────────────── */

.langbar { display: flex; gap: 8px; margin: 0 0 2.4em; }
.langbar button {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--dim);
  padding: 7px 15px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.langbar button:hover { color: var(--paper); }
.langbar button[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  font-weight: 600;
}
.langbar button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

[data-lang] { display: none; }
[data-lang].active { display: block; }

/* ── Fußzeile ────────────────────────────────────────────────────── */

footer {
  margin-top: 4em;
  padding-top: 1.6em;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.85rem;
}
footer a { color: var(--dim); }
footer a:hover { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .langbar button { transition: none; }
}