/* ==========================================================================
   Mizaro Webdesign - ontwerpsysteem
   Fase B uit MIZARO-WEBDESIGN-PLAN.md

   Een bron voor kleur, ruimte, letter, raster en toestanden.
   Nergens in de site staat een losse waarde die hier niet vandaan komt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lettertype
   Schibsted Grotesk, dezelfde familie als de Mizaro Associates-site.
   Lokaal gehost: Google Fonts stuurt het IP-adres van elke bezoeker naar een
   Amerikaanse server, en dat is onder de AVG een verwerking waarvoor je
   toestemming nodig hebt. Zelf hosten houdt de belofte overeind dat deze site
   geen cookiebanner nodig heeft.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/lettertypen/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/lettertypen/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* De kopletter uit de visualisatie: een schreefletter met sterk verschil tussen
   dikke en dunne halen. Playfair Display, vrij te gebruiken onder de Open Font
   License, en net als de tekstletter van onze eigen server. Alleen gewicht 400:
   de koppen in de visualisatie staan allemaal in de gewone snede. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/lettertypen/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/lettertypen/playfair-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Kleur

   Het hele palet komt uit het logo. Dat logo bevat exact twee kleuren, uit de
   bestanden gelezen en niet geschat:

     #98855E   het beige van de letters
     #53523A   het groen van de hoeken en de ruit

   De site is beige. Het logobeige verdund met wit draagt de vlakken, hetzelfde
   beige verdiept met zwart draagt de letters. Daardoor is er geen tweede kleur
   nodig om hierarchie te maken, alleen meer of minder van dezelfde.

   Het logogroen staat nog op een plek: het gekleurde vlak in het nagebouwde
   browservenster. Verder zit groen alleen nog in het logo zelf, waar het thuis
   hoort. Dat is bewust: een merk met twee kleuren wordt rustiger als je er een
   spaarzaam gebruikt.

   Twee regels voor alle lijnen en tekens, zodat het niet los zand wordt:
     scheidingslijnen      lijn op licht, lijn-diep op donker
     merktekens, accenten  brons op licht, goud op donker

   Contrast, allemaal nagerekend volgens WCAG 2.1:
                      op zand   op linnen   op zand-diep
     inkt              11,8        13,4        10,5
     gedempt            5,9         6,7         5,3
     brons              7,3         8,3         6,5
     brons-diep        10,5        12,0         9,4
   De laagste waarde voor lopende tekst is 5,3 : 1, ruim boven de 4,5 die
   WCAG AA vraagt. Op diep haalt ivoor 12,1 en ivoor-stil 7,0.

   Goud en brons-licht dragen nooit lopende tekst. Die staan onder vlakken,
   randen en grote letters, waar de drempel 3,0 is.
   -------------------------------------------------------------------------- */

