/* SpiderApps, gedeeld stylesheet voor alle zes pagina's.
   Gebaseerd op het bestaande tsm-diensten-template.css / footer.css
   componentsysteem van The Spidermonkeys (webdev.thespidermonkeys.nl),
   getrimd tot wat SpiderApps nodig heeft, plus enkele nieuwe klassen
   specifiek voor de homepage (hero, probleem, belofte, routes) en
   Connectoren (impactregel, logogrid, status). Zelfde kleurtokens,
   dezelfde typografie, dezelfde componentlogica, zodat SpiderApps voelt
   als onderdeel van hetzelfde ecosysteem. */

:root{
  --navy:#1B1D37;
  --navysoft:#2A2D52;
  --oranje:#FF3300;
  --offwhite:#F5F6FA;
  --ok:#00E676;
  --grijs:#62657A;
  --lijn:#E7E9EF;
  --wit:#fff;
}

/* H1-regel (BESLUIT-2026-09-04-001): precies één kernwoord of korte
   tweewoordgroep per H1 krijgt de accentkleur, verder blijft de H1 in de
   basiskleur (navy op licht, wit op donker). Werkt op elke achtergrond. */
.accent{color:var(--oranje)}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--wit);color:var(--navy);font-family:'Inter',sans-serif;padding-top:88px;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:999}
.skip-link:focus{left:0}

