/* ============================================================
   ORCAPILOT · Versandabwicklung (orcapilot.de/versandabwicklung/)
   Loaded after styles.css. Same world as the home page: the ice-white
   surface shows today's manual work, the dive, then the deep where the
   agent works. One colour code throughout: ice blue is what the agent
   does, orange is what your team decides. One object carries the page:
   the semitrailer seen from above, 34 spaces for Euro pallets, filled
   space by space. One running example: order 26-04711 of Kunde 30871,
   four positions, 58 pallets on 36 spaces, two spaces too many.
   ============================================================ */

body.uc {
  --ink-strong: #062A3F;
  --link-ink: #16688A;
  --human-text: #FFB59A;     /* orange as text on the deep: readable, same hue */
  --human-ink: #B9400F;      /* orange as text on the ice */
  --mono: 'JetBrains Mono', monospace;
}

/* ============ DEPTH LADDER (seven sections in the deep) ============ */
body.uc .section.s1 { background: linear-gradient(180deg, #0C3A52, #0A3348); }
body.uc .section.s2 { background: linear-gradient(180deg, #0A3348, #092C3F); }
body.uc .section.s3 { background: linear-gradient(180deg, #092C3F, #072535); }
body.uc .section.s4 { background: linear-gradient(180deg, #072535, #061E2B); }
body.uc .section.s5 { background: linear-gradient(180deg, #061E2B, #041721); }
body.uc .section.s6 { background: linear-gradient(180deg, #041721, #031018); }
body.uc .section.s7 { background: linear-gradient(180deg, #031018, #01090E); }
body.uc .section.s1::before { display: none; }
body.uc .section.s1 .section-inner { padding-top: clamp(48px, 6.67vh, 85px); }
body.uc .section.l1 .section-inner { padding-bottom: clamp(56px, 8vh, 96px); }

/* ============ THE TRUCK, SEEN FROM ABOVE (hero, plan, problem, cases) ============ */
/* A semitrailer of 13.6 m by 2.4 m: 17 rows of two Euro pallets (0.8 m by 1.2 m)
   across, 34 spaces, in its real proportions. Each space is a slot at column --c
   (0 right behind the cab) and row --r. A slot with data-h="2" carries two pallets
   stacked: the lower one peeks out, so the space reads as a stack. */
.truck {
  --cols: 17;
  --bed: #F4F9FB;
  --bed-line: rgba(6, 42, 63, 0.2);
  --grid: rgba(6, 42, 63, 0.07);
  --pal: #A5D8E6;
  --pal-line: rgba(22, 104, 138, 0.45);
  --pal-low: #3D8BAA;
  --pal-one: #D3ECF3;
  --pal-one-line: rgba(22, 104, 138, 0.32);
  --cab: #0B2738;
  --cab-line: #0B2738;
  --glass: rgba(165, 216, 230, 0.85);
  position: relative;
  display: grid;
  grid-template-columns: 13.6fr 1.6fr;
  gap: 3px;
  align-items: center;
}
/* On the deep the same truck, drawn in light lines */
.section:not(.light) .truck {
  --bed: rgba(255, 255, 255, 0.035);
  --bed-line: rgba(165, 216, 230, 0.38);
  --grid: rgba(165, 216, 230, 0.1);
  --pal-line: rgba(255, 255, 255, 0.28);
  --pal-low: #3A86A6;
  --pal-one: rgba(165, 216, 230, 0.4);
  --pal-one-line: rgba(255, 255, 255, 0.18);
  --cab: rgba(165, 216, 230, 0.16);
  --cab-line: rgba(165, 216, 230, 0.5);
  --glass: rgba(165, 216, 230, 0.75);
}
.truck-bed {
  position: relative;
  min-width: 0;
  aspect-ratio: 13.6 / 2.4;
  border: 1.5px solid var(--bed-line);
  border-radius: 3px 5px 5px 3px;
  background-color: var(--bed);
  /* the empty spaces, counted from the cab */
  background-image:
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--grid) calc(50% - 0.5px), var(--grid) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    repeating-linear-gradient(to left, var(--grid) 0 1px, transparent 1px calc(100% / var(--cols)));
}
.truck-cab {
  position: relative;
  aspect-ratio: 1.6 / 2.21;
  border: 1.5px solid var(--cab-line);
  border-radius: 3px 7px 7px 3px;
  background: var(--cab);
}
.truck-cab::before { /* the windscreen */
  content: '';
  position: absolute;
  top: 14%;
  bottom: 14%;
  right: 12%;
  width: 20%;
  border-radius: 2px;
  background: var(--glass);
}
.slot {
  --off: translate(0, 0);
  position: absolute;
  top: calc(var(--r) * 50%);
  right: calc(var(--c) * 100% / var(--cols));
  width: calc(100% / var(--cols));
  height: 50%;
}
.slot[data-h="2"] { --off: translate(-2px, 2px); }
.slot::before, .slot[data-h="2"]::after {
  content: '';
  position: absolute;
  inset: 13% 12%;
  border-radius: 2px;
  background: var(--pal-one);
  box-shadow: inset 0 0 0 1px var(--pal-one-line);
}
.slot::before { transform: var(--off); }
.slot[data-h="2"]::before { background: var(--pal-low); box-shadow: none; }
.slot[data-h="2"]::after { background: var(--pal); box-shadow: inset 0 0 0 1px var(--pal-line); }

/* The legend under a truck */
.key { display: inline-flex; align-items: center; gap: 0.4rem; }
.key::before { content: ''; flex: none; width: 10px; height: 13px; border-radius: 2px; background: #D3ECF3; box-shadow: inset 0 0 0 1px rgba(22, 104, 138, 0.32); }
.key--stack::before { background: #A5D8E6; box-shadow: inset 0 0 0 1px rgba(22, 104, 138, 0.45), -2px 2px 0 #3D8BAA; margin-left: 2px; }

/* ============ 1 · HERO (ice world, split) ============ */
body.uc .hero-card.uc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(2rem, 4.5vw, 4.75rem);
  text-align: left;
  padding: clamp(64px, 8vh, 104px) clamp(24px, 4.6vw, 76px);
  min-height: clamp(560px, calc(100vh - 140px), 780px);
  min-height: clamp(560px, calc(100svh - 140px), 780px);
}
.uc-hero-text { position: relative; z-index: 1; max-width: 36rem; }
.uc-title {
  margin: 0;
  font-size: clamp(2.3rem, 1.25rem + 2.8vw, 3.85rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.037em;
  text-wrap: balance;
  background: linear-gradient(to right, #062A3F 0%, #0C3A52 45%, #1D7FA8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0C3A52;
}
.uc-lead {
  margin: 1.35rem 0 0;
  max-width: 33rem;
  font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.22rem);
  line-height: 1.55;
  color: #3F5D72;
}
.uc-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.25rem 0 0; padding: 0; }
.uc-checks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px 5px 8px;
  border-radius: 999px;
  background: rgba(165, 216, 230, 0.42);
  border: 1px solid rgba(22, 104, 138, 0.16);
  color: var(--ink-strong);
  font-size: 0.86rem;
  font-weight: 600;
}
.uc-checks svg { width: 15px; height: 15px; fill: none; stroke: var(--link-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.uc-release { display: flex; align-items: center; gap: 0.7rem; margin: 1.15rem 0 0; color: var(--ink-strong); font-size: 0.98rem; font-weight: 500; line-height: 1.45; }
.uc-release-ic, .lp-foot-ic {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--human);
  background: rgba(252, 97, 45, 0.12);
  border: 1px solid rgba(252, 97, 45, 0.5);
}
.uc-release-ic svg, .lp-foot-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body.uc .uc-hero .hero-cta { justify-content: flex-start; margin-top: clamp(1.8rem, 3.2vw, 2.4rem); }

/* The plan: the order loaded space by space, then carrier, dates and freight order */
.lp { position: relative; z-index: 1; margin: 0; container-type: inline-size; }
.lp-card {
  position: relative;
  max-width: 34rem;
  margin-left: auto;
  background: #ffffff;
  border: 1px solid rgba(2, 29, 46, 0.1);
  border-radius: 0.95rem;
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(6, 42, 63, 0.13), 0 2px 4px rgba(6, 42, 63, 0.05);
}
.lp-agent { position: absolute; z-index: 2; top: -22px; left: -22px; width: 44px; height: 44px; }
.lp .agent { background: #0B2738; border-color: #0B2738; box-shadow: 0 8px 18px rgba(6, 42, 63, 0.24); }
.lp .agent svg { width: 27px; height: 27px; }
.lp .agent::before {
  inset: 0;
  background: radial-gradient(circle, rgba(165, 216, 230, 0.42) 0%, rgba(165, 216, 230, 0.16) 55%, rgba(165, 216, 230, 0) 78%);
  box-shadow: 0 0 0 5px rgba(165, 216, 230, 0.5), 0 0 26px 6px rgba(22, 104, 138, 0.32);
  transition: opacity 0.4s ease;
}
.lp-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.8rem 1.1rem 0.8rem 1.6rem; border-bottom: 1px solid var(--ink-line); }
.lp-title { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink-strong); white-space: nowrap; }
.lp-title svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--link-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-from { flex: none; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-muted); white-space: nowrap; }
.lp-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; margin: 0; padding: 0.75rem 1.1rem 0; font-size: 0.84rem; color: var(--ink-strong); }
.lp-meta b { font-weight: 600; }
.lp-meta span { font-family: var(--mono); font-size: 0.72rem; color: var(--ink); }
.lp-load { padding: 0.95rem 1.1rem 0.85rem; }
.lp-gauge { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; margin: 0.75rem 0 0; }
.lp-gk { font-size: 0.74rem; color: var(--ink-muted); }
.lp-gv { font-family: var(--mono); font-size: 0.76rem; color: var(--ink-strong); }
.lp-gv b { font-weight: 500; color: var(--link-ink); }
.lp-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; margin: 0.4rem 0 0; font-size: 0.68rem; color: var(--ink-muted); }
.lp-pal { margin-left: auto; font-family: var(--mono); color: var(--ink); }
.lp-res { margin: 0; padding: 0.35rem 1.1rem 0.55rem; list-style: none; border-top: 1px solid var(--ink-line); }
.lp-r { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 16px; gap: 0.6rem; align-items: center; padding: 0.36rem 0; }
.lp-rk { font-size: 0.74rem; color: var(--ink-muted); }
.lp-rv { min-width: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-strong); }
.lp-ok { width: 16px; height: 16px; fill: none; stroke: var(--link-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.7rem 1.1rem 0.8rem;
  border-top: 1px solid var(--ink-line);
  border-radius: 0 0 0.95rem 0.95rem;
  background: rgba(252, 97, 45, 0.05);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-strong);
}
.lp-foot-ic { width: 26px; height: 26px; }
.lp-foot-ic svg { width: 15px; height: 15px; }
.lp-foot-ic::after { /* waiting for the team: a soft ring, only ever faded */
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(252, 97, 45, 0.5);
  opacity: 0;
}

/* Armed (versandabwicklung.js): the agent loads the truck space by space, front to back,
   a second pallet drops onto every stackable one; then carrier, dates and freight order */
.lp.is-busy .agent::before { opacity: 1; }
.lp.is-armed .slot::before, .lp.is-armed .slot[data-h="2"]::after { transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.lp.is-armed .slot:not(.is-set)::before { opacity: 0; transform: var(--off) scale(0.4); }
.lp.is-armed .slot:not(.is-set)[data-h="2"]::after { opacity: 0; transform: translateY(-5px); }
.lp.is-armed .slot.is-set[data-h="2"]::after { transition-delay: 0.12s; }
.lp.is-armed .lp-r { transition: opacity 0.35s ease, transform 0.35s ease; }
.lp.is-armed .lp-r:not(.is-set) { opacity: 0; transform: translateX(-4px); }
.lp.is-armed .lp-foot { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.lp.is-armed.is-wait .lp-foot { opacity: 1; transform: none; }
.lp.is-wait .lp-foot-ic::after { animation: lp-ring 2.6s ease-in-out 0.4s 1 both; }
.lp.is-fade .slot::before, .lp.is-fade .slot[data-h="2"]::after, .lp.is-fade .lp-r, .lp.is-fade .lp-foot { opacity: 0; transition: opacity 0.5s ease; }
.lp.no-anim, .lp.no-anim *, .lp.no-anim *::before, .lp.no-anim *::after { transition: none !important; animation: none !important; }
@keyframes lp-ring { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } 50% { opacity: 0.15; } }

@container (max-width: 430px) {
  .lp-head { padding-left: 1.4rem; }
  .lp-from { display: none; }
  .lp-meta, .lp-load, .lp-res, .lp-foot { padding-left: 0.9rem; padding-right: 0.9rem; }
  .lp-r { grid-template-columns: 5.6rem minmax(0, 1fr) 16px; gap: 0.5rem; }
  .lp-rv { font-size: 0.7rem; }
  .lp-pal { margin-left: 0; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.uc .hero-card.uc-hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: 2.6rem; }
}
@media (max-width: 1023px) {
  body.uc .hero-card.uc-hero { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; min-height: 0; }
  .uc-hero-text { max-width: 40rem; }
  .lp { max-width: 560px; padding-left: 22px; }
  .lp-card { margin-left: 0; }
}
@media (max-width: 480px) {
  body.uc .hero-card.uc-hero { padding: 56px 18px 22px; }
  body.uc .uc-hero .hero-cta { flex-direction: row; flex-wrap: wrap; }
  body.uc .uc-hero .hero-cta .btn-cta { width: auto; padding-left: 26px; padding-right: 26px; }
  .uc-checks li { font-size: 0.82rem; }
  .lp { padding-left: 12px; }
  .lp-agent { top: -18px; left: -12px; width: 38px; height: 38px; }
  .lp .agent svg { width: 23px; height: 23px; }
}

/* ============ 2 · DAS PROBLEM (ice world) ============ */
.manual { color: var(--ink); }
.manual-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.1rem);
}
.manual-title { font-size: 1.05rem; font-weight: 600; color: var(--ink-strong); }
.manual-count { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-muted); }
.manual-count b { font-weight: 500; color: var(--human-ink); }

/* One delivery by hand: four moments, days apart, each in other tools */
.week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.25rem); align-items: start; }
.day {
  min-width: 0;
  background: #ffffff;
  border: 1px solid rgba(2, 29, 46, 0.1);
  border-radius: 0.9rem;
  box-shadow: 0 14px 34px rgba(6, 42, 63, 0.08), 0 1px 2px rgba(6, 42, 63, 0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.day-head {
  display: flex;
  align-items: center;
  min-height: 3.35rem;
  margin: 0;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--ink-line);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-strong);
}
.tasks { margin: 0; padding: 0.35rem 0 0.45rem; list-style: none; }
.task {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 0.6rem;
  row-gap: 0.2rem;
  align-items: center;
  padding: 0.45rem 1rem;
}
.task::before { /* the step in hand: hidden in the still image */
  content: '';
  position: absolute;
  inset: 0 0.45rem;
  border-radius: 0.45rem;
  background: rgba(252, 97, 45, 0.08);
  box-shadow: inset 2px 0 0 var(--human);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.task-mark {
  position: relative;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(2, 29, 46, 0.18);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.task-mark svg { width: 12px; height: 12px; fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.2s ease; }
.task-what { position: relative; font-size: 0.82rem; line-height: 1.35; color: var(--ink-strong); }
.tool {
  position: relative;
  grid-column: 2;
  justify-self: start;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--ink-muted);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.task.is-cur::before { opacity: 1; }
.task.is-cur .tool { color: var(--human-ink); border-color: rgba(252, 97, 45, 0.45); }
.task.is-done .task-mark { background: var(--human); border-color: var(--human); }
.task.is-done .task-mark svg { opacity: 1; }
.day.is-day { border-color: rgba(252, 97, 45, 0.45); box-shadow: 0 14px 34px rgba(252, 97, 45, 0.1), 0 1px 2px rgba(6, 42, 63, 0.06); }
/* The still image: every step done by hand */
.manual:not(.is-armed) .task-mark { background: var(--human); border-color: var(--human); }
.manual:not(.is-armed) .task-mark svg { opacity: 1; }
.week-note { display: flex; align-items: center; gap: 0.5rem; margin: 1.15rem 0 0; font-size: 0.82rem; font-weight: 500; line-height: 1.45; color: var(--human-ink); }
.week-note svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.manual.no-anim, .manual.no-anim *, .manual.no-anim *::before, .manual.no-anim *::after { transition: none !important; }
@media (max-width: 1023px) {
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-head { min-height: 0; }
}
@media (max-width: 560px) {
  .week { grid-template-columns: minmax(0, 1fr); }
}

/* Three mistakes, each with the data it shows up in */
.slips { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.slips-lead { margin: 0 0 1.3rem; font-size: 1.05rem; font-weight: 600; color: var(--ink-strong); }
.slips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem clamp(1.2rem, 2.6vw, 2.2rem); }
.slip h3 { margin: 1.05rem 0 0.35rem; font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: var(--ink-strong); }
.slip p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--ink-muted); }
.slip-viz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 132px;
  padding: 0.95rem 1.05rem;
  border-radius: 0.85rem;
  background: #ffffff;
  border: 1px solid var(--ink-line);
  box-shadow: 0 12px 28px rgba(6, 42, 63, 0.06);
}
.mini { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.74rem; color: var(--ink); }
.mini th { padding: 0 0.4rem 0.45rem 0; font-weight: 400; text-align: left; color: var(--ink-muted); border-bottom: 1px solid var(--ink-line); white-space: nowrap; }
.mini td { padding: 0.4rem 0.4rem 0 0; white-space: nowrap; }
.mini .num { text-align: right; }
.mini td.bad { color: var(--human-ink); font-weight: 500; background: rgba(252, 97, 45, 0.09); }
.slip-tag {
  align-self: flex-start;
  margin-top: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(252, 97, 45, 0.1);
  color: var(--human-ink);
  font-size: 0.74rem;
  font-weight: 600;
}
/* A short truck, full; two pairs that were counted as stackable stand too high,
   and two pallets are left behind its doors */
.truck--mini { --cols: 8; grid-template-columns: 6.4fr 1.6fr; width: 80%; margin-left: auto; }
.truck--mini .truck-bed { aspect-ratio: 6.4 / 2.4; }
.slot--bad::before { background: #F59A74; }
.slot--bad[data-h="2"]::after { background: #FFE3D7; box-shadow: inset 0 0 0 1.5px var(--human); }
.slot--left::before { background: rgba(252, 97, 45, 0.1); box-shadow: none; outline: 1.5px dashed var(--human); outline-offset: -1.5px; }
@media (max-width: 860px) {
  .slips-grid { grid-template-columns: minmax(0, 1fr); }
  .truck--mini { width: min(80%, 17rem); }
}

/* ============ 3 · SO ARBEITET DER AGENT ============ */
/* The colour legend, once, where the deep begins */
body.uc .v2-text p.legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.94rem; color: rgba(255, 255, 255, 0.88); }
.legend span::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.legend-agent::before { background: var(--agent); }
.legend-team::before { background: var(--human); }

.flow { padding: clamp(1.1rem, 2.6vw, 2rem); }

/* Step list. Without JavaScript a numbered list; armed, a row of tabs with the
   active step's text below them. */
.flow-bar { display: flex; align-items: flex-start; gap: 1rem; }
.flow-steps { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.flow-step { margin: 0 0 1.1rem; }
.flow-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  font: inherit;
  text-align: left;
}
.flow-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(165, 216, 230, 0.45);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--agent);
}
.flow-name { font-size: 0.95rem; font-weight: 600; line-height: 1.3; hyphens: manual; }
.flow-prog { display: none; }
.flow-cap { margin: 0.35rem 0 0 calc(30px + 0.75rem); }
.flow-cap-title { display: none; }
.flow-text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); max-width: 60rem; }
.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(165, 216, 230, 0.45);
  text-underline-offset: 3px;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.inline-link:hover { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.8); }
