html, body {
   margin: 0;
   height: 100%;
}

#c {
   width: 100%;
   height: 100%;
   display: block;
   touch-action: none;
}

#loader {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: #111; color: #eee; font-family: sans-serif;
  transition: opacity 0.4s;
}
#loader-bar {
  width: 240px; height: 8px;
  background: #333; border-radius: 4px; overflow: hidden;
}
#loader-fill {
  width: 0%; height: 100%; background: #4af;
  transition: width 0.1s;
}
#loader.hidden { opacity: 0; pointer-events: none; }

.pin { cursor: pointer; pointer-events: auto; }

.pin-dot {
  position: relative;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fb87ff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: transform 0.12s;
}
.pin:hover .pin-dot { transform: scale(1.3); }
/* sanftes Pulsieren als Ring drumherum */
.pin-dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 5px solid #f590ec;
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: scale(0.8); opacity: 0.8; }
  to   { transform: scale(5);   opacity: 0;   }
}

#modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(10,10,12,0.75);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
#modal.hidden { display: none; }
#modal-content {
  width: fit-content;
  max-width: min(90vw, 800px);
  max-height: 100%;
  overflow-y: auto;
  background: #1a1a1e; color: #eee;
  padding: 28px 32px; border-radius: 12px;
  font-family: sans-serif; line-height: 1.5;
}
#modal-content.fill {
  --ar: 1.7778;
  width: min(90vw, calc(90vh * var(--ar)));
  aspect-ratio: var(--ar);
  max-width: 1600px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}
#modal-content img { max-width: 100%; height: auto; border-radius: 8px; }
#modal-content iframe {
  width: 100%; height: 100%;
  border: 0; border-radius: 8px; display: block;
}
#modal-close {
  position: fixed; top: 20px; right: 24px; z-index: 21;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: none; color: #fff;
  font-size: 24px; cursor: pointer;
}
#bewegungshinweis {
  position: fixed;
  bottom: 40%; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
#bewegungshinweis.zeigen { opacity: 1; }
#bewegungshinweis-box {
  background: rgba(0,0,0,0.6);
  color: #fff; font-family: sans-serif; font-size: clamp(1rem, 2.2vw, 2rem);
  padding: 0.8em 1.3em;        /* em = relativ zur font-size oben */
  border-radius: 0.5em;
  gap: 0.7em;
  white-space: nowrap;
  flex-direction: column;
  align-items: center;
  display: flex;
}
#bewegungshinweis-box img, #btn-info img {
  width: 100%; height: 100%;
  object-fit: contain;
}
#tasten-stapel {
  position: relative;
  width: 10em;
  height: 6em;
}
#tasten-stapel img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* gegenläufiges Ein-/Ausblenden */
.taste-a { animation: blende-a 3s ease-in-out infinite; }
.taste-b { animation: blende-b 3s ease-in-out infinite; }

@keyframes blende-a {
  0%, 45%   { opacity: 1; }
  55%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes blende-b {
  0%, 45%   { opacity: 0; }
  55%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}

#joystick {
  position: fixed;
  left: 30px; bottom: 30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.3);
  display: none;
  touch-action: none;
  z-index: 15;
}
#joystick.aktiv {
  display: block;
}
#joystick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}

#btn-vollbild, #btn-info {
  position: fixed;
  bottom: 24px;
  z-index: 15;
  width: 52px; height: 52px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
#btn-vollbild img, #btn-info img {
  width: 100%; height: 100%;
  object-fit: contain;
}
#btn-vollbild { right: 24px; }
#btn-info { right: 88px; }

#info-overlay {
  position: fixed; inset: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,12,0.75);
}
#info-overlay.hidden { display: none; }
#info-box {
  position: relative;
  width: 90vw;
  max-width: 1300px;
  max-height: 85vh;
  overflow-y: auto;
  background: #1a1a1e; color: #eee;
  max-width: 1300px; padding: 32px 36px;
  border-radius: 12px;
  font-family: sans-serif; line-height: 1.6;
}
#info-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none;
  color: #fff; font-size: 1.4rem; cursor: pointer;
}
#impressum-text {
  white-space: pre-line;
  column-count: 3;
  column-width: 280px;
  column-gap: 40px;
}
#impressum-text > div {
  break-inside: avoid;
  margin-bottom: 1em;
}
* {
  user-select: none;
  -webkit-user-select: none;
}
img {
  -webkit-user-drag: none;
  pointer-events: none;
}