/* Zeitleiste (Widget „Zeitleiste“): Spur über den Karten, Knoten je Schritt, Ziel-Schritt hervorgehoben.
   Die Füllung folgt dem Scrollen: Das Skript setzt --up-zl-fortschritt (0…1), legt die Spur exakt
   vom ersten bis zum letzten Knoten und markiert erreichte Schritte.
   Ohne Skript ist die Spur voll und alle Schritte sind aktiv.
   Farben kommen über CSS-Variablen aus den Widget-Reglern; Abstufungen entstehen per color-mix(). */

.up-zeitleiste {
  --up-zl-spur: rgb(255 255 255 / .09);
  --up-zl-aktiv: #00b7d1;
  --up-zl-hell: #7eefff;
  --up-zl-leuchten: #29daff;
  --up-zl-ziel: #00b7d1;
  --up-zl-karte-oben: #0a1013;
  --up-zl-karte-unten: #040607;
  --up-zl-rand: rgb(255 255 255 / .08);
  --up-zl-symbol: #c9f7ff;
  --up-zl-titel: #eef6f9;
  --up-zl-nummer: #8d99a3;
  --up-zl-hinweis: #8d99a3;
  --up-zl-hinweis-symbol: #00b7d1;
}
.up-zeitleiste,
.up-zeitleiste *,
.up-zeitleiste *::before,
.up-zeitleiste *::after { box-sizing: border-box; }

/* Bühne: Maße der Zeitleiste; --up-zl-anzahl setzt das Widget je nach Zahl der Schritte */
.up-zeitleiste .up-zeitleiste__buehne {
  --up-zl-luecke: 16px;
  --up-zl-knoten: 16px;
  --up-zl-einzug: 24px;
  --up-zl-oben: 44px;
  --up-zl-fortschritt: 1;
  --up-zl-senkrecht: 0;
  position: relative;
  isolation: isolate;
}
/* Punktraster hinter der Zeitleiste */
.up-zeitleiste.up-zeitleiste--raster .up-zeitleiste__buehne::before {
  content: "";
  position: absolute;
  inset: -40px -24px;
  z-index: -1;
  background: radial-gradient(circle at 1px 1px, rgb(141 180 196 / .35) 1px, transparent 1.5px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000, transparent);
          mask-image: radial-gradient(60% 70% at 50% 45%, #000, transparent);
  pointer-events: none;
}
.up-zeitleiste .up-zeitleiste__liste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--up-zl-anzahl, 4), minmax(0, 1fr));
  gap: var(--up-zl-luecke);
  margin: 0;
  padding: var(--up-zl-oben) 0 0;
  list-style: none;
}

/* Spur (ohne Skript: Näherung aus dem Raster) */
.up-zeitleiste .up-zeitleiste__spur {
  position: absolute;
  top: calc((var(--up-zl-oben) - var(--up-zl-knoten)) / 2 + var(--up-zl-knoten) / 2 - 1px);
  left: calc(var(--up-zl-einzug) + var(--up-zl-knoten) / 2);
  right: calc((100% - (var(--up-zl-anzahl, 4) - 1) * var(--up-zl-luecke)) / var(--up-zl-anzahl, 4) - var(--up-zl-einzug) - var(--up-zl-knoten) / 2);
  height: 2px;
  border-radius: 2px;
  background: var(--up-zl-spur);
}
/* Füllung: dunkler Anfang aus der Erreicht-Farbe, helles Ende */
.up-zeitleiste .up-zeitleiste__fuellung {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(var(--up-zl-fortschritt) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--up-zl-aktiv) 30%, #0e0c12), var(--up-zl-aktiv) 70%, var(--up-zl-hell));
  box-shadow: 0 0 12px color-mix(in srgb, var(--up-zl-aktiv) 60%, transparent);
}
/* Leuchtender Kopf an der Spitze der Füllung */
.up-zeitleiste .up-zeitleiste__fuellung::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #e6fcff;
  box-shadow: 0 0 10px 3px color-mix(in srgb, var(--up-zl-leuchten) 85%, transparent);
}

