/* ==========================================================================
   Netwerk Kabelnoord – stramien
   Kleuren komen uit het logo. Pas ze hier aan, dan verandert de hele site mee.
   ========================================================================== */

:root {
  /* Huisstijl (uit het logo) */
  --navy:        #252d65;
  --blauw:       #3958a8;
  --cyaan:       #00b3f0;
  --verloop:     linear-gradient(115deg, #3958a8 0%, #2c6cb7 40%, #00b4ec 100%);

  /* Afgeleide tinten */
  --ijs:         #eaf6fc;   /* lichte achtergrond met een zweem cyaan */
  --mist:        #f4f6fa;
  --lijn:        #d9dfeb;
  --tekst:       #252d65;
  --tekst-zacht: #585f86;
  --wit:         #ffffff;

  /* Statuskleuren voor de check: groen, geel, rood */
  --ok:   #137a52;  --ok-zacht:   #e2f3eb;  --ok-verloop:  linear-gradient(115deg, #128a55 0%, #3cc27e 100%);
  --let:  #8a5a00;  --let-zacht:  #fff6d6;  --let-verloop: linear-gradient(115deg, #e9a800 0%, #ffd84a 100%);
  --nee:  #b42e26;  --nee-zacht:  #fbe7e5;  --nee-verloop: linear-gradient(115deg, #b42e26 0%, #ea6a5d 100%);

  /* Schuine vlakken (stapnummers, statusicoon, vlakjes op boxen) gebruiken overal dezelfde hoek:
     clip-path: polygon(0 0, calc(100% - var(--h) * var(--tan)) 0, 100% 100%, calc(var(--h) * var(--tan)) 100%)
     met --h = de hoogte van het element. Zo staat een klein vlakje precies even schuin als een groot vlak. */

  /* Typografie */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .8125rem;  --t-s: .9375rem;  --t-m: 1.0625rem;
  --t-l: 1.375rem;   --t-xl: clamp(1.75rem, 3vw, 2.25rem);
  --t-xxl: clamp(2.25rem, 5.2vw, 3.75rem);

  /* Ruimte en vorm */
  --gutter: clamp(16px, 4vw, 32px);
  --breed:  1400px;
  --r-s: 8px;  --r-m: 14px;
  --schaduw: 0 18px 40px -18px rgba(37, 45, 101, .35);
  --schuin: 35deg;          /* de schuine hoek, overal op de site */
  --tan:    .7002;          /* tan(35°); pas samen met --schuin aan */
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: var(--t-m); line-height: 1.6;
  color: var(--tekst); background: var(--wit); font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--blauw); }
:focus-visible { outline: 3px solid var(--cyaan); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--breed); margin-inline: auto; padding-inline: var(--gutter); }

/* Alleen voor schermlezers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skiplink {
  position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--navy); color: var(--wit); border-radius: var(--r-s);
}
.skiplink:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Knoppen en links ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 var(--t-m)/1.2 var(--font); text-align: center; text-decoration: none; cursor: pointer;
  padding: .95em 1.5em; border: 2px solid transparent; border-radius: var(--r-s);
  background: var(--navy); background-origin: border-box; color: var(--wit);
  transition: background-color .15s, color .15s, border-color .15s;
}
/* Aanwijzen of focus: het verloop van het logo (tekst staat in het midden, contrast 4,6 : 1) */
.knop:hover, .knop:focus-visible { background-image: var(--verloop); }
.knop:disabled { opacity: .65; cursor: progress; }
/* Omgekeerd: standaard het verloop, bij aanwijzen/focus donkerblauw. Gebruik: class="knop knop--omgekeerd" */
.knop--omgekeerd { background-image: var(--verloop); }
.knop--omgekeerd:hover, .knop--omgekeerd:focus-visible { background-image: none; background-color: var(--navy); }
.knop--klein { font-size: var(--t-s); padding: .7em 1.1em; }
.knop--vol { width: 100%; }
.knop--rand { background: transparent; color: var(--blauw); border-color: var(--lijn); }
.knop--rand:hover, .knop--rand:focus-visible { background-image: none; background-color: var(--ijs); border-color: var(--blauw); }
.knop--uit { color: var(--tekst-zacht); pointer-events: none; }

