/* kyb-zeitleiste — Zeitleiste mit isometrischen Würfeln (Set „timeline").
   Aufbau nach der Firmengeschichte der Live-Seite: eine Spur verbindet die
   Stationen, die jüngsten sind neongrün. Mobil einspaltig, ab 900 px
   wechseln die Stationen links/rechts der Spur.
   Ohne JavaScript oder bei reduzierter Bewegung ist alles sofort sichtbar;
   kyb-zeitleiste.js setzt .k-zeit--anim und die Fortschrittsvariable. */

.k-zeit {
  --marke: 48px;
  --spur-x: calc(var(--marke) / 2);
  --fortschritt: 1;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s6);
}

/* Spur und darüberliegender Fortschritt */
.k-zeit::before,
.k-zeit::after {
  content: "";
  position: absolute;
  top: calc(var(--marke) / 2);
  bottom: calc(var(--marke) / 2);
  left: var(--spur-x);
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  pointer-events: none;
}
.k-zeit::before { background: var(--kyb-line); }
.k-zeit::after {
  background: linear-gradient(180deg, rgba(15, 255, 155, .08), rgba(15, 255, 155, .55));
  transform-origin: top center;
  transform: scaleY(var(--fortschritt));
}

.k-zeit__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--marke) 1fr;
  column-gap: var(--s4);
  align-items: start;
}

.k-zeit__marke {
  position: relative;
  z-index: 1;
  width: var(--marke);
  display: block;
  /* Dunkler Grund hinter dem Würfel unterbricht die Spur sauber */
  background: radial-gradient(closest-side, var(--kyb-bg, #0b0b0f) 70%, transparent);
}
.k-zeit__marke svg { display: block; width: 100%; height: auto; overflow: visible; }

.k-zeit__marke path {
  stroke: rgba(255, 255, 255, .62);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
}
.k-zeit__deckel { fill: rgba(255, 255, 255, .06) !important; }
.k-zeit__links  { fill: rgba(255, 255, 255, .02) !important; }
.k-zeit__schraffur { stroke-width: .9 !important; stroke: rgba(255, 255, 255, .38) !important; }

.is-hervor .k-zeit__marke path { stroke: #0b0b0f; }
.is-hervor .k-zeit__deckel,
.is-hervor .k-zeit__links,
.is-hervor .k-zeit__rechts { fill: var(--kyb-neon) !important; }
.is-hervor .k-zeit__links { fill: #0bd884 !important; }
.is-hervor .k-zeit__schraffur { stroke: rgba(11, 11, 15, .75) !important; }
.is-hervor .k-zeit__marke svg { filter: drop-shadow(0 0 14px rgba(15, 255, 155, .22)); }

.k-zeit__inhalt { padding-top: 2px; max-width: 30em; }
.k-zeit__jahr {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--kyb-white);
  font-variant-numeric: tabular-nums;
}
.is-hervor .k-zeit__jahr { color: var(--kyb-neon); }
.k-zeit__titel {
  margin-top: var(--s1);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kyb-white);
}
.k-zeit__text { margin-top: 6px; color: var(--kyb-text-2); line-height: 1.5; }

/* Ab 900 px: Spur in der Mitte, Stationen im Wechsel */
@media (min-width: 900px) {
  .k-zeit { --marke: 64px; --spur-x: 50%; gap: var(--s4); }
  .k-zeit__item {
    grid-template-columns: 1fr var(--marke) 1fr;
    column-gap: var(--s6);
  }
  .k-zeit__marke { grid-column: 2; grid-row: 1; }
  .k-zeit__inhalt { grid-row: 1; padding-top: 6px; }
  .k-zeit__item:nth-child(odd) .k-zeit__inhalt { grid-column: 1; justify-self: end; text-align: right; }
  .k-zeit__item:nth-child(even) .k-zeit__inhalt { grid-column: 3; }
}

/* --- Bewegung: nur mit .k-zeit--anim (von JS gesetzt) ------------------- */
.k-zeit--anim .k-zeit__inhalt {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.22, .7, .25, 1);
}
.k-zeit--anim .k-zeit__marke {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.22, .7, .25, 1);
}
.k-zeit--anim .is-in .k-zeit__inhalt { opacity: 1; transform: none; transition-delay: .15s; }
.k-zeit--anim .is-in .k-zeit__marke { opacity: 1; transform: none; }
.k-zeit--anim::after { transition: transform .6s linear; }

@media (prefers-reduced-motion: reduce) {
  .k-zeit--anim .k-zeit__inhalt,
  .k-zeit--anim .k-zeit__marke { opacity: 1; transform: none; transition: none; }
  .k-zeit::after { transform: none; }
}
@media print {
  .k-zeit__inhalt, .k-zeit__marke { opacity: 1 !important; transform: none !important; }
}