:root {
  --bg: #f4f2ec;
  --fg: #1e1d1a;
  --mut: #6a675f;
  --karte: #ffffff;
  --rand: #e2ded3;
  --gruen: #2f7d3a;
  --gelb: #c98a07;
  --rot: #c0392b;
  --grau: #8a877e;
  --himmel1: #0d1b2e;
  --himmel2: #24456b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12130f;
    --fg: #ecebe4;
    --mut: #a3a095;
    --karte: #1c1d18;
    --rand: #2d2e27;
    --gruen: #5cbf68;
    --gelb: #e6b13a;
    --rot: #ef6b5b;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
code { font-family: ui-monospace, Consolas, monospace; }

.held { position: relative; overflow: hidden; color: #f3f1ea; background: linear-gradient(180deg, var(--himmel1), var(--himmel2) 75%, #3c6a8f); padding: 56px 16px 0; }
.sterne { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 20%, #fff8, transparent), radial-gradient(1px 1px at 30% 60%, #fff6, transparent), radial-gradient(1.5px 1.5px at 55% 25%, #fff9, transparent), radial-gradient(1px 1px at 75% 50%, #fff7, transparent), radial-gradient(1px 1px at 88% 15%, #fff8, transparent), radial-gradient(1px 1px at 42% 10%, #fff5, transparent); }
.held .inhalt { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.kicker { margin: 0; font-size: 14px; letter-spacing: .04em; color: #b9c8d8; }
h1 { margin: 6px 0 4px; font-size: clamp(34px, 7vw, 56px); line-height: 1.1; }
.unter { margin: 0 0 24px; color: #d3dce6; }
.insel { position: relative; display: block; width: min(420px, 90%); margin: 28px auto -6px; animation: schweben 6s ease-in-out infinite; }
@keyframes schweben { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .insel { animation: none; } }

.adresse { display: inline-flex; align-items: center; gap: 8px; background: #0006; border: 1px solid #ffffff2a; border-radius: 10px; padding: 6px 6px 6px 14px; max-width: 100%; }
.adresse code { font-size: 18px; overflow-wrap: anywhere; }
.adresse button { border: 0; border-radius: 7px; padding: 7px 12px; background: #f3f1ea; color: #1e1d1a; font: inherit; font-size: 14px; cursor: pointer; }

.status { display: flex; align-items: center; gap: 12px; text-align: left; margin: 18px auto 0; max-width: 520px; padding: 12px 16px; border-radius: 12px; background: #0005; border: 1px solid #ffffff22; }
.status strong { display: block; }
.status span#status-text { font-size: 14px; color: #c9d3dd; }
.punkt { flex: 0 0 14px; height: 14px; border-radius: 50%; background: var(--grau); }
.status-online .punkt { background: #4cd263; box-shadow: 0 0 0 4px #4cd26333; }
.status-mc_aus .punkt { background: #f1b72f; box-shadow: 0 0 0 4px #f1b72f33; }
.status-heim_weg .punkt { background: #ef5a48; box-shadow: 0 0 0 4px #ef5a4833; }
.spielerliste { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: #c9d3dd; }

main { max-width: 960px; margin: 0 auto; padding: 8px 16px 40px; }
section { padding: 28px 0 8px; }
h2 { font-size: 24px; margin: 0 0 12px; }
.schritte, .regeln { padding-left: 22px; }
.schritte li, .regeln li { margin-bottom: 8px; }
.knopf { display: inline-block; background: var(--gruen); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 9px; font-weight: 600; }
.karten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.karten article { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; }
.karten h3 { margin: 0 0 6px; font-size: 17px; }
.karten p { margin: 0; color: var(--mut); font-size: 15px; }
.klein { font-size: 14px; color: var(--mut); }
footer { border-top: 1px solid var(--rand); padding: 16px; text-align: center; font-size: 13px; color: var(--mut); }