.tekstlink { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Witte knop met omlijning (bijv. "Meer over de netwerkvergoeding", "Zoek een andere postcode") */
.knop--wit { background-color: var(--wit); }

/* ---------- Header en menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--lijn);
}
.site-header__binnen { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.site-logo img { width: clamp(160px, 22vw, 210px); height: auto; }

.hoofdmenu { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.hoofdmenu ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.hoofdmenu ul a {
  color: var(--navy); text-decoration: none; font-weight: 500; padding: 6px 0;
  /* Onderstreping als achtergrond, zodat hij het verloop van het logo kan krijgen */
  background: linear-gradient(var(--lijn), var(--lijn)) left bottom / 0 3px no-repeat;
  transition: background-size .2s;
}
.hoofdmenu ul a:hover { background-size: 100% 3px; }
.hoofdmenu ul a[aria-current="page"] { background-image: var(--verloop); background-size: 100% 3px; }

.menu-knop {
  display: none; margin-left: auto; align-items: center; gap: 10px; padding: 10px 4px;
  font: 600 var(--t-s) var(--font); color: var(--navy); background: none; border: 0; cursor: pointer;
}
.menu-knop__streep, .menu-knop__streep::before, .menu-knop__streep::after {
  display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform .2s, background-color .2s;
}
.menu-knop__streep { position: relative; }
.menu-knop__streep::before, .menu-knop__streep::after { content: ""; position: absolute; left: 0; }
.menu-knop__streep::before { top: -7px; }
.menu-knop__streep::after  { top: 7px; }
.menu-knop[aria-expanded="true"] .menu-knop__streep { background: transparent; }
.menu-knop[aria-expanded="true"] .menu-knop__streep::before { transform: translateY(7px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .menu-knop__streep::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .menu-knop { display: inline-flex; }
  .hoofdmenu {
    position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--wit); border-bottom: 1px solid var(--lijn); padding: 0;
    box-shadow: var(--schaduw);
  }
  .js .hoofdmenu:not(.is-open) { display: none; }
  /* Mobiel: knop staat naast het logo, dus niet nog eens in het menu */
  .hoofdmenu__actie { display: none; }
  .kop-actie { display: inline-flex; margin-left: auto; }
  .menu-knop { margin-left: 0; }
  /* Menu-items van rand tot rand */
  .hoofdmenu ul { flex-direction: column; gap: 0; }
  .hoofdmenu ul li + li { border-top: 1px solid var(--lijn); }
  .hoofdmenu ul a {
    display: block; padding: 16px var(--gutter); border-radius: 0;
    background: none; transition: background-color .15s, color .15s;
  }
  .hoofdmenu ul a:hover, .hoofdmenu ul a:focus-visible { background: var(--ijs); }
  .hoofdmenu ul a[aria-current="page"] { background: var(--navy); color: var(--wit); }
  /* Rest van de site vervaagt zolang het menu open is */
  main, .site-footer { transition: filter .2s; }
  body.menu-open main, body.menu-open .site-footer { filter: blur(6px) brightness(.85); pointer-events: none; }
  body.menu-open { overflow: hidden; }
}
@media (min-width: 861px) { .kop-actie { display: none; } }
@media (max-width: 480px) {
  /* Smalle telefoon: alleen het icoon in de menuknop, iets kleiner logo */
  .menu-knop__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-logo img { width: 140px; }
  .site-header__binnen { gap: 12px; }
}

