/* ERP-beeld: een merkloos ERP-scherm tijdens de implementatie, overgenomen uit /nieuw (Akram) in de kleuren van de site.
   Beweging één keer bij binnenkomst, daarna stil (zoals de stappen): eerst groeit de grafiek, dan loopt de implementatie
   van superusers via teams naar de livegang. Eindbeeld = livegang bereikt. Met minder beweging meteen het eindbeeld. */
/* Het beeld schaalt als een foto (Henrik 04-11): getekend op 584 x 328 (16:9, zoals de video op Digi) en alles in --u, één
   ontwerppixel = 1/584 van de breedte. Zo is elk kopbeeld 16:9 op elk scherm en altijd hetzelfde beeld. Kader en haarlijnen blijven
   1px, de buitenste afronding 16 zoals de video. */
.erp-beeld{position:relative;container-type:inline-size}
.erp-venster{--u:calc(100cqw / 584);aspect-ratio:16/9;display:flex;flex-direction:column;background:var(--wp--preset--color--base);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #d2dae3,0 22px 40px -20px rgba(70,85,110,.36)}
.erp-balk{display:flex;align-items:center;gap:calc(6 * var(--u));background:var(--wp--preset--color--inkt);padding:calc(10 * var(--u)) calc(14 * var(--u))}
.erp-balk i{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:rgba(255,255,255,.35)}
/* Titel links, de drie stipjes rechts, zoals Windows en de schermen op Home (Henrik 04-11: geldt voor elk getekend venster). */
.erp-balk span{order:-1;margin-right:auto;color:#dbe3f1;font-size:calc(12 * var(--u));line-height:calc(16 * var(--u));font-weight:600}
.erp-romp{flex:1 1 0;min-height:0;display:grid;grid-template-columns:calc(120 * var(--u)) 1fr;grid-template-rows:minmax(0,1fr)}
.erp-menu{list-style:none;margin:0;padding:calc(10 * var(--u)) calc(8 * var(--u));background:#f5f8fb;border-right:1px solid var(--wp--preset--color--lijn);font-size:calc(13 * var(--u));line-height:calc(19.5 * var(--u));color:var(--wp--preset--color--zacht)}
.erp-menu li{padding:calc(5 * var(--u)) calc(10 * var(--u));border-radius:calc(8 * var(--u));margin:0 0 calc(2 * var(--u))}
.erp-menu li:first-child{background:var(--wp--preset--color--merk-licht);color:var(--wp--preset--color--merk-tekst);font-weight:600}
.erp-hoofd{min-height:0;padding:calc(14 * var(--u)) calc(16 * var(--u));display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.erp-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(8 * var(--u))}
.erp-tegels div{border:1px solid var(--wp--preset--color--lijn);border-radius:calc(10 * var(--u));padding:calc(9 * var(--u))}
.erp-tegels b{display:block;height:calc(9 * var(--u));border-radius:calc(5 * var(--u));background:var(--wp--preset--color--inkt);width:45%}
.erp-tegels div:nth-child(2) b{background:var(--wp--preset--color--merk);width:60%}
.erp-tegels div:nth-child(3) b{background:#7cafdb;width:35%}
.erp-tegels span{display:block;height:calc(6 * var(--u));border-radius:calc(4 * var(--u));background:var(--wp--preset--color--lijn);margin-top:calc(7 * var(--u));width:75%}
.erp-grafiek{flex:1 1 0;min-height:0;display:flex;align-items:flex-end;gap:calc(8 * var(--u));padding:calc(6 * var(--u)) calc(4 * var(--u)) 0;border-bottom:1px solid var(--wp--preset--color--lijn)}
.erp-grafiek i{flex:1;height:var(--h);border-radius:calc(4 * var(--u)) calc(4 * var(--u)) 0 0;background:#7cafdb;transform-origin:bottom;animation:erp-groei 1s cubic-bezier(.2,.7,.2,1) both}
.erp-grafiek i:nth-child(even){background:var(--wp--preset--color--merk)}
.erp-grafiek i:nth-child(2){animation-delay:.1s}.erp-grafiek i:nth-child(3){animation-delay:.2s}.erp-grafiek i:nth-child(4){animation-delay:.3s}
.erp-grafiek i:nth-child(5){animation-delay:.4s}.erp-grafiek i:nth-child(6){animation-delay:.5s}.erp-grafiek i:nth-child(7){animation-delay:.6s}
.erp-regels span{display:block;height:calc(7 * var(--u));border-radius:calc(4 * var(--u));background:#eef2f6;margin-top:calc(7 * var(--u))}
.erp-regels span:nth-child(2){width:82%}.erp-regels span:nth-child(3){width:64%}
.erp-pad{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8 * var(--u));padding:calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));border-top:1px solid var(--wp--preset--color--lijn);font-size:calc(13 * var(--u));line-height:calc(19.5 * var(--u));font-weight:600}
.erp-pad span{padding:calc(5 * var(--u)) calc(12 * var(--u));border-radius:99px;border:1px solid var(--wp--preset--color--lijn);color:var(--wp--preset--color--zacht);background:var(--wp--preset--color--base);animation:erp-stap .3s ease-out forwards}
.erp-pad span:nth-child(1){animation-delay:1.6s}.erp-pad span:nth-child(2){animation-delay:3.6s}.erp-pad span:nth-child(3){animation-delay:5.6s}
.erp-voortgang{flex:1 1 100%;height:calc(6 * var(--u));border-radius:calc(4 * var(--u));background:#eef2f6;overflow:hidden}
.erp-voortgang i{display:block;height:100%;width:100%;background:var(--wp--preset--color--merk);transform-origin:left;animation:erp-voortgang 4.4s linear 1.4s both}
@keyframes erp-groei{from{transform:scaleY(.08)}to{transform:none}}
@keyframes erp-stap{to{background:var(--wp--preset--color--merk);border-color:var(--wp--preset--color--merk);color:var(--wp--preset--color--base)}}
@keyframes erp-voortgang{from{transform:scaleX(.04)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.erp-beeld *{animation:none!important}.erp-pad span{background:var(--wp--preset--color--merk);border-color:var(--wp--preset--color--merk);color:var(--wp--preset--color--base)}}