/*** T3SB identifier: videoRatioCss-58290 */

.ratio-16x9{--bs-aspect-ratio:calc(9 / 16 * 100%);}
		


/*** T3SB identifier: t3sbsCSSassets_37831 */

/* t3sbs_assets_37831 */
/* =========================================================
   LATERNENPIRSCH
   ========================================================= */

.lp-game {
  --lp-dark: #171711;
  --lp-dark-2: #27271d;
  --lp-gold: #e5a936;
  --lp-gold-light: #ffe29a;
  --lp-text: #f4ead2;
  --lp-muted: #c5b99c;

  width: 100%;
  max-width: 980px;

  margin: 30px auto;

  font-family: inherit;
}


.lp-game *,
.lp-game *::before,
.lp-game *::after {
  box-sizing: border-box;
}


/* =========================================================
   INTRO
   ========================================================= */

.lp-intro {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
}


.lp-kicker {
  margin-bottom: 7px;

  color: #8f6e25;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 2px;
  text-transform: uppercase;
}


.lp-intro h2 {
  margin: 0 0 9px;

  color: #29271f;

  font-size: clamp(28px, 4vw, 43px);
  line-height: 1.08;
}


.lp-intro p {
  max-width: 630px;
  margin: 0 auto;

  color: #69645a;

  line-height: 1.6;
}


/* =========================================================
   HAUPTRAHMEN
   ========================================================= */

.lp-shell {
  overflow: hidden;

  border: 3px solid #3c392a;
  border-radius: 22px;

  background: var(--lp-dark);

  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   SPIELFLÄCHE
   ========================================================= */

.lp-stage {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #111;

  cursor: none;

  touch-action: none;

  user-select: none;
  -webkit-user-select: none;
}


.lp-image {
  display: block;

  width: 100%;
  height: auto;

  user-select: none;
  -webkit-user-select: none;

  pointer-events: none;

  -webkit-user-drag: none;
}


/* =========================================================
   NEBEL
   ========================================================= */

.lp-fog {
  position: absolute;

  inset: 0;

  z-index: 3;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/* =========================================================
   WABERNDER NEBEL
   ========================================================= */

.lp-moving-fog {
  position: absolute;

  z-index: 4;

  width: 140%;
  height: 80%;

  left: -20%;

  pointer-events: none;

  opacity: 0.18;

  filter: blur(35px);

  background:
    radial-gradient(
      ellipse at 20% 50%,
      rgba(235, 235, 220, 0.24),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 55% 40%,
      rgba(185, 192, 180, 0.18),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 82% 65%,
      rgba(230, 231, 216, 0.22),
      transparent 40%
    );
}


.lp-moving-fog--one {
  top: 5%;

  animation:
    lpFogMoveOne 15s ease-in-out infinite alternate;
}


.lp-moving-fog--two {
  bottom: 0;

  opacity: 0.12;

  animation:
    lpFogMoveTwo 21s ease-in-out infinite alternate;
}


@keyframes lpFogMoveOne {

  from {
    transform:
      translateX(-5%)
      translateY(-3%);
  }

  to {
    transform:
      translateX(8%)
      translateY(7%);
  }

}


@keyframes lpFogMoveTwo {

  from {
    transform:
      translateX(7%)
      translateY(3%);
  }

  to {
    transform:
      translateX(-8%)
      translateY(-5%);
  }

}


/* =========================================================
   LICHTSCHEIN
   ========================================================= */

.lp-light {
  position: absolute;

  z-index: 5;

  left: 50%;
  top: 50%;

  width: 230px;
  height: 230px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 244, 191, 0.38) 0%,
      rgba(255, 193, 77, 0.22) 28%,
      rgba(255, 157, 40, 0.08) 54%,
      transparent 72%
    );

  filter: blur(5px);

  transform:
    translate(-50%, -50%);

  pointer-events: none;

  opacity: 0.88;

  animation:
    lpLightPulse 2.4s ease-in-out infinite;
}


@keyframes lpLightPulse {

  0%,
  100% {
    opacity: 0.68;

    transform:
      translate(-50%, -50%)
      scale(0.95);
  }

  50% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.05);
  }

}


/* =========================================================
   LATERNE
   ========================================================= */

.lp-lantern {
  position: absolute;

  z-index: 6;

  left: 50%;
  top: 50%;

  width: 58px;
  height: 88px;

  transform:
    translate(-50%, -72%);

  transform-origin: 50% 0%;

  pointer-events: none;
}


.lp-lantern__handle {
  position: absolute;

  left: 50%;
  top: -17px;

  width: 35px;
  height: 27px;

  border: 4px solid #352b18;
  border-bottom: 0;

  border-radius: 20px 20px 0 0;

  transform: translateX(-50%);
}


.lp-lantern__cap {
  position: absolute;

  left: 50%;
  top: 7px;

  width: 43px;
  height: 9px;

  border-radius: 4px;

  background:
    linear-gradient(
      #514225,
      #271f11
    );

  transform: translateX(-50%);
}


.lp-lantern__body {
  position: absolute;

  left: 50%;
  top: 15px;

  width: 46px;
  height: 55px;

  overflow: hidden;

  border: 4px solid #3a2e17;
  border-radius: 9px 9px 13px 13px;

  background:
    radial-gradient(
      circle,
      #fff8c8 0%,
      #ffd768 34%,
      #e98b25 72%,
      #8e461d 100%
    );

  box-shadow:
    0 0 17px rgba(255, 197, 78, 0.95),
    0 0 37px rgba(255, 164, 47, 0.6);

  transform: translateX(-50%);
}


