/* Website EDM Services B.V. (issues #1630, #1637). Tokens uit design/edm/project/tokens.json, alleen het donkere
 * thema; componenten uit design/edm/project/components/bundle.css (hieronder overgenomen).
 * Geen script: de tabbladen Producten/Diensten zijn twee radioknoppen en CSS, de pauzeknop van de
 * klantenband is een checkbox.
 * Drie lagen: basis = scrollende pagina; tot 1024px breed = aanraakmaten (tekst 16px, tikdoelen 44px);
 * vanaf 1280×800 = alles in één scherm. */

/* Letters: zelf gehost, SIL Open Font License (design/letterlicenties/). */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}

/* Tokens, thema donker (de site is alleen donker) */
:root{
color-scheme:dark;
--grond:#0C1430;--vlak:#141D40;--inkt:#F2F5FF;--gedempt:#9AA6C7;--lijn:#26315A;--lijn-sterk:#5A6694;--op-inkt:#0C1430;
--edm:#FF3B5C;--dossiercontrole:#00A36C;--glazenbol:#7A4DFF;--vaart:#0091FF;--datastekker:#FF6A1A;
--edm-tekst:#FF3B5C;--dossiercontrole-tekst:#00A36C;--glazenbol-tekst:#926DFF;--vaart-tekst:#0091FF;--datastekker-tekst:#FF6A1A;
--accent:var(--edm);--accent-tekst:var(--edm-tekst);
--aandacht:#F5B84A;--aandacht-vlak:#3A2E14;
--font-display:"Bricolage Grotesque",system-ui,sans-serif;--font-sans:"Instrument Sans",system-ui,sans-serif;
--ruimte-1:4px;--ruimte-2:8px;--ruimte-3:12px;--ruimte-4:16px;--ruimte-5:24px;--ruimte-6:32px;--ruimte-7:48px;--ruimte-8:72px;
--hoek-s:6px;--hoek-m:8px;--hoek-l:10px;--hoek-xl:14px;--hoek-rond:999px
}

/* EDM — componenten (bundle.css). Leest alleen tokens. Geen schaduwen, geen verlopen. */
[data-merk="edm"]{--accent:var(--edm);--accent-tekst:var(--edm-tekst)}
[data-merk="dossiercontrole"]{--accent:var(--dossiercontrole);--accent-tekst:var(--dossiercontrole-tekst)}
[data-merk="glazenbol"]{--accent:var(--glazenbol);--accent-tekst:var(--glazenbol-tekst)}
[data-merk="vaart"]{--accent:var(--vaart);--accent-tekst:var(--vaart-tekst)}
[data-merk="datastekker"]{--accent:var(--datastekker);--accent-tekst:var(--datastekker-tekst)}

.edm{font-family:var(--font-sans);font-size:15px;line-height:1.5;color:var(--inkt);background:var(--grond)}
.edm *{box-sizing:border-box}
.edm :focus-visible{outline:3px solid var(--accent-tekst);outline-offset:2px}
.edm :where(a){color:var(--accent-tekst)}

.edm-logo{display:inline-block;height:24px;width:auto;vertical-align:middle}
.edm-punt{color:var(--accent)}

.edm-kop{font-family:var(--font-display);color:var(--inkt);margin:0}
.edm-kop--display{font-weight:800;font-size:44px;line-height:.95;letter-spacing:-.035em}
.edm-kop--2{font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.01em}
.edm-kop--3{font-weight:700;font-size:18px;line-height:1.2}

.edm-knop{display:inline-flex;align-items:center;gap:var(--ruimte-2);font:600 14px/1.2 var(--font-sans);border:0;border-radius:var(--hoek-m);padding:8px 14px;cursor:pointer;text-decoration:none;background:var(--inkt);color:var(--op-inkt)}
.edm-knop:hover{background:var(--accent-tekst);color:var(--op-inkt)}

.edm-label{display:inline-block;font:600 13px/1.4 var(--font-sans);padding:3px 9px;border-radius:var(--hoek-rond);background:var(--vlak);color:var(--inkt);border:1px solid var(--lijn)}
.edm-label--aandacht{background:var(--aandacht-vlak);color:var(--aandacht);border-color:var(--aandacht-vlak)}
.edm-label--accent::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.edm-label--klein{font-size:12px;padding:1px 8px}

