/* Transparente Videos, Hintergrund-Slider */
.video-slider-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 100%;
  max-height: 400px;
  overflow: hidden;
  margin: auto;
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.background-layer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s linear;
  pointer-events: none;
}

img.bg1 { z-index: 0; opacity: 1; }
img.bg2 { z-index: 1; opacity: 0; }
img.bg3 { z-index: 2; opacity: 0; }

.transparent-video {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

#bgSlider {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 600px;
  margin: 20px auto 0 auto;
  display: block;
}

/* Lottie-Demo */
#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

#animation-container {
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
  background: #f9f9f9;
}

#animation-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
}

.control-group {
  margin: 10px 0;
  text-align: center;
}

.control-group label {
  font-weight: bold;
}

#scale-slider {
  width: 100%;
  max-width: 300px;
}

/* Burger-Beispiel: Tabelle kompakt + zentriert */
.l-table--burger thead th,
.l-table--burger td {
  text-align: center;
  padding: 0.45rem 0.6rem;
  vertical-align: middle;
}

.l-table--burger {
  font-size: 0.85rem;
}

.l-table--burger td {
  font-size: 0.8rem;
  line-height: 1;
}