/* Klantlaag B-sec Beveiligingssystemen. Drager: navy uit het logo (#002147), accent: oranje van bsec.nl (#f05a1a). */
:root{
  --ink:#002147;
  --petrol:#12355f;
  --accent:#f05a1a;
  --tint:#e8edf3;
  --tint2:#eef1f5;
  --salie:#c9d3df;
  --accent-donker:#d03808;
  --petrol-donker:#002147;
  --ink-donker:#001530;
  --tekst:#3b4656;
  --tint3:#dde4ed;
  --op-accent:#ffffff;
  --accent-rgb:240,90,26;
  --petrol-rgb:18,53,95;
  --ink-rgb:0,33,71;
}

/* header nooit een balk */
.header{background:none;
  background-image:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  background-size:100% 140px;background-repeat:no-repeat}
.hero{margin-top:0}
.eerste-scherm{padding-top:0}
.eerste-scherm .hero-inhoud{padding-top:calc(var(--header-h) + 12px)}
.pagina-hero{margin-top:0;height:calc(270px + var(--header-h));padding-top:var(--header-h)}
.product-hero{margin-top:0;padding-top:calc(64px + var(--header-h))}
.over-hero,.artikel-kop-hero{margin-top:0;padding-top:var(--header-h)}
.logo-plateau{padding-bottom:calc(var(--plateau-h) - var(--header-h))}
.header.geschrompeld .logo-plateau{padding-bottom:0}

/* hero: hele foto, geen lijnen, schaduwteksten of pijlen */
.hero-lijnen,.hero-schaduwtekst,.hero-pijl{display:none!important}
@media(max-width:900px){
  .hero-baan .hero-dia:nth-child(1){background-image:url('../img/hero-1-m.webp')!important}
  .hero-baan .hero-dia:nth-child(2){background-image:url('../img/hero-2-m.webp')!important}
  .hero-baan .hero-dia:nth-child(3){background-image:url('../img/hero-3-m.webp')!important}
}

/* foto naast het formulier (geen voor/na bij beveiliging) */
.calc-foto{position:relative;min-height:420px;overflow:hidden;background:#fff}
.calc-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:1024px){.hero-met-form>#offerte-samenstellen .calc-foto{display:none}}
@media(max-width:960px){.calc-foto{min-height:240px}}

/* productfoto's staan op wit: niet bijsnijden */
.kaart-beeld img,.product-kaart-beeld img{object-fit:contain;background:#fff}
.product-kaart-beeld{background:#fff}
.product-intro{color:rgba(255,255,255,.9);margin:10px 0 4px;font-size:17px}

/* merknamen in de strook (logo's volgen bij de volledige site) */
.merk-namen .keurmerk-vak{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-size:15px}

/* logo in de zwarte footer: zelfde bestand, op een lichte ondergrond */
.footer-logo{display:inline-block;background:#fff;border-radius:14px;padding:10px 16px}
.footer-logo img{max-height:70px;width:auto}

/* fotokaarten met productbeeld: donkerdere gloed zodat de tekst leesbaar blijft */
.projectkaart{background-color:#fff;background-size:contain;background-repeat:no-repeat;background-position:center 18%}
.projectkaart::after{background:linear-gradient(rgba(var(--ink-rgb),0) 25%,rgba(var(--ink-rgb),.92) 78%)}
.tip-overlay::after{background:linear-gradient(rgba(var(--ink-rgb),.1) 20%,rgba(var(--ink-rgb),.9) 70%)!important}
.knop-licht{background:#fff;color:var(--ink)}
.knop-licht:hover{background:var(--tint)}
.footer .footer-logo .logo-beeld-donker{filter:none!important;opacity:1!important}
/* negen menu-items van de klant: iets compacter zodat de offerteknop binnen beeld blijft */
:root{--nav-gap:16px}
@media(max-width:900px){.hero .google-badge{display:none}}
@media(max-width:1599px){.nav .nav-tel{display:none}}