/* GlobalXS 2.0, proef. Kleuren en letters gemeten op www.globalxs.nl (12-10-2026): rood #e10813,
   grijze vlakken #f7f7f7, koppen Raleway, tekst Roboto. Beide letters zelf gehost (open licentie). */
:root{
  --rood:#e10813; --rood-donker:#b5060f; --zwart:#313131; --tekst:#555555; --grijs:#5f5f5f;
  --stil:#7a7a7a; --lijn:#e4e4e4; --warm:#f2f2f2; --warm-licht:#f7f7f7; --warm-vlak:#ececec;
  --kaart:#ffffff; --actie:#e7ac00; --roze:#fde8e9;
  --r-s:12px; --r-m:16px; --r-l:22px; --r-xl:28px; --pil:999px; --r-knop:var(--pil);
  --schaduw:0 1px 1px rgba(0,0,0,.03),0 2px 10px rgba(0,0,0,.04);
  --schaduw-hoog:0 8px 24px rgba(30,30,30,.10);
  --rond:"Raleway",-apple-system,"Segoe UI",system-ui,sans-serif;
  --body:"Roboto",-apple-system,"Segoe UI",system-ui,sans-serif;
  --breed:1160px;
}
@font-face{font-family:"Raleway";src:url("fonts/raleway-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Raleway";src:url("fonts/raleway-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Raleway";src:url("fonts/raleway-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Raleway";src:url("fonts/raleway-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("fonts/roboto-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("fonts/roboto-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("fonts/roboto-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("fonts/roboto-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--tekst);background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--rood-donker)}
h1,h2,h3,h4{font-family:var(--rond);color:var(--zwart);line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(34px,5.2vw,58px)} h2{font-size:clamp(26px,3.4vw,38px)} h3{font-size:20px} h4{font-size:17px}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 20px}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--grijs)}
.stil{color:var(--stil);font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* proefbalk */
.proef{background:var(--zwart);color:#f2f2f2;font-size:13px;text-align:center;padding:7px 16px}
.proef a{color:#fff}
@media (max-width:600px){.proef .lang{display:none}}

/* kop */
.kop{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid rgba(228,228,228,.8);transition:transform .25s ease}
.kop.weg{transform:translateY(-100%)}
.kop .wrap{display:flex;align-items:center;gap:24px;height:68px}
.logo img{height:40px;width:auto}
.menu{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.menu a{display:block;padding:8px 13px;border-radius:var(--pil);color:var(--zwart);text-decoration:none;font-family:var(--rond);font-weight:500;font-size:15px}
.menu a:hover,.menu a[aria-current]{background:var(--warm-licht)}
.menu a[aria-current]{color:var(--rood-donker)}
.kop-acties{display:flex;gap:8px;align-items:center}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-family:var(--rond);font-weight:600;font-size:16px;line-height:1;padding:14px 22px;border-radius:var(--pil);text-decoration:none;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.knop:active{transform:scale(.97)}
.knop-rood{background:var(--rood);color:#fff}
.knop-rood:hover{background:var(--rood-donker)}
.knop-zacht{background:var(--warm-vlak);color:var(--zwart)}
.knop-zacht:hover{background:#e0e0e0}
.knop-klein{padding:10px 16px;font-size:14px}
.hamburger{display:none;margin-left:auto;background:var(--warm-licht);border:0;width:44px;height:44px;border-radius:50%;cursor:pointer}
.hamburger span{display:block;width:18px;height:2px;background:var(--zwart);margin:4px auto;border-radius:2px}
@media (max-width:900px){
  .menu,.kop-acties .knop-zacht{display:none}
  .hamburger{display:block}
  .kop-acties{margin-left:0}
  .kop.open .menu{display:flex;flex-direction:column;position:absolute;left:12px;right:12px;top:72px;background:#fff;border-radius:var(--r-l);box-shadow:var(--schaduw-hoog);padding:10px}
  .kop.open .menu a{font-size:18px;padding:14px 16px}
}
@media (max-width:420px){.kop-acties .knop-rood{display:none}}

/* held */
.held{padding:48px 0 40px}
.held .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.held-foto{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/4.3;box-shadow:var(--schaduw-hoog)}
.held-foto img{width:100%;height:100%;object-fit:cover}
.held-label{position:absolute;left:16px;bottom:16px;right:16px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--r-m);padding:12px 16px;font-size:14px;color:var(--zwart);display:flex;gap:10px;align-items:center}
.eyebrow{display:inline-block;font-family:var(--rond);font-weight:600;font-size:14px;color:var(--rood-donker);background:var(--roze);border-radius:var(--pil);padding:6px 12px;margin-bottom:16px}
@media (max-width:900px){.held .wrap{grid-template-columns:1fr;gap:28px}.held-foto{aspect-ratio:16/10}.held{padding-top:24px}.held h1{font-size:32px}.eyebrow{margin-bottom:10px}}

/* postcodecheck: het hart van de site */
.check{background:var(--kaart);border-radius:var(--r-l);box-shadow:var(--schaduw-hoog);padding:22px;margin-top:26px;border:1px solid var(--lijn)}
.check h2{font-size:20px;margin:0 0 4px}
.check p.stil{margin:0 0 14px}
.velden{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:10px}
.veld label{display:block;font-size:13px;font-weight:600;color:var(--zwart);margin:0 0 5px;font-family:var(--rond)}
.veld input{width:100%;font:inherit;font-size:17px;padding:13px 14px;border-radius:var(--r-s);border:1.5px solid var(--lijn);background:var(--warm-licht);color:var(--zwart);transition:border-color .15s,background .15s}
.veld input:focus{outline:none;border-color:var(--rood);background:#fff}
.veld input[aria-invalid=true]{border-color:var(--rood)}
.check .knop{width:100%;margin-top:14px;padding:16px}
.fout{color:var(--rood-donker);font-size:14px;margin:8px 0 0;min-height:1em}
.uitkomst{display:none;margin-top:14px;border-radius:var(--r-m);background:var(--warm-licht);padding:16px 18px}
.uitkomst.zichtbaar{display:block;animation:op .35s ease}
@keyframes op{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:560px){.velden{grid-template-columns:1fr 1fr}.velden .veld:first-child{grid-column:1/-1}}
.velden .veld,.velden input{min-width:0}
@media (max-width:340px){.velden{grid-template-columns:1fr}}   /* 500% inzoomen: velden onder elkaar */

/* de vijfcirkel: laadt open tijdens het controleren */
.bloem{width:44px;height:44px;flex:none}
.bloem circle{fill:var(--rood);transform-origin:22px 22px;transform:scale(.25);opacity:.25}
.bezig .bloem circle{animation:bloei 1s ease-in-out infinite}
.bloem circle:nth-child(2){animation-delay:.12s}.bloem circle:nth-child(3){animation-delay:.24s}
.bloem circle:nth-child(4){animation-delay:.36s}.bloem circle:nth-child(5){animation-delay:.48s}
.klaar .bloem circle{transform:scale(1);opacity:1;transition:transform .4s cubic-bezier(.3,1.4,.5,1),opacity .3s}
@keyframes bloei{0%,100%{transform:scale(.3);opacity:.3}50%{transform:scale(1);opacity:1}}
.check-status{display:none;gap:12px;align-items:center;margin-top:12px}
.check-status.bezig,.check-status.klaar{display:flex}

/* secties */
.sectie{padding:72px 0}
.sectie-warm{background:var(--warm-licht)}
.sectie-kop{max-width:720px;margin-bottom:34px}
.diensten{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dienst{background:var(--kaart);border-radius:var(--r-l);padding:24px;box-shadow:var(--schaduw);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.dienst:hover{transform:translateY(-3px);box-shadow:var(--schaduw-hoog)}
.dienst .icoon{width:46px;height:46px;border-radius:14px;background:var(--roze);display:grid;place-items:center;margin-bottom:18px}
.dienst .icoon svg{width:24px;height:24px;stroke:var(--rood);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dienst p{font-size:15px;color:var(--grijs);flex:1}
.dienst .verder{font-family:var(--rond);font-weight:600;font-size:15px;color:var(--rood-donker)}
@media (max-width:1000px){.diensten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.diensten{grid-template-columns:1fr}.sectie{padding:52px 0}}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo-foto{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:8/7}
.duo-foto img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.duo{grid-template-columns:1fr;gap:28px}.duo.omgekeerd .duo-foto{order:-1}}
.vinkjes{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.vinkjes li{position:relative;padding-left:30px;font-size:15.5px;color:var(--zwart)}
.vinkjes li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--rood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
@media (max-width:560px){.vinkjes{grid-template-columns:1fr}}

.band{background:var(--zwart);color:#f2f2f2;border-radius:var(--r-xl);padding:44px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{color:#fff;margin:0;max-width:620px}
.band .knoppen{display:flex;gap:10px;flex-wrap:wrap}
.band .knop-zacht{background:rgba(255,255,255,.12);color:#fff}
.band .knop-zacht:hover{background:rgba(255,255,255,.2)}

/* formulier */
.formulier{background:var(--kaart);border-radius:var(--r-l);padding:28px;box-shadow:var(--schaduw);border:1px solid var(--lijn)}
.formulier .veld{margin-bottom:14px}
.formulier textarea{width:100%;font:inherit;padding:13px 14px;border-radius:var(--r-s);border:1.5px solid var(--lijn);background:var(--warm-licht);min-height:110px;resize:vertical}
.keuze{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.keuze label{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--pil);background:var(--warm-licht);border:1.5px solid var(--lijn);cursor:pointer;font-size:15px}
.keuze input{accent-color:var(--rood)}
.keuze label:has(input:checked){border-color:var(--rood);background:#fff}

/* netwerken (regiopagina) */
.netwerken{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.netwerk{background:var(--kaart);border-radius:var(--r-l);padding:22px;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:14px}
.netwerk-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.netwerk-kop img{max-height:44px;width:auto;max-width:150px}
.netwerk h3{margin:0;font-size:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;padding:7px 13px;border-radius:var(--pil);background:var(--warm-licht);color:var(--zwart);text-decoration:none;font-size:14.5px;border:1px solid var(--lijn)}
.chip:hover{border-color:var(--rood);color:var(--rood-donker)}
.netwerk .info{font-size:14px;color:var(--stil);text-decoration:none}
.apparaten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.apparaten figure{margin:0;background:#fff;border-radius:var(--r-l);padding:24px;display:grid;place-items:center;box-shadow:var(--schaduw)}
.apparaten img{max-height:170px;width:auto}

/* OKS */
.oks-held{background:linear-gradient(180deg,var(--warm-licht),#fff);padding:56px 0 30px;text-align:center}
.zoek{position:relative;max-width:720px;margin:24px auto 0}
.zoek input{width:100%;font:inherit;font-size:19px;padding:20px 22px 20px 56px;border-radius:var(--pil);border:1.5px solid var(--lijn);background:#fff;box-shadow:var(--schaduw-hoog);color:var(--zwart)}
.zoek input:focus{outline:none;border-color:var(--rood)}
.zoek svg{position:absolute;left:22px;top:50%;transform:translateY(-50%);width:22px;height:22px;stroke:var(--stil);fill:none;stroke-width:2}
.vragen{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.vragen button{font:inherit;font-size:14.5px;padding:8px 14px;border-radius:var(--pil);border:1px solid var(--lijn);background:#fff;color:var(--zwart);cursor:pointer}
.vragen button:hover{border-color:var(--rood)}
.status{max-width:720px;margin:22px auto 0;text-align:left;border-radius:var(--r-l);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--lijn)}
.status .stip{width:12px;height:12px;border-radius:50%;margin-top:7px;flex:none;background:#2fa36b;box-shadow:0 0 0 5px rgba(47,163,107,.15)}
.status.melding .stip{background:var(--actie);box-shadow:0 0 0 5px rgba(231,172,0,.18)}
.status strong{font-family:var(--rond);color:var(--zwart)}
.status a{font-size:15px}
.resultaten{max-width:720px;margin:18px auto 0;text-align:left}
.resultaten[hidden]{display:none}
.resultaat{display:block;padding:16px 18px;border-radius:var(--r-m);text-decoration:none;color:inherit;background:#fff;border:1px solid transparent;margin-bottom:4px}
.resultaat:hover,.resultaat:focus-visible{border-color:var(--lijn);box-shadow:var(--schaduw)}
.resultaat h3{font-size:17px;margin:0 0 4px}
.resultaat p{margin:0;font-size:14.5px;color:var(--grijs)}
.resultaat mark{background:var(--roze);color:inherit;border-radius:4px;padding:0 2px}
.meta{font-size:13px;color:var(--stil);margin-top:6px;display:flex;gap:8px;align-items:center}
.label{font-size:12px;font-weight:600;border-radius:var(--pil);padding:2px 9px;background:var(--warm-vlak);color:var(--grijs)}
.label.opgelost{background:#e3f4ea;color:#1f7a4c}
.leeg{padding:20px;text-align:center;color:var(--grijs)}
.categorieen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.categorie{background:#fff;border-radius:var(--r-l);padding:22px;box-shadow:var(--schaduw)}
.categorie h3{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.categorie h3 span{font-size:13px;color:var(--stil);font-weight:500}
.categorie ul{list-style:none;padding:0;margin:0}
.categorie li{border-top:1px solid var(--warm-vlak)}
.categorie li a{display:block;padding:9px 0;text-decoration:none;color:var(--zwart);font-size:15px}
.categorie li a:hover{color:var(--rood-donker)}
.categorie .alle{display:inline-block;margin-top:10px;font-size:14px;font-family:var(--rond);font-weight:600;text-decoration:none}
@media (max-width:900px){.categorieen{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.categorieen{grid-template-columns:1fr}.zoek input{font-size:17px}}

/* voet */
.voet{background:var(--warm);margin-top:72px;padding:56px 0 36px;font-size:15px}
.voet .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.voet h4{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--zwart)}
.voet ul{list-style:none;padding:0;margin:0}
.voet li{margin:6px 0}
.voet a{color:var(--tekst);text-decoration:none}
.voet a:hover{color:var(--rood-donker)}
.voet-onder{grid-column:1/-1;border-top:1px solid var(--lijn);padding-top:18px;color:var(--stil);font-size:13px}
@media (max-width:760px){.voet .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.voet .wrap{grid-template-columns:1fr}}   /* ook bij 400-500% inzoomen niets buiten beeld */
/* Volledige site: bouwstenen uit de omzetter */
.sr-focus:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:#fff;padding:10px 14px;border-radius:var(--r-s);box-shadow:var(--schaduw-hoog)}
.blok{padding:56px 0;background-color:var(--vlak,transparent);background-size:cover;background-position:center}
.blok-vlak{--vlak:var(--warm-licht)}
.blok + .blok:not(.blok-vlak):not(.blok-beeld){padding-top:8px}
.blok-beeld{position:relative;color:#fff}
.blok-beeld::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,30,.35),rgba(30,30,30,.55))}
.blok-beeld .wrap{position:relative}
.blok-beeld h1,.blok-beeld h2,.blok-beeld h3,.blok-beeld p{color:#fff}
.rij{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin:0 0 24px}
.rij:last-child{margin-bottom:0}
.rij-midden{align-items:center}
.kol{grid-column:span var(--b,12);min-width:0}
.kol-vlak{background:var(--vlak);border-radius:var(--r-l);padding:24px}
/* Contactpagina: regels met een icoon ervoor en rechts een beige vlak, zoals op de oude site */
.icoon-regel{display:flex;gap:16px;align-items:flex-start;margin:0 0 24px}
.icoon-regel:last-child{margin-bottom:0}
.icoon-regel .icoon{flex:none;width:46px;height:46px;border-radius:14px;background:#fdecee;display:grid;place-items:center}
.icoon-regel .icoon svg{width:24px;height:24px;stroke:var(--rood);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icoon-regel-tekst{min-width:0;padding-top:11px}
.icoon-regel-tekst h2{font-size:clamp(20px,2vw,24px);margin:0 0 8px}
.icoon-regel-tekst p{margin:0 0 8px}
.sociaal{display:flex;flex-wrap:wrap;gap:8px}
.sociaal-knop{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--rood);color:#fff;font-family:var(--rond);font-weight:700;font-size:17px;line-height:1;text-decoration:none;transition:background .2s}
.sociaal-knop:hover,.sociaal-knop:focus-visible{background:var(--rood-donker);color:#fff}
.blok-contact .kol-vlak{padding:clamp(24px,3vw,40px)}
.kol-vlak .icoon-regel .icoon{background:#fff}
.blok-contact .kol:not(.kol-vlak):not(.kol-leeg){padding-top:clamp(24px,3vw,40px)}   /* Informatie op een lijn met de eerste kop in het vlak */
.kol-beeld{background-size:cover;background-position:center;border-radius:var(--r-l);min-height:300px}
@media (max-width:900px){.rij{grid-template-columns:repeat(6,minmax(0,1fr))}.kol{grid-column:span min(var(--b,12),6)}.rij[data-kolommen="4"] .kol,.rij[data-kolommen="3"] .kol{grid-column:span 3}.kol-leeg{display:none}}
@media (max-width:600px){.rij{grid-template-columns:1fr;gap:16px}.kol,.rij[data-kolommen="4"] .kol,.rij[data-kolommen="3"] .kol{grid-column:1/-1}.blok{padding:40px 0}}
.ruimte{height:var(--h,32px)}
@media (max-width:600px){.ruimte{height:calc(var(--h,32px)/2)}}
.tekst > :last-child{margin-bottom:0}
.tekst h2,.tekst h3,.tekst h4,.tekst h5{margin-top:.6em}
.tekst h5{font-size:16px;font-family:var(--rond);color:var(--zwart);margin:.4em 0}
.tekst ul,.tekst ol{padding-left:1.2em}
.tekst img{border-radius:var(--r-m);margin:12px 0}
.tekst img.midden,.midden img,figure.midden{margin-left:auto;margin-right:auto}
.midden{text-align:center}
.rechts{text-align:right}
.rood{color:var(--rood-donker)}
mark{background:none;color:inherit}
.oranje{color:#ff6900}
.groot{font-size:clamp(26px,3.4vw,38px)}
.wit{color:#fff}
.knop-donker{background:var(--zwart);color:#fff}
.knop-licht{background:rgba(255,255,255,.92);color:var(--zwart)}
.knoppen{display:flex;gap:10px;flex-wrap:wrap}
.midden .knoppen,.knoppen.midden{justify-content:center}
.tekst a.knop{margin:4px 0}
.beeld{margin:0 0 16px}
.beeld img{border-radius:var(--r-l);width:auto;max-width:100%}
.logo-klein img{max-height:64px;width:auto;border-radius:0;margin:0 auto}
.kol{display:flex;flex-direction:column}
.kol > .dienst{flex:1 1 auto}
.kol > .ruimte{flex:none}
.dienst-tekst h3{font-size:20px;margin-bottom:8px}
.dienst-tekst p{font-size:15px;color:var(--grijs)}
.prijs{font-family:var(--rond);font-weight:700;color:var(--zwart);font-size:20px}
.ukraster{display:flex;flex-wrap:wrap;gap:16px}
.uk14{flex:1 1 calc(25% - 16px);min-width:150px}
.uk24{flex:1 1 calc(50% - 16px);min-width:220px}
.uk13{flex:1 1 calc(33% - 16px);min-width:180px}
.uk23{flex:1 1 calc(66% - 16px);min-width:240px}
.netwerkbox{background:#fff;border-radius:var(--r-l);padding:20px;box-shadow:var(--schaduw);margin-bottom:16px}
.chips a{display:inline-block;padding:6px 12px;margin:3px;border-radius:var(--pil);background:var(--warm-licht);border:1px solid var(--lijn);color:var(--zwart);text-decoration:none;font-size:14.5px}
.chips a:hover{border-color:var(--rood);color:var(--rood-donker)}
.uitklappen{display:grid;gap:10px}
/* Storingen: actueel bovenaan, het archief dichtgeklapt */
h2.actueel{font-size:22px;margin:28px 0 12px}
.lijst > .status{max-width:none;margin:0}
.uitklap.archief{margin-top:28px}
.uitklap.archief > .lijst{padding-bottom:18px}
.uitklap{background:#fff;border:1px solid var(--lijn);border-radius:var(--r-m);padding:0 18px}
.uitklap summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-family:var(--rond);font-weight:600;color:var(--zwart);position:relative}
.uitklap summary::-webkit-details-marker{display:none}
.uitklap summary::after{content:"";position:absolute;right:2px;top:50%;width:9px;height:9px;border-right:2px solid var(--stil);border-bottom:2px solid var(--stil);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.uitklap[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.uitklap .tekst{padding:0 0 16px}
.tabel{overflow-x:auto;border-radius:var(--r-m);border:1px solid var(--lijn);margin:12px 0}
.tabel table,.tekst table{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.tabel th{background:var(--warm-licht);text-align:left;font-family:var(--rond);color:var(--zwart)}
.tabel th,.tabel td,.tekst td{padding:10px 12px;border-bottom:1px solid var(--warm-vlak);vertical-align:top}
.video{display:flex;align-items:center;gap:12px;padding:18px 20px;border-radius:var(--r-l);background:var(--zwart);color:#fff;text-decoration:none;font-family:var(--rond);font-weight:600}
.video-knop{width:44px;height:44px;border-radius:50%;background:var(--rood);display:grid;place-items:center}
.formulier .veld input,.formulier .veld select{width:100%;font:inherit;padding:13px 14px;border-radius:var(--r-s);border:1.5px solid var(--lijn);background:var(--warm-licht)}
.formulier-tekst{font-size:15px;color:var(--grijs);margin:0 0 10px}
.akkoord{display:flex;gap:8px;align-items:flex-start;font-size:15px;margin-bottom:12px}
.check-kop{font-family:var(--rond);font-weight:700;color:var(--zwart);font-size:20px;margin:0 0 4px}
.blok-beeld .check,.blok-beeld .formulier{color:var(--tekst)}
.blok-beeld .check p,.blok-beeld .formulier p{color:var(--grijs)}
.blok-beeld .check .check-kop{color:var(--zwart)}

/* Slideshow (vervangt RevSlider) */
.slider-wrap{margin:0 0 8px}
.slider{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(320px,42vw,520px);background:var(--warm);box-shadow:var(--schaduw-hoog)}
.dia{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:flex-end;opacity:0;transition:opacity .7s ease;visibility:hidden}
.dia.actief{opacity:1;visibility:visible;position:relative;min-height:inherit}
.dia::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,30,0) 30%,rgba(30,30,30,.55))}
.dia-tekst{position:relative;padding:clamp(22px,4vw,48px);max-width:760px;color:#fff}
.dia-tekst .dia-kop{font-family:var(--rond);font-weight:700;font-size:clamp(28px,4.4vw,52px);line-height:1.1;color:#fff;margin:0 0 10px;letter-spacing:-.015em}
.dia-tekst p{color:#fff;font-size:clamp(17px,1.7vw,21px);margin:0 0 6px;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.dia-tekst .knoppen{margin-top:16px}
.dia-beelden{position:absolute;right:clamp(14px,3vw,36px);top:clamp(14px,3vw,36px);display:flex;gap:10px;max-width:40%}
.dia-beelden img{max-height:clamp(70px,14vw,170px);width:auto}
.slider-nav{position:absolute;right:16px;bottom:16px;display:flex;gap:6px;align-items:center;z-index:2}
.slider-nav button{border:0;cursor:pointer;background:rgba(255,255,255,.85);color:var(--zwart);border-radius:var(--pil)}
.slider .dia{opacity:1;visibility:visible;transform:translateX(100%);transition:transform .8s cubic-bezier(.4,0,.2,1)}
.slider .dia:first-child{transform:none}
.slider .dia.actief{transform:none}
@media (prefers-reduced-motion:reduce){.slider .dia{transition:none}}
.slider-vorige,.slider-volgende{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:var(--pil);background:rgba(255,255,255,.85);color:var(--zwart);cursor:pointer;box-shadow:var(--schaduw-hoog);backdrop-filter:blur(4px);transition:background .2s,color .2s,transform .2s}
.slider-vorige svg,.slider-volgende svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slider-vorige{left:clamp(12px,2.5vw,32px)}
.slider-volgende{right:clamp(12px,2.5vw,32px)}
.slider-vorige:hover,.slider-volgende:hover{background:var(--rood);color:#fff;transform:translateY(-50%) scale(1.06)}
.slider-vorige:focus-visible,.slider-volgende:focus-visible{outline:3px solid #fff;outline-offset:2px}
.slider-wrap .slider-nav{left:50%;right:auto;bottom:clamp(18px,3vw,34px);top:auto;transform:translateX(-50%);gap:10px}
.slider-nav .slider-stip{width:15px;height:15px;padding:0;border-radius:50%;background:rgba(255,255,255,.3);opacity:1;box-shadow:inset 0 0 0 2px transparent;transition:all .3s}
.slider-nav .slider-stip.actief{width:15px;background:radial-gradient(circle,#fff 0 3px,transparent 3.5px);box-shadow:inset 0 0 0 2px #fff}
.slider-stip{width:9px;height:9px;padding:0;opacity:.6}
.slider-stip.actief{width:24px;opacity:1;background:#fff}
@media (max-width:600px){.slider{border-radius:var(--r-l)}.dia-beelden{display:none}}

/* Menu met submenu */
.menu li{position:relative;list-style:none}
.sub{display:none;position:absolute;left:0;top:100%;min-width:230px;background:#fff;border-radius:var(--r-m);box-shadow:var(--schaduw-hoog);padding:8px;margin:6px 0 0;list-style:none}
.sub a{font-weight:400;font-size:15px;border-radius:10px}
.heeft-sub:hover .sub,.heeft-sub:focus-within .sub{display:block}
.heeft-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.sub-knop{display:none}
.alleen-mobiel{display:none}
@media (max-width:900px){
  .kop.open .menu{max-height:calc(100vh - 90px);overflow:auto}
  .kop.open .alleen-mobiel{display:block}
  .heeft-sub{display:flex;flex-wrap:wrap;align-items:center}
  .heeft-sub > a{flex:1}
  .sub-knop{display:block;width:44px;height:44px;border:0;background:var(--warm-licht);border-radius:50%;position:relative;cursor:pointer}
  .sub-knop::after{content:"";position:absolute;left:50%;top:45%;width:8px;height:8px;border-right:2px solid var(--zwart);border-bottom:2px solid var(--zwart);transform:translate(-50%,-50%) rotate(45deg)}
  .heeft-sub:hover .sub,.heeft-sub:focus-within .sub{display:none}
  .heeft-sub.open .sub,.heeft-sub.open:hover .sub{display:block;position:static;box-shadow:none;width:100%;padding:0 0 6px 12px;margin:0}
}

/* OKS: artikel, categorie, kruimelpad */
.smal{max-width:860px}
.kruimel ol{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--stil)}
.kruimel li+li::before{content:"\203A";margin-right:6px}
.kruimel a{color:var(--grijs);text-decoration:none}
.artikel-raster{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.artikel h1{font-size:clamp(28px,3.6vw,42px)}
.artikel .meta{margin:0 0 24px}
.artikel .tekst{font-size:17px}
.artikel-zij{display:grid;gap:16px;position:sticky;top:90px}
.zij-kaart{background:var(--warm-licht);border-radius:var(--r-l);padding:18px}
.zij-kaart .zoek{margin:0}
.zij-kaart .zoek input{font-size:15px;padding:12px 14px 12px 42px;box-shadow:none}
.zij-kaart .zoek svg{left:14px;width:18px;height:18px}
.zij-kaart ul{list-style:none;padding:0;margin:0}
.zij-kaart li{padding:7px 0;border-top:1px solid var(--warm-vlak);font-size:15px}
.zij-kaart li a{text-decoration:none;color:var(--zwart)}
.zij-kop{font-family:var(--rond);font-weight:700;color:var(--zwart);margin:0 0 10px}
.zij-kaart .resultaten{margin-top:10px}
@media (max-width:900px){.artikel-raster{grid-template-columns:1fr}.artikel-zij{position:static}}
.lijst{margin-top:20px}
.lijst .resultaat{border-color:var(--lijn);margin-bottom:10px}
.lijst .resultaat h2{font-size:18px;margin:0 0 4px}
.categorie h2{display:flex;justify-content:space-between;align-items:center;font-size:18px}
.categorie h2 span{font-size:13px;color:var(--stil);font-weight:500}
.voet-kop{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--zwart)}

.blok-donker{background:var(--zwart);color:#f2f2f2;border-radius:var(--r-xl);margin:24px auto;max-width:calc(var(--breed) - 40px);padding:48px 0}
.blok-donker h1,.blok-donker h2,.blok-donker h3,.blok-donker p{color:#fff}
.blok-donker .knop-donker{background:rgba(255,255,255,.14);color:#fff}
.blok-donker .knop-donker:hover{background:rgba(255,255,255,.24)}
@media (max-width:1200px){.blok-donker{margin:24px 20px}}
.wit{color:inherit}
.blok-beeld .wit,.blok-donker .wit{color:#fff}
.formulier .keuze{margin-bottom:16px}

/* Slideshow over de volle breedte (wens Thomas 08-10-2026) */
.slider-wrap{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:0}
.slider-wrap .slider{border-radius:0;box-shadow:none;min-height:clamp(380px,44vw,620px)}
.slider-wrap .dia-tekst{padding-left:max(20px,calc((100vw - var(--breed))/2 + 20px));padding-right:20px;padding-bottom:clamp(28px,5vw,64px);max-width:none}
.slider-wrap .dia-tekst > *{max-width:760px}
.slider-wrap .slider:has(.slider-vorige) .dia-tekst{padding-left:max(96px,calc((100vw - var(--breed))/2 + 20px));padding-right:96px}   /* tekst vrij van de pijlen */
.slider-wrap .dia-beelden{right:max(20px,calc((100vw - var(--breed))/2 + 20px))}
main > .blok:first-child:has(.slider-wrap){padding-top:0}
@media (max-width:600px){.slider-wrap .slider-nav{top:auto;bottom:16px;right:auto}.slider-wrap .dia-tekst,.slider-wrap .slider:has(.slider-vorige) .dia-tekst{padding-left:56px;padding-right:56px;padding-bottom:52px}.slider-vorige,.slider-volgende{width:38px;height:38px}.slider-vorige svg,.slider-volgende svg{width:18px;height:18px}.slider-vorige{left:10px}.slider-volgende{right:10px}}
main > .blok:first-child:has(.slider-wrap){padding-bottom:0}
/* Tekst in de hero schuift van boven in beeld, zoals de slider op de oude site (start 0,3 s, 2 s, power4.inOut); bij elke nieuwe dia opnieuw */
@keyframes dia-in{from{opacity:0;transform:translateY(-48px)}to{opacity:1;transform:none}}
.dia.actief .dia-tekst > *{animation:dia-in 2s cubic-bezier(.77,0,.175,1) .3s both}
.dia.actief .dia-tekst > :nth-child(2){animation-delay:.5s}
.dia.actief .dia-tekst > :nth-child(n+3){animation-delay:.7s}
.dia.actief .dia-beelden{animation:dia-in 2s cubic-bezier(.77,0,.175,1) .9s both}
@media (prefers-reduced-motion:reduce){.dia.actief .dia-tekst > *,.dia.actief .dia-beelden{animation:none}}
/* Tekst in de hero in het midden, zoals op de oude site (wens Thomas 27-10-2026) */
.slider-wrap .dia{align-items:center;justify-content:center}
.slider-wrap .dia::before{background:linear-gradient(180deg,rgba(45,41,38,.18),rgba(45,41,38,.38) 50%,rgba(45,41,38,.3))}
.slider-wrap .dia-tekst,.slider-wrap .slider:has(.slider-vorige) .dia-tekst{text-align:center;padding:clamp(28px,5vw,64px) clamp(104px,10vw,140px);max-width:none;width:100%}   /* tekst vrij van de pijlen (tablet 768: 104px) */
.slider-wrap .dia-tekst > *{max-width:900px;margin-left:auto;margin-right:auto}
.slider-wrap .dia-tekst .dia-kop,.slider-wrap .dia-tekst p{text-shadow:0 2px 16px rgba(0,0,0,.35)}
.slider-wrap .dia-tekst .knoppen{justify-content:center}
@media (max-width:600px){.slider-wrap .dia-tekst,.slider-wrap .slider:has(.slider-vorige) .dia-tekst{padding:36px 56px 56px}}

/* Het gevoel van de oude site: vlakken van rand tot rand (wens Thomas 08-10-2026) */
.blok-vol{padding:0}
.rij-vol{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);gap:0;margin-bottom:0}
.rij-vol > .kol{border-radius:0;min-height:clamp(380px,40vw,620px);justify-content:center}
.rij-vol > .kol-beeld{background-size:cover;background-position:center}
.rij-vol > .kol-vlak,.rij-vol > .kol:not(.kol-beeld){padding:clamp(48px,8vw,130px) clamp(24px,7vw,120px)}
.rij-vol > .kol > *{max-width:600px}
.rij-vol > .kol:first-child:not(.kol-beeld) > *{margin-left:auto}
@media (max-width:600px){.rij-vol > .kol-beeld{min-height:260px}.rij-vol > .kol{min-height:0}}
.blok-rood{background:var(--rood);color:#fff;border-radius:0;margin:0;max-width:none;padding:clamp(44px,6vw,72px) 0}
.blok-rood h1,.blok-rood h2,.blok-rood h3,.blok-rood p,.blok-rood .wit{color:#fff}
.blok-rood .knop-donker{background:#fff;color:var(--rood-donker)}
.blok-rood .knop-donker:hover{background:#f7f4ec}
.blok-rood .knop-rood{background:var(--zwart);color:#fff}
/* opsommingen met de rode ster van de oude site, in één kolom */
.vinkjes,.tekst .vinkjes{grid-template-columns:1fr !important;gap:10px;padding-left:0}
.vinkjes li::before{border-radius:0;background:var(--rood);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.8-4.9 4.6 1.3 6.6L12 17.2l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.8-4.9 4.6 1.3 6.6L12 17.2l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center/contain no-repeat;width:17px;height:17px;top:4px}
.menu a{font-weight:500}
.rij-vol,.rij-vol.rij-midden{align-items:stretch}

/* Titelband van het oude thema (pagina's zonder slider) */
.titelband{width:100%;min-height:clamp(220px,24vw,350px);display:flex;align-items:flex-end;background:var(--warm) center/cover no-repeat;position:relative;padding:40px 0}
.titelband h1{margin:0;position:relative}
.titelband > .wrap{width:100%;min-width:0}   /* flex-item: mag smaller dan het langste woord, anders steekt de titel uit bij 500% zoom */
.titelband-foto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,30,.05) 30%,rgba(30,30,30,.55))}
.titelband-foto h1{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.25)}
/* Titelband zoals de hero met slider: titel in het midden en van boven in beeld (wens Thomas 31-10-2026) */
.titelband{align-items:center}
.titelband > .wrap{text-align:center}
.titelband-foto::before{background:linear-gradient(180deg,rgba(45,41,38,.18),rgba(45,41,38,.38) 50%,rgba(45,41,38,.3))}
.titelband h1{animation:dia-in 2s cubic-bezier(.77,0,.175,1) .3s both}
@media (prefers-reduced-motion:reduce){.titelband h1{animation:none}}
/* Rij met een eigen achtergrond: rand tot rand */
.rij-band{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:var(--vlak,transparent) center/cover;padding:clamp(40px,5vw,72px) 0;margin-bottom:24px}
.rij-band > .rij{max-width:var(--breed);margin:0 auto;padding:0 20px}
/* OKS: de rode band van de oude klantenservice */
.oks-held{background:#6b6b6b;  /* donkergrijze band, zoals de OKS op de huidige globalxs.nl */ padding:clamp(44px,6vw,72px) 0 clamp(36px,5vw,56px)}
.oks-held h1{color:#fff}
.oks-held .zoek input{border-color:transparent}
.oks-held .vragen button{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.oks-held .vragen button:hover{background:rgba(255,255,255,.24);border-color:#fff}
.oks-held .status{border-color:transparent}

/* Dienstblokken: één raster, gelijke hoogtes en tussenruimte (wens Thomas) */
.diensten-raster{display:grid;grid-template-columns:repeat(var(--kol),minmax(0,1fr));grid-template-rows:repeat(var(--rijen),auto);grid-auto-flow:column;gap:20px;margin:0 0 24px}
.diensten-raster > .dienst{height:100%;margin:0}
@media (max-width:760px){.diensten-raster{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}
/* Vlakken van rand tot rand sluiten naadloos op elkaar aan */
.blok.blok-vol,.blok + .blok.blok-vol{padding:0}
.blok-vol > .rij-vol,.rij-vol{margin-top:0;margin-bottom:0}
.blok-vol + .blok-vol{margin-top:0}

/* Kaarten die toch in een kolom gestapeld staan: altijd tussenruimte */
.kol > .dienst + .dienst,.kol > .dienst + .ruimte + .dienst{margin-top:20px}
.kol > .dienst{flex:0 0 auto}
/* Een kaart alleen in zijn kolom: even hoog als de rest van de rij, de knop onderaan */
.kol:not(:has(> .dienst ~ .dienst)) > .dienst{flex:1 1 auto}
.dienst-tekst{flex:1 0 auto}
.diensten-raster[style*="--kol:1"]{max-width:760px;margin-left:auto;margin-right:auto}

/* Netwerkkaarten op de regiopagina's */
.netwerken-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px;align-items:stretch;margin:0 0 24px}
.netwerk-kaart{background:#fff;border-radius:var(--r-l);box-shadow:var(--schaduw);padding:22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.netwerk-kaart .beeld{margin:0 0 6px;max-width:100% !important}
.netwerk-kaart .beeld img,.netwerk-kaart img{max-height:52px;max-width:100%;width:auto;margin:0;object-fit:contain}
.netwerk-kaart .logo-klein img{margin:0}
.netwerk-kaart .tekst{display:flex;flex-direction:column;gap:6px}
.netwerk-kaart .tekst p{margin:0}
.netwerk-kaart .midden{text-align:left}
.netwerk-kaart .knop{order:9;align-self:flex-start;padding:7px 14px;font-size:13px;background:var(--warm-licht);color:var(--zwart)}
.netwerk-kaart .knop:hover{background:var(--warm-vlak)}
.netwerk-kaart h5,.netwerk-kaart h4{font-size:17px;margin:4px 0 2px}
.netwerk-kaart .tekst a:not(.knop){display:inline-block;padding:5px 11px;margin:2px 4px 2px 0;border-radius:var(--pil);background:var(--warm-licht);border:1px solid var(--lijn);color:var(--zwart);text-decoration:none;font-size:14px}
.netwerk-kaart .tekst a:not(.knop):hover{border-color:var(--rood);color:var(--rood-donker)}
.netwerk-kaart .tekst p:has(> a:not(.knop)){display:flex;flex-wrap:wrap}
/* Uitklapblokken los van elkaar */
.uitklap + .uitklap,.uitklap + .tekst,.tekst + .uitklap{margin-top:10px}
.kol > .uitklap:last-child{margin-bottom:16px}
/* Artikelen en tekst nooit breder dan het scherm */
.artikel-raster{grid-template-columns:minmax(0,1fr) 320px}
@media (max-width:900px){.artikel-raster{grid-template-columns:minmax(0,1fr)}}
.tekst,.artikel,.kruimel{overflow-wrap:anywhere;min-width:0}
.tekst table{display:block;overflow-x:auto;max-width:100%}
.tekst pre{white-space:pre-wrap}
.tekst iframe,.tekst video{max-width:100%}
.blok.blok-vol{padding:0 !important;margin:0 !important}
.blok-vol .rij-vol{margin:0 calc(50% - 50vw) !important}
.kol > .uitklap + .kol,.uitklap + .rij{margin-top:16px}
.kol > .uitklap:last-child,.uitklappen:last-child{margin-bottom:16px}
/* Vaste afstand tussen tekst en een kaart eronder (formulier, postcodecheck, uitklapblok, tabel) */
.kol > * + .formulier,.kol > * + .check,.kol > * + .uitklap,.kol > * + .uitklappen,.kol > * + .tabel,.kol > .uitklap + *,.kol > .uitklappen + *,.wrap > * + .formulier,.wrap > * + .check{margin-top:20px}
.tekst > :last-child{margin-bottom:0}
@media (max-width:600px){.rij-vol > .kol-beeld{order:-1}}
@media (max-width:600px){.rij-vol > .kol.kol-beeld{min-height:clamp(240px,62vw,320px)}}
/* Zenderlogo's (svg zonder eigen maat) in tabellen: zelfde maat als de oude site, 80x50 */
td img[src$=".svg"],th img[src$=".svg"]{width:80px;height:50px;max-width:none;object-fit:contain;margin:0;border-radius:0}
.tabel img.zenderlogo{width:80px;height:50px;max-width:none;object-fit:contain;margin:0;border-radius:0}   /* ook png-logo's 80x50 */
.tabel img.optie-icoon{width:auto;height:26px;max-width:none;margin:0;border-radius:0}                    /* pictogrammen zoals de oude site */
.tabel-zoek label{display:block}
.tabel-leeg{margin:12px 0;padding:16px 18px;border-radius:var(--r-m);background:var(--warm-licht);color:var(--grijs)}
table.sorteerbaar th{padding:0}
table.sorteerbaar .sorteer{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;padding:10px 12px;cursor:pointer;font:inherit;color:inherit;white-space:nowrap}
table.sorteerbaar .sorteer::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;opacity:.35;margin-left:auto}
table.sorteerbaar th[aria-sort=ascending] .sorteer::after{border-top:0;border-bottom:4px solid currentColor;opacity:1}
table.sorteerbaar th[aria-sort=descending] .sorteer::after{opacity:1}
table.sorteerbaar .sorteer:focus-visible{outline:2px solid var(--rood);outline-offset:-2px}

/* Tabellen: koppen en cellen niet in losse letters afbreken */
.tekst table,.tekst th,.tekst td,.tabel th,.tabel td{overflow-wrap:normal;word-break:normal}
.tabel th,.tekst th{white-space:nowrap}
/* Zenderlogo's bovenaan het zenderoverzicht */
.logorij{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:24px;padding:12px 0}
.logorij img{height:64px;width:auto;max-width:150px;object-fit:contain;border-radius:0;margin:0}
/* Zoeken in lange tabellen */
.tabel-zoek{display:flex;justify-content:flex-end;margin:0 0 10px}
.tabel-zoek input{font:inherit;font-size:15px;padding:10px 14px;border-radius:var(--pil);border:1.5px solid var(--lijn);background:var(--warm-licht);min-width:240px}
.tabel-zoek input:focus{outline:none;border-color:var(--rood);background:#fff}
.logorij{flex-wrap:nowrap;justify-content:space-between;overflow-x:auto;gap:20px;scrollbar-width:none}
.logorij img{height:56px;max-width:120px;flex:none}

/* laadteken GlobalXS: draaiende ring */
.bloem-ring circle{stroke:var(--rood);fill:none!important}
.bloem-ring{animation:ring-draai 1s linear infinite}
@keyframes ring-draai{to{transform:rotate(360deg)}}
/* Smal scherm of ver ingezoomd: een woord dat niet op de regel past ("Onderhoudswerkzaamheden") breekt af met Nederlandse afbreekregels */
@media (max-width:420px){main :is(h1,h2,h3,h4,p,li,dd,summary,.dia-kop){overflow-wrap:break-word;hyphens:auto}}

/* ---------------------------------------------------------------- Bestelmodule (postcodecheck, aanbod, winkelwagen, aanmelden)
   Klassen zoals in de oude plugin order-intake, zodat assets/bestellen/bestellen.js ongewijzigd werkt. */
.bestellen{margin:12px 0}
#st_order{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;text-align:left}
#st_order .box{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r-l);padding:20px;box-shadow:var(--schaduw)}
#st_order .zipcheck{box-shadow:var(--schaduw-hoog)}
#st_order .check-kop{font-family:var(--rond);font-weight:700;font-size:20px;color:var(--zwart);margin:0 0 12px}
#st_order .title{font-family:var(--rond);font-weight:700;color:var(--zwart);margin:0 0 8px}
#st_order .zip-velden{display:grid;grid-template-columns:2fr 1.3fr 1fr;gap:10px}
#st_order .zip-velden label{display:block;min-width:0}
#st_order input[type=text],#st_order input[type=email],#st_order input[type=tel],#st_order input[type=date],#st_order select{width:100%;min-width:0;font:inherit;padding:12px 14px;border-radius:var(--r-s);border:1.5px solid var(--lijn);background:var(--warm-licht);color:var(--tekst);margin:0 0 10px;box-sizing:border-box}
#st_order .zip-velden input,#st_order .zip-velden select{margin:0}
#st_order input:focus,#st_order select:focus{outline:2px solid var(--rood);outline-offset:1px}
#st_order .user-content input.error.aangeraakt,#st_order .nummerbehoud input.error.aangeraakt{border-color:var(--rood);background:#fff5f5}
#st_order input.addressLine1{background:var(--warm);border-style:dashed}
#st_order .hidden{display:none}
#st_order .houseaddD,#st_order .houseadd + .houseaddD{margin-top:10px}
#st_order .checkbtn,#st_order .quotebtn{display:block;width:100%;margin-top:14px;text-align:center;cursor:pointer;box-sizing:border-box}
#st_order .checkbtn.disabled,#st_order .quotebtn.disabled{opacity:.45;cursor:not-allowed}
#st_order .quotebtn.bezig{opacity:.7;cursor:progress}
#st_order .loader{display:block;margin-top:10px;color:var(--grijs);font-size:15px}
#st_order .bestel-melding{margin:12px 0 0;padding:12px 14px;border-radius:var(--r-s);background:#fff5f5;color:var(--rood-donker);font-weight:600}
#st_order .noservice,#st_order .service,#st_order .addrAttention{margin-top:14px;background:var(--warm-licht);box-shadow:none}
#st_order .service{border-color:#cfe8d3;background:#f2faf3}
#st_order .addrAttention{margin:0 0 14px;border-color:#f3d2a6;background:#fff8ee}
#st_order .config{margin-top:14px;display:grid;gap:12px}
#st_order .config > .box{box-shadow:none}
#st_order .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
#st_order .topbar p{margin:0}
#st_order .choices{margin:0}
#st_order .choices + .choices{margin-top:8px}
#st_order .hideInForm{display:none}
#st_order .item{display:flex;justify-content:space-between;gap:12px;cursor:pointer;padding:14px 16px;border-radius:var(--r-m);border:1.5px solid var(--lijn);background:#fff;text-decoration:none;color:var(--tekst);margin-top:8px}
#st_order a.item:hover{border-color:#cdbfa9}
#st_order .item.selected{border-color:rgba(239,51,64,.5);background:#fffafa}   /* subtiel, geen waarschuwing (Matthijs 10-11-2026) */
#st_order .item .left{display:flex;flex-direction:column;gap:2px;min-width:0}
#st_order .item .left .type{font-weight:700;color:var(--zwart)}
#st_order .item .left .desc{font-size:14px;color:var(--grijs)}
#st_order .item .right{text-align:right;white-space:nowrap}
#st_order .item .right .price:before{content:"\20AC\00a0"}
#st_order .price.usual{text-decoration:line-through;opacity:.6;margin-right:6px}
#st_order .actionForm{display:block;color:var(--rood-donker);font-weight:600;font-size:14px}
#st_order .choices.topbar > p{flex:1;margin:0}
/* schakelaar (de plugin noemt hem .slider; niet verwarren met de hero) */
#st_order .switch{position:relative;display:inline-block;width:46px;height:26px;flex:none}
#st_order .switch input{opacity:0;width:0;height:0;position:absolute}
#st_order .switch .slider{position:absolute;inset:0;cursor:pointer;background:#cfc8bd;border-radius:999px;min-height:0;box-shadow:none;overflow:visible;transition:background .2s}
#st_order .switch .slider:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
#st_order .switch input:checked + .slider,#st_order .switch input:checked + label .slider{background:var(--rood)}
#st_order .switch input:checked + .slider:before,#st_order .switch input:checked + label .slider:before{transform:translateX(20px)}
#st_order .switch input:disabled + label .slider,#st_order .switch input:disabled + .slider{opacity:.6;cursor:default}
#st_order .switch input:focus-visible + .slider,#st_order .switch input:focus-visible + label .slider{outline:2px solid var(--rood);outline-offset:2px}
#st_order .switch > label{position:absolute;inset:0}
#st_order .nummerbehoud{margin-top:8px}
#st_order .user-content hr{border:0;border-top:1px solid var(--lijn);margin:20px 0 14px}
#st_order .user-content label{display:block;font-size:15px;color:var(--grijs);margin:0 0 6px}
#st_order .rij-velden{display:grid;grid-template-columns:1fr 2fr 1fr 2fr;gap:0 10px}
#st_order .vink{display:flex;gap:10px;align-items:flex-start;color:var(--tekst);margin:0 0 8px}
#st_order .vink input{margin-top:4px;accent-color:var(--rood);width:18px;height:18px;flex:none}
#st_order .vink input.error.aangeraakt{outline:2px solid var(--rood);outline-offset:2px}
#st_order #conditionList{margin:6px 0 0;padding-left:20px;font-size:15px}
#st_order .friend-error{display:block;margin:-6px 0 10px}
#st_order .lokveld-houder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#st_order .right{position:sticky;top:96px}
#st_order .receipt .costs{font-size:15px}
#st_order .receipt .listitem{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--lijn)}
#st_order .receipt .listitem .left{min-width:0;overflow:hidden;text-overflow:ellipsis}
#st_order .receipt .listitem .price{white-space:nowrap;text-align:right}
#st_order .receipt #action{display:block;font-size:12px;color:var(--rood-donker);font-weight:600}
#st_order .receipt .usual{text-decoration:line-through;opacity:.6;margin-right:4px}
#st_order .receipt b{display:block;margin:10px 0 4px;color:var(--zwart)}
#st_order .receipt hr{border:0;border-top:1px solid var(--lijn);margin:12px 0}
@media (max-width:900px){#st_order{grid-template-columns:minmax(0,1fr)}#st_order .right{position:static}}
@media (max-width:560px){#st_order .zip-velden{grid-template-columns:1fr 1fr}#st_order .zip-velden label:first-child{grid-column:1/-1}#st_order .rij-velden{grid-template-columns:1fr 1fr}}
@media (max-width:340px){#st_order .zip-velden,#st_order .rij-velden{grid-template-columns:1fr}#st_order .item{flex-direction:column}#st_order .item .right{text-align:left}}

/* Formulieren: groepen, fouten, gelukt, lokveld */
.formulier .groep[hidden]{display:none}
.formulier [aria-invalid=true]{border-color:var(--rood) !important;background:#fff5f5}
.formulier .keuze[aria-invalid=true]{outline:2px solid var(--rood);outline-offset:4px;border-radius:var(--r-s);background:none}
.formulier .fout{color:var(--rood-donker);font-weight:600;margin:12px 0 0}
.formulier .fout:empty{display:none}
.formulier .gelukt{margin:14px 0 0;padding:14px 16px;border-radius:var(--r-s);background:#f2faf3;border:1px solid #cfe8d3;color:var(--tekst);font-weight:600}
.formulier button[disabled]{opacity:.6;cursor:progress}
.lokveld-houder{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Toestemming voor Google Analytics (alleen als er een meet-ID is) */
.toestemming{position:fixed;left:16px;bottom:16px;z-index:60;max-width:420px;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r-l);box-shadow:var(--schaduw-hoog);padding:18px 20px}
.toestemming p{margin:0 0 12px;font-size:15px}
.toestemming-knoppen{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:480px){.toestemming{left:10px;right:10px;bottom:10px;max-width:none}}
.slider-wrap .dia-tekst .dia-kop,.slider-wrap .dia-tekst p{hyphens:manual}

/* ---- Opmerkingen Matthijs 10-11-2026 ---- */
/* 13. kopjes helemaal in kleine letters, ook de eerste letter (voetkoppen blijven bewust in hoofdletters) */
h1,h2,h3,h4,.dia-kop,.check-kop,.zij-kop{text-transform:lowercase}
/* 14. foto bovenaan hooguit 70% van de schermhoogte, zodat het begin van de tekst zichtbaar is */
.slider-wrap .slider{min-height:min(clamp(380px,44vw,620px),70vh)}
.titelband{min-height:min(clamp(220px,24vw,350px),70vh)}
/* 15. half doorzichtig kader achter de titel op de foto, zoals op de oude site */
.slider-wrap .dia-tekst .dia-kop,.titelband-foto h1{display:inline-block;background:rgba(45,41,38,.42);padding:.14em .5em .2em;border-radius:18px;max-width:100%;box-sizing:border-box}   /* niet breder dan het vak, ook bij 500% zoom */
/* 16. witte balk even hoog als op de huidige site (100 px, op de telefoon 60 px), inhoud verticaal in het midden */
.kop .wrap{height:100px}
.logo img{height:48px}
.kop.open .menu{top:calc(100% + 4px)}
#st_order .right{top:116px}
@media (max-width:900px){.kop .wrap{height:60px}.logo img{height:38px}#st_order .right{top:76px}}
/* 12. monteur staat onderaan de foto, zoals op de oude site: de afbeelding eindigt waar de foto eindigt */
.dia-beelden:has(img[src*="/Monteur"]){top:auto;bottom:0;align-items:flex-end}
.dia-beelden img[src*="/Monteur"]{max-height:clamp(170px,24vw,340px)}
.dia-beelden:has(img[src*="/Monteur"]) img:not([src*="/Monteur"]){align-self:center}
.slider-wrap .dia:has(.dia-beelden img[src*="/Monteur"]){align-items:flex-start}   /* titel bovenaan, zoals op de oude site, vrij van de monteur */
#st_order .privacy-regel{font-size:14px;color:var(--grijs);margin:0 0 12px 28px}

/* Keuzevakken na de postcodecheck (melding Thomas 10-11-2026): de rechterkolom was nowrap, waardoor een lange actietekst
   de productnaam tot een letter breed samenduwde en het vak buiten het scherm liep. Nu breekt de actietekst af, de prijs niet. */
#st_order .item .left{flex:1 1 auto}
#st_order .item .right{white-space:normal;flex:0 1 auto;max-width:45%}
#st_order .item .right .price{white-space:nowrap}
@media (max-width:600px){#st_order .item{flex-wrap:wrap}#st_order .item .right{max-width:none;flex-basis:100%;text-align:left}}
/* iOS zoomt in bij een veld met een letter kleiner dan 16px en zoomt daarna niet terug */
@media (max-width:900px){#st_order input:not([type=checkbox]):not([type=radio]),#st_order select,#st_order textarea{font-size:16px}}
/* Chat pas na een klik (voorstel voor Fiber 10-11-2026): eigen knop op de plek van de chatbel van Smartsupp */
.chat-knop{position:fixed;right:16px;bottom:16px;z-index:55;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-radius:999px;background:var(--zwart);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:var(--schaduw-hoog)}
.chat-knop:hover{background:#000}
.chat-knop:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
.chat-knop[disabled]{opacity:.75;cursor:progress}
@media (max-width:480px){.chat-knop{right:10px;bottom:10px;padding:11px 15px}}
/* cookiemelding (10-11-2026): kop en link; de melding staat boven de chatknop */
.toestemming .toestemming-kop{font-weight:700;color:var(--zwart);margin:0 0 6px;font-size:16px}
.toestemming a{color:var(--rood-donker)}

/* Weigeren even duidelijk als Accepteren (eis AP): een knop met rand, niet alleen tekst */
.toestemming .knop-licht{background:#fff;border:1.5px solid var(--zwart);color:var(--zwart)}
.toestemming-knoppen .knop{flex:1 1 140px;justify-content:center}

/* Opmerkingen Thomas 10-11-2026 (staging GlobalXS) */
/* na een vol vlak (foto naast tekst, rand tot rand) dezelfde lucht als tussen gewone blokken */
.blok-vol + .blok:not(.blok-vol):not(.blok-vlak):not(.blok-beeld){padding-top:56px}
@media (max-width:600px){.blok-vol + .blok:not(.blok-vol):not(.blok-vlak):not(.blok-beeld){padding-top:40px}}
/* vergelijkingstabel (internetbeveiliging): UIkit-rasterklassen in een tabel blijven gewone tabelrijen, lijnen lopen door */
.tekst tr.ukraster{display:table-row}
.tekst tr.ukraster > td,.tekst tr.ukraster > th{min-width:0}
.tekst table td{vertical-align:middle}
.tekst table th{padding:10px 12px;vertical-align:bottom}
.tekst table .uk24{width:50%}
.tekst table .uk14{width:25%}
/* rechte cijfers: in Raleway hangt de 1 anders onder de regel en staat 'alles-in-1:' scheef (Thomas, 10-11-2026) */
html{font-variant-numeric:lining-nums}