:root{
  --rind:#000000;
  --rind-2:#000000;
  --leaf:#17885A;
  --flesh:#FF6F61;
  --pale:#EDF4EF;
  --seed:#8AA096;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--rind);
  color:var(--pale);
  font-family:'Sora',system-ui,sans-serif;
  font-size:17px;line-height:1.65;font-weight:300;
  min-height:100svh;
  display:flex;flex-direction:column;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--flesh)}
:focus-visible{outline:2px solid var(--flesh);outline-offset:4px}
.shell{width:min(100% - 40px, 940px);margin-inline:auto}

/* ---------- hero ---------- */
.hero{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:88px 20px 96px;
}
.hero h1{margin:0;width:min(680px,88%)}
.logo{width:100%}
.line{
  margin-top:40px;
  max-width:34ch;
  color:var(--seed);
  font-size:clamp(1rem,2.4vw,1.15rem);
  text-wrap:balance;
}
.line em{font-style:normal;color:var(--pale)}

/* ---------- rind edge before the game band ---------- */
.rind{height:3px;background:var(--leaf)}
.rind-inner{height:2px;background:#B9D6C4;opacity:.22}

/* ---------- game band ---------- */
.band{background:var(--rind-2);padding:56px 0}
.game{
  display:flex;align-items:center;gap:38px;flex-wrap:wrap;
}
.game-art{width:min(280px,60%);flex:none}
.game-text{flex:1 1 320px}
.kicker{color:var(--flesh);font-size:.85rem;letter-spacing:.06em}
.game-text h2{
  font-size:clamp(1.5rem,3.6vw,2rem);font-weight:600;line-height:1.2;
  margin:6px 0 12px;
}
.game-text p{color:var(--seed);max-width:48ch}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:16px}
.facts li{font-size:.8rem;color:var(--pale);border:1px solid #1f3a2d;border-radius:999px;padding:4px 12px}
.cta{
  display:inline-block;margin-top:22px;
  background:var(--flesh);color:#2A0E0A;
  font-weight:600;font-size:.95rem;
  text-decoration:none;
  padding:13px 24px;border-radius:999px;
  transition:background .15s ease;
}
.cta:hover{background:#FF8A7E}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ctas .cta{margin-top:0;display:inline-flex;align-items:center;gap:9px}
.cta svg{width:19px;height:19px;flex:none}
.cta-ghost{background:transparent;color:var(--pale);box-shadow:inset 0 0 0 1.5px var(--leaf)}
.cta-ghost:hover{background:rgba(23,136,90,.18)}

/* ---------- footer ---------- */
footer{padding:34px 0 44px;font-size:.88rem;color:var(--seed)}
footer .shell{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px}
footer .links{display:flex;flex-wrap:wrap;gap:6px 22px}
footer a{color:var(--seed);text-decoration:none;border-bottom:1px solid rgba(255,111,97,.5)}
footer a:hover{color:var(--flesh)}

/* ---------- legal pages (Impressum / Datenschutz) ---------- */
.legal-top{padding:22px 0;border-bottom:1px solid #1f3a2d}
.legal-top .shell{display:flex;align-items:center;justify-content:space-between;gap:16px}
.legal-top img{width:150px}
.legal-top a.back{font-size:.9rem;text-decoration:none}
.legal{flex:1;padding:56px 0 40px}
.legal .shell{max-width:760px}
.legal h1{font-size:clamp(1.7rem,5vw,2.4rem);font-weight:600;line-height:1.2;margin-bottom:28px}
.legal h2{font-size:1.15rem;font-weight:600;margin:38px 0 10px}
.legal h3{font-size:1rem;font-weight:600;color:var(--flesh);margin:24px 0 8px}
.legal p,.legal li{color:var(--seed);margin-bottom:12px;max-width:70ch}
.legal strong{color:var(--pale);font-weight:600}
.legal ul{padding-left:22px}
.legal address{font-style:normal;color:var(--pale);line-height:1.75}
.legal .stand{font-size:.85rem;margin-top:40px}
/* Placeholders that MUST be filled before going live. Loud on purpose. */
.todo{background:#FF4D6D;color:#fff;padding:0 5px;border-radius:2px;font-weight:600}

/* ---------- 404 ---------- */
.lost{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding:40px 20px}
.lost h1{font-size:clamp(1.8rem,6vw,3rem);font-weight:600}
.lost p{color:var(--seed)}

/* ---------- one load sequence ---------- */
@keyframes press{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero .logo{animation:press .6s cubic-bezier(.2,.8,.3,1) both}
.line{animation:rise .5s ease-out .38s both}

@media (max-width:640px){
  .hero{padding:64px 20px 72px}
  .band{padding:44px 0}
  .game{gap:24px}
  .game-art{width:min(220px,70%)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}