/* Navigatie: woordmerk links, menu rechts. Een menu-item is een link of een label voor een tabblad. */
.edm-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-2) var(--ruimte-5);padding:10px 0;border-bottom:1px solid var(--lijn)}
.edm-nav__menu{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--ruimte-1);margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.edm-nav__item{display:block;color:var(--gedempt);padding:6px 9px;border-radius:var(--hoek-s);font:400 14px/1.55 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;background:none;border:0;margin:0}
.edm-nav__item:hover{color:var(--inkt);background:var(--vlak)}
.edm-nav__item[aria-current="page"]{color:var(--inkt);box-shadow:inset 0 -2px 0 var(--accent)}
.woordmerk{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:24px;line-height:1;letter-spacing:-.035em;color:var(--inkt);white-space:nowrap;text-decoration:none}

/* Pagina: een gewone scrollende kolom; vanaf 1280×800 past alles in één scherm (onderaan). */
html,body{margin:0;min-height:100%;background:var(--grond)}
body{-webkit-font-smoothing:antialiased}
img{max-width:100%}
.site{min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--ruimte-4);flex:1;min-height:0;display:flex;flex-direction:column}
.wrap--voet{flex:0 0 auto}

.hero{padding:24px 0 12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px}
.hero__sub{margin:0;max-width:70ch;color:var(--gedempt);font-size:16px;line-height:1.5}

