/* Grundgestaltung für die Unterseiten „Spielerlebnis“ und „FAQ“: gleiche Farben, Schriften und Kopfzeile wie die Startseite */
:root{
  --bg:#14100c; --bg2:#1c1712; --surface:#241d16; --line:#3a2f24;
  --fg:#f4ead8; --muted:#b9a68b; --oak:#c8935a; --amber:#ffb547; --amber-soft:rgba(255,181,71,.16);
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --maxw:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.95;letter-spacing:.005em;text-wrap:balance;margin:0;text-transform:uppercase}
h2{font-size:clamp(2.4rem,5vw,3.8rem)}
h3{font-size:1.7rem;font-weight:800}
p{margin:0}
.eyebrow{font:700 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
section{padding-block:clamp(56px,8vw,100px)}
.sec-head{display:grid;gap:16px;margin-bottom:40px;max-width:780px}
a.inl{color:var(--fg);text-decoration:underline;text-decoration-color:var(--oak);text-underline-offset:3px}

.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem/1 var(--body);padding:15px 22px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--fg);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.btn:hover{border-color:var(--amber)}
.btn-primary{background:var(--amber);border-color:var(--amber);color:#1a1108;box-shadow:0 8px 30px rgba(255,181,71,.25)}
.btn-primary:hover{transform:translateY(-1px);background:#ffc56b}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(20,16,12,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.logo{display:inline-flex;align-items:center;text-decoration:none;font:900 1.9rem/1 var(--display);letter-spacing:.04em;white-space:nowrap}
.logo svg{width:.92em;height:.92em;margin-left:.03em;transform:translateY(.02em);flex:none}
.logo .lg-g{margin-left:.24em}
.top .btn{padding:11px 18px;font-size:.92rem;white-space:nowrap}
@media (max-width:440px){.top .logo{font-size:1.55rem}}

.p-hero{padding-block:56px 10px}
.p-hero h1{font-size:clamp(2.6rem,9vw,5.6rem);line-height:.9;margin-top:16px}
.p-hero .lead{margin-top:18px}

dialog.lb{border:none;padding:0;background:transparent;max-width:min(1200px,94vw);max-height:92vh}
dialog.lb::backdrop{background:rgba(8,6,4,.88)}
dialog.lb img{max-height:86vh;border-radius:10px;margin-inline:auto}
dialog.lb p{color:#fff;text-align:center;margin-top:10px;font-weight:600}
dialog.lb button{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;font:700 .9rem/1 var(--body);cursor:pointer}

.back{padding-block:60px 80px;text-align:center;display:grid;gap:18px;justify-items:center;border-top:1px solid var(--line);background:var(--bg2)}
.back .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

footer{border-top:1px solid var(--line);padding-block:44px;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}