:root {
  /* de site is beige, niet donker. Zonder deze regel keert een browser in
     donkere modus de formuliervelden en de schuifbalk om, en dan staat er
     ineens een kleur op het scherm die niet uit het logo komt. */
  color-scheme: light;

  /* grondkleuren: het logobeige #98855E, verdund met wit */
  --zand:        #F0EBE1;   /* de hoofdgrond, gemeten uit de visualisatie */
  --linnen:      #F8F4EC;   /* lichter, voor kaarten en afwisselende secties */
  --zand-diep:   #E7E0D2;   /* de diepere grond, voor de voet */
  --diep:        #685B43;   /* de taupeband: het logobeige #98855E, op 68 procent */

  /* inkt: het logobeige #98855E, verdiept met zwart */
  --inkt:        #241F14;   /* lopende tekst en koppen */
  --gedempt:     #6B5E45;   /* bijschriften en hulpteksten */
  --ivoor:       #F2EEE4;   /* tekst op de taupeband */
  --ivoor-stil:  #DED8C8;   /* gedempte tekst op de taupeband */

  /* merk: de twee logokleuren zelf, onverdund */
  --goud:        #98855E;   /* het logobeige, voor accenten en grote letters */
  --goud-licht:  #E2D5B8;   /* hetzelfde goud met wit, voor tekst op de taupeband */
  --brons:       #55492F;   /* het logobeige verdiept, links en tekens */
  --brons-diep:  #35301F;   /* bij aanwijzen */
  --brons-licht: #706246;   /* steunvlakken, nooit tekst */
  --brons-mid:   #463C27;   /* de tweede belkleur in het gesprek */
  --groen:       #7A6A4B;   /* vroeger het logogroen, nu de lichtere taupe */

  /* twee vlakken die de visualisatie nodig heeft en die er nog niet waren */
  --kaart:       #FDFCFA;   /* de kaarten liggen net lichter dan hun sectie */
  --gitzwart:    #201D11;   /* de volle knop, het diepste punt van het palet */
  --hero:        #685B43;   /* het grote vlak naast de herofoto, dezelfde taupe als de band */
  --hero-rgb:    104, 91, 67;

  /* lijnen: logobeige, dieper verdund */
  --lijn:        #D8D0BF;   /* scheidingslijn op licht */
  --lijn-zacht:  #E2DBCB;   /* de zachtste scheidingslijn */
  --lijn-diep:   #86795F;   /* scheidingslijn op de taupeband */

  /* --------------------------------------------------------------------
     3. Ruimte, schaal van 8
     -------------------------------------------------------------------- */
  --r-1:   0.25rem;   /*  4 */
  --r-2:   0.5rem;    /*  8 */
  --r-3:   0.75rem;   /* 12 */
  --r-4:   1rem;      /* 16 */
  --r-5:   1.5rem;    /* 24 */
  --r-6:   2rem;      /* 32 */
  --r-7:   3rem;      /* 48 */
  --r-8:   4rem;      /* 64 */
  --r-9:   6rem;      /* 96 */
  --r-10:  8rem;      /* 128 */
  --r-11: 10rem;      /* 160 */

  /* --------------------------------------------------------------------
     4. Letter
     Grondmaat 16px. Hierarchie uit gewicht, maat en spatiering, want er is
     maar een lettertype. Dat is bewust beperkend.
     -------------------------------------------------------------------- */
  --letter: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;

  /* De koppen staan in dezelfde letter als de rest van de site. De variabele
     blijft bestaan zodat alle plekken die hem gebruiken ongemoeid blijven; wie
     de schreefletter terug wil, zet hier de Playfair-stack weer neer. */
  --letter-kop: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;

  --t-xs:    0.8125rem;  /* 13, ongewijzigd: kleiner wordt onleesbaar */
  --t-sm:    0.9375rem;  /* 15, ongewijzigd: dit draagt de lopende tekst */
  --t-base:  1rem;       /* 16, was 17 */
  --t-lg:    1.125rem;   /* 18, was 19 */
  --t-xl:    1.25rem;    /* 20, was 23 */
  --t-2xl:   1.5rem;     /* 24, was 30 */
  --t-3xl:   1.875rem;   /* 30, was 40 */
  --t-4xl:   2.625rem;   /* 42 */
  --t-5xl:   3.5rem;     /* 56 */
  --t-6xl:   4.5rem;     /* 72 */

  --gewicht-tekst:  400;
  --gewicht-nadruk: 500;
  --gewicht-kop:    600;

  --hoogte-strak:   1.05;
  --hoogte-kop:     1.15;
  --hoogte-tekst:   1.65;

  --spat-groot:    -0.035em;
  --spat-midden:   -0.02em;
  --spat-klein:    -0.01em;
  --spat-bijschr:   0.01em;

  --meet: 68ch;         /* regellengte blijft onder de 70 tekens */

  /* --------------------------------------------------------------------
     5. Raster
     -------------------------------------------------------------------- */
  --breedte:     1280px;
  --breedte-nauw: 900px;
  --marge: clamp(1.25rem, 5vw, 4.5rem);
  /* De linkerrand van de inhoud, ook voor vlakken die van rand tot rand lopen.
     Daarmee staat de tekst in een volbrede band precies onder de tekst in de
     sectie erboven, in plaats van een stuk naar links. */
  --rand: max(var(--marge), calc((100vw - var(--breedte)) / 2 + var(--marge)));
  --kolommen: 12;
  --goot: clamp(1rem, 2.5vw, 2rem);

  /* --------------------------------------------------------------------
     6. Randen, schaduw, beweging
     -------------------------------------------------------------------- */
  --rond-0:  0;
  --rond-1:  2px;
  --rond-2:  4px;
  --rond-3:  10px;      /* browservensters */
  --rond-vol: 999px;

  --schaduw-scherm: 0 24px 60px -28px rgba(38, 38, 27, 0.35),
                    0 4px 14px -6px rgba(38, 38, 27, 0.12);
  --schaduw-licht:  0 2px 10px -4px rgba(38, 38, 27, 0.10);

  --soepel:  220ms cubic-bezier(0.2, 0.6, 0.3, 1);
  --traag:   520ms cubic-bezier(0.2, 0.6, 0.3, 1);
  --reveal:  700ms cubic-bezier(0.16, 0.84, 0.36, 1);
}

