/* TriJong – www.trijong.com */
*{box-sizing:border-box}
:root{
  --gold-hell:#96762f; --gold:#6e5620; --gold-dunkel:#453510;
  --stein:#f7f5ef; --stein-schatten:#3a3a38;
  --rot:#b02a1e; --gruen:#0f6b5c;
  --tinte:#2b2416; --tinte-hell:#5c4d2e;
  --papier:#faf7ef; --papier-rand:#e2d9c3;
}
html{scroll-behavior:smooth; -webkit-tap-highlight-color:transparent}
body{
  margin:0; color:var(--tinte); line-height:1.6;
  font-family:'Segoe UI','Noto Sans',system-ui,sans-serif;
  background:var(--papier);
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gruen)}

/* ---------- Kopfbereich mit Goldgrund wie im Spiel ---------- */
.hero{
  color:#fdf8ea;
  background:
    radial-gradient(ellipse at 45% 18%, rgba(255,232,160,.28) 0%, rgba(255,232,160,0) 55%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.05) 0 3px, rgba(255,255,255,.03) 3px 6px),
    radial-gradient(ellipse at 50% 30%, var(--gold-hell) 0%, var(--gold) 55%, var(--gold-dunkel) 100%);
}
.hero a{color:#ffe9b0}

nav{
  max-width:1060px; margin:0 auto; padding:18px 22px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.marke{display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; color:#fff; text-decoration:none}
.marke svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
nav .links{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
nav .links a{color:#f3e6c2; text-decoration:none; font-size:15px}
nav .links a:hover{color:#fff; text-decoration:underline}

.hero-inhalt{
  max-width:1060px; margin:0 auto; padding:40px 22px 74px;
  display:grid; grid-template-columns:minmax(0,10fr) minmax(0,9fr);
  gap:48px; align-items:center;
}
@media (max-width:820px){ .hero-inhalt{grid-template-columns:1fr; padding-top:16px} }

h1{font-size:clamp(42px,7vw,64px); line-height:1.05; margin:0 0 10px; text-shadow:0 3px 8px rgba(0,0,0,.35)}
.slogan{font-size:clamp(19px,2.6vw,24px); font-weight:600; color:#ffe9b0; margin:0 0 14px}
.hero-inhalt p.text{font-size:17px; color:#f6edd6; margin:0 0 26px; max-width:46ch}

.knopfzeile{display:flex; gap:14px; flex-wrap:wrap; align-items:stretch}
.knopf{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  padding:13px 22px; border-radius:12px; font-size:17px; font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.knopf small{display:block; font-weight:400; font-size:12.5px; opacity:.85; line-height:1.25}
.knopf span{line-height:1.25}
.knopf-rot{background:linear-gradient(#c9382a,#9c2317); color:#fff; border:1px solid #7e1c12}
.knopf-rot:hover{background:linear-gradient(#d64232,#a92619)}
.knopf-bald{
  background:rgba(0,0,0,.28); color:#e8dcbc; border:1px dashed rgba(255,240,200,.5);
  cursor:default; box-shadow:none;
}
.haekchen{list-style:none; display:flex; gap:8px 22px; flex-wrap:wrap; padding:0; margin:24px 0 0; font-size:15px; color:#f3e6c2}
.haekchen li::before{content:'▲'; color:#ffce54; font-size:10px; margin-right:7px; vertical-align:2px}

/* Tablet-Rahmen um den Screenshot */
.geraet{margin:0; padding:14px; border-radius:26px;
  background:linear-gradient(160deg,#3b3b3d,#1c1c1e);
  box-shadow:0 18px 45px rgba(0,0,0,.45), inset 0 0 0 2px #4c4c4f;
}
.geraet img{border-radius:12px}

/* ---------- Inhaltsbereiche ---------- */
section{max-width:1060px; margin:0 auto; padding:58px 22px 10px}
section h2{font-size:clamp(26px,4vw,34px); margin:0 0 8px}
section h2::after{content:''; display:block; width:64px; height:4px; margin-top:10px;
  background:linear-gradient(90deg,var(--rot),#e0a52e); border-radius:2px}
.untertitel{color:var(--tinte-hell); font-size:17px; max-width:62ch; margin:14px 0 34px}

.karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px}
.karte{
  background:#fff; border:1px solid var(--papier-rand); border-radius:14px;
  padding:22px 22px 18px; box-shadow:0 2px 10px rgba(90,70,20,.07);
}
.karte h3{margin:12px 0 6px; font-size:18px}
.karte p{margin:0; font-size:15px; color:var(--tinte-hell)}
.karte .nr{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--rot); color:#fff;
  font-weight:700; font-size:17px;
}
.karte svg{display:block}

/* ---------- Download ---------- */
.download-kasten{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,232,160,.22) 0%, rgba(255,232,160,0) 60%),
    radial-gradient(ellipse at 50% 40%, var(--gold-hell) 0%, var(--gold) 60%, var(--gold-dunkel) 100%);
  color:#fdf8ea; border-radius:18px; padding:40px 30px; text-align:center;
  box-shadow:0 10px 30px rgba(70,53,16,.35); margin-top:26px;
}
.download-kasten h2::after{margin-left:auto; margin-right:auto}
.download-kasten .knopfzeile{justify-content:center; margin-top:24px}
.download-kasten p{color:#f6edd6; max-width:60ch; margin:10px auto}
details{
  max-width:640px; margin:26px auto 0; text-align:left; font-size:15px;
  background:rgba(0,0,0,.22); border-radius:10px; padding:12px 18px; color:#f3e6c2;
}
details summary{cursor:pointer; font-weight:600}
details ol{margin:10px 0 4px; padding-left:22px}
details li{margin:4px 0}

/* ---------- Fußzeile ---------- */
footer{
  margin-top:70px; background:var(--tinte); color:#cfc4a6;
  font-size:14.5px;
}
.fuss-inhalt{max-width:1060px; margin:0 auto; padding:30px 22px;
  display:flex; gap:14px 34px; flex-wrap:wrap; align-items:center}
footer a{color:#ffe9b0; text-decoration:none}
footer a:hover{text-decoration:underline}
.fuss-inhalt .abstand{flex:1}

/* ---------- Unterseiten (Datenschutz / Impressum) ---------- */
.seite{max-width:760px; margin:0 auto; padding:40px 22px 60px}
.seite h1{font-size:32px; color:var(--tinte); text-shadow:none; margin-bottom:4px}
.seite h2{font-size:22px; margin-top:32px}
.zurueck{display:inline-block; margin-bottom:26px; font-size:15px}