/* ==========================================================================
   iNeedIT — i-needit.com

   Vormtaal: technisch werkblad. Licht beton als grond, zwarte inkt, één
   ultramarijnen signaalkleur en overal haarlijnen. Geen ronde hoeken, geen
   schaduwen, geen zwevende kaartjes: de indeling is een raster met lijnen,
   zoals een specificatieblad. Labels en cijfers in monospace, tekst in de
   systeemschreefloze.

   Geen Google Fonts en geen externe bestanden (AVG): alles wat de browser
   laadt komt van dit domein.
   ========================================================================== */

:root{
  --papier:      #f0efea;   /* grond */
  --zone:        #e7e5de;   /* iets dieper vlak voor afwisselende secties */
  --inkt:        #14161b;   /* tekst en het donkere vlak */
  --inkt-stil:   #5b6068;   /* bijtekst; niet lichter maken, dan zakt het contrast onder 4,5 */
  --lijn:        #cdcbc3;
  --lijn-fijn:   #d9d7d0;
  --accent:      #1b2ed8;   /* ultramarijn, 7,5:1 op papier */
  --accent-diep: #1526ad;
  --accent-licht:#8fa2ff;   /* dezelfde kleur, maar leesbaar op het inktvlak */

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --raam: 1220px;
  --kant: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font:400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.02em;line-height:1.08}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-diep)}
img{max-width:100%;height:auto}

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

.raam{max-width:var(--raam);margin:0 auto;padding-inline:var(--kant)}

.overslaan{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--inkt);color:var(--papier);padding:12px 18px;
  font:.8rem/1 var(--mono);text-decoration:none;
}
.overslaan:focus{left:0}

/* --------------------------------------------------------------- kopbalk */
.balk{
  position:sticky;top:0;z-index:30;
  background:var(--papier);
  border-bottom:1px solid var(--lijn);
}
.balk__binnen{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}

.merk{
  font:700 1.22rem/1 var(--sans);letter-spacing:-.035em;
  color:var(--inkt);text-decoration:none;white-space:nowrap;
}
.merk__i{color:var(--accent)}
.merk--voet{display:inline-block;margin-bottom:16px}

