/* maas247.nl design tokens v1.0, 11 oktober 2026. Bron: Maas247-merkpakket-definitief plus brandbook.md. Enige kleuren en maten voor de site. */
:root{
  /* vast, merkpakket */
  --petrol:#122A2E;
  --turquoise:#0DAEAE;
  --warmwit:#FAF7F0;
  /* afgeleide tinten, ter goedkeuring */
  --warmwit-tint:#F1EDE3;
  --petrol-tint:#3F5A5E;
  --petrol-licht:#8FA3A5;
  --turquoise-donker:#077373;

  --font:"Plus Jakarta Sans","DejaVu Sans",Arial,sans-serif;

  --h1:32px; --h2:26px; --h3:19px; --tekst:18px; --lead:20px; --knop:17px; --bijschrift:15px; --prijs:26px;
  --lh-tekst:1.55; --lh-h1:1.1; --lh-h2:1.2;

  --r:4px;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:96px;
  --gutter:20px; --tekstbreedte:680px; --blokbreedte:1080px; --knophoogte:52px; --kopregel:64px; --band:22px;
}
@media (min-width:760px){
  :root{ --h1:50px; --h2:34px; --h3:21px; --tekst:19px; --lead:22px; --prijs:30px; --lh-tekst:1.6; --lh-h1:1.08; }
}

/* maas247.nl, stijl. Kleuren en maten komen uit merk/tokens.css (staat hierboven in style.css). Regels uit merk/website-regels.md. */

