/* Mimi, die Museumsmaus – Adventskalender
   Baut auf ../styles.css auf (Farben, Schriften, Kopf- und Fusszeile). */

.advent {
  --holz-hell: #b9814a;
  --holz: #9a6431;
  --holz-dunkel: #6e4220;
  --holz-tief: #3d2412;
  --licht: #f6dfa4;
  background: var(--cream);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kopfbereich ---------- */
.advent-hero {
  background:
    radial-gradient(ellipse at 78% 40%, rgba(246, 223, 164, .55), transparent 60%),
    var(--cream);
  padding: clamp(40px, 7vw, 90px) 0 clamp(30px, 5vw, 60px);
}
.advent-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
}
.advent-hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.05;
  color: var(--green);
  margin: 0 0 22px;
}
.advent-hero h1 span {
  display: block;
  font-size: .5em;
  font-style: italic;
  color: var(--holz-dunkel);
  margin-top: 10px;
}
.advent-hero-text p:not(.eyebrow) {
  font-size: 1.13rem;
  line-height: 1.6;
  color: #34504a;
  max-width: 560px;
  margin: 0 0 14px;
}
.advent-hero .eyebrow { color: #8a5d14; }
.advent-hero-tipp { font-weight: 700; color: var(--green) !important; }

.mimi {
  width: 100%;
  max-width: 300px;
  height: auto;
  justify-self: center;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}

/* ---------- Kalender (Holzschrank) ---------- */
.advent-kalender {
  padding-top: clamp(26px, 4vw, 44px);
  padding-bottom: clamp(30px, 5vw, 60px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .05)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #4a2c16, var(--holz-tief));
  border-radius: 6px;
  box-shadow: inset 0 0 0 8px #2b190c, 0 18px 40px rgba(13, 40, 38, .18);
  max-width: 1180px;
}
@media (min-width: 761px) {
  .advent-kalender { margin-left: auto; margin-right: auto; }
}

.advent-status, .advent-testmodus {
  color: var(--licht);
  text-align: center;
  font-size: 1.05rem;
  margin: 0 0 18px;
}
.advent-testmodus {
  background: rgba(228, 187, 100, .18);
  border: 1px dashed var(--gold);
  border-radius: 4px;
  padding: 8px 12px;
  font-weight: 700;
}

.tuerchen-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 22px);
}
@media (min-width: 560px) { .tuerchen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .tuerchen-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tuerchen-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tuerchen { perspective: 900px; }

.tuerchen-knopf {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #1f1209;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: inset 0 0 0 3px #24150a, inset 0 6px 18px rgba(0, 0, 0, .6);
}
.tuerchen-knopf:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}

/* Inhalt hinter dem Türchen */
.tuerchen-innen {
  position: absolute;
  inset: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--licht), #c98f4a 70%, #6b4120);
}
.tuerchen-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tuerchen-titel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 8px 8px 12px;
  background: linear-gradient(transparent, rgba(13, 40, 38, .9));
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

/* Das hölzerne Türchen */
.tuerchen-tuer {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.3, .7, .2, 1), box-shadow .3s;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 7px, rgba(255, 255, 255, .05) 7px 8px, transparent 8px 13px),
    linear-gradient(160deg, var(--holz-hell), var(--holz) 45%, var(--holz-dunkel));
  box-shadow: inset 0 0 0 3px rgba(61, 36, 18, .55), inset 0 0 0 9px rgba(255, 230, 180, .12), 0 3px 8px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tuerchen-zahl {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  line-height: 1;
  color: #fff3d6;
  text-shadow: 0 2px 0 rgba(61, 36, 18, .55), 0 0 18px rgba(246, 223, 164, .35);
}
.tuerchen-knauf {
  position: absolute;
  right: 11%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff1c2, var(--gold) 55%, #8a5d14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* Zustände */
.ist-zu .tuerchen-tuer { filter: saturate(.75) brightness(.86); }
.ist-zu .tuerchen-knopf:hover .tuerchen-tuer { transform: rotateY(-6deg); }

.ist-heute .tuerchen-tuer {
  box-shadow: inset 0 0 0 3px rgba(61, 36, 18, .55), inset 0 0 0 9px rgba(255, 230, 180, .2), 0 0 0 3px var(--gold), 0 0 26px 4px rgba(246, 223, 164, .65);
  animation: leuchten 2.6s ease-in-out infinite;
}
.ist-heute .tuerchen-knopf:hover .tuerchen-tuer { transform: rotateY(-14deg); }

.ist-offen .tuerchen-tuer {
  transform: rotateY(-86deg);
  animation: none;
  box-shadow: inset 0 0 0 3px rgba(61, 36, 18, .55), 6px 4px 14px rgba(0, 0, 0, .45);
}
.ist-offen .tuerchen-knopf:hover .tuerchen-tuer { transform: rotateY(-80deg); }
.ist-offen .tuerchen-zahl { opacity: 0; }
.tuerchen-nr {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 15px;
  background: var(--gold);
  color: var(--green-dark);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.ist-offen .tuerchen-knopf:hover .tuerchen-bild { transform: scale(1.04); }
.tuerchen-bild { transition: transform .4s; }

@keyframes leuchten {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

/* ---------- Hinweis Entstehung ---------- */
.advent-entstehung {
  font-size: .86rem;
  color: var(--muted);
  text-align: center;
  padding-top: 22px;
  padding-bottom: 36px;
  margin: 0 auto;
}

/* ---------- Film-Dialog ---------- */
.film-dialog {
  width: min(880px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.film-dialog::backdrop { background: rgba(23, 13, 6, .78); }
.film-dialog-inner { position: relative; padding: clamp(18px, 4vw, 34px); }
.film-dialog .eyebrow { color: #8a5d14; margin: 0 40px 6px 0; }
.film-dialog h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.15;
  color: var(--green);
  margin: 0 40px 18px 0;
}
.film-schliessen {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.film-schliessen:focus-visible, .film-start:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 3px;
}

.film-buehne { width: 100%; }
.film-frame, .film-video, .film-platzhalter {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 5px;
  background: #1f1209;
}
.film-platzhalter { position: relative; overflow: hidden; }
.film-vorschau { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-start {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 24px;
  border: 0;
  border-radius: 40px;
  background: var(--gold);
  color: var(--green-dark);
  font: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.film-start:hover { background: #f0cd80; }
.film-start-symbol {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--green-dark);
}
.film-nachricht {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green);
  margin: 0;
}
.film-bald .film-nachricht {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(61, 36, 18, .15);
  background: rgba(245, 241, 232, .95);
  padding: 14px 22px;
  border-radius: 6px;
  text-align: center;
  width: max-content;
  max-width: 85%;
}
.film-hinweis {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 14px 0 0;
}
.film-hinweis a { text-decoration: underline; color: var(--green); }

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  .advent-hero-inner { grid-template-columns: 1fr; }
  .mimi { max-width: 190px; order: -1; }
  .advent-kalender { border-radius: 0; }
  .tuerchen-titel { font-size: .8rem; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .tuerchen-tuer, .tuerchen-bild { transition: none; }
  .ist-heute .tuerchen-tuer { animation: none; }
}