/* =========================================================================
   Telente — onepager
   Statische HTML + CSS, geen framework, geen build-stap.

   Opbouw van dit bestand, in dezelfde volgorde als de pagina:
     0.  Lettertypen
     1.  Variabelen (:root)
     2.  Basis en reset
     3.  Gedeelde bouwstenen (inhoudskolom, koppen, focus)
     4.  Boogvormen tussen de secties
     5.  Kleurstreep over de sectierand
     6.  Header met navigatie
     7.  Hero
     8.  Introblok met portret
     9.  Verzuimbegeleiding
     10. HR Advies
     11. Call to action (knop)
     12. Footer

   Mobiel eerst: de basisregels zijn voor de telefoon, media queries gaan
   naar boven. Breekpunten: 600, 900 en 1200 px — zie 00-specs/mobiel.md.
   Maten uit het ontwerp zijn punten op een canvas van 1200 pt breed; bij
   1200 px zijn dat 1-op-1 pixels.
   ========================================================================= */


/* ---------- 0. Lettertypen -------------------------------------------------
   PT Sans, vier snedes, zelf gehost. Bewust niet via een CDN of Google Fonts:
   dat scheelt een extra verbinding én er gaan geen bezoeker-IP's naar een
   derde partij. Zie 00-specs/fonts.md.
   LET OP: de formele weblicentie stond bij oplevering nog open (ontbreekt.md 3.2).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "PT Sans";
  src: url("assets/fonts/pt-sans-v18-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("assets/fonts/pt-sans-v18-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("assets/fonts/pt-sans-v18-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("assets/fonts/pt-sans-v18-latin-700italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* ---------- 1. Variabelen --------------------------------------------------
   Kleurnamen zijn functioneel gekozen, niet op kleur: als de huisstijl ooit
   verschuift blijven de namen kloppen. Zie 00-specs/kleuren.md.
   -------------------------------------------------------------------------- */

:root {
  /* Huisstijlkleuren */
  --kleur-primair:         #133d66; /* donkerblauw */
  --kleur-accent:          #0090dd; /* helderblauw */
  --kleur-groen:           #9cc11f;
  --kleur-oranje:          #ee7000;
  --kleur-geel:            #ffcc44;
  --kleur-rood:            #e2332e;

  /* Vlakken en tekst */
  --kleur-hero-vlak:       #c4cfd9; /* lichtgrijsblauw */
  --kleur-wit:             #ffffff;
  --kleur-tekst:           var(--kleur-primair);
  --kleur-tekst-omgekeerd: var(--kleur-wit);
  --kleur-knop:            var(--kleur-oranje);
  --kleur-knop-tekst:      var(--kleur-wit);

  /* Kleur van de hero-subtitel: het helderblauw uit het ontwerp.
     LET OP — dit is een bewuste keuze met een bekende consequentie.
     Helderblauw op het grijsblauwe herovlak haalt een contrast van 2,20 : 1 en
     voldoet daarmee bij geen enkele tekstgrootte aan de WCAG-norm van 4,5 : 1.
     Besloten op 6 oktober 2026 (besluit B17): de huisstijlkleur weegt hier
     zwaarder. Het is de enige tekst op de pagina die de norm niet haalt.
     Het alternatief uit kleuren.md is donkerblauw (7,03 : 1):
        --kleur-subtitel: var(--kleur-primair); */
  --kleur-subtitel:        var(--kleur-accent);

  /* Lettertype */
  --font-basis: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Maatvoering.
     --marge   : vaste zijmarge, geen percentage (mobiel.md).
     --inhoud  : de inhoudskolom is 800 pt breed (x 200–1000 op 1200 pt).
     --boog-h  : diepte van de boogvormen. 4% van de schermbreedte, met een
                 onder- en bovengrens: zo houdt de boog op elk scherm dezelfde
                 ronding, zonder op een telefoon een halve cirkel te worden of
                 op een breed scherm vlak te slaan.
                 LET OP: de kleurstreep is op precies deze formule getekend.
                 Wijzig je de 4vw, lees dan eerst sectie 5.
     --sectie-p: verticale sectiepadding, 100 px desktop → 56 px mobiel. */
  --marge:     20px;
  --inhoud:    800px;
  --boog-h:    clamp(24px, 4vw, 60px);
  --sectie-p:  clamp(56px, 8vw, 100px);
  --portret-b: clamp(230px, 23vw, 280px);
}

@media (min-width: 600px) {
  :root { --marge: 40px; }
}


