/* ============================================================
   Die Zeitleiste — das Herzstück der Seite

   Idee: Die Arbeiten werden nicht gescrollt, sondern GESCRUBBT.
   Ein Abschnitt bleibt stehen und füllt den Bildschirm, das Scrollen
   fährt durch die Kapitel wie ein Abspielkopf durch eine Zeitleiste
   im Schnittprogramm.

   Warum das hier und nicht irgendwo: LumiFilms schneidet Filme. Eine
   Seite, die sich wie ein Schnittplatz bedient, sagt das ohne einen
   einzigen Satz. Und die Wellenform unten ist echt, gerechnet aus
   Andreas Morths Titel "Lawbreaker".

   Der Übergang zwischen Kapiteln ist ein Zoom: das alte Bild fährt
   auf und blendet weg, das neue kommt aus der Tiefe. Michaels
   "Infinite Zoom", aber an eine Ordnung gebunden statt als Selbstzweck.
   ============================================================ */

.zeitleiste{
  position: relative;
  background: var(--tiefer);
  border-block: 1px solid var(--kante);
}

/* Die Spur bestimmt, wie lang gescrollt wird.
   Höhe wird vom Skript gesetzt: Kapitelzahl × Bildschirmhöhe. */
.zl-spur{ position: relative; }

.zl-fest{
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* ---------- Bühne: die gestapelten Kapitelbilder ---------- */

.zl-buehne{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.zl-clip{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity .55s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.zl-clip.aktiv{ opacity: 1; transform: scale(1); }
.zl-clip.vorbei{ opacity: 0; transform: scale(.88); }
.zl-clip img, .zl-clip video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Abdunkeln, damit die Schrift trägt */
.zl-buehne::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--tiefer) 6%, color-mix(in srgb, var(--tiefer) 78%, transparent) 42%, color-mix(in srgb, var(--tiefer) 28%, transparent) 76%),
    linear-gradient(to right, color-mix(in srgb, var(--tiefer) 62%, transparent), transparent 58%);
  pointer-events: none;
}

/* ---------- Kapiteltext ---------- */

.zl-text{
  position: relative;
  z-index: 2;
  align-self: end;
  padding-block: clamp(28px, 5vh, 64px);
  pointer-events: none;
}
.zl-kapitel{
  position: absolute;
  bottom: clamp(28px, 5vh, 64px);
  left: 0; right: 0;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  /* Die Kapitel sind absolut positioniert und brechen deshalb aus der
     Textspalte aus. Die Einrueckung von .schale wird hier als Polsterung
     nachgebaut, damit die Schrift nicht am Bildschirmrand klebt. */
  padding-inline: max(var(--rand), calc((100% - var(--breite)) / 2));
}
.zl-kapitel.aktiv{ opacity: 1; transform: none; pointer-events: auto; }

.zl-kunde{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rot-hell);
  margin-bottom: 16px;
}
.zl-kunde::before{
  content: "";
  width: 22px; height: 2px;
  background: var(--rot);
}
.zl-titel{
  font-family: var(--serif);
  font-size: clamp(34px, 6.6vw, 92px);
  line-height: .98;
  letter-spacing: -0.018em;
  max-width: 16ch;
  margin: 0 0 18px;
}
.zl-zeile{
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 52ch;
  margin: 0 0 20px;
}
.zl-credits{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.zl-credits span{ display: inline-flex; align-items: center; gap: 8px; }
.zl-credits span::before{ content: ""; width: 3px; height: 3px; background: var(--rot); }

.zl-abspielen{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.zl-abspielen i{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  transition: background .18s, border-color .18s;
}
.zl-abspielen i::before{
  content: "";
  width: 0; height: 0;
  margin-left: 3px;
  border-left: 9px solid currentColor;
  border-block: 6px solid transparent;
}
.zl-abspielen:hover i{ background: var(--rot); border-color: var(--rot); }

/* ---------- Die Leiste unten: echte Wellenform ---------- */

.zl-leiste{
  position: relative;
  z-index: 3;
  padding-block: 16px clamp(16px, 3vh, 30px);
}
.zl-leiste-innen{
  display: grid;
  gap: 10px;
}
.zl-welle{
  position: relative;
  height: clamp(38px, 6vh, 60px);
}
.zl-welle svg{ width: 100%; height: 100%; display: block; }
.zl-welle .welle-grund{ fill: color-mix(in srgb, var(--ink) 16%, transparent); }
.zl-welle .welle-aktiv{ fill: var(--rot); }

/* Der Abspielkopf */
.zl-kopf{
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--ink);
  transform: translateX(-1px);
  transition: left .12s linear;
  pointer-events: none;
}
.zl-kopf::before{
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--ink);
}

/* Kapitelmarken, anklickbar */
.zl-marken{
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.zl-marke{
  flex: 1;
  background: none;
  border: 0;
  border-top: 1px solid var(--kante);
  padding: 10px 0 0;
  text-align: left;
  color: var(--faint);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s, border-color .18s;
  min-height: 34px;
}
.zl-marke:hover{ color: var(--dim); }
.zl-marke.aktiv{ color: var(--ink); border-top-color: var(--rot); }
.zl-marke b{ display: block; font-weight: 700; }
.zl-marke em{
  display: block;
  font-style: normal;
  font-weight: 500;
  color: var(--faint);
  font-size: 9px;
  letter-spacing: .1em;
  margin-top: 2px;
}

/* ---------- Rückfallebene ----------
   Ohne JavaScript oder bei "weniger Bewegung" wird aus der Zeitleiste
   eine schlichte Liste. Kein leerer Bildschirm. */
.zeitleiste.ohne-js .zl-fest{ position: static; height: auto; }
.zeitleiste.ohne-js .zl-buehne{ position: relative; height: 56svh; }
.zeitleiste.ohne-js .zl-clip{ opacity: 1; transform: none; position: relative; }
.zeitleiste.ohne-js .zl-clip + .zl-clip{ margin-top: 3px; }
.zeitleiste.ohne-js .zl-kapitel{ position: relative; opacity: 1; transform: none; bottom: auto; }
.zeitleiste.ohne-js .zl-leiste{ display: none; }