/* ---------- Navigatie, vlakke pill-nav, geen dropdowns nodig (6 items) ---------- */
.pillnav{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:200;width:calc(100% - 32px);max-width:1040px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#ffffff;border:1px solid var(--lijn);border-radius:44px;padding:10px 10px 10px 20px;box-shadow:0 14px 44px rgba(27,29,55,.22)}
.plogo{font-family:'Poppins',sans-serif;font-weight:800;font-size:16px;letter-spacing:-.4px;color:var(--navy);text-decoration:none;white-space:nowrap}
.plogo b{color:var(--oranje)}
.plinks{display:flex;gap:22px;align-items:center;justify-content:center;flex:1;padding:0 12px}
.plinks a{color:var(--navy);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;line-height:1;padding:10px 4px;display:inline-block}
.plinks a:hover,.plinks a[aria-current="page"]{color:var(--oranje)}
.phamb{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--lijn);background:var(--wit);color:var(--navy);flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.phamb i{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}
.psheet{display:none;position:fixed;left:14px;right:14px;top:74px;z-index:190;background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:10px 8px;box-shadow:0 18px 44px rgba(27,29,55,.3)}
.psheet.open{display:block}
.psheet a{display:block;padding:13px 14px;color:var(--navy);text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid var(--lijn)}
.psheet a:last-child{border-bottom:0}
.psheet a:hover{color:var(--oranje)}

@media (max-width:860px){
  .plinks{display:none}
  .phamb{display:flex}
}

/* ---------- Paginakop (voor alle niet-home pagina's) ---------- */
.paginakop{background:var(--navy);color:#fff;padding:64px 24px 54px;position:relative;overflow:hidden}
.paginakop::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,51,0,.16),transparent 70%)}
.paginakop .binnen{max-width:960px;margin:0 auto;position:relative;z-index:1}
.paginakop .kruimel{color:#8A8FB5;font-size:12.5px;margin-bottom:16px}
.paginakop .kruimel a{color:#8A8FB5;text-decoration:none}
.paginakop .kruimel a:hover{color:#fff}
.paginakop h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(28px,4.5vw,42px);letter-spacing:-1px;line-height:1.15;max-width:20ch}
.herolead{color:#B9BDD4;font-size:16.5px;line-height:1.7;max-width:62ch;margin-top:16px}

/* ---------- Banden (secties) ---------- */
.banden{background:var(--wit)}
.band{padding:64px 24px}
.band.tint{background:var(--offwhite)}
.band.navy{background:var(--navy);color:#fff}
.band .bin{max-width:960px;margin:0 auto;font-size:15.5px;line-height:1.7;color:#3A3D5C}
.band.navy .bin{color:#D7D9EC}
.band h2{color:var(--navy);font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(22px,3vw,28px);letter-spacing:-.4px;line-height:1.25;margin:0 0 .5em;display:flex;align-items:baseline;gap:12px}
.band h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--oranje);flex:0 0 auto;transform:translateY(-1px)}
.band.navy h2{color:#fff}
.band h3{color:var(--navy);font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;margin:1.2em 0 .4em}
.band.navy h3{color:#fff}
.band p{margin:.7em 0}
.band .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--oranje);font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:14px}
.band .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oranje)}
.band .lead{font-size:18.5px;color:var(--navy);font-weight:500;line-height:1.7;max-width:64ch}
.band.navy .lead{color:#fff}
.bandkop{text-align:left}
.bandintro{max-width:66ch;color:#4A4D6E}

/* ---------- Kaartgrids ---------- */
.vakkengrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.vak{background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:28px 26px;box-shadow:0 10px 30px rgba(27,29,55,.06);transition:transform .18s ease,box-shadow .18s ease}
.vak:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(27,29,55,.11)}
.vak .pic{width:44px;height:44px;border-radius:13px;margin-bottom:16px;background:rgba(255,51,0,.08);display:flex;align-items:center;justify-content:center;color:var(--oranje)}
.vak .pic svg{width:21px;height:21px}
.vak h3{font-size:16.5px;margin:0 0 .5em;font-family:'Poppins',sans-serif;font-weight:700;color:var(--navy)}
.vak p{font-size:14.5px;line-height:1.65;color:#4A4D6E;margin:0}

/* ---------- Twee-koloms routes (homepage) ---------- */
.routegrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.routekaart{background:var(--wit);border:1px solid var(--lijn);border-radius:22px;padding:34px 32px;display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,box-shadow .18s ease;text-decoration:none;color:var(--navy)}
.routekaart:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(27,29,55,.11);border-color:var(--oranje)}
.routekaart .routelabel{color:var(--oranje);font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.routekaart h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:19px;margin:2px 0 4px}
.routekaart p{font-size:14.5px;line-height:1.6;color:#4A4D6E}
.routekaart .pijl{margin-top:8px;color:var(--oranje);font-weight:700;font-size:14px}

/* ---------- Mediarij (waarde/uitleg naast paneel) ---------- */
.mediarij{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;background:var(--wit);border:1px solid var(--lijn);border-radius:22px;padding:36px 38px;box-shadow:0 10px 30px rgba(27,29,55,.06)}
.mediarij.omgekeerd{grid-template-columns:.9fr 1.1fr}
.mediarij.omgekeerd .mtekst{order:2}
.mtekst h3{font-size:20px;font-family:'Poppins',sans-serif;font-weight:700;color:var(--navy);margin-bottom:.4em}
.mtekst p{font-size:14.8px;color:#4A4D6E;line-height:1.65}
.icoonpaneel{width:100%;min-height:220px;border-radius:16px;background:var(--offwhite);display:flex;align-items:center;justify-content:center;color:var(--oranje)}
.band.tint .icoonpaneel{background:var(--wit)}
.icoonpaneel svg{width:72px;height:72px;opacity:.9}

/* ---------- Stappenschema (ontwikkelmethode) ---------- */
.stappen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:34px}
.stap{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:20px 16px;text-align:center}
.stap .nr{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;margin:0 auto 12px}
.stap h3,.stap h4{font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;color:var(--navy);margin-bottom:6px}
.stap p{font-size:12.5px;color:#4A4D6E;line-height:1.5}
.stappen .pijltje{display:none}
@media (max-width:900px){.stappen{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.stappen{grid-template-columns:1fr}}

/* ---------- Pakketkaarten (diensten en prijzen) ---------- */
.pakketgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pakketgrid.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.pakket{background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgba(27,29,55,.06)}
.pakket.uitgelicht{border-color:var(--oranje);box-shadow:0 18px 44px rgba(27,29,55,.14)}
.pakket h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:16.5px;color:var(--navy);margin:0}
.pakket .prijs{font-family:'Poppins',sans-serif;font-weight:800;font-size:23px;color:var(--navy);line-height:1.2}
.pakket .prijs span{display:block;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;color:var(--grijs);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.pakket p{font-size:14px;line-height:1.6;color:#4A4D6E;margin:0}
.pakket ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:#4A4D6E;margin-top:2px}
.pakket ul li{padding-left:18px;position:relative;line-height:1.5}
.pakket ul li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--oranje)}
.pakket .kanttekening{font-size:12px;color:var(--grijs);margin-top:auto;padding-top:6px}
@media (max-width:900px){.pakketgrid,.pakketgrid.drie{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pakketgrid,.pakketgrid.drie{grid-template-columns:1fr}}

/* ---------- Eigendom-splitsing (twee kolommen, hergebruikt van routekaart) ---------- */
.eigendomvak{background:var(--wit);border:1px solid var(--lijn);border-radius:22px;padding:32px 30px}
.eigendomvak h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:var(--navy);margin-bottom:14px}
.eigendomvak ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.eigendomvak ul li{padding-left:22px;position:relative;font-size:14.5px;line-height:1.6;color:#3A3D5C}
.eigendomvak ul li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--oranje)}
.eigendomsplit{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
@media (max-width:900px){.eigendomsplit{grid-template-columns:1fr}}

/* ---------- Connectoren ---------- */
.impactregel{text-align:center;padding:72px 24px 40px}
.impactregel .eyebrow{display:inline-flex;justify-content:center;width:100%}
.impactregel h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(28px,4.5vw,44px);letter-spacing:-1px;color:var(--navy);max-width:22ch;margin:0 auto}
.logogrid-groot{max-width:1080px;margin:0 auto;padding:56px 24px 60px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.logotegel{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:108px;position:relative}
.logo-vak{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--lijn);border-radius:11px;flex:0 0 auto;overflow:hidden;box-sizing:border-box}
.logo-vak img{width:78%;height:78%;object-fit:contain}
.logotegel .monogram{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:14px;color:#fff;background:var(--grijs)}
.logotegel.beschikbaar .monogram{background:var(--ok)}
.logotegel.ontwikkeling .monogram{background:var(--oranje)}
.logotegel span.naam{font-family:'Poppins',sans-serif;font-weight:700;font-size:12px;color:var(--navy);text-align:center;line-height:1.3;overflow-wrap:break-word;max-width:100%}
.logotegel .status{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--grijs)}
.logotegel.beschikbaar .status{background:var(--ok)}
.logotegel.ontwikkeling .status{background:var(--oranje)}
@media (max-width:900px){.logogrid-groot{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.logogrid-groot{grid-template-columns:repeat(3,minmax(0,1fr))}}

.categorieblok{margin-bottom:34px}
.categorieblok h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.categorieblok h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oranje)}
.connectorlijst{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.connectoritem{display:flex;align-items:center;gap:10px;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;padding:10px 12px}
.connectoritem .naam-tekst{flex:1;font-size:13px;font-weight:600;color:var(--navy)}
.connectoritem .logo-vak{border-radius:8px}
.mono-klein{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:10.5px;color:#fff;background:var(--grijs)}
.mono-klein.beschikbaar{background:var(--ok)}
.mono-klein.ontwikkeling{background:var(--oranje)}
.badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.badge.beschikbaar{background:rgba(0,230,118,.14);color:#00A85C}
.badge.ontwikkeling{background:rgba(255,51,0,.12);color:var(--oranje)}
@media (max-width:900px){.connectorlijst{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.connectorlijst{grid-template-columns:1fr}.connectoritem{flex-wrap:wrap}}

/* ---------- Cta-band ---------- */
.ctaband{background:var(--offwhite);padding:26px 24px 34px}
.ctaband .binnen{max-width:860px;margin:0 auto;background:var(--navy);color:#fff;border-radius:22px;padding:38px 42px;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.ctaband h2{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.4px}
.ctaband h2::before{display:none}
.ctaband p{color:#B9BDD4;font-size:14.5px;margin-top:6px}
.ctaband .knop{display:inline-flex;align-items:center;gap:10px;background:var(--oranje);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:14.5px;padding:15px 26px;border-radius:14px;text-decoration:none;white-space:nowrap}
.ctaband .knop:hover{background:#e02a00}

/* ---------- FAQ-accordeon ---------- */
.faqlijst{max-width:820px;margin:0 auto}
.faqitem{border-bottom:1px solid var(--lijn)}
.faqitem summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;color:var(--navy)}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem .plus{width:24px;height:24px;border-radius:50%;border:1px solid var(--lijn);display:flex;align-items:center;justify-content:center;color:var(--oranje);font-size:16px;flex:0 0 auto;transition:transform .2s}
.faqitem[open] .plus{transform:rotate(45deg)}
.faqitem .antwoord{padding:0 4px 22px;font-size:14.8px;line-height:1.7;color:#4A4D6E;max-width:70ch}

/* ---------- Homepage specifiek: hero, probleem, belofte ---------- */
.hero{padding:100px 24px 70px;background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 62%,var(--wit) 62%);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-150px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(255,51,0,.2),transparent 68%)}
.hero .binnen{max-width:780px;margin:0 auto;text-align:center;color:#fff;position:relative;z-index:1}
.hero .slogan{display:flex;align-items:center;justify-content:center;gap:8px;color:#B9BDD4;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;letter-spacing:.4px;margin-bottom:18px}
.hero .slogan img{width:18px;height:18px;flex:0 0 auto}
.hero h1{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(30px,5.5vw,50px);letter-spacing:-1.2px;line-height:1.15}
.hero .belofteregel{margin-top:20px;font-size:19px;color:#D7D9EC;font-weight:500}
.heropaneel{max-width:820px;margin:44px auto 0;background:#ffffff;border-radius:24px;padding:20px;box-shadow:0 30px 70px rgba(27,29,55,.35)}
.heropaneel img{width:100%;height:auto;display:block;border-radius:12px}

.probleem{padding:70px 24px}
.probleem .bin{max-width:720px;margin:0 auto}
.probleem h2{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(22px,3vw,28px);color:var(--navy);letter-spacing:-.4px;margin-bottom:.6em}
.probleem p{font-size:16px;line-height:1.75;color:#3A3D5C;margin:.8em 0}

.teaserlogos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:34px}

@media (max-width:900px){
  .vakkengrid,.routegrid{grid-template-columns:1fr}
  .mediarij,.mediarij.omgekeerd{grid-template-columns:1fr}
  .mediarij.omgekeerd .mtekst{order:0}
  .teaserlogos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .teaserlogos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Footer (split-scherm, zelfde patroon als tsm) ---------- */
.footdienst{background:var(--navy);color:#B9BDD4;padding:0 0 24px;font-family:'Inter',sans-serif}
.footdienst h3,.footdienst h4{color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:14.5px;margin-bottom:12px}
.footdienst a{color:#B9BDD4;text-decoration:none;font-size:13.5px}
.footdienst a:hover{color:var(--oranje)}
.footdienst .finfo a{display:block;padding:3px 0}
.footdienst .fsplit{display:grid;grid-template-columns:1fr 1fr}
.footdienst .fcta{padding:56px 44px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(255,255,255,.1)}
.footdienst .fcta-slogan{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(22px,3vw,30px);line-height:1.2;color:#fff;margin-bottom:16px}
.footdienst .fcta-slogan em{font-style:normal;color:var(--oranje)}
.footdienst .fcta p{color:#B9BDD4;font-size:14px;margin-bottom:22px;max-width:38ch}
.footdienst .fcta-knop{display:inline-block;align-self:flex-start;background:var(--oranje);color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;padding:14px 26px;border-radius:12px;text-decoration:none}
.footdienst .fcta-knop:hover{background:#e02a00;color:#fff}
.footdienst .finfo{padding:56px 44px;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.footdienst .footlogo{font-family:'Poppins',sans-serif;font-weight:800;color:#fff;font-size:15px;letter-spacing:-.2px;margin-bottom:6px}
.footdienst .sub{font-size:12.5px;color:#8A8FB5;margin-bottom:16px}
.footdienst .fbadge2{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:11.5px;padding:7px 12px 7px 8px;border-radius:9px;margin-bottom:16px}
.footdienst .fbadge2 .stip{width:6px;height:6px;border-radius:50%;background:var(--oranje);flex:0 0 auto}
.footdienst .sluit{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:18px 44px 0;flex-wrap:wrap;gap:12px;font-size:12.5px;border-top:1px solid rgba(255,255,255,.1)}
@media (max-width:820px){
  .footdienst .fsplit{grid-template-columns:1fr}
  .footdienst .fcta{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
}
@media (max-width:560px){
  .footdienst .finfo{grid-template-columns:1fr;gap:28px}
  .footdienst .fcta,.footdienst .finfo{padding:36px 24px}
  .footdienst .sluit{padding:18px 24px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

:focus-visible{outline:2px solid var(--oranje);outline-offset:2px}

.cookiebanner{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:640px;margin:0 auto;background:var(--navy);color:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 12px 32px rgba(0,0,0,.25);display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:14px;line-height:1.5}
.cookiebanner[hidden]{display:none}
.cookiebanner p{margin:0;flex:1 1 260px;color:#D8DAEC}
.cookiebanner a{color:#fff;text-decoration:underline}
.cookiebanner-knoppen{display:flex;gap:10px;flex:0 0 auto}
.cookieknop-weiger,.cookieknop-accepteer{border:none;border-radius:10px;padding:10px 16px;font-family:'Poppins',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer}
.cookieknop-weiger{background:transparent;color:#D8DAEC;border:1px solid rgba(255,255,255,.3)}
.cookieknop-weiger:hover{border-color:#fff;color:#fff}
.cookieknop-accepteer{background:var(--oranje);color:#fff}
.cookieknop-accepteer:hover{background:#e02a00}
@media (max-width:520px){
  .cookiebanner{flex-direction:column;align-items:stretch;text-align:left}
  .cookiebanner-knoppen{justify-content:flex-end}
}