/* Bildsystem (Präfix bi-). Gemeinsame Basis für Fotos, Karten, Bildleisten und Pfeile auf allen Seiten
   (außer email-preview.html). Wird VOR dem Inline-<style> geladen: Seitenregeln dürfen ergänzen,
   aber Radius, Pfeil, Leiste und Hover kommen von hier. Doku: docs/reference/design-system.md, „Bildsystem“. */

:root {
  --bi-r: 2px;                                   /* ein Radius für Fotos, Karten, Panels, Buttons, Thumbnails */
  --bi-zoom: 1.03;                               /* Hover-Zoom verlinkter Bilder */
  --bi-zoom-t: 0.6s;
  --bi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Verlauf für Text im Bild (nur große Bühnen: Schauplätze, Roter Faden) */
  --bi-veil: linear-gradient(to top, rgba(20,22,18,0.62) 0%, rgba(20,22,18,0.28) 55%, rgba(20,22,18,0) 100%);
}

/* ── Bildfläche ── */
.bi-media { position: relative; overflow: hidden; border-radius: var(--bi-r); background: #DED9D4; isolation: isolate; }
.bi-media img { transition: transform var(--bi-zoom-t) var(--bi-ease); }

/* Hover nur bei verlinkten Bildern: dezenter Zoom, die Karte selbst bleibt liegen */
@media (hover: hover) {
  .bi-link:hover .bi-media img { transform: scale(var(--bi-zoom)); }
}
.bi-link:focus-visible .bi-media img { transform: scale(var(--bi-zoom)); }

/* ── Leiste unter dem Bild: links Zähler + Unterschrift, rechts Pfeile ── */
.bi-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.bi-bar[hidden] { display: none; }
.bi-meta { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.bi-count { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: #43493E; white-space: nowrap; }
.bi-cap { font-size: 12px; font-weight: 400; line-height: 1.5; color: #43493E; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-nav { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Pfeil-Knopf (einziger Pfeil-Stil der Website) ── */
.bi-arrow {
  position: relative; width: 40px; height: 40px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #DED9D4; border-radius: var(--bi-r); background: transparent; color: #1A1C18; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
/* Hover-Fläche als eigene Ebene, damit nur opacity animiert wird */
.bi-arrow::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: #2D4628; opacity: 0; transition: opacity 0.2s ease; }
.bi-arrow svg { position: relative; z-index: 1; width: 16px; height: 16px; }
.bi-arrow:hover { color: #FDF2F2; border-color: #2D4628; }
.bi-arrow:hover::before { opacity: 1; }
.bi-arrow:active { transform: scale(0.95); }
.bi-arrow:focus-visible { outline: 2px solid #2D4628; outline-offset: 2px; }
.bi-arrow:disabled, .bi-arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; transform: none; color: #1A1C18; border-color: #DED9D4; }
.bi-arrow:disabled::before, .bi-arrow[aria-disabled="true"]::before { opacity: 0; }

/* Dunkle Variante: auf grünem Panel (Kalender) und in der Lightbox */
.bi-arrow--dark { border-color: rgba(253,242,242,0.4); color: #FDF2F2; }
.bi-arrow--dark::before { background: #FDF2F2; }
.bi-arrow--dark:hover { color: #1E3019; border-color: #FDF2F2; }
.bi-arrow--dark:focus-visible { outline-color: #F5EDE0; }
.bi-arrow--dark:disabled, .bi-arrow--dark[aria-disabled="true"] { color: #FDF2F2; border-color: rgba(253,242,242,0.4); }

@media (prefers-reduced-motion: reduce) {
  .bi-media img, .bi-arrow, .bi-arrow::before { transition: none; }
  .bi-link:hover .bi-media img, .bi-link:focus-visible .bi-media img { transform: none; }
}