/* ---------- 2. Basis en reset --------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
  font-family: var(--font-basis);
  /* Lopende tekst schaalt nauwelijks: 17 px op een telefoon, 20 px op desktop.
     Lager dan 17 px gaan we niet — de doelgroep is werkgevers en HR. */
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* De boogvormen en de kleurstreep lopen breder dan het scherm. Het afvangen
   gebeurt hier en niet op <body>, omdat overflow op <body> sticky- en
   scrollgedrag stukmaakt.

   Twee regels, in deze volgorde:
   - `hidden` is de terugval voor oudere browsers;
   - `clip` is beter, en wint omdat hij er later staat. `overflow-x: hidden`
     maakt van dit element namelijk een scrollcontainer en zet `overflow-y`
     stilletjes op `auto`; `clip` knipt alleen af en laat de rest met rust. */
.pagina {
  overflow-x: hidden;
  overflow-x: clip;
}


/* ---------- 3. Gedeelde bouwstenen ---------------------------------------- */

/* De inhoudskolom. Onder 880 px is dit het scherm minus de zijmarges,
   daarboven een vaste 800 px, gecentreerd — net als in het ontwerp. */
.omhulsel {
  width: min(100% - 2 * var(--marge), var(--inhoud));
  margin-inline: auto;
}

/* Sectietitels: 30 pt in het ontwerp, vet. */
.sectietitel {
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
}

/* Zichtbare focus op alles wat klikbaar is. currentColor werkt hier het
   betrouwbaarst: de tekstkleur van een link contrasteert per definitie al
   met de achtergrond waarop hij staat, op elk gekleurd vlak van de pagina. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}


/* ---------- 4. Boogvormen -------------------------------------------------
   De secties lopen niet in rechte randen over, maar in een flauwe boog.
   Elke boog is een losse SVG in de kleur van de aangrenzende sectie, met
   preserveAspectRatio="none" en een vaste hoogte: de boog rekt horizontaal
   mee en houdt op elke schermbreedte dezelfde flauwe welving.
   fill="currentColor" in de SVG, zodat de kleur hier gezet kan worden.
   -------------------------------------------------------------------------- */

.boog {
  width: 100%;
  height: var(--boog-h);
}

.boog--hero  { color: var(--kleur-hero-vlak); }
.boog--blauw { color: var(--kleur-primair); }
.boog--voet  { color: var(--kleur-groen); }

/* Eén pixel overlap met de sectie ernaast, tegen een haarlijn door afronding. */
.boog--onder { margin-top: -1px; }    /* boog onder een gekleurd vlak */
.boog--boven { margin-bottom: -1px; } /* boog boven een gekleurd vlak */


/* ---------- 5. Kleurstreep ------------------------------------------------
   Vijf gekantelde blokjes — oranje, groen, blauw, rood, geel — op een golvende
   lijn. Ligt altijd óver de sectiegrens: half in de ene, half in de andere.

   Techniek: de houder is 0 px hoog, dus hij valt precies samen met het diepste
   punt van de boog; align-items:center laat de SVG daar overheen hangen.
   (align-items mag hier niet op de standaardwaarde stretch blijven staan:
   die drukt de SVG plat tot 0 px.)

   HOE DE BLOKJES OP DE BOOG LIGGEN
   De boog is een kwadratische bocht over de volle schermbreedte W, diepte H:

       boog(x) = H * 4t(1-t)      met t = x / W

   Die is 0 aan de zijkanten en H in het midden. De middenlijn van de streep
   ligt op dat diepste punt, dus het hart van een blokje op positie p moet
   staan op:

       u(p) = boog(p) - H = -H * (2p/1200 - 1)^2

   Omdat H gelijk is aan 4vw, valt de schermbreedte uit die formule weg en is u
   een vast getal per blokje — dat zijn de y-waarden in de SVG in index.html.
   De rand van de sectie loopt daardoor op élke schermbreedte door het hart van
   elk blokje, en niet eronder langs.

   Dit werkt zolang twee dingen kloppen: --boog-h staat op 4vw, en de boog is
   een kwadratische bocht. Verander je een van beide, dan moeten de y-waarden
   in de SVG opnieuw berekend worden.

   BREEDTE
   De streep wordt niet geschaald. Hij staat op zijn ontwerpformaat (1200 px,
   blokjes van 156 x 23) en loopt op een smaller scherm gewoon links en rechts
   buiten beeld — dat is besluit B8, en het leest als een lijn die doorloopt.
   De bovengrens van 1600 px voorkomt dat de blokjes op een heel breed scherm
   log worden.

   STAPELING
   position/z-index is hier nodig omdat de footer ná de streep komt en er
   anders overheen zou schilderen. Samen met de foto (sectie 8) is dit de enige
   plek op de pagina met een z-index.
   -------------------------------------------------------------------------- */

