/*
  Die Rechtstexte.

  Eigene Datei, kein React: Impressum, Datenschutz und Widerrufsbelehrung sind
  Text, den ein Mensch liest und ein Prüfer findet — dafür 420 KB JavaScript zu
  laden wäre albern. Sie liegen als fertige HTML-Dateien unter `public/`,
  brauchen keinen Bauschritt und stehen sofort da, auch wenn das Skript der
  Hauptseite hängt.

  Die Palette ist aus `src/index.css` übernommen. Das ist eine Verdopplung, und
  zwar eine bewusste: die Alternative wäre, diese Seiten durch den Bau zu
  schicken, und das kostet mehr als die zwölf Farbwerte hier.

  Die Schriften stehen relativ (`fonts/…`). Diese Datei liegt unter /nitor/,
  also zeigt das auf /nitor/fonts/ — und bleibt richtig, falls der Unterpfad
  sich einmal ändert.
*/
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Nur für den Lizenzschlüssel auf den Dankeseiten. Geladen wird sie erst, wenn er dasteht. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --canvas: #12141a;
  --chrome: #1a1c23;
  --surface: #24262e;
  --hairline: #0e0f13;
  --edge: #363a44;
  --fg: #e6e9ed;
  --muted: #8a939e;
  --faint: #636c77;
  --accent: #34b7ce;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.bar {
  border-bottom: 1px solid var(--hairline);
  background: var(--chrome);
  padding: 1rem 1.25rem;
}

.bar-inner,
main,
footer .foot-inner {
  margin: 0 auto;
  max-width: 46rem;
}

.bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.home {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--fg);
  font-weight: 700;
  text-decoration: none;
}

.home img {
  width: 24px;
  height: 24px;
}

.switch {
  font-size: 0.85rem;
  color: var(--muted);
}

main {
  padding: 3.5rem 1.25rem 4rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.updated {
  margin: 0 0 2.5rem;
  color: var(--faint);
  font-size: 0.9rem;
}

h2 {
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 1.2rem;
}

h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1rem;
}

p,
li {
  color: var(--muted);
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
}

li {
  margin-bottom: 0.4rem;
}

strong {
  color: var(--fg);
  font-weight: 600;
}

address {
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--edge);
  background: var(--surface);
  color: var(--fg);
  font-style: normal;
  line-height: 1.55;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Das Muster-Widerrufsformular: als Formular gesetzt, damit es sich abschreiben lässt. */
.form-box {
  margin: 1.5rem 0;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--surface);
}

.form-box p {
  color: var(--fg);
}

.note {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--accent);
  background: var(--surface);
}

.note p:last-child {
  margin-bottom: 0;
}

/*
  Der eine Knopf dieser Dateien: „Für Windows herunterladen" auf den zehn
  Dankeseiten. Die Hauptseite baut ihren mit Tailwind, und der Bau reicht nicht
  bis hierher — also steht er hier noch einmal, wie die Farbwerte darüber.

  `color` muss sein: die Regel `a` weiter oben färbt jeden Verweis mit
  --accent, und auf --accent als Fläche wäre das unlesbar. Den Fokusrahmen
  erbt er von `a:focus-visible`.
*/
.button {
  display: inline-block;
  margin: 0.25rem 0 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 3px;
  background: var(--accent);
  color: var(--canvas);
  font-weight: 700;
  text-decoration: none;
}

.button:hover {
  filter: brightness(1.08);
}

/*
  Der Lizenzschlüssel auf den zehn Dankeseiten, gefüllt von `key-pickup.js`.

  `[hidden]` ausdrücklich, weil das Skript die Zustände über dieses Attribut
  umschaltet und eine `display`-Regel weiter unten es sonst stillschweigend
  aufhöbe — dann stünden „einen Moment" und der Schlüssel gleichzeitig da.

  Der Schlüssel in Festbreitenschrift und umbrechbar nur an den Bindestrichen:
  er wird abgetippt, wenn das Kopieren nicht geht, und fünf Fünfergruppen liest
  man leichter, wenn keine davon zerrissen ist.
*/
[hidden] {
  display: none !important;
}

.key {
  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.25rem;
  border-left: 2px solid var(--accent);
  background: var(--surface);
}

.key h2 {
  margin-top: 0;
}

.key p:last-child {
  margin-bottom: 0;
}

.key-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.key-line code {
  color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  /* 29 Zeichen zu 0,6 em: bei 4vw passen sie auf ein 390-px-Telefon in eine Zeile. */
  font-size: clamp(0.9rem, 4vw, 1.15rem);
  letter-spacing: 0.04em;
  overflow-wrap: normal;
  user-select: all;
}

.key-line button {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.key-line button:hover {
  background: var(--chrome);
}

.key-line button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

footer {
  border-top: 1px solid var(--hairline);
  background: var(--chrome);
  padding: 2rem 1.25rem 3rem;
}

footer p {
  margin: 0 0 0.5rem;
  color: var(--faint);
  font-size: 0.85rem;
}

footer nav a {
  margin-right: 1.25rem;
  font-size: 0.85rem;
}