/* Funkelhain: Kalender mit 24 Türchen (#kalender). Aufbau aus build-pages.mjs
   (calendar), Ablauf in tuerchen.js. Links die Bühne mit dem Ort des gewählten
   Tages, rechts die Türchen. Sie öffnen sich beim Eintritt ins Bild der Reihe nach. */
.kalender { padding-block: var(--la-section, 5rem); background: var(--detail-bg); color: var(--detail-ink, #fffdf8); overflow: clip; }
.kalender-head h2 { margin: .5rem 0 0; max-width: 16ch; text-wrap: balance; }
.kalender-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(1.6rem, 3vw, 2.6rem); }

.kalender-buehne { margin: 0; min-width: 0; }
.kalender-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--detail-line, #ffffff26); border-radius: var(--la-radius-l, 28px); background: #0b1020; box-shadow: 0 50px 90px -50px #000; }
.kalender-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kalender-buehne figcaption { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.kalender-tag { flex: none; min-width: 1.6em; font: 800 clamp(3.4rem, 6vw, 5.4rem)/.85 var(--heading); letter-spacing: -.06em; text-align: center; color: var(--detail-bg); -webkit-text-stroke: 2.5px var(--detail-accent); paint-order: stroke fill; }
.kalender-text { display: grid; gap: .25rem; min-width: 0; }
.kalender-art { color: var(--detail-accent); font: 700 .8rem/1.2 var(--heading); letter-spacing: .14em; text-transform: uppercase; }
.kalender-buehne strong { font: 700 clamp(1.25rem, 2.1vw, 1.8rem)/1.15 var(--heading); letter-spacing: -.025em; text-wrap: balance; }

.kalender-tueren { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.kalender-tueren li { perspective: 520px; }
.tuer { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--la-radius-s, 10px); background: #05070f; cursor: pointer; transform-style: preserve-3d; }
/* Hinter der Tür: das Bild des Tages. Solange die Tür zu ist, liegt es im Dunkeln. */
.tuer-innen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.tuer-innen img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.12) saturate(.4); transform: scale(1.25); transition: filter .9s ease .15s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .1s; }
.tuer.is-open .tuer-innen img { filter: none; transform: none; }
/* Warmes Licht fällt beim Öffnen aus der Tür. */
.tuer::before { content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--detail-accent) 70%, transparent), transparent); opacity: 0; transform: scale(.6); pointer-events: none; }
/* Das Türblatt schwingt um die linke Kante auf und bleibt als offener Flügel sichtbar. */
.tuer-blatt {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--detail-accent) 55%, transparent);
  border-radius: inherit;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--detail-accent) 22%, var(--detail-bg)), color-mix(in srgb, var(--detail-accent) 6%, var(--detail-bg)));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--detail-bg) 70%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--detail-accent) 30%, transparent);
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(.34, 1.3, .5, 1), filter 1s ease, box-shadow .4s ease;
}
/* Türknauf. */
.tuer-blatt::after { content: ""; position: absolute; right: 12%; top: 50%; width: 9%; aspect-ratio: 1; margin-top: -4.5%; border-radius: 50%; background: var(--detail-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--detail-bg) 60%, transparent); }
.tuer-blatt b { font: 800 clamp(1.1rem, 2vw, 1.6rem)/1 var(--heading); color: var(--detail-accent); }
.tuer.is-open .tuer-blatt { transform: rotateY(-78deg); filter: brightness(.55); }
.tuer.is-open .tuer-blatt b, .tuer.is-open .tuer-blatt::after { opacity: 0; }
/* Die nächste Tür wartet: ein Lichtspalt zeigt, dass gleich etwas passiert. */
.tuer.is-next .tuer-blatt { transform: rotateY(-9deg); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--detail-bg) 70%, transparent), inset 0 0 0 4px var(--detail-accent), 0 0 22px color-mix(in srgb, var(--detail-accent) 45%, transparent); }
.tuer::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 2px solid transparent; border-radius: inherit; pointer-events: none; transition: border-color .3s ease; }
.tuer[aria-current="true"]::after { border-color: var(--detail-accent); }
.tuer:focus-visible { outline: 2px solid var(--detail-accent); outline-offset: 3px; }
.tuer-innen::after { content: attr(data-tag); position: absolute; right: .35rem; bottom: .3rem; padding: .12rem .38rem; border-radius: 99px; background: #0b1020cc; color: #fffdf8; font: 700 .7rem/1.2 var(--heading); opacity: 0; transition: opacity .4s ease .6s; }
.tuer.is-open .tuer-innen::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Geschlossene Türen reagieren auf die Maus: Sie gehen einen Spalt auf. */
  @media (hover: hover) {
    .tuer:not(.is-open):hover .tuer-blatt { transform: rotateY(-24deg); }
    .tuer:not(.is-open):hover .tuer-innen img { filter: brightness(.55) saturate(.8); }
  }
  @keyframes tuer-licht { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }
  .tuer.is-opening::before { animation: tuer-licht 1.2s ease-out; }
  @keyframes tuer-wackeln { 0%, 100% { rotate: 0deg; } 30% { rotate: -2.5deg; } 60% { rotate: 2deg; } }
  .tuer.is-next { animation: tuer-wackeln .7s ease-in-out .2s; }
  /* Die Bühne öffnet sich wie eine Flügeltür. */
  @keyframes kalender-auf { from { clip-path: inset(0 50% 0 50%); transform: scale(1.12); } to { clip-path: inset(0 0 0 0); transform: none; } }
  .kalender-bild img.is-neu { animation: kalender-auf .9s cubic-bezier(.2, .7, .2, 1); }
  @keyframes kalender-zeile { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
  .kalender-buehne figcaption.is-neu > * { animation: kalender-zeile .45s cubic-bezier(.2, .7, .2, 1) .25s backwards; }
  .kalender-buehne figcaption.is-neu > :nth-child(2) { animation-delay: .32s; }
}
@media (prefers-reduced-motion: reduce) { .tuer-blatt, .tuer-innen img { transition: none; } }

@media (max-width: 860px) {
  .kalender-layout { grid-template-columns: 1fr; }
  .kalender-bild { border-radius: var(--la-radius-m, 16px); }
  .kalender-tueren { gap: .45rem; }
}

/* Eine Zeile zum Inhalt des Tages: welches Lied, was die Klasse tut. */
.kalender-detail { max-width: 44ch; color: var(--detail-muted, #d5dfe2); font-size: .98rem; line-height: 1.45; }
.kalender-buehne figcaption { align-items: flex-start; min-height: 6.6rem; }