/* Spieleregal auf kaufkraft.at. Nur Systemschriften: Die Datenschutzerklärung
   sagt, dass keine Schriften von Dritten eingebunden sind. */
:root{
  --wand:#16383b; --wand-hell:#23524f;
  --brett:#9a6534; --brett-dunkel:#5e3a1b;
  --zettel:#f6ecd0; --zettel-tinte:#37281a;
  --schrift:#f5f0e4; --leise:#bcd1c9;
  --luecke:clamp(14px,2.4vw,30px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--schrift);
  background:radial-gradient(120% 70% at 50% 0%,var(--wand-hell),var(--wand) 70%);
  background-color:var(--wand);
  font-family:"Palatino Linotype",Palatino,"Book Antiqua","Iowan Old Style",Georgia,serif;
  font-size:17px; line-height:1.5;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
}

.kopf,.regal,.fuss{max-width:1120px; margin-inline:auto}

.kopf{padding-block:clamp(28px,6vw,64px) clamp(26px,5vw,52px)}
.kopf h1{margin:0; font-size:clamp(46px,9vw,84px); line-height:1; font-weight:700; letter-spacing:-.01em}
.kopf p{margin:.7rem 0 0; color:var(--leise); max-width:30rem}

.regal{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:var(--luecke)}

.spiel{display:flex; flex-direction:column; color:inherit; text-decoration:none; border-radius:4px}
.spiel:focus-visible{outline:3px solid var(--zettel); outline-offset:6px}

.platz{position:relative; display:block; padding:0 6% 20px 2%; perspective:900px}
.platz::after{
  content:""; position:absolute; bottom:0; height:20px;
  left:calc(var(--luecke) / -2 - 1px); right:calc(var(--luecke) / -2 - 1px);
  background:linear-gradient(var(--brett) 0 34%,var(--brett-dunkel) 34%);
}
.spiel:first-child .platz::after{left:-12px}
.spiel:last-child .platz::after{right:-12px}

.schachtel{
  display:block; width:100%; height:auto; aspect-ratio:3/4; border-radius:2px;
  background:var(--brett-dunkel);
  transform:rotateY(16deg); transform-origin:left bottom;
  box-shadow:-5px 0 0 var(--brett-dunkel),10px 6px 14px rgba(0,0,0,.45);
  transition:transform .18s ease;
}
.spiel:hover .schachtel,.spiel:focus-visible .schachtel{transform:rotateY(0) translateY(-10px)}

.zettel{
  display:block; margin:12px 4px 0; padding:.6rem .7rem .7rem; border-radius:2px;
  background:var(--zettel); color:var(--zettel-tinte); font-size:.9rem; line-height:1.35;
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.zettel b{display:block; font-size:1.2rem; line-height:1.2; margin-bottom:.15rem}

.fuss{padding-block:clamp(30px,6vw,60px) calc(28px + env(safe-area-inset-bottom,0px)); color:var(--leise); font-size:.92rem}
.fuss p{margin:0 0 1rem; max-width:32rem}
.fuss nav{display:flex; gap:1.3rem}
.fuss a{color:var(--leise)}
.fuss a:hover{color:var(--schrift)}

@media (max-width:760px){
  .regal{grid-template-columns:minmax(0,1fr); row-gap:22px}
  .spiel{position:relative; flex-direction:row; align-items:flex-end; gap:16px; padding-bottom:20px}
  .platz{flex:0 0 46%; max-width:190px; padding:0 0 0 4px}
  .platz::after,.spiel:first-child .platz::after,.spiel:last-child .platz::after{display:none}
  .spiel::after{
    content:""; position:absolute; bottom:0; left:-16px; right:-16px; height:18px;
    background:linear-gradient(var(--brett) 0 34%,var(--brett-dunkel) 34%);
  }
  .zettel{flex:1; min-width:0; margin:0 0 12px}
}

@media (prefers-reduced-motion:reduce){
  .schachtel{transition:none}
}