@charset "UTF-8";
/*
body.brf h1{font-size:clamp(38px,4.4vw,64px)!important;line-height:1.04!important;letter-spacing:-.025em!important;font-weight:700!important;}
body.brf h2{font-size:clamp(30px,2.6vw,40px)!important;line-height:1.08!important;letter-spacing:-.02em!important;}
body.brf h3,body.brf .heading-3{letter-spacing:-.015em!important;}
body.brf p{line-height:26px!important;}
body.brf p.heading-2{line-height:64px!important;}
body.brf p.heading-3{line-height:36px!important;}
body.brf p.heading-5{line-height:30px!important;}
body.brf p.heading-6{line-height:20px!important;}
body.brf p.single-heading-2{line-height:52px!important;}
body.brf p.single-heading-3{line-height:40px!important;}
@media (max-width:1024px){body.brf p.heading-3{line-height:52px!important;}}
@media (max-width:820px){body.brf p.heading-3{line-height:42px!important;}body.brf p.heading-2{line-height:52px!important;}}
@media (max-width:576px){body.brf p.heading-3{line-height:46px!important;}}
body.brf .heading-5{font-size:18px!important;letter-spacing:-.01em;}
*/
/* Niet op StudioB-pagina's (body.studiob: productdetail, beheer) en niet in de galerijmodule: daar
   zijn alinea's onderdeel van een formulier of lijst, of staan ze gecentreerd ("Volgende x
   afbeeldingen tonen"). :where houdt de specificiteit gelijk. */
body.brf:where(:not(.brf-gen)):where(:not(.studiob)) .section--wrapper p:not(.button):not([class*=heading]):where(:not(.module-gallery-wrap p)) {
  max-width: 66ch;
}

/* Op tablet en mobiel is het scherm zelf smal genoeg; daar loopt een alinea
   even breed als de kop erboven en de rest van de inhoud. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .section--wrapper p:not(.button):not([class*=heading]) {
    max-width: none;
  }
}
body.brf:where(:not(.brf-gen)) .section.quotes {
  padding: 0 !important;
}

body.brf:where(:not(.brf-gen)) :is(.gap-20, .gap-40, .gap-60, .gap-80),
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) :is(.gap-20, .gap-40, .gap-60, .gap-80) {
  --br-tussenruimte:clamp(24px,2.6vw,40px);
}

body.brf:where(:not(.brf-gen)) .gap-20,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .gap-20 {
  gap: calc(var(--br-tussenruimte) * 0.25) !important;
}

body.brf:where(:not(.brf-gen)) .gap-40,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .gap-40 {
  gap: calc(var(--br-tussenruimte) * 0.5) !important;
}

body.brf:where(:not(.brf-gen)) .gap-60,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .gap-60 {
  gap: calc(var(--br-tussenruimte) * 0.75) !important;
}

body.brf:where(:not(.brf-gen)) .gap-80,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .gap-80 {
  gap: var(--br-tussenruimte) !important;
}

body.brf:where(:not(.brf-gen)) .header.homepage {
  padding-top: 0 !important;
  height: auto !important;
}

body.brf .header--outer-wrapper.top {
  top: clamp(16px, 1.7vw, 24px) !important;
  left: clamp(12px, 1.6vw, 26px) !important;
  right: clamp(12px, 1.6vw, 26px) !important;
  width: auto !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background: #ffffff !important;
  -webkit-box-shadow: 0 12px 44px rgba(0, 21, 57, 0.18), 0 2px 6px rgba(0, 21, 57, 0.06) !important;
          box-shadow: 0 12px 44px rgba(0, 21, 57, 0.18), 0 2px 6px rgba(0, 21, 57, 0.06) !important;
  -webkit-transition: top 0.35s var(--br-ease), border-radius 0.35s var(--br-ease), background 0.35s var(--br-ease), -webkit-box-shadow 0.35s var(--br-ease) !important;
  transition: top 0.35s var(--br-ease), border-radius 0.35s var(--br-ease), background 0.35s var(--br-ease), -webkit-box-shadow 0.35s var(--br-ease) !important;
  transition: top 0.35s var(--br-ease), border-radius 0.35s var(--br-ease), box-shadow 0.35s var(--br-ease), background 0.35s var(--br-ease) !important;
  transition: top 0.35s var(--br-ease), border-radius 0.35s var(--br-ease), box-shadow 0.35s var(--br-ease), background 0.35s var(--br-ease), -webkit-box-shadow 0.35s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .header--inner-wrapper {
  padding: 0 clamp(18px, 1.8vw, 30px) !important;
}

body.brf .header--outer-wrapper.top, body.brf:where(:not(.brf-gen)) .header--inner-wrapper, body.brf:where(:not(.brf-gen)) .header--inner-wrapper .wrapper--placeholder, body.brf .placeholder--navigation, body.brf .placeholder--navigation > ul, body.brf .placeholder--navigation > ul > li.navigation--logo, body.brf .placeholder--navigation > ul > li.navigation--nav {
  height: auto !important;
}

body.brf .placeholder--navigation {
  padding: 0 !important;
}

body.brf:where(:not(.brf-gen)) .header--inner-wrapper, body.brf:where(:not(.brf-gen)) .header--inner-wrapper .wrapper--placeholder {
  height: auto !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

body.brf:where(:not(.brf-gen)) .header--inner-wrapper .wrapper--placeholder, body.brf .placeholder--navigation {
  width: 100% !important;
}

body.brf .placeholder--navigation > ul {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  padding: 8px 0 !important;
  -webkit-transition: padding 0.35s var(--br-ease);
  transition: padding 0.35s var(--br-ease);
}

body.brf .placeholder--navigation > ul > li.navigation--logo {
  padding: 0 !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

body.brf .nav--secondary, body.brf .nav--secondary > ul, body.brf .nav--secondary > ul > li, body.brf .nav--secondary > ul > li > a {
  height: 44px !important;
}

body.brf .nav--primary, body.brf .nav--primary > ul, body.brf .nav--primary > ul > li, body.brf .nav--primary > ul > li > a {
  height: 50px !important;
}

body.brf .header.is-stuck .header--outer-wrapper.top {
  top: clamp(16px, 1.7vw, 24px) !important;
  background: #ffffff !important;
  -webkit-box-shadow: 0 10px 34px rgba(0, 21, 57, 0.16), 0 2px 6px rgba(0, 21, 57, 0.06) !important;
          box-shadow: 0 10px 34px rgba(0, 21, 57, 0.16), 0 2px 6px rgba(0, 21, 57, 0.06) !important;
}

/* Het beeldmerk staat er twee keer: eerst de <img> van het thema, en zodra de
   SVG binnen is de inline versie (die kan het woordmerk apart laten vervagen).
   Die twee moeten exact even groot zijn, anders zie je het logo bij het laden
   van maat verspringen: het thema geeft de <img> op tablet en telefoon
   height:32px (bij 140x58 dus ~78px breed) terwijl de inline SVG op 140px
   stond. Eén maat in --br-logo houdt ze gelijk: 140px breed op elk formaat,
   dus ook mobiel de volle maat - dat is het logo zoals het bedoeld is. De
   balk groeit daar gewoon in mee; zijn hoogte gaat via --br-bar automatisch
   ook naar de hero eronder. */
body.brf {
  --br-logo:140px;
}

body.brf .navigation--logo a {
  position: relative;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: var(--br-logo);
  overflow: visible;
  -webkit-transition: width 0.38s var(--br-ease);
  transition: width 0.38s var(--br-ease);
}

body.brf .navigation--logo img {
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  width: var(--br-logo) !important;
  height: auto !important;
  max-width: none !important;
}

body.brf .navigation--logo a.br-has-inline img {
  display: none !important;
}

body.brf .br-logo-inline {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: var(--br-logo);
  height: auto;
  overflow: visible;
}

body.brf .br-logo-woordmerk {
  -webkit-transition: opacity 0.28s var(--br-ease);
  transition: opacity 0.28s var(--br-ease);
}

body.brf .br-logo-beeldmerk {
  transform-box: fill-box;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transition: -webkit-transform 0.38s var(--br-ease);
  transition: -webkit-transform 0.38s var(--br-ease);
  transition: transform 0.38s var(--br-ease);
  transition: transform 0.38s var(--br-ease), -webkit-transform 0.38s var(--br-ease);
}

/* Het logo wordt bij scrollen alleen op tablet en mobiel compact (alleen het
   beeldmerk). Op desktop blijft het secundaire menu in de zwevende balk staan,
   waardoor de balk nauwelijks lager wordt; het wisselen van het logo voegde daar
   niets meer toe (Sander, 15 okt). */
@media (max-width: 1024px) {
  body.brf .header.is-stuck .navigation--logo a.br-has-inline {
    width: 42px;
  }
  body.brf .header.is-stuck .br-logo-woordmerk {
    opacity: 0;
  }
  body.brf .header.is-stuck .br-logo-beeldmerk {
    -webkit-transform: var(--br-mark-shift, none);
        -ms-transform: var(--br-mark-shift, none);
            transform: var(--br-mark-shift, none);
  }
}
body.brf .nav--secondary > ul {
  gap: 18px !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

body.brf .nav--secondary > ul > li {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  height: 44px !important;
}

body.brf .nav--secondary > ul > li > a {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  height: 44px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

body.brf .nav--secondary > ul > li > a > span {
  display: block !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(0, 21, 57, 0.72) !important;
  -webkit-transition: color 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease);
}

body.brf .nav--secondary > ul > li > a:hover > span {
  color: var(--br-navy) !important;
}

/* De zoekknop naast de hamburger; alleen tot 1024px (zie de media query bij de hamburger). */
body.brf .header .placeholder--navigation .mobile-search {
  display: none;
}

body.brf .nav--secondary > ul > li.favorites, body.brf .nav--secondary > ul > li.search {
  margin-left: 6px;
}

body.brf .nav--secondary > ul > li.login {
  margin-left: -8px;
}

body.brf .nav--secondary > ul > li.favorites > a, body.brf .nav--secondary > ul > li.search > a {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 21, 57, 0.14) !important;
  background: transparent !important;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  gap: 0 !important;
  position: relative;
  line-height: 1 !important;
  -webkit-transition: background 0.18s var(--br-ease), border-color 0.18s var(--br-ease);
  transition: background 0.18s var(--br-ease), border-color 0.18s var(--br-ease);
}

body.brf .nav--secondary > ul > li.favorites > a:hover, body.brf .nav--secondary > ul > li.search > a:hover, body.brf .nav--secondary > ul > li.search.is-selected > a {
  background: rgba(0, 159, 218, 0.12) !important;
  border-color: rgba(0, 159, 218, 0.45) !important;
}

body.brf .nav--secondary > ul > li.favorites > a .heart {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 15px !important;
  display: block !important;
}

/* Zoeken, naast het hartje: dezelfde ronde knop, met het vergrootglas uit Font Awesome (net als het hartje). */
body.brf .nav--secondary > ul > li.search > a .search-icon {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: block !important;
}

body.brf .nav--secondary > ul > li.search > a .search-icon::before {
  content: "\f002";
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
  color: rgba(0, 21, 57, 0.72);
}

body.brf .nav--secondary > ul > li.login > a {
  height: 36px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 21, 57, 0.14) !important;
  background: transparent !important;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  line-height: 1 !important;
  -webkit-transition: background 0.18s var(--br-ease), border-color 0.18s var(--br-ease);
  transition: background 0.18s var(--br-ease), border-color 0.18s var(--br-ease);
}

body.brf .nav--secondary > ul > li.login > a > span {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--br-navy) !important;
  -webkit-transition: color 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease);
}

body.brf .nav--secondary > ul > li.login > a:hover {
  background: var(--br-cyan) !important;
  border-color: var(--br-cyan) !important;
}

body.brf .nav--secondary > ul > li.login > a:hover > span {
  color: #ffffff !important;
}

body.brf .nav--primary > ul > li > a {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  height: 50px !important;
  line-height: 1 !important;
}

body.brf .nav--primary > ul > li > a > span {
  display: block !important;
  line-height: 1 !important;
  padding: 0 !important;
}

body.brf .nav--primary > ul {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  position: relative;
}

/* Zes items op 24px passen pas vanaf ~1300px. Tussen 1025px (daaronder de hamburger) en ~1550px
   schalen letter en tussenruimte mee, en een item breekt nooit over twee regels. */
@media (min-width: 1025px) {
  body.brf .nav--primary > ul {
    gap: clamp(14px, 1.8vw - 4px, 24px) !important;
  }
  body.brf .nav--primary > ul > li > a > span {
    font-size: clamp(18px, 5.25px + 1.25vw, 24px) !important;
    white-space: nowrap !important;
  }
}
body.brf .br-magic {
  position: absolute;
  left: 0;
  top: 50%;
  height: 38px;
  width: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(0, 159, 218, 0.12);
  border: 1px solid rgba(0, 159, 218, 0.22);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  -webkit-transition: left 0.38s var(--br-ease), width 0.38s var(--br-ease), opacity 0.25s var(--br-ease);
  transition: left 0.38s var(--br-ease), width 0.38s var(--br-ease), opacity 0.25s var(--br-ease);
}

body.brf .nav--primary > ul > li {
  position: relative;
  z-index: 1;
}

body.brf .header .nav--primary > ul > li:hover > a, body.brf .header .nav--primary > ul > li:hover > a span {
  color: var(--br-cyan) !important;
}

body.brf .nav--primary .nav-link::after {
  display: none;
}

body.brf .nav--secondary .nav-link {
  position: relative;
  -webkit-transition: color 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease);
}

body.brf .nav--secondary .nav-link::after {
  bottom: -6px;
  height: 2px;
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  background: var(--br-cyan);
  border-radius: 2px;
  -webkit-transition: right 0.28s var(--br-ease);
  transition: right 0.28s var(--br-ease);
}

body.brf .nav--secondary .nav-link:hover::after {
  right: 0;
}

