/* ==========================================================================
   Coming Soon — Fullscreen-Bildstrecke
   Variablen kommen aus main.css
   ========================================================================== */

.gz-cs-body {
  overflow: hidden;
  background: var(--gz-bg);
}

.gz-cs {
  position: fixed;
  inset: 0;
  cursor: pointer;              /* Klick springt zum nächsten Bild */
}

/* --- Bühne ---------------------------------------------------------------- */

.gz-cs__stage {
  position: absolute;
  inset: 0;
}

.gz-cs__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s var(--gz-ease);
  will-change: opacity;
}

.gz-cs__slide.is-active { opacity: 1; }

.gz-cs__img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* wie im bisherigen Slider */
  object-position: center;
  display: block;
}

/* --- Name und Textzeile --------------------------------------------------- */

.gz-cs__meta {
  position: absolute;
  top: var(--gz-top);
  left: var(--gz-margin);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: difference;   /* bleibt über hellen und dunklen Bildern lesbar */
  color: #fff;
}

.gz-cs__name {
  display: block;
  font-size: var(--gz-home-fs);
  letter-spacing: var(--gz-home-ls);
  line-height: var(--gz-lh);
}

.gz-cs__note {
  display: block;
  margin-top: .55em;
  font-size: var(--gz-label-fs);
  letter-spacing: var(--gz-label-ls);
  text-transform: uppercase;
}

/* --- Zähler --------------------------------------------------------------- */

.gz-cs__count {
  position: absolute;
  bottom: var(--gz-top);
  right: var(--gz-margin);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #fff;
  font-size: var(--gz-label-fs);
  letter-spacing: var(--gz-label-ls);
  font-variant-numeric: tabular-nums;
}

/* --- Hinweis, nur für eingeloggte Redakteure ------------------------------ */

.gz-cs__hint {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 10;
  max-width: 32em;
  padding: 12px 16px;
  background: #000;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
  .gz-cs__meta  { top: var(--gz-top); left: var(--gz-margin); }
  .gz-cs__count { bottom: var(--gz-top); right: var(--gz-margin); }
}

@media (prefers-reduced-motion: reduce) {
  .gz-cs__slide { transition-duration: .01ms; }
}