/* ============================================================================
   op-maat.css, concept 1 (7 okt 2026). Ligt bovenop site.css en assistent.css;
   alleen wat die nog niet hebben. Rustig, zoals de telefoonassistent.
   De werkstroom in de kop is in beide kleurstanden donker, net als het gesprek
   op de telefoonassistent en het scherm op de margeanalyse.
   ========================================================================== */

.om { --om-roest: #E8672C; --om-tekst: #F3F2EF; --om-stil: #8E939B; }

/* ---------- kop: de werkstroom ---------- */
.pa-filmkolom .om-stroom { width: 100%; }
.om-stroom {
  position: relative; display: grid; gap: 18px; margin: 0;
  padding: 20px 20px 22px; border-radius: 26px; color: var(--om-tekst);
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(232, 103, 44, .14), transparent 70%),
    radial-gradient(70% 45% at 0% 100%, rgba(18, 160, 187, .10), transparent 70%),
    #0b0d11;
  border: 1px solid var(--lijn-2);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--roest) 40%, transparent), var(--schaduw-3);
}
.om-stroom__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.om-stroom__wie { display: grid; gap: 2px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.om-stroom__wie span { font-size: 12px; font-weight: 500; color: var(--om-stil); }
.om-stroom__klaar {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #C9C6BF;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
}
.om-stroom__klaar i { width: 7px; height: 7px; border-radius: 50%; background: #5EC17F; }

/* de stappen: een lijn langs de bolletjes, die zich vult als de stappen aangaan */
/* De lijn ligt altijd achter de bolletjes: eigen laag (isolation) met de lijn
   onderop. Eerst dimden de hele stappen, en een gedimde stap is een eigen laag,
   waardoor de lijn er eerst vóór lag en bij het aangaan ineens achter sprong
   (Thijs, 8 okt). Nu dimt alleen de tekst en is het bolletje altijd dicht. */
.om-stappen { position: relative; isolation: isolate; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.om-stappen::before, .om-stappen::after {
  content: ""; position: absolute; z-index: -1; left: 25px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px;
}
.om-stappen::before { background: rgba(255, 255, 255, .08); }
.om-stappen::after { background: linear-gradient(var(--om-roest), #F59A6B); transform-origin: top; scale: 1 1; }
.om-stap {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px;
  padding: 12px 14px 12px 0; border-radius: 16px;
}
/* de volgorde voor de animatie (geen style-attribuut: de beveiligingskop staat dat niet toe) */
.om-stap { --i: 0; }
.om-stap:nth-child(2) { --i: 1; }
.om-stap:nth-child(3) { --i: 2; }
.om-stap:nth-child(4) { --i: 3; }
.om-stap__ico {
  grid-row: span 2; justify-self: center; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: #1A1F27; border: 1px solid rgba(255, 255, 255, .14);
}
.om-stap b { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; padding-top: 1px; }
.om-stap span:last-child { font-size: 13.5px; line-height: 1.45; color: #A9AAAD; }

/* Beweging (op-maat.js): stap voor stap aan, de lijn groeit mee tot het
   bolletje van de stap die bezig is, dan "Klaar", even staan, alles tegelijk
   uit. Zonder script of bij minder beweging staat alles aan. */
.om-stroom__klaar { transition: color .4s ease, background .4s ease, border-color .4s ease, opacity .7s ease; }
.om-stroom__klaar i { transition: background .4s ease, box-shadow .4s ease; }
.om-stroom.is-js .om-stroom__klaar:not(.is-klaar) { color: #8E939B; }
.om-stroom.is-js .om-stroom__klaar:not(.is-klaar) i { background: #E8A13A; animation: om-bezig 1.1s ease-in-out infinite; }
.om-stroom__klaar.is-klaar { color: #CFEFD9; background: rgba(94, 193, 127, .12); border-color: rgba(94, 193, 127, .35); }
.om-stroom__klaar.is-klaar i { box-shadow: 0 0 0 4px rgba(94, 193, 127, .2); }
@keyframes om-bezig { 50% { opacity: .35; } }

.om-stappen::after { scale: 1 var(--vul, 1); transition: scale .9s var(--veer); }
.om-stap { transition: background .5s ease; }
.om-stroom.is-js .om-stap > b, .om-stroom.is-js .om-stap > span:last-child { opacity: .4; transition: opacity .5s ease; }
.om-stroom.is-js .om-stap.is-aan > b, .om-stroom.is-js .om-stap.is-aan > span:last-child { opacity: 1; }
.om-stroom.is-js .om-stap.is-nu { background: rgba(255, 255, 255, .045); }
.om-stap__ico { background: var(--om-roest); border-color: #F59A6B; transition: color .4s ease, background .4s ease, border-color .4s ease, box-shadow .5s ease, scale .5s var(--veer); }
.om-stroom.is-js .om-stap:not(.is-aan) .om-stap__ico { color: #8E939B; background: #1A1F27; border-color: rgba(255, 255, 255, .14); }
.om-stroom.is-js .om-stap.is-nu .om-stap__ico { box-shadow: 0 0 0 6px rgba(232, 103, 44, .18), 0 0 26px rgba(232, 103, 44, .45); scale: 1.06; }
/* einde van een ronde: alles zakt tegelijk weg */
.om-stappen { transition: opacity .7s ease; }
.om-stroom.is-uit .om-stappen, .om-stroom.is-uit .om-stroom__klaar { opacity: .2; }

/* ---------- 1. een greep uit wat er kan: zelfde vorm als de telefoonassistent ---------- */
.om-lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 56px);
}
.om-lijst li { display: grid; align-content: start; gap: 10px; padding-top: 22px; border-top: 1px solid var(--lijn-2); }
.om-lijst b { margin-top: 6px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.015em; }
.om-lijst span:last-child { max-width: 32ch; font-size: 16px; line-height: 1.5; color: var(--tekst-2); }

/* het complete programma: één brede regel onder de zes, met een roestrand */
.om-programma {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 30px);
  border-radius: 22px; border: 1px solid var(--roest-rand);
  background: radial-gradient(80% 140% at 0% 0%, var(--roest-zacht), transparent 70%), var(--opp-2);
}
.om-programma > div { display: grid; gap: 8px; }
.om-programma b { font-size: clamp(20px, 1.8vw, 24px); font-weight: 650; letter-spacing: -.015em; }
.om-programma span:last-child { max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--tekst-2); }

/* ---------- 2. zo gaat het: vier stappen op een lijn ---------- */
.om-route {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px);
}
.om-route::before {
  content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 1px;
  background: linear-gradient(90deg, var(--roest-rand), color-mix(in srgb, var(--serie-2) 40%, transparent));
}
.om-route li { position: relative; display: grid; align-content: start; gap: 10px; }
.om-route__nr {
  justify-self: start; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  font-size: 17px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--roest-tekst); background: var(--opp-2); border: 1px solid var(--roest-rand);
}
.om-route b { margin-top: 8px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.015em; }
.om-route span:last-child { max-width: 28ch; font-size: 16px; line-height: 1.5; color: var(--tekst-2); }

.om-slot { margin-top: clamp(88px, 11vw, 150px); }

/* ---------- smaller ---------- */
@media (max-width: 900px) {
  .om-lijst { grid-template-columns: minmax(0, 1fr); }
  .om-lijst span:last-child { max-width: 46ch; }
  .om-route { grid-template-columns: minmax(0, 1fr); }
  .om-route::before { left: 27px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .om-route li { grid-template-columns: 54px minmax(0, 1fr); gap: 4px 18px; }
  .om-route__nr { grid-row: span 2; }
  .om-route b { margin-top: 12px; }
}
@media (max-width: 760px) {
  .pa-filmkolom:has(.om-stroom) { width: min(400px, 100%); }
}