/* ============================================================
   Effecta: klantlogo's en hero-beweging (aanvulling op theme.css)
   ============================================================ */

/* ---- Klantlogo's: rustige grijze rij, kleur bij hover, KPN iets zwaarder ---- */
.ef-logos--img{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:start;gap:28px 24px}
.ef-logos--img .ef-logo{display:flex;align-items:center;justify-content:center;height:48px;flex:0 1 auto}
.ef-logos--img .ef-logo img{max-height:36px;max-width:132px;width:auto;height:auto;object-fit:contain;display:block;filter:grayscale(1);opacity:.55;transition:filter .25s,opacity .25s,transform .25s}
.ef-logos--img .ef-logo:hover img{filter:none;opacity:1;transform:translateY(-1px)}
.ef-logos--img .ef-logo--featured img{max-height:42px;max-width:150px;opacity:.85}
.ef-logos--img .ef-logo--featured:hover img{opacity:1}
.ef-logos--few{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:24px 56px}
.ef-logos--img .ef-logo{justify-content:flex-start}
.ef-logos--img li:not(.ef-logo){font-size:15px;font-weight:var(--ef-fw-medium);color:var(--ef-grey)}
.ef-section--ink .ef-logos--img .ef-logo img{filter:grayscale(1) brightness(3);opacity:.7}
@media (max-width:1100px){.ef-logos--img{gap:24px 20px}}
@media (max-width:767px){.ef-logos--img{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px;justify-items:center}.ef-logos--img .ef-logo{height:40px}.ef-logos--img .ef-logo img{max-height:28px;max-width:96px;opacity:.7;filter:grayscale(1)}.ef-logos--img .ef-logo--featured img{max-height:32px}}