/* --------------------------------------------------------------------------
   7. Breekpunten, ter documentatie
   CSS kent geen variabelen in media queries, dus dit is de afspraak:

     320   telefoon klein
     375   telefoon
     430   telefoon groot
     768   tablet
    1024   laptop
    1280   desktop
    1440   breed
    1920   zeer breed

   Gebruikte grenzen: 560, 768, 900, 1024, 1280.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. Grondslag
   -------------------------------------------------------------------------- */

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

/* Wat verborgen is, blijft verborgen. De browser zet [hidden] op display:
   none, maar elke eigen regel die een element een display geeft wint daarvan.
   Het meerstapsformulier verborg zo zijn stappen wel, terwijl .stap ze met
   display: grid weer liet zien: alle vijf stappen stonden tegelijk onder
   elkaar en "Volgende stap" veranderde alleen het tellertje. Hier gaat het
   kenmerk boven elke opmaak, want dat is precies wat hidden betekent. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* plakkende kopbalk niet over ankers heen */
}

/* Wordt kort aangezet als een nieuwe pagina naar de bovenkant moet springen,
   zodat dat springen niet als een animatie te zien is. */
html.geen-vloeiend {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--zand);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: var(--t-base);
  font-weight: var(--gewicht-tekst);
  line-height: var(--hoogte-tekst);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }

/* Geen afbreekstreepjes, vaste afspraak van de eigenaar.
   overflow-wrap vangt op wat daardoor misgaat: een woord als
   bedrijfsaansprakelijkheidsverzekering past op 320px in geen enkele kolom en
   duwde de hele pagina buiten beeld. Dit breekt alleen wanneer het echt moet,
   en zet er geen streepje bij. */
h1, h2, h3, h4, h5, p, li, dd, dt, figcaption, blockquote, summary {
  hyphens: none;
  overflow-wrap: break-word;
}

::selection { background: var(--brons); color: var(--zand); }

:focus-visible {
  outline: 2px solid var(--brons);
  outline-offset: 3px;
  border-radius: var(--rond-1);
}
.op-diep :focus-visible { outline-color: var(--ivoor); }

/* --------------------------------------------------------------------------
   9. Typografie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: var(--gewicht-kop);
  line-height: var(--hoogte-kop);
  margin: 0 0 var(--r-5);
  text-wrap: balance;
  color: inherit;
  font-family: var(--letter-kop);
}

/* Een schreefloze letter loopt op grote maat uit elkaar. Daarom trekken de
   koppen hier iets aan: hoe groter de maat, hoe krapper de spatiering. */
h1 {
  font-size: clamp(2.5rem, 5.4vw, var(--t-6xl));
  line-height: 1.04;
  letter-spacing: -0.028em;
}
h2 {
  font-size: clamp(1.875rem, 3.6vw, var(--t-5xl));
  line-height: 1.08;
  letter-spacing: -0.024em;
}
h3 {
  font-size: clamp(1.25rem, 1.9vw, var(--t-2xl));
  line-height: 1.22;
  letter-spacing: -0.014em;
}
h4 {
  font-size: var(--t-lg);
  letter-spacing: var(--spat-klein);
}

p { margin: 0 0 var(--r-5); max-width: var(--meet); }
p:last-child { margin-bottom: 0; }

.leidend {
  font-size: clamp(1rem, 1.35vw, var(--t-xl));
  line-height: 1.45;
  color: var(--gedempt);
  max-width: 56ch;
}

.bijschrift {
  font-size: var(--t-xs);
  letter-spacing: var(--spat-bijschr);
  color: var(--gedempt);
}

strong, b { font-weight: var(--gewicht-nadruk); }

a { color: var(--brons); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brons-diep); }

/* --------------------------------------------------------------------------
   10. Donkere sectie
   Maximaal een per pagina, als rustpunt en contrast. Nooit twee achter elkaar.
   -------------------------------------------------------------------------- */

.op-diep {
  background: var(--diep);
  color: var(--ivoor);
}
.op-diep .leidend,
.op-diep .bijschrift { color: var(--ivoor-stil); }
.op-diep a { color: var(--ivoor); }

/* de zachtere beige sectie, voor afwisseling zonder contrastsprong */
.op-zand-diep { background: var(--zand-diep); }

/* --------------------------------------------------------------------------
   11. Raster en omhulsels
   -------------------------------------------------------------------------- */