body.brf:where(:not(.brf-gen)) .has--children > a :is(i, svg, [class*=chevron], [class*=angle]),
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .has--children > a :is(i, svg, [class*=chevron], [class*=angle]) {
  -webkit-transition: -webkit-transform 0.25s var(--br-ease);
  transition: -webkit-transform 0.25s var(--br-ease);
  transition: transform 0.25s var(--br-ease);
  transition: transform 0.25s var(--br-ease), -webkit-transform 0.25s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .has--children:hover > a :is(i, svg, [class*=chevron], [class*=angle]),
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .has--children:hover > a :is(i, svg, [class*=chevron], [class*=angle]) {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

body.brf .nav--primary > ul > li.has--children > ul, body.brf .nav--secondary > ul > li.has--children > ul {
  top: calc(100% + 10px) !important;
  border-radius: 18px !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(0, 21, 57, 0.08) !important;
  -webkit-box-shadow: 0 18px 50px rgba(0, 21, 57, 0.18), 0 2px 8px rgba(0, 21, 57, 0.06) !important;
          box-shadow: 0 18px 50px rgba(0, 21, 57, 0.18), 0 2px 8px rgba(0, 21, 57, 0.06) !important;
  overflow: visible !important;
}

body.brf .nav--primary > ul > li.has--children > ul::before, body.brf .nav--secondary > ul > li.has--children > ul::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}

body.brf .nav--primary > ul > li.has--children > ul li a, body.brf .nav--secondary > ul > li.has--children > ul li a {
  border-radius: 11px;
  padding: 9px 14px !important;
  -webkit-transition: background 0.18s var(--br-ease), color 0.18s var(--br-ease);
  transition: background 0.18s var(--br-ease), color 0.18s var(--br-ease);
}

body.brf .nav--primary > ul > li.has--children > ul li a:hover, body.brf .nav--secondary > ul > li.has--children > ul li a:hover {
  background: var(--br-cyan) !important;
  color: #ffffff !important;
}

/* De sluier over de herofoto was donkerblauw op bijna volle sterkte; dat kleurde
   de hele foto blauw. Hij houdt wél dezelfde kleur als het vlak achter de
   header (huisstijl-navy): een andere tint geeft op elke rand een zichtbare
   kleurovergang. Het lichter maken zit dus in de dekking en in hoe ver hij
   doorloopt - de getallen achter de laatste komma. */
body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .video-or-image::before {
  background: linear-gradient(100deg, rgba(0, 21, 57, 0.74) 0%, rgba(0, 21, 57, 0.44) 30%, rgba(0, 21, 57, 0.12) 58%, rgba(0, 21, 57, 0) 84%) !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .video-or-image::after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(58%, rgba(0, 21, 57, 0)), to(rgba(0, 21, 57, 0.34))) !important;
  background: linear-gradient(180deg, rgba(0, 21, 57, 0) 58%, rgba(0, 21, 57, 0.34) 100%) !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content p {
  font-size: 16px !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .slick-list, body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .slick-track {
  height: auto !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content ul {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  list-style: none !important;
  padding: 0 !important;
  margin: 26px 0 30px !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content ul li {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 14px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  -webkit-transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), -webkit-transform 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), -webkit-transform 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), transform 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), transform 0.2s var(--br-ease), -webkit-transform 0.2s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content ul li:hover {
  background: rgba(0, 159, 218, 0.22);
  border-color: rgba(0, 159, 218, 0.55);
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .video-or-image {
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .inner-placeholder {
  position: absolute !important;
  top: -8% !important;
  bottom: -8% !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: auto !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .inner-placeholder > img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  display: block;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .inner-placeholder :is(img, video) {
  -webkit-animation: brKen 26s ease-out both;
          animation: brKen 26s ease-out both;
}

@-webkit-keyframes brKen {
  from {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes brKen {
  from {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/* De homepage-hero is opgebouwd als de hero van een binnenpagina. Het <style>-blok in
   headerHomepageBlock zette de video op 70% breedte met een eigen masker; nu staan video en foto in
   hetzelfde kader als de herofoto van een binnenpagina: hoogstens 1640px breed en gecentreerd,
   beginnend onder de zwevende balk, met de tekst op dezelfde plek. De lagen liggen in dezelfde
   volgorde als daar: het gemaskerde beeld, dan de sluier onder de balk en de afloop onderin, dan
   de textuur van /images/overlay.jpg, en pas daarboven het verloop achter de tekst, dat dus ook de
   textuur dempt. Het masker zit op het kader en niet op de video zelf: die zoomt bij het laden in
   en schoof het masker anders buiten beeld (rechts was er dan geen verloop). Onder 1025px staan
   video en tekst onder elkaar en blijft het zoals het was. */
@media (min-width: 1025px) {
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .slick-slider {
    max-width: 1640px !important;
    padding: 0 !important;
  }
  /* De tekst staat op een binnenpagina 40px binnen het fotokader, en 20px zodra het scherm breder
     is dan 1680px (de tekstkolom is daar 40px breder dan het fotokader). */
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder .content {
    padding-left: clamp(20px, 40px - (100vw - 1640px) / 2, 40px) !important;
  }
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder .video-or-image {
    top: var(--br-bar, 136px) !important;
  }
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder .video-or-image .inner-placeholder {
    top: 0 !important;
    bottom: 0 !important;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 6%, rgba(0, 0, 0, 0.45) 13%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.92) 27%, #000 34%, #000 52%, rgba(0, 0, 0, 0.8) 90%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.35) 26px, rgba(0, 0, 0, 0.8) 60px, #000 104px) !important;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 6%, rgba(0, 0, 0, 0.45) 13%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.92) 27%, #000 34%, #000 52%, rgba(0, 0, 0, 0.8) 90%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.35) 26px, rgba(0, 0, 0, 0.8) 60px, #000 104px) !important;
    -webkit-mask-composite: source-in;
    mask-composite: intersect !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100% !important;
  }
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder .video-or-image :is(video, iframe, img) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    aspect-ratio: auto !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder .video-or-image .inner-placeholder::before {
    content: none !important;
  }
  /* De sluier onder de balk en de afloop onderin, zoals ::before en ::after van .header--background-image. */
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder .video-or-image::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 21, 57, 0.76)), color-stop(30%, rgba(0, 21, 57, 0.44)), color-stop(62%, rgba(0, 21, 57, 0.16)), to(rgba(0, 21, 57, 0))) left top/100% clamp(120px, 20vh, 240px) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(8%, rgba(0, 21, 57, 0)), color-stop(58%, rgba(0, 21, 57, 0.3)), to(rgba(0, 21, 57, 0.74))) !important;
    background: linear-gradient(180deg, rgba(0, 21, 57, 0.76) 0%, rgba(0, 21, 57, 0.44) 30%, rgba(0, 21, 57, 0.16) 62%, rgba(0, 21, 57, 0) 100%) left top/100% clamp(120px, 20vh, 240px) no-repeat, linear-gradient(to bottom, rgba(0, 21, 57, 0) 8%, rgba(0, 21, 57, 0.3) 58%, rgba(0, 21, 57, 0.74) 100%) !important;
  }
  /* De textuur, zoals .header--background-image .header--outer-wrapper::after. */
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder .video-or-image::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 62% !important;
    height: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: url("/images/overlay.jpg") left top/cover no-repeat !important;
    mix-blend-mode: screen !important;
    opacity: 0.6 !important;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(12%, #000), color-stop(45%, rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0))) !important;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 100%) !important;
    mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(12%, #000), color-stop(45%, rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0))) !important;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 100%) !important;
  }
  /* Het verloop achter de tekst over de linkerhelft en de volle hoogte, zoals
     .header--outer-wrapper.bottom .header--inner-wrapper::before. */
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder.slick-slide::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 50% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 21, 57, 0.72)), color-stop(10%, rgba(0, 21, 57, 0.58)), color-stop(20%, rgba(0, 21, 57, 0.42)), color-stop(31%, rgba(0, 21, 57, 0.28)), color-stop(42%, rgba(0, 21, 57, 0.17)), color-stop(54%, rgba(0, 21, 57, 0.09)), color-stop(66%, rgba(0, 21, 57, 0.03)), color-stop(78%, rgba(0, 21, 57, 0))) !important;
    background: linear-gradient(to right, rgba(0, 21, 57, 0.72) 0%, rgba(0, 21, 57, 0.58) 10%, rgba(0, 21, 57, 0.42) 20%, rgba(0, 21, 57, 0.28) 31%, rgba(0, 21, 57, 0.17) 42%, rgba(0, 21, 57, 0.09) 54%, rgba(0, 21, 57, 0.03) 66%, rgba(0, 21, 57, 0) 78%) !important;
  }
}
body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .slick-slide:first-child.slick-current .content > * {
  -webkit-animation: brRise 0.8s var(--br-ease) both;
          animation: brRise 0.8s var(--br-ease) both;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .slick-slide:first-child.slick-current .content > *:nth-child(2) {
  -webkit-animation-delay: 0.09s;
          animation-delay: 0.09s;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .slick-slide:first-child.slick-current .content > *:nth-child(3) {
  -webkit-animation-delay: 0.18s;
          animation-delay: 0.18s;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .slick-slide:first-child.slick-current .content > *:nth-child(4) {
  -webkit-animation-delay: 0.27s;
          animation-delay: 0.27s;
}

@-webkit-keyframes brRise {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes brRise {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
body.brf:where(:not(.brf-gen)) .placeholder--image, body.brf:where(:not(.brf-gen)) .grid--item picture {
  border-radius: var(--br-r-lg) !important;
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner-image {
  border-radius: 0 !important;
  overflow: visible !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner-image img {
  -webkit-transition: -webkit-transform 0.35s var(--br-ease);
  transition: -webkit-transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease), -webkit-transform 0.35s var(--br-ease);
  will-change: transform;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner:hover .wrapper--full-banner-image img,
body.brf:where(:not(.brf-gen)) .section.full-banner:hover > .wrapper--full-banner-image img {
  -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
          transform: scale(1.03);
}

body.brf:where(:not(.brf-gen)) .placeholder--image img {
  -webkit-transition: -webkit-transform 0.35s var(--br-ease);
  transition: -webkit-transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease), -webkit-transform 0.35s var(--br-ease);
  will-change: transform;
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link {
  border-radius: var(--br-r-lg);
  -webkit-transition: -webkit-transform 0.35s var(--br-ease);
  transition: -webkit-transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease), -webkit-transform 0.35s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link:hover {
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link:hover .placeholder--image img {
  -webkit-transform: scale(1.045);
      -ms-transform: scale(1.045);
          transform: scale(1.045);
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link .placeholder--image {
  -webkit-box-shadow: var(--br-shadow-sm);
          box-shadow: var(--br-shadow-sm);
  -webkit-transition: -webkit-box-shadow 0.35s var(--br-ease);
  transition: -webkit-box-shadow 0.35s var(--br-ease);
  transition: box-shadow 0.35s var(--br-ease);
  transition: box-shadow 0.35s var(--br-ease), -webkit-box-shadow 0.35s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link:hover .placeholder--image {
  -webkit-box-shadow: var(--br-shadow-md);
          box-shadow: var(--br-shadow-md);
}

body.brf:where(:not(.brf-gen)) .grid--item .placeholder--content {
  padding-top: var(--br-kaart-boven, 14px);
  padding-bottom: var(--br-kaart-onder, 28px);
}

body.brf:where(:not(.brf-gen)) .grid--item .placeholder--content > .heading-5:first-child {
  margin-top: 0 !important;
}

body.brf:where(:not(.brf-gen)) .grid--item .placeholder--content .heading-5 {
  -webkit-transition: color 0.35s var(--br-ease);
  transition: color 0.35s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link:hover .placeholder--content .heading-5 {
  color: var(--br-cyan) !important;
}

body.brf:where(:not(.brf-gen)) .grid--item :is([class*=arrow], i, svg) {
  -webkit-transition: -webkit-transform 0.35s var(--br-ease);
  transition: -webkit-transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease), -webkit-transform 0.35s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link:hover :is([class*=arrow], i, svg) {
  -webkit-transform: translateX(7px);
      -ms-transform: translateX(7px);
          transform: translateX(7px);
}

body.brf:where(:not(.brf-gen)) .button a span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .button a span {
  border-radius: 999px !important;
  border-style: solid !important;
  border-width: 1px !important;
  padding: 13px 26px !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  -webkit-transition: background-color 0.2s var(--br-ease), color 0.2s var(--br-ease), border-color 0.2s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), color 0.2s var(--br-ease), border-color 0.2s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), color 0.2s var(--br-ease), border-color 0.2s var(--br-ease), box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), color 0.2s var(--br-ease), border-color 0.2s var(--br-ease), box-shadow 0.25s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .button a:hover span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .button a:hover span, body.brf:where(:not(.brf-gen)) .button a:focus span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .button a:focus span, body.brf:where(:not(.brf-gen)) .button a:active span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .button a:active span {
  padding: 13px 26px !important;
  border-width: 1px !important;
}

body.brf .header .nav--primary > ul > li > a > span, body.brf .header .nav--primary > ul > li > a:hover > span, body.brf .header .nav--primary > ul > li:hover > a > span, body.brf .header .nav--primary > ul > li.is--active > a > span {
  font-weight: 600 !important;
}

body.brf .header .nav--secondary > ul > li > a > span, body.brf .header .nav--secondary > ul > li > a:hover > span, body.brf .header .nav--secondary > ul > li:hover > a > span {
  font-weight: 500 !important;
}

body.brf .header .nav--secondary > ul > li.login > a > span, body.brf .header .nav--secondary > ul > li.login > a:hover > span {
  font-weight: 600 !important;
}

/* Zonder de sliderpijltjes: slick zet die met top:50% en translateY(-50%) op hun plek, en
   transform:none liet ze bij hover 17px zakken. Ze hebben geen eigen hover-beweging. */
body.brf .nav--secondary > ul > li.login > a:hover, body.brf .footer ul.socials li a:hover, body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=mailto i]:not(.contact-persons a):hover, body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=tel i]:not(.contact-persons a):hover {
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes .item--image {
  position: relative;
}

body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes .item--content {
  z-index: 2;
}

body.brf:where(:not(.brf-gen)) .content--box,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .content--box {
  max-width: 560px;
  padding: clamp(28px, 3vw, 44px) !important;
  border-radius: var(--br-r-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel.quotes .item--content .content--box, body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel.quotes .item--content .content--box p, body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel.quotes .item--content .content--box .heading-4.quote {
  text-align: left !important;
}

body.brf:where(:not(.brf-gen)) .content--box .heading-4.quote {
  line-height: 28px !important;
  letter-spacing: -0.01em;
}

body.brf:where(:not(.brf-gen)) .content--box .logo,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .content--box .logo {
  display: inline-block;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 18px;
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes, body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes .slick-list, body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes .slick-track, body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes .slick-slide, body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes .slick-slide > div, body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes .item--image {
  height: 100% !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes .item--image :is(picture, img) {
  height: 100% !important;
  width: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

body.brf:where(:not(.brf-gen)) .quotes--placeholder > .placeholder--content {
  -ms-flex-item-align: center !important;
      align-self: center !important;
}

body.brf:where(:not(.brf-gen)) .controls--arrows button,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .controls--arrows button {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .controls--arrows button:hover,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .controls--arrows button:hover {
  background: var(--br-cyan) !important;
  color: #ffffff !important;
  border-color: var(--br-cyan) !important;
}

/* Het icoon in de cirkel: het thema maakt het bij hover cyaan, en hierboven wordt de cirkel cyaan;
   dan viel het weg. Wit, zoals bij de pijltjes van de quote-slider. */
body.brf:where(:not(.brf-gen)) .controls--arrows button:hover::before,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .controls--arrows button:hover::before {
  background-color: #ffffff !important;
}

@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image {
    width: calc(100% + var(--br-quote-bleed, 0px)) !important;
    max-width: none !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--content {
    width: calc(100% + var(--br-quote-bleed, 0px)) !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel.quotes {
    height: clamp(460px, 38vw, 600px) !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .quotes--placeholder {
    min-height: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .quotes--placeholder > .placeholder--content {
    padding: clamp(48px, 4.6vw, 80px) 0 !important;
  }
}
body.brf:where(:not(.brf-gen)) .section.quotes .item--content {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
  padding: clamp(18px, 1.6vw, 26px) !important;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .content--box {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  -webkit-column-gap: clamp(18px, 1.8vw, 30px);
     -moz-column-gap: clamp(18px, 1.8vw, 30px);
          column-gap: clamp(18px, 1.8vw, 30px);
  row-gap: 5px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--br-pad) !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .content--box .logo {
  grid-column: 1;
  grid-row: 1/span 2;
  align-self: center;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: 14px 20px !important;
  border-radius: 13px !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .content--box .logo img {
  max-height: 58px !important;
  max-width: 190px !important;
  width: auto !important;
  height: auto !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  display: block !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .content--box .heading-4.quote {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  padding: 0 34px !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .content--box > p:last-child {
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  padding-left: 34px !important;
  opacity: 0.8;
}

/* De textuur uit het thema (/images/overlay.jpg, het lichte verloop linksboven) is terug; een eigen
   CSS-verloop verving hem, maar het origineel werd gemist. */
body.brf:where(:not(.brf-gen)) .section.quotes::before {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  background-image: url("/images/overlay.jpg") !important;
  background-size: cover !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-color: #001539 !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes::after {
  content: none !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .item--image img {
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(12%, rgba(0, 0, 0, 0.1)), color-stop(26%, rgba(0, 0, 0, 0.38)), color-stop(42%, rgba(0, 0, 0, 0.72)), color-stop(58%, rgba(0, 0, 0, 0.94)), color-stop(70%, #000)) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 12%, rgba(0, 0, 0, 0.38) 26%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.94) 58%, #000 70%) !important;
  mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(12%, rgba(0, 0, 0, 0.1)), color-stop(26%, rgba(0, 0, 0, 0.38)), color-stop(42%, rgba(0, 0, 0, 0.72)), color-stop(58%, rgba(0, 0, 0, 0.94)), color-stop(70%, #000)) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 12%, rgba(0, 0, 0, 0.38) 26%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.94) 58%, #000 70%) !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .quotes--placeholder > .placeholder--content > h2:first-child {
  margin-top: 0 !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .quotes--placeholder {
  margin-bottom: 0 !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel-controls {
  position: absolute !important;
  top: clamp(20px, 1.8vw, 30px) !important;
  right: clamp(20px, 1.8vw, 30px) !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 6 !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
  gap: 18px !important;
  width: auto !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .controls--arrows {
  position: relative !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  height: 48px !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .controls--arrows button {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  margin: 0 !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 auto !important;
          flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .controls--arrows button::before {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  mask-position: center !important;
  -webkit-mask-position: center !important;
  mask-size: 15px !important;
  -webkit-mask-size: 15px !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  -webkit-transition: background-color 0.2s var(--br-ease);
  transition: background-color 0.2s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .section.quotes .controls--arrows button:hover::before, body.brf:where(:not(.brf-gen)) .section.quotes .controls--arrows button:focus::before {
  background-color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .controls--arrows button.slick-disabled::before {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

body.brf:where(:not(.brf-gen)) .br-quote-count,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .br-quote-count {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.brf:where(:not(.brf-gen)) .br-quote-count b,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .br-quote-count b {
  color: #ffffff;
  font-weight: 700;
}

body.brf:where(:not(.brf-gen)) .wrapper--counters {
  padding: 0 !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .grid--item {
  position: relative;
  text-align: center;
  padding: 4px clamp(12px, 1.4vw, 24px) !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .grid--item + .grid--item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(rgba(0, 21, 57, 0.16)), to(transparent));
  background: linear-gradient(180deg, transparent, rgba(0, 21, 57, 0.16), transparent);
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .grid--item .item--placeholder {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
  height: auto !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .placeholder--image .image--icon :is(svg, img) {
  width: 100% !important;
  height: 100% !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .image--icon.br-inline {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: transparent !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .image--icon.br-inline svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible;
}

body.brf:where(:not(.brf-gen)) .image--icon.br-inline [data-br-draw],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .image--icon.br-inline [data-br-draw] {
  stroke-dashoffset: var(--br-len);
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

body.brf:where(:not(.brf-gen)) .image--icon.br-inline.br-drawn [data-br-draw],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .image--icon.br-inline.br-drawn [data-br-draw] {
  stroke-dashoffset: 0;
}

body.brf:where(:not(.brf-gen)) .image--icon.br-inline [data-br-pop],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .image--icon.br-inline [data-br-pop] {
  transform-box: view-box;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: scale(0.62);
      -ms-transform: scale(0.62);
          transform: scale(0.62);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
  transition: opacity 0.3s ease-out, -webkit-transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.3s ease-out;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.3s ease-out, -webkit-transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}

body.brf:where(:not(.brf-gen)) .image--icon.br-inline.br-drawn [data-br-pop],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .image--icon.br-inline.br-drawn [data-br-pop] {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  opacity: 1;
}

/* Voordelen-iconen: bribus-refresh.js vervangt de <img> door een SVG die zich tekent. Tot dan
   onzichtbaar, anders stond het icoon er bij het laden even en verdween het weer. Lukt het script
   niet, dan verschijnt het na 6 seconden toch (het script start pas na window.load). */
body.brf:where(:not(.brf-gen)) .placeholder--list.benefits .list--item > img:is([src*=".svg" i], [data-src*=".svg" i]) {
  opacity: 0;
  -webkit-animation: br-icoon-toon 0s linear 6s forwards;
          animation: br-icoon-toon 0s linear 6s forwards;
}

@-webkit-keyframes br-icoon-toon {
  to {
    opacity: 1;
  }
}

@keyframes br-icoon-toon {
  to {
    opacity: 1;
  }
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .grid--item .placeholder--content {
  padding: 0 !important;
  width: 100% !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--news .placeholder--grid {
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
  gap: 40px !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: var(--br-r-lg) !important;
  overflow: visible !important;
  -webkit-transition: -webkit-transform 0.35s var(--br-ease);
  transition: -webkit-transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease), -webkit-transform 0.35s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item:hover {
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
  border-color: transparent !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item .item--placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item .placeholder--image {
  border-radius: var(--br-r-lg) !important;
  overflow: hidden !important;
  -webkit-box-shadow: var(--br-shadow-sm) !important;
          box-shadow: var(--br-shadow-sm) !important;
  -webkit-transition: -webkit-box-shadow 0.35s var(--br-ease);
  transition: -webkit-box-shadow 0.35s var(--br-ease);
  transition: box-shadow 0.35s var(--br-ease);
  transition: box-shadow 0.35s var(--br-ease), -webkit-box-shadow 0.35s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item:hover .placeholder--image {
  -webkit-box-shadow: var(--br-shadow-md) !important;
          box-shadow: var(--br-shadow-md) !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item .placeholder--content {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 22px 0 0 !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item .placeholder--content > p:not([class]) {
  color: rgba(0, 21, 57, 0.72);
  font-size: 16px;
}

body.brf:where(:not(.brf-gen)) .section.has--background-color.licht {
  background: var(--br-licht) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.has--background-color {
  border-radius: 0;
  overflow: visible;
  position: relative;
  z-index: 2;
}

body.brf:where(:not(.brf-gen)) .br-card {
  opacity: 0;
  -webkit-transform: translateY(44px) scale(0.96);
      -ms-transform: translateY(44px) scale(0.96);
          transform: translateY(44px) scale(0.96);
}

body.brf:where(:not(.brf-gen)) .br-card .placeholder--image img {
  -webkit-transform: scale(1.08);
      -ms-transform: scale(1.08);
          transform: scale(1.08);
}

body.brf:where(:not(.brf-gen)) .br-card .placeholder--image {
  -webkit-box-shadow: 0 0 0 rgba(0, 21, 57, 0);
          box-shadow: 0 0 0 rgba(0, 21, 57, 0);
}

body.brf:where(:not(.brf-gen)) .br-card.br-shown {
  opacity: 1;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transition: opacity 0.34s ease-out, -webkit-transform 0.52s cubic-bezier(0.34, 1.32, 0.5, 1);
  transition: opacity 0.34s ease-out, -webkit-transform 0.52s cubic-bezier(0.34, 1.32, 0.5, 1);
  transition: opacity 0.34s ease-out, transform 0.52s cubic-bezier(0.34, 1.32, 0.5, 1);
  transition: opacity 0.34s ease-out, transform 0.52s cubic-bezier(0.34, 1.32, 0.5, 1), -webkit-transform 0.52s cubic-bezier(0.34, 1.32, 0.5, 1);
}

body.brf:where(:not(.brf-gen)) .br-card.br-shown .placeholder--image img {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transition: -webkit-transform 0.35s var(--br-ease);
  transition: -webkit-transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease);
  transition: transform 0.35s var(--br-ease), -webkit-transform 0.35s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .br-card.br-shown .placeholder--image {
  -webkit-box-shadow: var(--br-shadow-sm);
          box-shadow: var(--br-shadow-sm);
  -webkit-transition: -webkit-box-shadow 0.5s var(--br-ease);
  transition: -webkit-box-shadow 0.5s var(--br-ease);
  transition: box-shadow 0.5s var(--br-ease);
  transition: box-shadow 0.5s var(--br-ease), -webkit-box-shadow 0.5s var(--br-ease);
}

/* Lazy-afbeeldingen (lazysizes, slimsy-picture): een <img> zonder src toont tot lazysizes hem invult
   het icoon van een ontbrekende afbeelding met de alt-tekst. Tot dan onzichtbaar. Opacity en geen
   visibility: lazysizes slaat elementen met visibility:hidden over. Alleen .lazyload: de ImageHelper
   (o.a. contactpersonen "Landelijk") zet een data-src zonder src maar laadt via de <source>-srcsets,
   en die afbeeldingen bleven anders onzichtbaar. */
body.brf img.lazyload:not([src]) {
  opacity: 0;
}

/* Dimmen bij hover, zoals het thema (.placeholder--grid:hover .grid--item op .5). De entrees
   (.br-in, .br-shown) zetten opacity met een zwaardere selector op 1, waardoor er nergens meer
   gedimd werd; en een kaart die nog moest verschijnen (.br-reveal/.br-card zonder die klasse) kreeg
   bij hover juist de .5 van het thema en werd onderin het scherm zichtbaar. Die blijft onzichtbaar. */
body.brf:where(:not(.brf-gen)) .placeholder--grid:hover > .grid--item:is(.br-in, .br-shown) {
  opacity: 0.5;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid:hover > .grid--item:is(.br-in, .br-shown):hover {
  opacity: 1;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid:hover > .grid--item:is(.br-reveal:not(.br-in), .br-card:not(.br-shown)) {
  opacity: 0;
}

/* Een kaart die nog moet verschijnen reageert ook niet op de muis: anders kwam hij bij hover omhoog,
   dimde hij de rest en was hij aanklikbaar terwijl je hem niet zag. */
body.brf:where(:not(.brf-gen)) .grid--item:is(.br-reveal:not(.br-in), .br-card:not(.br-shown)) {
  pointer-events: none !important;
}

/* Het raster zelf vangt de muis niet op (thema: pointer-events:none), dus tussen twee kaarten sprong
   alles even terug naar vol. Bij rasters met klikbare kaarten wel opvangen (zoals op de zoekpagina). */
body.brf:where(:not(.brf-gen)) .placeholder--grid:has(> .grid--item.has-link) {
  pointer-events: auto;
}

/* Dimmen vloeiend en voor alle kaarten tegelijk: zonder entree, of als die klaar is (.br-klaar,
   bribus-refresh.js); de entree zelf houdt zijn eigen tijden en verspringing. */
body.brf:where(:not(.brf-gen)) .placeholder--grid > .grid--item:not(.br-reveal, .br-card),
body.brf:where(:not(.brf-gen)) .placeholder--grid > .grid--item.br-klaar {
  -webkit-transition: opacity 0.2s var(--br-ease), -webkit-transform 0.35s var(--br-ease) !important;
  transition: opacity 0.2s var(--br-ease), transform 0.35s var(--br-ease) !important;
  -webkit-transition-delay: 0s !important;
          transition-delay: 0s !important;
}

body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=mailto i]:not(.contact-persons a), body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=tel i]:not(.contact-persons a) {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 11px 20px;
  margin: 6px 10px 6px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), color 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), color 0.2s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=mailto i]:not(.contact-persons a):hover, body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=tel i]:not(.contact-persons a):hover {
  background: var(--br-cyan);
  border-color: var(--br-cyan);
  color: #ffffff;
}

body.brf .footer--outer-wrapper.bottom {
  border-radius: 0;
  background: var(--br-licht);
  position: relative;
  z-index: 2;
}

body.brf .footer .placeholder--content p:first-child {
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

body.brf .footer .placeholder--content.contact-information p:first-child {
  font-size: inherit !important;
  line-height: 26px !important;
  font-weight: inherit !important;
}

body.brf .footer .placeholder--content ul li a {
  display: inline-block;
  padding: 3px 0;
  -webkit-transition: color 0.18s var(--br-ease), -webkit-transform 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease), -webkit-transform 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease), transform 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease), transform 0.18s var(--br-ease), -webkit-transform 0.18s var(--br-ease);
}

body.brf .footer .placeholder--content ul li a:hover {
  color: var(--br-cyan) !important;
  -webkit-transform: translateX(3px);
      -ms-transform: translateX(3px);
          transform: translateX(3px);
}

body.brf:where(:not(.brf-gen)) a:focus-visible,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) a:focus-visible, body.brf:where(:not(.brf-gen)) button:focus-visible,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) button:focus-visible {
  outline: 3px solid var(--br-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

body.brf:where(:not(.brf-gen)) .br-reveal {
  opacity: 0;
  -webkit-transform: translateY(22px);
      -ms-transform: translateY(22px);
          transform: translateY(22px);
}

body.brf:where(:not(.brf-gen)) .br-reveal.br-in {
  opacity: 1;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transition: opacity 0.7s var(--br-ease), -webkit-transform 0.7s var(--br-ease);
  transition: opacity 0.7s var(--br-ease), -webkit-transform 0.7s var(--br-ease);
  transition: opacity 0.7s var(--br-ease), transform 0.7s var(--br-ease);
  transition: opacity 0.7s var(--br-ease), transform 0.7s var(--br-ease), -webkit-transform 0.7s var(--br-ease);
}

@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.donkerblauw, body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner {
    border-radius: 22px !important;
  }
  body.brf .footer--outer-wrapper.bottom {
    border-radius: 0;
  }
  body.brf .header--outer-wrapper.top {
    border-radius: 18px !important;
  }
  body.brf:where(:not(.brf-gen)) .placeholder--image, body.brf:where(:not(.brf-gen)) .grid--item picture {
    border-radius: 18px !important;
  }
  body.brf:where(:not(.brf-gen)) .content--box,
  body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .content--box {
    padding: 22px !important;
    border-radius: 18px;
    max-width: none !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--content {
    padding: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .placeholder--carousel.quotes {
    padding: 0 20px !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel-controls {
    margin: 0 20px 20px auto !important;
  }
  body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content {
    padding-top: 118px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.brf:where(:not(.brf-gen)) *,
  body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) * {
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
  }
  body.brf:where(:not(.brf-gen)) .br-reveal, body.brf:where(:not(.brf-gen)) .br-card, body.brf:where(:not(.brf-gen)) .br-card .placeholder--image img {
    opacity: 1 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }
  body.brf:where(:not(.brf-gen)) .image--icon.br-inline [data-br-draw],
  body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .image--icon.br-inline [data-br-draw] {
    stroke-dashoffset: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .image--icon.br-inline [data-br-pop],
  body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .image--icon.br-inline [data-br-pop] {
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
    opacity: 1 !important;
  }
}
body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .placeholder--image .image--icon {
  width: 78px !important;
  height: 78px !important;
  margin: 0 auto !important;
  -webkit-animation: none;
          animation: none;
  -webkit-transition: -webkit-transform 0.3s var(--br-ease);
  transition: -webkit-transform 0.3s var(--br-ease);
  transition: transform 0.3s var(--br-ease);
  transition: transform 0.3s var(--br-ease), -webkit-transform 0.3s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .placeholder--image {
  border-radius: 0 !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 auto !important;
          flex: 0 0 auto !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}

body.brf:where(:not(.brf-gen)) .image--icon.br-inline [data-br-draw],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .image--icon.br-inline [data-br-draw],
body.brf:where(:not(.brf-gen)) .image--icon.br-inline [data-br-pop],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .image--icon.br-inline [data-br-pop] {
  stroke: var(--br-blue) !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .grid--item:hover .image--icon {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner-image.image-1 :is(picture, img) {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(100deg, rgba(0, 21, 57, 0.96) 0%, rgba(0, 21, 57, 0.9) 38%, rgba(0, 21, 57, 0.7) 68%, rgba(0, 21, 57, 0.45) 100%) !important;
  pointer-events: none;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner-image.image-2 {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 2;
  align-self: end !important;
  width: clamp(200px, 23vw, 330px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 0 calc(-1 * var(--br-pad)) !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 auto !important;
          flex: 0 0 auto !important;
  -webkit-filter: drop-shadow(0 6px 26px rgba(0, 21, 57, 0.55));
          filter: drop-shadow(0 6px 26px rgba(0, 21, 57, 0.55));
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner-image.image-2 :is(picture, img) {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: bottom center !important;
     object-position: bottom center !important;
  display: block !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .full-banner--content h2 {
  margin: 0 0 14px !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .full-banner--content > p:first-of-type {
  margin: 0 0 22px !important;
  opacity: 0.85;
}

body.brf .footer--outer-wrapper.top,
body.brf .footer--outer-wrapper.bottom,
body.brf .copyright--outer-wrapper.bottom {
  background: transparent !important;
  border-radius: 0 !important;
  position: relative;
  z-index: 1;
}

body.brf .copyright {
  background: #001539 !important;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.brf .footer .br-footer-logo {
  width: 150px;
  height: auto;
  display: block;
}

body.brf .footer--outer-wrapper.top img.br-hidden {
  display: none !important;
}

body.brf .footer .placeholder--content p {
  color: #ffffff !important;
}

body.brf .footer .placeholder--content.contact-information p strong {
  color: #ffffff !important;
  font-size: 16px !important;
  margin-bottom: 10px;
}

body.brf .footer .contact-information p a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 7px 14px;
  margin: 6px 8px 0 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff !important;
  font-size: 14px;
  text-decoration: none;
  -webkit-transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), color 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), color 0.2s var(--br-ease);
}

body.brf .footer .contact-information p a:hover {
  background: var(--br-cyan) !important;
  border-color: var(--br-cyan) !important;
  color: #ffffff !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

body.brf .footer .contact-information p i {
  color: var(--br-cyan) !important;
  margin-right: 2px;
}

body.brf .footer .footer-navigation ul li a {
  color: #ffffff !important;
  font-size: 14px;
  padding: 4px 0 !important;
}

body.brf .footer .footer-navigation ul li a:hover {
  color: #ffffff !important;
  -webkit-transform: translateX(4px);
      -ms-transform: translateX(4px);
          transform: translateX(4px);
}

body.brf .footer ul.socials {
  margin-top: 26px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

body.brf .footer ul.socials li a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px;
  background: transparent !important;
  -webkit-transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), color 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), color 0.2s var(--br-ease);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

body.brf .footer ul.socials li a:hover {
  background: var(--br-cyan) !important;
  color: #ffffff !important;
  border-color: var(--br-cyan) !important;
}

body.brf .copyright a:hover {
  color: var(--br-cyan) !important;
}

body.brf .footer ul.socials li a i,
body.brf .footer ul.socials li a i::before {
  color: #ffffff !important;
}

body.brf .footer ul.socials li a:hover i,
body.brf .footer ul.socials li a:hover i::before {
  color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) .section {
  padding-top: var(--br-space-top) !important;
  padding-bottom: var(--br-space) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.has--background-color.licht.narrow-page {
  padding-bottom: var(--br-space) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.donkerblauw {
  width: calc(100% - 2 * clamp(16px, 2vw, 32px)) !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 40px !important;
  overflow: hidden !important;
  -webkit-box-shadow: 0 30px 70px rgba(0, 21, 57, 0.22);
          box-shadow: 0 30px 70px rgba(0, 21, 57, 0.22);
  margin-top: var(--br-space) !important;
  margin-bottom: var(--br-space) !important;
  padding: var(--br-pad) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.quotes {
  padding: 0 !important;
}

@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .section.quotes .quotes--placeholder > .placeholder--content {
    padding: var(--br-pad) 0 !important;
  }
}
body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner {
  border-radius: 40px !important;
  overflow: hidden !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  gap: clamp(28px, 4vw, 72px) !important;
  padding: var(--br-pad) !important;
  min-height: 0 !important;
}

body.brf:where(:not(.brf-gen)) .counters--placeholder {
  background: #ffffff;
  border-radius: var(--br-r-lg);
  -webkit-box-shadow: var(--br-shadow-sm);
          box-shadow: var(--br-shadow-sm);
  padding: var(--br-pad) !important;
}

body.brf:where(:not(.brf-gen)) .main .full-banner--content p span > i[class*=fa-],
body.brf .footer .contact-information p > i {
  display: none !important;
}

body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=mailto i]:not(.contact-persons a)::before,
body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=tel i]:not(.contact-persons a)::before,
body.brf .footer .contact-information p a::before {
  content: var(--br-ico);
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  margin-right: 9px;
  font-size: 0.92em;
  line-height: 1;
  color: var(--br-cyan);
  -webkit-transition: color 0.35s var(--br-ease);
  transition: color 0.35s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) a[href^=tel i],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) a[href^=tel i] {
  --br-ico:"";
}

body.brf:where(:not(.brf-gen)) a[href^=mailto i],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) a[href^=mailto i] {
  --br-ico:"";
}

body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=mailto i]:not(.contact-persons a):hover::before,
body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=tel i]:not(.contact-persons a):hover::before,
body.brf .footer .contact-information p a:hover::before {
  color: #ffffff !important;
}

body.brf :is(.button a,
.grid--item a,
.grid--item.has-link a,
.header a,
.nav--primary a, .nav--secondary a,
.footer a,
.copyright a,
.controls--arrows button,
.content--box a,
.placeholder--carousel a,
.homepage-super-videoslider-header a) {
  text-decoration: none !important;
}

body.brf :is(.button a,
.grid--item a,
.header a,
.nav--primary a, .nav--secondary a,
.footer a,
.copyright a,
.content--box a,
.placeholder--carousel a,
.homepage-super-videoslider-header a):is(:hover, :focus, :active) {
  text-decoration: none !important;
}

body.brf .footer--outer-wrapper.bottom::after {
  content: none !important;
}

body.brf .footer .placeholder--content p strong {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: block;
  margin-bottom: 14px;
}

body.brf .copyright p,
body.brf .copyright span {
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 20px !important;
}

body.brf .copyright a {
  color: #ffffff !important;
  text-decoration: none;
  -webkit-transition: color 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease);
}

body.brf .footer--outer-wrapper.top .footer--inner-wrapper {
  padding-top: var(--br-space) !important;
  padding-bottom: var(--br-pad) !important;
}

body.brf .footer--outer-wrapper.bottom .footer--inner-wrapper {
  padding-top: 0 !important;
  padding-bottom: var(--br-space) !important;
  color: #ffffff;
}

body.brf .copyright--inner-wrapper {
  /* De copyrightregel stond met nul zijruimte tegen de rand van het scherm;
     hij hoort op dezelfde contentlijn als de footer erboven. */
  padding: 22px var(--br-marge) !important;
  padding-top: clamp(18px, 1.9vw, 28px) !important;
  padding-bottom: clamp(18px, 1.9vw, 28px) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .full-banner--content {
  position: relative !important;
  z-index: 2 !important;
  grid-column: 1;
  max-width: 640px;
  padding: 0 !important;
}

body.brf:where(:not(.brf-gen)) .full-banner--content > h2:first-child {
  margin-top: 0 !important;
}

@media (max-width: 820px) {
  body.brf {
    --br-footer-overlap:22px;
  }
}
body.brf:where(:not(.brf-gen)) .main {
  padding-bottom: 0 !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child::after {
  content: none !important;
}

body.brf .footer {
  position: relative;
  z-index: 4;
  margin-top: calc(-1 * var(--br-footer-overlap)) !important;
  background: transparent !important;
  overflow: hidden;
}

body.brf .footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(90% 120% at 12% 0%, rgba(0, 38, 100, 0.65) 0%, rgba(0, 21, 57, 0) 62%), linear-gradient(160deg, #002664 0%, #001539 100%);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) 0 100%/100% calc(100% - var(--br-footer-overlap)) no-repeat, radial-gradient(circle at 100% 0, transparent calc(var(--br-footer-overlap) - 0.5px), #000 var(--br-footer-overlap)) 0 0/var(--br-footer-overlap) var(--br-footer-overlap) no-repeat, radial-gradient(circle at 0 0, transparent calc(var(--br-footer-overlap) - 0.5px), #000 var(--br-footer-overlap)) 100% 0/var(--br-footer-overlap) var(--br-footer-overlap) no-repeat;
  -webkit-mask: linear-gradient(#000, #000) 0 100%/100% calc(100% - var(--br-footer-overlap)) no-repeat, radial-gradient(circle at 100% 0, transparent calc(var(--br-footer-overlap) - 0.5px), #000 var(--br-footer-overlap)) 0 0/var(--br-footer-overlap) var(--br-footer-overlap) no-repeat, radial-gradient(circle at 0 0, transparent calc(var(--br-footer-overlap) - 0.5px), #000 var(--br-footer-overlap)) 100% 0/var(--br-footer-overlap) var(--br-footer-overlap) no-repeat;
  mask: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) 0 100%/100% calc(100% - var(--br-footer-overlap)) no-repeat, radial-gradient(circle at 100% 0, transparent calc(var(--br-footer-overlap) - 0.5px), #000 var(--br-footer-overlap)) 0 0/var(--br-footer-overlap) var(--br-footer-overlap) no-repeat, radial-gradient(circle at 0 0, transparent calc(var(--br-footer-overlap) - 0.5px), #000 var(--br-footer-overlap)) 100% 0/var(--br-footer-overlap) var(--br-footer-overlap) no-repeat;
  mask: linear-gradient(#000, #000) 0 100%/100% calc(100% - var(--br-footer-overlap)) no-repeat, radial-gradient(circle at 100% 0, transparent calc(var(--br-footer-overlap) - 0.5px), #000 var(--br-footer-overlap)) 0 0/var(--br-footer-overlap) var(--br-footer-overlap) no-repeat, radial-gradient(circle at 0 0, transparent calc(var(--br-footer-overlap) - 0.5px), #000 var(--br-footer-overlap)) 100% 0/var(--br-footer-overlap) var(--br-footer-overlap) no-repeat;
}

body.brf:where(:not(.brf-gen)) .main > .section.donkerblauw .wrapper--full-banner {
  margin: 0 !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child {
  padding-bottom: var(--br-space) !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left {
  background: var(--br-licht) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left::after {
  background: none !important;
  content: none !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left :is(h2, p, span, li, strong) {
  color: var(--br-navy) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left .section--wrapper p:not(.button) {
  color: rgba(0, 21, 57, 0.75) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left::before {
  background: linear-gradient(100deg, rgba(var(--br-licht-rgb), 0) 26%, rgba(var(--br-licht-rgb), 0.55) 44%, rgba(var(--br-licht-rgb), 0.94) 60%, rgb(var(--br-licht-rgb)) 72%) !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left .button:not(.alternative) a span,
body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left .button:not(.alternative) a:hover span,
body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left .button:not(.alternative) a:focus span {
  color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left .button.alternative a span {
  color: var(--br-navy) !important;
  border-color: rgba(0, 21, 57, 0.22) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left .button.alternative a:hover span {
  color: #ffffff !important;
  background: var(--br-cyan) !important;
  border-color: var(--br-cyan) !important;
}

@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .section.quotes .wrapper--quotes {
    padding-left: var(--br-pad) !important;
    padding-right: var(--br-pad) !important;
  }
}
:root {
  --br-navy:#001539;
  --br-blue:#002664;
  --br-cyan:#009FDA;
  --br-hover:#002664;
  --br-line:rgba(0, 21, 57, 0.1);
  --br-shadow-sm:0 1px 2px rgba(0, 21, 57, 0.05),0 4px 14px rgba(0, 21, 57, 0.06);
  --br-shadow-md:0 2px 6px rgba(0, 21, 57, 0.06),0 18px 40px rgba(0, 21, 57, 0.14);
  --br-ease:cubic-bezier(.22,.61,.36,1);
  --br-r:18px;
  --br-r-lg:26px;
  --br-kaart-boven:14px;
  --br-kaart-onder:28px;
  --br-space:clamp(56px,6vw,96px);
  --br-pad:clamp(30px,3.4vw,56px);
  --br-el:40px;
  --br-space-top:calc(var(--br-space) - var(--br-el));
  --br-cyan-btn:#009FDA;
  --br-cyan-btn-hover:#002664;
}

body.brf:where(:not(.brf-gen)) .button:not(.alternative) a span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .button:not(.alternative) a span {
  border-color: var(--br-cyan-btn) !important;
  -webkit-box-shadow: 0 6px 18px rgba(0, 159, 218, 0.28) !important;
          box-shadow: 0 6px 18px rgba(0, 159, 218, 0.28) !important;
  background: var(--br-cyan-btn) !important;
  color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) .button:not(.alternative) a:hover span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .button:not(.alternative) a:hover span {
  background: var(--br-cyan-btn-hover) !important;
  color: #ffffff !important;
  border-color: var(--br-cyan-btn-hover) !important;
  -webkit-box-shadow: 0 10px 26px rgba(0, 159, 218, 0.38) !important;
          box-shadow: 0 10px 26px rgba(0, 159, 218, 0.38) !important;
}

body.brf:where(:not(.brf-gen)) .button.alternative a:hover span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .button.alternative a:hover span {
  background: var(--br-cyan-btn) !important;
  color: #ffffff !important;
  border-color: var(--br-cyan-btn) !important;
  -webkit-box-shadow: 0 10px 26px rgba(0, 159, 218, 0.35);
          box-shadow: 0 10px 26px rgba(0, 159, 218, 0.35);
}

body.brf .nav--secondary > ul > li.login > a:hover,
body.brf .nav--primary > ul > li.has--children > ul li a:hover,
body.brf .nav--secondary > ul > li.has--children > ul li a:hover,
body.brf:where(:not(.brf-gen)) .controls--arrows button:hover,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .controls--arrows button:hover,
body.brf .footer ul.socials li a:hover,
body.brf .footer .contact-information p a:hover,
body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=mailto i]:not(.contact-persons a):hover,
body.brf:where(:not(.brf-gen)) :is(.main > .section:last-child .section--wrapper, .main .full-banner--content) a[href^=tel i]:not(.contact-persons a):hover {
  background: var(--br-cyan-btn) !important;
  border-color: var(--br-cyan-btn) !important;
}

body.brf .nav--secondary > ul > li.favorites > a .count {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  text-align: center !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: var(--br-cyan-btn-hover) !important;
  color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .button.alternative a span {
  background: var(--br-cyan-btn) !important;
  border-color: var(--br-cyan-btn) !important;
  color: #ffffff !important;
  -webkit-box-shadow: 0 6px 18px rgba(0, 159, 218, 0.28) !important;
          box-shadow: 0 6px 18px rgba(0, 159, 218, 0.28) !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .button.alternative a:hover span,
body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .button.alternative a:focus span,
body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .button:not(.alternative) a:hover span,
body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .button:not(.alternative) a:focus span,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .button:not(.alternative) a:hover span,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .button:not(.alternative) a:focus span,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .button.alternative a:hover span,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .button.alternative a:focus span {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--br-blue) !important;
  -webkit-box-shadow: 0 10px 26px rgba(0, 21, 57, 0.3) !important;
          box-shadow: 0 10px 26px rgba(0, 21, 57, 0.3) !important;
}

/* De datum voor de inleiding: vet in de tekstkleur, met een streep ertussen ("17-09-2026 | Duurzaam
   ..."). Stond eerst in een pill. De spatie na de streep is de regelovergang na </strong>. */
body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item .placeholder--content > p:not([class]) > strong:first-child {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.brf:where(:not(.brf-gen)) .wrapper--news .grid--item .placeholder--content > p:not([class]) > strong:first-child::after {
  content: "|";
  margin-left: 0.4em;
  font-weight: 400;
  opacity: 0.45;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .placeholder--content > p.heading-6 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgba(0, 21, 57, 0.68) !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .placeholder--content > p.heading-3 {
  font-size: clamp(36px, 3.4vw, 52px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 6px !important;
  /* Donkerblauw en zonder verloop: de cijfers stonden in een verloop van blauw naar cyaan. */
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--br-navy) !important;
}

body.brf .nav--primary > ul > li.has--children > ul,
body.brf .nav--secondary > ul > li.has--children > ul {
  --br-dd-offset:21px;
  top: calc(100% + var(--br-dd-offset)) !important;
}

body.brf .header.is-stuck .nav--primary > ul > li.has--children > ul {
  --br-dd-offset:23px;
}

body.brf .nav--primary > ul > li.has--children > ul::before,
body.brf .nav--secondary > ul > li.has--children > ul::before {
  top: calc(-1 * var(--br-dd-offset) - 4px) !important;
  height: calc(var(--br-dd-offset) + 4px) !important;
}

body.brf .nav--secondary {
  overflow: visible !important;
  opacity: 1;
  -webkit-transition: height 0.38s var(--br-ease), opacity 0.22s var(--br-ease);
  transition: height 0.38s var(--br-ease), opacity 0.22s var(--br-ease);
}

/* Het secundaire menu (Referenties, Keukenportaal, Werken bij, Over Bribus)
   klapte bij scrollen in. Op de live site blijft het in de zwevende balk staan,
   zodat bezoekers die pagina's vanaf elke plek bereiken (feedback Sophie,
   14 okt). Het blijft dus staan; alleen het logo wordt bij scrollen compact. */
body.brf .nav--secondary > ul > li.has--children.br-open > ul {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.brf .nav--secondary > ul > li.has--children.br-open > a > span {
  color: var(--br-navy) !important;
}

body.brf .nav--secondary > ul > li.has--children.br-open > a::after {
  color: var(--br-cyan) !important;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

body.brf .nav--secondary > ul > li.has--children > a::after {
  line-height: 1 !important;
  font-size: 11px !important;
  color: rgba(0, 21, 57, 0.45) !important;
  margin-left: 5px;
  display: block !important;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-transition: color 0.18s var(--br-ease), -webkit-transform 0.22s var(--br-ease);
  transition: color 0.18s var(--br-ease), -webkit-transform 0.22s var(--br-ease);
  transition: transform 0.22s var(--br-ease), color 0.18s var(--br-ease);
  transition: transform 0.22s var(--br-ease), color 0.18s var(--br-ease), -webkit-transform 0.22s var(--br-ease);
}

body.brf .nav--secondary > ul > li.has--children {
  position: relative;
}

body.brf .nav--secondary > ul > li.has--children.br-open::after {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

body.brf .nav--secondary > ul > li.has--children > ul {
  --br-dd-offset:12px;
  z-index: 12 !important;
  background: #ffffff !important;
}

body.brf .nav--secondary > ul > li.has--children > ul::before {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--br-dd-offset) - 4px);
  height: calc(var(--br-dd-offset) + 4px);
  background: transparent;
}

body.brf .nav--secondary > ul > li.has--children.br-open {
  z-index: 12 !important;
}

body.brf .nav--secondary > ul > li.has--children::after {
  content: none !important;
  position: absolute;
  left: 0;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--br-cyan);
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 0.26s var(--br-ease);
  transition: -webkit-transform 0.26s var(--br-ease);
  transition: transform 0.26s var(--br-ease);
  transition: transform 0.26s var(--br-ease), -webkit-transform 0.26s var(--br-ease);
}

body.brf .nav--secondary > ul > li.has--children > a > span {
  position: relative;
}

body.brf .nav--secondary > ul > li.has--children > a > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--br-cyan);
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 0.26s var(--br-ease);
  transition: -webkit-transform 0.26s var(--br-ease);
  transition: transform 0.26s var(--br-ease);
  transition: transform 0.26s var(--br-ease), -webkit-transform 0.26s var(--br-ease);
}

body.brf .nav--secondary > ul > li.has--children.br-open > a > span::after {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

body.brf .nav--primary > ul > li.has--children > a::after {
  line-height: 1 !important;
  display: block !important;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-transition: color 0.18s var(--br-ease), -webkit-transform 0.22s var(--br-ease);
  transition: color 0.18s var(--br-ease), -webkit-transform 0.22s var(--br-ease);
  transition: transform 0.22s var(--br-ease), color 0.18s var(--br-ease);
  transition: transform 0.22s var(--br-ease), color 0.18s var(--br-ease), -webkit-transform 0.22s var(--br-ease);
}

body.brf .nav--primary > ul > li.has--children:hover > a::after {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--br-cyan) !important;
}

body.brf .nav--secondary > ul > li.favorites a:hover span.heart::before,
body.brf .nav--secondary > ul > li.favorites a:focus span.heart::before {
  font-weight: 400 !important;
}

body.brf .nav--secondary > ul > li.favorites span.heart::before {
  -webkit-transition: color 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .slick-slide:has(video) .content {
  max-width: 700px !important;
}

body.brf:where(:not(.brf-gen)) .slick-slide:has(video) .content ul {
  gap: 10px 26px !important;
  margin-top: 26px !important;
}

body.brf:where(:not(.brf-gen)) .slick-slide:has(video) .content ul li {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* Alleen de slider in de header: deze regel raakte ook de kaarten in de
   slider op Bribus GEN en gaf die 180px ruimte boven de titel. */
body.brf:where(:not(.brf-gen)) .header .slick-slider .slick-slide .content {
  -ms-flex-item-align: start !important;
      align-self: flex-start !important;
  padding-top: 180px !important;
}

body.brf .nav--secondary > ul > li.favorites a:hover span.heart::before {
  color: rgba(0, 21, 57, 0.72) !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content ul li,
body.brf:where(:not(.brf-gen)) .slick-slide:has(video) .content ul li {
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content ul li:hover,
body.brf:where(:not(.brf-gen)) .slick-slide:has(video) .content ul li:hover {
  background: none !important;
  border-color: transparent !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

body.brf .nav--primary > ul > li.has--children.br-open > ul {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .item--image {
  width: calc(100% + var(--br-quote-bleed, 0px)) !important;
}

body.brf .footer::after {
  content: "" !important;
  position: absolute;
  z-index: 0;
  right: -90px;
  bottom: -120px;
  width: 520px;
  height: 520px;
  background: var(--br-mark) center/contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}

@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .section.quotes .item--content {
    width: calc(100% + var(--br-quote-bleed, 0px)) !important;
  }
}
@media (max-width: 820px) {
  body.brf {
    --br-hero-overlap:40px;
    --br-hero-radius:22px;
  }
}
body.brf:where(:not(.brf-gen)) .main > .section:first-child {
  overflow: visible !important;
  position: relative;
  z-index: 5;
  padding-top: var(--br-space-top) !important;
  padding-bottom: var(--br-space) !important;
  border-radius: 0 !important;
}

body.brf:where(:not(.brf-gen)):has(.homepage-super-videoslider-header, .header:not(.homepage):not(.navigation-only) > .header--outer-wrapper.bottom) .main > :nth-child(1 of :not(script):not(style):not(.header)) {
  margin-top: calc(-1 * var(--br-hero-overlap)) !important;
}

body.brf:where(:not(.brf-gen)) .header {
  z-index: auto !important;
}

body.brf:where(:not(.brf-gen)) .header.homepage::before {
  content: none !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) {
  background: transparent !important;
  padding-top: 0 !important;
}

body.brf:where(:not(.brf-gen)) .header.navigation-only {
  background: transparent !important;
  position: relative;
  z-index: auto !important;
  padding-top: 0 !important;
  height: var(--br-kop-band) !important;
  min-height: var(--br-kop-band) !important;
}

body.brf:where(:not(.brf-gen)) .header.navigation-only::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 6;
  pointer-events: none;
  background: var(--br-navy);
}

body.brf:where(:not(.brf-gen)):has(.header.navigation-only) .main > :nth-child(1 of :not(script):not(style):not(.header)) {
  margin-top: calc(-1 * var(--br-hero-overlap)) !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: var(--br-navy);
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom)::after {
  z-index: 8 !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom {
  z-index: 9 !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header {
  position: relative !important;
  z-index: 6;
}

body.brf:where(:not(.brf-gen)) .header.navigation-only::before,
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom)::before,
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image,
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom)::after,
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom,
body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header {
  --o:var(--br-hero-overlap);
  --r:var(--br-hero-radius);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--o)), calc(100% - var(--r) * 0) calc(100% - var(--o) + var(--r) * 1), calc(100% - var(--r) * 0.0086) calc(100% - var(--o) + var(--r) * 0.8695), calc(100% - var(--r) * 0.0341) calc(100% - var(--o) + var(--r) * 0.7412), calc(100% - var(--r) * 0.0761) calc(100% - var(--o) + var(--r) * 0.6173), calc(100% - var(--r) * 0.134) calc(100% - var(--o) + var(--r) * 0.5), calc(100% - var(--r) * 0.2066) calc(100% - var(--o) + var(--r) * 0.3912), calc(100% - var(--r) * 0.2929) calc(100% - var(--o) + var(--r) * 0.2929), calc(100% - var(--r) * 0.3912) calc(100% - var(--o) + var(--r) * 0.2066), calc(100% - var(--r) * 0.5) calc(100% - var(--o) + var(--r) * 0.134), calc(100% - var(--r) * 0.6173) calc(100% - var(--o) + var(--r) * 0.0761), calc(100% - var(--r) * 0.7412) calc(100% - var(--o) + var(--r) * 0.0341), calc(100% - var(--r) * 0.8695) calc(100% - var(--o) + var(--r) * 0.0086), calc(100% - var(--r) * 1) calc(100% - var(--o) + var(--r) * 0), calc(var(--r) * 1) calc(100% - var(--o) + var(--r) * 0), calc(var(--r) * 0.8695) calc(100% - var(--o) + var(--r) * 0.0086), calc(var(--r) * 0.7412) calc(100% - var(--o) + var(--r) * 0.0341), calc(var(--r) * 0.6173) calc(100% - var(--o) + var(--r) * 0.0761), calc(var(--r) * 0.5) calc(100% - var(--o) + var(--r) * 0.134), calc(var(--r) * 0.3912) calc(100% - var(--o) + var(--r) * 0.2066), calc(var(--r) * 0.2929) calc(100% - var(--o) + var(--r) * 0.2929), calc(var(--r) * 0.2066) calc(100% - var(--o) + var(--r) * 0.3912), calc(var(--r) * 0.134) calc(100% - var(--o) + var(--r) * 0.5), calc(var(--r) * 0.0761) calc(100% - var(--o) + var(--r) * 0.6173), calc(var(--r) * 0.0341) calc(100% - var(--o) + var(--r) * 0.7412), calc(var(--r) * 0.0086) calc(100% - var(--o) + var(--r) * 0.8695), calc(var(--r) * 0) calc(100% - var(--o) + var(--r) * 1), 0 calc(100% - var(--o)));
}

body.brf:where(:not(.brf-gen)) .controls--arrows button.slick-prev::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E") !important;
}

body.brf:where(:not(.brf-gen)) .controls--arrows button.slick-next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") !important;
}

body.brf:where(:not(.brf-gen)) .controls--arrows button::before,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .controls--arrows button::before {
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* De actieve staat blijft alleen op het eerste niveau van het hoofdmenu: daar
   wil je zien in welk deel van de site je zit. De subitems in de uitklapmenu's
   en het secundaire menu hebben hem niet meer - daar stond hij ook op
   br-current en is--active, en dat maakte het beeld onrustig zonder dat het
   iets vertelde wat de kop van de pagina niet al zegt. Hover blijft overal
   cyaan; die komt uit de algemene hoverregel hierboven. */
body.brf .header .nav--primary > ul > li:is(.is-selected, .is--active, .br-current) > a,
body.brf .header .nav--primary > ul > li:is(.is-selected, .is--active, .br-current) > a span {
  color: var(--br-cyan) !important;
}

/* Mobiel menu: dezelfde regel als in de balk. Alleen het eerste niveau laat
   zien waar je bent; de niveaus daaronder (de uitklaplijsten) niet meer. De
   selector stond eerst op elke li, dus ook op subitems. */
body.brf nav.mobile .slinky-menu > ul > li.is-selected > a,
body.brf nav.mobile .slinky-menu > ul > li.is-selected > a span {
  color: var(--br-cyan) !important;
  font-weight: 700 !important;
}

body.brf nav.mobile .slinky-menu ul ul li.is-selected > a,
body.brf nav.mobile .slinky-menu ul ul li.is-selected > a span {
  color: inherit !important;
  font-weight: inherit !important;
}

body.brf:where(:not(.brf-gen)) p.quote::before,
body.brf:where(:not(.brf-gen)) p.quote::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='37' height='29' viewBox='0 0 37 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8579 1.06911C6.58638 4.16389 1.46592 10.466 1.46592 17.6121C1.46592 19.4409 1.7754 23.9424 4.75765 25.9118C7.17721 27.4873 10.4689 27.6561 12.9729 26.3057C15.1111 25.1522 16.2928 23.1546 16.2928 20.6507C16.2928 17.8935 15.3362 16.0647 13.0854 14.5455L8.47139 11.4507L8.69646 11.1131C10.8628 8.07457 13.6481 5.40181 16.1239 4.02322L14.8579 1.06911ZM9.23102 28.0219C7.48668 28.0219 5.74235 27.5436 4.3075 26.587C1.01577 24.3925 0.650024 19.5815 0.650024 17.6121C0.650024 10.044 6.13623 3.34799 14.9423 0.168806L15.2799 0.0281344L17.1368 4.38897L16.7992 4.55777C14.5203 5.73942 11.735 8.35592 9.65303 11.2256L13.5637 13.8703C16.0395 15.5583 17.1368 17.6403 17.1368 20.6507C17.1368 23.4078 15.7582 25.7148 13.3668 27.009C12.1289 27.6843 10.694 28.0219 9.23102 28.0219ZM33.8205 1.06911C25.549 4.16389 20.4285 10.4941 20.4285 17.6121C20.4285 19.5534 20.7943 24.2519 24.2267 26.2213C26.6462 27.5998 29.7129 27.5998 32.1043 26.2213C34.1581 25.0396 35.2835 23.0702 35.2835 20.6788C35.2835 17.9216 34.3269 16.0929 32.0761 14.5736L27.4621 11.4788L27.6872 11.1412C29.8254 8.10271 32.6107 5.42994 35.0584 4.05135L33.8205 1.06911ZM28.1936 28.05C26.6743 28.05 25.1551 27.6843 23.8328 26.8965C20.0346 24.7301 19.6126 19.6659 19.6126 17.584C19.6126 10.0158 25.0988 3.31986 33.9049 0.140672L34.2706 0L36.1275 4.36083L35.7899 4.52964C33.4829 5.71128 30.6976 8.32778 28.6156 11.1975L32.5263 13.8421C35.0021 15.5021 36.0994 17.6121 36.0994 20.6225C36.0994 23.2671 34.8052 25.546 32.5263 26.8684C31.204 27.6561 29.7129 28.05 28.1936 28.05Z' fill='%23009FDA'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg width='37' height='29' viewBox='0 0 37 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8579 1.06911C6.58638 4.16389 1.46592 10.466 1.46592 17.6121C1.46592 19.4409 1.7754 23.9424 4.75765 25.9118C7.17721 27.4873 10.4689 27.6561 12.9729 26.3057C15.1111 25.1522 16.2928 23.1546 16.2928 20.6507C16.2928 17.8935 15.3362 16.0647 13.0854 14.5455L8.47139 11.4507L8.69646 11.1131C10.8628 8.07457 13.6481 5.40181 16.1239 4.02322L14.8579 1.06911ZM9.23102 28.0219C7.48668 28.0219 5.74235 27.5436 4.3075 26.587C1.01577 24.3925 0.650024 19.5815 0.650024 17.6121C0.650024 10.044 6.13623 3.34799 14.9423 0.168806L15.2799 0.0281344L17.1368 4.38897L16.7992 4.55777C14.5203 5.73942 11.735 8.35592 9.65303 11.2256L13.5637 13.8703C16.0395 15.5583 17.1368 17.6403 17.1368 20.6507C17.1368 23.4078 15.7582 25.7148 13.3668 27.009C12.1289 27.6843 10.694 28.0219 9.23102 28.0219ZM33.8205 1.06911C25.549 4.16389 20.4285 10.4941 20.4285 17.6121C20.4285 19.5534 20.7943 24.2519 24.2267 26.2213C26.6462 27.5998 29.7129 27.5998 32.1043 26.2213C34.1581 25.0396 35.2835 23.0702 35.2835 20.6788C35.2835 17.9216 34.3269 16.0929 32.0761 14.5736L27.4621 11.4788L27.6872 11.1412C29.8254 8.10271 32.6107 5.42994 35.0584 4.05135L33.8205 1.06911ZM28.1936 28.05C26.6743 28.05 25.1551 27.6843 23.8328 26.8965C20.0346 24.7301 19.6126 19.6659 19.6126 17.584C19.6126 10.0158 25.0988 3.31986 33.9049 0.140672L34.2706 0L36.1275 4.36083L35.7899 4.52964C33.4829 5.71128 30.6976 8.32778 28.6156 11.1975L32.5263 13.8421C35.0021 15.5021 36.0994 17.6121 36.0994 20.6225C36.0994 23.2671 34.8052 25.546 32.5263 26.8684C31.204 27.6561 29.7129 28.05 28.1936 28.05Z' fill='%23009FDA'/%3E%3C/svg%3E") !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content {
  padding-top: 132px !important;
  padding-bottom: 40px !important;
  max-width: var(--br-hero-tekst) !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .wrapper--content {
  max-width: var(--br-hero-tekst) !important;
}

body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .placeholder.slick-slide {
  min-height: var(--br-hero-hoogte) !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper {
  padding-top: var(--br-hero-boven) !important;
  min-height: var(--br-hero-hoogte) !important;
  -webkit-box-align: end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
  padding-bottom: calc(var(--br-hero-onder) + var(--br-hero-overlap)) !important;
}

body.brf:where(:not(.brf-gen)) .slick-slide:has(video) .content,
body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .content,
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .wrapper--content {
  max-width: var(--br-hero-tekst) !important;
  padding-left: var(--br-hero-inspring) !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image {
  z-index: 7 !important;
  inset: 0 !important;
  /* De zwevende balk ligt over de hero heen; de foto begint daaronder zodat
     hij altijd volledig in beeld staat. Boven de foto blijft de donkere
     kleur van de hero staan, net als op de pagina.s zonder heroafbeelding. */
  top: var(--br-bar, 136px) !important;
  bottom: 0 !important;
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image .header--outer-wrapper,
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image .header-inner-wrapper,
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}

body.brf:where(:not(.brf-gen)) .header.homepage:has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper {
  min-height: var(--br-hero-hoogte) !important;
  padding-top: var(--br-hero-boven) !important;
  -webkit-box-align: end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important;
  padding-bottom: var(--br-hero-onder) !important;
}

/* Tot 1058px maakt het thema van deze rij een flexkolom (justify-content:end zet de tekst daar
   onderaan). align-items:flex-end betekent dan rechts uitlijnen: tussen ~700 en 768px, waar het
   tekstblok (max. 620px) smaller is dan de rij, schoof de tekst naar rechts. Links houden. */
@media (max-width: 1058px) {
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper,
  body.brf:where(:not(.brf-gen)) .header.homepage:has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper {
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
}

body.brf:where(:not(.brf-gen)) .header.homepage:has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .wrapper--content {
  padding-left: var(--br-hero-inspring) !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .wrapper--content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image picture {
  position: relative !important;
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image img {
  display: block !important;
  width: 100% !important;
  /* De overmaat voor de parallax zat eerst boven én onder, met het beeld
     omhoog geschoven. Daardoor viel de bovenkant van de foto altijd buiten
     beeld - precies wat je bij een portret of een kop in de foto niet wil.
     De overmaat zit nu alleen onderaan: bovenin sluit de foto aan op de rand
     van de hero, en het beeld schuift bij het scrollen die onderruimte in. */
  height: calc(100% + var(--br-parallax)) !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: top center !important;
     object-position: top center !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image img {
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }
}
body.brf:where(:not(.brf-gen)) .homepage-super-videoslider-header .slick-slider .slick-slide .content {
  padding-top: var(--br-hero-boven) !important;
  -ms-flex-item-align: end !important;
      align-self: flex-end !important;
  padding-bottom: calc(var(--br-hero-onder) + var(--br-hero-overlap)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.navigation-only) .header--outer-wrapper.bottom .button a:hover span,
body.brf:where(:not(.brf-gen)) .header:not(.navigation-only) .header--outer-wrapper.bottom .button a:focus span {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--br-blue) !important;
  -webkit-box-shadow: 0 10px 26px rgba(0, 21, 57, 0.3) !important;
          box-shadow: 0 10px 26px rgba(0, 21, 57, 0.3) !important;
}

body.brf {
  -webkit-font-smoothing: antialiased;
  --br-footer-overlap:40px;
  --br-hero-overlap:64px;
  --br-hero-radius:40px;
  --br-licht:#F4F8FC;
  --br-licht-rgb:244,248,252;
  --licht:var(--br-licht);
  --br-hero-tekst:620px;
  --br-hero-hoogte:clamp(620px,96vh,920px);
  --br-hero-boven:var(--br-bar,136px);
  --br-hero-inspring:0px; /* herotekst vlak op de linkerlijn van de pagina, gelijk met secties en banners */
  --br-kop-band:calc(var(--br-bar-midden,80px) + var(--br-hero-overlap));
  --br-hero-onder:96px;
  --br-parallax:20%;
  --br-banner-radius:var(--br-hero-radius);
}

/* Mobiele maten van hero- en footerafronding. Ze stonden vóór het tokenblok
   hierboven en verloren daardoor van de desktopwaarde (40px bleef ook mobiel).
   Hier, ná de tokens, winnen ze wel. */
@media (max-width: 820px) {
  body.brf {
    --br-hero-overlap:40px;
    --br-hero-radius:22px;
    --br-footer-overlap:22px;
  }
}
body.brf:where(:not(.brf-gen)) .wrapper--full-banner {
  border-radius: var(--br-banner-radius) !important;
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner > .wrapper--full-banner-image {
  border-radius: 0 !important;
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner.has--background-color.donkerblauw .button a:hover span,
body.brf:where(:not(.brf-gen)) .wrapper--full-banner.has--background-color.donkerblauw .button a:focus span {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--br-blue) !important;
  -webkit-box-shadow: 0 10px 26px rgba(0, 21, 57, 0.3) !important;
          box-shadow: 0 10px 26px rgba(0, 21, 57, 0.3) !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner > .wrapper--full-banner-image:not(.image-2) {
  margin: -1px !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner-image.image-1 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin: -1px !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.licht.image-position-left > .wrapper--full-banner-image {
  margin: -1px !important;
}

/* Ruimtemodel. Elk element in een rij heeft 40px marge boven (zo zet het
   thema h1-h6 en p neer; onder 820px 20px). Een rij begint daarom met 40px
   minder padding (--br-space-top), zodat padding en marge van het eerste
   element samen precies --br-space zijn. Van dat eerste element wordt dus
   niets meer afgehaald.
   De meeste blokken beginnen vanzelf met die marge (de kop of alinea erin).
   Een paneel in een smalle rij (banner, placeholder, tellers) begint met zijn
   eigen vlak en heeft die marge niet; dat krijgt hem hier, zodat ook een
   paneel op --br-space van de rand begint. Een gekleurde sectie in een
   kolom en een losse kaart in een kolom hebben elk al een eigen regel van
   40px. :not(#brf) geeft de regel id-gewicht, omdat de componentregels hun
   marge met lange klassenketens op 0 zetten. */
/* --br-space-top staat ook op body: op :root is hij al met 40px uitgerekend
   en geërfd, waardoor de mobiele 20px niet doorwerkte (rij 20px te krap). */
@media (max-width: 820px) {
  body.brf {
    --br-el:20px;
  }
}
body.brf {
  --br-space-top:calc(var(--br-space) - var(--br-el));
}

body.brf:where(:not(.brf-gen)) .main .section.narrow-page:not(.section .section) > .section--wrapper > :first-child:not(#brf),
body.brf:where(:not(.brf-gen)) .main .section .umb-block-grid__area > .section.narrow-page:not(.has--background-color):first-child > .section--wrapper > :first-child:not(#brf) {
  margin-top: var(--br-el) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section > .section--wrapper > :last-child,
body.brf:where(:not(.brf-gen)) .main > .section > .section--wrapper > :last-child > :last-child,
body.brf:where(:not(.brf-gen)) .main > .section > .section--wrapper > :last-child > :last-child > :last-child,
body.brf:where(:not(.brf-gen)) .main > .section > .section--wrapper > :last-child > :last-child > :last-child > :last-child,
body.brf:where(:not(.brf-gen)) .main > .section > .section--wrapper > :last-child > :last-child > :last-child > :last-child > :last-child,
body.brf:where(:not(.brf-gen)) .main > .section > .section--wrapper > :last-child > :last-child > :last-child > :last-child > :last-child > :last-child {
  margin-bottom: 0 !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner > .full-banner--content {
  padding: var(--br-pad) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner > .full-banner--content {
  padding: 0 !important;
}

/* De eerste rij onder de hero: de hero hangt met zijn afgeronde hoeken
   --br-hero-radius in die rij, zoals de footer met --br-footer-overlap in de
   laatste. Die rij krijgt bovenaan dezelfde extra ruimte als de laatste
   onderaan (br-kopruimte zet de JS). */
body.brf:where(:not(.brf-gen)):has(.homepage-super-videoslider-header, .header.navigation-only, .header:not(.homepage):not(.navigation-only) > .header--outer-wrapper.bottom) .main .br-kopruimte.br-kopruimte {
  padding-top: calc(var(--br-space-top) + var(--br-hero-radius) + var(--br-kaarten-over, 0px)) !important;
}

/* Id-gewicht: de rijregels die de padding zetten (eerste rij, donkerblauw,
   smal+licht) wonnen anders en bleef de dubbele ruimte staan (/over-bribus). */
body.brf:where(:not(.brf-gen)) .main .br-geen-ruimte-onder.br-geen-ruimte-onder:not(#brf) {
  padding-bottom: 0 !important;
}

/* Een kader in dezelfde kleur als zijn rij is voor het oog geen kader: een
   lichte placeholder in een lichte band (Proces & energie op /duurzaamheid).
   Hij gedraagt zich dan als gewone inhoud, zonder paneelmarge en zonder
   paneelpadding, anders kwam de kop op 145px in plaats van --br-space. */
body.brf:where(:not(.brf-gen)) :is(.wrapper[class~=f7f8f9] .section.narrow-page, .section.narrow-page.licht) .wrapper--placeholder:has(> .placeholder--content.licht):not(#brf),
body.brf:where(:not(.brf-gen)) :is(.wrapper[class~="001539"] .section.narrow-page, .section.narrow-page.donkerblauw) .wrapper--placeholder:has(> .placeholder--content.donkerblauw):not(#brf) {
  margin-top: 0 !important;
}

body.brf:where(:not(.brf-gen)) :is(.wrapper[class~=f7f8f9] .section.narrow-page, .section.narrow-page.licht) .wrapper--placeholder > .placeholder--content.licht:not(#brf),
body.brf:where(:not(.brf-gen)) :is(.wrapper[class~="001539"] .section.narrow-page, .section.narrow-page.donkerblauw) .wrapper--placeholder > .placeholder--content.donkerblauw:not(#brf) {
  padding: 0 !important;
}

/* Het losse quoteblok kreeg uit het thema 40px padding boven en onder, bovenop
   de marge van de quote zelf; daardoor begon hij 40px lager dan elk ander blok
   en eindigde hij 40px later. Ook de kleine variant (woon-zorg-organisaties,
   in een kolom naast een foto). De variant met foto heeft een eigen opbouw en
   blijft zoals hij is. */
body.brf:where(:not(.brf-gen)) .wrapper--quote:not(.with-image) .quote--placeholder {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner:is(.licht, .wit)::after {
  background: linear-gradient(100deg, rgba(var(--br-licht-rgb), 0.96) 0%, rgba(var(--br-licht-rgb), 0.9) 38%, rgba(var(--br-licht-rgb), 0.7) 68%, rgba(var(--br-licht-rgb), 0.45) 100%) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner:is(.licht, .wit) .full-banner--content :is(h2, h3, strong) {
  color: var(--br-navy) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner:is(.licht, .wit) .full-banner--content :is(p, span, li) {
  color: rgba(0, 21, 57, 0.75) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner:is(.licht, .wit) .full-banner--content a:not(.button a) {
  color: var(--br-blue) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner:is(.licht, .wit) .full-banner--content .button:not(.alternative) a span,
body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner:is(.licht, .wit) .full-banner--content .button.alternative a:hover span,
body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner:is(.licht, .wit) .full-banner--content .button.alternative a:focus span {
  color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner:is(.licht, .wit) .full-banner--content .button.alternative a span {
  color: var(--br-navy) !important;
}

.placeholder--grid {
  margin-top: 40px;
}

body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.donkerblauw) .wrapper--full-banner:not(.donkerblauw)::after {
  background: linear-gradient(100deg, rgba(var(--br-licht-rgb), 0.96) 0%, rgba(var(--br-licht-rgb), 0.9) 38%, rgba(var(--br-licht-rgb), 0.7) 68%, rgba(var(--br-licht-rgb), 0.45) 100%) !important;
}

body.brf:where(:not(.brf-gen)) .section:not(.donkerblauw) .wrapper--full-banner:not(.donkerblauw) .full-banner--content :is(h2, h3, strong) {
  color: var(--br-navy) !important;
}

body.brf:where(:not(.brf-gen)) .section:not(.donkerblauw) .wrapper--full-banner:not(.donkerblauw) .full-banner--content :is(p, span, li) {
  color: rgba(0, 21, 57, 0.75) !important;
}

body.brf:where(:not(.brf-gen)) .section:not(.donkerblauw) .wrapper--full-banner:not(.donkerblauw) .full-banner--content .button:not(.alternative) a span,
body.brf:where(:not(.brf-gen)) .section:not(.donkerblauw) .wrapper--full-banner:not(.donkerblauw) .full-banner--content .button.alternative a:hover span,
body.brf:where(:not(.brf-gen)) .section:not(.donkerblauw) .wrapper--full-banner:not(.donkerblauw) .full-banner--content .button.alternative a:focus span {
  color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) .section:not(.donkerblauw) .wrapper--full-banner:not(.donkerblauw) .full-banner--content .button.alternative a span {
  color: var(--br-navy) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.donkerblauw:not(.quotes) {
  padding-top: var(--br-space-top) !important;
  padding-bottom: var(--br-space) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color:not(.narrow-page) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color:not(.narrow-page) > .section--wrapper {
  width: calc(100% - 80px) !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color > .section--wrapper > .wrapper--full-banner {
  margin: 0 !important;
  border-radius: 0 !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--placeholder .placeholder--content:has(.quick--navigation) {
  border-radius: var(--br-r-lg) !important;
  padding: var(--br-pad) !important;
}

body.brf:where(:not(.brf-gen)) .quick--navigation > p.heading-3,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > p.heading-3 {
  margin: 0 0 20px !important;
}

body.brf:where(:not(.brf-gen)) .quick--navigation > ul,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important; /* min(): mobiel was de kolom 320px in een vak van 235px, waardoor de rechterkant van elk item wegviel */
  gap: 0 32px !important;
}

/* Geen lijnen tussen de links, op geen enkele schermbreedte (keuze 15 okt).
   Eerder had elke link een lijn boven, behalve de eerste rij; daarvoor
   schoof elke link 1px omhoog en knipte de lijst zijn bovenste pixel weg. */
body.brf:where(:not(.brf-gen)) .quick--navigation > ul > li,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
}

body.brf:where(:not(.brf-gen)) .quick--navigation > ul > li > a,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul > li > a {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
  /* Rechts 10px: het pijltje schuift bij hover 4px naar rechts, en de lijst
     knipt af wat erbuiten valt (zie hierboven). Met 2px werd het afgesneden. */
  gap: 16px;
  padding: 14px 10px 14px 2px !important;
  color: var(--br-navy) !important;
  font-weight: 600;
  -webkit-transition: color 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .quick--navigation > ul > li > a::after,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul > li > a::after {
  content: "";
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--br-cyan);
  border-bottom: 2px solid var(--br-cyan);
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transition: -webkit-transform 0.18s var(--br-ease);
  transition: -webkit-transform 0.18s var(--br-ease);
  transition: transform 0.18s var(--br-ease);
  transition: transform 0.18s var(--br-ease), -webkit-transform 0.18s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .quick--navigation > ul > li > a:hover,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul > li > a:hover {
  color: var(--br-cyan) !important;
}

body.brf:where(:not(.brf-gen)) .quick--navigation > ul > li > a span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul > li > a span {
  -webkit-transition: color 0.18s var(--br-ease);
  transition: color 0.18s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .quick--navigation > ul > li > a:hover span,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul > li > a:hover span {
  color: var(--br-cyan) !important;
}

body.brf:where(:not(.brf-gen)) .quick--navigation > ul > li > a:hover::after,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul > li > a:hover::after {
  -webkit-transform: rotate(-45deg) translate(3px, 3px);
      -ms-transform: rotate(-45deg) translate(3px, 3px);
          transform: rotate(-45deg) translate(3px, 3px);
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner {
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
  min-height: 320px !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner > .wrapper--full-banner-image.image-1 {
  position: relative !important;
  -ms-flex-item-align: stretch !important;
      align-self: stretch !important;
  height: auto !important;
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner > .wrapper--full-banner-image.image-1 > picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner > .wrapper--full-banner-image.image-1 :is(picture, img) {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .wrapper--full-banner {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .wrapper--full-banner > .full-banner--content {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
  body.brf:where(:not(.brf-gen)) .wrapper--full-banner > .wrapper--full-banner-image.image-1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
    aspect-ratio: 16/10 !important;
    width: 100% !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner::after {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 21, 57, 0)), color-stop(60%, rgba(0, 21, 57, 0.35)), to(rgba(0, 21, 57, 0.85))) !important;
    background: linear-gradient(180deg, rgba(0, 21, 57, 0) 0%, rgba(0, 21, 57, 0.35) 60%, rgba(0, 21, 57, 0.85) 100%) !important;
  }
}
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
  }
  /* De foto sluit mobiel aan op de bovenrand van de band; anders zie je eerst
     een strook bandkleur en dan de foto. */
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color:not(.narrow-page) {
    padding-top: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color > .wrapper--full-banner-image.image-1 {
    position: relative !important;
    inset: auto !important;
    -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
    margin: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color > .wrapper--full-banner-image.image-1 > picture {
    position: absolute !important;
    inset: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color::before,
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color::after {
    content: none !important;
    background: none !important;
  }
}
body.brf:where(:not(.brf-gen)) .wrapper--full-banner.with-image-2.second-image-offset {
  overflow: visible !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner.second-image-offset.image-position-right .wrapper--full-banner-image.image-1 {
  overflow: hidden !important;
  border-radius: 0 var(--br-banner-radius) var(--br-banner-radius) 0 !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner.second-image-offset.image-position-left .wrapper--full-banner-image.image-1 {
  overflow: hidden !important;
  border-radius: var(--br-banner-radius) 0 0 var(--br-banner-radius) !important;
}

body.brf:where(:not(.brf-gen)) .quick--navigation > ul > li > a > span::after,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .quick--navigation > ul > li > a > span::after {
  content: none !important;
}

@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .placeholder--grid.counters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 576px) {
  body.brf:where(:not(.brf-gen)) .placeholder--grid.counters {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .grid--item + .grid--item::before {
    left: 8% !important;
    right: 8% !important;
    top: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: 1px !important;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(0, 21, 57, 0.16)), to(transparent)) !important;
    background: linear-gradient(90deg, transparent, rgba(0, 21, 57, 0.16), transparent) !important;
  }
  body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .grid--item {
    padding: 22px 12px !important;
  }
}
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 16px !important;
    -webkit-column-gap: 0 !important;
       -moz-column-gap: 0 !important;
            column-gap: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box > .logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 150px !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box > .heading-4.quote {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 0 24px !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box > p:last-child {
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding-left: 24px !important;
  }
}
body.brf:where(:not(.brf-gen)) .main > .section:not(.has--background-color):has(.wrapper--counters) {
  background: var(--br-licht) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.has--background-color:has(.wrapper--counters) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--counters {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--counters {
  border-radius: 0 !important;
  background: none !important;
}

body.brf:where(:not(.brf-gen)) .umb-block-grid__area > .single-grid--item:first-child {
  margin-top: 40px !important;
}

body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) .header--background-image::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: clamp(120px, 20vh, 240px) !important;
  /* Zelfde afzwakking als op de homepage: een donkere sluier onder de zwevende
     balk in plaats van een blauwe deken over de bovenkant van de foto. */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 21, 57, 0.76)), color-stop(30%, rgba(0, 21, 57, 0.44)), color-stop(62%, rgba(0, 21, 57, 0.16)), to(rgba(0, 21, 57, 0))) !important;
  background: linear-gradient(180deg, rgba(0, 21, 57, 0.76) 0%, rgba(0, 21, 57, 0.44) 30%, rgba(0, 21, 57, 0.16) 62%, rgba(0, 21, 57, 0) 100%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

@media (max-width: 820px) {
  /* De hero-tekst hoeft mobiel niet extra in te springen; hij begint nu op
     dezelfde marge als de kaarten en het overige paginaraster. */
  body.brf {
    --br-hero-inspring:0px;
  }
  /* Referenties: de bediening stond absoluut rechtsboven in het blok en landde
     daardoor mobiel op de kop van de sectie. Hij gaat onder de kaart staan. */
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel-controls {
    position: static !important;
    margin: 16px 0 0 auto !important;
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
  /* De foto had een harde bovenrand en was sterk uitvergroot. Vierkant kader
     laat meer van het beeld zien, en de ronding sluit aan op de kaart. */
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    height: auto !important;
    border-top-left-radius: var(--br-r-lg) !important;
    border-top-right-radius: var(--br-r-lg) !important;
    overflow: hidden !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image img {
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  /* De afsluitende banner hield mobiel zijn bureaubladopmaak: foto als
     achtergrond met de tekst eroverheen. Hij volgt nu dezelfde stapeling als
     alle andere banners, foto boven en tekst onder. */
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner {
    grid-template-columns: 1fr !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner-image.image-1 {
    position: relative !important;
    inset: auto !important;
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner-image.image-1 > picture {
    position: absolute !important;
    inset: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner > .full-banner--content {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
    grid-column: 1 !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner-image.image-2 {
    display: none !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner::after {
    content: none !important;
  }
}
body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  /* De band is zelf het paneel: de kop erin heeft geen marge, dus hier de
     volle ruimte en niet --br-space-top. */
  padding-top: var(--br-space) !important;
  padding-bottom: var(--br-space) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width > .section--wrapper {
  width: calc(100% - 80px) !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
}

@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width > .section--wrapper {
    width: calc(100% - 40px) !important;
  }
}
@media (max-width: 820px) {
  /* Wat meer lucht boven de quote, die stond dicht op de bovenrand. */
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box {
    padding-top: 44px !important;
  }
  /* De foto werd bovenaan hard afgekapt. Onderaan loopt hij al in de band weg
     via ::after; hier hetzelfde van boven naar beneden, zodat het beeld uit de
     donkere band komt rollen in plaats van er hard onder te beginnen. */
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 42% !important;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 21, 57, 0.92)), color-stop(26%, rgba(0, 21, 57, 0.68)), color-stop(60%, rgba(0, 21, 57, 0.3)), to(rgba(0, 21, 57, 0))) !important;
    background: linear-gradient(180deg, rgba(0, 21, 57, 0.92) 0%, rgba(0, 21, 57, 0.68) 26%, rgba(0, 21, 57, 0.3) 60%, rgba(0, 21, 57, 0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image {
    position: relative !important;
  }
  /* Pijlen links, teller rechts, en van de randen af. */
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel-controls {
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    margin: 16px 0 0 !important;
    padding: 0 20px !important;
    width: auto !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel-controls .controls--arrows {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel-controls .br-quote-count {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
}
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only) > .header--outer-wrapper.bottom .header--inner-wrapper {
  padding-left: var(--br-marge) !important;
  padding-right: var(--br-marge) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width .item--image {
  border-radius: var(--br-banner-radius) !important;
  overflow: hidden !important;
}

/* Aflopende referentie: een gekaderde foto met de overlay erin, zonder verlopen.
   De foto staat op volle sterkte (geen masker dat hem links laat uitvloeien),
   de band is een vlakke kleur, en de leesbaarheid komt van het vlak onder de
   tekst in plaats van van een scrim over het beeld. */
body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width::after {
  content: none !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width .item--image img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width .item--image::before,
body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width .item--image::after {
  content: none !important;
  background: none !important;
}

@media (max-width: 820px) {
  /* Gestapeld zijn de gekaderde foto en de overlay twee losse vlakken; zonder
     ruimte ertussen knijpen hun rondingen tegen elkaar. */
  body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width .item--content {
    margin-top: 16px !important;
  }
}
/* Het verloop van onder naar boven op het beeldvlak vervalt. Het diende om de
   onderkant van de foto te verdonkeren voor de kaart, maar die kaart heeft nu
   zijn eigen vlak met blur. De laag liep exact tot de linkerrand van het
   beeldvlak en gaf daar onderin een zichtbare verticale naad. */
body.brf:where(:not(.brf-gen)) .section.quotes .item--image::after {
  content: none !important;
  background: none !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--list.benefits .list--item .image--icon {
  width: 48px !important;
  height: 48px !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 48px !important;
          flex: 0 0 48px !important;
  display: block !important;
  -webkit-transition: -webkit-transform 0.3s var(--br-ease);
  transition: -webkit-transform 0.3s var(--br-ease);
  transition: transform 0.3s var(--br-ease);
  transition: transform 0.3s var(--br-ease), -webkit-transform 0.3s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .placeholder--list.benefits .list--item .image--icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible;
}

body.brf:where(:not(.brf-gen)) .placeholder--list.benefits .list--item:hover .image--icon {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

/* Een gewone fullbanner met tweede afbeelding en offset ziet er nu hetzelfde
   uit als de downloadbanner. Het thema geeft de eerste een raster van
   50/20/30 met de twee foto's naast elkaar, en de tweede 50/50 met de foto's
   over elkaar. Dat verschil zat in het thema, niet in de instellingen.
   De opbouw verschilt wel: de downloadbanner heeft een container om beide
   foto's, hier staan ze los in het raster. Vandaar dat de tweede hier
   absoluut ten opzichte van de wrapper gaat en niet ten opzichte van de cel. */
body.brf:where(:not(.brf-gen)) .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset {
  grid-template-columns: 50% 50% !important;
  position: relative !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-1 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: absolute !important;
  z-index: 2 !important;
  left: auto !important;
  right: 40px !important;
  width: calc(100% - 40px) !important;
  top: -24px !important;
  bottom: 80px !important;
  height: auto !important;
  overflow: visible !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-2 picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-2 img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: bottom left !important;
     object-position: bottom left !important;
  max-width: none !important;
  max-height: none !important;
}

/* De cover steekt 24px boven de banner uit. De sectie eromheen kapt af, en bij
   een banner die direct op de vorige sectie aansluit is er geen padding waarin
   dat uitsteken past. Vandaar hier overflow visible; de foto zelf blijft
   afgekapt binnen het paneel, dat heeft zijn eigen overflow. */
body.brf:where(:not(.brf-gen)) .main > .section.full-banner:has(.wrapper--full-banner.second-image-offset) {
  overflow: visible !important;
}

/* Het thema tilt de cover daarnaast nog 10% op met een absolute top. Samen met
   onze eigen 24px werd dat 68px en viel alles buiten de sectie. De cover volgt
   nu gewoon zijn doos, net als bij de downloadbanner. */
body.brf:where(:not(.brf-gen)) .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-2 img {
  position: static !important;
  top: auto !important;
}

/* De twee kolommen van de referentieslider verticaal op elkaar centreren. De
   linkerkolom is een slider waarvan de hoogste slide de rijhoogte bepaalt; de
   carrousel rechts heeft een eigen vaste hoogte. Zonder centreren staat die
   rechts tegen de bovenkant en blijft er onder een gat staan. */
body.brf:where(:not(.brf-gen)) .section.quotes .quotes--placeholder {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

/* De fotoslider had een vaste hoogte en stond verticaal gecentreerd. Werd de
   tekst links langer dan die hoogte, dan kwam er boven en onder de foto lege
   ruimte (woningcorporaties). Hij rekt nu mee met de tekst; de vaste hoogte is
   alleen nog het minimum. */
@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .section.quotes .quotes--placeholder > .placeholder--carousel.quotes {
    -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
    height: auto !important;
    min-height: clamp(460px, 38vw, 600px) !important;
  }
}
body.brf:where(:not(.brf-gen)) .section.quotes .quotes-extra-text .placeholder--content > h2:first-child {
  margin-top: 0 !important;
}

/* De rij-instelling voor de achtergrondkleur komt op sommige blokken als ruwe
   hexcode op de wrapper terecht in plaats van als has--background-color op de
   sectie. Die klasse deed niets, waardoor de gekozen kleur niet verscheen.
   Attribuutselectors omdat een klasse niet met een cijfer mag beginnen. */
body.brf:where(:not(.brf-gen)) .main > .wrapper[class~=f7f8f9] {
  background: var(--br-licht) !important;
}

/* Wit wordt hier niet geschilderd: op een pagina met een witte achtergrond
   voegt het niets toe, en op Bribus GEN - die een eigen donkere achtergrond
   heeft - gaf het een grote witte baan over de sectie met de rompkleuren.
   Lichtblauw/grijs en donkerblauw blijven wel staan, die maken wel verschil. */
body.brf:where(:not(.brf-gen)) .main > .wrapper[class~="001539"] {
  background: var(--br-navy) !important;
}

body.brf:where(:not(.brf-gen)) .main > .section.br-footerruimte.br-footerruimte,
body.brf:where(:not(.brf-gen)) .main .br-footerruimte {
  padding-bottom: calc(var(--br-space) + var(--br-footer-overlap)) !important;
}

/* Quote slider: de bediening hing 26px binnen de rand van de carrousel, maar de
   foto loopt met --br-quote-bleed verder naar rechts. De teller en de pijlen
   volgen nu de rechterrand van de foto, met dezelfde inspring als bovenaan. */
@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel-controls {
    right: calc(var(--br-quote-ctrl, 0px) + clamp(20px, 1.8vw, 30px)) !important;
  }
}
/* Snelmenu: het kader zet zich af tegen de band eronder. Is die wit of heeft
   hij geen kleur, dan wordt het kader lichtblauw/grijs; is de band
   lichtblauw/grijs of donkerblauw, dan wordt het kader wit. De kleur kan van
   de sectie komen of van de wrapper eromheen, dus beide staan hier. De witte
   variant staat als laatste, want op een lichte band matchen ze beide en dan
   beslist de volgorde. */
body.brf:where(:not(.brf-gen)) .section:not(.has--background-color) .placeholder--content:has(.quick--navigation),
body.brf:where(:not(.brf-gen)) .section.has--background-color.wit .placeholder--content:has(.quick--navigation),
body.brf:where(:not(.brf-gen)) .wrapper[class~=ffffff] .placeholder--content:has(.quick--navigation) {
  background: var(--br-licht) !important;
}

body.brf:where(:not(.brf-gen)) .section.has--background-color.licht .placeholder--content:has(.quick--navigation),
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .placeholder--content:has(.quick--navigation),
body.brf:where(:not(.brf-gen)) .wrapper[class~=f7f8f9] .placeholder--content:has(.quick--navigation),
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .placeholder--content:has(.quick--navigation) {
  background: #ffffff !important;
}

/* Smalle pagina: die instelling stond wel op de sectie met het snelmenu, maar
   deed niets omdat de inspring alleen gold voor secties met een eigen kleur.
   Het kader volgt nu dezelfde lijn als de tellerkaart op dezelfde pagina. */
@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .main .section.narrow-page .placeholder--content:has(.quick--navigation) {
    margin-left: 72px !important;
    margin-right: 72px !important;
  }
}
/* Mobiel: het snelmenu verloor links en rechts nog 40px doordat de blokgrid
   binnen het kader zijn eigen padding meebrengt bovenop die van het kader.
   Op een telefoon bleef daardoor maar 155 van de 235px over. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .placeholder--content:has(.quick--navigation) .umb-block-grid__area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Unique selling points: de blokjes hadden dezelfde kleur als de band eronder
   en vierkante hoeken, waardoor ze volledig wegvielen. Ze zetten zich nu af
   tegen de band - wit op een lichte of donkere band, lichtblauw/grijs op wit -
   en krijgen dezelfde ronding en schaduw als de andere kaarten. */
body.brf:where(:not(.brf-gen)) .usps > .usp,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .usps > .usp {
  border-radius: var(--br-r-lg) !important;
  overflow: hidden !important;
  -webkit-box-shadow: var(--br-shadow-sm) !important;
          box-shadow: var(--br-shadow-sm) !important;
  -webkit-transition: -webkit-box-shadow 0.2s var(--br-ease);
  transition: -webkit-box-shadow 0.2s var(--br-ease);
  transition: box-shadow 0.2s var(--br-ease);
  transition: box-shadow 0.2s var(--br-ease), -webkit-box-shadow 0.2s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .usps > .usp:hover,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .usps > .usp:hover {
  -webkit-box-shadow: var(--br-shadow-md) !important;
          box-shadow: var(--br-shadow-md) !important;
}

body.brf:where(:not(.brf-gen)) .section:not(.has--background-color) .usps > .usp,
body.brf:where(:not(.brf-gen)) .section.has--background-color.wit .usps > .usp,
body.brf:where(:not(.brf-gen)) .wrapper[class~=ffffff] .usps > .usp,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .wrapper[class~=ffffff] .usps > .usp {
  background: var(--br-licht) !important;
}

body.brf:where(:not(.brf-gen)) .section.has--background-color.licht .usps > .usp,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .usps > .usp,
body.brf:where(:not(.brf-gen)) .wrapper[class~=f7f8f9] .usps > .usp,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .wrapper[class~=f7f8f9] .usps > .usp,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .usps > .usp,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .wrapper[class~="001539"] .usps > .usp {
  background: #ffffff !important;
}

/* Unique selling points: de pijl stond omgekeerd. Het thema gebruikt de
   chevron-omhoog en draaide die 180 graden zodra het blok openstond, dus
   ingeklapt wees hij omhoog en uitgeklapt omlaag. Nu andersom. */
body.brf:where(:not(.brf-gen)) .usps .usp .title p::after,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .usps .usp .title p::after {
  -webkit-transform: rotate(180deg) !important;
      -ms-transform: rotate(180deg) !important;
          transform: rotate(180deg) !important;
}

body.brf:where(:not(.brf-gen)) .usps .usp .title.active p::after,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .usps .usp .title.active p::after {
  -webkit-transform: rotate(0deg) !important;
      -ms-transform: rotate(0deg) !important;
          transform: rotate(0deg) !important;
}

/* De marge van de eerste kop in een sectie wordt in de JS weggehaald: in CSS
   is "de eerste kop van de sectie" niet betrouwbaar te beschrijven. Dezelfde
   selector raakte ook koppen die halverwege een sectie in een tweede rij
   staan (Renovatie / Nieuwbouw op vastgoedbeleggers), en die verloren dan hun
   ruimte naar de alinea erboven. */
/* Een sectie binnen een sectie is geen band maar gewoon inhoud: de ruimte komt
   van de sectie eromheen. Had de geneste sectie zijn eigen padding, dan werd
   die ruimte dubbel opgeteld. Een geneste sectie met een eigen kleur houdt zijn
   padding wel, want dan is het opnieuw een band. */
body.brf:where(:not(.brf-gen)) .section .section:not(.has--background-color) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hetzelfde voor een geneste sectie in dezelfde kleur als de sectie of het kader eromheen: dat is
   geen nieuwe band. Zo kan een blok zijn kleurkeuze hebben zonder dat er ruimte bijkomt wanneer
   die gelijk is aan de rij (de voordelenblokken op de SEO-pagina's). De .wrapper met de hexcode
   telt hier bewust niet mee: die hoort bij het blok zelf, niet bij een rij eromheen. */
body.brf:where(:not(.brf-gen)) :is(.section, .placeholder--content).has--background-color.licht .section.has--background-color.licht,
body.brf:where(:not(.brf-gen)) :is(.section, .placeholder--content).has--background-color.wit .section.has--background-color.wit,
body.brf:where(:not(.brf-gen)) :is(.section, .placeholder--content).has--background-color.donkerblauw .section.has--background-color.donkerblauw {
  padding: 0 !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
}

/* Een gekleurde sectie die als element in een kolom staat, in een andere kleur dan de rij (een
   kleine quote in donkerblauw op wit), is een paneel tussen de andere elementen: 40px afstand zoals
   die elementen, dezelfde afronding als afbeeldingen en de binnenruimte van een paneel in plaats
   van die van een band. Bovenaan de kolom geen afstand, gelijk met de kolom ernaast. In dezelfde
   kleur als de rij zet de regel hierboven dit weer uit. */
body.brf:where(:not(.brf-gen)) .umb-block-grid__area > .section.has--background-color:not(.quotes):not(.full-banner) {
  margin-top: var(--br-el) !important;
  border-radius: var(--br-r-lg) !important;
  overflow: hidden !important;
  padding: var(--br-pad) !important;
}

/* De tekstkolom van het quoteblok had 160px padding boven en onder uit het
   thema. Bij de volle-breedte variant komt die ruimte al van de band zelf, dus
   telde hij dubbel: de band werd 1062px hoog terwijl de tekst 166px is. Mijn
   eerdere regel raakte alleen de directe kolom en niet die in de slider met de
   extra tekst, want die zit een niveau dieper - vandaar hier zonder >.
   De ingekaderde variant heeft geen eigen padding op de sectie en houdt dus
   wel ruimte binnenin, maar dan gelijk aan de andere panelen. */
body.brf:where(:not(.brf-gen)) .section.quotes.full-width .quotes--placeholder .placeholder--content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes:not(.full-width) .quotes--placeholder .placeholder--content {
  padding-top: var(--br-pad) !important;
  padding-bottom: var(--br-pad) !important;
}

/* Contactbanner MET TWEE TEKSTKOLOMMEN: het portret hoort over de
   achtergrondfoto te liggen, onderaan uitgelijnd. Het thema geeft het portret
   een eigen smalle kolom ernaast en laat de foto daar met width:200% over de
   buur heen lopen; met twee tekstkolommen werd de kolom 10% breed en stond het
   portret geklemd naast de foto. Nu: de twee teksten delen de linkerhelft, de
   achtergrondfoto vult de rechterhelft en het portret ligt daar bovenop.
   Uitdrukkelijk alleen deze variant - met één tekstkolom doet het thema het
   goed en blies mijn regel de twee afbeeldingen op. */
body.brf:where(:not(.brf-gen)) .wrapper--full-banner.image-position-right.with-image-2.with-second-text:not(.second-image-offset):not(.downloads-banner) {
  position: relative !important;
  grid-template-columns: 25% 25% 50% !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner.image-position-right.with-image-2.with-second-text:not(.second-image-offset):not(.downloads-banner) > .wrapper--full-banner-image.image-1 {
  grid-row: 1 !important;
  grid-column: 3 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner.image-position-right.with-image-2.with-second-text:not(.second-image-offset):not(.downloads-banner) > .wrapper--full-banner-image.image-2 {
  /* Zelfde maat als bij een banner met een tekstkolom: het portret is daar een
     vierkant dat net zo hoog is als de banner min de padding, rechtsonder tegen
     de onderrand. Zonder die maat vulde hij de hele rechterhelft en was hij veel
     groter dan op de andere pagina's. */
  position: absolute !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  top: auto !important;
  left: auto !important;
  right: var(--br-pad) !important;
  bottom: 0 !important;
  /* Bovengrens zodat hij niet groter wordt dan bij een banner met een
     tekstkolom: daar is het vierkant 330px bij een venster van 1600. */
  height: min(100% - var(--br-pad), clamp(240px, 22.7vw, 330px)) !important;
  width: auto !important;
  aspect-ratio: 1/1 !important;
  margin: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner.image-position-right.with-image-2.with-second-text:not(.second-image-offset):not(.downloads-banner) > .wrapper--full-banner-image.image-2 img {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: bottom center !important;
     object-position: bottom center !important;
}

/* Tot 1100px staat de banner niet meer in twee helften naast elkaar: het thema
   zet de afbeeldingen dan onder de tekst. Er is daar dus geen rechterhelft om
   over te liggen, en bleef het portret absoluut staan dan zweefde hij los
   onder de achtergrondfoto. Hij loopt daar gewoon in de stapel mee. */
@media (max-width: 1100px) {
  body.brf:where(:not(.brf-gen)) .wrapper--full-banner.image-position-right.with-image-2.with-second-text:not(.second-image-offset):not(.downloads-banner) > .wrapper--full-banner-image.image-2 {
    position: relative !important;
    grid-column: 1/-1 !important;
    grid-row: auto !important;
    inset: auto !important;
    height: auto !important;
    width: 100% !important;
    aspect-ratio: auto !important;
  }
}
/* Het portret blijft op elke breedte staan. Het thema zet hem tussen ongeveer
   900 en 1100px op display:none, waardoor de foto daar helemaal verdween. */
body.brf:where(:not(.brf-gen)) .wrapper--full-banner.image-position-right.with-image-2.with-second-text:not(.second-image-offset):not(.downloads-banner) > .wrapper--full-banner-image.image-2 {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

/* ---- referentiepagina ---- */
/* De kaarten in de header vielen weg: het vlak met de headerfoto staat op
   z-index 7 en de kaarten op 2, dus de foto lag eroverheen. Ze komen er weer
   bovenop, krijgen dezelfde ronding en schaduw als de andere kaarten en lopen
   met hun linkerrand mee met de rest van de pagina (stond 29px naar binnen
   door de eigen padding van de header-wrapper). */
body.brf:where(:not(.brf-gen)) .header--cards {
  z-index: 8 !important;
}

body.brf:where(:not(.brf-gen)) .header--cards .header--inner-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Deze kaarten volgen de stijl van alle andere kaarten op de site: 26px
   ronding, een zachte schaduw die bij hover dieper wordt, en de kaart schuift
   omhoog terwijl de foto tegelijk inzoomt. Het witte vlak blijft wel staan -
   de kaarten liggen over de donkere headerfoto, dus zonder dat vlak is de
   titel niet te lezen. Het thema maakte dat vlak bij hover donkerblauw met
   witte tekst; dat laten we los, anders vecht die hover met de witte kaart
   (en werd de titel wit op wit). De titel volgt de kaartkleuren: donkerblauw,
   cyaan bij hover.
   De volledige selector van het thema staat ervoor, anders verliezen deze
   regels het van de veel langere themaselectors. */
/* Geen wit vlak om de kaart: de foto zit in een kader met ronde hoeken en de
   titel staat eronder, net als bij elke andere kaart. Dat kan hier ook, want
   de titel valt onder de headerfoto (die eindigt boven de titel) en staat dus
   op de lichte band - donkerblauwe tekst leest daar gewoon. */
body.brf:where(:not(.brf-gen)) .header--cards .grid--item.has-link,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link {
  border-radius: var(--br-r-lg) !important;
}

body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link .item--placeholder,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link:hover .item--placeholder {
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  overflow: visible !important;
}

/* De foto is het kader: ronding, schaduw, en bij hover dieper - gelijk met de
   kaart die omhoog schuift. */
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link .item--placeholder .placeholder--image {
  border-radius: var(--br-r-lg) !important;
  -webkit-box-shadow: var(--br-shadow-sm) !important;
          box-shadow: var(--br-shadow-sm) !important;
  overflow: hidden !important;
  -webkit-transition: -webkit-box-shadow 0.35s var(--br-ease) !important;
  transition: -webkit-box-shadow 0.35s var(--br-ease) !important;
  transition: box-shadow 0.35s var(--br-ease) !important;
  transition: box-shadow 0.35s var(--br-ease), -webkit-box-shadow 0.35s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link:hover .item--placeholder .placeholder--image {
  -webkit-box-shadow: var(--br-shadow-md) !important;
          box-shadow: var(--br-shadow-md) !important;
}

/* De titel eronder op de bandkleur, zonder eigen vlak. */
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link .item--placeholder .placeholder--content {
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: var(--br-kaart-boven, 14px) 0 var(--br-kaart-onder, 28px) !important;
}

body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link .item--placeholder .placeholder--image :is(picture, img) {
  border-radius: 0 !important;
  -webkit-transition: -webkit-transform 0.35s var(--br-ease) !important;
  transition: -webkit-transform 0.35s var(--br-ease) !important;
  transition: transform 0.35s var(--br-ease) !important;
  transition: transform 0.35s var(--br-ease), -webkit-transform 0.35s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link:hover .item--placeholder .placeholder--image img {
  -webkit-transform: scale(1.045) !important;
      -ms-transform: scale(1.045) !important;
          transform: scale(1.045) !important;
}

/* Omhoog schuiven mag niet afgesneden worden: de wrapper van het thema staat
   op overflow:hidden. */
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid {
  overflow: visible !important;
}

body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link .item--placeholder .placeholder--content p.heading-5,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link .item--placeholder .placeholder--content .heading-5 {
  font-size: 20px !important;
  line-height: 26px !important;
  color: var(--br-navy) !important;
  -webkit-transition: color 0.35s var(--br-ease) !important;
  transition: color 0.35s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link:hover .item--placeholder .placeholder--content p.heading-5,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid .grid--item.has-link:hover .item--placeholder .placeholder--content .heading-5 {
  color: var(--br-cyan) !important;
}

/* De referentiekaarten in de lijst stonden in een donkerblauw vlak met 8px
   ronding, waardoor de titel in een donkere balk onder de foto hing. Ze worden
   nu net als alle andere kaarten: de foto in een kader met ronde hoeken en de
   titel eronder op de paginakleur. */
body.brf:where(:not(.brf-gen)) .wrapper--references .grid--item .item--placeholder {
  background: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--references .grid--item .placeholder--image {
  border-radius: var(--br-r-lg) !important;
  overflow: hidden !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--references .grid--item .placeholder--content {
  padding: var(--br-kaart-boven, 14px) 0 var(--br-kaart-onder, 28px) !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--references .grid--item .placeholder--content,
body.brf:where(:not(.brf-gen)) .wrapper--references .grid--item .placeholder--content p,
body.brf:where(:not(.brf-gen)) .wrapper--references .grid--item .placeholder--content .heading-5,
body.brf:where(:not(.brf-gen)) .wrapper--references .grid--item .placeholder--content a {
  color: var(--br-navy) !important;
}

/* Paginatie: de pijlen hebben geen icoon (het thema verwijst naar een bestand
   dat hier ontbreekt) en de uitgeschakelde pijl stond op 25% zichtbaar. De rij
   begon daardoor met een leeg vlak en de nummers leken 68px ingesprongen. De
   pijlen worden nu getekend zoals bij de carrousels, en de nummers krijgen
   dezelfde taal: gevuld voor de huidige pagina, omlijnd voor de rest. */
body.brf:where(:not(.brf-gen)) .pagination,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
}

body.brf:where(:not(.brf-gen)) .pagination .arrow,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .arrow {
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  background: var(--br-navy) !important;
  border: 1px solid var(--br-navy) !important;
  -webkit-transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease);
  /* Het thema legt een mask over de hele knop met een icoon dat hier niet
     bestaat (dezelfde ontbrekende themabestanden als bij de andere iconen).
     Een mask met een mislukte afbeelding maakt het element volledig
     onzichtbaar - vandaar dat er niets van de pijlen te zien was. */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body.brf:where(:not(.brf-gen)) .pagination .arrow::after,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .arrow::after {
  content: "" !important;
  width: 9px;
  height: 9px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-left: 3px;
}

body.brf:where(:not(.brf-gen)) .pagination .arrow.left::after,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .arrow.left::after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  margin-left: 0;
  margin-right: 3px;
}

body.brf:where(:not(.brf-gen)) .pagination .arrow:not(.disabled):hover,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .arrow:not(.disabled):hover {
  background: var(--br-cyan) !important;
  border-color: var(--br-cyan) !important;
}

body.brf:where(:not(.brf-gen)) .pagination .arrow.disabled,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .arrow.disabled {
  opacity: 0.3 !important;
  cursor: default !important;
}

body.brf:where(:not(.brf-gen)) .pagination .items .item,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .items .item {
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  background: none !important;
  border: 1px solid var(--br-line) !important;
  color: var(--br-navy) !important;
  -webkit-transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), color 0.2s var(--br-ease);
  transition: background 0.2s var(--br-ease), border-color 0.2s var(--br-ease), color 0.2s var(--br-ease);
}

body.brf:where(:not(.brf-gen)) .pagination .items .item a,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .items .item a {
  color: inherit !important;
}

body.brf:where(:not(.brf-gen)) .pagination .items .item:hover,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .items .item:hover {
  border-color: var(--br-cyan) !important;
  color: var(--br-cyan) !important;
}

body.brf:where(:not(.brf-gen)) .pagination .items .item.active,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .pagination .items .item.active {
  background: var(--br-navy) !important;
  border-color: var(--br-navy) !important;
  color: #ffffff !important;
}

/* De kaarten steken onder de header uit. Nu ze zichtbaar zijn moet de sectie
   eronder meeschuiven, anders liggen ze over de eerste rij kaarten van de
   lijst. Hoeveel ze uitsteken is de negatieve ondermarge uit het thema (180px,
   op elke breedte; de kaarten zelf zijn altijd hoger). Die maat staat nu in één
   variabele die de kaarten en de sectie eronder allebei gebruiken. Eerst werd
   hij in de JS gemeten, en tot die meting stond de lijst bij het laden even
   onder de kaarten. */
body.brf:where(:not(.brf-gen)):has(.header.has-cards) {
  --br-kaarten-over: 180px;
}

body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards {
  margin-bottom: calc(-1 * var(--br-kaarten-over)) !important;
}

/* De header staat in een eigen wrapper buiten .main, dus met een broer-selector
   is de sectie eronder niet te bereiken; vandaar :has() op de body. Inclusief
   de ronding van de hero (--br-hero-radius), die br-kopruimte er ook bijtelt:
   zo is de ruimte meteen goed, nog voordat de JS die klasse heeft gezet. */
body.brf:where(:not(.brf-gen)):has(.header.has-cards) .main > .section:first-child,
body.brf:where(:not(.brf-gen)):has(.header.has-cards) .main > .wrapper:first-child .section {
  padding-top: calc(var(--br-space-top) + var(--br-hero-radius) + var(--br-kaarten-over, 0px)) !important;
}

/* De titelkleur die ik hierboven vastzet gold ook tijdens hover, waardoor het
   standaard kaart-effect (titel wordt cyaan) niet meer doorkwam. Geldt
   alleen voor de kaarten in de lijst; de kaarten in de header houden het
   effect van het thema (vlak wordt donkerblauw, titel wit). Dit zet dat
   terug; de rest van het effect - kaart komt 6px omhoog, foto zoomt 1.045, de
   schaduw wordt zwaarder - komt uit de algemene kaartregels. Alleen de titel:
   de tekst eronder (op de zoekpagina) houdt zijn eigen kleur. */
body.brf:where(:not(.brf-gen)) .wrapper--references .grid--item.has-link:hover .placeholder--content .heading-5 {
  color: var(--br-cyan) !important;
}

/* De foto van een referentiekaart stond op width 100% / padding-top 50%. Iets
   meer beeld: 56%. Het witte vlak achter de foto gaat eraf, zodat er geen witte
   rand omheen valt op de lichte pagina. */
body.brf:where(:not(.brf-gen)) .placeholder--grid.references .grid--item .item--placeholder .placeholder--image {
  padding-top: 56% !important;
  background-color: transparent !important;
}

/* Na de entree lopen het omhoog komen van de kaart, de zoom van de foto en de
   schaduw op precies dezelfde tijd en curve. De entree zelf mag veren en wat
   langer duren; die staat hierboven. Zonder dit onderscheid gebruikte de hover
   de entree-tijden (0,52s met een veercurve) terwijl de foto op 0,35s zat, en
   zag je eerst de zoom en daarna het omhoog schuiven. */
body.brf:where(:not(.brf-gen)) .br-card.br-klaar {
  -webkit-transition: -webkit-transform 0.35s var(--br-ease) !important;
  transition: -webkit-transform 0.35s var(--br-ease) !important;
  transition: transform 0.35s var(--br-ease) !important;
  transition: transform 0.35s var(--br-ease), -webkit-transform 0.35s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .br-card.br-klaar .placeholder--image {
  -webkit-transition: -webkit-box-shadow 0.35s var(--br-ease) !important;
  transition: -webkit-box-shadow 0.35s var(--br-ease) !important;
  transition: box-shadow 0.35s var(--br-ease) !important;
  transition: box-shadow 0.35s var(--br-ease), -webkit-box-shadow 0.35s var(--br-ease) !important;
}

/* Twee dingen bij hover op de kaarten in de header:
   - De inner-wrapper van het thema staat op overflow:hidden, dus het stukje dat
     de kaart omhoog komt werd aan de bovenkant afgesneden.
   - Het thema zet de titel bij hover op wit met !important en een selector van
     tien klassen diep. Die stond wit op een lichte band. Zelfde selector, maar
     dan met body.brf ervoor, zodat hij het wel haalt. */
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper {
  overflow: visible !important;
}

/* De ruimte tussen de headertekst en de drie ingangen kwam uit een padding van
   160px onder de tekst-wrapper. Met de kaarten eronder werd de header daardoor
   onnodig hoog; dit halveert het ongeveer. Alleen op pagina's met kaarten in de
   header, want elders bepaalt die padding de hoogte van de hero. */
body.brf:where(:not(.brf-gen)) .header.has-cards {
  --br-hero-onder:24px;
}

/* De header met kaarten (/referenties) is net zo hoog als de hero op elke
   andere binnenpagina (feedback Sophie, 14 okt). Eerst kreeg alleen het
   foto-deel de minimumhoogte en kwam het deel van de kaarten dat in de header
   valt daar nog bij: 90px hoger dan elders, en de titel stond ver onder het
   menu. Nu krijgt de hele header de minimumhoogte, en vult het foto-deel wat er
   na de kaarten overblijft. De tekst staat daarin onderaan, zoals elders. Hangt
   niet af van de hoogte van de kaarten. */
body.brf:where(:not(.brf-gen)) .header.has-cards {
  min-height: var(--br-hero-hoogte) !important;
}

body.brf:where(:not(.brf-gen)) .header.has-cards > .header--outer-wrapper.bottom {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 0 auto !important;
          flex: 1 0 auto !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}

body.brf:where(:not(.brf-gen)) .header.has-cards:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper {
  min-height: 0 !important;
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 0 auto !important;
          flex: 1 0 auto !important;
}

/* Het witte kader in de header - taalselectie op gebruiksadvies, het logo op
   een referentiepagina - was een tab die aan de onderrand van de hero vastzat:
   alleen de bovenhoeken rond, geen schaduw. Het wordt een kaart zoals de rest:
   rondom dezelfde ronding, de kaartschaduw, en hij hangt een stukje onder de
   hero door zodat hij de rand van de sectie eronder overlapt. */
body.brf:where(:not(.brf-gen)) .header .wrapper--inset {
  border-radius: var(--br-r-lg) !important;
  /* Het thema trok hem met -88px naar de onderrand van de hero. Onderkant nu
     gelijk met de tekst links; die staat in dezelfde rij onderaan uitgelijnd. */
  margin-bottom: 0 !important;
  /* Hij was breder dan zijn kolom en liep mobiel het beeld uit. */
  max-width: 100% !important;
  /* Tegen de rechterrand van het contentraster in plaats van halverwege. */
  margin-left: auto !important;
  -webkit-box-shadow: var(--br-shadow-md) !important;
          box-shadow: var(--br-shadow-md) !important;
  padding: var(--br-pad) !important;
  position: relative !important;
  z-index: 6 !important;
}

/* Onderkant gelijk met de tekst links: beide staan onderaan uitgelijnd in
   dezelfde rij, dus zonder extra marge eindigen ze op dezelfde lijn. Eerder
   zakte het kader lager, maar dat liep tegen de clip-path van de hero aan (die
   kapt alles af onder de ronde onderrand) en dan was de inhoud niet te zien.
   Tussenruimte zodat de tekst en het kader elkaar nooit raken - naast elkaar
   op grote schermen, onder elkaar op kleine. */
body.brf:where(:not(.brf-gen)) .header:has(.wrapper--inset) > .header--outer-wrapper.bottom .header--inner-wrapper {
  gap: 40px !important;
}

/* De variant met een logo (referentiepagina) was 885px breed met het logo op
   object-fit:cover, dus afgesneden. Het wordt een compact kaartje met het hele
   logo erin. */
body.brf:where(:not(.brf-gen)) .header .wrapper--inset.with-image {
  width: min(360px, 100%) !important;
  -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 auto !important;
          flex: 0 0 auto !important;
  padding: 32px !important;
}

body.brf:where(:not(.brf-gen)) .header .wrapper--inset.with-image .image {
  width: 100% !important;
}

body.brf:where(:not(.brf-gen)) .header .wrapper--inset.with-image img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .header .wrapper--inset {
    width: 100% !important;
  }
}
/* Het kader had een vaste hoogte uit het thema (242px op gebruiksadvies, 270px
   op een referentiepagina). Past de inhoud daar niet in, dan loopt ze er onder
   uit - dat is wat je zag. Hij groeit nu met zijn inhoud mee. De kop bovenin
   had ook nog een eigen marge van 40px boven op de padding. */
body.brf:where(:not(.brf-gen)) .header .wrapper--inset {
  height: auto !important;
  min-height: 0 !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
}

body.brf:where(:not(.brf-gen)) .header .wrapper--inset > *:first-child {
  margin-top: 0 !important;
}

/* Meer nadruk: een zwaardere schaduw, en de variant met tekst helemaal in het
   donkerblauw. Die met een logo blijft wit - een logo brengt bijna altijd zijn
   eigen witte vlak mee en gaat op donkerblauw als een sticker staan. */
body.brf:where(:not(.brf-gen)) .header .wrapper--inset {
  -webkit-box-shadow: 0 20px 48px rgba(0, 21, 57, 0.3), 0 3px 8px rgba(0, 21, 57, 0.14) !important;
          box-shadow: 0 20px 48px rgba(0, 21, 57, 0.3), 0 3px 8px rgba(0, 21, 57, 0.14) !important;
}

body.brf:where(:not(.brf-gen)) .header .wrapper--inset:not(.with-image) {
  background: var(--br-navy) !important;
}

body.brf:where(:not(.brf-gen)) .header .wrapper--inset:not(.with-image),
body.brf:where(:not(.brf-gen)) .header .wrapper--inset:not(.with-image) h1,
body.brf:where(:not(.brf-gen)) .header .wrapper--inset:not(.with-image) h2,
body.brf:where(:not(.brf-gen)) .header .wrapper--inset:not(.with-image) h3,
body.brf:where(:not(.brf-gen)) .header .wrapper--inset:not(.with-image) p,
body.brf:where(:not(.brf-gen)) .header .wrapper--inset:not(.with-image) a {
  color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) .header .wrapper--inset:not(.with-image) a:hover {
  color: var(--br-cyan) !important;
}

body.brf:where(:not(.brf-gen)) .header .wrapper--inset.with-image {
  background: #ffffff !important;
}

/* Tablet en mobiel: onder 66em (1056px) zet het thema de tekst en het kader
   onder elkaar. De uitlijning van die rij staat op flex-end, en in een kolom
   betekent dat rechts - daardoor schoof de tekst naar rechts op. Alles gaat
   hier links uitlijnen, en het kader - blauw en wit - pakt de volle breedte met
   zijn inhoud gecentreerd. */
@media (max-width: 1056px) {
  body.brf:where(:not(.brf-gen)) .header:has(.wrapper--inset) > .header--outer-wrapper.bottom .header--inner-wrapper {
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
  }
  body.brf:where(:not(.brf-gen)) .header:has(.wrapper--inset) > .header--outer-wrapper.bottom .wrapper--content {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  body.brf:where(:not(.brf-gen)) .header .wrapper--inset,
  body.brf:where(:not(.brf-gen)) .header .wrapper--inset.with-image {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    text-align: center !important;
  }
  body.brf:where(:not(.brf-gen)) .header .wrapper--inset .image,
  body.brf:where(:not(.brf-gen)) .header .wrapper--inset img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Het kader wordt breed, maar het logo hoeft niet mee te groeien: het blijft
     op zijn maat van het bureaublad staan, netjes in het midden. */
  body.brf:where(:not(.brf-gen)) .header .wrapper--inset.with-image .image {
    max-width: 300px !important;
  }
  body.brf:where(:not(.brf-gen)) .header .wrapper--inset ul {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
}
/* ---- Bribus GEN ----
   Die header heeft de klasse "homepage" maar is verder een gewone
   binnenpagina-header met een tekstblok erin. Daardoor viel hij buiten de
   hero-regels: de tekst liep over de volle breedte (1528px) en begon op 29
   in plaats van 40. Hij krijgt nu dezelfde tekstkolom en inspring als de
   andere headers. De echte homepage heeft geen .wrapper--content maar
   slides, dus die blijft hier buiten. */
body.brf:where(:not(.brf-gen)) .header.homepage:has(.wrapper--content) > .header--outer-wrapper.bottom .header--inner-wrapper {
  padding-left: var(--br-marge) !important;
  padding-right: var(--br-marge) !important;
}

body.brf:where(:not(.brf-gen)) .header.homepage:has(.wrapper--content) > .header--outer-wrapper.bottom .wrapper--content {
  max-width: var(--br-hero-tekst) !important;
  padding-left: var(--br-hero-inspring) !important;
}

/* De kaarten in de slider op GEN houden hun eigen stijl: donkerblauw vlak met
   16px ronding, de foto erin en de titel eronder binnen dat vlak, met de glow
   erachter. Dat komt allemaal uit het thema en daar blijft het redesign van af;
   de band eromheen blijft dus ook wit, anders vallen de kaarten weg. */
/* Tekstblok in een paneel: het paneel heeft 40px padding en de kolom van de
   blokgrid binnenin nog eens 40, dus de tekst begon op 120 in plaats van op de
   contentlijn van 40. De dubbele gutter gaat eruit. Alleen bij panelen met een
   tekstblok erin; het snelmenu en de tellers gebruiken dezelfde opbouw en
   blijven zoals ze zijn. */
body.brf:where(:not(.brf-gen)) .placeholder--content:has(.rich-text) > .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* De rij wordt naar buiten getrokken en de kolommen houden hun padding. Zo
   staat de tekst aan de buitenkant op de contentlijn en blijft er tussen de
   kolommen wel ruimte: haalde ik die padding weg, dan stond de tekst tegen de
   afbeelding aan. */
body.brf:where(:not(.brf-gen)) .placeholder--content:has(.rich-text) > .container-fluid > .row {
  margin-left: -40px !important;
  margin-right: -40px !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--content:has(.rich-text) > .container-fluid > .row > * {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Heeft dat paneel dezelfde kleur als de band eromheen, dan is het geen kaart
   maar gewoon inhoud: dan hoort er ook geen inspring te zijn en staat de tekst
   op de contentlijn. */
body.brf:where(:not(.brf-gen)) .wrapper[class~=f7f8f9] .placeholder--content.licht:has(.rich-text),
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .placeholder--content.donkerblauw:has(.rich-text),
body.brf:where(:not(.brf-gen)) .wrapper[class~=ffffff] .placeholder--content.wit:has(.rich-text),
body.brf:where(:not(.brf-gen)) .section:not(.has--background-color) .placeholder--content.wit:has(.rich-text) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Kaarten met een eigen achtergrondkleur uit de backend krijgen géén eigen
   opmaak: ze zien eruit als alle andere kaarten - foto met ronde hoeken, titel
   eronder op de paginakleur - zodat een kaartenrij overal hetzelfde oogt. De
   kleurkeuze per kaart schildert dus niet. */
/* Verkooppunten: de filterlijst van de kaartmodule stond in zwart op de
   donkerblauwe band, dus onleesbaar. Op een donkere band wordt die tekst wit. */
/* Het zoekpaneel van die module is zelf donkerblauw (.bh-sl-form-container),
   terwijl zijn labels en filters zwart bleven. Tekst daarin wordt wit; de
   invulvelden houden donkere tekst op hun eigen witte vlak. */
body.brf:where(:not(.brf-gen)) .bh-sl-form-container,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container li,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container li,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container label,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container label,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container p,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container p,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container h1,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container h1,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container h2,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container h2,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container h3,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container h3,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container legend,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container legend,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container .bh-sl-filters,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container .bh-sl-filters,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container .bh-sl-filters li,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container .bh-sl-filters li {
  color: #ffffff !important;
}

/* De velden staan met een witte rand direct op dat donkerblauwe vlak, zonder
   eigen vulling. Tekst daarin dus wit, met een heel lichte vulling zodat het
   veld zichtbaar is. De keuzelijst zelf valt open op een wit systeemvlak, dus
   die opties blijven donker. */
body.brf:where(:not(.brf-gen)) .bh-sl-form-container input[type=text],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container input[type=text],
body.brf:where(:not(.brf-gen)) .bh-sl-form-container input[type=search],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container input[type=search],
body.brf:where(:not(.brf-gen)) .bh-sl-form-container select,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container select,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container textarea,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container textarea {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

body.brf:where(:not(.brf-gen)) .bh-sl-form-container input::-webkit-input-placeholder, body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container input::-webkit-input-placeholder, body.brf:where(:not(.brf-gen)) .bh-sl-form-container textarea::-webkit-input-placeholder, body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) .bh-sl-form-container input::-moz-placeholder, body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container input::-moz-placeholder, body.brf:where(:not(.brf-gen)) .bh-sl-form-container textarea::-moz-placeholder, body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) .bh-sl-form-container input:-ms-input-placeholder, body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container input:-ms-input-placeholder, body.brf:where(:not(.brf-gen)) .bh-sl-form-container textarea:-ms-input-placeholder, body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) .bh-sl-form-container input::-ms-input-placeholder, body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container input::-ms-input-placeholder, body.brf:where(:not(.brf-gen)) .bh-sl-form-container textarea::-ms-input-placeholder, body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container textarea::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) .bh-sl-form-container input::placeholder,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container input::placeholder,
body.brf:where(:not(.brf-gen)) .bh-sl-form-container textarea::placeholder,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) .bh-sl-form-container option,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .bh-sl-form-container option {
  color: var(--br-navy) !important;
}

/* Voordelen in twee kolommen: de kolommen stonden op een vaste breedte van
   50% min de helft van de tussenruimte, maar konden door min-width:auto niet
   kleiner worden dan hun inhoud. Rond tabletbreedte duwde de linkerkolom de
   rechter daardoor 55px buiten het kader. Ze mogen nu krimpen, en als het
   echt niet past vallen ze onder elkaar. */
body.brf:where(:not(.brf-gen)) .placeholder--list.columns-2 {
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--list.columns-2 > .column {
  min-width: 0 !important;
}

/* De bolletjes onder de fotoslider zaten in een laag van 100% vensterbreedte
   die op 40px begon, en reikten daardoor 40px buiten de pagina. Met left/right 0
   stonden ze tegen de rand van het scherm (de laag hing aan de hele sectie, incl.
   binnenruimte). Gewoon in de rij met bediening onder de slider, gelijk met de
   linkerrand van de foto's. */
body.brf:where(:not(.brf-gen)) .controls--dots .slick-dots {
  position: static !important;
  width: auto !important;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* De pijltjes op het midden van de foto's in plaats van het midden van de hele
   sectie (met kop, tekst en dots). bribus-refresh.js meet dat midden en zet het
   als --br-pijl-top; zonder meting blijft het 50% van slick. De quote-slider
   heeft een eigen, zwaardere regel (pijltjes bovenin) en houdt die. */
body.brf:where(:not(.brf-gen)) .placeholder--carousel-controls > .controls--arrows .slick-arrow {
  top: var(--br-pijl-top, 50%) !important;
}

/* Een kaart met een kleurkeuze uit de backend ziet er hetzelfde uit als elke
   andere kaart: foto met ronde hoeken, titel eronder op de paginakleur. Het
   thema legde die kleur als vlak onder de foto met witte tekst erin; dat gaf
   een blok met vierkante hoeken onder een ronde foto en week af van dezelfde
   kaarten op de homepage. De kleurkeuze per kaart schildert dus niet meer. */
body.brf:where(:not(.brf-gen)) .grid--item.has-link.has--background-color .placeholder--content,
body.brf:where(:not(.brf-gen)) .placeholder--grid .grid--item.has-link.has--background-color .item--placeholder .placeholder--content {
  background: none !important;
  padding: var(--br-kaart-boven, 14px) 0 var(--br-kaart-onder, 28px) !important;
}

/* Onder de titel van een kaart stond 28px. Bij de onderste kaartrij kwam die bovenop de
   sectieruimte, waardoor die sectie onderaan ruimer was dan de rest (113 in plaats van 86).
   De ruimte hoort tussen de kaartrijen, niet onder elke kaart: dus geen ruimte onder de titel
   en 40px tussen de rijen, zoals het nieuwsraster al deed. Alleen voor kaarten zonder kader;
   downloads en contactpersonen staan in een gekleurd kader en houden hun binnenruimte. */
body.brf:where(:not(.brf-gen)) .placeholder--grid:is(.cards, .vacancies),
body.brf:where(:not(.brf-gen)) .wrapper--references .placeholder--grid {
  --br-kaart-onder:0px;
  row-gap: 40px !important;
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link.has--background-color .placeholder--content p,
body.brf:where(:not(.brf-gen)) .grid--item.has-link.has--background-color .placeholder--content .heading-4,
body.brf:where(:not(.brf-gen)) .grid--item.has-link.has--background-color .placeholder--content .heading-5,
body.brf:where(:not(.brf-gen)) .placeholder--grid .grid--item.has-link.has--background-color .item--placeholder .placeholder--content p,
body.brf:where(:not(.brf-gen)) .placeholder--grid .grid--item.has-link.has--background-color .item--placeholder .placeholder--content .heading-4 {
  color: var(--br-navy) !important;
}

body.brf:where(:not(.brf-gen)) .grid--item.has-link.has--background-color:hover .placeholder--content .heading-4,
body.brf:where(:not(.brf-gen)) .grid--item.has-link.has--background-color:hover .placeholder--content .heading-5,
body.brf:where(:not(.brf-gen)) .placeholder--grid .grid--item.has-link.has--background-color:hover .item--placeholder .placeholder--content .heading-4 {
  color: var(--br-cyan) !important;
}

/* Brede tabel op een smal scherm: die schuift binnen zijn eigen kader, maar dat
   zag je niet. Aan de kant waar nog inhoud zit komt nu een zachte schaduw; die
   verdwijnt zodra je aan het einde bent. De twee dekkende lagen schuiven mee
   met de inhoud (background-attachment:local) en schuiven de schaduw weg, de
   schaduwlagen blijven staan. */
body.brf:where(:not(.brf-gen)) .responsive-table,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .responsive-table {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #ffffff), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, color-stop(30%, #ffffff), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(rgba(0, 21, 57, 0.16)), to(rgba(0, 21, 57, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 21, 57, 0.16)), to(rgba(0, 21, 57, 0)));
  background-image: linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, #ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(0, 21, 57, 0.16), rgba(0, 21, 57, 0)), linear-gradient(to left, rgba(0, 21, 57, 0.16), rgba(0, 21, 57, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Vangnet: staat een kaartenrij op donkerblauw, dan wordt de band donker en
   moeten de titels en teksten van de kaarten wit zijn. Zonder dit bleven ze
   navy op navy, en die kleurkeuze deed tot nu toe niets, dus dat had niemand
   kunnen zien. */
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw :is(.wrapper--cards, .wrapper--news) .grid--item .placeholder--content,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw :is(.wrapper--cards, .wrapper--news) .grid--item .placeholder--content p,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw :is(.wrapper--cards, .wrapper--news) .grid--item .placeholder--content .heading-4,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw :is(.wrapper--cards, .wrapper--news) .grid--item .placeholder--content .heading-5,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] :is(.wrapper--cards, .wrapper--news) .grid--item .placeholder--content,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] :is(.wrapper--cards, .wrapper--news) .grid--item .placeholder--content p,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] :is(.wrapper--cards, .wrapper--news) .grid--item .placeholder--content .heading-4,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] :is(.wrapper--cards, .wrapper--news) .grid--item .placeholder--content .heading-5 {
  color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw :is(.wrapper--cards, .wrapper--news) .grid--item.has-link:hover .placeholder--content .heading-4,
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw :is(.wrapper--cards, .wrapper--news) .grid--item.has-link:hover .placeholder--content .heading-5,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] :is(.wrapper--cards, .wrapper--news) .grid--item.has-link:hover .placeholder--content .heading-4,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] :is(.wrapper--cards, .wrapper--news) .grid--item.has-link:hover .placeholder--content .heading-5 {
  color: var(--br-cyan) !important;
}

/* Volle-breedte quoteblok: de band loopt van rand tot rand en de wrapper
   binnenin zat op de contentlijn, maar kreeg daar nog 54px padding bovenop.
   De tekst begon daardoor op 94 terwijl de rest van de pagina op 40 staat.
   Bij de ingekaderde variant blijft die padding staan: dat is een kaart. */
body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width .wrapper--quotes {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Een geneste sectie heeft zelf geen padding meer - hij is inhoud binnen de
   sectie eromheen - maar een kop bovenin zo'n sectie stond daardoor vast tegen
   de alinea erboven (Renovatie en Nieuwbouw op vastgoedbeleggers). Die kop
   krijgt de gewone koprumte mee; het thema geeft een h3 daar niets. */
body.brf:where(:not(.brf-gen)) .section .section:not(.has--background-color) :is(h2, h3, h4, p.heading-3, p.heading-4):first-child {
  margin-top: 40px !important;
}

/* ==========================================================================
   Eén contentlijn, van de balk bovenin tot de copyrightregel onderaan
   --------------------------------------------------------------------------
   Op de telefoon begon alles op een andere lijn: gewone secties op 40,
   banners op 70, de tellers op 82, de quoteband op 36/56/67 en de
   copyrightregel vlak tegen de rand. Dat komt doordat het thema de marge in
   twee lagen opbouwt: de wrapper zet 40px marge en de laag eronder
   (*--placeholder, placeholder--content) legt daar nog 30px padding bovenop,
   en een grid-item nog eens 12px.
   Er is nu één maat, --br-marge. De wrapperlaag zet die marge, de lagen
   eronder tellen er niets meer bij op. Panelen (banner, kaart, quote-inzet)
   beginnen op die lijn en houden hun eigen binnenruimte.
   ========================================================================== */
body.brf {
  --br-marge:40px;
}

@media (max-width: 820px) {
  body.brf {
    --br-marge:40px;
  }
}
@media (max-width: 575px) {
  body.brf {
    --br-marge:32px;
  }
}
@media (max-width: 820px) {
  /* De sectie zelf zet de marge. Dat werkt voor alle drie de gevallen: een
     band met achtergrondkleur loopt van rand tot rand met zijn inhoud op de
     lijn, een paneel (banner, kaart) begint op de lijn, en een geneste sectie
     erft de lijn van de sectie eromheen zonder er nog eens bij op te tellen.
     De dubbele .section in de selector is er om de bestaande regels die de
     zijkanten van een band op nul zetten te overstemmen. */
  body.brf:where(:not(.brf-gen)) .main .section.section:not(.quotes) {
    padding-left: var(--br-marge) !important;
    padding-right: var(--br-marge) !important;
    /* een band hield mobiel nog 16px zijmarge; die loopt nu tot de rand */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Een sectie die in een andere sectie of in een wrapperblok zit, zit al
     binnen de lijn; die telt er niets meer bij op. De klasse staat er drie keer
     in om de regel hierboven te overstemmen - in specificiteit, niet in orde,
     zodat de volgorde in het bestand niet uitmaakt. */
  body.brf:where(:not(.brf-gen)) .main .section .section.section.section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section > .section--wrapper > [class*=wrapper--] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* De lagen tussen de sectie en de tekst tellen niets meer bij op. Uitzondering
     is een laag die zelf een paneel is - een eigen achtergrond, zoals het
     snelmenu of een uitgelicht tekstvlak: die schuift naar de contentlijn en
     houdt zijn eigen binnenruimte. Ook de lagen binnen een kaart (.grid--item)
     tellen niet mee: een kaart met een eigen vlak (tijdlijn, contactpersonen)
     houdt mobiel zijn binnenruimte, anders stond de tekst tegen de rand. */
  body.brf:where(:not(.brf-gen)) .main .section [class*="--placeholder"]:not(.grid--item *),
  body.brf:where(:not(.brf-gen)) .main .section .container-fluid:not(.grid--item *),
  body.brf:where(:not(.brf-gen)) .main .section :is(.placeholder--content, .placeholder--grid, .placeholder--list, .placeholder--single-quote, .placeholder--table, .placeholder--carousel):not(.has--background-color):not(:has(.quick--navigation)):not(.grid--item *) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .placeholder--content.has--background-color,
  body.brf:where(:not(.brf-gen)) .main .section .placeholder--content:has(.quick--navigation) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--br-pad) !important;
    padding-right: var(--br-pad) !important;
  }
  /* Hero, footer en copyright op diezelfde lijn. De copyrightregel had
     helemaal geen marge en stond dus tegen de rand van het scherm. */
  body.brf:where(:not(.brf-gen)) .header--outer-wrapper.bottom .header--inner-wrapper,
  body.brf:where(:not(.brf-gen)) .header.homepage:has(.wrapper--content) > .header--outer-wrapper.bottom .header--inner-wrapper,
  body.brf .footer--inner-wrapper,
  body.brf .copyright--inner-wrapper {
    padding-left: var(--br-marge) !important;
    padding-right: var(--br-marge) !important;
  }
}
@media (max-width: 575px) {
  /* In één kolom is de goot tussen de kaarten aan de buitenrand overbodig.
     Niet bij downloads: daar is de padding van het item de binnenruimte van
     de kaart zelf, en stonden foto en tekst anders tegen de rand. */
  body.brf:where(:not(.brf-gen)) .main .section .placeholder--grid:not(.downloads) > .grid--item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* De zwevende balk hoort met zijn inhoud op dezelfde contentlijn als de rest
   van de pagina: de rand van de balk blijft waar hij stond, het beeldmerk en
   de hamburger komen op de lijn. */
body.brf .header--outer-wrapper.top .header--inner-wrapper {
  /* De balk zweeft op clamp(12,1.6vw,26) van de rand en heeft 1px rand; de
     rest is binnenruimte, zodat het beeldmerk en de hamburger precies op de
     contentlijn van de pagina staan. */
  padding-left: calc(var(--br-marge) - clamp(12px, 1.6vw, 26px) - 1px) !important;
  padding-right: calc(var(--br-marge) - clamp(12px, 1.6vw, 26px) - 1px) !important;
}

/* Op desktop zat het logo zo op 13-23px van de ronde hoek van de balk, te krap, en hoe breder het
   scherm hoe krapper. Daar groeit de binnenruimte nu mee met het scherm (32px op 1025, 52px vanaf
   ~1860) en laten logo en navigatie de contentlijn los; mobiel blijven beeldmerk en hamburger erop. */
@media (min-width: 1025px) {
  body.brf .header--outer-wrapper.top .header--inner-wrapper {
    padding-left: clamp(32px, 2.8vw, 52px) !important;
    padding-right: clamp(32px, 2.8vw, 52px) !important;
  }
}
/* ==========================================================================
   Hamburger en mobiel menu
   --------------------------------------------------------------------------
   Het thema hangt de streepjes op met margin -1px 12px, in een box van 48px.
   Onze box is 18px breed, dus die 12px duwde de streepjes (en het kruisje)
   uit het midden. Verder: witte cirkel zonder rand met een kleine schaduw,
   en rechts op de contentlijn. Dit geldt tot 1024px, want tot daar staat de
   hamburger in de balk - ook op een iPad mini.
   ========================================================================== */
@media (max-width: 1024px) {
  body.brf .header .placeholder--navigation .hamburger {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: #ffffff !important;
    -webkit-box-shadow: 0 2px 10px rgba(0, 21, 57, 0.18), 0 1px 2px rgba(0, 21, 57, 0.1) !important;
            box-shadow: 0 2px 10px rgba(0, 21, 57, 0.18), 0 1px 2px rgba(0, 21, 57, 0.1) !important;
    top: 50% !important;
    bottom: auto !important;
    right: calc(var(--br-marge) - clamp(12px, 1.6vw, 26px) - 1px) !important;
    -webkit-transform: translateY(-50%) !important;
        -ms-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important;
    -webkit-transition: background 0.18s var(--br-ease), -webkit-box-shadow 0.18s var(--br-ease) !important;
    transition: background 0.18s var(--br-ease), -webkit-box-shadow 0.18s var(--br-ease) !important;
    transition: background 0.18s var(--br-ease), box-shadow 0.18s var(--br-ease) !important;
    transition: background 0.18s var(--br-ease), box-shadow 0.18s var(--br-ease), -webkit-box-shadow 0.18s var(--br-ease) !important;
  }
  body.brf .hamburger .hamburger-box {
    width: 18px !important;
    height: 14px !important;
    display: block !important;
    position: relative !important;
    margin: 0 !important;
  }
  body.brf .hamburger .hamburger-inner,
  body.brf .hamburger .hamburger-inner::before,
  body.brf .hamburger .hamburger-inner::after {
    width: 18px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background-color: var(--br-navy) !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.brf .hamburger .hamburger-inner {
    top: 50% !important;
    margin-top: -1px !important;
  }
  body.brf .hamburger .hamburger-inner::before {
    top: -6px !important;
    bottom: auto !important;
  }
  body.brf .hamburger .hamburger-inner::after {
    bottom: -6px !important;
    top: auto !important;
  }
  /* Open blijft hij een witte cirkel met een donkerblauw kruisje: dezelfde
     knop, alleen een ander teken. */
  /* Het kruisje: het onderste streepje klapt naar het midden, dus daar hoort
     bottom op 0 en niet op -6. */
  body.brf .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0 !important;
  }
  /* Het secundaire menu (taal, favorieten, inloggen) hoort niet in de balk
     zolang de hamburger er staat: het thema liet de items al vallen, maar
     onze eigen regel zette ze weer aan. */
  body.brf .header .placeholder--navigation .nav--secondary {
    display: none !important;
  }
  /* Zoeken: daarmee valt ook het zoekicoon uit het secundaire menu weg, dus
     een eigen knop links van de hamburger, in dezelfde witte cirkel. */
  body.brf .header .placeholder--navigation .mobile-search {
    position: absolute !important;
    top: 50% !important;
    right: calc(var(--br-marge) - clamp(12px, 1.6vw, 26px) - 1px + 44px + 10px) !important;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important;
    width: 44px;
    height: 44px;
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 999px;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px rgba(0, 21, 57, 0.18), 0 1px 2px rgba(0, 21, 57, 0.1);
            box-shadow: 0 2px 10px rgba(0, 21, 57, 0.18), 0 1px 2px rgba(0, 21, 57, 0.1);
    text-decoration: none;
    -webkit-transition: background 0.18s var(--br-ease);
    transition: background 0.18s var(--br-ease);
  }
  body.brf .header .placeholder--navigation .mobile-search:hover,
  body.brf .header .placeholder--navigation .mobile-search.is-selected {
    background: rgba(0, 159, 218, 0.12);
  }
  body.brf .header .placeholder--navigation .mobile-search .search-icon::before {
    content: "\f002";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    color: var(--br-navy);
  }
  /* Het menupaneel stond met 40px van de randen af terwijl de balk erboven op
     12px staat; nu lijnt het paneel uit met die balk en de menuregels met de
     contentlijn. */
  body.brf nav.mobile > .mobile-placeholder {
    margin: 0 12px !important;
  }
  body.brf nav.mobile .slinky-theme-default a:not(.back):not(.next) {
    padding-left: calc(var(--br-marge) - 12px) !important;
  }
}
/* De balk mag bij het vastzetten niet van vorm veranderen: de ronding was
   onderweg 18 en vastgezet 24, en de hoogte verschoof mee met de padding.
   Ook op het bureaublad blijft de balk nu even hoog: het secundaire menu
   blijft staan, en de paar pixels die de padding scheelde gaven alleen een
   onrustig verspringen (Sander, 15 okt). */
@media (max-width: 1024px) {
  body.brf .header.is-stuck .header--outer-wrapper.top {
    border-radius: 18px !important;
  }
  body.brf .header.is-stuck .placeholder--navigation > ul {
    padding: 8px 0 !important;
  }
}
@media (min-width: 1025px) {
  body.brf .header.is-stuck .header--outer-wrapper.top {
    border-radius: 24px !important;
  }
}
/* ==========================================================================
   Quotecarrousel op de telefoon
   --------------------------------------------------------------------------
   De slide stapelde als tekst-boven-foto: de foto kwam half naar binnen met
   ronde hoeken boven en rechte onder, daarna de inzet en dan de bediening
   vast tegen de onderrand. Nu ligt de foto als achtergrond onder de hele
   slide, met een verloop naar de band boven en onder, staat de inzet
   eroverheen en zit de bediening eronder met lucht eromheen.
   ========================================================================== */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main .section.quotes {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel.quotes {
    padding: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .carousel--item {
    display: block !important;
    position: relative !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image :is(picture, img) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 44% !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#001539), color-stop(24%, rgba(0, 21, 57, 0.82)), color-stop(60%, rgba(0, 21, 57, 0.38)), to(rgba(0, 21, 57, 0))) !important;
    background: linear-gradient(180deg, #001539 0%, rgba(0, 21, 57, 0.82) 24%, rgba(0, 21, 57, 0.38) 60%, rgba(0, 21, 57, 0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--image::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: 62% !important;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(4%, #001539), color-stop(34%, rgba(0, 21, 57, 0.86)), color-stop(66%, rgba(0, 21, 57, 0.4)), to(rgba(0, 21, 57, 0))) !important;
    background: linear-gradient(0deg, #001539 4%, rgba(0, 21, 57, 0.86) 34%, rgba(0, 21, 57, 0.4) 66%, rgba(0, 21, 57, 0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .item--content {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    padding: clamp(160px, 42vw, 260px) var(--br-marge) 0 !important;
    margin: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box {
    background: rgba(0, 21, 57, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-radius: var(--br-r-lg) !important;
    padding: 24px !important;
    -webkit-box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box > .heading-4.quote {
    padding: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box > p:last-child {
    padding: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .content--box > .logo {
    margin-bottom: 4px !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel-controls {
    position: static !important;
    margin: 28px var(--br-marge) 4px !important;
    padding: 0 !important;
    width: auto !important;
    -webkit-box-pack: justify !important;
        -ms-flex-pack: justify !important;
            justify-content: space-between !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
}
/* Een full banner die als blok ín een andere sectie staat (de Bribus
   GEN-banner op zakelijk) kreeg de 40px van de rij eromheen bovenop zijn
   eigen marge, en stond daardoor 40px verder naar binnen dan elke andere
   banner. De rij zet zijn zijkanten nu op nul; de banner houdt zijn eigen
   marge en komt zo op de contentlijn. Verplaatst iemand het blok later naar
   het hoofdniveau, dan werkt deze regel niet meer mee - precies goed. */
body.brf:where(:not(.brf-gen)) .section .umb-block-grid__area-container:has(> .umb-block-grid__area > .section.full-banner) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Naslag bij de contentlijn hierboven: het thema hangt de 40px marge niet
   altijd aan dezelfde laag. Bij een gewone sectie zit hij op de wrapper, bij
   een full banner op de section--wrapper en bij nieuws/filters zit er nog een
   tweede wrapper binnen de placeholder. Daarom hier per geval dezelfde maat. */
@media (max-width: 820px) {
  /* de buitenste laag houdt geen marge meer; de wrapper eronder zet de lijn */
  body.brf:where(:not(.brf-gen)) .main .section > .section--wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* een wrapper die dieper in de sectie zit (nieuws + filters) telt niets bij op */
  body.brf:where(:not(.brf-gen)) .main .section [class*=wrapper--] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* de quoteband liep niet tot de rand: het thema gaf hem een vaste breedte */
  body.brf:where(:not(.brf-gen)) .main .section.quotes {
    width: auto !important;
    max-width: none !important;
  }
}
@media (max-width: 575px) {
  /* de goot tussen de tellers hoort niet aan de buitenrand te staan */
  body.brf:where(:not(.brf-gen)) .placeholder--grid.counters > .grid--item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 820px) {
  /* Sommige secties hielden hun marge niet met margin maar met een vaste
     breedte (width:100% - 80px met margin auto), waardoor de banner met
     achtergrondkleur 40px binnen bleef staan terwijl de rest op de
     contentlijn zit. De section--wrapper vult nu de sectie; de wrapper
     daarbinnen zet de marge. */
  body.brf:where(:not(.brf-gen)) .main .section > .section--wrapper,
  body.brf:where(:not(.brf-gen)) .main .section.full-banner.has--background-color:not(.narrow-page) > .section--wrapper,
  body.brf:where(:not(.brf-gen)) .main .section.quotes.full-width > .section--wrapper {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  /* De quoteband is de uitzondering: daar loopt de foto van rand tot rand en
     staan alleen de tekst, de inzet en de bediening op de contentlijn. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes > .section--wrapper > .wrapper--quotes {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.quotes .quotes--placeholder > .placeholder--content {
    padding-left: var(--br-marge) !important;
    padding-right: var(--br-marge) !important;
  }
}
@media (max-width: 820px) {
  /* Een banner met achtergrondkleur is zelf het paneel: die houdt zijn
     marge op de section--wrapper, want de wrapper daarbinnen moet vlak in
     het paneel blijven liggen. Nu gelijk aan de contentlijn. */
  body.brf:where(:not(.brf-gen)) .main .section.full-banner.has--background-color:not(.narrow-page) > .section--wrapper {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
@media (max-width: 820px) {
  /* De twee tekstkolommen staan mobiel onder elkaar. De rij hoeft dan niet
     meer naar buiten getrokken te worden (dat maakte hem 80px breder dan het
     scherm) en de kolommen hebben geen zijruimte nodig. */
  body.brf:where(:not(.brf-gen)) .placeholder--content:has(.rich-text) > .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .placeholder--content:has(.rich-text) > .container-fluid > .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 1024px) {
  /* Het kruisje kwam niet tot stand: de open-toestand van het thema greep hier
     niet, en onze eigen streepjesregels hielden de onderste op -6. Nu zetten
     we de open-toestand zelf: het bovenste streepje verdwijnt, de andere twee
     kruisen elkaar precies in het midden van de knop. */
  body.brf .hamburger.is-active .hamburger-inner {
    -webkit-transform: rotate(45deg) !important;
        -ms-transform: rotate(45deg) !important;
            transform: rotate(45deg) !important;
  }
  body.brf .hamburger.is-active .hamburger-inner::before {
    top: 0 !important;
    opacity: 0 !important;
  }
  body.brf .hamburger.is-active .hamburger-inner::after {
    bottom: 0 !important;
    top: auto !important;
    -webkit-transform: rotate(-90deg) !important;
        -ms-transform: rotate(-90deg) !important;
            transform: rotate(-90deg) !important;
  }
}
@media (max-width: 820px) {
  /* Een banner met achtergrondkleur is een band, geen paneel: die houdt geen
     eigen marge maar zet zijn inhoud op de contentlijn, terwijl de foto van
     rand tot rand blijft lopen. */
  body.brf:where(:not(.brf-gen)) .main .section.full-banner.has--background-color:not(.narrow-page) {
    padding-left: var(--br-marge) !important;
    padding-right: var(--br-marge) !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.full-banner.has--background-color > .wrapper--full-banner-image.image-1 {
    width: calc(100% + 2 * var(--br-marge)) !important;
    margin-left: calc(-1 * var(--br-marge)) !important;
    margin-right: calc(-1 * var(--br-marge)) !important;
  }
}
@media (max-width: 820px) {
  /* De bootstrap-rij wordt op het bureaublad 40px naar buiten getrokken om de
     kolomruimte te compenseren. Mobiel staan de kolommen onder elkaar en
     schoof die rij de inhoud juist buiten de lijn (de koppen in het snelmenu
     op duurzaamheid stonden op 14 in plaats van 54). */
  body.brf:where(:not(.brf-gen)) .main .section .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .container-fluid > .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 820px) {
  /* Een rij met blokken binnen een sectie (de area-container van het
     blokraster) zet zelf 40px zijruimte. Op het bureaublad houdt dat de
     geneste blokken netjes binnen, mobiel telde het op bij de sectiemarge: de
     USP-vlakken op woningcorporaties stonden zo op 64 in plaats van 24. */
  body.brf:where(:not(.brf-gen)) .main .section .umb-block-grid__area-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Een referentieslider zet zijn tekst in een slick-slide; die had na het
     opruimen van de tussenlagen geen zijruimte meer en stond van rand tot
     rand. */
  /* De klasse staat er twee keer in: de opruimregel hierboven heeft door zijn
     :not() een hogere specificiteit, en die moet deze regel overstemmen. */
  body.brf:where(:not(.brf-gen)) .main .section .placeholder--content.placeholder--content.slick-slide,
  body.brf:where(:not(.brf-gen)) .main .section .slick-slide > .placeholder--content.placeholder--content,
  body.brf:where(:not(.brf-gen)) .main .section .slick-slide > .wrapper--content.wrapper--content {
    padding-left: var(--br-marge) !important;
    padding-right: var(--br-marge) !important;
  }
}
@media (max-width: 820px) {
  /* Quoteblok: alleen de variant met fullWidth loopt van rand tot rand. Staat
     die optie uit - en dat is op de meeste pagina's zo - dan is het blok ook
     op het bureaublad een kader, en dan hoort het mobiel ook een kader te
     blijven. De foto vult binnen dat kader nog steeds de hele slide, met de
     inzet eroverheen en de bediening eronder. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) {
    width: auto !important;
    margin-left: var(--br-marge) !important;
    margin-right: var(--br-marge) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: var(--br-r-lg) !important;
    overflow: hidden !important;
  }
  /* De tekst boven de carrousel op de kaderrand, niet op de paginalijn. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .quotes--placeholder > .placeholder--content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* De inzet ligt binnen het kader iets ruimer tegen de rand aan, anders
     stapelen drie inspringingen (pagina, kader, inzet) op elkaar en blijft er
     te weinig tekstbreedte over. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .content--box {
    padding: 20px !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .placeholder--carousel-controls {
    margin: 24px !important;
  }
}
@media (max-width: 820px) {
  /* De onderrand van het kader: de ondermarge van de bediening liep weg in de
     marge-samenvouw, waardoor de pijlen tegen de onderrand van het kader
     stonden. De ruimte komt nu van het kader zelf. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .placeholder--carousel.quotes {
    padding-bottom: 24px !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .placeholder--carousel-controls {
    margin: 24px 24px 0 !important;
  }
}
@media (max-width: 820px) {
  /* Variant om te bekijken: in het ingekaderde blok staat de foto als strook
     tussen de tekst bovenin en de quote-inzet eronder, in plaats van als
     achtergrond achter de hele slide. De verlopen boven en onder laten hem
     aan beide kanten in de bandkleur overlopen, zodat het geen los plaatje
     wordt maar een deel van het kader. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .carousel--item {
    display: block !important;
    position: relative !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image :is(picture, img) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: center !important;
       object-position: center !important;
  }
  /* Korter verloop dan bij de achtergrondvariant: die foto was hoog, deze is
     een strook, en met 34 + 40 procent bleef er nauwelijks open beeld over. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image::before {
    height: 20% !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#001539), color-stop(40%, rgba(0, 21, 57, 0.58)), to(rgba(0, 21, 57, 0))) !important;
    background: linear-gradient(180deg, #001539 0%, rgba(0, 21, 57, 0.58) 40%, rgba(0, 21, 57, 0) 100%) !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image::after {
    height: 26% !important;
    background: -webkit-gradient(linear, left bottom, left top, from(#001539), color-stop(40%, rgba(0, 21, 57, 0.62)), to(rgba(0, 21, 57, 0))) !important;
    background: linear-gradient(0deg, #001539 0%, rgba(0, 21, 57, 0.62) 40%, rgba(0, 21, 57, 0) 100%) !important;
  }
  /* De inzet staat nu onder de foto in plaats van eroverheen. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--content {
    padding: 8px 12px 0 !important;
  }
}
@media (max-width: 820px) {
  /* De foto liet boven en onder nog een randje zien. Een blauw verloop eróver
     leggen werkt hier niet goed: de band is niet egaal donkerblauw (er ligt
     een subtiel verloop in), dus zo'n overlay kan nooit precies kleuren. Nu
     vloeit de foto zelf uit met een masker: de bovenste en onderste rand
     worden doorzichtig, waardoor de echte bandkleur doorkomt en de foto er
     aan beide kanten in wegloopt. De overlays kunnen dus weg. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image::before,
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image::after {
    content: none !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image {
    overflow: visible !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image :is(picture, img) {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(7%, rgba(0, 0, 0, 0.18)), color-stop(16%, rgba(0, 0, 0, 0.62)), color-stop(28%, #000), color-stop(64%, #000), color-stop(80%, rgba(0, 0, 0, 0.66)), color-stop(92%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0))) !important;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 7%, rgba(0, 0, 0, 0.62) 16%, #000 28%, #000 64%, rgba(0, 0, 0, 0.66) 80%, rgba(0, 0, 0, 0.2) 92%, rgba(0, 0, 0, 0) 100%) !important;
    mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(7%, rgba(0, 0, 0, 0.18)), color-stop(16%, rgba(0, 0, 0, 0.62)), color-stop(28%, #000), color-stop(64%, #000), color-stop(80%, rgba(0, 0, 0, 0.66)), color-stop(92%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0))) !important;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 7%, rgba(0, 0, 0, 0.62) 16%, #000 28%, #000 64%, rgba(0, 0, 0, 0.66) 80%, rgba(0, 0, 0, 0.2) 92%, rgba(0, 0, 0, 0) 100%) !important;
  }
  /* Iets hoger, want de boven- en onderrand zijn nu deels doorzichtig. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--image {
    aspect-ratio: 1/1 !important;
  }
  /* En de inzet mag dan dichter tegen de foto aan, die heeft geen harde rand
     meer om ruimte van te houden. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .item--content {
    padding: 0 12px 0 !important;
  }
}
@media (max-width: 820px) {
  /* De aanhalingstekens hangen in het thema met margin:-32px buiten de
     tekstkolom; op het bureaublad is daar 34px padding voor gereserveerd. Die
     padding is mobiel weg (anders bleef er te weinig tekstbreedte over), dus
     hingen ze buiten de inzet. Ze staan nu gewoon in de tekstregel mee: het
     openingsteken voor het eerste woord, het sluitteken achter het laatste. */
  body.brf:where(:not(.brf-gen)) .main .section.quotes .content--box p.quote {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes .content--box p.quote::before {
    margin: 0 8px 4px 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes .content--box p.quote::after {
    margin: 0 0 -4px 8px !important;
  }
}
@media (max-width: 820px) {
  /* ==========================================================================
     Contactbanner (de full banner met een portret erin, meestal de afsluiter
     van de pagina). Mobiel stond de achtergrondfoto als los plaatje binnen de
     binnenruimte van het kader en was het portret verborgen. Nu: de foto ligt
     bovenin tegen de rand van het kader en vloeit naar de bandkleur uit, en
     het portret staat weer onderin, tegen de onderrand van de banner.
     ========================================================================== */
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:has(> .wrapper--full-banner-image.image-2) {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }
  /* de tekst houdt zijn eigen ruimte, want het kader heeft die niet meer */
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:has(> .wrapper--full-banner-image.image-2) > .full-banner--content {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
    grid-column: 1 !important;
    padding: 0 30px 24px !important;
  }
  /* achtergrondfoto bovenin, volle breedte, uitvloeiend naar de bandkleur */
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:has(> .wrapper--full-banner-image.image-2) > .wrapper--full-banner-image.image-1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:has(> .wrapper--full-banner-image.image-2) > .wrapper--full-banner-image.image-1 :is(picture, img) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(44%, #000), color-stop(74%, rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0))) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0) 100%) !important;
    mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(44%, #000), color-stop(74%, rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0))) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0) 100%) !important;
  }
  /* portret terug, gecentreerd en met zijn onderkant op de onderrand van de banner */
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:has(> .wrapper--full-banner-image.image-2) > .wrapper--full-banner-image.image-2 {
    display: block !important;
    -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
            order: 3 !important;
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: min(260px, 72%) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    align-self: end !important;
    z-index: 2 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:has(> .wrapper--full-banner-image.image-2) > .wrapper--full-banner-image.image-2 :is(picture, img) {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}
@media (max-width: 820px) {
  /* Losse quote (duurzaamheid, halverwege de pagina): dezelfde kwestie als in
     de carrousel, maar hier nog scherper. Het thema haalt mobiel de padding
     van 47px weg maar laat de negatieve marges van de aanhalingstekens staan,
     dus het openingsteken begon op -23px - buiten het scherm - en het
     sluitteken liep er rechts net zo ver uit. Ze staan nu in de tekstregel. */
  body.brf:where(:not(.brf-gen)) .main .section .placeholder--single-quote p.quote {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .placeholder--single-quote p.quote::before {
    margin: 0 10px 4px 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .placeholder--single-quote p.quote::after {
    margin: 0 0 -6px 10px !important;
  }
}
@media (max-width: 820px) {
  /* Een band met achtergrondkleur loopt mobiel van rand tot rand. Hij hield
     nog zijn eigen ronding, schaduw en een vaste breedte (100% - 32px, dus
     ook nog asymmetrisch), en met de witte tellerkaart erin zag je daardoor
     een kader binnen een kader op duurzaamheid. */
  body.brf:where(:not(.brf-gen)) .main .section.section.has--background-color {
    width: auto !important;
    max-width: none !important;
    border-radius: 0 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  /* De quoteband is de uitzondering: die is juist bewust wel een kader. */
  body.brf:where(:not(.brf-gen)) .main .section.section.quotes:not(.full-width) {
    border-radius: var(--br-r-lg) !important;
  }
}
/* Referentiepagina: de headertekst stond naar rechts geschoven (op 349 in
   plaats van 40) omdat de kolom van het thema op align-items:flex-end staat.
   Hij begint nu links, gelijk met de zwevende balk, de kaarten eronder en de
   rest van de pagina. */
/* Deze header stapelt bij het thema soms als kolom en op een breed scherm als
   rij, en in die twee richtingen betekenen align-items en justify-content
   precies het omgekeerde. Daarom zetten we de richting hier zelf vast: kolom,
   inhoud onderaan (zoals elke andere header) en links uitgelijnd op de
   contentlijn. De selector is even lang als de algemene heroregel plus
   .has-cards, anders wint hij het niet. */
body.brf:where(:not(.brf-gen)) .header.has-cards:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
  -webkit-box-align: start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}

/* ==========================================================================
   Tellers op een donkerblauwe band
   --------------------------------------------------------------------------
   Op een lichte band is de witte tellerkaart logisch: die geeft contrast. Op
   een donkerblauwe band levert hij een kader in een kader op (de band is zelf
   al een paneel met ronding en schaduw). Daar staan de tellers dus direct op
   de band, met witte cijfers en labels en een lichte scheidingslijn.
   ========================================================================== */
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .counters--placeholder,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .counters--placeholder {
  background: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border-radius: 0 !important;
}

/* De band is nu zelf het kader, dus de binnenruimte hoort dezelfde te zijn als
   in de witte kaart op de homepage: die is var(--br-pad) rondom. De sectie zet
   daarvoor zijn eigen boven- en ondermarge op nul en de tellers houden de
   marge van het kader; anders telden de sectiepadding (60px), de wrappermarge
   (40px) en de padding van de tellers (34px) bij elkaar op. Mobiel blijft de
   contentlijn gelden, dus daar niet. */
@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .main .section.has--background-color.donkerblauw:has(.wrapper--counters) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.has--background-color.donkerblauw:has(.wrapper--counters) .wrapper--counters {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .counters--placeholder,
  body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .counters--placeholder {
    padding: var(--br-pad) !important;
  }
}
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .placeholder--grid.counters .placeholder--content > p.heading-3,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .placeholder--grid.counters .placeholder--content > p.heading-3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}

body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .placeholder--grid.counters .placeholder--content :is(p, span, strong):not(.heading-3),
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .placeholder--grid.counters .placeholder--content :is(p, span, strong):not(.heading-3) {
  color: rgba(255, 255, 255, 0.76) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.76) !important;
}

/* De scheidingslijn tussen de tellers was donkerblauw en dus onzichtbaar. */
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .placeholder--grid.counters .grid--item + .grid--item::before,
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .placeholder--grid.counters .grid--item + .grid--item::before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(rgba(255, 255, 255, 0.24)), to(rgba(255, 255, 255, 0))) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)) !important;
}

/* Nog een laag onder dat kader-in-kader: die donkerblauwe tellerband werd
   nergens donkerblauw. Het thema verft die kleur bij een narrow-page sectie
   niet op de sectie zelf, en onze tellerkaart was wit - dus je zag een wit
   vlak in een leeg afgerond paneel met een schaduw. De sectie krijgt nu zelf
   de kleur die in de backend is gekozen; de tellers staan daar direct op. */
body.brf:where(:not(.brf-gen)) .main .section.has--background-color.donkerblauw:has(.wrapper--counters) {
  background: var(--br-navy) !important;
}

body.brf:where(:not(.brf-gen)) .main .section.has--background-color.licht:has(.wrapper--counters) {
  background: var(--br-licht) !important;
}

/* De tellericoontjes worden in blauw (#002664) getekend; op de donkerblauwe
   band zag je ze daardoor niet. Daar worden ze cyaan. */
body.brf:where(:not(.brf-gen)) .section.has--background-color.donkerblauw .placeholder--grid.counters .image--icon :is(path, circle, rect, line, polyline, polygon, ellipse),
body.brf:where(:not(.brf-gen)) .wrapper[class~="001539"] .placeholder--grid.counters .image--icon :is(path, circle, rect, line, polyline, polygon, ellipse) {
  stroke: var(--br-cyan) !important;
}

/* ==========================================================================
   Leesbaarheid over de quotefoto
   --------------------------------------------------------------------------
   De inzet met de quote en de bediening liggen over de foto van de referentie.
   Die foto is soms licht (een witte keuken), en dan vielen de witte tekst en
   de witte pijltjes weg. Beide krijgen nu een donkere glazen tint die op elke
   foto werkt: donkerblauw op iets meer dan de helft, met een lichte rand en
   een beetje blur zodat het geen dichte plaat wordt.
   ========================================================================== */
body.brf:where(:not(.brf-gen)) .section.quotes .content--box {
  background: rgba(0, 21, 57, 0.56) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26) !important;
          box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26) !important;
}

/* De vulling van de pijlknoppen zet het thema via de volledige keten
   (.placeholder--carousel-controls .controls--arrows button.slick-prev), dus
   die keten staat er hier ook voor - anders pakt hij alleen de ronding en de
   blur en blijft de knop doorzichtig. */
body.brf:where(:not(.brf-gen)) .section.quotes .controls--arrows button,
body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel .placeholder--carousel-controls .controls--arrows button,
body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel .placeholder--carousel-controls .controls--arrows button.slick-prev,
body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel .placeholder--carousel-controls .controls--arrows button.slick-next {
  background: rgba(0, 21, 57, 0.56) !important;
  background-color: rgba(0, 21, 57, 0.56) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
  -webkit-transition: background-color 0.2s var(--br-ease), border-color 0.2s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), border-color 0.2s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel .placeholder--carousel-controls .controls--arrows button:hover,
body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel .placeholder--carousel-controls .controls--arrows button:focus,
body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel .placeholder--carousel-controls .controls--arrows button.slick-prev:hover,
body.brf:where(:not(.brf-gen)) .section.quotes .placeholder--carousel .placeholder--carousel-controls .controls--arrows button.slick-next:hover {
  background-color: rgba(0, 21, 57, 0.84) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

/* De teller ernaast leest zo ook op een lichte foto. */
body.brf:where(:not(.brf-gen)) .br-quote-count,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .br-quote-count {
  text-shadow: 0 1px 10px rgba(0, 21, 57, 0.55) !important;
}

/* De vraagregel van een uitklapper (FAQ, USP) is geen leestekst maar een
   knopregel: het pijltje hangt met right:0 aan die alinea. Door de algemene
   leesbreedte van 66ch werd die alinea smaller dan het vlak en stond het
   pijltje ergens in het midden in plaats van rechts. */
body.brf:where(:not(.brf-gen)) .usps .usp .title p,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .usps .usp .title p,
body.brf:where(:not(.brf-gen)) .usps .usp .title,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .usps .usp .title {
  max-width: none !important;
}

/* De kaarten in de header van de referentiepagina hangen aan een eigen padding
   van 40px uit het thema. Die volgt nu de contentlijn, zodat ze op elke
   breedte even ver van de rand staan als de headertekst erboven. */
body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards {
  padding-left: var(--br-marge) !important;
  padding-right: var(--br-marge) !important;
}

/* ==========================================================================
   Entree van de tweede afbeelding in een banner (het portret / de cover)
   --------------------------------------------------------------------------
   Komt de banner in beeld, dan zakt die afbeelding van boven naar beneden op
   zijn plek terwijl hij invloeit. Alleen een entree dus, geen blijvend
   verloop: na de animatie staat het beeld gewoon zoals het stond. De klasse
   zet bribus-refresh.js, en alleen voor beelden die nog niet in beeld staan.
   ========================================================================== */
body.brf {
  --br-cover-val:48px;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner-image.image-2.br-cover {
  opacity: 0;
  -webkit-transform: translateY(calc(-1 * var(--br-cover-val)));
      -ms-transform: translateY(calc(-1 * var(--br-cover-val)));
          transform: translateY(calc(-1 * var(--br-cover-val)));
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner-image.image-2.br-cover.br-in {
  opacity: 1;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transition: opacity 0.8s var(--br-ease), -webkit-transform 0.8s var(--br-ease);
  transition: opacity 0.8s var(--br-ease), -webkit-transform 0.8s var(--br-ease);
  transition: opacity 0.8s var(--br-ease), transform 0.8s var(--br-ease);
  transition: opacity 0.8s var(--br-ease), transform 0.8s var(--br-ease), -webkit-transform 0.8s var(--br-ease);
}

@media (prefers-reduced-motion: reduce) {
  body.brf:where(:not(.brf-gen)) .wrapper--full-banner-image.image-2.br-cover {
    opacity: 1 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }
}
/* ==========================================================================
   Quote die inloopt, woord voor woord
   --------------------------------------------------------------------------
   Komt de quote in beeld (of wisselt de carrousel naar een volgende), dan
   verschijnen de woorden achter elkaar, alsof iemand het uitspreekt. De
   woorden worden door bribus-refresh.js in losse spans gezet; hier staat
   alleen hoe ze binnenkomen. Het sluitteken volgt na het laatste woord.
   ========================================================================== */
body.brf {
  --br-woord-stap:38ms;
}

body.brf:where(:not(.brf-gen)) .br-gesproken .br-woord {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateY(0.16em);
      -ms-transform: translateY(0.16em);
          transform: translateY(0.16em);
  will-change: opacity, transform;
}

body.brf:where(:not(.brf-gen)) .br-gesproken.br-zeg .br-woord {
  opacity: 1;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transition: opacity 0.42s var(--br-ease), -webkit-transform 0.42s var(--br-ease);
  transition: opacity 0.42s var(--br-ease), -webkit-transform 0.42s var(--br-ease);
  transition: opacity 0.42s var(--br-ease), transform 0.42s var(--br-ease);
  transition: opacity 0.42s var(--br-ease), transform 0.42s var(--br-ease), -webkit-transform 0.42s var(--br-ease);
  -webkit-transition-delay: calc(var(--br-w, 0) * var(--br-woord-stap));
          transition-delay: calc(var(--br-w, 0) * var(--br-woord-stap));
}

body.brf:where(:not(.brf-gen)) .br-gesproken::after {
  opacity: 0;
}

body.brf:where(:not(.brf-gen)) .br-gesproken.br-zeg::after {
  opacity: 1;
  -webkit-transition: opacity 0.4s var(--br-ease);
  transition: opacity 0.4s var(--br-ease);
  -webkit-transition-delay: calc(var(--br-wn, 0) * var(--br-woord-stap));
          transition-delay: calc(var(--br-wn, 0) * var(--br-woord-stap));
}

@media (prefers-reduced-motion: reduce) {
  body.brf:where(:not(.brf-gen)) .br-gesproken .br-woord,
  body.brf:where(:not(.brf-gen)) .br-gesproken::after {
    opacity: 1 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
/* ==========================================================================
   Blauwe sluiers in de hero afzwakken
   --------------------------------------------------------------------------
   Het thema legt drie navy verlopen over de herofoto: van boven naar beneden
   tot volledig #001539, een waas over de linkerhelft achter de tekst, en
   hetzelfde nog eens op de referentiepagina. Samen met onze eigen sluier werd
   de foto daardoor door en door blauw. Ze blijven staan - de witte tekst moet
   leesbaar zijn - maar als schaduw (navy richting zwart) en met minder dekking,
   zodat de foto zelf weer kleur heeft.
   ========================================================================== */
body.brf:where(:not(.brf-gen)) .header .header--background-image::after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, rgba(0, 21, 57, 0)), color-stop(58%, rgba(0, 21, 57, 0.3)), to(rgba(0, 21, 57, 0.74))) !important;
  background: linear-gradient(to bottom, rgba(0, 21, 57, 0) 8%, rgba(0, 21, 57, 0.3) 58%, rgba(0, 21, 57, 0.74) 100%) !important;
}

body.brf:where(:not(.brf-gen)) .header.attenuated-gradient .header--background-image::after {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, rgba(0, 21, 57, 0)), to(rgba(0, 21, 57, 0.68))) !important;
  background: linear-gradient(to bottom, rgba(0, 21, 57, 0) 45%, rgba(0, 21, 57, 0.68) 100%) !important;
}

/* De waas links moet aan de rand wél dekkend blijven: daar houdt de foto op en
   zonder dekking zie je die afsnede staan. Aan de rand dus volledig
   huisstijl-navy, precies de kleur van het vlak achter de header, en daarna
   snel uitlopen - zo dekt alleen die eerste strook af en kleurt niet de halve
   foto blauw. */
body.brf:where(:not(.brf-gen)) .header .header--outer-wrapper.bottom .header--inner-wrapper::before,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--background-image .header--outer-wrapper .header-inner-wrapper::before {
  /* Veel tussenstops: met drie stops zie je op een lichte foto (duurzaamheid)
     de sprong tussen twee dekkingen als een band staan. Deze reeks benadert
     een vloeiende curve, dus je ziet alleen donkerder worden, geen rand. */
  background: -webkit-gradient(linear, left top, right top, from(#001539), color-stop(3%, rgba(0, 21, 57, 0.94)), color-stop(7%, rgba(0, 21, 57, 0.78)), color-stop(12%, rgba(0, 21, 57, 0.6)), color-stop(18%, rgba(0, 21, 57, 0.44)), color-stop(25%, rgba(0, 21, 57, 0.31)), color-stop(33%, rgba(0, 21, 57, 0.21)), color-stop(42%, rgba(0, 21, 57, 0.13)), color-stop(52%, rgba(0, 21, 57, 0.07)), color-stop(62%, rgba(0, 21, 57, 0.03)), color-stop(74%, rgba(0, 21, 57, 0))) !important;
  background: linear-gradient(to right, #001539 0%, rgba(0, 21, 57, 0.94) 3%, rgba(0, 21, 57, 0.78) 7%, rgba(0, 21, 57, 0.6) 12%, rgba(0, 21, 57, 0.44) 18%, rgba(0, 21, 57, 0.31) 25%, rgba(0, 21, 57, 0.21) 33%, rgba(0, 21, 57, 0.13) 42%, rgba(0, 21, 57, 0.07) 52%, rgba(0, 21, 57, 0.03) 62%, rgba(0, 21, 57, 0) 74%) !important;
}

/* De herofoto vloeit bij het thema alleen aan de rechterkant uit (masker naar
   transparant); links houdt hij een harde rand. Op een breed scherm staat die
   rand middenin beeld, want de foto is daar gecentreerd met een maximum van
   1640px - daar zag je de afsnede. Het afdekken met een dekkende navy strook
   loste dat op, maar op een lichte foto (duurzaamheid) leest die strook als een
   donkere band. Dus laat de foto ook links uitvloeien, precies zoals rechts. */
body.brf:where(:not(.brf-gen)) .header .header--background-image .header--outer-wrapper .header-inner-wrapper img {
  /* Links even lang uitvloeien als rechts: het thema deed rechts 40% tot 100%,
     terwijl links op 14% al dekkend was. Dat zag je als een korte, harde kant
     tegenover een lange zachte. Nu loopt hij links van 0 tot 34% op. */
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(6%, rgba(0, 0, 0, 0.18)), color-stop(13%, rgba(0, 0, 0, 0.45)), color-stop(20%, rgba(0, 0, 0, 0.72)), color-stop(27%, rgba(0, 0, 0, 0.92)), color-stop(34%, #000), color-stop(52%, #000), color-stop(90%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))) !important;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 6%, rgba(0, 0, 0, 0.45) 13%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.92) 27%, #000 34%, #000 52%, rgba(0, 0, 0, 0.8) 90%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(6%, rgba(0, 0, 0, 0.18)), color-stop(13%, rgba(0, 0, 0, 0.45)), color-stop(20%, rgba(0, 0, 0, 0.72)), color-stop(27%, rgba(0, 0, 0, 0.92)), color-stop(34%, #000), color-stop(52%, #000), color-stop(90%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0))) !important;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 6%, rgba(0, 0, 0, 0.45) 13%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.92) 27%, #000 34%, #000 52%, rgba(0, 0, 0, 0.8) 90%, rgba(0, 0, 0, 0) 100%) !important;
}

/* De waas erboven hoeft dan niet meer dekkend te beginnen: hij zorgt alleen nog
   voor leesbaarheid van de tekst, niet voor het afdekken van een rand. */
body.brf:where(:not(.brf-gen)) .header .header--outer-wrapper.bottom .header--inner-wrapper::before,
body.brf:where(:not(.brf-gen)) .header.has-cards .header--background-image .header--outer-wrapper .header-inner-wrapper::before {
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 21, 57, 0.72)), color-stop(10%, rgba(0, 21, 57, 0.58)), color-stop(20%, rgba(0, 21, 57, 0.42)), color-stop(31%, rgba(0, 21, 57, 0.28)), color-stop(42%, rgba(0, 21, 57, 0.17)), color-stop(54%, rgba(0, 21, 57, 0.09)), color-stop(66%, rgba(0, 21, 57, 0.03)), color-stop(78%, rgba(0, 21, 57, 0))) !important;
  background: linear-gradient(to right, rgba(0, 21, 57, 0.72) 0%, rgba(0, 21, 57, 0.58) 10%, rgba(0, 21, 57, 0.42) 20%, rgba(0, 21, 57, 0.28) 31%, rgba(0, 21, 57, 0.17) 42%, rgba(0, 21, 57, 0.09) 54%, rgba(0, 21, 57, 0.03) 66%, rgba(0, 21, 57, 0) 78%) !important;
}

/* De herofoto begint op de hoogte van de zwevende balk en had daar een harde
   bovenrand. Aan de rechterkant is de foto door het masker half doorzichtig,
   dus daar zag je die rand als een lichtere strook tegen de headerkleur staan.
   Er komt een tweede masker bij dat de foto naar boven laat uitvloeien; de
   twee maskers worden doorsneden, zodat links-rechts blijft zoals het is.
   Kan een browser dat doorsnijden niet, dan telt hij ze op en verandert er
   niets - dan is het gewoon zoals het was. */
body.brf:where(:not(.brf-gen)) .header .header--background-image .header--outer-wrapper .header-inner-wrapper img {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 6%, rgba(0, 0, 0, 0.45) 13%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.92) 27%, #000 34%, #000 52%, rgba(0, 0, 0, 0.8) 90%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.35) 26px, rgba(0, 0, 0, 0.8) 60px, #000 104px) !important;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 6%, rgba(0, 0, 0, 0.45) 13%, rgba(0, 0, 0, 0.72) 20%, rgba(0, 0, 0, 0.92) 27%, #000 34%, #000 52%, rgba(0, 0, 0, 0.8) 90%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.35) 26px, rgba(0, 0, 0, 0.8) 60px, #000 104px) !important;
  -webkit-mask-composite: source-in;
  mask-composite: intersect !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100% !important;
}

/* Het thema legt in de hero vanaf 50vw een decoratief vlak over de rechterhelft:
   donkerblauw met de textuur van /images/overlay.jpg, met een masker erover. In
   deze hero gaf dat een lichtere tint met een harde rand rechtsboven. De textuur
   werd wel gemist, dus hij ligt nu aan de tekstkant: met screen telt alleen de
   lichte gloed op en blijft de foto zichtbaar, en het masker laat hem naar rechts
   uitlopen zonder rand. Hij blijft binnen het fotokader (hoogstens 1640px): op een
   breed scherm gaf hij anders naast de foto een lichtere strook met een harde rand. */
body.brf:where(:not(.brf-gen)) .header .header--background-image .header--outer-wrapper::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: max(0px, (100% - 1640px) / 2) !important;
  right: auto !important;
  width: calc(min(100%, 1640px) * 0.62) !important;
  height: auto !important;
  background: url("/images/overlay.jpg") left top/cover no-repeat !important;
  mix-blend-mode: screen !important;
  opacity: 0.6 !important;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(12%, #000), color-stop(45%, rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0))) !important;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(12%, #000), color-stop(45%, rgba(0, 0, 0, 0.55)), to(rgba(0, 0, 0, 0))) !important;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 100%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  -webkit-filter: none !important;
          filter: none !important;
}

/* Umbraco Forms in de vorm van het redesign. De formulieren hadden nog de
   themavorm: hoekige velden (8px) en een hoekige knop, terwijl elke andere knop
   op de site een pil is. Knop: dezelfde pil, kleur en schaduw als .button.
   Velden: zelfde ronding als de kaarten, op donkerblauw een lichte vulling
   zodat het veld zichtbaar is (zoals de dealerzoeker). */
body.brf:where(:not(.brf-gen)) .umbraco-forms-form :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]), select, textarea) {
  border-radius: 14px !important;
  -webkit-transition: border-color 0.18s var(--br-ease), background-color 0.18s var(--br-ease), -webkit-box-shadow 0.18s var(--br-ease) !important;
  transition: border-color 0.18s var(--br-ease), background-color 0.18s var(--br-ease), -webkit-box-shadow 0.18s var(--br-ease) !important;
  transition: border-color 0.18s var(--br-ease), box-shadow 0.18s var(--br-ease), background-color 0.18s var(--br-ease) !important;
  transition: border-color 0.18s var(--br-ease), box-shadow 0.18s var(--br-ease), background-color 0.18s var(--br-ease), -webkit-box-shadow 0.18s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .umbraco-forms-form :is(input, select, textarea):focus {
  outline: none !important;
  border-color: var(--br-cyan) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 159, 218, 0.22) !important;
          box-shadow: 0 0 0 3px rgba(0, 159, 218, 0.22) !important;
}

body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]), select, textarea) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

body.brf:where(:not(.brf-gen)) .umbraco-forms-form :is(button[type=submit], input[type=submit], .btn.primary) {
  border-radius: 999px !important;
  border: 1px solid var(--br-cyan-btn) !important;
  background: var(--br-cyan-btn) !important;
  color: #ffffff !important;
  padding: 13px 26px !important;
  height: auto !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  -webkit-box-shadow: 0 6px 18px rgba(0, 159, 218, 0.28) !important;
          box-shadow: 0 6px 18px rgba(0, 159, 218, 0.28) !important;
  -webkit-transition: background-color 0.2s var(--br-ease), border-color 0.2s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), border-color 0.2s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), border-color 0.2s var(--br-ease), box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), border-color 0.2s var(--br-ease), box-shadow 0.25s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .umbraco-forms-form :is(button[type=submit], input[type=submit], .btn.primary):is(:hover, :focus-visible) {
  background: var(--br-cyan-btn-hover) !important;
  border-color: var(--br-cyan-btn-hover) !important;
}

/* Elk donkerblauw vlak krijgt de textuur (/images/overlay.jpg), net als de
   hero, de banners en de quotes-band. Het smalle donkerblauwe paneel (de
   tellers op /duurzaamheid) en een donkerblauw kader binnen een rij hadden hem
   niet: het thema legde hem op .wrapper--counters, en die achtergrond staat in
   het redesign uit. Ook het vlak van de navigatie-overlay. */
body.brf .page-transition-overlay,
body.brf:where(:not(.brf-gen)) .main .section.has--background-color.donkerblauw.narrow-page,
body.brf:where(:not(.brf-gen)) .main .placeholder--content.has--background-color.donkerblauw:not(.donkerblauw .placeholder--content):not([class~="001539"] .placeholder--content) {
  background-image: url("/images/overlay.jpg") !important;
  background-size: cover !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
}

/* Op donkerblauw wordt een knop bij hover wit met blauwe tekst, zoals elke
   andere knop daar (banners, hero, donkerblauwe secties). */
body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form :is(button[type=submit], input[type=submit], .btn.primary):is(:hover, :focus-visible) {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--br-blue) !important;
  -webkit-box-shadow: 0 10px 26px rgba(0, 21, 57, 0.3) !important;
          box-shadow: 0 10px 26px rgba(0, 21, 57, 0.3) !important;
}

/* Voordelen uitgebreid (uitklapbaar). Dicht is alleen de titel zichtbaar, met
   vinkje en chevron; een klik zet .is-open (thema-JS) en toont inleiding en
   details. De iconen stonden in het thema in "Font Awesome 5 Pro", die de site
   niet laadt, waardoor ze onzichtbaar waren. De inleiding stond altijd open en
   het dichte detailblok hield 24px padding over. */
body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended .list--item p.heading-4::before,
body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended .list--item p.heading-4::after {
  font-family: "Font Awesome 6 Pro" !important;
  font-weight: 400 !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended .list--item:not(.is-open) > p:not(.heading-4) {
  display: none !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended .list--item.is-open > p:not(.heading-4) {
  margin-top: 24px !important;
}

body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended .list--item:not(.is-open) .details {
  padding-top: 0 !important;
}

/* De lijst had uit het thema 80px marge boven en onder; volgens het ruimtemodel
   40px boven, zoals elk element, en niets onder. */
body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended {
  margin: var(--br-el) 0 0 !important;
}

/* Referentieslider: rechtsboven en -onder schemerde de achtergrond door de
   afgeronde hoek. De foto zit in een slick-laag met translate3d, en Chrome
   knipt zo'n laag niet netjes op de ronding van een ouder met overflow:hidden.
   De binnenwrapper knipt nu zelf op dezelfde ronding; het masker dwingt dat ook
   voor de bewegende laag af. Niet op de sectie zelf, anders verdwijnt de schaduw. */
body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) > .section--wrapper {
  border-radius: inherit !important;
  overflow: hidden !important;
  isolation: isolate;
  -webkit-mask-image: radial-gradient(#fff, #000);
          mask-image: radial-gradient(#fff, #000);
}

/* Contactknoppen (mail en telefoon) op een lichte of witte banner: de pill was
   doorzichtig wit voor donkerblauw en dus onzichtbaar op licht, met zwarte tekst
   (/footer/keukens-voor-kantoren). Hier een witte pill met donkerblauwe tekst;
   bij hover cyaan met wit, zoals elke knop op licht. */
body.brf:where(:not(.brf-gen)) .main :is(.wrapper--full-banner:is(.licht, .wit), .section.full-banner:is(.licht, .wit) .wrapper--full-banner) .full-banner--content :is(a[href^=tel i], a[href^=mailto i]) {
  background: #ffffff !important;
  border-color: rgba(0, 21, 57, 0.14) !important;
  color: var(--br-navy) !important;
  -webkit-box-shadow: var(--br-shadow-sm) !important;
          box-shadow: var(--br-shadow-sm) !important;
}

body.brf:where(:not(.brf-gen)) .main :is(.wrapper--full-banner:is(.licht, .wit), .section.full-banner:is(.licht, .wit) .wrapper--full-banner) .full-banner--content :is(a[href^=tel i], a[href^=mailto i]):is(:hover, :focus-visible) {
  background: var(--br-cyan-btn) !important;
  border-color: var(--br-cyan-btn) !important;
  color: #ffffff !important;
}

/* Snelmenu als eigen rij (quickNavigationBlock met instellingen). In een kolom
   kwam de contentlijn uit de kolomopbouw; zelfstandig ontbrak die en liep de
   kaart van rand tot rand (vastgoedbeleggers). De wrapperlaag zet nu de
   contentlijn, zoals bij de andere blokken, en de oude inspring van 72px voor
   het snelmenu in een smalle kolom geldt hier niet: smal of niet, de kaart
   staat op dezelfde lijn als de banners. Mobiel zet de sectie zelf de marge. */
@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .main .section.quick-navigation:not(.section .section) > .section--wrapper > .wrapper--placeholder {
    margin-left: var(--br-marge) !important;
    margin-right: var(--br-marge) !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quick-navigation:not(.section .section) .placeholder--content:has(.quick--navigation) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Contactpersonen: de kaart rechts begon zonder de elementmarge en stond dus
   direct op de padding van de rij, 40px hoger dan elk ander blok. */
body.brf:where(:not(.brf-gen)) .wrapper--contact-persons > .contact-persons--placeholder:first-child {
  margin-top: var(--br-el) !important;
}

/* Mail en telefoon op een contactkaart (contactpersonenpagina en zoekpagina): onderstreept bij hover.
   De algemene regel voor links in kaarten (body.brf :is(.grid--item a, ...)) haalt die anders weg. */
body.brf:where(:not(.brf-gen)) .contact-persons .grid--item .placeholder--content a:is(:hover, :focus-visible) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Brede gekleurde banner (de band zelf is het vlak): de kop erin heeft geen
   marge, dus hier de volle ruimte boven en niet --br-space-top, anders stond
   de tekst 40px dichter bij de bovenrand dan bij de onderrand. Onder 1025px
   staat de foto bovenaan en blijft de bestaande regel (padding-top 0). */
@media (min-width: 1025px) {
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color:not(.narrow-page) {
    padding-top: var(--br-space) !important;
  }
}
/* Formuliervelden op donkerblauw: tekst en placeholder wit, zoals bij de
   dealerzoeker, anders kon getypte tekst navy op navy worden. */
body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]), select, textarea) {
  color: #ffffff !important;
}

body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form :is(input, textarea)::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form :is(input, textarea)::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form :is(input, textarea):-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form :is(input, textarea)::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form :is(input, textarea)::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.brf:where(:not(.brf-gen)) :is(.donkerblauw, [class~="001539"]) .umbraco-forms-form option {
  color: var(--br-navy) !important;
}

/* Hero op binnenpagina's: tussen 768 en 1024px lijnde het thema het tekstblok
   rechts uit: daar is de header een kolom, en dan zet de algemene heroregel
   (align-items:flex-end, bedoeld voor "onderaan" in een rij) de tekst rechts.
   De titel begon op een derde van het scherm (900px: x=225). Net als bij de
   kaartenheader zetten we de richting vast: kolom, onderaan, links. Zelfde
   selector als de algemene regel, zodat hij op volgorde wint. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
  }
}
/* Het snelmenu is een paneel (witte kaart) en begint dus niet met een eigen
   marge; zoals elk paneel krijgt het --br-el, anders stond de kaart direct op
   de padding van de rij (vastgoedbeleggers: 46 in plaats van 86). */
body.brf:where(:not(.brf-gen)) .main .section.quick-navigation:not(.section .section) > .section--wrapper > .wrapper--placeholder:not(#brf) {
  margin-top: var(--br-el) !important;
}

/* Kop-rij: een rij met alleen een kop (en hooguit één intro) boven een rij in
   dezelfde kleur hoort bij die rij. Daartussen de elementmarge (40), niet de
   rijruimte; de JS zet br-na-koprij op de onderste rij. */
body.brf:where(:not(.brf-gen)) .main .br-na-koprij.br-na-koprij:not(#brf) {
  padding-top: 0 !important;
}

/* Bribus GEN heeft een eigen opmaak. De donkerblauwe banner met foto ("Heeft u
   vragen over Bribus GEN?") hoort daar zoals op de live site: de foto over het
   hele paneel met het verloop van het thema links eroverheen, de tekst op de
   linkerhelft en een ronding van 16px. Het redesign zette de foto in een eigen
   kolom rechts, waardoor de uitgesneden foto van Dave wegviel. Alleen boven
   1024px; daaronder staat ook live de foto in een kolom of erboven. */
@media (min-width: 1025px) {
  body.brf:where(:not(.brf-gen)):has(.header.bribus-gen) .main .wrapper--full-banner.has--background-color:has(> .wrapper--full-banner-image.image-1) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    position: relative !important;
    border-radius: 16px !important;
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.brf:where(:not(.brf-gen)):has(.header.bribus-gen) .main .wrapper--full-banner.has--background-color:has(> .wrapper--full-banner-image.image-1) > .full-banner--content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    width: 50% !important;
    max-width: none !important;
    padding: 60px 80px 80px !important;
  }
  body.brf:where(:not(.brf-gen)):has(.header.bribus-gen) .main .wrapper--full-banner.has--background-color > .wrapper--full-banner-image.image-1 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body.brf:where(:not(.brf-gen)):has(.header.bribus-gen) .main .wrapper--full-banner.has--background-color > .wrapper--full-banner-image.image-1 :is(picture, img) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    border-radius: 0 !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }
}
/* Tekstbreedtes zoals op de live site (feedback Sophie, 14 okt): titels liepen
   over meer regels dan live.
   - Hero op binnenpagina's: live is het tekstblok de helft van de
     contentbreedte (673px op 1440, 800px op 1920); hier stond het vast op 620.
     Nooit smaller dan 620. De homepage-slider houdt 620 (live is die 471).
   - Brede banner met de foto als achtergrond: het tekstvak kreeg de
     paneelruimte van 48px links en rechts, waardoor de tekst 351 i.p.v. 448px
     breed werd. Live is die ruimte 0. Onder 1025px staat de foto boven de tekst
     en blijft de ruimte.
   - Banner met twee teksten (Keukenportaal): de teksten kregen elk 25%; live is
     het 30% - 30% met de foto in de rest. De tweede tekst heeft live 20px
     binnenruimte, zodat hij niet op drie regels breekt. */
body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .wrapper--content {
  max-width: max(var(--br-hero-tekst), 50%) !important;
}

@media (min-width: 1025px) {
  body.brf:where(:not(.brf-gen)) .main .section.full-banner:not(.narrow-page) .wrapper--full-banner > .full-banner--content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
body.brf:where(:not(.brf-gen)) .wrapper--full-banner.image-position-right.with-image-2.with-second-text:not(.second-image-offset):not(.downloads-banner) {
  grid-template-columns: 30% 30% 40% !important;
}

body.brf:where(:not(.brf-gen)) .wrapper--full-banner.with-second-text > .full-banner--content + .full-banner--content {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Herotekst op binnenpagina's iets beter leesbaar (14 okt): het tekstblok is
   breder geworden (de helft van de contentbreedte), en het verloop links liep
   al op 78% van een halve breedte uit, waardoor de rechterkant van de regels
   kaal op de foto stond (op een lichte foto zoals woningcorporaties slecht
   leesbaar). Het verloop loopt nu verder door, en er ligt een zachte radiale
   gloed achter het tekstblok, die naar alle kanten uitvloeit en dus geen
   rand laat zien. Alleen boven 1024px, waar de tekst over de foto staat. */
@media (min-width: 1025px) {
  body.brf:where(:not(.brf-gen)) .header:not(.homepage) .header--outer-wrapper.bottom .header--inner-wrapper::before {
    width: 68% !important;
    background: radial-gradient(ellipse 62% 58% at 30% 66%, rgba(0, 21, 57, 0.5) 0%, rgba(0, 21, 57, 0.3) 40%, rgba(0, 21, 57, 0.1) 70%, rgba(0, 21, 57, 0) 100%), -webkit-gradient(linear, left top, right top, from(rgba(0, 21, 57, 0.72)), color-stop(10%, rgba(0, 21, 57, 0.58)), color-stop(22%, rgba(0, 21, 57, 0.42)), color-stop(34%, rgba(0, 21, 57, 0.28)), color-stop(46%, rgba(0, 21, 57, 0.17)), color-stop(58%, rgba(0, 21, 57, 0.09)), color-stop(70%, rgba(0, 21, 57, 0.03)), color-stop(82%, rgba(0, 21, 57, 0))) !important;
    background: radial-gradient(ellipse 62% 58% at 30% 66%, rgba(0, 21, 57, 0.5) 0%, rgba(0, 21, 57, 0.3) 40%, rgba(0, 21, 57, 0.1) 70%, rgba(0, 21, 57, 0) 100%), linear-gradient(to right, rgba(0, 21, 57, 0.72) 0%, rgba(0, 21, 57, 0.58) 10%, rgba(0, 21, 57, 0.42) 22%, rgba(0, 21, 57, 0.28) 34%, rgba(0, 21, 57, 0.17) 46%, rgba(0, 21, 57, 0.09) 58%, rgba(0, 21, 57, 0.03) 70%, rgba(0, 21, 57, 0) 82%) !important;
  }
}
/* Quotes: de naam onder de quote stond links van het midden. De algemene
   regellengte (max-width:66ch op alinea's) maakte hem een blok van ~590px dat
   links begon, met de tekst daarbinnen gecentreerd. In een quoteblok staat alles
   gecentreerd, dus daar geen maximale breedte (feedback Sophie, 14 okt). */
body.brf:where(:not(.brf-gen)) .wrapper--quote .placeholder--single-quote p {
  max-width: none !important;
}

/* Filterknoppen op /referenties (Kies categorie): nog de themavorm, hoekig met
   een rand van 2px. Nu dezelfde pil als de andere knoppen op de site
   (feedback Sophie, 14 okt). Actief en hover: cyaan met witte tekst. */
body.brf:where(:not(.brf-gen)) .filters .filter .filter--buttons .btn-filter,
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .filters .filter .filter--buttons .btn-filter {
  border-radius: 999px !important;
  border: 1px solid var(--br-cyan-btn) !important;
  padding: 11px 22px !important;
  font-weight: 600 !important;
  color: var(--br-navy) !important;
  background: #ffffff !important;
  -webkit-transition: background-color 0.2s var(--br-ease), color 0.2s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), color 0.2s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), color 0.2s var(--br-ease), box-shadow 0.25s var(--br-ease) !important;
  transition: background-color 0.2s var(--br-ease), color 0.2s var(--br-ease), box-shadow 0.25s var(--br-ease), -webkit-box-shadow 0.25s var(--br-ease) !important;
}

body.brf:where(:not(.brf-gen)) .filters .filter .filter--buttons .btn-filter:is(:hover, :focus-visible, .active, [aria-pressed=true]),
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) .filters .filter .filter--buttons .btn-filter:is(:hover, :focus-visible, .active, [aria-pressed=true]) {
  background: var(--br-cyan-btn) !important;
  color: #ffffff !important;
  -webkit-box-shadow: 0 6px 18px rgba(0, 159, 218, 0.28) !important;
          box-shadow: 0 6px 18px rgba(0, 159, 218, 0.28) !important;
}

/* Herotekst op tablet en mobiel: bij een lange tekst (vastgoedbeleggers) plakte
   de titel tegen de zwevende balk (0px ruimte); live staat hij daar ~46px onder
   de balk. Op desktop blijft de hero op elke pagina even hoog (Sander, 15 okt:
   gelijke hoogtes gaan voor), daar is niets veranderd. */
@media (max-width: 1024px) {
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper {
    padding-top: calc(var(--br-hero-boven) + clamp(48px, 8vh, 80px)) !important;
  }
}
/* Bribus GEN: de pagina heeft een donkere achtergrond, ook waar de band in de
   backoffice op wit staat. Een wit paneel is daar dus een zichtbare kaart en
   houdt zijn binnenruimte, zoals in het thema en op de live site; de regel
   hierboven die een wit paneel als onzichtbaar behandelt, gaat hier niet op
   (feedback Sophie, 14 okt: de tekst stond tegen de rand van het witte blok). */
body.brf:where(:not(.brf-gen)):has(.header.bribus-gen) .placeholder--content.wit:has(.rich-text) {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Bribus GEN, banner met het contactformulier: de afbeelding (het GEN-logo in
   neon, liggend) werd met object-fit:cover in het hoge vak bijgesneden en zoomde
   zo ~40% in; de N viel weg. Op de live site staat hij op contain: de hele
   afbeelding, met de donkere achtergrond erboven en eronder (feedback Sophie,
   14 okt). */
body.brf:where(:not(.brf-gen)):has(.header.bribus-gen) .wrapper--full-banner:has(.umbraco-forms-form) .wrapper--full-banner-image :is(img, picture img) {
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: center !important;
     object-position: center !important;
}

/* Donkere laatste rij loopt naadloos over in de footer (feedback Sophie, 14 okt;
   gebruiksadvies, tijdlijn, over-bribus, Bribus GEN). De JS zet br-donker-einde
   als de laatste rij werkelijk een donkere achtergrond heeft, en geeft die kleur
   mee als --br-einde-kleur. Dan: geen overlap met oren (die tekenden zich af in
   de donkere rij), de footer begint in de kleur van de rij en zijn eigen verloop
   vloeit daar zacht overheen in, en de rij heeft alleen zijn gewone ruimte
   onder. Op Bribus GEN is de footer doorzichtig, zodat de GEN-achtergrond (sterren
   en blad) gewoon doorloopt, zoals op de live site. */
body.brf.br-donker-einde .footer {
  margin-top: 0 !important;
  background: var(--br-einde-kleur, #001539) !important;
}

body.brf.br-donker-einde .footer::before {
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 clamp(160px, 16vw, 260px)) !important;
  mask: linear-gradient(to bottom, transparent 0, #000 clamp(160px, 16vw, 260px)) !important;
}

body.brf:where(:not(.brf-gen)).br-donker-einde .main .br-footerruimte.br-footerruimte {
  padding-bottom: var(--br-space) !important;
}

body.brf.br-donker-einde-gen .footer {
  background: transparent !important;
}

body.brf.br-donker-einde-gen .footer::before {
  content: none !important;
}

/* Taalvlaggen (taalselectie in de header van o.a. gebruiksadvies): de vlaggen
   stonden op /Themes/3133/Flags, een pad dat deze codebase niet meer serveert
   (ook live een 404, dus alleen de alt-tekst zichtbaar). Ze staan nu in
   /images/flags. De vlaggen hebben verschillende verhoudingen (2:1 en 3:2),
   dus hier allemaal even groot. */
body.brf:where(:not(.brf-gen)) img[src*="/images/flags/"],
body.brf.brf-gen :where(.footer, .copyright, .header--outer-wrapper.top, nav.mobile, .page-transition-overlay) img[src*="/images/flags/"] {
  width: 30px !important;
  height: 20px !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  border-radius: 3px !important;
  -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Ingesloten media in rich-text (Google Maps op /advies-contact/contact, video's,
   afbeeldingen): die staan in een <p> en kregen zo de leesbreedte van 66ch mee,
   waardoor de kaart smaller was dan zijn kolom. De leesbreedte is voor tekst;
   een alinea met een iframe, video of afbeelding mag de hele kolom vullen. */
body.brf:where(:not(.brf-gen)) .section--wrapper p:not(.button):not([class*=heading]):has(> :is(iframe, video, embed, object, img, picture)) {
  max-width: none;
}

/* Banner met de foto links (o.a. "Versterk ons team" op over-bribus): het thema
   laat die foto mobiel beginnen op 50% zichtbaarheid en verder vervagen, waardoor
   hij nauwelijks te zien was (feedback Sophie, 14 okt). Een banner met de foto
   rechts of in het midden krijgt mobiel een volle foto die pas onderaan in de
   bandkleur overloopt. Foto links nu hetzelfde. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .section.image-position-left .wrapper--full-banner-image img {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(80%, transparent)) !important;
    -webkit-mask-image: linear-gradient(#000 0%, transparent 80%) !important;
    mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(80%, transparent)) !important;
    mask-image: linear-gradient(#000 0%, transparent 80%) !important;
  }
}
/* Banner als laatste rij, met "foto links" ingesteld ("Versterk ons team" op
   over-bribus; feedback Sophie, 14 okt). Die opbouw legt de foto over de hele
   kaart met een donker verloop vanaf links, en zet de tekst links. Met de foto
   links verdwenen de mensen op de foto dus precies onder het donkerste deel.
   Bij foto links nu gespiegeld, zoals live: de foto vult de linkerkant en
   vervaagt naar rechts (het thema), de tekst staat in de rechterhelft op het donkere vlak,
   en het verloop loopt aan de fotokant helemaal open. Foto rechts blijft zoals
   hij was. Mobiel staat de foto boven de tekst en verandert er niets. */
@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner.image-position-left > .wrapper--full-banner-image.image-1 {
    right: auto !important;
    width: 62% !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner.image-position-left > .full-banner--content {
    justify-self: end !important;
    width: 50% !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner.image-position-left.donkerblauw::after {
    background: linear-gradient(260deg, rgba(0, 21, 57, 0.96) 0%, rgba(0, 21, 57, 0.9) 40%, rgba(0, 21, 57, 0.45) 58%, rgba(0, 21, 57, 0) 78%) !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section:last-child:not(.has--background-color) .wrapper--full-banner.image-position-left:not(.donkerblauw)::after {
    background: linear-gradient(260deg, rgba(var(--br-licht-rgb), 0.96) 0%, rgba(var(--br-licht-rgb), 0.9) 40%, rgba(var(--br-licht-rgb), 0.45) 58%, rgba(var(--br-licht-rgb), 0) 78%) !important;
  }
}
/* Donkerblauwe tellerband met een kop ("Feiten & cijfers." op
   /footer/nederlands-keukenfabricaat; feedback Sophie, 14 okt). De band is
   zelf het kader en de tellers krijgen daarin var(--br-pad) rondom, maar de
   rij met de kop staat erboven en kreeg niets: de kop stond tegen de linkerrand
   van het paneel. Die rij krijgt nu dezelfde binnenruimte (boven min de marge
   van de kop zelf), en de tellers sluiten er met de gewone 40px op aan in
   plaats van met nog een kaderpadding. Zonder kop wordt die rij niet
   getekend en verandert er niets. */
@media (min-width: 821px) {
  body.brf:where(:not(.brf-gen)) .main .section.has--background-color.donkerblauw:has(.wrapper--counters) .wrapper--counters > .row {
    padding: calc(var(--br-pad) - var(--br-el)) var(--br-pad) 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.has--background-color.donkerblauw .wrapper--counters:has(> .row) > .counters--placeholder {
    padding-top: 0 !important;
  }
}
/* Koppen waarin een woord niet past (de JS zet dan br-afbreken): afbreken met
   een streepje, op de Nederlandse lettergrepen (html lang="nl"). Vindt de
   browser geen afbreekpunt, dan breekt overflow-wrap het woord als laatste
   redmiddel, zodat het nooit buiten zijn kolom loopt. "anywhere" en niet
   "break-word": alleen dan telt het ook in een flex-opbouw (de voordelen met
   vinkje op woningcorporaties). Geldt voor elke kop. */
body.brf:where(:not(.brf-gen)) .br-afbreken {
  -ms-hyphens: auto !important;
      hyphens: auto !important;
  overflow-wrap: anywhere !important;
}

/* Formulierknoppen breken net als de linkknoppen over twee regels als de tekst
   niet past. Het thema zette ze op nowrap, waardoor "Duurzaamheidsverslag
   aanvragen" op mobiel de hele knop vulde en de binnenruimte wegviel. */
body.brf:where(:not(.brf-gen)) .umbraco-forms-form :is(button, input[type=submit], .btn) {
  white-space: normal !important;
  height: auto !important;
  max-width: 100% !important;
}

/* ==========================================================================
   Navigatie-overlay (zoals op dijkmancoating.nl). Bij een klik op een interne
   link legt de core-JS (navigationOverlay.js) een vlak over de pagina en gaat
   na 200ms naar de nieuwe pagina; daar verdwijnt het weer. In het vlak pulst
   het Bribus-beeldmerk, wit op donkerblauw met de textuur van de hero (de
   gedeelde regel voor donkerblauwe vlakken). De puls loopt door van de ene pagina naar de andere
   (--br-overlay-since, gezet in de head van Master.cshtml) en wordt altijd
   afgemaakt: het vlak verdwijnt pas als de B weer op zijn rustpunt staat
   (bribus-refresh.js). De core-stijlen (core.css) zijn in deze codebase leeg,
   dus de basis staat hier ook.
   ========================================================================== */
/* De kleur onder de textuur is het gemiddelde van overlay.jpg. Op de nieuwe
   pagina is die afbeelding bij de eerste frame vaak nog niet getekend; met
   het egale navy eronder (donkerder) flitste het vlak dan even. Om dezelfde
   reden staat de B hier inline in plaats van als los bestand. */
body.brf {
  --br-overlay-kleur:#192148;
  --br-overlay-b-kleur:#ffffff;
  --br-overlay-puls:1100ms;
}

body.brf .page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647 !important;
  background-color: var(--br-overlay-kleur);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease-in-out, visibility 0.25s;
  transition: opacity 0.25s ease-in-out, visibility 0.25s;
}

body.brf .page-transition-overlay.overlay-hidden {
  opacity: 0;
  visibility: hidden;
}

body.brf .page-transition-overlay.instant {
  -webkit-transition: none !important;
  transition: none !important;
}

body.brf .page-transition-overlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  background: var(--br-overlay-b-kleur);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='69.8 0 46.2 46.2'%3E%3Cg fill='%23009fda'%3E%3Cpath d='M76.661,6.719c-4.213,4.187-6.821,9.986-6.821,16.395,0,12.765,10.349,23.114,23.114,23.114s23.114-10.349,23.114-23.114S105.72,0,92.954,0c-4.337,0-8.395,1.194-11.863,3.273l.023,8.669c2.967-3.146,7.174-5.11,11.84-5.11,8.986,0,16.271,7.285,16.271,16.271s-7.285,16.271-16.271,16.271-16.271-7.285-16.271-16.271l-.022-16.383h0Z'/%3E%3Cpath d='M104.746,23.114c0-6.513-5.279-11.792-11.792-11.792s-11.792,5.279-11.792,11.792,5.28,11.792,11.792,11.792,11.792-5.28,11.792-11.792h0Zm-5.215,0c0,3.632-2.945,6.576-6.577,6.576s-6.576-2.944-6.576-6.576,2.944-6.576,6.576-6.576,6.577,2.944,6.577,6.576h0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='69.8 0 46.2 46.2'%3E%3Cg fill='%23009fda'%3E%3Cpath d='M76.661,6.719c-4.213,4.187-6.821,9.986-6.821,16.395,0,12.765,10.349,23.114,23.114,23.114s23.114-10.349,23.114-23.114S105.72,0,92.954,0c-4.337,0-8.395,1.194-11.863,3.273l.023,8.669c2.967-3.146,7.174-5.11,11.84-5.11,8.986,0,16.271,7.285,16.271,16.271s-7.285,16.271-16.271,16.271-16.271-7.285-16.271-16.271l-.022-16.383h0Z'/%3E%3Cpath d='M104.746,23.114c0-6.513-5.279-11.792-11.792-11.792s-11.792,5.279-11.792,11.792,5.28,11.792,11.792,11.792,11.792-5.28,11.792-11.792h0Zm-5.215,0c0,3.632-2.945,6.576-6.577,6.576s-6.576-2.944-6.576-6.576,2.944-6.576,6.576-6.576,6.577,2.944,6.577,6.576h0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}

body.brf .page-transition-overlay:not(.overlay-hidden)::before {
  -webkit-animation: br-b-puls var(--br-overlay-puls) ease-in-out var(--br-overlay-since, 0ms) infinite;
          animation: br-b-puls var(--br-overlay-puls) ease-in-out var(--br-overlay-since, 0ms) infinite;
}

html.br-overlay-door body.brf .page-transition-overlay::before {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@-webkit-keyframes br-b-puls {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.86);
            transform: scale(0.86);
    opacity: 0.7;
  }
}

@keyframes br-b-puls {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.86);
            transform: scale(0.86);
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.brf .page-transition-overlay:not(.overlay-hidden)::before {
    -webkit-animation: none !important;
            animation: none !important;
  }
}
/* Downloadkaart zonder afbeelding (gebruiksadvies): de tekst stond 10px van de
   linkerrand, de ruimte die met afbeelding rond de foto hoort. Zonder foto
   links dezelfde 20px als rechts. */
body.brf:where(:not(.brf-gen)) .placeholder--grid.downloads > .grid--item:not(:has(.placeholder--image)) {
  padding-left: 20px !important;
}

/* Quoteband over de volle breedte (o.a. /zakelijk en de homepage) op tablet en
   mobiel: kop, tekst en knop stonden tegen de schermrand en de slider plakte
   direct onder de knop. De binnenruimte op de tekst (hierboven) werd door de
   algemene regel voor tussenlagen weer op 0 gezet. Op desktop is de foto een
   afgeronde kaart op de contentlijn; gestapeld nu net zo: de hele band op de
   contentlijn, en de slider op de gewone elementmarge onder de knop. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width > .section--wrapper > .wrapper--quotes {
    padding-left: var(--br-marge) !important;
    padding-right: var(--br-marge) !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width .quotes--placeholder > .placeholder--carousel {
    margin-top: var(--br-el) !important;
  }
}
/* Banner met achtergrondkleur, gestapeld (tablet en mobiel): het thema legt bij
   "foto in het midden" een verloop naar 80% donkerblauw over de foto. Op desktop
   ligt de foto over de hele band en loopt dat verloop mooi uit; gestapeld staat
   de foto als blok boven de tekst en stopte het verloop hard op de onderrand
   ("Mens & omgeving" op /duurzaamheid). De foto vervaagt daar zelf al naar de
   bandkleur, dus het verloop vervalt, voor elke fotopositie. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color > .wrapper--full-banner-image.image-1::before {
    content: none !important;
    background: none !important;
  }
}
/* Tellers op tablet (twee bij twee): de scheidingslijn werd daar een lijn aan
   de bovenkant van de tweede, derde en vierde teller, dus ook boven de
   rechterteller in de bovenste rij. Op tablet geen lijnen; op mobiel, waar de
   tellers onder elkaar staan, blijven ze als scheiding tussen de tellers. */
@media (min-width: 577px) and (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .placeholder--grid.counters .grid--item + .grid--item::before {
    content: none !important;
  }
}
/* Formulieren beginnen op de gewone elementmarge onder de tekst erboven, net
   als elk ander element. Het formulier in een kolom (/werken-bij) had geen
   marge en stond 12px onder de kop; die 12px was de ruimte tussen de velden
   die ook boven het eerste veld viel. In de banners kwam diezelfde 12px
   bovenop de marge (52 in plaats van 40). Nu overal precies --br-el. */
/* De velden hebben 12px ruimte boven (thema). De eerste rij velden schuift
   daarom 12px op; zo staan ook twee velden naast elkaar op één lijn (eerder
   kreeg alleen het eerste veld 0 en stond het tweede 12px lager). */
body.brf:where(:not(.brf-gen)) .umbraco-forms-page > .umbraco-forms-fieldset:first-child {
  margin-top: -12px !important;
}

body.brf:where(:not(.brf-gen)) .main .umb-block-grid__area > .form:not(:first-child) {
  margin-top: var(--br-el) !important;
}

/* Donkere laatste rij met foto (o.a. "Versterk ons team" op /over-bribus als
   band over de volle breedte): de laatste rij heeft geen ::after (hierboven,
   voor de footer met oren), waardoor het verloop van het thema onderaan de
   band wegviel en de foto hard op de footer stopte. Loopt de rij naadloos in de
   footer over, dan hoort dat verloop er juist bij, op elke breedte: het loopt
   uit in precies de kleur waarmee de footer begint, anders zie je op tablet en
   mobiel de naad tussen de textuur van de band en het egale begin van de footer.
   Niet op Bribus GEN: daar is de footer doorzichtig en loopt de achtergrond door. */
body.brf:where(:not(.brf-gen)).br-donker-einde:not(.br-donker-einde-gen) .main > .section.has--background-color:last-child:not(.narrow-page)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  height: 100px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 21, 57, 0)), to(var(--br-einde-kleur, #001539))) !important;
  background: linear-gradient(to bottom, rgba(0, 21, 57, 0) 0%, var(--br-einde-kleur, #001539) 100%) !important;
}

/* Vinkjeslijst (ul.checklist, o.a. bovenin woningcorporaties): het thema zet
   elk punt als flex met wrap. Was de tekst breder dan wat naast het vinkje
   past, dan sprong de hele tekst naar de regel eronder en stond het vinkje
   alleen (mobiel bij alle punten, op tablet bij het langste). Nu blijft het
   vinkje altijd naast de tekst, die ernaast over meer regels doorloopt. */
body.brf:where(:not(.brf-gen)) ul.checklist > li {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
}

body.brf:where(:not(.brf-gen)) ul.checklist > li > * {
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

body.brf:where(:not(.brf-gen)) ul.checklist > li::before {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Uitgebreide voordelen (woningcorporaties): het thema zet de twee kolommen
   vanaf 768px naast elkaar, waardoor ze op tablet smal werden (297px). Tot en
   met 820px, het breekpunt waarop de site ook andere kolommen stapelt, staan
   ze onder elkaar over de volle breedte. De ruimte tussen de kolommen is gelijk
   aan die tussen de punten (40px); mobiel was dat eerst 20px tussen de laatste
   van links en de eerste van rechts. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    -webkit-box-align: stretch !important;
        -ms-flex-align: stretch !important;
            align-items: stretch !important;
    row-gap: var(--br-voordeel-ruimte) !important;
  }
  body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended .column {
    -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 auto !important;
            flex: 0 0 auto !important;
    width: 100% !important;
  }
}
/* Ruimte tussen de uitgebreide voordelen: 24px in plaats van 40px (keuze 15
   okt), op elke breedte, binnen een kolom en tussen gestapelde kolommen. */
body.brf {
  --br-voordeel-ruimte:24px;
}

body.brf:where(:not(.brf-gen)) .placeholder--list.benefits-extended .column {
  gap: var(--br-voordeel-ruimte) !important;
}

/* Whitepaperbanner (cover over de foto, o.a. woningcorporaties en
   vastgoedbeleggers) op tablet en mobiel: de cover stond klein onder het
   formulier (260px breed), terwijl hij op desktop groot over de foto ligt.
   Gestapeld nu net zo: de cover ligt groot over de foto bovenin, met de
   onderkant op de onderrand van de foto. De contactbanners met een portret
   onderin hebben deze variant niet en blijven zoals ze zijn. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset {
    position: relative !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-2 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16/10 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 28px 28px 0 !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
    z-index: 2 !important;
    overflow: visible !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-2 picture {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
    width: 100% !important;
    height: 100% !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-2 img {
    position: static !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    -o-object-position: center bottom !important;
       object-position: center bottom !important;
  }
}
/* Het thema verbergt de tweede afbeelding van een smalle banner tussen 821 en
   1100px. Bij de whitepaperbanner is dat de cover, die hoort er net als op
   desktop bij: daar ligt hij over de foto in de rechterkolom. */
@media (min-width: 821px) and (max-width: 1100px) {
  body.brf:where(:not(.brf-gen)) .main .section .wrapper--full-banner:not(.downloads-banner).with-image-2.second-image-offset > .wrapper--full-banner-image.image-2 {
    display: block !important;
  }
}
/* Tekst in een slider (slick-slide) op tablet en mobiel. De opruimregel voor
   tussenlagen kreeg er een :not(.grid--item *) bij (kaarten houden hun
   binnenruimte) en werd daardoor sterker dan de regel die de tekst in een
   slide zijn zijruimte geeft; kop en knop stonden weer tegen de rand. Zelfde
   regel, met dezelfde :not() erbij, zodat hij weer wint.
   In de ingekaderde quotekaart (o.a. "318 Bribus-keukens voor het
   Rivierenhuis") staan kop, tekst en knop op 24px van de kaartrand, dezelfde
   binnenruimte als de tekst boven de carrousel in die kaart; de tekstlaag
   daarbinnen telt niets meer op (die gaf de alinea 40px extra). */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main .section .placeholder--content.placeholder--content.slick-slide:not(.grid--item *),
  body.brf:where(:not(.brf-gen)) .main .section .slick-slide > .placeholder--content.placeholder--content:not(.grid--item *),
  body.brf:where(:not(.brf-gen)) .main .section .slick-slide > .wrapper--content.wrapper--content:not(.grid--item *) {
    padding-left: var(--br-marge) !important;
    padding-right: var(--br-marge) !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .quotes-extra-text .placeholder--content.slick-slide {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.brf:where(:not(.brf-gen)) .main .section.quotes:not(.full-width) .quotes-extra-text .slick-slide > .wrapper--content.wrapper--content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* Full banner als band over de volle breedte (met achtergrondkleur, niet
   smal), gestapeld op tablet en mobiel. De tekst stond 30px (mobiel) tot 52px
   (tablet) rechts van de contentlijn: het tekstblok had de binnenruimte van
   een kaart (--br-pad), en op tablet hield het thema een raster met twee
   kolommen aan, met de tekst bij "foto links" in de tweede. Een band is geen
   kaart: één kolom, en de tekst op de contentlijn, gelijk aan de rest van de
   pagina. Smalle banners (kaarten) houden hun binnenruimte. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color:not(.narrow-page) .wrapper--full-banner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color:not(.narrow-page) .wrapper--full-banner > .full-banner--content {
    grid-column: 1/-1 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Full banner zonder achtergrondkleur (over de volle breedte), gestapeld op
   tablet en mobiel ("Bribus ECO & OrganicBoard spaanplaat" op
   product-materiaal, de vastgoedkeukens op vastgoedbeheerders). De foto lag
   over de hele breedte achter de tekst, met alleen bovenin een licht verloop;
   de tekst was slecht leesbaar. Nu zoals de banden met een kleur: de foto
   bovenin van rand tot rand, zacht uitlopend in de pagina, en de tekst eronder
   op de contentlijn. */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color) {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    padding-top: 0 !important;
    padding-left: var(--br-marge) !important;
    padding-right: var(--br-marge) !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color) > .wrapper--full-banner-image.image-1 {
    position: relative !important;
    inset: auto !important;
    -webkit-box-ordinal-group: 0 !important;
        -ms-flex-order: -1 !important;
            order: -1 !important;
    width: calc(100% + 2 * var(--br-marge)) !important;
    margin: 0 calc(-1 * var(--br-marge)) !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color) > .wrapper--full-banner-image.image-1 > picture {
    position: absolute !important;
    inset: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color) > .wrapper--full-banner-image.image-1 img {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(55%, #000), to(transparent)) !important;
    -webkit-mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%) !important;
    mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(55%, #000), to(transparent)) !important;
    mask-image: linear-gradient(#000 0%, #000 55%, transparent 100%) !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color)::before,
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color)::after,
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color) > .wrapper--full-banner-image.image-1::before,
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color) > .wrapper--full-banner-image.image-1::after {
    content: none !important;
    background: none !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color) .wrapper--full-banner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner:not(.narrow-page):not(.has--background-color) .wrapper--full-banner > .full-banner--content {
    grid-column: 1/-1 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Gestapelde band (full banner met kleur, tablet en mobiel): de foto vervaagt
   naar beneden in de bandkleur, voor elke fotopositie gelijk. Bij "foto rechts"
   bleef het desktopmasker (horizontaal) staan, waardoor de foto hard stopte op
   de rand met de tekst ("Een veilige werkplek" op mens-omgeving). Zelfde
   verloop als bij "foto links" en "foto midden". */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.full-banner.has--background-color:not(.narrow-page) > .wrapper--full-banner-image.image-1 img {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(80%, transparent)) !important;
    -webkit-mask-image: linear-gradient(#000 0%, transparent 80%) !important;
    mask-image: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(80%, transparent)) !important;
    mask-image: linear-gradient(#000 0%, transparent 80%) !important;
  }
}
/* ==========================================================================
   Bribus GEN blijft inhoudelijk 1 op 1 gelijk aan de live site (keuze 15 okt).
   Het template (Views/BribusGEN.cshtml) laat de master brf-gen op de body
   zetten. Elke regel in dit bestand die over inhoud gaat, heeft daarom
   body.brf:where(:not(.brf-gen)): op GEN geldt dan alleen het thema, zoals
   live. :where() houdt de sterkte van de selectors gelijk, dus op de andere
   pagina's verandert er niets. Regels voor de navigatiebalk, het mobiele menu,
   de footer en de pagina-overgang gelden wel op GEN; algemene regels (links,
   knoppen) gelden er alleen binnen die vaste onderdelen.
   Een nieuwe regel voor inhoud: begin met body.brf:where(:not(.brf-gen)).
   De omzetting is gedaan met een script (scratchpad gen-uitsluiten.cjs).
   ========================================================================== */
/* GEN: de hero begint direct onder de zwevende balk, zoals live onder de
   live-balk. De master zet alleen de hoogte van de balk als ruimte; de balk
   staat ook een stukje van de bovenrand (--br-bar is de onderkant). */
body.brf.brf-gen .header.bribus-gen {
  padding-top: var(--br-bar, 92px) !important;
}

/* Kaarten in de header van /referenties op tablet en mobiel: een veegbare rij
   (CSS scroll-snap, geen JS) in plaats van het raster van twee kolommen. In dat
   raster stonden de titels van de bovenste rij donkerblauw op de donkere
   herofoto en waren ze onleesbaar. Nu blijft het zoals op desktop: de foto's
   hangen over de onderrand van de hero, de titels staan op de lichte
   achtergrond. De eerste kaart staat op de contentlijn; de rij loopt door tot
   de schermrand, zodat de volgende kaart zichtbaar is en uitnodigt tot vegen. */
@media (max-width: 1023px) {
  body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--br-marge);
    padding: 8px var(--br-marge) 16px !important;
    margin-left: calc(-1 * var(--br-marge)) !important;
    margin-right: calc(-1 * var(--br-marge)) !important;
    pointer-events: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid::-webkit-scrollbar {
    display: none;
  }
  body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid > .grid--item {
    -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 calc((100% - 16px) * 0.45) !important;
            flex: 0 0 calc((100% - 16px) * 0.45) !important;
    max-width: none !important;
    scroll-snap-align: start;
  }
}
@media (max-width: 576px) {
  body.brf:where(:not(.brf-gen)) .header.has-cards .header--cards .header--outer-wrapper .header--inner-wrapper .placeholder--grid > .grid--item {
    -ms-flex-preferred-size: 82% !important;
        flex-basis: 82% !important;
  }
}
/* Referentieband over de volle breedte (homepage, /zakelijk) op tablet en
   mobiel: het blok met quote en logo ligt over de foto, met de contentmarge aan
   de zijkanten, maar stond onderaan precies op de onderrand van de foto. Nu
   onderaan dezelfde ruimte als opzij (32px mobiel, 40px tablet). */
@media (max-width: 820px) {
  body.brf:where(:not(.brf-gen)) .main > .section.quotes.full-width .item--content {
    padding-bottom: var(--br-marge) !important;
  }
}
/* Hero op de binnenpagina's, mobiel (tot en met 576px), zoals de live site: de
   foto als blok bovenin, direct onder de zwevende balk (75% van de breedte,
   ongeveer 4:3), vervagend naar donkerblauw; de titel en tekst daaronder op de
   donkerblauwe band met de textuur, beginnend op het vervaagde deel van de
   foto. Zo is de foto beter te zien en leest de tekst rustig. Op mobiel volgt
   de hoogte de inhoud (geen vaste hero-hoogte); tablet en desktop ongewijzigd.
   De verlopen over de foto en achter de tekst en het B-watermerk van het thema
   vervallen hier; homepage en Bribus GEN vallen erbuiten. */
@media (max-width: 576px) {
  body.brf {
    --br-hero-foto:75vw;
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) {
    min-height: 0 !important;
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom)::before {
    background: url("/images/overlay.jpg") left top/cover no-repeat, var(--br-navy) !important;
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom)::after {
    content: none !important;
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--background-image {
    top: var(--br-bar, 92px) !important;
    bottom: auto !important;
    height: var(--br-hero-foto) !important;
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--background-image::before,
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--background-image .header--outer-wrapper::after {
    content: none !important;
    background: none !important;
  }
  /* Wel een blauwe waas over de foto, zoals op tablet en desktop. Met hetzelfde masker als de foto
     (hieronder), anders tekent hij een harde rand op de band met de textuur. */
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--background-image::after {
    content: "" !important;
    background: rgba(0, 21, 57, 0.38) !important;
    -webkit-mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, 0.6) 24px, #000 56px, #000 45%, rgba(0, 0, 0, 0.4) 72%, transparent 100%);
            mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, 0.6) 24px, #000 56px, #000 45%, rgba(0, 0, 0, 0.4) 72%, transparent 100%);
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--background-image img {
    top: 0 !important;
    height: 100% !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
    -webkit-mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, 0.6) 24px, #000 56px, #000 45%, rgba(0, 0, 0, 0.4) 72%, transparent 100%) !important;
    mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, 0.6) 24px, #000 56px, #000 45%, rgba(0, 0, 0, 0.4) 72%, transparent 100%) !important;
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper {
    min-height: 0 !important;
    padding-top: calc(var(--br-bar, 92px) + var(--br-hero-foto) * 0.72) !important;
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--outer-wrapper.bottom .header--inner-wrapper::before {
    content: none !important;
    background: none !important;
  }
}
/* Mobiele hero, vervolg (verloopjes en de uitsnede):
   - de onderkant van de herofoto werd uitgeknipt met de afgeronde "oren" die
     op tablet en desktop de overgang naar de eerste sectie maken; met de foto
     als blok bovenin viel die vorm midden in de band. Hier geen uitsnede.
   - de band krijgt verlopen in plaats van alleen de textuur (die werd op een
     smal, hoog vlak uitgerekt tot een vreemde vorm): lichter blauw bovenin
     waar de foto in uitloopt, een zachte gloed achter de titel, naar onderen
     dieper donkerblauw; de textuur loopt er zacht doorheen.
   - de foto begint onder de balk en vervaagt bovenin en onderaan
     (masker op de foto), zodat er boven en onder geen harde rand is. Geen
     dicht verloop over de foto: dat sneed de gloed achter de titel af. */
@media (max-width: 576px) {
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom) > .header--background-image {
    clip-path: none !important;
  }
  body.brf:where(:not(.brf-gen)) .header:not(.homepage):not(.navigation-only):has(> .header--outer-wrapper.bottom)::before {
    background: radial-gradient(ellipse 85% 32% at 18% calc(var(--br-bar, 92px) + var(--br-hero-foto) * 0.9), rgba(0, 159, 218, 0.16) 0%, rgba(0, 159, 218, 0) 70%), linear-gradient(180deg, #0d2a6b 0%, #0a2257 calc(var(--br-bar, 92px) + var(--br-hero-foto)), #001539 85%), url("/images/overlay.jpg") center/cover no-repeat, #001539 !important;
    background-blend-mode: normal, normal, soft-light, normal !important;
  }
}
/* Staat er tekst direct boven de velden (bijv. het regiofilter op
   contactpersonen: kop + "Accountmanager & Projectleider"), dan schuift de
   eerste rij niet op maar houdt hij ruimte: anders valt het zwevende label
   over de tekst. */
body.brf:where(:not(.brf-gen)) :is(h1, h2, h3, h4, h5, h6, p) + .umbraco-forms-page > .umbraco-forms-fieldset:first-child {
  margin-top: 32px !important;
}
/*# sourceMappingURL=wwwroot\css\bribus-refresh.css.map */