/*
 * SEANA — die statischen Seiten.
 *
 * ## Warum diese Datei existiert
 *
 * `impressum.html`, `datenschutz.html`, `partner.html`, `umfrage.html`,
 * `live.html` und `join.html` trugen bis zum 17.09.2026 **jede ihre eigene
 * Palette im Kopf**. Das ging so lange gut, wie nichts sich änderte. Dann
 * änderte sich etwas:
 *
 *   * `--ink60` stand hier bei 0,62 und erreicht damit auf `--paper` nur
 *     4,07:1 — unter WCAG AA. In der App und der Web-App sind es seit dem
 *     16./17.09. 0,68 (4,87:1). Die Pflichtseiten waren die letzte Stelle
 *     mit dem alten Wert, und Pflichtseiten sind genau die, die lesbar sein
 *     müssen.
 *   * `--aqua` stand auf `#5EEAD4`, überall sonst auf `#4ECDC4`.
 *   * Die Schrift war Inter; CI §-Vorgabe und beide Anwendungen sind auf
 *     Manrope (Display) und Outfit (Fließtext).
 *
 * Also eine Quelle für alle. Sie ist **wortgleich** zu `:root` in
 * `web-app/src/styles.css`; wer dort eine Farbe ändert, ändert sie hier mit.
 * Eine Prüfung, die das erzwingt, steht in `tests/webfarben.test.js`.
 *
 * ## Was hier NICHT hineingehört
 *
 * Seitenspezifische Bausteine — die Umfrage-Skala, die Karte in `live.html`,
 * die Crew-Kachel in `join.html`. Die bleiben in ihrer Datei. Diese hier
 * trägt die Marke und das Dokument: Farben, Schrift, Kopf, Fließtext, Fuss.
 */

:root {
  --navy: #0B2C4D;
  --navy2: #14406B;
  --teal: #00A896;
  --teal-deep: #02836F;
  --paper: #F4FAF8;
  --paper2: #E7F1EE;
  --surface: #FFFFFF;
  --ink: #123043;
  /* 0,68 und nicht 0,62 — siehe Kopf dieser Datei. */
  --ink60: rgba(18,48,67,0.68);
  --ink40: rgba(18,48,67,0.42);
  --line: #DEEBE7;
  --coral: #FF6B57;
  --aqua: #4ECDC4;
  --on-brand: #FFFFFF;
  --on-dark: #F5F2E9;
  --on-dark-72: rgba(245,242,233,0.72);

  --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-display: 'Manrope', 'Outfit', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  --radius-button: 14px;
  --radius-card: 18px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  --schatten-1: 0 1px 2px rgba(11,44,77,0.05), 0 2px 8px rgba(11,44,77,0.05);
  --schatten-2: 0 2px 6px rgba(11,44,77,0.06), 0 10px 26px rgba(11,44,77,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-deep); }

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  font-size: 11px;
  text-transform: uppercase;
}

/*
 * Der Kopf trägt die Wortmarke als Bild, nicht als Schrift. Sie liegt unter
 * `/marke/wortmarke.png` — dieselbe Datei, die die Web-App benutzt, und
 * dieselbe Zeile `filter: invert(1)`, weil die Glyphen schwarz sind und der
 * Kopf dunkel ist.
 */
.seite-kopf {
  background: linear-gradient(160deg, var(--navy), var(--navy2));
  color: var(--on-dark);
  padding: clamp(48px, 9vw, 96px) 6vw clamp(36px, 6vw, 56px);
}
/*
  Die Marke steht auf ihrer eigenen Zeile. `inline-block` allein reichte
  nicht: der Rücklink daneben ist ebenfalls inline und setzte sich neben den
  Schriftzug auf dieselbe Grundlinie — er sah aus wie ein Namenszusatz.
*/
.seite-kopf .marke { display: block; width: fit-content; }
.seite-kopf .marke img {
  width: 128px; height: auto; display: block; filter: invert(1);
}
.seite-kopf .zurueck {
  display: inline-block; margin-top: 22px;
  color: var(--aqua); text-decoration: none; font-size: 13.5px;
}
.seite-kopf .zurueck:hover { text-decoration: underline; }
.seite-kopf .mono { color: var(--aqua); margin-top: 26px; }

h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.03em;
  margin-top: 10px; line-height: 1.1;
}

main {
  max-width: 720px; margin: 0 auto;
  padding: clamp(36px, 6vw, 60px) 6vw clamp(60px, 10vw, 96px);
  line-height: 1.75; font-size: 15.5px;
}

h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.6vw, 24px); letter-spacing: -0.02em;
  margin: 38px 0 10px;
}
h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16.5px; margin: 24px 0 6px;
}

p, li { margin-bottom: 12px; color: var(--ink60); }
ul, ol { padding-left: 22px; }
strong, b { color: var(--ink); font-weight: 600; }

/* Eine Tabelle in einem Rechtsdokument muss schmal werden können. */
.tabelle-rahmen { overflow-x: auto; margin: 18px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
td { color: var(--ink60); }

.kasten {
  margin: 20px 0; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--schatten-1);
  font-size: 14.5px;
}
.kasten p:last-child { margin-bottom: 0; }

.seite-fuss {
  border-top: 1px solid var(--line);
  padding: 34px 6vw; font-size: 13.5px; color: var(--ink60);
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
}
.seite-fuss a { text-decoration: none; }
.seite-fuss a:hover { text-decoration: underline; }