/* Eigenes, bewusst kleines Stylesheet fuer die Rechtsseiten.
 *
 * WARUM NICHT style.css: Das Hauptstylesheet traegt die komplette App (Leaderboards,
 * Deckbuilder, Overlays) und ist entsprechend gross. Eine Rechtsseite muss dagegen
 * schnell laden, ohne JavaScript funktionieren und auch dann noch lesbar sein, wenn an
 * der App etwas kaputt ist - gerade das Impressum muss "staendig verfuegbar" sein.
 * Deshalb sind diese Seiten reines HTML mit diesem einen schlanken Stylesheet und
 * haengen an keiner Zeile Anwendungscode.
 *
 * Farben absichtlich aus der Seite uebernommen, damit es nicht wie eine fremde Seite
 * wirkt - aber ohne die Variablen von style.css zu brauchen. */
:root {
  color-scheme: dark;
  --legal-text: #e8edfb;
  --legal-panel: #141a29;
  --legal-panel-hover: #1c2436;
  --legal-border: rgba(255, 255, 255, 0.18);
  --legal-accent-hover: #f9cd52;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0f1420;
  color: #e8edfb;
  font: 15px/1.65 "Inter", system-ui, "Segoe UI", sans-serif;
}

.legal-head { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 14px 20px; }
.legal-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1000px; margin: 0 auto; }
.legal-brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--legal-text); text-decoration: none; font-weight: 750;
}
.legal-head img { border-radius: 5px; }

/* Rechteckiger Sprachschalter nach dem Muster der dunklen Kopfzeile. `details`
   funktioniert ohne JavaScript; jede Sprachfassung bleibt dadurch auch bei einem
   Skriptfehler und fuer Suchmaschinen voll erreichbar. */
.legal-language { position: relative; flex: none; }
.legal-language summary {
  min-width: 116px; padding: 7px 30px 7px 11px; border: 1px solid var(--legal-border);
  border-radius: 3px; background: var(--legal-panel); color: var(--legal-text); cursor: pointer;
  font-size: 0.82rem; font-weight: 700; list-style: none;
}
.legal-language summary::-webkit-details-marker { display: none; }
.legal-language summary::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.legal-language[open] summary::after { top: 15px; transform: rotate(225deg); }
.legal-language-menu {
  position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; min-width: 116px;
  border: 1px solid var(--legal-border); border-radius: 3px; background: var(--legal-panel);
}
.legal-language-menu a { display: block; padding: 7px 11px; color: var(--legal-text); text-decoration: none; font-size: 0.82rem; font-weight: 650; }
.legal-language-menu a:hover { background: var(--legal-panel-hover); color: var(--legal-accent-hover); }

main {
  max-width: 68ch;          /* Lesbarkeit: lange Zeilen ermueden, kurze zerhacken */
  margin: 0 auto;
  padding: 30px 20px 60px;
}

h1 { font-size: 1.6rem; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: rgba(226, 233, 248, 0.55); margin: 30px 0 8px;
}
h2:first-of-type { margin-top: 22px; }

p { margin: 0 0 12px; }
a { color: #f0a833; }
a:hover { color: #f9cd52; }

/* Anschrift und aehnliche Bloecke: Zeilenumbrueche sind hier Inhalt, keine Optik. */
address {
  font-style: normal;
  background: #141a29;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px;
}

dl { margin: 0 0 12px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
dt { color: rgba(226, 233, 248, 0.55); }
dd { margin: 0; }

.legal-note {
  color: rgba(226, 233, 248, 0.5);
  font-size: 0.86rem;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  padding-left: 12px;
  margin: 22px 0 0;
}

.legal-updated { color: rgba(226, 233, 248, 0.42); font-size: 0.82rem; margin-top: 34px; }

/* Auf schmalen Schirmen bricht die Definitionsliste in einzelne Zeilen um, sonst
   quetscht der lange USt-Wert die Beschriftung zusammen. */
@media (max-width: 480px) {
  .legal-head { padding-inline: 14px; }
  .legal-language summary, .legal-language-menu { min-width: 102px; }
  dl { grid-template-columns: 1fr; gap: 2px; }
  dt { margin-top: 8px; }
}