.flow-play { display: none; }

.flow.is-armed .flow-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 0.45rem;
}
.flow.is-armed .flow-step { display: contents; }
.flow.is-armed .flow-tab {
  grid-row: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.3rem 0.2rem 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow.is-armed .flow-tab:hover { color: rgba(255, 255, 255, 0.85); }
.flow.is-armed .flow-num { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.flow.is-armed .flow-tab:hover .flow-num { transform: scale(1.06); }
.flow.is-armed .flow-tab:active .flow-num { transform: scale(0.96); }
.flow.is-armed .flow-name { font-size: 0.84rem; }
.flow.is-armed .flow-prog {
  display: block;
  position: absolute;
  left: 0;
  right: 0.3rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: rgba(165, 216, 230, 0.14);
  overflow: hidden;
}
.flow.is-armed .flow-prog::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--agent);
  transform: scaleX(0);
  transform-origin: left center;
}
.flow.is-armed .flow-step.is-active .flow-tab { color: #ffffff; }
.flow.is-armed .flow-step.is-active .flow-num { background: var(--agent); border-color: var(--agent); color: var(--bg); }
.flow.is-armed .flow-step.is-done .flow-num { background: rgba(165, 216, 230, 0.16); border-color: rgba(165, 216, 230, 0.3); }
.flow.is-armed .flow-step.is-done .flow-prog::after,
.flow.is-armed .flow-step.is-active .flow-prog::after { transform: scaleX(1); }
.flow.is-armed.is-playing .flow-step.is-active .flow-prog::after { animation: flow-prog var(--dur, 5s) linear both; }
.flow.is-armed.is-playing.is-held .flow-step.is-active .flow-prog::after { animation-play-state: paused; }
@keyframes flow-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.flow.is-armed .flow-cap {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.05rem 0 0;
  border-top: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.flow.is-armed .flow-step.is-active .flow-cap { opacity: 1; visibility: visible; transition: opacity 0.35s ease 0.05s, visibility 0s; }
.flow.is-armed[data-step="0"] .flow-step:first-child .flow-cap { opacity: 1; visibility: visible; }

.flow.is-armed .flow-play {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s ease;
}
.flow.is-armed .flow-play:hover { background: rgba(255, 255, 255, 0.1); }
.flow.is-armed .flow-play:active { transform: scale(0.95); }
.flow-play svg { width: 15px; height: 15px; fill: currentColor; }
.flow-play[aria-pressed="true"] .ic-play, .flow-play[aria-pressed="false"] .ic-pause { display: none; }

/* Stage: what the agent looks at (left), the plan that builds up (right) */
.flow-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: center;
  margin-top: 1.5rem;
}
.flow:not(.is-armed) .flow-stage { align-items: start; } /* without JavaScript: everything at once, top to bottom */
.flow-left { display: grid; gap: 1.2rem; min-width: 0; container-type: inline-size; }
.flow-view { min-width: 0; }
.flow.is-armed .flow-left > .flow-view { grid-area: 1 / 1; align-self: center; }
.view-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; font-family: var(--mono); font-size: 0.76rem; line-height: 1.45; color: var(--agent); }
.view-title svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.view-calc, .view-rate, .view-time, .view-out {
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
}

