/* BelBuddy — gedeeld menu en footer. Bron: bron/kop.html, bron/voet.html. Niet per pagina aanpassen. */
.bbk,.bbvoet{--achter:#FFFFFF;--vlak2:#F6F7FA;--vlak:#FFFFFF;--inkt:#0D1230;--grijs:#5A6079;--lijn:#E6E8EF;--blauw:#4F46E5;--blauw-zacht:#EEEEFF;--groen:#12B76A;
  --schaduw:0 1px 2px rgba(13,18,48,.05),0 20px 50px -24px rgba(13,18,48,.28);color-scheme:light}
@media (prefers-color-scheme:dark){.bbk,.bbvoet{--achter:#0A0D1F;--vlak2:#10142B;--vlak:#151A36;--inkt:#EEF0FA;--grijs:#A3A9C6;--lijn:#262D52;--blauw:#8B86FF;--blauw-zacht:#1C2150;--groen:#3DD68C;
  --schaduw:0 1px 2px rgba(0,0,0,.4),0 20px 50px -24px rgba(0,0,0,.8);color-scheme:dark}}
.bbk{position:relative;z-index:30;font-family:Geist,system-ui,sans-serif;color:var(--inkt)}
.bbk .kader{max-width:1120px;margin:0 auto;padding:0 24px}
.bbk .kop5 small{display:block;color:var(--grijs);font-size:.86rem;line-height:1.4;font-weight:400}
.bbk h3,.bbvoet h3{margin:0}
.bbk .knop{display:inline-flex;align-items:center;justify-content:center;gap:.55em;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:500 1rem/1 Geist,system-ui,sans-serif;padding:1.05em 1.6em;border-radius:999px;background:#4F46E5;color:#fff;transition:background .15s}
.bbk .knop:hover{background:#4338CA}
.bbk .kop5{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;position:relative;z-index:20}
.bbk .merk5{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;text-decoration:none;color:var(--inkt)}
.bbk .merk5 svg{width:34px;height:34px;color:var(--inkt)}
.bbk .nav5{display:flex;align-items:center;gap:26px}
.bbk .nav5>a,.bbk .nav5 summary{color:var(--grijs);text-decoration:none;font-weight:500;font-size:.97rem;cursor:pointer}
.bbk .nav5>a:hover,.bbk .nav5 summary:hover{color:var(--inkt)}
.bbk .nav5 .knop{color:var(--achter)!important;padding:.65em 1.1em;font-size:.95rem}
.bbk .nav5 .knop{white-space:nowrap}
@media (max-width:420px){.bbk .nav5{gap:10px}
.bbk .nav5 .knop{padding:.6em .9em;font-size:.9rem}
.bbk .merk5{font-size:1.05rem}}
.bbk details.uitklap{position:relative}
.bbk details.uitklap summary{list-style:none;display:inline-flex;align-items:center;gap:6px}
.bbk details.uitklap summary::-webkit-details-marker{display:none}
.bbk details.uitklap summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.bbk details.uitklap[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.bbk .paneel{position:absolute;top:calc(100% + 14px);left:-24px;width:560px;background:var(--vlak);border:1px solid var(--lijn);border-radius:20px;box-shadow:var(--schaduw);padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.bbk .paneel a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--inkt)}
.bbk .paneel a:hover,.bbk .paneel a:focus-visible{background:var(--blauw-zacht)}
.bbk .paneel a b{display:block;font-weight:600;font-size:.97rem}
.bbk .paneel a span{display:block;color:var(--grijs);font-size:.88rem;line-height:1.4}
.bbk .paneel .alles{grid-column:1/-1;border-top:1px solid var(--lijn);margin-top:6px;padding-top:12px;display:flex;gap:18px;flex-wrap:wrap}
.bbk .paneel .alles a{display:inline;padding:0;color:var(--blauw);font-weight:600;font-size:.93rem}
.bbk .paneel .alles a:hover{background:none;text-decoration:underline}
.bbk .mobiel5{display:none}
@media (max-width:900px){.bbk .nav5>a:not(.knop),.bbk .nav5>details.uitklap{display:none}
.bbk .mobiel5{display:block}}
.bbk .mobiel5 summary{list-style:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--lijn)}
.bbk .mobiel5 summary::-webkit-details-marker{display:none}
.bbk .mobiel5 .blad{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--vlak);border:1px solid var(--lijn);border-radius:20px;box-shadow:var(--schaduw);padding:10px}
.bbk .mobiel5 .blad a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--inkt);font-weight:500}
.bbk .mobiel5 .blad a:hover{background:var(--blauw-zacht)}
.bbk .mobiel5 .blad .kopje{padding:12px 14px 4px;color:var(--grijs);font-size:.85rem}
.bbk .mobiel5 .blad hr{border:0;border-top:1px solid var(--lijn);margin:6px 0}
.bbk .nav5{gap:22px}
.bbk .nav5 .knop{padding:.7em 1.15em;font-size:.94rem}
.bbk .nav5 .knop.demo{background:transparent;color:var(--inkt)!important;box-shadow:inset 0 0 0 1.5px var(--lijn)}
@media (max-width:1100px){.bbk .nav5 .knop.demo{display:none}}
@media (max-width:1000px){.bbk .nav5>a:not(.knop),.bbk .nav5>details.uitklap{display:none}
.bbk .mobiel5{display:block}}
.bbk .nav5 .knop{color:#fff!important}
.bbk .mobiel5 .blad .kopje{margin:0;max-width:none}
.bbk .nav5 details.uitklap{position:static}
.bbk .nav5 .paneel{top:calc(100% - 8px);left:50%;transform:translateX(-50%)}
.bbk .paneel.breed3{width:min(880px,94vw);grid-template-columns:repeat(3,1fr)}
.bbk .paneel.breed2{width:min(600px,94vw);grid-template-columns:repeat(2,1fr)}
.bbk .paneel .kol{display:flex;flex-direction:column;gap:2px}
.bbk .paneel .kolkop{font-size:.8rem;font-weight:600;color:var(--grijs);padding:6px 12px 8px}
.bbk .paneel a{display:flex;gap:12px;align-items:flex-start}
.bbk .paneel a.kort{align-items:center;padding:8px 12px}
.bbk .paneel .mi{flex:none;width:34px;height:34px;border-radius:10px;background:var(--blauw-zacht);color:var(--blauw);display:grid;place-items:center}
.bbk .paneel .mi svg{width:18px;height:18px}
.bbk .paneel .mono{flex:none;width:26px;height:26px;border-radius:7px;background:var(--vlak2);box-shadow:inset 0 0 0 1px var(--lijn);display:grid;place-items:center;font-weight:600;font-size:.8rem;color:var(--inkt)}
.bbk .paneel a b{font-weight:600;font-size:.95rem}
.bbk .paneel .alles{grid-column:1/-1}
.bbvoet .voetraster5{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px}
@media (max-width:860px){.bbvoet .voetraster5{grid-template-columns:1fr 1fr}}
.bbvoet .voetraster5 h3{font-size:.92rem;margin-bottom:10px;letter-spacing:0}
.bbvoet .voetraster5 b{color:var(--inkt)}
.bbvoet .voetraster5 ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bbvoet .voetraster5 a{color:var(--grijs);text-decoration:none}
.bbvoet .voetraster5 a:hover{color:var(--inkt);text-decoration:underline}
.bbvoet{border-top:1px solid var(--lijn);padding:48px 0;font:400 .93rem/1.6 Geist,system-ui,sans-serif;color:var(--grijs);background:var(--achter);margin-top:0}
.bbvoet .kader{max-width:1120px;margin:0 auto;padding:0 24px}
.bbvoet p{margin:0}
.bbvoet .voetonder{margin-top:36px;font-size:.85rem}
.bbvoet a{color:var(--grijs)}

/* taalwissel: beide talen met vlag zichtbaar, de huidige gemarkeerd; altijd zichtbaar, ook op de telefoon */
.bbk .nav5>.taal{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--lijn);flex:none}
.bbk .nav5>.taal>a,.bbk .nav5>.taal>.actief{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-weight:600;font-size:.85rem;line-height:1;text-decoration:none;color:var(--grijs)}
.bbk .nav5>.taal>.actief{background:var(--inkt);color:var(--achter)}
.bbk .nav5>.taal>a:hover{color:var(--inkt);background:var(--blauw-zacht)}
.bbk .taal svg,.mobiel5 a.taal-blad svg{width:20px;height:13px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(13,18,48,.15)}
/* 10 nov 2026 (Michael): de letters NL/EN zijn overbodig naast de vlag; ze blijven leesbaar voor een schermlezer */
.bbk .nav5>.taal svg{width:24px;height:16px}
.bbk .nav5>.taal>a>span,.bbk .nav5>.taal>.actief>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bbk .nav5>.taal>a,.bbk .nav5>.taal>.actief{padding:6px 8px}
.bbk .nav5>.taal>a:not(:hover){opacity:.75}
.mobiel5 .blad a.taal-blad{display:flex;align-items:center;gap:10px}
@media (max-width:430px){.bbk .nav5>a.knop:not(.demo){display:none}.bbk .nav5{gap:10px}}
@media (max-width:350px){.bbk .nav5>.taal span:not(.actief) {display:none}.bbk .nav5>.taal>a,.bbk .nav5>.taal>.actief{padding:6px 7px}}