.kerker {
  position: fixed; inset: 0; z-index: 37; overflow: hidden;
  background: transparent; touch-action: none; user-select: none; -webkit-user-select: none;
}
.kerker.bereit { background: #000; }
.kr-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab;
  filter: blur(7px) brightness(0.7); transition: filter 3.2s ease-out;
}
.kerker.wach .kr-bild { filter: none; }
.kr-bild.schaut { cursor: grabbing; }
.kr-bild.greifbar { cursor: pointer; }

.kr-dunkel {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.72) 100%);
}
.kr-korn {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.32; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0.9 -0.38'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
}

.kr-tasche {
  position: absolute; z-index: 5; left: 50%; bottom: var(--kr-unten, 48px); translate: -50% 0;
  display: flex; gap: 8px; padding: 6px; border-radius: 12px;
  background: rgba(10, 8, 6, 0.55); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
.kr-tasche.leer { display: none; }
.kr-fach {
  position: relative; width: 60px; height: 60px; padding: 0; border-radius: 8px; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, rgba(60, 46, 32, 0.9), rgba(24, 18, 12, 0.95));
  border: 1px solid rgba(160, 130, 90, 0.35);
}
.kr-fach img { display: block; width: 100%; height: 100%; pointer-events: none; }
.kr-fach i {
  position: absolute; left: 5px; top: 3px; font: 600 10px/1 system-ui, sans-serif; font-style: normal;
  color: rgba(225, 205, 170, 0.5);
}
.kr-fach.gewaehlt { border-color: #d7a84a; box-shadow: 0 0 0 2px rgba(215, 168, 74, 0.45), inset 0 0 12px rgba(215, 168, 74, 0.25); }
.kr-fach:focus-visible { outline: 2px solid #f1d08a; outline-offset: 2px; }

.kr-stick {
  position: absolute; z-index: 5; width: 104px; height: 104px; margin: -52px 0 0 -52px; display: none;
  border-radius: 50%; border: 2px solid rgba(255, 240, 220, 0.28); background: rgba(0, 0, 0, 0.2); pointer-events: none;
}
.kr-stick.an { display: block; }
.kr-stick i {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(255, 240, 220, 0.35); translate: var(--sx, 0) var(--sy, 0);
}

.kr-hilfe {
  position: absolute; z-index: 5; left: 50%; bottom: calc(var(--kr-unten, 48px) + 84px); translate: -50% 0;
  width: min(300px, 60vw); opacity: 0; transition: opacity 1.2s ease; pointer-events: none;
}
.kr-hilfe svg { display: block; width: 100%; }
.kerker.hilfe .kr-hilfe { opacity: 0.85; }

.kr-lid { position: absolute; left: 0; right: 0; height: 51%; z-index: 8; background: #000; pointer-events: none; }

.kerker:not(.bereit) .kr-lid { opacity: 0; }
.kr-lid-o { top: 0; border-radius: 0 0 50% 50% / 0 0 18% 18%; }
.kr-lid-u { bottom: 0; border-radius: 50% 50% 0 0 / 18% 18% 0 0; }
.kerker.wach .kr-lid-o { animation: kr-auf-o 3s ease-in-out forwards; }
.kerker.wach .kr-lid-u { animation: kr-auf-u 3s ease-in-out forwards; }
@keyframes kr-auf-o { 0% { translate: 0 0; } 28% { translate: 0 -55%; } 42% { translate: 0 -12%; } 100% { translate: 0 -105%; } }
@keyframes kr-auf-u { 0% { translate: 0 0; } 28% { translate: 0 55%; } 42% { translate: 0 12%; } 100% { translate: 0 105%; } }

.kr-vorhang { position: absolute; inset: 0; z-index: 9; background: #000; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.kerker.zu .kr-vorhang { opacity: 1; }
.kr-licht {
  position: absolute; inset: 0; z-index: 10; opacity: 0; transition: opacity 1.8s ease-in; pointer-events: none;
  background: radial-gradient(ellipse at 60% 50%, #fffaf0 0%, #f4e6cc 60%, #d9c7a6 100%);
}
.kerker.raus .kr-licht { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .kerker.wach .kr-lid-o, .kerker.wach .kr-lid-u { animation-duration: 0.01s; }
}
html.handy .kr-fach { width: 52px; height: 52px; }

html.handy .kr-hilfe { inset: 0; width: auto; translate: none; bottom: 0; }
html.handy .kr-h-daumen { position: absolute; left: 9vw; bottom: 22vh; width: 92px; }
html.handy .kr-h-wisch { position: absolute; right: 12vw; top: 40vh; width: 150px; }
.kr-h-knopf { animation: kr-schieb 1.8s ease-in-out infinite; }
.kr-h-finger { animation: kr-wisch 2.2s ease-in-out infinite; }
@keyframes kr-schieb { 0%, 100% { translate: 0 0; } 45%, 60% { translate: 0 -24px; } }
@keyframes kr-wisch { 0%, 100% { translate: -38px 0; } 50% { translate: 38px 0; } }