/* Festliche Bühne für Überschrift und Kalendertürchen. */
.lions-headline {
  position: relative;
  z-index: 1;
  display: grid;
  width: 640px;
  max-width: calc(100% - 110px);
  flex: 0 1 640px;
  margin: 16px 0 44px;
  padding: 0;
  text-shadow: 0 4px 20px rgba(22, 7, 28, .68), 0 1px 2px rgba(22, 7, 28, .82);
}

.calendar .link-header { display: none; }
.calendar .container-2 > .link-block { margin-left: auto; padding-left: 24px; }

.lions-headline::after {
  content: "";
  width: 92px;
  height: 3px;
  margin-top: 17px;
  border-radius: 99px;
  background: linear-gradient(90deg, #f3ce79, rgba(243, 206, 121, .12));
  box-shadow: 0 0 20px rgba(237, 198, 110, .38);
}

.calendar-title-place,
.calendar-title-main,
.calendar-title-year { display: block; }

.calendar-title-place {
  color: #fff;
  font: 500 clamp(25px, 3vw, 40px)/1.03 "Source Serif Pro", Georgia, serif;
  letter-spacing: -.025em;
}

.calendar-title-main {
  color: #fff;
  font: 700 clamp(37px, 5.2vw, 66px)/.98 Montserrat, sans-serif;
  letter-spacing: -.055em;
}

.calendar-title-year {
  margin-top: 7px;
  color: #f2cc76;
  font: 700 clamp(25px, 3.5vw, 43px)/1 Montserrat, sans-serif;
  letter-spacing: .12em;
}

.calendar-countdown {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-top: 17px;
  padding: 9px 14px;
  align-items: center;
  gap: 9px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(39,13,48,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 600 11px/1.35 Montserrat, Arial, sans-serif;
  letter-spacing: .015em;
}
.calendar-countdown i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #f1ca72; box-shadow: 0 0 0 5px rgba(241,202,114,.14), 0 0 15px rgba(241,202,114,.55); }
.calendar-countdown strong { color: #f5d88f; }

.flex-wrapper.main {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px;
}

.doorlet-number {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 122px;
  margin: 0;
  padding: 20px;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, .88);
  background: linear-gradient(145deg, rgba(76, 30, 97, .22), rgba(48, 16, 68, .13));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 22px rgba(27, 7, 37, .05);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  text-shadow: 0 2px 12px rgba(17, 5, 23, .48);
  transition:
    transform .28s cubic-bezier(.2, .75, .2, 1),
    border-color .25s ease,
    background .25s ease,
    box-shadow .28s ease,
    text-shadow .25s ease;
}

.doorlet-number::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(244, 205, 116, .28), transparent 47%),
    linear-gradient(145deg, rgba(103, 45, 121, .92), rgba(48, 16, 68, .9));
  transition: opacity .28s ease;
}

.doorlet-number::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -75%;
  width: 45%;
  height: 170%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 200, .28), transparent);
  transform: rotate(17deg);
  transition: left .58s ease, opacity .2s ease;
}

.doorlet-number:hover,
.doorlet-number:focus-visible {
  display: grid;
  margin: 0;
  padding: 20px;
  color: #fff;
  border: 1px dashed #f3d48e;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(81, 32, 102, .38), rgba(48, 16, 68, .3));
  box-shadow: 0 19px 38px rgba(27, 7, 37, .26), 0 0 0 4px rgba(239, 196, 101, .11);
  text-shadow: 0 2px 15px rgba(15, 4, 21, .72), 0 0 18px rgba(244, 205, 116, .18);
  transform: translateY(-6px) scale(1.025);
  outline: none;
}

.doorlet-number:hover::before,
.doorlet-number:focus-visible::before { opacity: 1; }

.doorlet-number:hover::after,
.doorlet-number:focus-visible::after { left: 135%; opacity: 1; }

.doorlet-number:active { transform: translateY(-2px) scale(.985); }
.doorlet-number.is-today {
  border-color: #f5d581;
  box-shadow: 0 0 0 4px rgba(244,207,119,.2), 0 18px 38px rgba(29,8,38,.2);
}
.doorlet-number.is-today::before { opacity: .62; }

@media (max-width: 767px) {
  .lions-headline {
    max-width: calc(100% - 78px);
    margin: 12px 0 30px;
  }

  .calendar-title-place { font-size: clamp(22px, 7vw, 34px); }
  .calendar-title-main { font-size: clamp(30px, 9.7vw, 48px); }
  .calendar-title-year { font-size: clamp(23px, 7vw, 34px); }
  .calendar-countdown { margin-top: 13px; padding: 8px 11px; font-size: 10px; }

  .flex-wrapper.main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .doorlet-number,
  .doorlet-number:hover,
  .doorlet-number:focus-visible {
    min-height: 96px;
    margin: 0;
    padding: 15px;
  }

}

@media (max-width: 479px) {
  .lions-headline {
    width: calc(100% - 88px);
    max-width: none;
    margin-top: 10px;
  }

  .lions-headline::after { width: 58px; margin-top: 13px; }
  .calendar-title-main { font-size: clamp(26px, 8vw, 36px); letter-spacing: -.06em; }
  .calendar-title-place { font-size: clamp(20px, 6vw, 27px); }
  .calendar-title-year { margin-top: 5px; font-size: 24px; }

  .flex-wrapper.main { gap: 18px; }
  .doorlet-number,
  .doorlet-number:hover,
  .doorlet-number:focus-visible { min-height: 84px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .doorlet-number,
  .doorlet-number::before,
  .doorlet-number::after { transition: none; }
}