/*
 * seq.css
 * --------------------------------------------------------------------------
 * Kanonische Bildsequenz für Erlebnis-/Event-Karten — EINE Quelle für alle
 * Oberflächen (Landing-Agenda, Landing-Erlebnisse, Event-Kalender). Eingebunden
 * per <link rel="stylesheet" href="/seq.css"> zusammen mit /seq.js.
 *
 * Aktiv NUR ab 2 Bildern. Bei 0 oder 1 Bild liefert ArvSeq.markup() das
 * unveränderte Ein-Bild-Markup des jeweiligen Renderers zurück — dann existiert
 * keine einzige Klasse aus dieser Datei im DOM.
 *
 * Aufbau (von ArvSeq.markup erzeugt, zwei Geschwister):
 *   <div class="<originalklasse> seq-media" data-seq-media> … Slides … </div>
 *   <div class="seq-ui seq-ui--hero|--framed" data-seq> … Bedienung … </div>
 * Die Medien-Ebene trägt die Originalklasse des Renderers und erbt damit dessen
 * Box, Positionierung und z-index unverändert. Die Bedien-Ebene liegt bewusst
 * DANEBEN statt darin: .erl-card-img sitzt auf z-index:-2, Kindelemente könnten
 * aus diesem Stacking-Kontext nicht nach vorn.
 *
 * Varianten: 'hero' = Punkte rechts unten (großflächige Aufmacher),
 *            'framed' = Punkte mittig unten (gerahmte Raster-Karten).
 *
 * Tokens mit Fallback, da die einbindenden Seiten zwei Token-Generationen
 * nutzen (--oro/--carta neu, --gold/--creme alt).
 */

/* ── Medien-Ebene ───────────────────────────────────────────────────────── */
/* Die Originalklasse liefert Box und Position; hier nur der Stapel-Kontext. */
.seq-media {
  overflow: hidden;
}

/* Slides liegen exakt übereinander; nur der aktive ist sichtbar.
   Gilt für <div> mit background-image ebenso wie für <img>. */
.seq-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  /* Fokuspunkt statt hartem center. --focal setzt der Traeger (.ex-card__photo,
     .agenda-feature-media) inline; ohne gepflegten Punkt bleibt es bei center. */
  object-position: var(--focal, center);
  background-position: var(--focal, center);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.seq-slide.is-active {
  opacity: 1;
}

/* ── Bedien-Ebene ───────────────────────────────────────────────────────── */
/* Container fängt KEINE Klicks ab — der Karten-Klick bleibt Navigation.
   Nur die Bedienelemente selbst sind klickbar. */
.seq-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* Innerhalb einer Karte mit negativem Bild-z-index (.erl-card-img: -2, Karte mit
   isolation:isolate) muss die Bedienung eigenständig nach vorn. */
.seq-ui--framed {
  z-index: 4;
}
/* Großflächige Aufmacher stapeln mehr Ebenen übereinander (Gold-Rahmen z-index 3,
   Siegel 6 im Event-Kalender) — die Bedienung muss darüber liegen und klickbar
   bleiben. Sie kollidiert nicht mit dem Siegel: Zähler oben rechts, Siegel links. */
.seq-ui--hero {
  z-index: 7;
}

/* ── Pfeile ─────────────────────────────────────────────────────────────── */
/* Ruhezustand unsichtbar; erscheinen bei Hover oder Tastaturfokus.
   Auf Touch (kein Hover) dauerhaft dezent — siehe Media Query unten. */
.seq-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(253, 250, 245, 0.35);
  border-radius: 0;
  background: rgba(28, 28, 26, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FDFAF5;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.seq-arrow--prev { left: 12px; }
.seq-arrow--next { right: 12px; }

.seq-media:hover ~ .seq-ui .seq-arrow,
.seq-ui:hover .seq-arrow,
.seq-ui:focus-within .seq-arrow {
  opacity: 1;
}
.seq-arrow:hover {
  border-color: var(--oro, var(--gold, #B8975A));
  background: rgba(28, 28, 26, 0.72);
}
.seq-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--oro, var(--gold, #B8975A));
  outline-offset: 2px;
}

/* ── Zähler (DM Mono, oben rechts) ──────────────────────────────────────── */
.seq-count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FDFAF5;
  background: rgba(28, 28, 26, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 4px 8px;
  white-space: nowrap;
}

/* ── Punkte ─────────────────────────────────────────────────────────────── */
.seq-dots {
  position: absolute;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.seq-ui--hero   .seq-dots { right: 14px; }
.seq-ui--framed .seq-dots { left: 50%; transform: translateX(-50%); }

.seq-dot {
  pointer-events: auto;
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(253, 250, 245, 0.55);
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease;
}
/* Aktiver Punkt: goldene Pille. Gold ist hier Indikator, kein Button-Grund. */
.seq-dot.is-active {
  width: 18px;
  background: var(--oro, var(--gold, #B8975A));
  cursor: default;
}
.seq-dot:focus-visible {
  outline: 2px solid var(--oro, var(--gold, #B8975A));
  outline-offset: 2px;
}

/* ── Touch: kein Hover verfügbar → Pfeile dauerhaft dezent sichtbar ─────── */
@media (hover: none) {
  .seq-arrow { opacity: 0.65; }
}

/* ── Reduzierte Bewegung: harter Schnitt statt Crossfade ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .seq-slide { transition: none; }
  .seq-arrow { transition: none; }
  .seq-dot   { transition: none; }
}