/* Header bar and paper: the ERP order, the e-mail, the freight order */
.mailhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 0.85rem 0.85rem 0 0;
  background: rgba(255, 255, 255, 0.035);
  color: #ffffff;
  font-size: 0.9rem;
}
.mailhead svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mailhead-from { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; font-weight: 600; white-space: nowrap; }
.mailhead-file { min-width: 0; overflow: hidden; font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }
.paper {
  padding: 1.1rem 1.2rem 1.15rem;
  border-radius: 0 0 0.85rem 0.85rem;
  background: #F7FAFB;
  color: var(--ink);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
}
.paper p { margin: 0; }
.paper-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; font-size: 0.98rem; font-weight: 700; line-height: 1.45; color: var(--ink-strong); }
.paper-sub { font-size: 0.76rem; font-weight: 500; color: var(--ink-muted); }
.paper mark.src {
  padding: 0;
  margin: 0 0.1em;
  border-radius: 0.2em;
  box-shadow: 0 0 0 0.18em var(--agent);
  background: var(--agent);
  color: var(--ink-strong);
  font-weight: 500;
  white-space: nowrap;
}

/* Step 1: the new order in your ERP */
.po-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.5rem !important; font-size: 0.8rem; line-height: 1.8; color: var(--ink); }
.op { width: 100%; margin-top: 0.75rem; border-collapse: collapse; }
.op th { padding: 0 0.5rem 0.4rem 0; font-size: 0.64rem; font-weight: 500; text-align: left; white-space: nowrap; color: var(--ink-muted); border-bottom: 1px solid var(--ink-line); }
.op td { padding: 0.45rem 0.5rem 0.3rem 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink); }
.op .num { text-align: right; white-space: nowrap; }
.op th:last-child, .op td:last-child { padding-right: 0.15rem; }
.op .op-pos { width: 4.2rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-muted); }
.op td.num { font-family: var(--mono); font-size: 0.74rem; }
.po-rules { display: grid; gap: 0.3rem; margin: 0.8rem 0 0; padding: 0.7rem 0 0; list-style: none; border-top: 1px solid var(--ink-line); }
.po-rules li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; color: var(--ink-muted); }
.po-rules svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--link-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 470px) {
  .op .op-pos { width: 2.4rem; }
  .op th.op-pos { font-size: 0; }
  .op th.op-pos::after { content: '#'; font-size: 0.64rem; } /* "Position" does not fit; the numbers say it */
  .mailhead-file { display: none; }
}

