/* Lettertypen staan in de site zelf (assets/fonts), er wordt niets bij Google opgehaald.
   Archivo en Inter Tight vallen onder de SIL Open Font License 1.1; zie assets/fonts/LICENTIE.txt. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-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: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-tight-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-tight-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; }

/* Kept Goods — huisstijl volgens Brand Guidelines */
:root {
  --blauw: #69c5d8;        /* Primary – Waterblauw */
  --blauw-fel: #5ccde2;    /* iets frisser voor grote vlakken */
  --blauw-licht: #d6eff4;
  --petrol: #163843;       /* Dark – Donker petrol */
  --charcoal: #222222;     /* Text */
  --stone: #b7b1a8;        /* Neutral */
  --creme: #f4efe8;        /* Light */
  --lijn: #ddd6cc;
  --tekst-zacht: #4a5a60;

  --font-kop: "Archivo", "Archivo Black", system-ui, sans-serif;
  --font-tekst: "Inter Tight", system-ui, sans-serif;

  --max: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--charcoal);
  font-family: var(--font-tekst);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typografie ---------- */
h1, h2, h3, .kop {
  font-family: var(--font-kop);
  font-weight: 800;
  font-stretch: 78%;
  font-variation-settings: "wdth" 78;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--petrol);
  margin: 0;
}
h1 { font-size: clamp(48px, 7.4vw, 100px); }
h2 { font-size: clamp(36px, 4.6vw, 60px); }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0; }

