/* Öffentliche Startseite von RLGame (04.11.2026). Farben des Spiels, Schriften Fredoka (Anzeige) und Nunito (Text). */
:root {
  --grund: #eef8fd; --flaeche: #ffffff; --tinte: #1f3a5f; --tinte-2: #4a6585; --linie: #cfe6f3;
  --r: #e8457a; --l: #3a9a4a; --g: #ff7a1a; --akzent: #e8457a; --akzent-tief: #b8235a; --akzent-text: #ffffff;
  --schatten: rgba(31, 58, 95, .12);
  --anzeige: "Fredoka", "Nunito", system-ui, sans-serif;
  --text: "Nunito", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark; --grund: #0d1c30; --flaeche: #15304f; --tinte: #eaf4ff; --tinte-2: #a9c0d8; --linie: #24476d;
  --r: #ff6b9a; --l: #6fd47e; --g: #ff9a4d; --akzent: #ff6b9a; --akzent-tief: #c23d6b; --akzent-text: #1a0c14; --schatten: rgba(0, 0, 0, .35); } }
:root[data-theme="dark"] {
  color-scheme: dark; --grund: #0d1c30; --flaeche: #15304f; --tinte: #eaf4ff; --tinte-2: #a9c0d8; --linie: #24476d;
  --r: #ff6b9a; --l: #6fd47e; --g: #ff9a4d; --akzent: #ff6b9a; --akzent-tief: #c23d6b; --akzent-text: #1a0c14; --schatten: rgba(0, 0, 0, .35); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--grund); color: var(--tinte); font-family: var(--text); font-size: 17px; line-height: 1.6; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.kopf, main, .fuss { max-width: 1080px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: max(16px, env(safe-area-inset-top, 0px)) 8px; }
.marke { font-family: var(--anzeige); font-weight: 700; font-size: 2rem; letter-spacing: -.5px; text-decoration: none; }
.marke .r { color: var(--r); } .marke .l { color: var(--l); } .marke .g { color: var(--g); }

.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--akzent); color: var(--akzent-text); font-family: var(--anzeige); font-weight: 600; font-size: 1.05rem;
  text-decoration: none; box-shadow: 0 4px 0 var(--akzent-tief); border: 0; cursor: pointer; }
.knopf:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--akzent-tief); }
.knopf.klein { min-height: 42px; padding: 0 18px; font-size: .95rem; }
.knopf.zweit { background: var(--flaeche); color: var(--tinte); box-shadow: inset 0 0 0 2px var(--linie), 0 4px 0 var(--linie); }
.knopf:focus-visible, .kopieren:focus-visible, .fuss a:focus-visible { outline: 3px solid var(--g); outline-offset: 3px; }

.held { display: grid; gap: 28px; padding-block: 28px 8px; }
.eyebrow { margin: 0 0 6px; font-family: var(--anzeige); font-weight: 600; color: var(--g); letter-spacing: .5px; }
h1, h2, h3 { font-family: var(--anzeige); text-wrap: balance; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 700; max-width: 18ch; }
.lede { font-size: 1.15rem; color: var(--tinte-2); max-width: 54ch; margin: 14px 0 0; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hinweis { margin: 14px 0 0; font-weight: 700; color: var(--l); }
.held-bild { border-radius: 22px; width: 100%; }

.video { padding-block: 20px; }
.video video { width: 100%; border-radius: 22px; background: #0b1626; box-shadow: 0 10px 0 var(--schatten), 0 30px 60px var(--schatten); }

.block { padding-block: 34px; }
.block h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 600; margin-bottom: 18px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.kachel { background: var(--flaeche); border-radius: 22px; padding: 20px 22px; box-shadow: inset 0 0 0 2px var(--linie); min-width: 0; }
.kachel h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; }
.kachel p { margin: 0; color: var(--tinte-2); }
.welten { margin-top: 22px; border-radius: 22px; width: 100%; }
.punkte { margin: 0; padding-left: 22px; display: grid; gap: 10px; max-width: 70ch; }
.dabei p { max-width: 62ch; }
.adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--anzeige); font-size: 1.25rem; font-weight: 600; }
.kopieren { font: inherit; font-size: .9rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--flaeche); color: var(--tinte); box-shadow: inset 0 0 0 2px var(--linie); }
.fuss { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding-block: 30px max(30px, env(safe-area-inset-bottom, 0px));
  color: var(--tinte-2); font-size: .95rem; }

@media (min-width: 860px) { .held { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .knopf:active { transform: none; } }