.streep {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  position: relative;
  z-index: 2;
}

.streep__figuur {
  flex: none;
  width: clamp(1200px, 100%, 1600px);
  /* De streep mág breder zijn dan het scherm — dat is besluit B8. Zonder deze
     regel zou de algemene max-width van 100% hierboven de breedte stilletjes
     terugbrengen tot schermbreedte, en de blokjes op een telefoon tot confetti
     knijpen. */
  max-width: none;
  height: auto;
  aspect-ratio: 1200 / 88;
}

/* De kleuren van de blokjes staan hier en niet als fill-attribuut in de SVG,
   zodat de huisstijl op één plek staat: de variabelen in sectie 1. */
.blok-oranje { fill: var(--kleur-oranje); }
.blok-groen  { fill: var(--kleur-groen); }
.blok-blauw  { fill: var(--kleur-accent); }
.blok-rood   { fill: var(--kleur-rood); }
.blok-geel   { fill: var(--kleur-geel); }

/* Bij de footer staat de boog bol omhóóg; de golf van de streep volgt die
   boog en wordt daarom verticaal gespiegeld. */
.streep--gespiegeld .streep__figuur { transform: scaleY(-1); }


/* ---------- 6. Header met navigatie ---------------------------------------
   Egaal donkerblauw, volle breedte. Bewust niet sticky: de pagina is maar
   vijf secties lang en een vastgezette balk kost te veel van een telefoonscherm.
   Alle contactgegevens staan bovendien in de footer.
   -------------------------------------------------------------------------- */

.kop {
  background: var(--kleur-primair);
  color: var(--kleur-tekst-omgekeerd);
}

/* De header staat, anders dan de rest van de pagina, niet in de inhoudskolom
   maar bijna tegen de rand aan — zo staat het in het ontwerp. */
.kop__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  max-width: 1200px;
  min-height: 72px;
  margin-inline: auto;
  padding: 12px var(--marge);
}

.kop__logo {
  width: 150px;
  height: auto;
}

/* Menuknop: alleen zichtbaar als JavaScript werkt. Zonder JavaScript heeft
   een knop die niets doet geen zin, en staat het menu gewoon open. */
.menuknop { display: none; }

.js .menuknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

/* Het menu valt onder logo en knop op een eigen regel. */
.hoofdmenu { flex-basis: 100%; }

/* Dicht is dicht — maar alleen als JavaScript het kan openen. */
.js .menuknop[aria-expanded="false"] + .hoofdmenu { display: none; }