/* ---------- Hero met de schuine strepen uit het logo ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--wit);
  padding: clamp(48px, 8vw, 112px) 0 clamp(56px, 8vw, 120px);
  background: var(--navy);
}
.hero__strepen { position: absolute; inset: 0; pointer-events: none; }
.hero__strepen span {
  position: absolute; top: -10%; bottom: -10%; width: clamp(60px, 9vw, 120px);
  background: var(--verloop); transform: skewX(var(--schuin)); transform-origin: top left;
}
.hero__strepen span:nth-child(1) { right: 38%; opacity: .18; }
.hero__strepen span:nth-child(2) { right: 24%; opacity: .32; }
.hero__strepen span:nth-child(3) { right: 6%;  width: clamp(90px, 13vw, 170px); opacity: .55; }

.hero__binnen {
  position: relative; display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
}
.hero h1 { font-size: var(--t-xxl); font-weight: 800; max-width: 13ch; margin-bottom: .35em; }
.hero p  { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 300; max-width: 46ch; color: #dfe5f7; margin: 0; }

@media (max-width: 860px) {
  .hero__binnen { grid-template-columns: 1fr; }
  .hero__strepen span:nth-child(1) { display: none; }
}

/* Foto in de kop met een blauwe overlay zodat de tekst leesbaar blijft.
   Lagen: foto (0) → overlay (1) → schuine strepen (2) → inhoud (3) */
.kop-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::before, .pagina-kop::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(37, 45, 101, .95) 0%, rgba(37, 45, 101, .8) 42%, rgba(37, 45, 101, .3) 100%);
}
.hero__strepen { z-index: 2; }
.hero__binnen, .pagina-kop .container { position: relative; z-index: 3; }
@media (max-width: 860px) {
  .hero::before, .pagina-kop::before { background: linear-gradient(180deg, rgba(37, 45, 101, .9), rgba(37, 45, 101, .75)); }
}

