/* ============================================================
 * SECTION II.a — CLOSED STATE (Tatort versiegelt)
 * ============================================================
 * When no hunt is running (planned/past/unscheduled), the same
 * pinboard renders 12 faded grayscale placeholder polaroids in
 * the background, with a yellow police-tape stretched diagonally
 * across the board, and a small notice card pinned underneath.
 * Same cork material — only the contents change.
 * ============================================================ */
.finder-pinboard.is-closed {
  /* Make sure the tape + notice can extend past the visual edge
     without breaking the cork frame */
  overflow: hidden;
}
.finder-pinboard.is-closed .finder-photos {
  /* Muted look without transparency — keeps the polaroid paper
     fully opaque so the cork doesn't bleed through. We just
     desaturate the photo gradients and dim them slightly so the
     wall reads as "asleep" rather than "live". */
  filter: grayscale(0.7) brightness(0.9);
  pointer-events: none;
}
.finder-pinboard.is-closed .finder-polaroid {
  /* Disable hover on closed-state polaroids — they're decorative */
  cursor: default;
}
.finder-pinboard.is-closed .finder-polaroid:hover {
  transform: rotate(0deg);
  box-shadow:
    3px 4px 10px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Police tape — yellow with diagonal black stripes, stretched
   across the full board. Slightly above center so the notice
   below has space. */
.finder-tatort-tape {
  position: absolute;
  top: 45%;
  left: -10%;
  right: -10%;
  height: 64px;
  /* Fotorealistisches Flatterband (assets/absperrband.webp): Knicke,
     Falten, schwarze Streifen und der "POLIZEI - Kein Zutritt"-
     Schriftzug sind in der Illustration eingebacken und wiederholen
     sich per repeat-x nahtlos (Kachel horizontal seam-korrigiert).
     Ersetzt die alte CSS-Konstruktion aus Gelbflaeche + Streifen-
     Pseudo-Elementen + wiederholtem HTML-Text. drop-shadow statt
     box-shadow, damit der Schatten den welligen Bandkanten folgt. */
  background: url("/assets/absperrband.webp") left center / auto 100% repeat-x;
  transform: rotate(-12deg);
  transform-origin: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  z-index: 6;
}
/* Der frueher per JS eingesetzte, wiederholte Textlauf ist durch den
   eingebackenen Schriftzug der Illustration ersetzt. Das Span bleibt
   im DOM (js/16-finder-wall.js erzeugt es weiterhin), wird aber nicht
   mehr angezeigt. */
.finder-tatort-text { display: none; }

/* Notice card pinned below the tape — small, centered, gives
   the actual information about when the hunt resumes. */
.finder-tatort-notice {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  background: linear-gradient(180deg, #f6ecd0 0%, #e8dcb8 100%);
  padding: 1.4rem 2.2rem 1.2rem;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  z-index: 7;
  border: 1px solid rgba(122, 95, 51, 0.3);
  max-width: 380px;
}
.finder-tatort-notice::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 32% 32%, #ef6b6b 0%, #c03a3a 55%, #7a1e1e 100%);
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.finder-tatort-notice-title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
  letter-spacing: 0.04em;
}
.finder-tatort-notice-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 540px) {
  .finder-tatort-notice { max-width: 86%; padding: 1.1rem 1.4rem; }
  .finder-tatort-notice-title { font-size: 1rem; }
  .finder-tatort-notice-text { font-size: 0.9rem; }
}