.up-zeitleiste .up-zeitleiste__schritt {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Knoten auf der Spur mit kurzer Verbindung zur Karte */
.up-zeitleiste .up-zeitleiste__knoten {
  position: absolute;
  z-index: 1;
  top: calc((var(--up-zl-oben) - var(--up-zl-knoten)) / 2 - var(--up-zl-oben));
  left: var(--up-zl-einzug);
  width: var(--up-zl-knoten);
  height: var(--up-zl-knoten);
  border: 1px solid color-mix(in srgb, var(--up-zl-hell) 90%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, #d9fbff 0 2px, var(--up-zl-aktiv) 3px, color-mix(in srgb, var(--up-zl-aktiv) 20%, #050205) 70%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--up-zl-aktiv) 12%, transparent),
    0 0 16px color-mix(in srgb, var(--up-zl-leuchten) 70%, transparent);
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.up-zeitleiste .up-zeitleiste__knoten::after {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  width: 1px;
  height: calc((var(--up-zl-oben) - var(--up-zl-knoten)) / 2 - 3px);
  background: linear-gradient(color-mix(in srgb, var(--up-zl-aktiv) 70%, transparent), color-mix(in srgb, var(--up-zl-aktiv) 10%, transparent));
}

/* Karten */
.up-zeitleiste .up-zeitleiste__karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding: 22px var(--up-zl-einzug) 24px;
  border: 1px solid var(--up-zl-rand);
  border-radius: 16px;
  background:
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--up-zl-aktiv) 8%, transparent), transparent 60%),
    linear-gradient(165deg, var(--up-zl-karte-oben) 0%, var(--up-zl-karte-unten) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .06),
    0 26px 44px -26px rgb(0 0 0 / .95);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .3s, box-shadow .3s, opacity .45s;
}
.up-zeitleiste .up-zeitleiste__schritt:hover .up-zeitleiste__karte {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--up-zl-aktiv) 35%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .08),
    0 30px 50px -26px rgb(0 0 0 / .95),
    0 0 40px -14px color-mix(in srgb, var(--up-zl-aktiv) 40%, transparent);
}
/* Schlichte Schrittnummer oben rechts */
.up-zeitleiste .up-zeitleiste__nummer {
  position: absolute;
  top: 22px;
  right: 22px;
  font: 500 12px/1 Roboto, sans-serif;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--up-zl-nummer);
}
.up-zeitleiste .up-zeitleiste__text {
  font: 500 16.5px/1.45 Roboto, sans-serif;
  letter-spacing: -.005em;
  color: var(--up-zl-titel);
}

/* Symbol-Kachel */
.up-zeitleiste .up-zeitleiste__chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--up-zl-aktiv) 38%, transparent);
  border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--up-zl-aktiv) 30%, transparent), rgb(2 14 40 / .75) 70%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .16),
    0 8px 18px -8px color-mix(in srgb, var(--up-zl-aktiv) 60%, transparent);
  color: var(--up-zl-symbol);
}
.up-zeitleiste .up-zeitleiste__chip svg,
.up-zeitleiste .up-zeitleiste__chip i {
  display: block;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: inherit;
}
/* Symbole aus der Icon-Bibliothek (Schrift-Symbole als Inline-SVG) in Textfarbe */
.up-zeitleiste .up-zeitleiste__chip .e-font-icon-svg,
.up-zeitleiste .up-zeitleiste__hinweis-symbol .e-font-icon-svg { fill: currentColor; }

