.bb-kaarten, .bb-kaart {
--bb-donkergroen: #1D3C34;
--bb-lichtgroen: #39892F;
--bb-geel: #F1B248;
--bb-geel-hover: #E9A633;
--bb-lichtgrijs: #858585;
--bb-kop: 'Merriweather', Georgia, serif;
}
.bb-kaarten {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 980px) {
.bb-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bb-kaart {
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow: hidden;
border-radius: 8px;
background: #fff;
transition: transform .2s, box-shadow .2s;
}
.bb-kaart *, .bb-kaart *::before, .bb-kaart *::after { box-sizing: border-box; }
.bb-kaart:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(29, 60, 52, .10); }
.bb-kaart:focus-within { outline: 2px solid var(--bb-lichtgroen); outline-offset: 2px; } .bb-kaart-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.bb-kaart-afbeelding { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bb-kaart:hover .bb-kaart-afbeelding { transform: scale(1.03); }
.bb-kaart-kleuren {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.bb-kaart-kleuren li { margin: 0; padding: 0; list-style: none; }
.bb-kaart-kleur {
display: block;
width: 26px;
height: 26px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--bb-kleur, #d6d6d0);
box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
transition: transform .15s;
}
.bb-kaart-kleur:hover, .bb-kaart-kleur:focus-visible { transform: scale(1.12); }
.bb-kaart-kleur:focus-visible { outline: 2px solid var(--bb-donkergroen); outline-offset: 1px; } .bb-kaart-info { display: flex; flex: 1; flex-direction: column; padding: 16px 16px 18px; }
.bb-kaart-cat { margin: 0 0 6px; color: var(--bb-lichtgroen); font-size: 13px; line-height: 1.3; }
.bb-kaart-titel {
margin: 0 0 14px !important;
padding: 0 !important;
color: var(--bb-donkergroen);
font-family: var(--bb-kop);
font-size: 16px !important;
font-weight: 700;
line-height: 1.4 !important;
}
.bb-kaart-link { color: inherit !important; text-decoration: none !important; }
.bb-kaart-link:focus { outline: none; } .bb-kaart-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.bb-kaart-prijs { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-right: 44px; }
.bb-kaart-incl { color: var(--bb-donkergroen); font-size: 16px; font-weight: 700; line-height: 1.3; }
.bb-kaart-incl del { color: var(--bb-lichtgrijs); font-weight: 400; }
.bb-kaart-incl ins { text-decoration: none; }
.bb-kaart-va { color: var(--bb-lichtgroen); }
.bb-kaart-excl { color: var(--bb-lichtgrijs); font-size: 12px; line-height: 1.3; }
.bb-kaart-knop {
position: absolute;
right: 16px;
bottom: 18px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bb-geel);
color: var(--bb-donkergroen);
transition: background-color .15s;
}
.bb-kaart:hover .bb-kaart-knop { background: var(--bb-geel-hover); }
.bb-kaart-knop svg { display: block; }
@media (max-width: 480px) {
.bb-kaarten { gap: 10px; }
.bb-kaart-info { padding: 12px 12px 14px; }
.bb-kaart-cat { font-size: 12px; }
.bb-kaart-excl { font-size: 11px; }
.bb-kaart-titel { font-size: 14px !important; }
.bb-kaart-prijs { padding-right: 36px; }
.bb-kaart-incl { font-size: 15px; }
.bb-kaart-knop { right: 12px; bottom: 14px; width: 28px; height: 28px; }
.bb-kaart-kleur { width: 22px; height: 22px; }
}