/* ==========================================================================
   DHB Pakketten

   Gegenereerd uit het ontwerp (dhb-sectie-pakketten.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:'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){all:revert}
.dhbs.dhbs.dhbs.dhbs-w-pakketten *{box-sizing:border-box}

/* 5a. aanvulling: een link op een plek waar het ontwerp er geen heeft */
.dhbs.dhbs.dhbs.dhbs-w-pakketten :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-pakketten .dhbs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 32px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-section a:focus-visible{outline:3px solid var(--dhbs-orange);outline-offset:3px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .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-pakketten .dhbs-pill-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .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-pakketten .dhbs-h2 em{font-style:normal;color:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .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-pakketten .dhbs-checks li{display:flex;gap:12px;align-items:flex-start}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .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-pakketten .dhbs-check svg{width:14px;height:14px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .is-featured .dhbs-check{background:var(--dhbs-orange);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 20px;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-pakketten .dhbs-btn svg{width:18px;height:18px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn--outline{border:1.5px solid var(--dhbs-ink);color:var(--dhbs-ink)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn--outline:hover{background:var(--dhbs-ink);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn--primary{background:var(--dhbs-orange);color:#fff;font-weight:800;font-size:18px;min-height:62px;box-shadow:0 16px 32px -14px rgba(255,68,0,.7)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn--primary:hover{transform:translateY(-2px)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn--dark{background:var(--dhbs-ink);color:#fff;font-size:16px;min-height:56px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn--dark svg{color:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn--dark:hover{background:#2A2A2A}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten{padding:96px 0;background:var(--dhbs-ground)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__lead{margin:0;font-size:19px;line-height:1.5;color:#4A4641}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__sub{margin:0;font-size:16px;line-height:1.5;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__sub a{color:var(--dhbs-orange-text);font-weight:600;text-underline-offset:3px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__grid{margin-top:88px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket{position:relative;display:flex;flex-direction:column;padding:40px;background:var(--dhbs-white);border:1px solid var(--dhbs-line);border-radius:var(--dhbs-radius);box-shadow:0 1px 2px rgba(22,22,22,.04),0 18px 40px -24px rgba(22,22,22,.18)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__icon{width:52px;height:52px;border-radius:50%;background:var(--dhbs-ground);display:flex;align-items:center;justify-content:center}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__icon svg{width:26px;height:26px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__name{position:relative;margin:24px 0 0;font-family:var(--dhbs-display);font-weight:800;font-size:26px;letter-spacing:-0.01em}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__desc{position:relative;margin:8px 0 0;min-height:48px;font-size:15px;line-height:1.6;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__from{margin-top:28px;font-size:15px;font-weight:500;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__price{font-family:var(--dhbs-display);font-weight:800;font-size:50px;line-height:1.15;letter-spacing:-0.02em}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__incl{font-size:14px;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__rule{height:1px;background:var(--dhbs-line);margin:28px 0;border:0}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket .dhbs-btn{margin-top:auto}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket .dhbs-checks{margin-bottom:36px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured{margin:-28px 0;padding:44px 40px;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%);border-color:var(--dhbs-ink);color:#fff;overflow:hidden;box-shadow:0 40px 80px -32px rgba(22,22,22,.55)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured .dhbs-pakket__icon{background:var(--dhbs-orange);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured .dhbs-pakket__name{font-size:28px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured .dhbs-pakket__price{font-size:58px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured .dhbs-pakket__desc,.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured .dhbs-pakket__from,.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured .dhbs-pakket__incl{color:var(--dhbs-muted-dark)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured .dhbs-pakket__rule{background:rgba(255,255,255,.14)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-blob{position:absolute;top:-620px;right:-830px;width:1150px;height:auto;transform:rotate(-24deg);opacity:.4;pointer-events:none;overflow:visible}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-blob--2{top:auto;right:auto;bottom:-620px;left:-830px;transform:rotate(156deg)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);font-size:14px;font-weight:600;color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-badge svg{width:14px;height:14px;color:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies{margin-top:84px;padding:28px 36px;background:var(--dhbs-white);border:1px solid var(--dhbs-line);border-radius:24px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__left{display:flex;align-items:center;gap:20px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__icon{flex-shrink:0;width:56px;height:56px;border-radius:50%;background:var(--dhbs-ink);color:var(--dhbs-orange);display:flex;align-items:center;justify-content:center}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__icon svg{width:26px;height:26px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__title{font-family:var(--dhbs-display);font-weight:800;font-size:22px;letter-spacing:-0.01em}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__text{margin-top:4px;font-size:16px;color:var(--dhbs-muted)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__right{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-tel{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--dhbs-display);font-weight:800;font-size:18px;color:var(--dhbs-ink);text-decoration:none}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-tel svg{width:20px;height:20px;color:var(--dhbs-orange-text)}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-tel:hover{color:var(--dhbs-orange-text)}
@media (max-width:1040px){
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;gap:24px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured{margin:0;order:-1}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__desc{min-height:0}
}
@media (max-width:640px){
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-wrap{padding:0 20px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten{padding:64px 0}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__grid{margin-top:48px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket,.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured{padding:32px 24px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket__price{font-size:44px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakket.is-featured .dhbs-pakket__price{font-size:48px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies{margin-top:48px;padding:24px}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__left{align-items:flex-start}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__right,.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-advies__right .dhbs-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-btn{transition:none}
}

/* 5b. aanvulling: een ander aantal kolommen dan de drie van het ontwerp.
   Alleen op brede schermen; daaronder geldt gewoon het ontwerp. */
@media (min-width:1041px){
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__grid[data-kolommen="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.dhbs.dhbs.dhbs.dhbs-w-pakketten .dhbs-pakketten__grid[data-kolommen="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}