/* Lettertype: Plus Jakarta Sans, zelf gehost. Geen koppeling met Google Fonts. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}

:root{
  /* knopvariant A: turquoise met petroltekst; op petrol hetzelfde */
  --knop-bg:var(--turquoise);--knop-fg:var(--petrol);--knop-bg-donker:var(--turquoise);--knop-fg-donker:var(--petrol);
  --tekst-donker-zacht:#B9C6C7;
  color-scheme:light;
}
/* knopvariant B: petrol met warm witte tekst; op petrol warm wit met petroltekst */
:root[data-knop="b"]{--knop-bg:var(--petrol);--knop-fg:var(--warmwit);--knop-bg-donker:var(--warmwit);--knop-fg-donker:var(--petrol)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--warmwit);color:var(--petrol);font-family:var(--font);font-size:var(--tekst);line-height:var(--lh-tekst);padding-bottom:84px}
h1,h2,h3{margin:0;text-wrap:balance;overflow-wrap:anywhere}
h1{font-weight:800;font-size:var(--h1);line-height:var(--lh-h1);letter-spacing:-0.01em}
h2{font-weight:700;font-size:var(--h2);line-height:var(--lh-h2)}
h3{font-weight:700;font-size:var(--h3);line-height:1.25}
p,ul,ol{margin:0}
a{color:var(--turquoise-donker);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--turquoise);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:calc(var(--tekstbreedte) + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.wrap-breed{max-width:calc(var(--blokbreedte) + 2 * var(--gutter))}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.stack-ruim{gap:var(--s4)}
.lead{font-size:var(--lead);line-height:1.4}
.sub{font-size:var(--bijschrift);color:var(--petrol-tint);margin-top:var(--s2);line-height:1.45}
.label{font-size:var(--bijschrift);color:var(--petrol-tint)}
.skip{position:absolute;left:-999px;top:0;background:var(--warmwit);color:var(--petrol);padding:var(--s2) var(--s3);z-index:20}
.skip:focus{left:var(--s3)}

/* Kopregel */
header.kop{position:sticky;top:0;background:var(--petrol);color:var(--warmwit);height:var(--kopregel);display:flex;align-items:center;z-index:5}
header.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.logo{display:inline-flex}
.logo img{height:30px;width:auto}
nav ul{list-style:none;margin:0;padding:0;display:none;gap:var(--s4);font-weight:700;font-size:15px;align-items:center}
nav a{color:var(--warmwit);text-decoration:none}
nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--turquoise);text-decoration-thickness:2px}
.menuknop{font-family:var(--font);font-weight:700;font-size:15px;background:none;border:2px solid var(--warmwit);border-radius:var(--r);color:var(--warmwit);padding:var(--s2) 12px;cursor:pointer;min-height:40px}
nav.open ul{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:var(--kopregel);background:var(--petrol);padding:var(--s2) var(--gutter) var(--s4);border-bottom:var(--band) solid var(--turquoise)}
nav.open li a{display:block;padding:14px 0;font-size:19px;border-top:1px solid rgba(250,247,240,.15)}
nav.open li a.kopknop{display:none}
.kopknop{display:none;min-height:40px;padding:0 var(--s3);font-size:15px;color:var(--warmwit);border-color:var(--warmwit)}
header.kop.smal nav{display:flex;align-items:center}
header.kop.smal .kopknop{display:inline-flex}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;min-height:var(--knophoogte);padding:0 var(--s4);border-radius:var(--r);font-family:var(--font);font-weight:700;font-size:var(--knop);text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;line-height:1.2}
.knop-primair{background:var(--knop-bg);color:var(--knop-fg);border-color:var(--knop-bg)}
.donker .knop-primair{background:var(--knop-bg-donker);color:var(--knop-fg-donker);border-color:var(--knop-bg-donker)}
.knop-secundair{background:transparent;color:var(--petrol);border-color:var(--petrol)}
.donker .knop-secundair{color:var(--warmwit);border-color:var(--warmwit)}
.knop-primair:hover{background:var(--turquoise-donker);border-color:var(--turquoise-donker);color:var(--warmwit)}
:root[data-knop="b"] .knop-primair:hover{background:var(--turquoise-donker);border-color:var(--turquoise-donker);color:var(--warmwit)}
.donker .knop-primair:hover{background:var(--warmwit);border-color:var(--warmwit);color:var(--petrol)}
.knop-secundair:hover{background:var(--petrol);color:var(--warmwit)}
.donker .knop-secundair:hover{background:var(--warmwit);color:var(--petrol)}
header.kop .kopknop{min-height:40px;padding:0 var(--s3);font-size:15px;color:var(--warmwit);border-color:var(--warmwit)}
header.kop .kopknop:hover{background:var(--warmwit);color:var(--petrol)}
.knoppen{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.actie .sub{max-width:34em}

/* Blokken */
section{padding-block:var(--s6)}
section.off{background:var(--warmwit-tint)}
.donker{background:var(--petrol);color:var(--warmwit)}
.donker .sub,.donker .label{color:var(--tekst-donker-zacht)}
.donker a{color:var(--warmwit)}
.band{border-bottom:var(--band) solid var(--turquoise)}
.hero{display:flex;flex-direction:column;gap:var(--s4)}
.hero h1{font-size:34px}
.foto-hero{margin-inline:calc(-1 * var(--gutter));overflow:hidden}
.foto-hero img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.foto-staand{border-radius:var(--r);overflow:hidden}
.foto-staand img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.portret{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.portret-groot{width:160px;height:160px}
.diagram{width:100%;max-width:440px;height:auto;display:block}
.quote{font-weight:700;font-size:24px;line-height:1.3;border-left:4px solid var(--turquoise);padding-left:var(--s3);margin:0}
.aanbod{display:flex;flex-direction:column;gap:var(--s4)}
.prijs{font-weight:700;font-size:var(--prijs);font-variant-numeric:tabular-nums;line-height:1.25}
.prijs small{font-weight:400;font-size:var(--tekst)}
ul.lijst{padding-left:20px;display:flex;flex-direction:column;gap:var(--s2)}
.stappen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.stappen li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.stappen li::before{counter-increment:s;content:counter(s);font-weight:800;color:var(--petrol);background:var(--turquoise);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;margin-top:2px}
.tijdlijn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4);counter-reset:t}
.tijdlijn li{display:grid;grid-template-columns:36px 1fr;gap:12px}
.tijdlijn li::before{counter-increment:t;content:counter(t);font-weight:800;color:var(--petrol);background:var(--turquoise);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;margin-top:2px}
.tijdlijn h3{margin-bottom:var(--s1)}
.tijdlijn .label{display:block;margin-top:var(--s1)}
.wie{display:flex;gap:var(--s3);align-items:center}
.wie-kop{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.inzichten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.inzichten li{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3) 0;border-top:1px solid var(--warmwit-tint)}
.inzichten li:last-child{border-bottom:1px solid var(--warmwit-tint)}
section.off .inzichten li{border-color:#E3DED2}
.inzichten a{color:var(--petrol);font-weight:700;font-size:var(--h3);text-decoration:none}
.inzichten a:hover{text-decoration:underline;text-decoration-color:var(--turquoise)}
.diensten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.diensten li{padding-top:var(--s3);border-top:1px solid #E3DED2}
.diensten h3{margin-bottom:var(--s1)}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid #E3DED2}
.faq details{border-bottom:1px solid #E3DED2}
.faq summary{cursor:pointer;font-weight:700;font-size:var(--h3);line-height:1.3;padding:var(--s3) 0;list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--turquoise-donker);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--s3);max-width:60ch}

/* Contactblok */
.routes{display:grid;grid-template-columns:1fr;gap:var(--s5)}
.kaart{background:rgba(250,247,240,.05);border:1px solid rgba(250,247,240,.2);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.kaart h2,.kaart h3{font-size:21px;line-height:1.25}
.agenda{background:var(--warmwit);border-radius:var(--r);min-height:560px;overflow:hidden}
.agenda iframe{width:100%;height:620px;border:0;display:block}
.opties{display:flex;flex-direction:column;gap:var(--s2)}
.optie{position:relative;display:flex;align-items:center;min-height:var(--knophoogte);border-radius:var(--r);background:var(--warmwit);color:var(--petrol);border:2px solid var(--warmwit);font-size:17px;line-height:1.25;cursor:pointer;padding:12px 14px;gap:12px}
.optie input{position:absolute;opacity:0;width:1px;height:1px}
.optie:has(input:checked){border-color:var(--turquoise)}
.optie:has(input:focus-visible){outline:3px solid var(--turquoise);outline-offset:3px}
.optie::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--petrol-licht);flex:none}
.optie:has(input:checked)::before{border-color:var(--turquoise);background:var(--turquoise);box-shadow:inset 0 0 0 3px var(--warmwit)}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-size:var(--bijschrift)}
.veld input,.veld textarea{font:inherit;font-size:17px;min-height:var(--knophoogte);padding:0 14px;border-radius:var(--r);border:2px solid var(--warmwit-tint);background:var(--warmwit);color:var(--petrol);width:100%}
.veld textarea{min-height:88px;padding:12px 14px;line-height:1.4}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--turquoise)}
.stapkop{font-weight:700;font-size:var(--bijschrift);color:var(--tekst-donker-zacht)}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;display:block;margin-bottom:var(--s3)}
.stap{display:flex;flex-direction:column;gap:var(--s3)}
fieldset.stap legend+*{margin-top:0}
.stap[hidden]{display:none}
.terug{background:none;border:none;color:var(--warmwit);text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:var(--bijschrift);padding:0;cursor:pointer;align-self:flex-start}
.fout{color:#FFD7C2;font-size:var(--bijschrift);min-height:1.4em}
.fout:empty{display:none}
.honing{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.bevestiging{display:flex;flex-direction:column;gap:12px}
.kanalen{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:var(--bijschrift);align-items:center}
.privacyregel{font-size:var(--bijschrift);color:var(--tekst-donker-zacht)}
.privacyregel a{color:var(--warmwit)}
.herken{background:var(--warmwit-tint);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.herken .optie{background:var(--warmwit);border-color:var(--warmwit)}
.herken .optie:has(input:checked){border-color:var(--turquoise)}
.herken .veld input,.herken .veld textarea{border-color:#E3DED2}
.herken .stapkop{color:var(--petrol-tint)}
.herken .terug{color:var(--petrol)}
.herken .fout{color:var(--turquoise-donker)}
.herken .privacyregel{color:var(--petrol-tint)}
.herken .privacyregel a{color:var(--petrol)}

/* Blogpost */
.artikel{max-width:calc(640px + 2 * var(--gutter))}
.artikel-kop{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s5)}
.artikel-kop h1{font-size:32px}
.artikel .tekst{display:flex;flex-direction:column;gap:var(--s3)}
.artikel .tekst h2{font-size:var(--h3);margin-top:var(--s2)}
.artikel .tekst p{max-width:65ch}
.schrijver{display:flex;gap:var(--s3);align-items:center;padding-top:var(--s4);border-top:1px solid #E3DED2}
.schrijver .portret{width:56px;height:56px}
.verwant{display:flex;flex-direction:column;gap:var(--s2)}

/* Voettekst */
footer{padding-block:var(--s4);font-size:var(--bijschrift);background:var(--turquoise);color:var(--petrol)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:center}
footer img{height:26px;width:auto}
footer a{color:var(--petrol)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s3)}
footer .feiten{width:100%;font-size:14px;line-height:1.45;max-width:72ch}

/* Vaste knop op telefoon */
.vast{display:none;position:fixed;left:0;right:0;bottom:0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:var(--warmwit);border-top:1px solid var(--warmwit-tint);z-index:6}
.vast .knop{width:100%}
.vast.zichtbaar{display:block}
.vast.verborgen,html.menu-open .vast{display:none}

/* 404 en privacy */
.smal{max-width:calc(640px + 2 * var(--gutter))}
ul.routes-lijst{padding-left:20px;display:flex;flex-direction:column;gap:var(--s2)}

@media (min-width:760px){
  body{padding-bottom:0}
  .hero h1{font-size:var(--h1)}
  .artikel-kop h1{font-size:44px}
  .quote{font-size:30px}
  section{padding-block:var(--s7)}
  nav ul{display:flex}
  .menuknop{display:none}
  nav .kopknop{display:inline-flex}
  .logo img{height:34px}
  .hero{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:56px;align-items:stretch}
  .hero .stack{justify-content:center}
  .hero-blok{padding-block:0}
  .hero .stack{padding-block:var(--s7)}
  .foto-hero{margin-inline:0;margin-right:calc((100vw - min(100vw, calc(var(--blokbreedte) + 2 * var(--gutter)))) / -2);border-radius:0;min-height:620px}
  .foto-hero img{aspect-ratio:auto;height:100%;min-height:620px}
  .hero h1,.hero .lead{max-width:560px}
  .aanbod{display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--s6);align-items:stretch}
  .foto-staand img{aspect-ratio:auto;min-height:520px}
  .routes{grid-template-columns:1fr 1fr}
  .vast{display:none !important}
  .portret-groot{width:200px;height:200px}
}
@media (prefers-reduced-motion:no-preference){.knop,.optie{transition:background-color 150ms,color 150ms,border-color 150ms}}
@media print{header.kop,.vast,footer{display:none}}