.lp-lantern__glass {
  position: absolute;

  inset: 4px;

  border-radius: 5px;

  border-left:
    2px solid rgba(255, 255, 255, 0.2);

  border-right:
    2px solid rgba(60, 42, 18, 0.32);
}


.lp-lantern__body::before,
.lp-lantern__body::after {
  content: "";

  position: absolute;

  top: 0;

  width: 3px;
  height: 100%;

  background:
    rgba(54, 40, 18, 0.7);
}


.lp-lantern__body::before {
  left: 9px;
}


.lp-lantern__body::after {
  right: 9px;
}


.lp-lantern__flame {
  position: absolute;

  left: 50%;
  top: 18px;

  width: 11px;
  height: 21px;

  border-radius:
    55% 55% 45% 45%;

  background:
    linear-gradient(
      #fffbd4,
      #ffd75f,
      #e77b22
    );

  box-shadow:
    0 0 12px #fff4a4,
    0 0 25px #f6a332;

  transform: translateX(-50%);

  animation:
    lpFlame 0.9s ease-in-out infinite alternate;
}


@keyframes lpFlame {

  from {
    transform:
      translateX(-50%)
      rotate(-4deg)
      scale(0.92, 1.05);
  }

  to {
    transform:
      translateX(-50%)
      rotate(4deg)
      scale(1.08, 0.93);
  }

}


.lp-lantern__base {
  position: absolute;

  left: 50%;
  bottom: 7px;

  width: 48px;
  height: 10px;

  border-radius:
    3px 3px 7px 7px;

  background:
    linear-gradient(
      #4c3d22,
      #271f11
    );

  transform: translateX(-50%);
}


/* =========================================================
   START-HINWEIS
   ========================================================= */

.lp-start {
  position: absolute;

  z-index: 7;

  left: 50%;
  bottom: 22px;

  width:
    min(360px, calc(100% - 34px));

  padding: 12px 18px;

  border:
    1px solid rgba(255, 223, 143, 0.4);

  border-radius: 13px;

  color: #fff0bf;

  background:
    rgba(20, 20, 15, 0.84);

  backdrop-filter: blur(7px);

  text-align: center;

  transform:
    translateX(-50%);

  pointer-events: none;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}


.lp-start strong {
  display: block;

  margin-bottom: 2px;

  color: #ffe293;

  font-size: 15px;
}


.lp-start span {
  font-size: 12px;
}


.lp-start.is-hidden {
  opacity: 0;

  transform:
    translateX(-50%)
    translateY(8px);
}


/* =========================================================
   UNTERER BEREICH
   ========================================================= */

.lp-panel {
  padding: 21px;

  color: var(--lp-text);

  background:
    linear-gradient(
      145deg,
      #28281e,
      #171711
    );
}


.lp-progress-head {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 8px;

  color: #dbd0b6;

  font-size: 13px;
}


.lp-progress-head strong {
  color: #ffe29a;
}


.lp-progress {
  width: 100%;
  height: 10px;

  overflow: hidden;

  border-radius: 100px;

  background:
    rgba(255, 255, 255, 0.09);
}


.lp-progress__bar {
  width: 0%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #ad6422,
      #eaaa34,
      #ffe28a
    );

  box-shadow:
    0 0 13px
    rgba(255, 185, 58, 0.42);

  transition:
    width 0.25s ease;
}


/* =========================================================
   RESET
   ========================================================= */

.lp-reset {
  display: block;

  min-height: 44px;

  margin: 17px auto 0;

  padding: 9px 17px;

  border:
    1px solid rgba(255, 221, 126, 0.38);

  border-radius: 999px;

  color: #ffe398;

  background: transparent;

  font: inherit;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


.lp-reset:hover {
  color: #282415;

  background: #e6aa38;

  transform: translateY(-1px);
}


/* =========================================================
   BELOHNUNG
   ========================================================= */

.lp-reward {
  display: none;

  margin-top: 22px;
  padding: 22px 24px;

  border:
    1px solid rgba(255, 221, 126, 0.48);

  border-radius: 16px;

  color: #f5ead0;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(231, 170, 56, 0.14),
      transparent 55%
    ),
    rgba(255, 255, 255, 0.035);

  text-align: center;

  opacity: 0;

  transform: translateY(12px);
}


.lp-reward.is-visible {
  display: block;

  animation:
    lpRewardAppear 0.7s ease forwards;
}


.lp-reward__eyebrow {
  margin-bottom: 7px;

  color: #caa34d;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}


.lp-reward h3 {
  margin: 0 0 12px;

  color: #ffe49a;

  font-size:
    clamp(20px, 3vw, 27px);

  line-height: 1.2;
}


.lp-reward p {
  max-width: 720px;

  margin: 0 auto;

  color: #eee3c9;

  font-size: 15px;

  line-height: 1.65;
}


.lp-reward__date {
  margin-top: 13px !important;

  color: #ffe09a !important;

  font-weight: 700;
}


@keyframes lpRewardAppear {

  from {
    opacity: 0;

    transform: translateY(12px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .lp-shell {
    border-radius: 15px;
  }


  .lp-stage {
    cursor: default;
  }


  .lp-panel {
    padding: 16px;
  }


  .lp-light {
    width: 170px;
    height: 170px;
  }


  .lp-reward {
    padding: 18px 16px;
  }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .lp-moving-fog,
  .lp-light,
  .lp-lantern__flame {
    animation: none;
  }

}