.hoofdmenu__lijst {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hoofdmenu a {
  display: flex;
  align-items: center;
  min-height: 44px; /* ruime tikruimte */
  color: inherit;
  font-size: 1.375rem;
  text-decoration: none;
}

.hoofdmenu a:hover { text-decoration: underline; }


/* ---------- 7. Hero -------------------------------------------------------
   Lichtgrijsblauw vlak; de gebogen onderrand is de losse SVG hierboven.
   -------------------------------------------------------------------------- */

.hero {
  background: var(--kleur-hero-vlak);
  padding-top: clamp(40px, 7vw, 85px);
  padding-bottom: clamp(28px, 4.4vw, 52px);
}

.hero__titel {
  margin: 0 0 clamp(20px, 3vw, 38px);
  font-size: clamp(1.9rem, 7vw, 3.1rem);
  font-weight: 400;
  line-height: 1.05;
}

.hero__regel1,
.hero__regel2 { display: block; }

.hero__regel1 { font-weight: 700; }

.hero__subtitel {
  margin: 0;
  color: var(--kleur-subtitel);
  font-size: clamp(1.25rem, 2.8vw, 2.0625rem);
  font-weight: 700;
  line-height: 1.25;
}


/* ---------- 8. Introblok met portret --------------------------------------
   Mobiel: tekst eerst, foto daarna (besluit B6). De foto staat tegen de
   rechterrand en duikt onderaan achter de donkerblauwe sectie weg, zodat de
   rechte onderrand van de uitsnede niet zichtbaar afsnijdt.
   -------------------------------------------------------------------------- */

.intro {
  padding-top: clamp(40px, 6.5vw, 78px);
  padding-bottom: 0;
}

/* De naam leest als een ondertekening onder de tekst; rechts uitgelijnd
   ten opzichte van de tekstkolom, ook op een telefoon. */
.naam {
  margin: clamp(12px, 2vw, 20px) 0 0;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 700;
  text-align: right;
}

.portret {
  /* Geen z-index hier: gestapeld onder de tekst moet zij juist áchter de
     donkerblauwe sectie wegduiken, en dat gaat vanzelf goed op DOM-volgorde.
     Pas vanaf 900 px is een z-index nodig — zie onderaan dit bestand. */
  width: 70vw;
  height: auto;
  /* Horizontaal gespiegeld ten opzichte van het aangeleverde bestand: Ellen
     kijkt daardoor de pagina in in plaats van eruit. Geen apart bestand nodig. */
  transform: scaleX(-1);
  margin-top: clamp(16px, 0vw, 32px);
  /* Gestapeld onder de tekst staat zij gecentreerd, niet tegen de rand. */
  margin-inline: auto;
  /* 26 px achter het blauwe vlak, plus de hoogte van de boog die er nog
     tussen zit — anders blijft de onderrand van de uitsnede zichtbaar. */
  margin-bottom: calc(-26px - var(--boog-h));
}

/* Vanaf 600 px is 78% van de schermbreedte te fors voor de foto; vanaf hier
   krimpt zij mee in plaats van door te groeien (mobiel.md, 600–899 px).
   Deze regel moet ná de basisregel hierboven staan, anders wint 78vw. */
@media (min-width: 600px) {
  .portret { width: 300px; }
}


/* ---------- 9. Verzuimbegeleiding -----------------------------------------
   Donkerblauw vlak, boven- en onderrand allebei gebogen. Op een telefoon
   staan de twee tekstkolommen onder elkaar in leesvolgorde — niet samengevoegd,
   want het zijn twee verschillende onderwerpen.
   -------------------------------------------------------------------------- */

.verzuim {
  background: var(--kleur-primair);
  color: var(--kleur-tekst-omgekeerd);
  padding-block: var(--sectie-p);
}

.verzuim__kolommen {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.3vw, 40px);
}


/* ---------- 10. HR Advies ------------------------------------------------
   Witte achtergrond, één brede kolom over de volle inhoudsbreedte.
   -------------------------------------------------------------------------- */

.hr {
  padding-top: var(--sectie-p);
  /* De ruimte tot de knop komt van .cta hieronder, zodat de afstand tussen
     tekst en knop in één plek staat. In het ontwerp is dat ±65 pt. */
  padding-bottom: 0;
}


/* ---------- 11. Call to action -------------------------------------------
   Oranje knop met het e-mailadres als onderdeel van de zin, als mailto:-link.

   RANDVOORWAARDE (besluit B7, zie 00-specs/besluiten.md):
   wit op #ee7000 haalt 3,02 : 1. Dat mag alleen als de tekst als "grote tekst"
   telt: vanaf 24 px regulier of 18,66 px vet. Daarom staat de knoptekst op
   minimaal 19 px én vet. Kleiner of lichter en de knop voldoet niet meer.
   Dit is de eerste plek om te controleren bij een wijziging aan de knop.
   -------------------------------------------------------------------------- */

.cta {
  padding-top: clamp(40px, 5.5vw, 66px);
  padding-bottom: clamp(48px, 9vw, 109px);
}

