/* Die Landingpage teilt sich die Optik mit der App: dieselbe Palette wie
   app/src/index.css, dieselben zwei Schriften, nichts ist rund. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('schriften/press-start-2p-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('schriften/vt323-latin-400-normal.woff2') format('woff2');
  font-display: swap;
}

:root {
  --grund: #0d1024;
  --flaeche: #1b2050;
  --flaeche-hell: #2a3170;
  --rand: #3d55b5;
  --rand-hell: #5c94fc;
  --schrift: #fcfcfc;
  --leise: #9aa5d8;
  --akzent: #fcd800;
  --akzent-tief: #4a3c00;
  --gut: #00b800;
  --schlecht: #e40058;
  --schatten: #05060f;
}

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

html {
  background: var(--grund);
  color-scheme: dark;
}

body {
  font-family: 'VT323', ui-monospace, 'Courier New', monospace;
  font-size: 22px;
  line-height: 1.35;
  color: var(--schrift);
  background: var(--grund);
}

/* Sprachumschaltung: die Seite trägt data-sprache, CSS blendet die jeweils
   andere Sprache aus. Kein Framework, kein Neuladen. */
[data-sprache='de'] .en {
  display: none !important;
}
[data-sprache='en'] .de {
  display: none !important;
}

.pixel {
  font-family: 'Press Start 2P', ui-monospace, monospace;
  line-height: 1.6;
}

.seite {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ------------------------------------------------------------- Kopf */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0;
}

.wortmarke {
  font-size: 14px;
  text-decoration: none;
}
.wortmarke .laber {
  color: var(--akzent);
}
.wortmarke .lobby {
  color: var(--rand-hell);
}

.sprachwahl {
  font-size: 10px;
  color: var(--leise);
  background: var(--flaeche);
  border: 3px solid var(--rand);
  padding: 10px 14px;
  cursor: pointer;
}
.sprachwahl:hover {
  background: var(--flaeche-hell);
  color: var(--schrift);
}

/* ------------------------------------------------------------- Held */

.held {
  text-align: center;
  padding: 48px 0 40px;
}

.held h1 {
  font-size: clamp(26px, 6vw, 44px);
}
.held h1 .laber {
  color: var(--akzent);
}
.held h1 .lobby {
  color: var(--rand-hell);
}

.claim {
  margin-top: 22px;
  font-size: clamp(24px, 4vw, 30px);
}

.unterclaim {
  margin-top: 8px;
  color: var(--leise);
  font-size: 21px;
}

.knopf {
  display: inline-block;
  margin-top: 30px;
  padding: 18px 34px;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--grund);
  background: var(--akzent);
  border: 4px solid var(--akzent-tief);
  box-shadow: 6px 6px 0 var(--schatten);
  text-decoration: none;
}
.knopf:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--schatten);
}

.knopf-neben {
  background: var(--flaeche);
  color: var(--schrift);
  border-color: var(--rand);
}

/* --------------------------------------------------------- Abschnitte */

.abschnitt {
  margin-top: 56px;
}

.abschnitt > h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--akzent);
  margin-bottom: 20px;
}

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.karte {
  background: var(--flaeche);
  border: 4px solid var(--rand-hell);
  box-shadow: 5px 5px 0 var(--schatten);
  padding: 18px;
}

.karte .nummer {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--akzent);
  display: inline-block;
  margin-bottom: 10px;
}

.karte h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  margin-bottom: 10px;
}

.karte p {
  color: var(--leise);
  font-size: 21px;
}

.karte .emoji {
  font-size: 26px;
  display: block;
  margin-bottom: 8px;
}

/* Nummerierte Schritte, etwa fürs Installieren und den Key-Weg. */
.schritte {
  list-style: none;
  counter-reset: schritt;
}
.schritte li {
  counter-increment: schritt;
  background: var(--flaeche);
  border: 4px solid var(--rand);
  padding: 14px 16px 14px 58px;
  margin-bottom: 10px;
  position: relative;
}
.schritte li::before {
  content: counter(schritt);
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--grund);
  background: var(--akzent);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.hinweis {
  background: var(--flaeche);
  border: 4px solid var(--akzent);
  padding: 14px 16px;
  margin-top: 14px;
}

.hinweis.warnung {
  border-color: var(--schlecht);
}

code {
  font-family: inherit;
  background: var(--flaeche-hell);
  padding: 1px 7px;
  border: 2px solid var(--rand);
}

a {
  color: var(--rand-hell);
}

.fliess p + p {
  margin-top: 12px;
}

/* --------------------------------------------------------------- Fuß */

.fuss {
  margin-top: 72px;
  padding-top: 20px;
  border-top: 4px solid var(--rand);
  color: var(--leise);
  font-size: 19px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.fuss a {
  color: var(--leise);
}

/* Unterseiten */
.inhalt h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(15px, 4vw, 20px);
  color: var(--akzent);
  margin: 36px 0 24px;
}
.inhalt h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  margin: 28px 0 12px;
}
.inhalt p,
.inhalt li {
  max-width: 70ch;
}
.inhalt ul {
  padding-left: 24px;
  margin-top: 8px;
}