/* ==========================================================================
   DHB Meldkamer

   Gegenereerd uit het ontwerp (dhb-sectie-meldkamer.html). Geen enkele waarde is
   overgetypt; wie iets wil veranderen past het ontwerp aan en bouwt opnieuw.

   Opbouw:
     1. de kleuren en letters van het ontwerp, als variabelen op de omhulling
     2. de omhulling zelf: wat in het ontwerp op <body> staat
     3. een regel die thema en kit terugdraait voor kale elementen
     4. de regels van het ontwerp, elk met dezelfde omhulling ervoor
     5. een paar aanvullingen voor keuzes die het ontwerp niet kent

   De namen beginnen met dhbs- in plaats van dhb-: .dhb-btn en .dhb-eyebrow
   bestaan al elders in de plugin en mogen hier niet doorheen lekken.
   ========================================================================== */


/* 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:'Montserrat',system-ui,sans-serif; --dhbs-body:'Poppins',system-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){all:revert}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer *{box-sizing:border-box}

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

/* 4. het ontwerp */
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 32px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-section a:focus-visible{outline:3px solid var(--dhbs-orange);outline-offset:3px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .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-meldkamer .dhbs-pill-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .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-meldkamer .dhbs-h2 em{font-style:normal;color:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.5}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-checks li{display:flex;gap:12px;align-items:flex-start}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-check{flex-shrink:0;width:24px;height:24px;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-meldkamer .dhbs-check svg{width:14px;height:14px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .is-featured .dhbs-check{background:var(--dhbs-orange);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer{padding:96px 0;background:var(--dhbs-ground)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer__head{max-width:900px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer__head .dhbs-pill-label{margin-bottom:20px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer__intro{margin:24px 0 0;font-size:19px;line-height:1.7;color:#4A4641}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer__intro strong{font-weight:600;color:var(--dhbs-ink)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer__intro a,.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer__foot a{color:var(--dhbs-orange-text);font-weight:600;text-underline-offset:3px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze{margin-top:64px;background:var(--dhbs-white);border:1px solid var(--dhbs-line);border-radius:var(--dhbs-radius);overflow:hidden;box-shadow:0 1px 2px rgba(22,22,22,.04),0 24px 56px -32px rgba(22,22,22,.25)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze__bar{display:flex;align-items:center;gap:12px;padding:20px 40px;border-bottom:1px solid var(--dhbs-line);font-family:var(--dhbs-display);font-weight:700;font-size:15px;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze__bar .dhbs-check{width:22px;height:22px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze__grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie{position:relative;display:flex;flex-direction:column;padding:48px 56px 52px;overflow:hidden}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie__icon{position:relative;width:56px;height:56px;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-meldkamer .dhbs-optie__icon svg{width:28px;height:28px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie__name{position:relative;margin:28px 0 0;font-family:var(--dhbs-display);font-weight:800;font-size:26px;letter-spacing:-0.01em}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie__desc{position:relative;margin:14px 0 0;max-width:46ch;font-size:17px;line-height:1.7;color:#4A4641}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie__prijs{position:relative;margin-top:24px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie__bedrag{font-family:var(--dhbs-display);font-weight:800;font-size:34px;letter-spacing:-0.02em}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie__per{font-size:15px;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie .dhbs-checks{position:relative;margin-top:24px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie.is-featured{background:radial-gradient(520px 380px at 100% 0%,rgba(255,68,0,.22),rgba(255,68,0,0) 70%),radial-gradient(420px 320px at 0% 100%,rgba(255,68,0,.08),rgba(255,68,0,0) 70%),linear-gradient(160deg,#1F1F1F 0%,#161616 55%,#121212 100%);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie.is-featured .dhbs-optie__icon{background:var(--dhbs-orange);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie.is-featured .dhbs-optie__desc,.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie.is-featured .dhbs-optie__per{color:var(--dhbs-muted-dark)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-blob{position:absolute;top:-740px;right:-900px;width:1250px;height:auto;transform:rotate(-24deg);opacity:.4;pointer-events:none;overflow:visible}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-blob--2{top:auto;right:auto;bottom:-740px;left:-900px;transform:rotate(156deg)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze__of{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--dhbs-white);border:1px solid var(--dhbs-line);display:flex;align-items:center;justify-content:center;font-family:var(--dhbs-display);font-weight:800;font-size:16px;color:var(--dhbs-ink);box-shadow:0 10px 24px -10px rgba(22,22,22,.4)}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer__foot{margin:40px 0 0;text-align:center;font-size:16px;line-height:1.6;color:var(--dhbs-muted)}
@media (max-width:900px){
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze__grid{grid-template-columns:1fr}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze__of{top:auto;position:relative;left:auto;transform:none;margin:-28px auto}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie{padding:40px 32px 44px}
}
@media (max-width:640px){
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer{padding:64px 0}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze{margin-top:40px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-keuze__bar{padding:16px 24px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-optie{padding:32px 24px 40px}
.dhbs.dhbs.dhbs.dhbs-w-meldkamer .dhbs-meldkamer__intro{font-size:17px}
}