/* ---------- Checkformulier ---------- */
.check-kaart {
  background: var(--wit); color: var(--tekst); border-radius: var(--r-m);
  padding: clamp(24px, 3vw, 36px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
}
.check-kaart h2 { font-size: var(--t-l); margin-bottom: 18px; }

.check-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.veld { grid-column: span 2; }
.veld--postcode, .veld--nummer { grid-column: span 2; }
.veld label { display: block; font-size: var(--t-s); font-weight: 600; margin-bottom: 6px; }
.veld input {
  width: 100%; font: 400 var(--t-m) var(--font); color: var(--tekst);
  padding: 12px 14px; border: 1.5px solid var(--lijn); border-radius: var(--r-s); background: var(--wit);
}
.veld input::placeholder { color: #9aa1bf; }
.veld input:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(0, 179, 240, .25); }
.veld input[aria-invalid="true"] { border-color: var(--nee); background: var(--nee-zacht); }
.check-form__fout { grid-column: 1 / -1; margin: 0; color: var(--nee); font-size: var(--t-s); min-height: 0; }
.check-form__fout:empty { display: none; }
.check-form .knop { grid-column: 1 / -1; margin-top: 4px; }

@media (max-width: 420px) {
  .veld { grid-column: span 2; }
}

.testadressen { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--lijn); }
.testadressen p { font-size: var(--t-xs); color: var(--tekst-zacht); margin-bottom: 8px; }
.testadressen__lijst { display: flex; flex-wrap: wrap; gap: 6px; }
.testadressen__lijst button {
  font: 500 var(--t-xs) var(--font); color: var(--blauw); background: var(--ijs);
  border: 0; border-radius: 99px; padding: 6px 11px; cursor: pointer;
}
.testadressen__lijst button:hover { background: #d6eefa; }

/* ---------- Resultaat van de check ---------- */
.resultaat {
  scroll-margin-top: 76px; padding-block: clamp(32px, 4.5vw, 56px);
  /* lichte band over de volle breedte (zelfde kleur als "Woon je in het buitengebied?"),
     terwijl de inhoud binnen de container blijft */
  background: var(--mist);
  box-shadow: 0 0 0 100vmax var(--mist); clip-path: inset(0 -100vmax);
}
.resultaat:empty { display: none; }
.resultaat:focus { outline: none; }

.uitkomst {
  border: 1px solid var(--lijn);
  border-radius: var(--r-m); padding: clamp(24px, 3vw, 36px); background: var(--wit);
}

.uitkomst__kop { display: flex; gap: 16px; align-items: flex-start; }
.uitkomst__icoon {
  --h: 52px;
  flex: none; width: 84px; height: var(--h); display: grid; place-items: center;
  font-size: 24px; font-weight: 800; color: var(--wit); background: var(--verloop); clip-path: polygon(0 0, calc(100% - var(--h) * var(--tan)) 0, 100% 100%, calc(var(--h) * var(--tan)) 100%);
}
.uitkomst--ok  .uitkomst__icoon { background: var(--ok-verloop); }
.uitkomst--let .uitkomst__icoon { background: var(--let-verloop); color: var(--navy); }
.uitkomst--nee .uitkomst__icoon { background: var(--nee-verloop); }
.uitkomst h2 { font-size: var(--t-xl); margin-bottom: 4px; }
.uitkomst__adres { color: var(--tekst-zacht); margin: 0 0 6px; }
.uitkomst__uitleg { margin: 0; max-width: 62ch; }

.label {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; border-radius: 99px;
  background: var(--ijs); color: var(--blauw);
}

.vergoeding { margin-top: 24px; padding: 28px 20px 20px; background: var(--let-zacht); border-radius: var(--r-m); }
.vergoeding h3 { font-size: var(--t-m); margin-bottom: 4px; }
.vergoeding p { margin: 0 0 14px; font-size: var(--t-s); }

.uitkomst__subkop { font-size: var(--t-l); margin: 28px 0 14px; }

/* ---------- Opties (netwerkvergoeding) ---------- */
.opties-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.optie { background: var(--wit); border-radius: var(--r-s); padding: 16px 18px; }
.optie__bedrag { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.optie__uitleg { display: block; font-size: var(--t-s); color: var(--tekst-zacht); }
@media (max-width: 560px) { .opties-rij { grid-template-columns: 1fr; } }

/* ---------- Providers ---------- */
.provider-raster {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 860px) { .provider-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .provider-raster { grid-template-columns: 1fr; } }
.provider {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  border: 1px solid var(--lijn); border-radius: var(--r-m); background: var(--wit);
}
.provider__logo { height: 96px; display: flex; align-items: center; justify-content: center; }
/* Elk logo heeft een eigen maat, zodat ze optisch even groot ogen. Kabelnoord is de maatstaf. */
.provider__logo img { width: auto; height: auto; max-width: min(100%, var(--logo-b, 240px)); max-height: var(--logo-h, 60px); }
.provider--kabelnoord { --logo-b: 250px; --logo-h: 60px; }
.provider--solcon     { --logo-b: 200px; --logo-h: 52px; }
.provider--weserve    { --logo-b: 205px; --logo-h: 56px; }
.provider--multifiber { --logo-b: 215px; --logo-h: 60px; }
.provider--onvi       { --logo-b: 150px; --logo-h: 56px; }
.provider__logo span { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
/* Providerkaart: de hele kaart is klikbaar (de link spant via ::after over de kaart heen).
   Bij aanwijzen of focus komt de kaart iets naar voren. */
.provider {
  transition: transform .2s ease, box-shadow .2s ease;
}
.provider__actie { margin: auto auto 0; }
.provider__actie::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.provider:has(a.provider__actie):hover,
.provider:focus-within {
  z-index: 2; transform: scale(1.05);
  box-shadow: 0 0 0 1px var(--lijn), 0 22px 44px -18px rgba(37, 45, 101, .45);
}
.provider:has(a.provider__actie):hover .provider__actie { background-image: var(--verloop); }
.provider:has(a.provider__actie) { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .provider:has(a.provider__actie):hover, .provider:focus-within { transform: none; }
}


/* ---------- Secties ---------- */
.sectie { padding-block: clamp(32px, 4.5vw, 56px); }
.sectie__titel { font-size: var(--t-xl); }
.sectie__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.sectie__kop .sectie__titel { margin: 0; }

.pagina-kop {
  position: relative; overflow: hidden; color: var(--wit); padding: clamp(40px, 5vw, 72px) 0;
  background: var(--navy);
  /* Vaste minimale hoogte, zodat de kop niet per pagina verspringt; tekst verticaal in het midden */
  min-height: clamp(320px, 30vw, 420px);
  display: flex; flex-direction: column; justify-content: center;
}
.pagina-kop h1 { font-size: var(--t-xxl); font-weight: 800; }
.pagina-kop p { max-width: 60ch; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 300; margin: 0; color: #dfe5f7; }

/* Stappen: echte volgorde, dus genummerd */
.stappen {
  list-style: none; counter-reset: stap; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
}
.stap { counter-increment: stap; position: relative; padding-top: 64px; }
.stap::before {
  content: counter(stap); position: absolute; top: 0; left: 0;
  --h: 48px;
  width: 80px; height: var(--h); display: grid; place-items: center;
  font-size: 1.25rem; font-weight: 800; color: var(--wit); background: var(--verloop);
  clip-path: polygon(0 0, calc(100% - var(--h) * var(--tan)) 0, 100% 100%, calc(var(--h) * var(--tan)) 100%);
}
.stap h3 { font-size: var(--t-l); }
.stap p { color: var(--tekst-zacht); margin: 0; }
@media (max-width: 760px) { .stappen { grid-template-columns: 1fr; } }

/* Buitengebied */
.buitengebied { background: var(--mist); padding-block: clamp(32px, 4.5vw, 56px); }
.buitengebied__binnen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.buitengebied h2 { font-size: var(--t-xl); }
.buitengebied__tekst p { max-width: 56ch; }
.buitengebied__opties { display: grid; gap: 12px; }
.buitengebied .optie { border: 1px solid var(--lijn); }
@media (max-width: 760px) { .buitengebied__binnen { grid-template-columns: 1fr; } }

/* Callout */
.callout {
  margin-top: 32px; padding: 24px; border-radius: var(--r-m); background: var(--navy); color: var(--wit);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.callout p { margin: 0; font-size: var(--t-l); font-weight: 500; }
.callout .knop { background: var(--cyaan); color: var(--navy); }
.callout .knop:hover, .callout .knop:focus-visible { background: var(--wit); }

/* FAQ */
/* Vragen over de volle breedte: de onderwerpen naast elkaar, op smallere schermen onder elkaar */
.faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(32px, 4vw, 56px); align-items: start; }
@media (max-width: 1100px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .faq { grid-template-columns: 1fr; } }
.faq .sectie__titel { font-size: clamp(1.375rem, 2vw, 1.75rem); }
/* Geen dubbele witruimte tussen de vragen en de sectie eronder */
.faq + .sectie { padding-top: 0; }
.faq__item {
  border-bottom: 1px solid var(--lijn); scroll-margin-top: 96px;
  /* binnenruimte voor de lichtblauwe achtergrond; de negatieve marge houdt de tekst in lijn met de kop */
  padding-inline: 16px; margin-inline: -16px;
  transition: background-color .2s;
}
.faq__item summary:hover { color: var(--blauw); }
/* De geopende vraag krijgt een lichtblauwe achtergrond, zodat de focus daar ligt */
.faq__item[open] { background: var(--ijs); border-bottom-color: transparent; border-radius: var(--r-s); }
.faq__item:has(+ .faq__item[open]) { border-bottom-color: transparent; }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-weight: 600; font-size: var(--t-m);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--blauw); transition: transform .2s;
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { margin: 0 0 20px; color: var(--tekst-zacht); max-width: 66ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--mist); border-top: 1px solid var(--lijn); }
.site-footer__binnen {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-block: 48px;
}
.site-footer h2 { font-size: 1.1875rem; margin-bottom: 12px; color: var(--cyaan); }   /* zelfde kleur als de knop "Doe de postcodecheck" */
.site-footer p, .site-footer li { font-size: var(--t-s); color: var(--tekst-zacht); }
.site-footer__merk img { width: 180px; margin-bottom: 16px; }
.site-footer__merk p { max-width: 36ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--navy); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__onder { border-top: 1px solid var(--lijn); padding-block: 16px; font-size: var(--t-xs); color: var(--tekst-zacht); }
@media (max-width: 760px) { .site-footer__binnen { grid-template-columns: 1fr; } }

/* ---------- Laden ---------- */
/* Wachten op de check: wit vlak met de N uit het logo, waarvan de banen na elkaar oplichten */
.laden {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 240px; padding: 32px; border-radius: var(--r-m);
  background: var(--wit); box-shadow: 0 0 0 1px var(--lijn);
}
.laden__n { width: 64px; height: auto; overflow: visible; }
.laden__n .baan { animation: baan-oplichten 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.laden__n .baan-1 { animation-delay: 0s; }
.laden__n .baan-2 { animation-delay: .3s; }
.laden__n .baan-3 { animation-delay: .6s; }
.laden__n .baan-4 { animation-delay: .9s; }
@keyframes baan-oplichten {
  0%, 100% { opacity: .45; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1); }
}
.laden__tekst { margin: 0; font-weight: 600; color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .laden__n .baan { animation: none; opacity: 1; }
}

/* ==========================================================================
   Gekleurde rand + schuin vlakje op alle boxen met afgeronde hoeken
   Achter elke box lijkt een gekleurde box te liggen die er aan de rechterkant net uitsteekt.
   Dat is een rechterrand die met het verloop wordt gevuld; door de afgeronde hoeken loopt hij
   boven en onder dun uit. Linksboven zit het schuine vlakje.
   Kleine kaarten (providers, bedragen) houden alleen het vlakje, anders wordt het te druk.
     --vul   = kleur van de box zelf
     --rand  = kleur/verloop van de rand en het vlakje
   ========================================================================== */
.check-kaart, .uitkomst, .provider, .optie, .callout, .vergoeding {
  --vul: var(--wit);
  --rand: var(--verloop);
  position: relative;
  border: 0;
  border-right: var(--rand-dikte, 3px) solid transparent;
  background: linear-gradient(var(--vul), var(--vul)) padding-box, var(--rand) border-box;
}
.uitkomst, .provider, .optie { box-shadow: 0 0 0 1px var(--lijn), 0 10px 24px -16px rgba(37, 45, 101, .35); }

.check-kaart::before, .uitkomst::before, .provider::before, .optie::before, .callout::before, .vergoeding::before {
  --h: 10px;
  content: ""; position: absolute; top: 0; left: clamp(16px, 2.5vw, 28px);
  width: 72px; height: var(--h); background: var(--rand);
  clip-path: polygon(0 0, calc(100% - var(--h) * var(--tan)) 0, 100% 100%, calc(var(--h) * var(--tan)) 100%);
}
/* Kleine kaarten: geen gekleurde rand, wel het vlakje */
.optie, .provider { border-right: 0; background: var(--vul); }
.optie::before, .provider::before { --h: 8px; width: 52px; left: 18px; }

/* Statuskleuren bij de uitkomst van de check */
.uitkomst--ok  { --rand: var(--ok-verloop); }
.uitkomst--let { --rand: var(--let-verloop); }
.uitkomst--nee { --rand: var(--nee-verloop); }

/* Netwerkvergoeding: geel blok met gele randen */
.vergoeding { --vul: var(--let-zacht); --rand: var(--let-verloop); }
.vergoeding .optie { --rand: var(--let-verloop); box-shadow: none; }

/* Donker blok onderaan de providerspagina */
.callout { --vul: var(--navy); --rand: var(--verloop); }   /* zelfde verloop als de strookjes op de witte vlakken */

/* ==========================================================================
   Hero van de homepage en de paginakoppen van de andere pagina's: verloop van links donker
   naar rechts licht, met de foto groot en gecentreerd daarin. De randen van de foto lopen pas laat weg in het verloop.
   Schuine banen liggen er bovenop.
   ========================================================================== */
.pagina-home .hero, .pagina-kop {
  background: linear-gradient(90deg, var(--navy) 0%, #2d3f86 35%, var(--blauw) 60%, #1f8fd3 85%, var(--cyaan) 100%);
}
.pagina-home .hero .kop-foto, .pagina-kop .kop-foto {
  left: 50%; right: auto; width: min(1500px, 100%); transform: translateX(-50%);
  /* Alleen links en rechts loopt de foto weg in het verloop; in de hoogte vult hij de hele hero */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.pagina-home .hero::before, .pagina-kop::before {
  background: linear-gradient(90deg, rgba(37, 45, 101, .78) 0%, rgba(37, 45, 101, .45) 40%, rgba(57, 88, 168, .2) 70%, rgba(0, 179, 240, .15) 100%);
}
.pagina-home .hero__tekst, .pagina-kop .container { text-shadow: 0 2px 18px rgba(20, 28, 70, .65), 0 1px 3px rgba(20, 28, 70, .5); }

/* ==========================================================================
   Focusmodus van de postcodecheck
   Donkere laag over de site; de checkbox komt erbovenuit (op zijn plek, of midden in beeld).
   ========================================================================== */
.check-laag {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 26, 60, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s;
}
.check-laag.is-zichtbaar { opacity: 1; }
body.check-focus { overflow: hidden; }
/* De hero-inhoud mag tijdens de focusmodus geen eigen laag vormen, anders blijft de box onder de donkere laag */
.check-focus .hero__binnen { z-index: auto; }
.check-focus .check-kaart { z-index: 70; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }

.check-kaart.is-zwevend {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
}

.check-sluiten {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  font: 400 1.75rem/1 var(--font); color: var(--tekst-zacht); background: transparent;
}
.check-sluiten:hover, .check-sluiten:focus-visible { background: var(--mist); color: var(--navy); }
.check-sluiten[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .check-laag { transition: none; } }

/* Zoekblok in de uitkomst: waarop gezocht is en wat er gevonden is, met rechts een knop om opnieuw te zoeken */
.zoekblok {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 20px; padding: 16px 20px;
  background: var(--ijs); border: 1px solid #b9e3f6; border-radius: var(--r-s);
}
.zoekblok p { margin: 0; }
.zoekblok__gezocht { font-size: var(--t-s); color: var(--tekst-zacht); }
.zoekblok__gezocht strong { color: var(--navy); font-weight: 600; }
.zoekblok__adres { font-size: var(--t-m); margin-top: 2px !important; }
.zoekblok__adres strong { font-weight: 700; color: var(--navy); }
.zoekblok__knop { white-space: nowrap; }
@media (max-width: 560px) { .zoekblok__knop { width: 100%; white-space: normal; } }

/* Uitkomst van de check: het schuine vlakje bovenaan de box blijft altijd in het logoverloop,
   de kop krijgt de statuskleur. Geel is #c08a00: de lichtste tint die op wit leesbaar blijft (3 : 1). */
.uitkomst--ok::before, .uitkomst--let::before, .uitkomst--nee::before { background: var(--verloop); }
.uitkomst--ok  .uitkomst__kop h2 { color: var(--ok); }
.uitkomst--let .uitkomst__kop h2 { color: #c08a00; }
.uitkomst--let .uitkomst__icoon { color: var(--wit); text-shadow: 0 1px 2px rgba(138, 90, 0, .45); }
.uitkomst--nee .uitkomst__kop h2 { color: var(--nee); }

/* Label rechtsboven in een providerkaart (bijv. "Meest geschikte keuze"), in te stellen per provider in data/adressen.json */
.provider__label { position: absolute; top: 14px; right: 14px; margin: 0; z-index: 1; }
.provider { padding-top: 40px; }
@media (max-width: 860px) {
  /* Op smalle schermen staat de tekst over de hele foto heen: iets donkerder voor de leesbaarheid */
  .pagina-home .hero::before, .pagina-kop::before {
    background: linear-gradient(180deg, rgba(37, 45, 101, .82) 0%, rgba(37, 45, 101, .6) 100%);
  }
}

/* ==========================================================================
   Logo-scroller op de homepage: logo's lopen eindeloos voorbij, in grijstinten.
   Aanwijzen zet hem stil en toont dat logo in kleur. Klik = naar de providerspagina.
   ========================================================================== */
.logo-scroller {
  --duur: 45s;
  --rand-kleur: var(--wit);   /* kleur van de achtergrond waar de scroller op staat */
  position: relative; display: flex; overflow: hidden; padding-block: 8px;
}
/* Zachte randen links en rechts: twee vaste verlopen erover heen (sneller dan een masker) */
.logo-scroller::before, .logo-scroller::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 1; pointer-events: none;
}
.logo-scroller::before { left: 0;  background: linear-gradient(90deg, var(--rand-kleur), transparent); }
.logo-scroller::after  { right: 0; background: linear-gradient(270deg, var(--rand-kleur), transparent); }
.logo-scroller__rij {
  flex: none; display: flex; align-items: center; gap: clamp(40px, 6vw, 88px);
  list-style: none; margin: 0; padding: 0 clamp(20px, 3vw, 44px);
  animation: logo-scroll var(--duur) linear infinite;
  /* eigen laag op de grafische kaart: vloeiender bewegen */
  will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0);
}
.logo-scroller:hover .logo-scroller__rij,
.logo-scroller:focus-within .logo-scroller__rij { animation-play-state: paused; }
@keyframes logo-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }

.logo-scroller__item a {
  display: flex; align-items: center; justify-content: center; height: 80px; padding: 0 8px;
  border-radius: var(--r-s); text-decoration: none; color: var(--tekst-zacht);
}
.logo-scroller__item img {
  /* vaste hoogte, zodat ook SVG's zonder eigen afmeting hun breedte krijgen */
  height: var(--logo-h, 56px); width: auto; max-width: var(--logo-b, 220px); object-fit: contain;
  filter: grayscale(1); opacity: .6; transition: filter .25s, opacity .25s;
}
.logo-scroller__item span { font-size: 1.25rem; font-weight: 700; }
.logo-scroller__item a:hover img,
.logo-scroller__item a:focus-visible img { filter: none; opacity: 1; }

/* Iets kleiner dan in de providerkaarten */
.logo-scroller .provider--kabelnoord { --logo-b: 200px; --logo-h: 48px; }
.logo-scroller .provider--solcon     { --logo-b: 160px; --logo-h: 42px; }
.logo-scroller .provider--weserve    { --logo-b: 165px; --logo-h: 45px; }
.logo-scroller .provider--multifiber { --logo-b: 172px; --logo-h: 48px; }
.logo-scroller .provider--onvi       { --logo-b: 120px; --logo-h: 45px; }

/* Minder beweging ingesteld: geen scroll, gewoon een rij logo's */
@media (prefers-reduced-motion: reduce) {
  .logo-scroller::before, .logo-scroller::after { display: none; }
  .logo-scroller__rij { animation: none; flex-wrap: wrap; justify-content: center; }
  .logo-scroller__rij[aria-hidden="true"] { display: none; }
}

/* "maximaal" boven een bedrag (algemene bedragen; het bedrag per adres staat in de postcodecheck) */
.optie__voor { display: block; font-size: var(--t-xs); color: var(--tekst-zacht); margin-bottom: 2px; }

/* Netwerkvergoeding: twee opties met "of" ertussen */
.opties__intro { margin: 0 0 4px; font-size: var(--t-s); color: var(--tekst-zacht); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opties__intro .label { margin-left: 0; }
.opties__of { display: grid; place-items: center; }
/* "of" en het label "Alleen buitengebied": donker vakje met witte tekst */
.opties__of span,
.opties__intro .label {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-s);
  font-size: var(--t-s); font-weight: 700; line-height: 1.2;
  color: var(--wit); background: var(--navy);
}
.buitengebied__opties .opties__of { margin-block: -6px; position: relative; z-index: 1; }
.optie__bedrag small { font-size: .55em; font-weight: 600; color: var(--tekst-zacht); vertical-align: middle; }
.optie__voor { font-weight: 600; color: var(--navy); }

/* Icoon naast het schuine nummervlakje bij de stappen */
.stap { padding-top: 80px; }
.stap::before { top: 8px; }   /* nummervlak (48px) verticaal gecentreerd naast het icoon (64px) */
.stap__icoon {
  position: absolute; top: 0; left: 96px;
  width: auto; height: 64px;   /* SVG zonder eigen maat: hoogte vast, breedte volgt */
}