/* Step 2: quantity by packing unit, then the spaces each position takes */
.pc { margin: 0; padding: 0; list-style: none; }
.pc-row, .pc-sum {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) 5rem 7.6rem;
  gap: 0.6rem;
  align-items: start;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
}
.pc-row:first-child { border-top: 0; padding-top: 0.15rem; }
.pc-pos { padding-top: 0.05rem; font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); }
.pc-what { display: flex; flex-direction: column; min-width: 0; }
.pc-what b { font-size: 0.84rem; font-weight: 600; color: #ffffff; }
.pc-what small, .pc-sp small { margin-top: 0.1rem; font-size: 0.7rem; line-height: 1.35; color: var(--text-muted); }
.pc-pal, .pc-sp { display: flex; flex-direction: column; font-size: 0.7rem; color: var(--text-muted); }
.pc-pal b, .pc-sp b { font-family: var(--mono); font-size: 0.92rem; font-weight: 500; line-height: 1.3; color: #ffffff; }
.pc-sp b { color: var(--agent); }
.pc-st { display: inline-flex; align-items: center; gap: 0.3rem; }
.pc-st svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-sum { grid-template-columns: minmax(0, 1fr) 5rem 7.6rem; padding-top: 0.65rem; border-top: 1.5px solid rgba(165, 216, 230, 0.3); }
.pc-sum-k { font-size: 0.8rem; font-weight: 600; color: #ffffff; }
.pc-over { display: flex; align-items: center; gap: 0.6rem; margin: 0.55rem 0 0; padding: 0.6rem 0.75rem; border-radius: 0.6rem; border: 1px solid rgba(252, 97, 45, 0.55); background: rgba(252, 97, 45, 0.1); font-size: 0.82rem; font-weight: 600; color: var(--human-text); }
.pc-over-ic { flex: none; display: inline-flex; color: var(--human); }
.pc-over-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pc-src { display: flex; align-items: center; gap: 0.45rem; margin: 0.7rem 0 0; font-size: 0.72rem; color: var(--text-muted); }
.pc-src svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 430px) {
  .pc-row { grid-template-columns: 1.1rem minmax(0, 1fr) 3.6rem 5.4rem; gap: 0.45rem; }
  .pc-sum { grid-template-columns: minmax(0, 1fr) 3.6rem 5.4rem; gap: 0.45rem; }
}

/* Step 3: the e-mail, released and sent; the answer changes the order */
.paper-mail { border-radius: 0 0 0.85rem 0.85rem; }
.pm-text { font-size: 0.88rem; line-height: 1.6; color: var(--ink-strong); }
.pm-send { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin-top: 0.85rem; padding-top: 0.8rem; border-top: 1px solid var(--ink-line); }
.pm-state { display: grid; min-width: 0; font-size: 0.74rem; font-weight: 600; }
.pm-state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.35rem; }
.pm-wait { color: var(--human-ink); opacity: 0; } /* the still image shows it sent */
.pm-sent { color: var(--link-ink); }
.pm-sent svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.approve-btn {
  position: relative;
  flex: none;
  display: inline-grid;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  background: var(--human);
  color: var(--bg);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(252, 97, 45, 0.28);
}
.approve-btn::after { /* waiting for the team: a soft ring, only ever faded */
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgba(252, 97, 45, 0.55);
  opacity: 0;
  pointer-events: none;
}
.ab-label { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; white-space: nowrap; }
.ab-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-label--todo { opacity: 0; }
.reply, .mail-result, .fa-cal { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.8rem 0 0; font-size: 0.84rem; line-height: 1.5; }
.reply svg, .mail-result svg, .fa-cal svg { flex: none; width: 17px; height: 17px; margin-top: 0.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reply { padding: 0.65rem 0.85rem; border-left: 2px solid var(--agent); border-radius: 0 0.5rem 0.5rem 0; background: rgba(165, 216, 230, 0.07); color: rgba(255, 255, 255, 0.86); }
.reply b { font-weight: 600; color: #ffffff; }
.mail-result { color: var(--agent); font-weight: 600; }
.mail-result svg { stroke-width: 2.4; }

/* Step 4: your freight cost table, the cheapest carrier that fits */
.rt { width: 100%; border-collapse: collapse; }
.rt th, .rt td { padding: 0.5rem 0.6rem 0.5rem 0; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rt thead th { padding-top: 0; font-size: 0.68rem; font-weight: 500; color: var(--text-muted); }
.rt tbody th { font-size: 0.84rem; font-weight: 600; color: #ffffff; }
.rt td { font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); }
.rt .num { text-align: right; padding-right: 0.2rem; font-family: var(--mono); font-size: 0.8rem; }
.rt tbody tr { transition: background-color 0.3s ease, opacity 0.3s ease; }
.rt td svg { width: 14px; height: 14px; margin-left: 0.35rem; vertical-align: -2px; fill: none; stroke: var(--agent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rt-pick th, .rt-pick td { background: rgba(165, 216, 230, 0.12); color: var(--agent); }
.rt-pick th { box-shadow: inset 3px 0 0 var(--agent); padding-left: 0.6rem; }
.rt-out th, .rt-out .num { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4); }
.rt-why { font-size: 0.74rem; color: var(--human-text); }
@container (max-width: 380px) {
  .rt td { white-space: normal; }
  .rt-why { display: block; line-height: 1.35; }
}
.rt-use { display: grid; gap: 0.45rem; margin: 0.95rem 0 0; padding: 0; list-style: none; }
.rt-use li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.rt-use b { font-family: var(--mono); font-weight: 500; color: var(--agent); }
.rt-use svg { flex: none; width: 16px; height: 16px; margin-top: 0.05rem; fill: none; stroke: var(--agent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Step 5: register when your rule says; a marker in the calendar until then */
.tm-rule { margin: -0.35rem 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.86); }
.tm { position: relative; height: 4.6rem; margin: 2.5rem 0.5rem 0.4rem; }
.tm::before { content: ''; position: absolute; left: 0; right: 0; top: 1.55rem; height: 2px; border-radius: 2px; background: rgba(165, 216, 230, 0.3); transform-origin: left center; }
.tm-gap { position: absolute; left: 36%; width: 32%; top: calc(1.55rem - 1px); height: 4px; background: repeating-linear-gradient(90deg, #0B3449 0 5px, transparent 5px 9px); } /* not to scale: days in between */
.tm-week { position: absolute; left: 26%; right: 0; top: -1.15rem; height: 0.8rem; border: 1.5px solid rgba(165, 216, 230, 0.55); border-bottom: 0; border-radius: 4px 4px 0 0; }
.tm-week span { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); font-size: 0.68rem; font-weight: 600; color: var(--agent); white-space: nowrap; }
.tm-pt { position: absolute; top: 0; left: var(--x); width: 0; }
.tm-pt::before { content: ''; position: absolute; top: calc(1.55rem - 4px); left: -5px; width: 10px; height: 10px; border-radius: 50%; background: #0B3449; border: 2px solid var(--agent); }
.tm-pt b, .tm-pt span { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; }
.tm-pt b { top: 0; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: #ffffff; }
.tm-pt span { top: 2.2rem; font-size: 0.7rem; color: var(--text-muted); }
.tm-pt--start b, .tm-pt--start span { transform: none; left: -5px; }
.tm-pt--end b, .tm-pt--end span { transform: translateX(-100%); left: 5px; }
.tm-pt--due::before { background: var(--agent); box-shadow: 0 0 0 4px rgba(165, 216, 230, 0.2); }
.tm-pt--due span { color: var(--agent); font-weight: 600; }
.tm-checks { display: grid; gap: 0.4rem; margin: 0.5rem 0 0; padding: 0.85rem 0 0; list-style: none; border-top: 1px solid var(--border); }
.tm-checks li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.tm-checks svg { flex: none; width: 15px; height: 15px; margin-top: 0.08rem; fill: none; stroke: var(--agent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tm-merk { color: var(--text-muted) !important; }
.tm-merk svg { stroke: var(--text-muted); stroke-width: 1.7; }
.tm-go { display: flex; align-items: center; gap: 0.55rem; margin: 0.85rem 0 0; padding: 0.6rem 0.75rem; border-radius: 0.6rem; border: 1px solid rgba(165, 216, 230, 0.35); background: rgba(165, 216, 230, 0.1); font-size: 0.84rem; font-weight: 600; color: var(--agent); }
.tm-go svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Step 6: the freight order from your template, sent after the release */
.fa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem 1rem; margin: 0; }
.fa-grid > div { min-width: 0; }
.fa-grid dt { font-size: 0.66rem; color: var(--ink-muted); }
.fa-grid dd { margin: 0.1rem 0 0; font-family: var(--mono); font-size: 0.76rem; font-weight: 500; line-height: 1.4; color: var(--ink-strong); }
.fa-note { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.85rem !important; padding-top: 0.75rem; border-top: 1px solid var(--ink-line); font-size: 0.74rem; color: var(--ink-muted); }
.fa-note svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--link-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fa-cal { color: rgba(255, 255, 255, 0.86); }
.fa-cal svg { color: var(--agent); }
@container (max-width: 430px) {
  .fa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Step 7: scanned against registered, ticked off, booked, off to the invoice */
.scan-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; margin: 0; font-size: 0.8rem; color: #ffffff; }
.scan-k span:last-child { font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted); }
.scan-bar { position: relative; height: 0.7rem; margin-top: 0.55rem; border-radius: 4px; border: 1.5px solid rgba(165, 216, 230, 0.45); overflow: hidden; }
.scan-fill { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--agent) 0 calc(100% / 56 - 1px), transparent calc(100% / 56 - 1px) calc(100% / 56)); transform-origin: left center; }
.scan-v { display: flex; align-items: center; gap: 0.45rem; margin: 0.55rem 0 0; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--agent); }
.scan-v svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.out-list { display: grid; gap: 0.55rem; margin: 0.95rem 0 0; padding: 0.85rem 0 0; list-style: none; border-top: 1px solid var(--border); }
.out-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.82rem; line-height: 1.45; color: #ffffff; }
.out-list svg { flex: none; width: 16px; height: 16px; margin-top: 0.08rem; fill: none; stroke: var(--agent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* The plan: the order, the truck, the carrier, every release */
.flow-right { min-width: 0; container-type: inline-size; }
.draft {
  padding: 0.35rem 1.15rem 1.05rem;
  border: 1px solid rgba(165, 216, 230, 0.22);
  border-radius: 0.95rem;
  background: linear-gradient(180deg, rgba(165, 216, 230, 0.07), rgba(165, 216, 230, 0.02));
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.draft-head {
  display: flex;
  flex-wrap: wrap; /* on narrow phones the status moves under the title */
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 0.8rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(165, 216, 230, 0.16);
}
.draft-title { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; font-weight: 600; color: #ffffff; }
.draft-title svg { width: 18px; height: 18px; fill: none; stroke: var(--agent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.draft-status { display: grid; justify-items: end; }
.st { grid-area: 1 / 1; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.st-work { border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.7); opacity: 0; } /* the still image shows the finished state */
.st-done { background: var(--agent); color: var(--bg); }
.draft-rows { margin: 0; padding: 0.45rem 0 0.5rem; border-bottom: 1px solid rgba(165, 216, 230, 0.12); }
.draft-rows > div { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; padding: 0.2rem 0; }
.draft-rows dt { font-size: 0.74rem; color: var(--text-muted); }
.draft-rows dd { position: relative; margin: 0; min-width: 0; font-family: var(--mono); font-size: 0.76rem; line-height: 1.5; color: #ffffff; }
.val { display: inline-block; border-radius: 0.3em; }
.val-art { display: inline; } /* flows on after "Komplettladung", so a line never starts with its comma */
.draft-plan .val { display: inline; } /* a value on two lines keeps its label on the first */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; justify-self: end; }
.swap .v-from { visibility: hidden; } /* the still image shows the result */

/* The truck in the plan, with the table of positions under it */
.dload { padding: 1.35rem 0 0.6rem; border-bottom: 1px solid rgba(165, 216, 230, 0.12); }
.truck--plan { padding-left: 6.5%; }
.truck-over { /* the row behind the doors that does not fit: hidden in the still image */
  position: absolute;
  top: -2px;
  bottom: -2px;
  right: calc(100% + 1px);
  width: calc(100% / var(--cols) + 2px);
  border: 1.5px dashed var(--human);
  border-radius: 3px;
  opacity: 0;
}
.truck-over span { position: absolute; bottom: calc(100% + 3px); left: -1px; font-size: 0.64rem; font-weight: 600; color: var(--human-text); white-space: nowrap; }
.truck--plan .slot--cut { visibility: hidden; }
.truck--plan .slot--move { transform: translateX(100%); }
.dl-t { width: 100%; margin-top: 0.8rem; border-collapse: collapse; }
.dl-t th, .dl-t td { padding: 0.24rem 0 0.24rem 0.5rem; font-weight: 400; text-align: left; white-space: nowrap; }
.dl-t th:first-child { padding-left: 0; }
.dl-t thead th { padding-bottom: 0.35rem; font-size: 0.66rem; color: var(--text-muted); border-bottom: 1px solid rgba(165, 216, 230, 0.12); }
.dl-t tbody th { font-size: 0.74rem; color: rgba(255, 255, 255, 0.86); overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.dl-t .num { text-align: right; font-family: var(--mono); font-size: 0.74rem; color: #ffffff; }
.dl-t tbody tr:first-child th, .dl-t tbody tr:first-child td { padding-top: 0.4rem; }
.dl-t tfoot th, .dl-t tfoot td { padding-top: 0.4rem; border-top: 1px solid rgba(165, 216, 230, 0.12); font-size: 0.74rem; font-weight: 600; color: #ffffff; }
.dl-t tfoot .num { color: var(--agent); }
.dl-verdict { display: grid; justify-items: start; margin: 0.6rem 0 0; }
.dv { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.35rem; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.dv svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dv-over { border: 1px solid var(--human); background: rgba(252, 97, 45, 0.14); color: var(--human-text); opacity: 0; }
.dv-ok { background: rgba(165, 216, 230, 0.16); color: var(--agent); }
.draft-plan { border-bottom: 1px solid rgba(165, 216, 230, 0.12); }

/* Every release your team gave, one after the other */
.dfree { padding: 0.75rem 0 0; }
.dfree-k { margin: 0 0 0.5rem; font-size: 0.72rem; color: var(--text-muted); }
.dfree-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fg {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px 3px 24px;
  border-radius: 999px;
  background: rgba(165, 216, 230, 0.14);
  color: var(--agent);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.fg svg { position: absolute; left: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fg .fg-wait { stroke-width: 2; opacity: 0; }
@container (max-width: 420px) {
  .draft { padding-left: 0.9rem; padding-right: 0.9rem; }
  .draft-rows > div { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.5rem; }
  .dl-t th, .dl-t td { padding-left: 0.3rem; }
  .dl-t thead th { font-size: 0.6rem; }
  .dl-t tbody th { max-width: 5.8rem; font-size: 0.7rem; }
  .dl-t .num { font-size: 0.7rem; }
}
/* The narrowest phones: the quantities stay in the order on the left, the plan keeps pallets and spaces */
@container (max-width: 300px) {
  .dl-t th:nth-child(2), .dl-t td:nth-child(2) { display: none; }
  .dl-t tbody th { max-width: none; }
}
.flow-note { margin: 1rem 0 0; font-size: 0.74rem; color: rgba(157, 174, 184, 0.75); text-align: right; }

/* A value on its way from the ERP order into the plan */
.flyer { position: absolute; z-index: 5; top: 0; left: 0; pointer-events: none; will-change: transform; }
.flyer > span {
  display: inline-block;
  padding: 0 0.32em;
  border-radius: 0.3em;
  background: var(--agent);
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* ---- Armed (versandabwicklung.js): the stage tells the steps in order ---- */
.flow.is-armed .flow-view { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.flow.is-armed:is([data-step="0"], [data-step="1"]) .view-order,
.flow.is-armed[data-step="2"] .view-calc,
.flow.is-armed[data-step="3"] .view-mail,
.flow.is-armed[data-step="4"] .view-rate,
.flow.is-armed[data-step="5"] .view-time,
.flow.is-armed[data-step="6"] .view-fa,
.flow.is-armed[data-step="7"] .view-out { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.08s, visibility 0s; }

/* The plan before the agent has filled it: faint bars where the values go */
.flow.is-armed .draft-rows dd::before {
  content: '';
  position: absolute;
  top: 0.4em;
  left: 0;
  width: min(9rem, 80%);
  height: 0.75em;
  border-radius: 4px;
  background: rgba(165, 216, 230, 0.09);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.flow.is-armed .draft [data-field] { opacity: 0; transition: opacity 0.35s ease; }
.flow.is-armed .draft [data-field].is-in { opacity: 1; }
.flow.is-armed .draft [data-field].flash { transition: none; animation: val-flash 1.4s ease-out both; }
@keyframes val-flash {
  from { background-color: rgba(165, 216, 230, 0.42); box-shadow: 0 0 0 3px rgba(165, 216, 230, 0.42); }
  to { background-color: rgba(165, 216, 230, 0); box-shadow: 0 0 0 3px rgba(165, 216, 230, 0); }
}
.flow.is-armed .draft-meta dd:has(.is-in)::before { opacity: 0; }
.flow.is-armed .val-art, .flow.is-armed .val-s4, .flow.is-armed .val-s5, .flow.is-armed .val-s6, .flow.is-armed .val-s7 { opacity: 0; transition: opacity 0.4s ease; }
/* A number appears as a whole (the plain one, or the pair that changes later); inside a
   pair, the old value gives way to the new one on its own clock */
.flow.is-armed .dl-t td > .n, .flow.is-armed .dl-t .swap-n { opacity: 0; transition: opacity 0.35s ease; }
.flow.is-armed .swap .v-from { visibility: visible; transition: opacity 0.35s ease; }
.flow.is-armed .swap .v-to { opacity: 0; transition: opacity 0.4s ease; }

/* The truck waits empty; slots appear in loading order */
.flow.is-armed .truck--plan .slot--cut { visibility: visible; }
.flow.is-armed .truck--plan .slot--move { transform: none; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.flow.is-armed .truck--plan .slot::before,
.flow.is-armed .truck--plan .slot[data-h="2"]::after { opacity: 0; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, box-shadow 0.35s ease; }
.flow.is-armed .truck--plan .slot::before { transform: var(--off) scale(0.4); }
.flow.is-armed .truck--plan .slot[data-h="2"]::after { transform: translateY(-5px); }
.flow.is-armed .truck-over { transition: opacity 0.35s ease; }
.flow.is-armed .dv { transition: opacity 0.35s ease; }
.flow.is-armed .dv-ok { opacity: 0; }
.flow.is-armed .fg { opacity: 0; background: rgba(252, 97, 45, 0.12); color: var(--human-text); box-shadow: inset 0 0 0 1px rgba(252, 97, 45, 0.6); transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.flow.is-armed .fg .fg-wait { opacity: 1; transition: opacity 0.25s ease; }
.flow.is-armed .fg .fg-ok { opacity: 0; transition: opacity 0.25s ease; }
.flow.is-armed .st { transition: opacity 0.3s ease; }
.flow.is-armed .st-work { opacity: 1; }
.flow.is-armed .st-done { opacity: 0; }

/* Step 1: the marks light up; versandabwicklung.js flies the values into the plan */
.flow.is-armed .view-order mark.src { background: transparent; box-shadow: 0 0 0 0.18em transparent; color: inherit; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.flow.is-armed.s1 .view-order mark.src { background: var(--agent); box-shadow: 0 0 0 0.18em var(--agent); color: var(--ink-strong); transition-delay: calc(0.35s + var(--k) * 0.16s); }
.flow.is-armed .po-rules li { opacity: 0; transform: translateY(3px); transition: opacity 0.35s ease, transform 0.35s ease; }
.flow.is-armed.s1 .po-rules li { opacity: 1; transform: none; transition-delay: 2.4s; }
.flow.is-armed.s1 .po-rules li + li { transition-delay: 2.8s; }
.flow.is-armed.s1 .val-art { opacity: 1; transition-delay: 3.4s; }

/* Step 2: position by position the pallets and spaces; the truck fills, two spaces stay outside */
.flow.is-armed .pc-row, .flow.is-armed .pc-sum, .flow.is-armed .pc-over, .flow.is-armed .pc-src { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.flow.is-armed.s2 .pc-row { opacity: 1; transform: none; transition-delay: calc(0.3s + var(--k) * 0.5s); }
.flow.is-armed.s2 .pc-sum { opacity: 1; transform: none; transition-delay: 2.5s; }
.flow.is-armed.s2 .pc-src { opacity: 1; transform: none; transition-delay: 2.8s; }
.flow.is-armed.s2 .pc-over { opacity: 1; transform: none; transition-delay: 3.3s; }
.flow.is-armed.s2 .dl-t tbody td > .n, .flow.is-armed.s2 .dl-t tbody .swap-n { opacity: 1; transition-delay: calc(0.55s + var(--k) * 0.5s); }
.flow.is-armed.s2 .dl-t tfoot .swap-n { opacity: 1; transition-delay: 2.6s; }
.flow.is-armed.s2 .truck--plan .slot::before { opacity: 1; transform: var(--off); transition-delay: calc(0.5s + var(--i) * 55ms); }
.flow.is-armed.s2 .truck--plan .slot[data-h="2"]::after { opacity: 1; transform: none; transition-delay: calc(0.62s + var(--i) * 55ms); }
.flow.is-armed.s2 .truck--plan .slot--over::before { background: rgba(252, 97, 45, 0.16); box-shadow: inset 0 0 0 1.5px var(--human); }
.flow.is-armed.s2 .truck-over { opacity: 1; transition-delay: 2.7s; }
.flow.is-armed.s2 .dv-over { opacity: 1; transition-delay: 3s; }

/* Step 3: released and sent, the answer comes in; the truck is planned anew and fits */
.flow.is-armed .view-mail .reply, .flow.is-armed .view-mail .mail-result { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.flow.is-armed.s3 .view-mail .reply { opacity: 1; transform: none; transition-delay: 3.1s; }
.flow.is-armed.s3 .view-mail .mail-result { opacity: 1; transform: none; transition-delay: 4.6s; }
.flow.is-armed .pm-wait { opacity: 1; transition: opacity 0.25s ease; }
.flow.is-armed .pm-sent { opacity: 0; transition: opacity 0.25s ease; }
.flow.is-armed .approve-btn::after { transition: opacity 0.3s ease; }
.flow.is-armed .ab-label--todo { opacity: 1; transition: opacity 0.25s ease; }
.flow.is-armed .ab-label--done { opacity: 0; transition: opacity 0.25s ease; }
.flow.is-armed.s3 .view-mail .approve-btn::after { animation: approve-wait 1.4s ease-in-out 0.6s 1 both; }
.flow.is-armed.s3 .view-mail .approve-btn { animation: approve-press 0.45s ease-out 2s both; }
.flow.is-armed.s3 .view-mail .ab-label--todo { opacity: 0; transition-delay: 2.25s; }
.flow.is-armed.s3 .view-mail .ab-label--done { opacity: 1; transition-delay: 2.3s; }
.flow.is-armed.s3 .view-mail .pm-wait { opacity: 0; transition-delay: 2.35s; }
.flow.is-armed.s3 .view-mail .pm-sent { opacity: 1; transition-delay: 2.45s; }
@keyframes approve-wait { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes approve-press { 0% { transform: scale(1); } 40% { transform: scale(0.92); } 100% { transform: scale(1); } }
.flow.is-armed.s3 .fg-3a { opacity: 1; background: rgba(165, 216, 230, 0.14); color: var(--agent); box-shadow: none; transition-delay: 0.5s, 2.45s, 2.45s, 2.45s; }
.flow.is-armed.s3 .fg-3a .fg-wait { opacity: 0; transition-delay: 2.45s; }
.flow.is-armed.s3 .fg-3a .fg-ok { opacity: 1; transition-delay: 2.45s; }
.flow.is-armed.s3 .fg-3b { opacity: 1; background: rgba(165, 216, 230, 0.14); color: var(--agent); box-shadow: none; transition-delay: 3.4s, 4.1s, 4.1s, 4.1s; }
.flow.is-armed.s3 .fg-3b .fg-wait { opacity: 0; transition-delay: 4.1s; }
.flow.is-armed.s3 .fg-3b .fg-ok { opacity: 1; transition-delay: 4.1s; }
.flow.is-armed.s3 .swap .v-from { opacity: 0; transition-delay: 4.3s; }
.flow.is-armed.s3 .swap .v-to { opacity: 1; transition-delay: 4.5s; }
.flow.is-armed.s3 .dl-t tfoot .swap .v-from { transition-delay: 4.9s; }
.flow.is-armed.s3 .dl-t tfoot .swap .v-to { transition-delay: 5.1s; }
.flow.is-armed.s3 .truck--plan .slot--cut::before,
.flow.is-armed.s3 .truck--plan .slot--cut[data-h="2"]::after { opacity: 0; transform: var(--off) scale(0.4); transition-delay: 4.3s; }
.flow.is-armed.s3 .truck-over { opacity: 0; transition-delay: 4.4s; }
.flow.is-armed.s3 .truck--plan .slot--move { transform: translateX(100%); transition-delay: 4.6s; }
.flow.is-armed.s3 .truck--plan .slot--over::before { background: var(--pal-one); box-shadow: inset 0 0 0 1px var(--pal-one-line); transition-delay: 4.7s; }
.flow.is-armed.s3 .dv-over { opacity: 0; transition-delay: 5.2s; }
.flow.is-armed.s3 .dv-ok { opacity: 1; transition-delay: 5.3s; }

/* Step 4: the table, the one that does not fit, the cheapest that does */
.flow.is-armed .rt tbody tr { opacity: 0; transition: opacity 0.35s ease; }
.flow.is-armed.s4 .rt tbody tr { opacity: 1; transition-delay: calc(0.3s + var(--k) * 0.3s); }
.flow.is-armed .rt-out th, .flow.is-armed .rt-out .num { text-decoration-color: transparent; transition: color 0.3s ease, text-decoration-color 0.3s ease; color: #ffffff; }
.flow.is-armed .rt-out .num { color: rgba(255, 255, 255, 0.8); }
.flow.is-armed.s4 .rt-out th, .flow.is-armed.s4 .rt-out .num { color: var(--text-muted); text-decoration-color: rgba(255, 255, 255, 0.4); transition-delay: 1.7s; }
.flow.is-armed .rt-why { opacity: 0; transition: opacity 0.35s ease; }
.flow.is-armed.s4 .rt-why { opacity: 1; transition-delay: 1.75s; }
.flow.is-armed .rt-pick th, .flow.is-armed .rt-pick td { background: transparent; color: inherit; transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; }
.flow.is-armed .rt-pick th { color: #ffffff; box-shadow: inset 3px 0 0 transparent; }
.flow.is-armed .rt-pick td { color: rgba(255, 255, 255, 0.8); }
.flow.is-armed .rt-pick svg { opacity: 0; transition: opacity 0.3s ease; }
.flow.is-armed.s4 .rt-pick th, .flow.is-armed.s4 .rt-pick td { background: rgba(165, 216, 230, 0.12); color: var(--agent); transition-delay: 2.2s; }
.flow.is-armed.s4 .rt-pick th { box-shadow: inset 3px 0 0 var(--agent); }
.flow.is-armed.s4 .rt-pick svg { opacity: 1; transition-delay: 2.4s; }
.flow.is-armed .rt-use li { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.flow.is-armed.s4 .rt-use li { opacity: 1; transform: none; transition-delay: calc(2.8s + var(--k) * 0.4s); }
.flow.is-armed.s4 .val-s4 { opacity: 1; transition-delay: 3s; }

/* Step 5: the line, the dates, the marker; at the deadline the agent registers */
.flow.is-armed .tm::before { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.flow.is-armed.s5 .tm::before { transform: none; transition-delay: 0.3s; }
.flow.is-armed .tm-pt, .flow.is-armed .tm-gap, .flow.is-armed .tm-week { opacity: 0; transition: opacity 0.35s ease; }
.flow.is-armed.s5 .tm-pt { opacity: 1; transition-delay: calc(0.45s + var(--k) * 0.25s); }
.flow.is-armed.s5 .tm-gap { opacity: 1; transition-delay: 0.9s; }
.flow.is-armed.s5 .tm-week { opacity: 1; transition-delay: 1.6s; }
.flow.is-armed .tm-checks li, .flow.is-armed .tm-go { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease; }
.flow.is-armed.s5 .tm-merk { opacity: 1; transform: none; transition-delay: 1.9s; }
.flow.is-armed.s5 .tm-ok { opacity: 1; transform: none; transition-delay: calc(2.5s + var(--k) * 0.45s); }
.flow.is-armed.s5 .tm-go { opacity: 1; transform: none; transition-delay: 3.5s; }
.flow.is-armed .tm-merk span { text-decoration: line-through; text-decoration-color: transparent; transition: text-decoration-color 0.3s ease; }
.flow.is-armed.s5 .tm-merk span { text-decoration-color: rgba(255, 255, 255, 0.45); transition-delay: 3.6s; }
.flow.is-armed.s5 .val-s5 { opacity: 1; transition-delay: 3.7s; }

/* Step 6: the template fills, the team releases, Spediteur A confirms, the calendar takes it */
.flow.is-armed .fa-grid > div, .flow.is-armed .fa-note { opacity: 0; transform: translateY(3px); transition: opacity 0.35s ease, transform 0.35s ease; }
.flow.is-armed.s6 .fa-grid > div { opacity: 1; transform: none; transition-delay: calc(0.3s + var(--k) * 0.15s); }
.flow.is-armed.s6 .fa-note { opacity: 1; transform: none; transition-delay: 1.3s; }
.flow.is-armed .view-fa .pm-send { opacity: 0; transition: opacity 0.35s ease; }
.flow.is-armed.s6 .view-fa .pm-send { opacity: 1; transition-delay: 1.5s; }
.flow.is-armed.s6 .view-fa .approve-btn::after { animation: approve-wait 1.1s ease-in-out 1.6s 1 both; }
.flow.is-armed.s6 .view-fa .approve-btn { animation: approve-press 0.45s ease-out 2.6s both; }
.flow.is-armed.s6 .view-fa .ab-label--todo { opacity: 0; transition-delay: 2.85s; }
.flow.is-armed.s6 .view-fa .ab-label--done { opacity: 1; transition-delay: 2.9s; }
.flow.is-armed.s6 .view-fa .pm-wait { opacity: 0; transition-delay: 2.95s; }
.flow.is-armed.s6 .view-fa .pm-sent { opacity: 1; transition-delay: 3.05s; }
.flow.is-armed .view-fa .reply, .flow.is-armed .fa-cal { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.flow.is-armed.s6 .view-fa .reply { opacity: 1; transform: none; transition-delay: 3.7s; }
.flow.is-armed.s6 .fa-cal { opacity: 1; transform: none; transition-delay: 4.3s; }
.flow.is-armed.s6 .fg-6a { opacity: 1; background: rgba(165, 216, 230, 0.14); color: var(--agent); box-shadow: none; transition-delay: 1.5s, 3.05s, 3.05s, 3.05s; }
.flow.is-armed.s6 .fg-6a .fg-wait { opacity: 0; transition-delay: 3.05s; }
.flow.is-armed.s6 .fg-6a .fg-ok { opacity: 1; transition-delay: 3.05s; }
.flow.is-armed.s6 .fg-6b { opacity: 1; background: rgba(165, 216, 230, 0.14); color: var(--agent); box-shadow: none; transition-delay: 4.4s, 5s, 5s, 5s; }
.flow.is-armed.s6 .fg-6b .fg-wait { opacity: 0; transition-delay: 5s; }
.flow.is-armed.s6 .fg-6b .fg-ok { opacity: 1; transition-delay: 5s; }
.flow.is-armed.s6 .val-s6 { opacity: 1; transition-delay: 5.1s; }

/* Step 7: the scan runs up to 56, then calendar, pallet account and invoice */
.flow.is-armed .scan-fill { transform: scaleX(0); }
.flow.is-armed.s7 .scan-fill { transform: none; transition: transform 1.6s linear 0.4s; }
.flow.is-armed .scan-v, .flow.is-armed .out-list li { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.flow.is-armed.s7 .scan-v { opacity: 1; transform: none; transition-delay: 2.1s; }
.flow.is-armed.s7 .out-list li { opacity: 1; transform: none; transition-delay: calc(2.5s + var(--k) * 0.5s); }
.flow.is-armed.s7 .fg-7a { opacity: 1; background: rgba(165, 216, 230, 0.14); color: var(--agent); box-shadow: none; transition-delay: 0.5s, 2.2s, 2.2s, 2.2s; }
.flow.is-armed.s7 .fg-7a .fg-wait { opacity: 0; transition-delay: 2.2s; }
.flow.is-armed.s7 .fg-7a .fg-ok { opacity: 1; transition-delay: 2.2s; }
.flow.is-armed.s7 .fg-7b { opacity: 1; background: rgba(165, 216, 230, 0.14); color: var(--agent); box-shadow: none; transition-delay: 2.9s, 3.4s, 3.4s, 3.4s; }
.flow.is-armed.s7 .fg-7b .fg-wait { opacity: 0; transition-delay: 3.4s; }
.flow.is-armed.s7 .fg-7b .fg-ok { opacity: 1; transition-delay: 3.4s; }
.flow.is-armed.s7 .val-s7 { opacity: 1; transition-delay: 2.3s; }
.flow.is-armed.s7 .st-work { opacity: 0; transition-delay: 3.9s; }
.flow.is-armed.s7 .st-done { opacity: 1; transition-delay: 4s; }

/* A row's faint bar goes once its value is in */
.flow.is-armed.s4 .draft-plan > div:nth-child(1) dd::before { opacity: 0; transition-delay: 3s; }
.flow.is-armed.s5 .draft-plan > div:nth-child(2) dd::before { opacity: 0; transition-delay: 3.7s; }
.flow.is-armed.s6 .draft-plan > div:nth-child(3) dd::before { opacity: 0; transition-delay: 5.1s; }
.flow.is-armed.s7 .draft-plan > div:nth-child(4) dd::before { opacity: 0; transition-delay: 2.3s; }

/* Jumping back (or starting over) sets the new state at once */
.flow.no-anim, .flow.no-anim *, .flow.no-anim *::before, .flow.no-anim *::after { transition: none !important; animation: none !important; }

@media (max-width: 1100px) {
  .flow.is-armed .flow-name { font-size: 0.8rem; }
}
@media (max-width: 960px) {
  .flow-stage { grid-template-columns: minmax(0, 1fr); }
  .flow.is-armed .flow-left > .flow-view { align-self: start; }
}
/* Below 960px: numbers only in the row, the active step's name above its text */
@media (max-width: 960px) {
  .flow.is-armed .flow-steps { column-gap: 0.2rem; }
  .flow.is-armed .flow-tab { align-items: center; padding-bottom: 0.8rem; }
  .flow.is-armed .flow-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .flow.is-armed .flow-cap-title { display: block; margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; color: #ffffff; }
  .flow.is-armed .flow-prog { right: 0.1rem; }
  .flow-cap { margin-left: 0; }
}
@media (max-width: 420px) {
  .flow.is-armed .flow-num { width: 28px; height: 28px; font-size: 0.74rem; }
}

/* Where your team comes in, said once under the example */
.free-note, .detail-team { display: flex; align-items: center; gap: 0.75rem; margin: 1.2rem 0 0; max-width: 52rem; font-size: 0.94rem; font-weight: 500; line-height: 1.55; color: var(--human-text); }
.free-note-ic, .detail-team-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(252, 97, 45, 0.14); border: 1px solid rgba(252, 97, 45, 0.5); color: var(--human); }
.free-note-ic svg, .detail-team-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* The example at the release, field by field, on paper */
.detail { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.detail-cap { display: block; margin: 0 0 1.2rem; }
.cmp-kicker { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.74rem; line-height: 1.5; color: var(--agent); }
.detail h3 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: #ffffff; }
.detail-board { padding: 0.4rem 1.2rem 0.5rem; border-radius: 0.9rem; background: #F7FAFB; color: var(--ink); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34); }
.dt { width: 100%; border-collapse: collapse; }
.dt thead th { padding: 0.65rem 1rem 0.55rem 0; text-align: left; font-size: 0.68rem; font-weight: 500; color: var(--ink-muted); border-bottom: 1.4px solid rgba(30, 76, 102, 0.5); }
.dt tbody th, .dt td { padding: 0.75rem 1rem 0.75rem 0; vertical-align: top; text-align: left; border-bottom: 1px solid var(--ink-line); }
.dt tbody tr:last-child th, .dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody th { width: 13rem; font-size: 0.86rem; font-weight: 600; line-height: 1.45; color: var(--ink-strong); }
.dt td { padding-right: 0; font-size: 0.88rem; line-height: 1.6; color: #24465C; }
.dt-quote { font-style: italic; }
.dt-flag th, .dt-flag td { background: rgba(252, 97, 45, 0.07); }
.dt-flag th { box-shadow: inset 3px 0 0 var(--human); padding-left: 0.7rem; }
.detail-team { margin-top: 1.15rem; max-width: 46rem; }
@media (max-width: 760px) {
  .detail-board { padding: 0.2rem 0.95rem 0.4rem; }
  .dt, .dt tbody, .dt tr { display: block; }
  .dt thead { display: none; }
  .dt tr { padding: 0.8rem 0; border-bottom: 1px solid var(--ink-line); }
  .dt tbody tr:last-child { border-bottom: 0; }
  .dt tbody th, .dt td { display: block; width: auto !important; padding: 0; border-bottom: 0; }
  .dt td { padding-top: 0.25rem; font-size: 0.86rem; }
  .dt-flag { margin: 0 -0.95rem; padding-left: 0.95rem !important; padding-right: 0.95rem !important; background: rgba(252, 97, 45, 0.07); box-shadow: inset 3px 0 0 var(--human); }
  .dt-flag th, .dt-flag td { background: none; box-shadow: none; padding-left: 0; }
  .free-note, .detail-team { align-items: flex-start; }
}

/* ============ 4 · SONDERFÄLLE ============ */
.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.case { padding: 1.5rem 0 2.3rem; border-top: 1px solid var(--border); }
.case-viz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  height: 124px;
  padding: 0.9rem 1rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(165, 216, 230, 0.13);
}
.cv-line { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-family: var(--mono); font-size: 0.72rem; line-height: 1.45; color: #ffffff; }
.cv-line svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cv-muted { color: var(--text-muted); }
.cv-ok { color: var(--agent); }
.cv-bad { color: var(--human-text); }
.cv-team { color: var(--human-text); }
.cv-team svg, .cv-bad svg { stroke-width: 1.8; }
.cv-ic { color: var(--agent); stroke-width: 1.7 !important; }
.cv-x { color: var(--text-muted); }
.case h3 { margin: 1.15rem 0 0.45rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #ffffff; }
.case > p, .case-body > p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); }
/* The case with more to show: the full width, data left, text right */
.case--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1.2rem clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  padding-bottom: 2rem;
}
.case--wide .case-viz { height: auto; padding: 1rem 1.1rem; }
.case--wide h3 { margin-top: 0; font-size: 1.15rem; }
.case--wide .case-body > p { font-size: 0.96rem; }
.case-viz--part { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 1rem 1.6rem; align-items: center; }
.part-load { display: grid; gap: 0.55rem; min-width: 0; }
.part-k { margin: 0.15rem 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--text-muted); }
.sig { width: 100%; border-collapse: collapse; }
.sig th, .sig td { padding: 0.42rem 0.6rem 0.42rem 0; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sig .num { text-align: right; padding-right: 0.4rem; }
.sig tbody tr:last-child th, .sig tbody tr:last-child td { border-bottom: 0; }
.sig thead th { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }
.sig tbody th { font-size: 0.8rem; font-weight: 500; color: #ffffff; }
.sig td { font-family: var(--mono); font-size: 0.74rem; color: rgba(255, 255, 255, 0.8); }
.sig-pick th, .sig-pick td { background: rgba(165, 216, 230, 0.12); color: var(--agent); }
.sig-pick th { box-shadow: inset 3px 0 0 var(--agent); padding-left: 0.55rem; }
.sig-pick b { font-weight: 500; }
@media (max-width: 1023px) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cases { grid-template-columns: minmax(0, 1fr); }
  .case { padding-bottom: 1.8rem; }
  .case--wide h3 { font-size: 1.05rem; }
  .case--wide .case-body > p { font-size: 0.92rem; }
  .case-viz--part { grid-template-columns: minmax(0, 1fr); }
}

/* ============ 5 · ZAHLEN (the worked example, until measured values exist) ============ */
.calc { display: flex; flex-direction: column; gap: 1.1rem; }
.calc-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
/* With the sliders (JavaScript): sliders left, the result right */
.calc.is-armed { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.6rem clamp(2rem, 5vw, 4.5rem); align-items: center; }
.calc.is-armed .calc-result { padding-left: clamp(1.6rem, 4vw, 3.2rem); border-left: 1px solid var(--border); }
.calc-tag {
  align-self: flex-start;
  margin: 0;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 0.76rem;
  font-weight: 600;
  color: #ffffff;
}
.calc-inputs { display: grid; gap: 1rem; }
.calc-inputs[hidden] { display: none; }
.calc-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.45rem 1rem; }
.calc-k { font-size: 0.88rem; color: rgba(255, 255, 255, 0.86); }
.calc-out { font-family: var(--mono); font-size: 1.05rem; color: var(--agent); }
.calc-in input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--agent); cursor: pointer; }
.calc-in input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.calc-text { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.calc-text b { font-weight: 600; color: #ffffff; white-space: nowrap; }
/* One figure per full-time position, the share of the last one in orange (by area, see the script) */
.calc-people { display: flex; flex-wrap: wrap; gap: 6px; }
.calc-person { position: relative; display: inline-block; width: 52px; height: 52px; }
.calc-person svg { position: absolute; top: 0; left: 0; width: 52px; height: 52px; stroke-linecap: round; }
.cp-line { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.4; }
.cp-fill { position: absolute; top: 0; left: 0; bottom: 0; width: var(--f); overflow: hidden; transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.cp-fill svg { fill: var(--human); stroke: var(--human); stroke-width: 1.4; }
.calc-legend { margin: -0.3rem 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 760px) {
  .calc.is-armed { grid-template-columns: minmax(0, 1fr); }
  .calc.is-armed .calc-result { padding: 1.4rem 0 0; border-left: 0; border-top: 1px solid var(--border); }
}

/* ============ 6 · KONTROLLE (the release illustration of the home page) ============ */
body.uc .viz-release .station--neutral .station-text { max-width: 14rem; }
body.uc .release-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.4rem; }
@media (max-width: 860px) { body.uc .release-notes { grid-template-columns: minmax(0, 1fr); } }
body.uc .release-notes li { align-items: flex-start; line-height: 1.5; }
body.uc .release-notes li > span { max-width: 30rem; }
body.uc .release-notes q { color: #ffffff; }
body.uc .release-notes svg { margin-top: 1px; }

/* ============ 7 · AUFWAND, KOSTEN, SYSTEME ============ */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: clamp(2rem, 4vw, 2.8rem); }
.fact { padding: 1.5rem 0 0.4rem; border-top: 1px solid var(--border); }
.fact-viz {
  display: flex;
  height: 148px;
  padding: 0.95rem 1.05rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(165, 216, 230, 0.13);
}
.fact h3 { margin: 1.15rem 0 0.45rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #ffffff; }
.fact > p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); }

/* Step by step: a road with four stops; the still image has the truck at the first */
.route { flex-direction: column; justify-content: center; }
.road { position: relative; margin: 1.9rem 0 0.15rem; }
.stops { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.stops::before { /* the road, from the first stop to the last */
  content: '';
  position: absolute;
  top: 6px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: rgba(165, 216, 230, 0.28);
}
.stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; }
.stop-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #0A2C3E; border: 2px solid rgba(165, 216, 230, 0.45); }
.stop-label { font-size: 0.76rem; line-height: 1.3; color: rgba(255, 255, 255, 0.55); hyphens: manual; }
.stop:first-child .stop-dot { background: var(--agent); border-color: var(--agent); box-shadow: 0 0 0 4px rgba(165, 216, 230, 0.18); }
.stop:first-child .stop-label { color: #ffffff; font-weight: 600; }
.road-truck {
  position: absolute;
  top: -31px;
  left: 12.5%;
  width: 30px;
  height: 25px;
  margin-left: -15px;
  color: var(--agent);
}
.road-truck svg { display: block; width: 30px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Your systems stay: the agent connects to them, nothing new for your carriers */
.tools { flex-direction: column; justify-content: center; gap: 0.85rem; }
.tools-row { display: flex; align-items: center; gap: 0.5rem; }
.tools .agent { width: 40px; height: 40px; }
.tools .agent svg { width: 25px; height: 25px; }
.tools-link { flex: 1; min-width: 1.5rem; height: 0; border-top: 2px dashed rgba(165, 216, 230, 0.45); }
.tools-erp { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); font-size: 0.82rem; font-weight: 600; color: #ffffff; }
.tools-erp svg { width: 17px; height: 17px; fill: none; stroke: var(--agent); stroke-width: 1.6; }
.tools-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tc { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 7px; border-radius: 999px; background: rgba(165, 216, 230, 0.13); color: var(--agent); font-size: 0.72rem; font-weight: 600; }
.tc svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tc--no { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.55); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4); }

/* A stand-in sees the state at the order */
.cover { align-items: center; gap: 0.8rem; }
.cover-who { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--human-text); }
.cover-who svg { width: 36px; height: 36px; padding: 7px; border-radius: 50%; border: 1px dashed rgba(252, 97, 45, 0.6); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cover-who small { font-size: 0.64rem; font-weight: 600; }
.cover-card { flex: 1; min-width: 0; display: grid; gap: 4px; padding: 0.6rem 0.75rem; border-radius: 0.6rem; border: 1px solid rgba(165, 216, 230, 0.22); background: rgba(165, 216, 230, 0.06); }
.cover-head { margin-bottom: 2px; font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }
.cover-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; line-height: 1.35; color: #ffffff; }
.cover-row svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--agent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cover-row--open { color: var(--text-muted); }
.cover-row--open i { flex: none; width: 9px; height: 9px; margin: 0 2px; border-radius: 50%; border: 1.5px solid var(--text-muted); }
@media (max-width: 1023px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); column-gap: 1.6rem; align-items: start; }
  .fact-viz { grid-row: 1 / 3; }
  .fact h3 { margin-top: 0.1rem; }
  .fact { padding-bottom: 1.6rem; }
}
@media (max-width: 640px) {
  .fact { display: block; }
  .fact h3 { margin-top: 1.15rem; }
}

/* ============ 8 · FRAGEN ============ */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  padding: 1.15rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--agent); }
.faq-item summary svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--agent); stroke-width: 2; stroke-linecap: round; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p { margin: 0 0 1.3rem; max-width: 44rem; font-size: 0.97rem; line-height: 1.65; color: var(--text-muted); }

/* ============ 9 · DEMO ============ */
.closing-text { margin: 1.2rem 0 0; max-width: 34rem; font-size: 1.02rem; line-height: 1.65; color: var(--text-muted); }
body.uc .closing h2 { max-width: 36rem; }

/* ============ MOTION ============ */
/* Only position, size, colour and transparency move; nothing moves under reduced
   motion, and without JavaScript every illustration shows its complete still image. */
@media (prefers-reduced-motion: no-preference) {
  /* Entrance: text first, then the plan */
  .uc-title { animation: rise-in 0.7s var(--ease-out) 0.08s both; }
  .uc-lead { animation: rise-in 0.7s var(--ease-out) 0.2s both; }
  .uc-checks { animation: rise-in 0.7s var(--ease-out) 0.3s both; }
  .uc-release { animation: rise-in 0.7s var(--ease-out) 0.38s both; }
  .lp { animation: rise-in 0.8s var(--ease-out) 0.45s both; }

  /* Step by step, one run of 9 s: the truck drives from stop to stop, each lights up on arrival */
  .route.is-armed .road-truck { animation: road-drive 9s linear infinite both; animation-play-state: paused; }
  .route.is-armed .stop-dot { animation: stop-dot-0 9s linear infinite both; animation-play-state: paused; }
  .route.is-armed .stop-label { animation: stop-label-0 9s linear infinite both; animation-play-state: paused; }
  .route.is-armed .stop:nth-child(2) .stop-dot { animation-name: stop-dot-1; }
  .route.is-armed .stop:nth-child(2) .stop-label { animation-name: stop-label-1; }
  .route.is-armed .stop:nth-child(3) .stop-dot { animation-name: stop-dot-2; }
  .route.is-armed .stop:nth-child(3) .stop-label { animation-name: stop-label-2; }
  .route.is-armed .stop:nth-child(4) .stop-dot { animation-name: stop-dot-3; }
  .route.is-armed .stop:nth-child(4) .stop-label { animation-name: stop-label-3; }
  .route.is-running .road-truck, .route.is-running .stop-dot, .route.is-running .stop-label { animation-play-state: running; }

  .faq-item[open] p { animation: rise-in 0.35s var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  .flow *, .flow *::before, .flow *::after, .manual *, .lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; }
}

/* Road keyframes (1 s = 11.11 %): the truck leaves stop 1 at 1.3 s and arrives at stop 2 at
   2.3 s, at stop 3 at 4.3 s, at stop 4 at 6.3 s; it fades at 8.2 s and is back at stop 1 by
   9 s. Each stop lights up as the truck arrives and goes dark with the fade. */
@keyframes road-drive {
  0% { opacity: 0; left: 12.5%; }
  3.3% { opacity: 1; left: 12.5%; }
  14.4% { left: 12.5%; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  25.5% { left: 37.5%; }
  36.6% { left: 37.5%; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  47.7% { left: 62.5%; }
  58.8% { left: 62.5%; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  70% { left: 87.5%; }
  91% { opacity: 1; left: 87.5%; }
  95.5% { opacity: 0; left: 87.5%; }
  95.6%, 100% { opacity: 0; left: 12.5%; }
}
@keyframes stop-dot-0 { 0%, 2.5% { background-color: #0A2C3E; border-color: rgba(165, 216, 230, 0.45); box-shadow: none; } 4.5%, 91% { background-color: var(--agent); border-color: var(--agent); box-shadow: 0 0 0 4px rgba(165, 216, 230, 0.18); } 95.5%, 100% { background-color: #0A2C3E; border-color: rgba(165, 216, 230, 0.45); box-shadow: none; } }
@keyframes stop-dot-1 { 0%, 25.5% { background-color: #0A2C3E; border-color: rgba(165, 216, 230, 0.45); box-shadow: none; } 27.5%, 91% { background-color: var(--agent); border-color: var(--agent); box-shadow: 0 0 0 4px rgba(165, 216, 230, 0.18); } 95.5%, 100% { background-color: #0A2C3E; border-color: rgba(165, 216, 230, 0.45); box-shadow: none; } }
@keyframes stop-dot-2 { 0%, 47.7% { background-color: #0A2C3E; border-color: rgba(165, 216, 230, 0.45); box-shadow: none; } 49.7%, 91% { background-color: var(--agent); border-color: var(--agent); box-shadow: 0 0 0 4px rgba(165, 216, 230, 0.18); } 95.5%, 100% { background-color: #0A2C3E; border-color: rgba(165, 216, 230, 0.45); box-shadow: none; } }
@keyframes stop-dot-3 { 0%, 70% { background-color: #0A2C3E; border-color: rgba(165, 216, 230, 0.45); box-shadow: none; } 72%, 91% { background-color: var(--agent); border-color: var(--agent); box-shadow: 0 0 0 4px rgba(165, 216, 230, 0.18); } 95.5%, 100% { background-color: #0A2C3E; border-color: rgba(165, 216, 230, 0.45); box-shadow: none; } }
@keyframes stop-label-0 { 0%, 2.5% { color: rgba(255, 255, 255, 0.55); } 4.5%, 91% { color: #ffffff; } 95.5%, 100% { color: rgba(255, 255, 255, 0.55); } }
@keyframes stop-label-1 { 0%, 25.5% { color: rgba(255, 255, 255, 0.55); } 27.5%, 91% { color: #ffffff; } 95.5%, 100% { color: rgba(255, 255, 255, 0.55); } }
@keyframes stop-label-2 { 0%, 47.7% { color: rgba(255, 255, 255, 0.55); } 49.7%, 91% { color: #ffffff; } 95.5%, 100% { color: rgba(255, 255, 255, 0.55); } }
@keyframes stop-label-3 { 0%, 70% { color: rgba(255, 255, 255, 0.55); } 72%, 91% { color: #ffffff; } 95.5%, 100% { color: rgba(255, 255, 255, 0.55); } }