.omhulsel {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.omhulsel--nauw { max-width: var(--breedte-nauw); }

.rooster {
  display: grid;
  grid-template-columns: repeat(var(--kolommen), minmax(0, 1fr));
  gap: var(--goot);
}

/* asymmetrische standaardverdelingen. 6 op 6 wordt bewust vermeden,
   dat oogt statisch. */
.kol-5  { grid-column: span 5; }
.kol-7  { grid-column: span 7; }
.kol-4  { grid-column: span 4; }
.kol-8  { grid-column: span 8; }
.kol-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .kol-5, .kol-7, .kol-4, .kol-8 { grid-column: span 12; }
}

/* sectieritme: drie zwaartes, bewust verschillend van hoogte */
.sectie       { padding-block: clamp(var(--r-8), 8vw, var(--r-10)); }
.sectie--ruim { padding-block: clamp(var(--r-9), 11vw, var(--r-11)); }
.sectie--krap { padding-block: clamp(var(--r-7), 6vw, var(--r-9)); }

/* --------------------------------------------------------------------------
   12. Knoppen, met een duidelijke conversiehierarchie
   Nooit twee even zware knoppen naast elkaar.
   -------------------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r-2);
  min-height: 52px;
  padding: 0.875rem 1.75rem;
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--gewicht-nadruk);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  /* Alle knoppen zijn pillen, zoals in de visualisatie. Een halve maat kleiner
     dan de lopende tekst, want een pil oogt altijd groter dan hij is. */
  border-radius: var(--rond-vol);
  padding-inline: var(--r-6);
  cursor: pointer;
  transition: background var(--soepel), color var(--soepel),
              border-color var(--soepel), transform var(--soepel);
}
.knop:active { transform: translateY(1px); }

/* primair: offerte aanvragen */
.knop--vol {
  background: var(--gitzwart);
  border-color: var(--gitzwart);
  color: var(--ivoor);
}
.knop--vol:hover { background: var(--brons); border-color: var(--brons); color: var(--ivoor); }

/* secundair: bellen of kennismaken */
.knop--lijn {
  background: transparent;
  border-color: var(--lijn);
  color: var(--inkt);
}
.knop--lijn:hover { border-color: var(--inkt); color: var(--inkt); background: transparent; }

/* De pijl achter de knop. Hij zit op elke volle en elke omlijnde knop, zodat
   er nooit twee soorten knoppen naast elkaar staan die anders eindigen. */
.knop--vol::after,
.knop--lijn::after {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 9px;
  margin-left: var(--r-2);
  background: currentColor;
  clip-path: polygon(0 45%, 70% 45%, 70% 0, 100% 50%, 70% 100%, 70% 55%, 0 55%);
  transition: transform var(--soepel);
}
.knop--vol:hover::after,
.knop--lijn:hover::after { transform: translateX(3px); }

/* een knop zonder pijl, waar de pijl niets toevoegt */
.knop--kaal::after { display: none; }

/* tertiair: doorlezen */
.knop--tekst {
  min-height: 44px;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  color: var(--brons);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.knop--tekst:hover { color: var(--brons-diep); }

.op-diep .knop--vol { background: var(--ivoor); border-color: var(--ivoor); color: var(--gitzwart); }
.op-diep .knop--vol:hover { background: #FFFFFF; border-color: #FFFFFF; }
.op-diep .knop--lijn { border-color: var(--lijn-diep); color: var(--ivoor); }
.op-diep .knop--lijn:hover { border-color: var(--ivoor); color: var(--ivoor); }

.acties { display: flex; flex-wrap: wrap; gap: var(--r-4); align-items: center; }

/* --------------------------------------------------------------------------
   13. Beweging
   Elke animatie doet een van vier dingen: hierarchie verduidelijken,
   interactie bevestigen, het verhaal versterken, of kwaliteit voelbaar maken.
   Anders gaat hij eruit.
   -------------------------------------------------------------------------- */

/* Inhoud is standaard zichtbaar. Het script zet .komt-op pas aan als het
   draait, zodat tekst nooit onzichtbaar blijft als JavaScript faalt. */
[data-reveal] { opacity: 1; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal), transform var(--reveal);
  transition-delay: var(--vertraging, 0ms);
}
.js [data-reveal].zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   14. Toegankelijkheid
   -------------------------------------------------------------------------- */

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--diep);
  color: var(--ivoor);
  padding: var(--r-4) var(--r-5);
  font-weight: var(--gewicht-nadruk);
  text-decoration: none;
  border-radius: 0 0 var(--rond-2) 0;
}
.overslaan:focus { left: 0; }

.alleen-schermlezer {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   15. Druk
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .op-diep { background: #fff; color: #000; }
  .kopbalk, .voet, .acties { display: none; }
  a { text-decoration: underline; }
}