.bnb-kenmerk-host {
--bnb-icoon: 40px; --bnb-svg: 24px; --bnb-gap: 6px;
--bnb-stap: calc(var(--bnb-icoon) + var(--bnb-gap)); --bnb-rand: 1em; position: relative;
overflow: visible;
}
.bnb-kenmerk-host .bnb-kenmerken {
position: absolute;
top: var(--bnb-rand);
right: var(--bnb-rand);
z-index: 3;
display: grid;
grid-template-columns: var(--bnb-icoon);
gap: var(--bnb-gap);
direction: rtl; } .bnb-kenmerk-host .bnb-kenmerken[data-n="6"],
.bnb-kenmerk-host .bnb-kenmerken[data-n="7"],
.bnb-kenmerk-host .bnb-kenmerken[data-n="8"],
.bnb-kenmerk-host .bnb-kenmerken[data-n="9"] {
grid-template-columns: var(--bnb-icoon) var(--bnb-icoon);
}
.bnb-kenmerk-host .bnb-keurmerk {
direction: ltr;
display: flex;
align-items: center;
justify-content: center;
width: var(--bnb-icoon);
height: var(--bnb-icoon);
padding: 0;
border: 0;
border-radius: 50%;
background: var(--bnb-kleur, #6f766a);
color: #fff;
cursor: pointer;
transition: transform 200ms ease, filter 200ms ease;
}
.bnb-kenmerk-host .bnb-keurmerk:hover,
.bnb-kenmerk-host .bnb-keurmerk[aria-expanded="true"] {
filter: brightness(0.88);
transform: scale(1.06);
}
.bnb-kenmerk-host .bnb-keurmerk:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 3px;
}
.bnb-kenmerk-host .bnb-keurmerk svg {
width: var(--bnb-svg);
height: var(--bnb-svg);
display: block;
} .bnb-kenmerk-host .bnb-keurmerk-pop {
position: absolute;
top: calc(var(--bnb-rand) + var(--bnb-stap));
right: var(--bnb-rand);
left: var(--bnb-rand);
z-index: 4;
padding: 1.25em 1.25em 1em;
border-radius: 12px;
background: var(--bnb-kleur, #6f766a);
color: #fff;
font-size: 15px;
line-height: 1.5;
text-align: left;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
} .bnb-kenmerk-host .bnb-kenmerken[data-n="2"] ~ .bnb-keurmerk-pop { top: calc(var(--bnb-rand) + 2 * var(--bnb-stap)); }
.bnb-kenmerk-host .bnb-kenmerken[data-n="3"] ~ .bnb-keurmerk-pop { top: calc(var(--bnb-rand) + 3 * var(--bnb-stap)); }
.bnb-kenmerk-host .bnb-kenmerken[data-n="4"] ~ .bnb-keurmerk-pop { top: calc(var(--bnb-rand) + 4 * var(--bnb-stap)); }
.bnb-kenmerk-host .bnb-kenmerken[data-n="5"] ~ .bnb-keurmerk-pop { top: calc(var(--bnb-rand) + 5 * var(--bnb-stap)); } .bnb-kenmerk-host .bnb-kenmerken[data-n="6"] ~ .bnb-keurmerk-pop,
.bnb-kenmerk-host .bnb-kenmerken[data-n="7"] ~ .bnb-keurmerk-pop,
.bnb-kenmerk-host .bnb-kenmerken[data-n="8"] ~ .bnb-keurmerk-pop,
.bnb-kenmerk-host .bnb-kenmerken[data-n="9"] ~ .bnb-keurmerk-pop { top: var(--bnb-rand); }
.bnb-kenmerk-host .bnb-kenmerken[data-n="6"] ~ .bnb-keurmerk-pop::before,
.bnb-kenmerk-host .bnb-kenmerken[data-n="7"] ~ .bnb-keurmerk-pop::before,
.bnb-kenmerk-host .bnb-kenmerken[data-n="8"] ~ .bnb-keurmerk-pop::before,
.bnb-kenmerk-host .bnb-kenmerken[data-n="9"] ~ .bnb-keurmerk-pop::before { display: none; }
.bnb-kenmerk-host .bnb-keurmerk-pop::before {
content: "";
position: absolute;
top: -8px;
right: 20px;
width: 16px;
height: 16px;
background: inherit;
transform: rotate(45deg);
border-radius: 2px;
}
.bnb-kenmerk-host .bnb-keurmerk-pop__kop {
display: block;
margin: 0 2em 0.5em 0;
font-size: 17px;
font-weight: 600;
}
.bnb-kenmerk-host .bnb-keurmerk-pop p {
margin: 0 0 0.75em;
color: inherit;
}
.bnb-kenmerk-host .bnb-keurmerk-pop p:last-child { margin-bottom: 0; }
.bnb-kenmerk-host .bnb-keurmerk-pop__sluit {
position: absolute;
top: 0.5em;
right: 0.6em;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #fff;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.bnb-kenmerk-host .bnb-keurmerk-pop__sluit:hover { background: rgba(255, 255, 255, 0.15); } .bnb-kenmerk-host--tegel { display: block; }
.bnb-kenmerk-host--tegel > a { position: relative; z-index: 1; }