/* Ziel-Schritt */
.up-zeitleiste .up-zeitleiste__schritt--ziel .up-zeitleiste__karte {
  border-color: transparent;
  background:
    radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--up-zl-ziel) 20%, transparent), transparent 60%) padding-box,
    linear-gradient(165deg, color-mix(in srgb, var(--up-zl-ziel) 15%, #07080d) 0%, color-mix(in srgb, var(--up-zl-ziel) 4%, #030308) 100%) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--up-zl-hell) 80%, transparent), color-mix(in srgb, var(--up-zl-ziel) 25%, transparent) 40%, color-mix(in srgb, var(--up-zl-ziel) 60%, transparent)) border-box;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .1),
    0 30px 60px -28px color-mix(in srgb, var(--up-zl-ziel) 45%, transparent);
}
.up-zeitleiste .up-zeitleiste__schritt--ziel .up-zeitleiste__nummer { color: var(--up-zl-leuchten); }
/* Pulsierender Ring um den Ziel-Knoten */
.up-zeitleiste .up-zeitleiste__schritt--ziel .up-zeitleiste__knoten::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, var(--up-zl-hell) 60%, transparent);
  border-radius: 50%;
  animation: up-zeitleiste-ziel 2.4s ease-out infinite;
}
@keyframes up-zeitleiste-ziel {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Noch nicht erreichte Schritte (nur mit Skript) */
.up-zeitleiste .up-zeitleiste__buehne--scroll .up-zeitleiste__schritt:not(.up-zeitleiste__schritt--erreicht) .up-zeitleiste__knoten {
  border-color: rgb(255 255 255 / .2);
  background: #0b1114;
  box-shadow: none;
}
.up-zeitleiste .up-zeitleiste__buehne--scroll .up-zeitleiste__schritt:not(.up-zeitleiste__schritt--erreicht) .up-zeitleiste__karte { opacity: .5; }
.up-zeitleiste .up-zeitleiste__buehne--scroll .up-zeitleiste__schritt:not(.up-zeitleiste__schritt--erreicht) .up-zeitleiste__knoten::before { display: none; }

/* Hinweis mit Symbol */
.up-zeitleiste .up-zeitleiste__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 640px;
  margin: 22px 0 0;
  padding: 0;
  font: 400 12.5px/1.6 Roboto, sans-serif;
  color: var(--up-zl-hinweis);
}
.up-zeitleiste .up-zeitleiste__hinweis-symbol {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  /* mittig zur ersten Textzeile, auch bei geänderter Schriftgröße */
  margin-top: 2px;
  margin-top: calc((1lh - 16px) / 2);
  color: var(--up-zl-hinweis-symbol);
}
.up-zeitleiste .up-zeitleiste__hinweis-symbol svg,
.up-zeitleiste .up-zeitleiste__hinweis-symbol i {
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: inherit;
}

/* ---------- Tablet und Handy: senkrechte Zeitleiste ----------
   --up-zl-senkrecht teilt dem Skript die Richtung mit. */
@media (max-width: 1024px) {
  .up-zeitleiste .up-zeitleiste__buehne { --up-zl-oben: 0px; --up-zl-spalte: 36px; --up-zl-senkrecht: 1; }
  .up-zeitleiste .up-zeitleiste__liste { grid-template-columns: 1fr; gap: 14px; padding: 0 0 0 var(--up-zl-spalte); }
  .up-zeitleiste .up-zeitleiste__spur { top: 34px; bottom: 34px; left: calc(var(--up-zl-knoten) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .up-zeitleiste .up-zeitleiste__fuellung {
    right: 0;
    bottom: auto;
    width: auto;
    height: calc(var(--up-zl-fortschritt) * 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--up-zl-aktiv) 30%, #0e0c12), var(--up-zl-aktiv) 70%, var(--up-zl-hell));
  }
  .up-zeitleiste .up-zeitleiste__fuellung::after { top: auto; right: auto; bottom: -4px; left: 50%; margin: 0 0 0 -4px; }
  .up-zeitleiste .up-zeitleiste__knoten { top: 50%; left: calc(var(--up-zl-spalte) * -1); margin-top: calc(var(--up-zl-knoten) / -2); }
  .up-zeitleiste .up-zeitleiste__knoten::after {
    top: 50%;
    left: calc(100% + 3px);
    width: calc(var(--up-zl-spalte) - var(--up-zl-knoten) - 6px);
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--up-zl-aktiv) 70%, transparent), color-mix(in srgb, var(--up-zl-aktiv) 10%, transparent));
  }
  .up-zeitleiste .up-zeitleiste__karte { flex-direction: row; align-items: center; padding: 18px 44px 18px 20px; }
  .up-zeitleiste.up-zeitleiste--ohne-nummern .up-zeitleiste__karte { padding-right: 20px; }
  .up-zeitleiste .up-zeitleiste__nummer { top: 50%; right: 18px; transform: translateY(-50%); }
}
@media (max-width: 767px) {
  .up-zeitleiste .up-zeitleiste__chip { width: 32px; height: 32px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .up-zeitleiste .up-zeitleiste__schritt--ziel .up-zeitleiste__knoten::before { animation: none; visibility: hidden; }
  .up-zeitleiste .up-zeitleiste__knoten,
  .up-zeitleiste .up-zeitleiste__karte { transition: none; }
}