/* Unified banner — kadervariant "C blauw" (Claude, 4 nov 2026)
   Schone foto zonder verloop + navy kader met witte tekst.
   Klassen op <section class="unified-banner …">:
     unified-banner--card        kader links (standaard)
     unified-banner--card-right  kader rechts (desktop), voor foto's met het onderwerp links
   Uitsnede per pagina via CSS-variabelen op de section:
     --banner-pos-desktop (standaard 50% 50%), --banner-pos-mobile (standaard 50% 35%)
   De kicker (.unified-banner-kicker) staat als eerste kind ín .unified-banner-copy.
   Onder de H1 staat een kort geel streepje (56 × 3 px), via h1::after; geen extra HTML nodig. */

/* verlopen weg */
html body #inhoud .unified-banner.unified-banner--card::after,
html body #inhoud .unified-banner.unified-banner--card > .unified-banner-copy::after,
html body #inhoud .unified-banner.unified-banner--card > .unified-banner-copy::before{content:none !important;display:none !important;background:none !important}

/* kader en tekst */
html body #inhoud .unified-banner.unified-banner--card > .unified-banner-copy{background:#0b3554 !important;color:#fff !important;border-radius:4px;box-shadow:0 14px 34px rgba(4,25,40,.32) !important}
html body #inhoud .unified-banner.unified-banner--card .unified-banner-copy h1{color:#fff !important}
/* geel streepje onder de titel (keuze Hans: subtiel, kort, recht) */
html body #inhoud .unified-banner.unified-banner--card .unified-banner-copy h1::after{content:"" !important;display:block !important;width:56px !important;height:3px !important;margin:14px 0 2px !important;border-radius:2px;background:#ffda32 !important}
html body #inhoud .unified-banner.unified-banner--card .unified-banner-copy .unified-banner-lead{color:#e1eaf0 !important}
html body #inhoud .unified-banner.unified-banner--card .unified-banner-copy > .unified-banner-kicker{position:static !important;inset:auto !important;width:auto !important;margin:0 0 -4px !important;padding:0 !important;font-size:15px !important;font-weight:800 !important;letter-spacing:.02em;color:#ffda32 !important;text-shadow:none !important}
html body #inhoud .unified-banner.unified-banner--card .unified-banner-visit{color:#fff !important;border-color:rgba(255,255,255,.5) !important}
html body #inhoud .unified-banner.unified-banner--card .unified-banner-visit img{filter:brightness(0) invert(1) !important}
html body #inhoud .unified-banner.unified-banner--card .unified-banner-media img{object-fit:cover !important}

/* desktop */
@media (min-width:768px){
html body #inhoud .unified-banner.unified-banner--card .unified-banner-media img{object-position:var(--banner-pos-desktop,50% 50%) !important}
html body #inhoud .unified-banner.unified-banner--card > .unified-banner-copy{width:540px !important;max-width:calc(100% - 48px) !important;padding:28px 32px 26px !important;margin-top:0 !important;margin-bottom:0 !important;gap:14px !important}
html body #inhoud .unified-banner.unified-banner--card .unified-banner-copy h1{font-size:42px !important;line-height:1.05 !important}
html body #inhoud .unified-banner.unified-banner--card.unified-banner--long-title .unified-banner-copy h1{font-size:34px !important}
html body #inhoud .unified-banner.unified-banner--card.unified-banner--card-right[data-unified-banner] > .unified-banner-copy,
html body #inhoud .unified-banner.unified-banner--card.unified-banner--card-right[data-unified-banner][data-edge-banner]:not(.unified-banner--showroom) > .unified-banner-copy{margin-left:auto !important;margin-right:var(--site-content-left,81px) !important}
}
@media (min-width:768px) and (max-width:1100px){
html body #inhoud .unified-banner.unified-banner--card .unified-banner-copy h1{font-size:36px !important}
}

/* mobiel */
@media (max-width:767px){
html body #inhoud .unified-banner.unified-banner--card[data-unified-banner],
html body #inhoud .unified-banner.unified-banner--card[data-unified-banner][data-edge-banner]:not(.unified-banner--showroom){display:flex !important;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;height:auto !important;min-height:0 !important;max-height:none !important;padding:0 0 8px !important;background:#fff !important}
html body #inhoud .unified-banner.unified-banner--card > .unified-banner-media{position:relative !important;inset:auto !important;width:100% !important;height:320px !important;display:block !important;flex:none}
html body #inhoud .unified-banner.unified-banner--card > .unified-banner-media img{width:100% !important;height:100% !important;object-position:var(--banner-pos-mobile,50% 35%) !important}
html body #inhoud .unified-banner.unified-banner--card[data-unified-banner] > .unified-banner-copy,
html body #inhoud .unified-banner.unified-banner--card[data-unified-banner][data-edge-banner]:not(.unified-banner--showroom) > .unified-banner-copy{width:auto !important;max-width:none !important;margin:-56px 16px 0 !important;padding:22px 18px !important;position:relative;z-index:2}
}