/* OMSAG LP · Prozess / Zeitstrahl
   Default = final/visible (no-JS safe). JS adds `.ae-anim` (hidden pre-state)
   and `.is-in` on scroll to play the reveal. View toggled via the modifier
   class `.omsag-lp-pz--timeline`. */

.omsag-lp-pz {
  --b:   var(--omsag-lp-brand, #50aa3c);
  --bl:  var(--omsag-lp-lime, #aad337);
  --bd:  var(--omsag-lp-brand-deep, #50aa3c);
  --bs:  var(--omsag-lp-brand-soft, rgba(80,170,60,.12));
  --ink: var(--omsag-lp-ink, #232730);
  --ts:  var(--omsag-lp-text-soft, #5a6270);
  --mut: var(--omsag-lp-muted, #8a93a3);
  --ln:  var(--omsag-lp-line, #e6e8ec);
  --line2: #e7e8eb;
  --ez:  var(--omsag-lp-ease, cubic-bezier(.25,.1,.25,1));
  --font: var(--omsag-lp-font, 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  position: relative;
  font-family: var(--font);
  color: var(--ink);
  padding: 96px 0;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.omsag-lp-pz,
.omsag-lp-pz *,
.omsag-lp-pz *::before,
.omsag-lp-pz *::after { box-sizing: border-box; }

.omsag-lp-pz__container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* --- Header --- */
/* Der Kopf steht zentriert; der Abstand nach unten kam vorher vom Trennstrich. */
.omsag-lp-pz__head { display: flex; justify-content: center; gap: 20px 48px; flex-wrap: wrap; margin-bottom: 40px; text-align: center; }
/* min-width:0, sonst zwingt das laengste Wort der Headline die Flex-Spalte
   breiter als das Fenster (Ueberlauf auf schmalen Geraeten). */
.omsag-lp-pz__head-main { max-width: 720px; min-width: 0; margin-inline: auto; }
.omsag-lp-pz__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--b); margin: 0 0 16px; }
.omsag-lp-pz__headline { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin: 0; overflow-wrap: break-word; hyphens: auto; }










/* view visibility */


/* ===================== GRID VIEW ===================== */





@keyframes pz-step { to { opacity: 1; transform: none; } }

/* alle Icons im Zeitstrahl sind gruen */








/* ===================== TIMELINE VIEW (interactive slider) ===================== */
.omsag-lp-pz__timeline-view { position: relative; margin-top: 6px; }
.omsag-lp-pz__tl { --node: 58px; }
/* all steps visible — no horizontal scroll */
.omsag-lp-pz__tl-inner { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); align-items: start; padding-top: 6px; }

/* progress line behind the nodes, at node centre — fills continuously */
/* Die Linie startet in der Mitte des ersten und endet in der Mitte des letzten
   Knotens. translateY zentriert sie exakt auf der Knotenachse — dort sitzen
   auch die Pfeile, sonst laegen sie 2px darueber. */
.omsag-lp-pz__tl { --tl-inset: calc(50% / var(--cols)); --tl-track: calc(100% - 100% / var(--cols)); }
.omsag-lp-pz__tl-base, .omsag-lp-pz__tl-fill { position: absolute; left: var(--tl-inset); top: calc(var(--node) / 2 + 6px); height: 4px; border-radius: 999px; transform: translateY(-50%); }
.omsag-lp-pz__tl-base { width: var(--tl-track); background: var(--line2); z-index: 0; }
.omsag-lp-pz__tl-fill { width: calc(var(--tl-track) * var(--fillpct, 0) / 100); background: linear-gradient(90deg, var(--b), var(--bl)); z-index: 0; }

.omsag-lp-pz__tl-arrows { position: absolute; left: 0; right: 0; top: calc(var(--node) / 2 + 6px); height: 0; z-index: 1; pointer-events: none; }
.omsag-lp-pz__tl-arrow { position: absolute; top: 0; transform: translate(-50%, -50%); color: var(--mut); opacity: .45; display: inline-flex; transition: color .4s var(--ez), opacity .4s var(--ez); }
.omsag-lp-pz__tl-arrow.is-active { color: var(--b); opacity: 1; }

.omsag-lp-pz__tl-cell { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 14px; }
.omsag-lp-pz__tl-node {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: var(--node); height: var(--node); border-radius: 50%; padding: 0;
  background: #fff; border: 0; color: var(--mut);
  box-shadow: 0 6px 18px -6px rgba(15,17,21,.18), 0 2px 5px rgba(15,17,21,.08);
  transition: transform .35s var(--ez), color .4s var(--ez), background .4s var(--ez), box-shadow .4s var(--ez);
}
.omsag-lp-pz__tl-node svg { width: 25px; height: 25px; }
.omsag-lp-pz__tl-node.is-active {
  background: linear-gradient(135deg, var(--b), var(--bl));
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(80,170,60,.55), 0 2px 6px rgba(80,170,60,.25);
}
.omsag-lp-pz__tl-node.is-current { transform: scale(1.06); }
.omsag-lp-pz.ae-anim .omsag-lp-pz__tl-node { opacity: 0; transform: scale(.4); }
.omsag-lp-pz.ae-anim.is-in .omsag-lp-pz__tl-node { animation: pz-pop .55s var(--ez) forwards; animation-delay: calc(.2s + var(--s) * .08s); }
@keyframes pz-pop { to { opacity: 1; transform: scale(1); } }

.omsag-lp-pz__tl-label { text-align: center; }
.omsag-lp-pz.ae-anim .omsag-lp-pz__tl-label { opacity: 0; transform: translateY(10px); }
.omsag-lp-pz.ae-anim.is-in .omsag-lp-pz__tl-label { animation: pz-step .5s var(--ez) forwards; animation-delay: calc(.4s + var(--s) * .09s); }
.omsag-lp-pz__tl-num { font-size: 11px; color: var(--mut); letter-spacing: .06em; margin: 0 0 7px; }
.omsag-lp-pz__tl-title { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0 0 7px; letter-spacing: -0.01em; }
.omsag-lp-pz__tl-desc { font-size: 12.5px; color: var(--ts); line-height: 1.5; margin: 0; }
/* the active step's label number gets emphasised */
.omsag-lp-pz__tl-cell:has(.is-current) .omsag-lp-pz__tl-num,
.omsag-lp-pz__tl-cell:has(.is-active) .omsag-lp-pz__tl-num { color: var(--b); }

@keyframes pz-fade { to { opacity: 1; } }

/* ===================== GANTT v2 (cascade timeline + mobile accordion) ===================== */

/* tone colours shared by cards, accordion heads and legend (scoped to this block) */
.omsag-lp-pz [data-tone="green"] { --tc: #46a833; --tc2: #64c249; }
.omsag-lp-pz [data-tone="lime"]  { --tc: #93c41d; --tc2: #b8de44; }
.omsag-lp-pz [data-tone="slate"] { --tc: #2f9e84; --tc2: #51c2a4; }
.omsag-lp-pz [data-tone="ink"]   { --tc: #3f4757; --tc2: #5a6373; }

/* ---- desktop cascade ---- */





/* axis */












/* faint dropline — sits behind the axis line/dots and behind the cards */




/* connectors */



/* cascade cards */















@keyframes pz-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* drag scrollbar */




/* ---- legend ---- */










/* ---- mobile accordion (hidden on desktop) ---- */
































/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .omsag-lp-pz { padding: 72px 0; }
  
  
  
}
/* timeline becomes a vertical stepper on smaller screens */
@media (max-width: 820px) {
  .omsag-lp-pz__tl-inner { display: flex; flex-direction: column; gap: 2px; padding-top: 0; }
  .omsag-lp-pz__tl-base, .omsag-lp-pz__tl-fill { top: 0; bottom: 0; left: calc(var(--node) / 2); right: auto; width: 3px; height: auto; transform: none; }
  .omsag-lp-pz__tl-base { height: 100%; }
  .omsag-lp-pz__tl-fill { height: calc(var(--fillpct, 0) * 1%); width: 3px; }
  .omsag-lp-pz__tl-arrows { display: none; }
  .omsag-lp-pz__tl-cell { flex-direction: row; align-items: flex-start; gap: 16px; padding: 12px 0; }
  .omsag-lp-pz__tl-label { text-align: left; padding-top: 4px; }
}
/* Zeitstrahl: waagerecht → senkrecht */

@media (max-width: 600px) {
  .omsag-lp-pz { padding: 56px 0; }
  .omsag-lp-pz__container { padding: 0 20px; }
  .omsag-lp-pz__head { margin-bottom: 30px; }
  
}
@media (prefers-reduced-motion: reduce) {
  .omsag-lp-pz.ae-anim .omsag-lp-pz__step,
  .omsag-lp-pz.ae-anim .omsag-lp-pz__tl-node,
  .omsag-lp-pz.ae-anim .omsag-lp-pz__tl-label,
  .omsag-lp-pz.ae-anim .omsag-lp-pz__g2-card { opacity: 1; transform: none; }
  
  .omsag-lp-pz__tl-fill { transition: none; }
  .omsag-lp-pz * { animation: none !important; }
}