/* ==========================================================================
   DHB Key features (video met tabs)

   Zelfde opbouw als de andere sectiewidgets:
     1. de kleuren en letters van de familie, als variabelen op de omhulling
     2. de omhulling zelf: wat in de ontwerpen op <body> staat
     3. een regel die thema en kit terugdraait voor kale elementen
     4. de regels van deze sectie, elk met dezelfde omhulling ervoor

   Geen ontwerp-html voor deze sectie: de maten volgen de familie
   (dhb-sectie-*), de kop en de vinkjes zijn letterlijk die van Meldkamer en
   Alarmsysteem.
   ========================================================================== */


/* 1. kleuren en letters */
.dhbs{--dhbs-orange:#FF4400; --dhbs-orange-text:#D93A00; --dhbs-orange-soft:#FFF0EA; --dhbs-ink:#161616; --dhbs-ground:#F5F3F0; --dhbs-white:#FFFFFF; --dhbs-line:#E7E3DE; --dhbs-muted:#5F5A55; --dhbs-muted-dark:#C4BEB7; --dhbs-display:'DHB Elms','Satoshi',system-ui,sans-serif; --dhbs-body:'Satoshi','DHB Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif; --dhbs-radius:28px}

/* 2. de omhulling: wat in het ontwerp op <body> staat */
.dhbs.dhbs.dhbs{font-family:var(--dhbs-body);color:var(--dhbs-ink);-webkit-font-smoothing:antialiased;font-size:16px;line-height:normal;font-weight:400;font-style:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-align:left;text-indent:0;text-shadow:none;white-space:normal;font-variant:normal;overflow-wrap:normal;word-break:normal;hyphens:manual}

/* 3. thema en kit terugdraaien voor kale elementen. Lichter dan elke
   regel hieronder, zwaarder dan wat een kit schrijft. */
.dhbs.dhbs.dhbs :is(div,section,article,figure,figcaption,h1,h2,h3,h4,h5,h6,p,a,span,strong,b,em,i,small,ul,ol,li,hr,img,br,button,video){all:revert}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures *{box-sizing:border-box}

/* aanvulling: een link op een plek waar de sectie er geen opmaak voor heeft */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures :where(p a:not([class])){color:var(--dhbs-orange-text);font-weight:600;text-underline-offset:3px}

/* 4. de sectie */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-section{background:var(--dhbs-ground);padding:96px 0;overflow:hidden}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 32px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-section a:focus-visible,
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-section button:focus-visible{outline:3px solid var(--dhbs-orange);outline-offset:3px}

/* kop: letterlijk die van de familie */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-pill-label{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 14px;background:var(--dhbs-white);border:1px solid var(--dhbs-line);border-radius:999px;font-size:14px;font-weight:500}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-pill-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-h2{margin:0;font-family:var(--dhbs-display);font-weight:800;font-size:clamp(34px,4.2vw,52px);line-height:1.1;letter-spacing:-0.02em}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-h2 em{font-style:normal;color:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__head{max-width:780px;margin:0 auto 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__intro{margin:0;font-size:17px;line-height:1.65;color:var(--dhbs-muted)}

/* de tabbladen */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 28px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tab{display:inline-flex;align-items:center;gap:10px;min-height:54px;margin:0;padding:0 22px 0 12px;border-radius:999px;border:1px solid var(--dhbs-line);background:var(--dhbs-white);color:var(--dhbs-ink);font-family:var(--dhbs-body);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tab:hover{border-color:var(--dhbs-orange);transform:translateY(-1px)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tab.is-active{background:var(--dhbs-orange);border-color:var(--dhbs-orange);color:#fff;box-shadow:0 16px 32px -16px rgba(255,68,0,.75)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tab-ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--dhbs-orange-soft);color:var(--dhbs-orange-text);display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tab.is-active .dhbs-kf__tab-ic{background:rgba(255,255,255,.22);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tab-ic svg{width:17px;height:17px}

/* het paneel: video links, tekst rechts */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__panel{display:none;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px;align-items:center;padding:28px;background:var(--dhbs-white);border:1px solid var(--dhbs-line);border-radius:var(--dhbs-radius);box-shadow:0 40px 70px -50px rgba(22,22,22,.45)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__panel.is-active{display:grid;animation:dhbs-kf-in .4s cubic-bezier(.2,.7,.2,1)}
@keyframes dhbs-kf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__panel.is-active{animation:none}}

/* het videovak */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__media{min-width:0}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--dhbs-ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.65)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__poster,
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0;max-width:none}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__video{opacity:0;transition:opacity .45s}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__frame.heeft-beeld .dhbs-kf__video{opacity:1}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__leeg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 70% at 50% 45%,rgba(255,68,0,.28),rgba(255,68,0,0) 70%),var(--dhbs-ink)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__leeg img{width:40%;max-width:260px;height:auto;opacity:.9}

/* afspeelknop: alleen zichtbaar zolang de video niet loopt (speelt); heeft-beeld zegt alleen dat er beeld is */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:0;padding:0;border:0;border-radius:50%;background:var(--dhbs-orange);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translate(-50%,-50%);box-shadow:0 20px 40px -14px rgba(255,68,0,.8),0 0 0 10px rgba(255,255,255,.18);transition:transform .2s,opacity .25s;-webkit-appearance:none;appearance:none}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__play svg{width:30px;height:30px;margin-left:3px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__play:hover{transform:translate(-50%,-50%) scale(1.06)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__frame.speelt .dhbs-kf__play{opacity:0;pointer-events:none}

/* geluidsknop, rechtsonder op de video */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__sound{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0 16px 0 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(10,10,10,.62);color:#fff;font-family:var(--dhbs-body);font-weight:600;font-size:14px;line-height:1;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .25s,background .2s;-webkit-appearance:none;appearance:none}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__sound svg{width:16px;height:16px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__frame.speelt .dhbs-kf__sound{opacity:1}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__sound:hover{background:rgba(10,10,10,.85)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__sound[aria-pressed="true"]{background:var(--dhbs-orange);border-color:var(--dhbs-orange)}

/* de tekst naast de video */
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:8px 8px 8px 0}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--dhbs-orange-text)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__kop{margin:0;font-family:var(--dhbs-display);font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-0.02em}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__kop em{font-style:normal;color:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tekst{margin:0;font-size:16px;line-height:1.65;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-checks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.5}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-checks li{display:flex;gap:12px;align-items:flex-start}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-checks li>span{display:flex;flex-direction:column;gap:2px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-checks strong{font-weight:700;color:var(--dhbs-ink)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-checks small{font-size:14px;line-height:1.5;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-check{flex-shrink:0;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--dhbs-orange-soft);color:var(--dhbs-orange-text);display:flex;align-items:center;justify-content:center}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-check svg{width:13px;height:13px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;margin-top:10px;padding:0 24px;white-space:nowrap;border-radius:999px;font-family:var(--dhbs-display);font-weight:800;font-size:17px;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-btn svg{width:18px;height:18px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-btn--primary{background:var(--dhbs-orange);color:#fff;font-weight:800;font-size:17px;min-height:60px;box-shadow:0 16px 32px -14px rgba(255,68,0,.7)}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-btn--primary:hover{transform:translateY(-2px);color:#fff}

/* smaller schermen */
@media (max-width:1100px){
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__panel{gap:32px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
@media (max-width:960px){
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__panel{grid-template-columns:minmax(0,1fr);gap:28px;padding:20px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__body{padding:4px 4px 8px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-32px;margin-right:-32px;padding:4px 32px 10px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tabs::-webkit-scrollbar{display:none}
}
@media (max-width:640px){
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-section{padding:64px 0}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-wrap{padding:0 20px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__head{margin-bottom:28px;gap:16px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__tabs{margin-left:-20px;margin-right:-20px;padding:4px 20px 10px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__panel{padding:12px;border-radius:22px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__frame{border-radius:14px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__play{width:68px;height:68px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-kf__body{padding:8px 6px 10px}
.dhbs.dhbs.dhbs.dhbs-w-keyfeatures .dhbs-btn{width:100%;white-space:normal;text-align:center;line-height:1.2;padding:14px 20px;min-height:0}
}