/* control-panel Stilvorlage für section show */
#control-panel {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  padding: 0.3rem 0.6rem;      /* kleineres Padding */
  border-radius: 6px;          /* leicht kleiner */
  display: flex;
  flex-wrap: wrap;             /* Zeilen umbrechen auf kleinen Bildschirmen */
  gap: 0.3rem;                 /* kleinerer Abstand zwischen Buttons */
  z-index: 1000;
  justify-content: center;     /* Buttons zentrieren */
}

/* Grundbutton */
.btn {
  position: relative;
  padding: 0.6rem 1.2rem;      /* kompakter */
  font-size: 0.9rem;           /* kleinere Schrift */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Neon-rot holographischer Stil */
.holo-red {
  border: 2px solid rgba(255, 0, 100, 0.5);
  background: rgba(255, 0, 80, 0.08);
  box-shadow: 0 0 6px rgba(255,0,100,0.4), inset 0 0 8px rgba(255,0,120,0.3);
  backdrop-filter: blur(4px);
}

.holo-red span {
  position: relative;
  display: inline-block;
  text-shadow:
    0 0 6px rgba(255, 0, 80, 0.7),
    0 0 12px rgba(255, 0, 100, 0.4);
  transition: transform 0.3s ease;
}

.holo-red:hover span {
  transform: scale(1.05);
}

/* Glitch-Spuren */
.holo-red span::before,
.holo-red span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

.holo-red span::before {
  top: -2px;
  color: #ff003c;
  animation: glitch-red 3s infinite;
}

.holo-red span::after {
  bottom: -2px;
  color: #ff0066;
  animation: glitch-red 3s infinite reverse;
}

/* Scanline-Effekt */
.scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 0, 100, 0.9),
    transparent
  );
  top: 0;
  animation: scan-red 3s linear infinite;
  filter: blur(1px);
}

/* Animationen */
@keyframes glitch-red {
  0%, 100% { transform: translateX(0); opacity: 0.2; }
  20% { transform: translateX(-3px); opacity: 0.5; }
  40% { transform: translateX(3px); opacity: 0.6; }
  60% { transform: translateX(-2px); opacity: 0.4; }
  80% { transform: translateX(2px); opacity: 0.3; }
}

@keyframes scan-red {
  0% { top: -10%; opacity: 0; }
  20% { opacity: 1; }
  50% { top: 50%; opacity: 0.8; }
  80% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* Hover-Zustand */
.holo-red:hover {
  border-color: rgba(255, 0, 120, 0.8);
  box-shadow:
    0 0 25px rgba(255, 0, 120, 0.7),
    inset 0 0 12px rgba(255, 0, 100, 0.5);
  background: rgba(255, 0, 80, 0.15);
}
@media (max-width: 500px) {
  #control-panel {
    gap: 0.2rem;
    padding: 0.2rem 0.4rem;
  }
  .btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
}