.label {
  font-family: var(--font-tekst);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blauw);
  margin: 0 0 14px;
}
.label--donker { color: var(--petrol); font-size: 12px; letter-spacing: 0.3em; }
.intro { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; color: var(--tekst-zacht); }
.punt { color: var(--blauw); }
.wit { color: #fff; }
.bijschrift { font-size: 12px; color: #7d8589; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-family: var(--font-tekst); font-weight: 600; font-size: 17px;
  text-decoration: none; border: 0; cursor: pointer;
  background: var(--petrol); color: #fff;
  transition: transform .15s ease, background-color .15s ease;
}
.knop:hover { background: #0e2a33; transform: translateY(-1px); }
.knop svg { width: 20px; height: 20px; flex: none; }
.knop--blauw { background: var(--blauw-fel); color: var(--petrol); }
.knop--blauw:hover { background: #7fd9ea; }
.knop--klein { padding: 10px 18px; font-size: 16px; }
.knop--breed { width: 100%; justify-content: center; padding: 18px; font-size: 19px; }

/* (header en footer: zie onderaan, "Navigatie") */

/* ---------- Secties ---------- */
section { position: relative; }
.ruimte { padding: clamp(36px, 4.5vw, 60px) 0; }

/* Split hero (home / aanpak / over) */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.hero__tekst { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 48px var(--gutter) 56px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.hero__tekst .intro { max-width: 30ch; }
.hero__beeld { position: relative; overflow: hidden; }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; }
.hero__beeld .bijschrift { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: var(--creme); }
.hero--blauw { background: var(--blauw-fel); }
.hero--blauw .hero__tekst { color: var(--petrol); }
.hero--blauw h1 { font-size: clamp(56px, 7vw, 96px); }
.hero--blauw .intro { color: var(--petrol); }

/* Banner (mogelijkheden) */
.banner { background: var(--blauw-fel); padding: 44px 0 40px; }
.banner h1 { font-size: clamp(44px, 6.4vw, 84px); margin-bottom: 16px; }
.banner .intro { color: var(--petrol); font-size: clamp(19px, 2vw, 28px); max-width: 44ch; }

/* Voorbeelden-raster */
.voorbeelden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kaart img { width: 100%; aspect-ratio: 0.93; object-fit: cover; }
.kaart__onder { display: flex; gap: 20px; padding-top: 18px; align-items: baseline; }
.nummer { font-family: var(--font-kop); font-weight: 800; color: var(--blauw); font-size: 24px; letter-spacing: -0.02em; }
.kaart h3 { font-family: var(--font-tekst); font-weight: 700; letter-spacing: -0.01em; font-size: 18px; color: var(--charcoal); }
.kaart p { font-size: 15px; color: var(--tekst-zacht); }

.mogelijkheden { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 22px; }
.mogelijkheden img { width: 100%; aspect-ratio: 1.36; object-fit: cover; }
.mogelijkheden h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 16px 0 6px; }
.mogelijkheden p { color: var(--tekst-zacht); font-size: 18px; }

.notitie { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.notitie::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }

/* Stappen */
.samen { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.samen .intro { margin-top: 20px; max-width: 26ch; }
.stappen-kort { list-style: none; margin: 0; padding: 0; }
.stappen-kort li { display: grid; grid-template-columns: 84px 1fr; padding: 18px 0; border-top: 1px solid var(--lijn); }
.stappen-kort li:last-child { border-bottom: 1px solid var(--lijn); }
.stappen-kort strong { display: block; font-size: 18px; font-weight: 700; }
.stappen-kort div span { font-size: 15px; color: var(--tekst-zacht); }
.stappen-kort .nummer { font-size: 28px; line-height: 1; }

.stappen { list-style: none; margin: 0; padding: 0; }
.stappen li { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 40px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--lijn); }
.stappen li:last-child { border-bottom: 0; }
.stappen .groot-nummer { font-family: var(--font-kop); font-weight: 900; font-stretch: 80%; font-variation-settings: "wdth" 80; font-size: 92px; line-height: 1; letter-spacing: -0.04em; color: var(--blauw); border-right: 1px solid var(--lijn); }
.stappen h2 { font-size: clamp(30px, 3vw, 40px); }
.stappen .tags { margin-top: 10px; color: var(--tekst-zacht); font-size: 18px; }
.stappen .tags span + span::before { content: "•"; margin: 0 12px; color: var(--petrol); }
.stappen p { color: var(--tekst-zacht); }

/* Info-blok lichtblauw */
.blok-licht { background: var(--blauw-licht); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); }
.vragen { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px 0 24px; padding-bottom: 24px; border-bottom: 1px solid #b9dce4; }
.vragen div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 16px; font-weight: 600; font-size: 19px; color: var(--petrol); }
.vragen div + div { border-left: 1px solid #b9dce4; }
.vragen svg { width: 46px; height: 46px; stroke: var(--petrol); }

/* CTA-balk */
.cta { background: var(--petrol); border-radius: var(--radius); padding: 28px clamp(24px, 3vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.cta h2 { color: #fff; font-size: clamp(32px, 4vw, 52px); }
.cta p { color: #d9e6ea; font-size: 15px; line-height: 1.55; max-width: 40ch; }
.cta p.cta__sub { font-size: 18px; margin-top: 6px; }
.cta-sectie { padding: 8px 0 32px; }

/* Over ons */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
.duo > div:first-child { padding-right: 48px; border-right: 1px solid var(--lijn); }
.duo > div:last-child { padding-left: 64px; display: grid; gap: 18px; font-size: 19px; }
.waarden { background: var(--blauw-fel); padding: 40px 0; }
.waarden .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.waarden .wrap > div { padding: 4px 36px; }
.waarden .wrap > div:first-child { padding-left: 0; }
.waarden .wrap > div + div { border-left: 1px solid rgba(22, 56, 67, .25); }
.waarden h3 { font-size: 24px; margin-bottom: 10px; }
.waarden p { color: var(--petrol); }
.houden { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; padding-top: 16px; padding-bottom: 24px; }
.houden h2 { font-size: clamp(34px, 4vw, 50px); margin-bottom: 18px; }
.houden img { width: 100%; }
.figuur { position: relative; }
.figuur .bijschrift { position: absolute; right: 10px; bottom: 6px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* Contact */
.contact { display: grid; grid-template-columns: 1fr 0.78fr; gap: 20px; padding-top: 40px; padding-bottom: 56px; }
.contact h1 { font-size: clamp(56px, 8vw, 108px); }
.contact .intro { margin: 22px 0 32px; max-width: 34ch; }
.formulier { border: 1px solid var(--lijn); border-radius: 8px; padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2.2vw, 24px); display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.veld { display: grid; gap: 8px; min-width: 0; }
.contact > *, .formulier { min-width: 0; }
.veld--vol { grid-column: 1 / -1; }
.veld label { font-weight: 500; font-size: 16px; color: var(--charcoal); }
.veld label small { color: #7d8589; font-size: 16px; }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: 16px; color: var(--charcoal);
  background: transparent; border: 1px solid #c9c2b8; border-radius: 3px;
  padding: 14px 16px; width: 100%;
}
.veld textarea { min-height: 160px; resize: vertical; }
.veld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23163843' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.veld input::placeholder, .veld textarea::placeholder { color: #9a9a96; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(105,197,216,.35); }
.upload { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.upload label { display: inline-flex; align-items: center; gap: 14px; padding: 18px 24px; border: 1px dashed #b4ada3; border-radius: 3px; cursor: pointer; font-size: 18px; color: var(--petrol); }
.upload label:hover { border-color: var(--petrol); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload svg { width: 24px; height: 24px; }
.upload .bestand { color: #7d8589; font-size: 15px; }
.formulier .privacy { grid-column: 1 / -1; font-size: 14px; color: #6c7377; }
.formulier .knop--breed { grid-column: 1 / -1; }
.melding { grid-column: 1 / -1; padding: 14px 16px; border-radius: 3px; background: var(--blauw-licht); color: var(--petrol); font-weight: 500; }
.melding[hidden] { display: none; }

.zijkant { display: grid; gap: 20px; align-content: start; }
.plan { background: #8dd8e8; border-radius: 4px; padding: clamp(24px, 3vw, 34px); }
.plan h2 { font-size: clamp(36px, 4vw, 52px); }
.plan > p { margin: 18px 0 26px; padding-bottom: 26px; border-bottom: 1px solid rgba(22,56,67,.25); font-size: 19px; color: var(--petrol); }
.plan h3 { font-size: 27px; margin-bottom: 8px; }
.plan ol { list-style: none; margin: 0; padding: 0; }
.plan li { display: grid; grid-template-columns: 72px 1fr; align-items: center; padding: 16px 0; color: var(--petrol); font-size: 17px; }
.plan li + li { border-top: 1px solid rgba(22,56,67,.25); }
.plan li b { font-family: var(--font-kop); font-weight: 800; color: #1fa9c8; font-size: 28px; }
.zijkant img { width: 100%; border-radius: 4px; }

/* ---------- Responsief ---------- */
@media (max-width: 980px) {
  .hero, .samen, .contact, .duo, .houden { grid-template-columns: 1fr; }
  .hero__tekst { padding: 40px var(--gutter); }
  .hero__beeld { aspect-ratio: 4 / 3; }
  .stappen li { grid-template-columns: 110px 1fr; gap: 12px 28px; }
  .stappen li p { grid-column: 2; }
  .stappen .groot-nummer { font-size: 64px; }
  .vragen { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .vragen div:nth-child(3) { border-left: 0; }
  .duo > div:first-child { padding: 0 0 28px; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .duo > div:last-child { padding: 28px 0 0; }
  .waarden .wrap { grid-template-columns: 1fr; gap: 24px; }
  .waarden .wrap > div { padding: 0 !important; border-left: 0 !important; }
  .zijkant { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .voorbeelden, .mogelijkheden, .zijkant { grid-template-columns: 1fr; }
  .formulier { grid-template-columns: 1fr; }
  .stappen li { grid-template-columns: 1fr; }
  .stappen li p { grid-column: auto; }
  .stappen .groot-nummer { border-right: 0; }
  .vragen { grid-template-columns: 1fr; }
  .vragen div { flex-direction: row; text-align: left; border-left: 0 !important; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .knop { transition: none; } }

/* =====================================================================
   Navigatie
   ===================================================================== */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--petrol); color: #fff; padding: 10px 16px; border-radius: var(--radius); }
.skip:focus { left: 8px; }

.header { position: sticky; top: 0; z-index: 60; background: var(--creme); border-bottom: 1px solid transparent; transition: border-color .2s; }
.header.is-scrolled { border-color: var(--lijn); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.logo img { width: 128px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav > a:not(.knop), .nav-drop { text-decoration: none; font: 500 15px/1.2 var(--font-tekst); color: var(--charcoal); padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; }
.nav > a:not(.knop):hover, .nav-drop:hover { border-color: var(--stone); }
.nav > a:not(.knop)[aria-current="page"], .nav-drop.is-actief { border-color: var(--blauw); }
.nav-drop { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop .chevron { width: 14px; height: 14px; transition: transform .2s; }
.nav-item { position: relative; }
.nav-item.is-open .chevron { transform: rotate(180deg); }
.nav__cta { display: none; }
.menu-knop { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--petrol); }
.menu-knop svg { width: 28px; height: 28px; }

.megamenu { display: none; position: absolute; top: calc(100% + 18px); left: -28px; width: 720px; background: #fbf8f4; border: 1px solid var(--lijn); border-radius: 8px; box-shadow: 0 18px 40px rgba(22, 56, 67, .14); grid-template-columns: 1.35fr 1fr; }
.megamenu::before { content: ""; position: absolute; top: -24px; left: 0; right: 0; height: 24px; } /* hover-brug over de ruimte tussen knop en menu */
.nav-item.is-open .megamenu { display: grid; }
@media (hover: hover) and (min-width: 1081px) { .nav-item:hover .megamenu { display: grid; } .nav-item:hover .chevron { transform: rotate(180deg); } }
.megamenu__lijst { list-style: none; margin: 0; padding: 14px; }
.megamenu__lijst a { display: block; padding: 11px 14px; border-radius: 6px; text-decoration: none; }
.megamenu__lijst a:hover, .megamenu__lijst a:focus-visible { background: var(--blauw-licht); }
.megamenu__lijst strong { display: block; font-size: 16px; color: var(--petrol); }
.megamenu__lijst span { display: block; font-size: 14px; color: var(--tekst-zacht); }
.megamenu__alles a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--petrol); font-size: 15px; }
.megamenu__alles svg { width: 16px; height: 16px; }
.megamenu__hulp { border-radius: 0 7px 7px 0; background: var(--petrol); color: #d9e6ea; padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.megamenu__hulp .kop { color: #fff; font-size: 28px; }
.megamenu__hulp .label { margin: 0; }
.megamenu__hulp p { font-size: 15px; }
.megamenu__hulp .knop { margin-top: auto; }

@media (max-width: 1080px) {
  .header__in { height: 64px; }
  .logo img { width: 104px; }
  .header__cta { display: none; }
  .menu-knop { display: block; }
  .header .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--creme); border-bottom: 1px solid var(--lijn); padding: 4px var(--gutter) 24px; box-shadow: 0 16px 30px rgba(22,56,67,.1); }
  .header .nav.is-open { display: flex; }
  .nav > a:not(.knop), .nav-drop { padding: 16px 0; font-size: 19px; border-bottom: 1px solid var(--lijn); width: 100%; text-align: left; }
  .nav > a:not(.knop)[aria-current="page"], .nav-drop.is-actief { border-color: var(--lijn); color: #1792ad; }
  .nav-drop { justify-content: space-between; }
  .megamenu { position: static; width: auto; box-shadow: none; border: 0; background: none; grid-template-columns: 1fr; }
  .megamenu::before { display: none; }
  .megamenu__lijst { padding: 4px 0 8px 12px; border-left: 2px solid var(--blauw); margin: 10px 0; }
  .megamenu__lijst span { display: none; }
  .megamenu__lijst a { padding: 9px 12px; }
  .megamenu__hulp { display: none; }
  .nav__cta { display: inline-flex; justify-content: center; margin-top: 14px; }
  body.menu-open { overflow: hidden; }
  body.menu-open .teller { display: none; }
}

/* ---------- Footer ---------- */
.footer { padding: 24px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; border-top: 1px solid var(--lijn); padding-top: 36px; }
.footer__merk img { width: 110px; margin-bottom: 14px; }
.footer__merk p { font-size: 14px; line-height: 1.35; margin-bottom: 18px; }
.footer__kop { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer ul a { text-decoration: none; font-size: 15px; color: var(--tekst-zacht); }
.footer ul a:hover { color: var(--petrol); text-decoration: underline; }
.footer ul a[aria-current="page"] { color: var(--petrol); font-weight: 600; }
.linkedin { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--petrol); text-decoration: none; }
.linkedin svg { width: 22px; height: 22px; color: #0a66c2; }
.linkedin:hover { text-decoration: underline; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__merk { grid-column: 1 / -1; } }

/* =====================================================================
   Algemene bouwstenen
   ===================================================================== */
.h1-m { font-size: clamp(44px, 5.6vw, 76px); }
.midden { text-align: center; }
.ruimte-klein { padding: clamp(24px, 3vw, 40px) 0; }
/* Twee secties met witruimte na elkaar: niet dubbel optellen */
:is(.ruimte, .ruimte-klein) + :is(.ruimte, .ruimte-klein) { padding-top: 0; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.knop--rand { background: transparent; color: var(--petrol); box-shadow: inset 0 0 0 2px var(--petrol); }
.knop--rand:hover { background: var(--petrol); color: #fff; }
.tekstlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--petrol); text-decoration: none; white-space: nowrap; }
.tekstlink svg { width: 18px; height: 18px; }
.tekstlink:hover { text-decoration: underline; }
.sectiekop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.kruimel { font-size: 14px; color: var(--tekst-zacht); margin-bottom: 4px; }
.kruimel a { color: var(--petrol); font-weight: 600; }
.banner--compact { padding: 36px 0 32px; }
.blok-licht a, .plan a, .artikel__tekst a { color: var(--petrol); font-weight: 600; }

/* Gelegenheden-kaarten */
.gel-raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.gel-raster.vier { grid-template-columns: repeat(4, 1fr); }
.gel-kaart { position: relative; display: flex; flex-direction: column; min-width: 0; text-decoration: none; background: #fbf8f4; border: 1px solid var(--lijn); border-radius: 6px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.gel-kaart:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(22,56,67,.12); }
.gel-kaart img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gel-kaart__tekst { padding: 14px 16px 18px; display: grid; gap: 4px; }
.gel-kaart strong { font-family: var(--font-kop); font-weight: 800; font-variation-settings: "wdth" 80; font-size: 20px; line-height: 1.05; letter-spacing: -.02em; color: var(--petrol); }
.gel-kaart__tekst span { font-size: 14px; color: var(--tekst-zacht); line-height: 1.4; }
.gel-kaart__pijl { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; color: var(--petrol); }
.gel-kaart__pijl svg { width: 16px; height: 16px; }

/* Subnavigatie gelegenheden */
.subnav { position: sticky; top: 76px; z-index: 40; background: var(--creme); border-bottom: 1px solid var(--lijn); }
.subnav__in { display: flex; gap: 8px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a { flex: none; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--petrol); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lijn); background: #fbf8f4; white-space: nowrap; }
.subnav a:hover { border-color: var(--petrol); }
.subnav a[aria-current="page"] { background: var(--petrol); color: #fff; border-color: var(--petrol); }
@media (max-width: 1080px) { .subnav { top: 64px; } }

/* Gelegenheidspagina */
.ideeen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.idee img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; }
.idee h3 { margin-bottom: 6px; }
.idee p { color: var(--tekst-zacht); font-size: 17px; }
.faq-blok { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.faq details { border-top: 1px solid var(--lijn); }
.faq details:last-child { border-bottom: 1px solid var(--lijn); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-weight: 600; font-size: 18px; color: var(--petrol); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: #1792ad; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 20px; color: var(--tekst-zacht); }

/* Keuzehulp-band */
.hulpband { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 32px; align-items: center; background: var(--blauw-licht); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 40px); }
.hulpband h2 { font-size: clamp(30px, 3.4vw, 44px); }
.hulpband > p { color: var(--petrol); }

/* Keuzehulp */
.keuzehulp { max-width: 880px; margin: 0 auto; scroll-margin-top: 96px; }
.keuzehulp h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 26px; outline: none; }
.keuzehulp__voortgang { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--tekst-zacht); }
.balk { flex: 1; height: 6px; border-radius: 3px; background: var(--lijn); overflow: hidden; }
.balk i { display: block; height: 100%; background: var(--blauw); transition: width .3s ease; }
.opties { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.optie { font: 600 18px/1.3 var(--font-tekst); color: var(--petrol); text-align: left; padding: 22px; border: 1px solid #cfc7bc; border-radius: 6px; background: #fbf8f4; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.optie:hover { border-color: var(--petrol); transform: translateY(-2px); }
.optie.is-gekozen { background: var(--petrol); color: #fff; border-color: var(--petrol); }
.terug { margin-top: 22px; background: none; border: 0; font: 600 15px var(--font-tekst); color: var(--tekst-zacht); cursor: pointer; padding: 6px 0; }
.terug:hover { color: var(--petrol); text-decoration: underline; }
.uitkomst { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.uitkomst img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.uitkomst h2 { margin-bottom: 14px; }
.uitkomst__keuzes { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.uitkomst__keuzes li { background: var(--blauw-licht); color: var(--petrol); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; }
.uitkomst__keuzes span { font-weight: 400; margin-right: 6px; }
.uitkomst__tips { margin: 0 0 26px; padding-left: 20px; color: var(--tekst-zacht); display: grid; gap: 8px; }
.uitkomst__tips li::marker { color: var(--blauw); }

/* Contact: notitie vanuit keuzehulp */
.via-keuzehulp { grid-column: 1 / -1; background: var(--blauw-licht); color: var(--petrol); padding: 14px 16px; border-radius: 3px; font-size: 15px; font-weight: 500; }
.via-keuzehulp[hidden] { display: none; }

/* Inspiratie */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { font: 600 15px var(--font-tekst); color: var(--petrol); background: #fbf8f4; border: 1px solid var(--lijn); border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.chip:hover { border-color: var(--petrol); }
.chip.is-actief { background: var(--petrol); color: #fff; border-color: var(--petrol); }
.art-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 22px; }
.art-raster--twee { grid-template-columns: repeat(2, 1fr); }
.art-kaart { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.art-kaart[hidden] { display: none; }
.art-kaart img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin-bottom: 8px; transition: opacity .2s; }
.art-kaart:hover img { opacity: .88; }
.art-kaart:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.art-kaart__meta { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1792ad; }
.art-kaart strong { font-family: var(--font-kop); font-weight: 800; font-variation-settings: "wdth" 80; font-size: 26px; line-height: 1.05; letter-spacing: -.02em; color: var(--petrol); }
.art-kaart__intro { color: var(--tekst-zacht); font-size: 16px; }
.art-kaart--groot { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 6px 36px; align-content: center; }
.art-kaart--groot img { grid-row: 1 / span 4; aspect-ratio: 16 / 10; margin: 0; }
.art-kaart--groot strong { font-size: clamp(32px, 3.6vw, 46px); align-self: end; }
.art-kaart--groot .art-kaart__meta { align-self: end; }
.art-kaart--groot .art-kaart__intro { font-size: 19px; align-self: start; }
.linkedin-band { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--petrol); color: #d9e6ea; border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); }
.linkedin-band h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); margin-bottom: 6px; }
.linkedin-band__icoon { width: 64px; height: 64px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #0a66c2; }
.linkedin-band__icoon svg { width: 36px; height: 36px; }

/* Artikel */
.artikel__kop { max-width: 860px; padding-top: 48px; padding-bottom: 32px; }
.artikel__kop h1 { font-size: clamp(42px, 5.4vw, 72px); margin: 8px 0 18px; }
.artikel__meta { margin-top: 18px; font-size: 14px; color: var(--tekst-zacht); }
.artikel__beeld { width: 100%; max-height: 560px; object-fit: cover; border-radius: 6px; }
.artikel__tekst { max-width: 700px; margin: 0 auto; padding: 48px 0 24px; font-size: 19px; line-height: 1.65; }
.artikel__tekst p { margin-bottom: 18px; }
.artikel__tekst h2 { font-size: clamp(28px, 3vw, 36px); margin: 40px 0 12px; }
.deel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--lijn); font-size: 15px; }
.deel > span { font-weight: 700; color: var(--petrol); margin-right: 6px; }
.deel__knop { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--font-tekst); color: var(--petrol); background: #fbf8f4; border: 1px solid var(--lijn); border-radius: 999px; padding: 8px 16px; text-decoration: none; cursor: pointer; }
.deel__knop:hover { border-color: var(--petrol); }
.deel__knop svg { width: 18px; height: 18px; color: #0a66c2; }

/* =====================================================================
   Deadline-teller (rechtsonder, weg te klikken)
   ===================================================================== */
.teller { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 272px; background: var(--petrol); color: #d9e6ea; border-radius: 9px; padding: 15px 17px 16px; box-shadow: 0 16px 38px rgba(10, 30, 36, .32); opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease; }
.teller.is-zichtbaar { opacity: 1; transform: none; }
.teller.is-weg { opacity: 0; transform: translateY(16px); }
.teller__sluit { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.teller__sluit:hover { background: rgba(255,255,255,.22); }
.teller__sluit svg { width: 14px; height: 14px; }
.teller__label { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--blauw); margin-bottom: 9px; padding-right: 32px; }
.teller__klok { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 11px; }
.teller__klok span { background: rgba(255,255,255,.08); border-radius: 6px; padding: 7px 0 5px; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.teller__klok b { display: block; font-family: var(--font-kop); font-weight: 800; font-variation-settings: "wdth" 80; font-size: 24px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.teller__tekst { font-size: 13px; line-height: 1.4; margin-bottom: 11px; }
.teller__link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--petrol); background: var(--blauw-fel); padding: 8px 13px; border-radius: var(--radius); text-decoration: none; }
.teller__link svg { width: 15px; height: 15px; }
.teller__link:hover { background: #7fd9ea; }
.teller__link .kort { display: none; }
@media (max-width: 760px) {
  .teller { left: 12px; right: 12px; bottom: 12px; width: auto; display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center; padding: 12px 14px; }
  .teller__label { grid-column: 1 / -1; margin-bottom: 8px; }
  .teller__klok { margin: 0; gap: 4px; }
  .teller__klok span { padding: 6px 2px 4px; font-size: 9px; }
  .teller__klok b { font-size: 20px; }
  .teller__tekst { display: none; }
  .teller__link { padding: 10px 12px; }
  .teller__link .lang { display: none; }
  .teller__link .kort { display: inline; }
  body.heeft-teller { padding-bottom: 120px; }
}

/* ---------- Responsief nieuwe onderdelen ---------- */
@media (max-width: 1080px) {
  .gel-raster, .gel-raster.vier { grid-template-columns: repeat(3, 1fr); }
  .hulpband { grid-template-columns: 1fr; gap: 16px; }
  .hulpband .knop { justify-self: start; }
}
@media (max-width: 980px) {
  .uitkomst img { aspect-ratio: 16 / 10; }
  .art-raster { grid-template-columns: 1fr 1fr; }
  .art-kaart--groot { grid-template-columns: 1fr; }
  .art-kaart--groot img { grid-row: auto; margin-bottom: 8px; }
  .ideeen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .gel-raster, .gel-raster.vier { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gel-kaart strong { font-size: 18px; }
  .gel-kaart__tekst span { display: none; }
  .art-raster, .art-raster--twee, .ideeen { grid-template-columns: 1fr; }
  .linkedin-band { grid-template-columns: 1fr; }
  .artikel__tekst { font-size: 18px; padding-top: 32px; }
  .opties { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .teller, .gel-kaart, .optie, .balk i { transition: none; }
}

/* =====================================================================
   Hero home: volledige foto in beeld (hoogte volgt de foto)
   ===================================================================== */
.hero--heel { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); min-height: 0; align-items: center; }
.hero--heel .hero__beeld { aspect-ratio: 1672 / 941; }
.hero--heel .hero__tekst { padding-top: 28px; padding-bottom: 28px; padding-right: 32px; gap: 18px; }
@media (min-width: 1081px) {
  .hero--heel .knoppen { flex-wrap: nowrap; }
  .hero--heel .knop { padding: 11px 18px; font-size: 16px; gap: 14px; white-space: nowrap; }
}
.hero--heel h1 { font-size: clamp(40px, 4.2vw, 84px); }
.hero--heel .intro { max-width: 36ch; }
@media (max-width: 1080px) { .hero--heel { grid-template-columns: 1fr; } .hero--heel .hero__tekst { padding: 36px var(--gutter); } }

/* =====================================================================
   Zie het met jouw merk
   ===================================================================== */
.merk h2 { margin-bottom: 20px; }
.merk__veld { max-width: 520px; margin: 0 auto 28px; }
.merk__veld input { font-size: 18px; padding: 16px 18px; background: #fbf8f4; }
.merk-kaart__beeld { position: relative; overflow: hidden; aspect-ratio: 1; }
.merk-kaart .merk-kaart__beeld img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.opdruk { position: absolute; pointer-events: none; transform-origin: 50% 50%; }
.opdruk__tekst {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  white-space: nowrap; text-align: center; text-transform: uppercase;
  font-family: var(--font-kop); font-weight: 900; font-stretch: 100%; font-variation-settings: "wdth" 100;
  line-height: .95; letter-spacing: .01em;
}
.opdruk__tekst span { display: block; }
.techniek { display: inline-block; margin-top: 6px; font-size: 12px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--petrol) !important; background: var(--blauw-licht); padding: 4px 10px; border-radius: 999px; }
.merk__voet { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; text-align: center; }
.merk__voet .bijschrift { font-size: 14px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Debugmodus (?debug=1) */
.opdruk-debug { position: absolute; outline: 2px dashed #ff00aa; pointer-events: none; transform-origin: 50% 50%; }
.opdruk-debug::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ff00aa; }
.debug-paneel { margin-top: 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; font-size: 12px; background: #fff; border: 1px dashed #ff00aa; padding: 10px; }
.debug-paneel label { display: grid; gap: 2px; }
.debug-paneel input, .debug-paneel select { font: inherit; padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; min-width: 0; }
.debug-paneel button { grid-column: 1 / -1; font: inherit; font-weight: 600; padding: 6px; border: 1px solid #ff00aa; background: #fff0fa; border-radius: 3px; cursor: pointer; }

/* =====================================================================
   Gelegenheden in vier groepen (menu, overzicht, subnavigatie)
   ===================================================================== */
.header__in { position: relative; }
.nav-item { position: static; }
.megamenu { left: 0; right: 0; width: auto; top: calc(100% - 6px); grid-template-columns: 1fr; }
.megamenu::before { top: -26px; height: 26px; }
.megamenu__kolommen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px; padding: 26px 28px 18px; }
.megamenu__cat { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1792ad; text-decoration: none; padding: 0 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--lijn); }
.megamenu__cat:hover { color: var(--petrol); }
.megamenu__kolom ul { list-style: none; margin: 0; padding: 0; }
.megamenu__kolom li a { display: block; padding: 7px 10px; border-radius: 5px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--petrol); }
.megamenu__kolom li a:hover, .megamenu__kolom li a:focus-visible { background: var(--blauw-licht); }
.megamenu__voet { display: flex; align-items: center; gap: 20px; padding: 14px 28px; background: var(--petrol); color: #d9e6ea; border-radius: 0 0 7px 7px; }
.megamenu__voet p { flex: 1; font-size: 14px; }
.megamenu__voet strong { color: #fff; }
.megamenu__alles { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; white-space: nowrap; }
.megamenu__alles svg { width: 16px; height: 16px; }
.megamenu__alles:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .megamenu { border-left: 2px solid var(--blauw); margin: 10px 0; border-radius: 0; }
  .megamenu__kolommen { grid-template-columns: 1fr; padding: 4px 0 4px 12px; gap: 14px; }
  .megamenu__cat { border: 0; padding: 0 12px 2px; font-size: 11px; }
  .megamenu__kolom li a { padding: 7px 12px; font-size: 16px; }
  .megamenu__voet { background: none; padding: 6px 0 4px 24px; }
  .megamenu__voet p, .megamenu__voet .knop { display: none; }
  .megamenu__alles { color: var(--petrol); }
}

/* Subnavigatie */
.subnav__in { align-items: center; }
.subnav__label { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-zacht); margin: 0 4px 0 6px; }
.subnav a.subnav__terug { display: inline-flex; align-items: center; gap: 6px; border-color: transparent; background: none; padding-left: 0; }
.subnav a.subnav__terug svg { width: 16px; height: 16px; }
.subnav a.subnav__terug:hover { text-decoration: underline; border-color: transparent; }
.gel-groep { scroll-margin-top: 140px; }
.gel-groep .intro { margin-top: 8px; font-size: 18px; }
.gel-groep .gel-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.gel-groep .gel-kaart strong { font-size: 18px; }
@media (max-width: 1080px) { .gel-groep .gel-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gel-groep .gel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kaarten */
.gel-raster--rij { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gel-kaart__merk { display: grid; place-items: center; aspect-ratio: 1; background: var(--petrol); }
.gel-kaart__merk img { width: 38%; aspect-ratio: auto; object-fit: contain; }

/* Hero zonder passende foto: het K-beeldmerk */
.hero__beeld--merk { background: var(--petrol); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 420px; }
.hero__beeld--merk img { width: min(38%, 240px); height: auto; object-fit: contain; }
.hero__beeld--merk span { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blauw); }

/* Ideeën zonder foto */
.idee--tekst { background: #fbf8f4; border: 1px solid var(--lijn); border-radius: 6px; padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.idee__nummer { font-family: var(--font-kop); font-weight: 800; font-variation-settings: "wdth" 80; font-size: 40px; line-height: 1; color: var(--blauw); margin-bottom: 10px; }
@media (min-width: 981px) { .ideeen { align-items: start; } }
@media (max-width: 1080px) { .hero__beeld--merk { min-height: 300px; aspect-ratio: auto !important; } }

/* Hero gelegenheidspagina's: zelfde opbouw en hoogte als de hero op de homepage */
.hero--gel .hero__beeld img { object-fit: cover; }
.hero--gel .hero__beeld--merk { min-height: 0; }
.hero--gel h1 { font-size: clamp(32px, 3.3vw, 64px); }
.hero--gel .kruimel { font-size: 13px; }
.hero--gel .intro { font-size: clamp(16px, 1.3vw, 21px); }

/* =====================================================================
   Projecten
   ===================================================================== */
.artikel__kop .label { margin: 14px 0 0; }
.artikel__beeld--heel { max-height: none; height: auto; }
.galerij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; padding-bottom: 16px; }
.galerij figure { margin: 0; background: #fff; border-radius: 6px; overflow: hidden; }
.galerij img { width: 100%; height: auto; }
.galerij figure:only-child { grid-column: 1 / -1; max-width: 720px; }
/* Zes menu-items: iets compacter op kleinere laptops */
@media (min-width: 1081px) and (max-width: 1260px) { .nav { gap: 18px; } .nav > a:not(.knop), .nav-drop { font-size: 14px; } .header__cta { padding: 9px 14px; font-size: 15px; } }
@media (max-width: 760px) { .galerij { grid-template-columns: 1fr; } }

/* Projectpagina: feiten als band, staande foto naast het verhaal */
.feitenband { margin-top: 8px; }
.feitenband h3 { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.1; }
.feit__label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); opacity: .7; margin-bottom: 8px; }
.project__naast { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 860px; padding-bottom: 40px; }
.project__foto { width: 100%; height: auto; border-radius: 6px; }
.project__naast .artikel__tekst { margin: 0; padding: 0; max-width: 560px; }
.artikel__beeld--heel + * { margin-top: 0; }
@media (max-width: 860px) { .project__naast { grid-template-columns: 1fr; gap: 28px; } .project__foto { max-width: 460px; } }

/* =====================================================================
   Opmaak die eerst in de pagina's zelf stond (nodig voor de strenge beveiligingsregels)
   ===================================================================== */
.kop-ruim { margin-bottom: 28px; }
.h2-groot { font-size: clamp(40px, 5vw, 66px); }
.stappen-sectie { padding: 20px 0 32px; border-top: 1px solid var(--lijn); }
.mog-sectie { padding: 28px 0 16px; }
/* Valstrikveld tegen spamrobots: onzichtbaar voor bezoekers */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   Het kleine woord boven de kop staat op De mogelijkheden, Projecten, Inspiratie, Keuzehulp en
   Contact op dezelfde hoogte: 44px onder de menubalk. Onze aanpak en Over ons houden hun eigen
   opbouw (tekst halverwege naast de foto); daar staat het woord dus lager. Bewust zo gelaten.
   ===================================================================== */
.label { line-height: 21px; }
.banner--compact { padding-top: 44px; }
.contact { padding-top: 44px; }

/* Over ons: het eerste blok is zo hoog als de tekst nodig heeft en de foto vult de rechterhelft.
   Zo ontstaat er geen groot leeg vlak rond de tekst, ook niet op brede schermen. */
.hero--tekstmaat { min-height: 0; }
.hero--tekstmaat .hero__tekst { justify-content: flex-start; padding-top: 44px; padding-bottom: 56px; gap: 24px; }
.hero--tekstmaat .hero__tekst .intro { max-width: 34ch; }
.hero--tekstmaat .hero__beeld img { position: absolute; inset: 0; }

/* Verzendknop die (nog) niet gebruikt kan worden */
.knop:disabled { opacity: .55; cursor: not-allowed; transform: none; }