/* ---- Hero: rustige beweging ---- */
/* Dashboard-mockup ondergeschikt aan de video: kleiner, rechtsonder in de kolom */
.ef-hero .ef-screen{width:440px!important;margin:180px 0 0 auto}
.ef-hero .ef-line--dot{display:none}
/* In het kleine kader: openingstijden-widget weg, bezetting over de volle breedte, zodat niets afbreekt */
.ef-hero .ef-screen .ef-screen__body{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.ef-hero .ef-screen .ef-widget:last-child{display:none}
.ef-hero .ef-screen .ef-widget[style*="span 2"]{grid-column:1/-1}
.ef-hero .ef-screen .ef-widget__v{font-size:30px}
@media (max-width:1100px){.ef-hero .ef-screen{width:100%!important;margin:0}}
.ef-hero{position:relative;overflow:hidden}
.ef-hero > .ef-wrap{position:relative;z-index:2}
.ef-hero__video{position:absolute;inset:0;z-index:0;pointer-events:none}
.ef-hero__video video{width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.55;filter:saturate(.85)}
.ef-hero__video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,.3) 58%,rgba(255,255,255,.04) 100%),linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(255,255,255,.7) 100%)}
@keyframes ef-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ef-pulse{0%,100%{box-shadow:0 0 0 0 rgba(88,170,50,.45)}70%{box-shadow:0 0 0 6px rgba(88,170,50,0)}}
@keyframes ef-dot{0%{left:0}100%{left:100%}}
.ef-hero .ef-eyebrow,.ef-hero .ef-h1,.ef-hero .ef-lead,.ef-hero .ef-btn,.ef-hero .ef-trust,.ef-hero .ef-small{animation:ef-rise .7s cubic-bezier(.2,.7,.2,1) both}
.ef-hero .ef-h1{animation-delay:.05s}.ef-hero .ef-lead{animation-delay:.15s}.ef-hero .ef-btn{animation-delay:.25s}.ef-hero .ef-small,.ef-hero .ef-trust{animation-delay:.35s}
.ef-hero .ef-screen{animation:ef-rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
.ef-hero .ef-badge--live::before{animation:ef-pulse 2s infinite}
.ef-hero .ef-bar > span{transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.ef-hero .ef-widget{transition:outline-color .6s}
.ef-hero .ef-num-tick{display:inline-block;animation:ef-rise .4s both}
.ef-hero .ef-line--dot::after{animation:ef-dot 9s linear infinite;margin-left:-4px}
@media (prefers-reduced-motion:reduce){.ef-hero *,.ef-hero .ef-line--dot::after{animation:none!important;transition:none!important}.ef-hero__video{display:none}}

/* ---- Echte app-schermen en dashboardopnames ---- */
.ef-phone{width:300px;max-width:100%;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 18px 32px rgba(23,26,34,.16))}
.ef-screens-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
.ef-screenshot{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.ef-screenshot img{width:100%;max-width:280px;height:auto;filter:drop-shadow(0 14px 28px rgba(23,26,34,.14))}
.ef-shot{margin:0;display:flex;flex-direction:column;gap:12px}
.ef-shot .ef-img{border:1px solid var(--ef-line);box-shadow:var(--ef-shadow-md)}
.ef-badge-store{display:inline-flex;align-items:center}
.ef-badge-store img{height:44px;width:auto;display:block}
.ef-screen__video{display:block;width:100%;height:auto;background:#1F232D}
.ef-screen--video .ef-screen__body{padding:0;display:block;background:#1F232D}
@media (max-width:767px){.ef-screens-row{grid-template-columns:1fr;gap:28px}.ef-screenshot img{max-width:240px}}

/* ---- Platform-hero: echt product in plaats van een diagram ---- */
.ef-platform-visual{position:relative;padding:14px 110px 24px 0}
.ef-platform-visual .ef-screen{width:100%}
.ef-platform-visual .ef-screen__body--still{padding:0;display:block;background:#1F232D}
.ef-platform-visual .ef-screen__body--still img{display:block;width:100%;height:auto}
.ef-platform-visual__phone{position:absolute;height:auto;filter:drop-shadow(0 16px 28px rgba(23,26,34,.22))}
.ef-platform-visual__phone--contacts{right:0;top:0;width:124px}
.ef-platform-visual__phone--shifts{right:78px;top:96px;width:110px}
.ef-platform-visual__modules{display:flex;gap:16px;margin-top:22px;max-width:calc(100% - 94px);font-size:14px;font-weight:var(--ef-fw-medium)}
.ef-platform-visual__modules span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ef-platform-visual__stack{margin-top:10px;max-width:calc(100% - 94px);line-height:1.6}
@media (max-width:1100px){.ef-platform-visual{padding:0 0 24px}.ef-platform-visual__phone{display:none}.ef-platform-visual__modules,.ef-platform-visual__stack{max-width:none}}
@media (max-width:767px){.ef-platform-visual__modules{flex-wrap:wrap;gap:12px}}

/* ---- Artikel-inhoudsopgave (scroll-spy), vacatures, bedrijfsvideo ---- */
.ef-toc{display:flex;flex-direction:column;gap:4px}
.ef-toc .ef-toc__link{padding:8px 0;color:var(--ef-grey);font-weight:var(--ef-fw-regular);border-left:2px solid transparent;margin-left:-12px;padding-left:10px;transition:color .15s,border-color .15s}
.ef-toc .ef-toc__link:hover{color:var(--ef-ink)}
.ef-toc .ef-toc__link.is-active{color:var(--ef-green-action);font-weight:var(--ef-fw-medium);border-left-color:var(--ef-green)}
.ef-vacatures{display:flex;flex-direction:column}
.ef-vacature{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:24px 0;border-top:1px solid var(--ef-line)}
.ef-vacature:last-child{border-bottom:1px solid var(--ef-line)}
.ef-vacature__title{color:var(--ef-ink)}
.ef-vacature__title:hover{color:var(--ef-green-action)}
.ef-video{margin:0;display:flex;flex-direction:column;gap:12px}
.ef-video__el{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--ef-radius-lg);background:#1F232D;box-shadow:var(--ef-shadow-md)}
@media (max-width:767px){.ef-vacature{grid-template-columns:1fr;gap:12px}}

/* ---- Taalschakelaar ---- */
.ef-lang{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:var(--ef-fw-medium);margin-right:4px}
.ef-lang .ef-lang__item{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 6px;border-radius:var(--ef-radius-sm);color:var(--ef-grey)}
.ef-lang a.ef-lang__item:hover{color:var(--ef-ink);background:var(--ef-paper)}
.ef-lang .ef-lang__item.is-current{color:var(--ef-ink);box-shadow:inset 0 -2px 0 var(--ef-green)}
.ef-lang--mobile{font-size:15px;margin:0 0 4px}
.ef-lang--mobile .ef-lang__item{min-width:44px;height:44px}

/* ==== Feedback Patricia (okt 2026) ==== */
/* Module-iconen: eigen teken per product */
.ef-modicon{display:inline-grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--ef-green);color:#fff}
.ef-modicon svg{width:54%;height:54%}
.ef-modicon--24{width:24px;height:24px}
.ef-modicon--24 svg{width:62%;height:62%;stroke-width:2.2}
.ef-platform-visual__modules{flex-wrap:wrap;gap:10px 18px}
.ef-platform-visual__modules a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--ef-ink)}
.ef-platform-visual__modules a:hover{color:var(--ef-green-action)}
.ef-demo-modules{display:flex;flex-direction:column;gap:12px}
.ef-demo-modules__row{display:flex;flex-wrap:wrap;gap:10px}
.ef-demo-modules__item{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:1px solid var(--ef-line);border-radius:999px;background:var(--ef-white);font-size:14px;font-weight:var(--ef-fw-medium)}

/* Hero: echte dashboardopname in het schermkader */
.ef-screen__body--media{display:block!important;padding:0!important;background:#1F232D}
.ef-screen__body--media img{display:block;width:100%;height:auto}
.ef-hero .ef-screen[data-ef-video]{width:540px!important;margin:150px 0 0 auto}
@media (max-width:1100px){.ef-hero .ef-screen[data-ef-video]{width:100%!important;margin:0}}
/* Achtergrondvideo alleen op grotere schermen: op mobiel zie je er maar een klein stuk van en leidt hij af */
@media (max-width:900px){.ef-hero__video{display:none}}

/* Alleen klikbare kaarten krijgen een hover-rand */
.ef div.ef-card:hover,.ef li.ef-card:hover,.ef article.ef-card:hover,.ef form.ef-card:hover{border-color:var(--ef-line)}
.ef div.ef-card--ink:hover,.ef div.ef-card--paper:hover{border-color:transparent}
.ef a.ef-tile{color:#606369;transition:border-color .15s,color .15s}
.ef a.ef-tile:hover{color:var(--ef-ink)}

/* Ankers niet onder de vaste header */
.ef-main [id]{scroll-margin-top:104px}
.ef-main nav.ef-toc{margin-left:12px}

/* Geen dubbele balken: de lijn onder de kop vervalt als de kaarten eronder zelf een groene bovenrand hebben */
.ef-main .ef-line:has(+ [class*="ef-grid-"] > .ef-card--anchor){display:none}
.ef-main .ef-card--anchor{padding-top:28px}

/* Labelkolom (Security en AVG): lange woorden lopen niet meer door de tekst */
@media (min-width:768px){.ef-main [style*="grid-template-columns: 200px 1fr"]{grid-template-columns:minmax(0,260px) minmax(0,1fr)!important}}
.ef-main h1,.ef-main h2,.ef-main h3,.ef-main h4{overflow-wrap:break-word}

/* ---- Mobiel eerst: een kolom, niets buiten beeld ---- */
@media (max-width:1100px){
  .ef-main [style*="grid-template-columns"] > *,.ef-main [class*="ef-grid-"] > *{min-width:0}
  .ef-main [style*="grid-template-columns: 600px"],.ef-main [style*="grid-template-columns: 1fr 600px"],.ef-main [style*="grid-template-columns: 280px"],.ef-main [style*="grid-template-columns: 300px 1fr"]{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:767px){
  .ef-main [style*="grid-template-columns"]:not(.ef-row):not(.ef-grid-4):not(.ef-screen__body):not(.ef-scan-row){grid-template-columns:minmax(0,1fr)!important}
  .ef-main .ef-grid-2,.ef-main .ef-grid-3,.ef-main .ef-grid-4{grid-template-columns:minmax(0,1fr)}
  .ef-main .ef-grid-4:has(> .ef-stat),.ef-main .ef-grid-4:has(> * > .ef-num){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ef-main :not(.ef-screen__body) > [style*="grid-column: span"]{grid-column:auto!important}
  .ef-main .ef-card[style*="min-height"]{min-height:0!important}
  .ef-main h1,.ef-main h2,.ef-main h3,.ef-main h4{hyphens:auto}
  .ef-main .ef-toc__link,.ef-main .ef-eyebrow{white-space:normal}
  .ef-main [style*="display: flex; align-items: center; gap: 32px"]{flex-direction:column;align-items:flex-start!important;padding:24px!important;gap:16px!important}
  .ef-main .ef-logos--img li{min-width:0;white-space:normal;text-align:center}
  .ef-main ul[style*="repeat(3, minmax(0, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ef-main .ef-screen{max-width:100%}
  .ef-main .ef-screen__body:not(.ef-screen__body--media) .ef-widget__v{font-size:26px}
  .ef-main .ef-stat__label{overflow-wrap:anywhere}
  .ef-main img{max-width:100%;height:auto}
  .ef-main .ef-table{font-size:14px!important}
}

/* Tablet: brede ontwerp-grids vallen eerder terug naar een kolom, schermkaders blijven binnen hun kolom */
.ef-main .ef-screen{max-width:100%}
.ef-screen__bar{min-width:0}
.ef-screen__bar > span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){
  .ef-main [style*="grid-template-columns: 720px"],.ef-main [style*="grid-template-columns: 760px"],.ef-main [style*="grid-template-columns: 620px"],.ef-main [style*="grid-template-columns: 640px"],.ef-main [style*="grid-template-columns: 540px"],.ef-main [style*="grid-template-columns: 1fr 1.2fr"],.ef-main [style*="grid-template-columns: 1fr 1.4fr"],.ef-main [style*="grid-template-columns: 1fr 1.6fr"],.ef-main [style*="grid-template-columns: 1.4fr 1fr"],.ef-main [style*="grid-template-columns: 1.15fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  .ef-main [style*="grid-template-columns: repeat(6"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .ef-main [style*="repeat(3, minmax(0, 1fr)) 1.1fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ef-main .ef-btn{max-width:100%;white-space:normal;text-align:center}
}
@media (max-width:900px){
  .ef-main [style*="grid-template-columns: 1fr 48px"]{grid-template-columns:minmax(0,1fr)!important}
  .ef-main [style*="grid-template-columns: 1fr 48px"] > *{justify-self:stretch}
}
@media (max-width:767px){
  .ef-main [style*="grid-template-columns: repeat(6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ef-main .ef-logos--img:not(:has(img)){grid-template-columns:repeat(2,minmax(0,1fr))}
}