/* Formatvorlage der Pflichtseiten (Impressum, Datenschutz).

   Eigene Datei und nicht styles.css: die grosse Vorlage stellt `html, body`
   auf `overflow: hidden`, `user-select: none` und einen Fadenkreuz-Zeiger -
   alles richtig fuer ein Spiel und alles falsch fuer eine Textseite, die man
   scrollen, markieren und kopieren koennen muss. Genau das braucht man bei
   einem Impressum: die Anschrift herausschreiben. */

:root {
  --amber: #e8b64c;
  --amber-dim: #a07c2e;
  --line: #3d444e;
  --text: #d8dde3;
  --text-dim: #8b939d;
}

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

html { background: #05070a; }

body {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% -10%, #1b232d 0%, #0a0e14 55%, #05070a 100%)
    no-repeat;
  color: var(--text);
  font-family: "Segoe UI", "Roboto Condensed", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.68;
  padding: 5vh 22px 80px;
}

main { max-width: 760px; margin: 0 auto; }

/* Kopf: dasselbe Wappen und derselbe Sperrsatz wie auf dem Titelbild - die
   Seite soll erkennbar zu diesem Spiel gehoeren und nicht wie ein
   danebengelegtes Rechtsdokument wirken. */
.legal-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 20px; margin-bottom: 32px;
  border-bottom: 1px solid rgba(232, 182, 76, .22);
}
.legal-head svg { flex: none; opacity: .82; }
.legal-head .who { font-size: 11px; letter-spacing: .28em; color: var(--amber); text-transform: uppercase; }
.legal-head .what { font-size: 11px; letter-spacing: .2em; color: var(--text-dim); text-transform: uppercase; }

h1 {
  font-size: 26px; letter-spacing: .1em; font-weight: 600;
  text-transform: uppercase; margin-bottom: 6px;
}
h2 {
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); margin: 34px 0 10px;
}
h3 { font-size: 14px; letter-spacing: .06em; margin: 22px 0 6px; color: var(--text); }

p, ul, address { margin-bottom: 12px; }
ul { padding-left: 20px; }
li { margin-bottom: 5px; }
address { font-style: normal; }

.lead { color: var(--text-dim); margin-bottom: 26px; }
.dim { color: var(--text-dim); }
strong { color: #fff; font-weight: 600; }

a { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(232, 182, 76, .3); }
a:hover, a:focus-visible { border-bottom-color: var(--amber); }

/* Hinweiskasten fuer die Stellen, an denen der Nutzer selbst noch etwas
   pruefen oder eintragen muss. Sichtbar abgesetzt, damit er beim
   Ueberfliegen nicht untergeht. */
.note {
  border-left: 2px solid var(--amber-dim);
  background: rgba(232, 182, 76, .05);
  padding: 12px 16px; margin: 20px 0;
  font-size: 14px; color: var(--text-dim);
}

.back { display: inline-block; margin-top: 40px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }

footer { margin-top: 46px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-dim); }