.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.raster-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* Tabbladen: de radioknoppen staan vooraan in .site; alles erna reageert via ~ */
.tabkeuze{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tab{background:var(--vlak);border:1.5px solid var(--lijn);border-radius:12px;min-height:76px;padding:12px 18px;display:flex;flex-direction:column;justify-content:center;gap:2px;cursor:pointer;color:var(--inkt);text-align:left}
.tab:hover{border-color:var(--lijn-sterk)}
.tab__kop{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.tab__sub{color:var(--gedempt);font-size:13px}
.cockpit{display:flex;flex-direction:column;gap:14px;padding-bottom:16px}
.paneel{display:none}
#tab-producten:checked~.wrap .paneel--producten,#tab-diensten:checked~.wrap .paneel--diensten{display:grid}
#tab-producten:checked~.wrap .tab--producten,#tab-diensten:checked~.wrap .tab--diensten{border-color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
#tab-producten:checked~.wrap .menu--producten,#tab-diensten:checked~.wrap .menu--diensten{color:var(--inkt);box-shadow:inset 0 -2px 0 var(--accent)}
#tab-producten:focus-visible~.wrap .tab--producten,#tab-diensten:focus-visible~.wrap .tab--diensten{outline:3px solid var(--accent-tekst);outline-offset:2px}

/* Kaarten */
.kaart{border:1px solid var(--lijn);border-top:4px solid var(--accent);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.kaart--dienst{border-top-color:var(--inkt)}
.kaart__kop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.kaart__sector{color:var(--gedempt);font-size:14px}
.kaart p{margin:0;font-size:14px}
.kaart__knop{align-self:flex-start;margin:2px 0}
.citaat{margin:4px 0 0;padding:10px 12px;background:var(--vlak);border-radius:8px;display:flex;flex-direction:column;gap:4px}
.citaat blockquote{margin:0;font-size:13px}
.citaat figcaption{font-size:12px;color:var(--gedempt)}
.citaat b{color:var(--inkt);font-weight:600}
.scherm{background:var(--grond);border:1px solid var(--lijn);border-radius:8px;padding:6px 12px;font-size:12px;display:flex;flex-direction:column}
.scherm__kop{color:var(--gedempt);font-size:12px;padding-bottom:6px}
.scherm__rij{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-top:1px solid var(--lijn)}
.scherm__ok{color:var(--gedempt)}
.scherm__winst{color:var(--accent-tekst);font-weight:600;text-align:right}

/* Aanpak: vier blokken */
.blokken{padding:0 0 16px}
.blokken .raster-2{gap:12px}
.blok{background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.blok p{margin:0;color:var(--gedempt);font-size:13px;line-height:1.45}
.blok ul{margin:2px 0 0;padding-left:18px;color:var(--gedempt);font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:2px}
.blok__voet{margin-top:auto;padding-top:8px;border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.blok__voet--kolom{flex-direction:column;align-items:flex-start;gap:2px}
.blok__voetkop{font-family:var(--font-display);font-weight:700;font-size:17px}
.blok__voettekst{flex:1;min-width:220px;color:var(--gedempt);font-size:13px}
.blok__voet a[href^="tel:"]{color:var(--inkt);font-weight:600;white-space:nowrap}

/* Klantenband: twee keer dezelfde lijst, de tweede verborgen voor hulpmiddelen. Pauzeren met de muis
 * (hover), het toetsenbord of een vinger (de checkbox #band-pauze met het label .band__pauze). */
.band{position:relative;overflow:hidden;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:10px 0}
.band ul{display:flex;align-items:center;gap:48px;margin:0;padding:0;list-style:none;width:max-content;animation:band 60s linear infinite}
.band li{display:flex;align-items:center;height:36px}
.band img{width:auto;max-width:110px;object-fit:contain;opacity:.8}
.band img.wit{filter:brightness(0) invert(1)}
.band img:hover{opacity:1}
.band:hover ul,#band-pauze:checked~ul{animation-play-state:paused}
.band__pauze{position:absolute;z-index:1;top:50%;right:0;transform:translateY(-50%);display:flex;align-items:center;min-height:44px;min-width:44px;padding:0 var(--ruimte-4);background:var(--grond);border-left:1px solid var(--lijn);color:var(--gedempt);font-size:14px;cursor:pointer;user-select:none}
.band__pauze:hover{color:var(--inkt)}
.band__pauze-uit,#band-pauze:checked~.band__pauze .band__pauze-aan{display:none}
#band-pauze:checked~.band__pauze .band__pauze-uit{display:inline}
#band-pauze:focus-visible~.band__pauze{outline:3px solid var(--accent-tekst);outline-offset:-3px}
@keyframes band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band ul{animation:none;flex-wrap:wrap;width:auto;gap:12px 32px}.band__pauze{display:none}}

.site-voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:10px 0 12px;font-size:13px;color:var(--gedempt)}

/* Aanraakmaten: telefoon en tablet (t/m 1024px breed). Tekst minimaal 16px, tikdoelen minimaal 44px. */
@media (max-width:1024px){
.edm{font-size:16px}
.edm-kop--display{font-size:clamp(32px,9vw,44px)}
.edm-kop--2{font-size:22px}
.edm-kop--3{font-size:20px}
.edm-knop{font-size:16px;min-height:44px;padding:10px 18px}
.edm-label{font-size:16px;padding:4px 12px}
.edm-label--klein{font-size:16px;padding:2px 10px}
.edm-nav{padding:6px 0}
.edm-nav__menu{gap:var(--ruimte-2)}
.edm-nav__item{display:flex;align-items:center;min-height:44px;padding:8px 12px;font-size:16px}
.woordmerk{min-height:44px}
.hero{padding:20px 0 16px}
.hero__sub br{display:none}
.tab{padding:14px 16px}
.tab__sub{font-size:16px}
.raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.kaart__sector,.kaart p,.citaat blockquote,.citaat figcaption,.scherm,.scherm__kop,.blok p,.blok ul,.blok__voettekst,.site-voet,.band__pauze{font-size:16px}
.blok__voet a[href^="tel:"]{display:inline-block;padding:10px 0;margin:-10px 0}
.blok{padding:14px 16px;gap:6px}
.blok ul{gap:4px}
.band ul{animation-duration:90s}
}

/* Telefoon: menu op een eigen regel, de kolommen onder elkaar. */
@media (max-width:600px){
.edm-nav__menu{flex:1 1 100%;margin-left:0;justify-content:space-between}
.edm-nav__item{flex:1;justify-content:center}
.raster-2,.raster-4{grid-template-columns:1fr}
.blok__voettekst{min-width:0}
}

/* Vanaf 1280×800: de pagina past in één scherm, de cockpit en de blokken scrollen zelf. */
@media (min-width:1280px) and (min-height:800px){
html,body{height:100%}
.site{height:100vh;overflow:hidden}
.hero{height:150px}
.hero__sub{min-height:48px}
.tab{height:76px}
.cockpit,.blokken{flex:1;min-height:0;overflow:auto;padding-bottom:12px}
}