.knop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;      /* volle breedte binnen de marges, tot 420 px */
  min-height: 56px;      /* ruimer dan de 44 px-ondergrens: primaire actie */
  margin-inline: auto;
  /* Krappe zijruimte: de langste regel moet op de breedte uit het ontwerp
     (377 px) op één regel passen, ook in vet. */
  padding: clamp(14px, 2.5vw, 24px) 20px;
  border-radius: 10px;
  background: var(--kleur-knop);
  color: var(--kleur-knop-tekst);
  font-size: clamp(1.1875rem, 2vw, 1.5rem); /* 19 px is een ondergrens */
  font-weight: 700;                          /* vet is een ondergrens */
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.knop:hover { background: #d96500; }


/* ---------- 12. Footer ----------------------------------------------------
   Groen vlak met gebogen bovenrand. Tekst donkerblauw in plaats van wit:
   wit op groen haalt 2,09 : 1 en is bij deze tekstgrootte onleesbaar,
   donkerblauw haalt 5,33 (besluit, zie mobiel.md). Het logo ernaast is
   toch al donkerblauw, dus grafisch klopt het ook.
   -------------------------------------------------------------------------- */

.voet {
  background: var(--kleur-groen);
  color: var(--kleur-primair);
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(48px, 9vw, 110px);
  /* 16 px, nergens lager: onder de 16 px zoomt iOS de pagina in bij een tik. */
  font-size: 1rem;
  line-height: 1.65;
}

.voet__raster {
  display: grid;
  gap: 20px;
}

.voet__logo {
  width: 200px;
  height: auto;
}

.voet__adres { margin: 0; }

.voet__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Op een telefoon is het telefoonnummer de belangrijkste actie van de pagina.
   Elke regel krijgt daarom een eigen tikvlak van minimaal 44 px hoog. */
.voet__contact a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.voet__contact a:hover { text-decoration: underline; }


/* =========================================================================
   Breekpunt 900 px — vanaf hier is er ruimte voor het horizontale menu,
   twee tekstkolommen en de foto naast de introtekst.
   ========================================================================= */

@media (min-width: 900px) {

  /* --- Header: horizontaal menu, geen menuknop meer --- */
  .js .menuknop,
  .menuknop { display: none; }

  .hoofdmenu,
  .js .menuknop[aria-expanded="false"] + .hoofdmenu { display: block; }

  .hoofdmenu { flex-basis: auto; }

  .hoofdmenu__lijst {
    flex-direction: row;
    gap: clamp(20px, 3vw, 44px);
  }

  .hoofdmenu a {
    min-height: 0;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    font-weight: 400;
  }

  .kop__binnen { min-height: clamp(96px, 10vw, 120px); }

  .kop__logo { width: clamp(200px, 44vw, 532px); }

  /* --- Hero: tweede titelregel springt in, zoals in het ontwerp --- */
  .hero__regel2 { padding-left: clamp(20px, 5.5vw, 66px); }

  /* --- Introblok: tekst links, foto rechts --- */
  .intro { padding-bottom: clamp(48px, 6.5vw, 78px); }

  /* Hoever de foto rechts buiten de inhoudskolom mag steken. Wordt vanzelf 0
     zodra het scherm daar te smal voor is, zodat er nooit iets wegvalt. */
  :root { --portret-uitloop: clamp(0px, (100vw - 800px) / 2 - 93px, 107px); }

  .intro__raster {
    display: grid;
    /* De fotokolom is smaller dan de foto zelf: het verschil is precies de
       uitloop naar rechts. Zo houdt de tekstkolom de breedte uit het ontwerp
       (480 pt tekst, 113 pt tussenruimte). */
    grid-template-columns: minmax(0, 1fr) calc(var(--portret-b) - var(--portret-uitloop));
    column-gap: clamp(24px, 9vw, 113px);
    align-items: start;
  }

  .portret {
    /* Vanaf hier staat de foto náást de tekst en komt zij tot in de hero, waar
       de kleurstreep ligt. Die heeft z-index 2; in het ontwerp staat de foto
       daarvóór. Alleen hier nodig, niet op een telefoon. */
    position: relative;
    z-index: 3;
    width: var(--portret-b);
    /* De foto is breder dan haar rasterkolom — dat is precies de bedoeling,
       dus de algemene max-width van 100% mag hier niet gelden. */
    max-width: none;
    /* De foto staat half over de sectiegrens: begint in de hero, loopt door
       tot in het witte introblok. De verhouding 0,58 komt uit het ontwerp
       (184 pt omhoog bij een fotobreedte van 316 pt) en schaalt zo vanzelf mee.
       De 22 px is een handmatige correctie: zij staat daarmee iets lager dan
       het ontwerp, omdat de tekstkolom ernaast korter is geworden. */
    margin-top: calc(var(--portret-b) * -0.58 + 22px);
    margin-bottom: 0;
    margin-left: 0;
    /* In het ontwerp staat de foto rechts bijna tegen de paginarand, dus
       iets buiten de inhoudskolom. Zie --portret-uitloop hierboven. */
    margin-right: calc(-1 * var(--portret-uitloop));
  }

  /* --- Verzuimbegeleiding: twee kolommen --- */
  .verzuim__kolommen { grid-template-columns: 1fr 1fr; }

  /* --- Knop: de maat uit het ontwerp --- */
  .knop {
    max-width: 377px;
    min-height: 104px;
  }

  /* --- Footer: logo links, adres en contactgegevens ernaast --- */
  .voet__raster {
    grid-template-columns: auto auto 1fr;
    column-gap: clamp(24px, 5vw, 64px);
    align-items: start;
  }

  .voet__logo { width: clamp(160px, 20vw, 232px); }

  .voet__contact a { min-height: 0; font-weight: 400; }
}