.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav a{
  font:.8rem/1 var(--mono);letter-spacing:.04em;
  color:var(--inkt);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Menu op een telefoon: een checkbox, geen javascript. */
.menu-vink,.menu-knop{display:none}

/* ------------------------------------------------------------------ knop */
.knop{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border:1px solid var(--inkt);
  font:.82rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;background:none;color:var(--inkt);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.knop--vol{background:var(--accent);border-color:var(--accent);color:#fff}
.knop--vol:hover{background:var(--accent-diep);border-color:var(--accent-diep);color:#fff}
/* .nav a zet een eigen kleur; die moet hier expliciet terug naar wit,
   anders staat er inkt op ultramarijn en zakt het contrast naar 2,1. */
.nav .knop--vol{padding:12px 20px;color:#fff;border-bottom-color:var(--accent)}
.nav .knop--vol:hover{color:#fff;border-bottom-color:var(--accent-diep)}
.knop--lijn:hover{background:var(--inkt);color:var(--papier)}
.knop--licht{background:var(--papier);border-color:var(--papier);color:var(--inkt)}
.knop--licht:hover{background:var(--accent-licht);border-color:var(--accent-licht);color:var(--inkt)}
.knop--breed{width:100%;padding:17px 26px}

/* ------------------------------------------------------------------ hero */
.kicker{
  display:flex;align-items:center;gap:14px;
  font:.78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--inkt-stil);margin:0 0 clamp(30px,5vw,54px);
}

.hero{padding:clamp(48px,7vw,86px) 0 0}
.hero h1{font-size:clamp(2.5rem,7.2vw,5.3rem);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--accent)}

.hero__onder{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,64px);
  align-items:end;margin-top:clamp(34px,5vw,58px);
}
.lead{max-width:60ch;font-size:1.14rem;color:var(--inkt-stil)}
.hero__acties{display:flex;flex-wrap:wrap;gap:12px}

/* Specificatieregel: labels in mono, gescheiden door haarlijnen. */
.spec{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin:clamp(46px,6vw,78px) 0 0;padding:0;
  background:var(--lijn);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
}
.spec > div{background:var(--papier);padding:22px 24px 24px}
.spec dt{
  font:.7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--inkt-stil);margin-bottom:10px;
}
.spec dd{margin:0;font-size:.95rem;line-height:1.45}
.spec--staand{grid-template-columns:1fr;margin-top:38px;background:none}
.spec--staand > div{background:var(--zone);padding:16px 0}
.spec--staand > div + div{border-top:1px solid var(--lijn)}

/* ------------------------------------------------------------ secties */
.blok{padding:clamp(64px,9vw,120px) 0}
.blok--zone{background:var(--zone);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.blok--zone .spec > div{background:var(--zone)}

.nummer{
  font:.8rem/1 var(--mono);letter-spacing:.14em;color:var(--accent);margin:0 0 18px;
}
.nummer--licht{color:var(--accent-licht)}

.blok__kop{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(20px,4vw,60px);row-gap:0;align-items:end;
  margin-bottom:clamp(38px,5vw,64px);
}
.blok__kop .nummer{grid-column:1/-1}
.blok__kop h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
.blok__uitleg{color:var(--inkt-stil);max-width:46ch;margin:0}

/* ------------------------------------------------------------- diensten */
.matrix{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);
}
.cel{background:var(--papier);padding:32px 30px 36px}
.cel__nr{font:.72rem/1 var(--mono);letter-spacing:.12em;color:var(--inkt-stil);margin:0 0 22px}
.cel h3{font-size:1.28rem;margin-bottom:12px}
.cel p{font-size:.98rem;color:var(--inkt-stil);margin:0}

/* ------------------------------------------------------------ werkwijze */
.stappen{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,38px);
}
.stappen li{border-top:2px solid var(--inkt);padding-top:20px}
.stap__nr{font:.72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.stappen h3{font-size:1.22rem;margin-bottom:10px}
.stappen p{font-size:.96rem;color:var(--inkt-stil);margin:0}

/* -------------------------------------------------------------- inktvlak */
.vlak{background:var(--inkt);color:var(--papier);padding:clamp(64px,9vw,120px) 0}
.vlak__raster{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(30px,5vw,72px);
}
.vlak h2{font-size:clamp(1.9rem,4.2vw,3.1rem);max-width:20ch;text-wrap:balance}
.vlak__tekst p{color:#c8c9cd}
.vlak__tekst{font-size:1.02rem}
.lijst{list-style:none;margin:30px 0;padding:0;border-top:1px solid #2b2f37}
.lijst li{padding:13px 0 13px 26px;border-bottom:1px solid #2b2f37;position:relative;font-size:.98rem}
.lijst li::before{
  content:"+";position:absolute;left:0;top:13px;
  font:.9rem/1.6 var(--mono);color:var(--accent-licht);
}
.vlak .knop--licht{margin-top:6px}

/* ---------------------------------------------------------------- vragen */
.vragen{border-top:1px solid var(--lijn)}
.vragen details{border-bottom:1px solid var(--lijn)}
.vragen summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:1.08rem;font-weight:600;letter-spacing:-.01em;
}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{
  content:"+";position:absolute;right:6px;top:20px;
  font:1.3rem/1.4 var(--mono);color:var(--accent);
}
.vragen details[open] summary::after{content:"–"}
.vragen summary:hover{color:var(--accent)}
.vragen details p{padding:0 clamp(0px,8vw,120px) 26px 0;color:var(--inkt-stil);max-width:72ch}

/* --------------------------------------------------------------- contact */
.contact__raster{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(34px,5vw,80px);align-items:start;
}
.contact__intro h2{font-size:clamp(1.9rem,4.2vw,3.1rem);margin-bottom:20px}

.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.veld{margin:0 0 24px}
/* Het tweede veld van een rij is de laatste <p> in die rij, en dan haalt de
   basisregel p:last-child de ondermarge weg. Op een breed scherm zie je dat
   niet (de velden staan naast elkaar), maar op een telefoon staan ze onder
   elkaar en wisselt de tussenruimte dan 91-67-91-67 pixels. Vandaar deze
   regel: hij is specifieker en zet de marge terug. */
.veld-rij .veld:last-child{margin-bottom:24px}
.veld label{
  display:block;margin-bottom:8px;
  font:.72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-stil);
}
.veld input:not([type=checkbox]),.veld select,.veld textarea{
  width:100%;font:inherit;font-size:1rem;line-height:1.4;color:var(--inkt);
  background:transparent;border:0;border-bottom:1px solid var(--inkt);
  padding:10px 2px;border-radius:0;-webkit-appearance:none;appearance:none;
}
.veld select{
  /* Eigen pijltje, want appearance:none haalt het standaardpijltje weg.
     Verticaal met 'center' in plaats van een vast aantal pixels, anders
     verschuift het zodra de regelhoogte of de tekengrootte verandert. */
  background-image:linear-gradient(45deg,transparent 50%,var(--inkt) 50%),
                   linear-gradient(135deg,var(--inkt) 50%,transparent 50%);
  background-position:calc(100% - 12px) center,calc(100% - 7px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px;
}
.veld textarea{resize:vertical;min-height:150px;line-height:1.6}
.veld input:not([type=checkbox]):focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-bottom-color:var(--accent);border-bottom-width:2px;padding-bottom:9px;
}
.veld input::placeholder,.veld textarea::placeholder{color:#8a8f97}

.veld--vink{display:flex;gap:12px;align-items:flex-start;margin-bottom:28px}
.veld--vink input{width:19px;height:19px;flex:0 0 19px;margin:3px 0 0;accent-color:var(--accent)}
.veld--vink label{
  margin:0;font:400 .92rem/1.55 var(--sans);letter-spacing:0;text-transform:none;color:var(--inkt-stil);
}

.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fijn{font-size:.85rem;line-height:1.55;color:var(--inkt-stil);margin:14px 0 0}

.melding{padding:18px 20px;border-left:3px solid var(--accent);background:var(--papier);margin:0 0 26px}
.melding--fout{border-left-color:#b3261e;color:#8c1d18}
.melding--goed h3{font-size:1.25rem;margin-bottom:10px}

/* ------------------------------------------------------------------ voet */
.voet{background:var(--inkt);color:var(--papier);padding:clamp(52px,7vw,84px) 0 32px}
.voet__raster{
  display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.4fr));
  gap:clamp(26px,4vw,52px);
}
.voet .merk{color:var(--papier)}
.voet .merk__i{color:var(--accent-licht)}
.voet .fijn{color:#a6a9b0;max-width:38ch}
.voet h3{
  font:.72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#a6a9b0;margin:0 0 18px;font-weight:400;
}
.voet ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.voet li{margin-bottom:11px;color:#c8c9cd}
.voet a{color:var(--papier);text-decoration:none;border-bottom:1px solid #3a3e47}
.voet a:hover{color:var(--accent-licht);border-bottom-color:var(--accent-licht)}
.cookie-herzien{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--papier);border-bottom:1px solid #3a3e47;
}
.cookie-herzien:hover{color:var(--accent-licht);border-bottom-color:var(--accent-licht)}

.voet__slot{
  display:flex;flex-wrap:wrap;gap:8px 28px;
  margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid #2b2f37;
  font:.74rem/1.6 var(--mono);letter-spacing:.06em;color:#8f939b;
}

/* ------------------------------------------------------------ cookiebalk */
.cookiebalk{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--inkt);color:var(--papier);
  border-top:1px solid #2b2f37;
  padding:20px var(--kant);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 32px;
}
.cookiebalk p{margin:0;max-width:72ch;font-size:.92rem;color:#c8c9cd}
.cookiebalk a{color:var(--accent-licht)}
.cookiebalk__knoppen{display:flex;flex-wrap:wrap;gap:10px}
.cookiebalk .knop{padding:11px 20px;font-size:.76rem}
.cookiebalk .knop--lijn{border-color:#4a4f59;color:var(--papier)}
.cookiebalk .knop--lijn:hover{background:var(--papier);color:var(--inkt)}
.cookiebalk .knop--vol{background:var(--accent-licht);border-color:var(--accent-licht);color:var(--inkt)}
.cookiebalk .knop--vol:hover{background:#fff;border-color:#fff;color:var(--inkt)}

/* ============================================================== schermen */
@media (max-width:1000px){
  .spec{grid-template-columns:repeat(2,1fr)}
  .matrix{grid-template-columns:repeat(2,1fr)}
  .stappen{grid-template-columns:repeat(2,1fr)}
  .voet__raster{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  .balk__binnen{position:relative;flex-wrap:wrap}
  .menu-knop{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;margin-right:-10px;cursor:pointer;align-items:center;
  }
  .menu-knop span{display:block;width:22px;height:2px;background:var(--inkt)}
  .nav{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    width:calc(100% + var(--kant) * 2);margin:0 calc(var(--kant) * -1);
    border-top:1px solid var(--lijn);
  }
  .menu-vink:checked ~ .nav{display:flex}
  .nav a{
    padding:16px var(--kant);border-bottom:1px solid var(--lijn-fijn);font-size:.92rem;
  }
  .nav .knop--vol{justify-content:flex-start;border:0;border-bottom:1px solid var(--accent-diep)}

  .hero__onder{grid-template-columns:1fr;align-items:start}
  /* Eén kolom: de uitlegzin komt onder de kop en heeft dan zelf lucht nodig,
     want de row-gap staat op 0 om het cijfer tegen de kop te houden. */
  .blok__kop{grid-template-columns:1fr;align-items:start}
  .blok__uitleg{margin-top:14px}
  .vlak__raster{grid-template-columns:1fr}
  .vlak h2{max-width:none}
  /* Onder elkaar loopt het lijstje met contactgegevens anders zo in het
     formulier over dat het één lange ladder streepjes wordt. Extra lucht
     ertussen, zodat het formulier zichtbaar opnieuw begint. */
  .contact__raster{grid-template-columns:1fr;row-gap:52px}
  /* Het sleephandvat van het tekstvak zet een tandje aan het eind van de
     onderlijn; op een telefoon sleept toch niemand het groter. */
  .veld textarea{resize:none}
}

@media (max-width:640px){
  body{font-size:1rem}
  .spec{grid-template-columns:1fr}
  .matrix{grid-template-columns:1fr}
  .stappen{grid-template-columns:1fr;gap:26px}
  .voet__raster{grid-template-columns:1fr}
  .veld-rij{grid-template-columns:1fr;gap:0}
  .hero__acties .knop{flex:1 1 100%}
  .cookiebalk{justify-content:flex-start}
  .cookiebalk__knoppen{width:100%}
  .cookiebalk .knop{flex:1 1 auto}
}

@media print{
  .balk,.cookiebalk,.overslaan{display:none}
  body{background:#fff}
}

/* De kopbalk blijft staan; zonder deze marge landt een ankerlink met de
   sectiekop er precies achter. */
section[id]{scroll-margin-top:80px}

/* ------------------------------------------------------------ taalwissel */
/* Staat in de menubalk naast de knop: één link naar dezelfde pagina in de
   andere taal. Een kadertje, zodat het geen gewoon menu-item lijkt. */
.nav a.taal{
  border:1px solid var(--lijn);padding:9px 12px;
  font:.72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--inkt-stil);
}
.nav a.taal:hover{border-color:var(--inkt);color:var(--inkt);background:none}

@media (max-width:820px){
  .nav a.taal{
    border:0;border-bottom:1px solid var(--lijn-fijn);
    padding:16px var(--kant);font-size:.78rem;
  }
}