/* Hütchenspiel "Wo ist die Kugel?" – eigenständig, Präfix sp- */
.sp{
  --w:clamp(4.2rem,15vw,6rem);
  --h:clamp(5.6rem,19vw,7.6rem);
  --gap:clamp(.6rem,3vw,1.6rem);
  background:var(--grau-hell,#f2f2f0);
  border-radius:1rem;
  padding:1.5rem 1rem 1.2rem;
  text-align:center;
  color:var(--tinte,#201f1d);
}
.sp-boden{border-bottom:1px solid var(--linie,#d9d9d6);padding-bottom:.9rem}
/* Bühne: Platz für drei Hütchen nebeneinander plus Luft zum Anheben */
.sp-buehne{position:relative;width:calc(3*var(--w) + 2*var(--gap));height:calc(var(--h) + 5.5rem);margin:0 auto}
.sp-hut-wrap{
  position:absolute;bottom:0;width:var(--w);height:var(--h);
  left:calc(var(--pos,0) * (var(--w) + var(--gap)));
  filter:drop-shadow(0 .25rem .3rem rgba(0,0,0,.25));
}
.sp-kugel{
  position:absolute;left:50%;bottom:.2rem;width:1.5rem;height:1.5rem;margin-left:-.75rem;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f04b52,var(--rot,#d81e26) 55%,#8f1016);
}
.sp-hut{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:linear-gradient(90deg,#a9a9a7 0,#f8f8f8 18%,#e4e4e2 34%,#9b9a94 54%,#5a5954 70%,#8d8c87 84%,#c6c6c4 100%);
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  transform-origin:70% 100%;
  transition:transform .35s ease;
}
.sp-hut:disabled{cursor:default}
.sp-hut:not(:disabled):hover{transform:translateY(-.3rem)}
.sp-hut.offen{transform:translate(-45%,-70%) rotate(-38deg)}
/* clip-path würde einen Fokusrahmen am Hütchen abschneiden, darum Rahmen am Umschlag */
.sp-hut:focus-visible{outline:none}
.sp-hut-wrap:has(.sp-hut:focus-visible){outline:3px solid var(--rot,#d81e26);outline-offset:4px;border-radius:.3rem}
.sp-text{margin:1rem auto 0;min-height:1.7em;font-size:.95rem;color:var(--tinte-weich,#55544f)}
.sp-knopf{
  margin-top:.8rem;background:var(--rot,#d81e26);color:#fff;border:0;border-radius:.25rem;
  padding:.55rem 1.3rem;font:inherit;font-weight:600;cursor:pointer;
}
.sp-knopf:hover{background:var(--tinte,#201f1d)}
.sp-knopf[hidden]{display:none}