/* Gemeinsames Layout der Themenseiten (v8.317.0).
   Bewusst eine eigene, kleine Datei statt kopiertem Inline-CSS in jeder Seite: vier Kopien desselben
   Stylesheets laufen erfahrungsgemäß nach der zweiten Änderung auseinander. Sie ist klein genug,
   dass der zusätzliche Abruf nicht ins Gewicht fällt, und wird vom Browser für alle vier Seiten
   nur einmal geholt.
   Optisch an die Landeseite des Spiels angelehnt (dunkler Grund, violetter Akzent, geschnittene
   Ecken), aber ohne deren Abhängigkeiten - diese Seiten sollen ohne JavaScript vollständig lesbar
   sein, weil genau das ihr Zweck ist. */

:root {
  --grund: #080a14;
  --flaeche: #090d1a;
  --linie: rgba(255,255,255,0.09);
  --text: #c7cbe0;
  --text-hell: #ffffff;
  --text-blass: #9296ac;
  --akzent: #8f86ea;
  --akzent-hell: #c3bef5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 20px;
  max-width: 860px; margin: 0 auto; padding: 18px 20px;
  border-bottom: 1px solid var(--linie);
}
.marke {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-hell); font-weight: 650; font-size: 15px;
  text-decoration: none; letter-spacing: -0.01em;
}
.marke-punkt {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, var(--akzent-hell), var(--akzent) 62%, #4a41a8);
  box-shadow: 0 0 10px rgba(143,134,234,0.55);
}
.kopf-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; }
.kopf-nav a { color: var(--text-blass); text-decoration: none; }
.kopf-nav a:hover { color: var(--akzent-hell); }
.kopf-nav a[aria-current="page"] { color: var(--akzent-hell); }

/* ---------------------------------------------------------------- Inhalt */
main { max-width: 760px; margin: 0 auto; padding: 34px 20px 60px; }

h1 {
  color: var(--text-hell); font-size: clamp(27px, 4.6vw, 38px);
  line-height: 1.22; letter-spacing: -0.022em; font-weight: 690;
  margin: 0 0 16px; text-wrap: balance;
}
h2 {
  color: var(--text-hell); font-size: clamp(19px, 2.6vw, 23px);
  letter-spacing: -0.015em; font-weight: 660;
  margin: 46px 0 12px; text-wrap: balance;
}
h3 {
  color: var(--akzent-hell); font-size: 16px; font-weight: 620;
  margin: 28px 0 8px;
}
p { margin: 0 0 16px; }
.lede { font-size: 17.5px; color: var(--text); margin-bottom: 26px; }
strong { color: var(--text-hell); font-weight: 620; }
a { color: var(--akzent); }
a:hover { color: var(--akzent-hell); }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 9px; }
li::marker { color: var(--akzent); }

/* Schritt-Liste der Anleitung: nummeriert, mit deutlicher Ziffer */
ol.schritte { list-style: none; padding-left: 0; counter-reset: schritt; }
ol.schritte > li {
  counter-increment: schritt; position: relative;
  padding: 16px 18px 16px 54px; margin-bottom: 12px;
  border: 1px solid var(--linie); background: var(--flaeche);
}
ol.schritte > li::before {
  content: counter(schritt);
  position: absolute; left: 16px; top: 15px;
  width: 26px; height: 26px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--akzent-hell);
  background: rgba(143,134,234,0.16); border: 1px solid rgba(143,134,234,0.4);
}
ol.schritte > li p:last-child { margin-bottom: 0; }

/* Merkkasten */
.kasten {
  border: 1px solid var(--linie); background: var(--flaeche);
  padding: 18px 20px; margin: 22px 0;
}
.kasten p:last-child { margin-bottom: 0; }

/* Auszufüllende Stelle in den Rechtstexten. Bewusst auffällig: Was hier steht, MUSS vor der
   Veröffentlichung ersetzt werden - ein Impressum mit Platzhaltern ist schlechter als eines mit
   richtigen Angaben und sieht auf den ersten Blick trotzdem fertig aus. */
.ausfuellen {
  display: inline-block; padding: 2px 9px;
  background: rgba(226,75,74,0.16); border: 1px dashed rgba(226,75,74,0.6);
  color: #ffb4b4; font-size: 0.94em;
}
.hinweis {
  border: 1px solid rgba(226,75,74,0.5); background: rgba(226,75,74,0.09);
  padding: 18px 20px; margin: 0 0 30px; color: #ffc9c9;
}
.hinweis strong { color: #fff; }
.hinweis p:last-child { margin-bottom: 0; }
.stand { color: var(--text-blass); font-size: 13.5px; margin-top: -8px; }

/* Aufruf zum Spielen */
.cta-zeile { margin: 30px 0; }
.cta {
  display: inline-block; padding: 13px 26px;
  background: rgba(143,134,234,0.16); border: 1px solid rgba(143,134,234,0.45);
  color: var(--akzent-hell); text-decoration: none;
  font-weight: 620; font-size: 15px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cta:hover { background: rgba(143,134,234,0.28); border-color: var(--akzent); color: #fff; }

.weiter { margin-top: 6px; }

/* ---------------------------------------------------------------- Bewertung (browsermmorpg.com) */
/* Die Karte kommt aus bmmo-karte.html in einem Sandkasten-Rahmen (Begruendung dort). Ihre Hoehe ist
   GEMESSEN (11.09.2026): 108 px einspaltig; sobald der Rahmen schmaler als 520 px ist, bricht die
   Karte auf eine Spalte um (base.css des Verzeichnisses) und braucht bis 210 px. main ist 760 px
   breit mit 20 px Rand je Seite - der Rahmen ist also bis 560 px Seitenbreite schmaler als 520. */
.bewertung { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--linie); }
.bewertung h2 { margin-top: 0; }
.bewertung-karte { display: block; width: 100%; height: 124px; border: 0; }
@media (max-width: 560px) { .bewertung-karte { height: 240px; } }
.bewertung-hinweis { font-size: 13px; color: var(--text-blass); }

/* ---------------------------------------------------------------- Fußzeile */
.fuss {
  max-width: 860px; margin: 0 auto; padding: 22px 20px 46px;
  border-top: 1px solid var(--linie);
  font-size: 13px; color: var(--text-blass);
}
.fuss a { color: var(--text-blass); }
.fuss a:hover { color: var(--akzent-hell); }

/* Bewegungsarme Darstellung respektieren - hier gibt es zwar keine Animation,
   aber die Übergänge oben sollen auch nicht laufen. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}