@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-640.5c98657e.woff2") format("woff2");font-weight:640;font-style:normal;font-display:swap}
@font-face{font-family:Figtree;src:url("../fonts/figtree-400.818bcc57.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Figtree;src:url("../fonts/figtree-500.d260492e.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{--papier:#FFF1DA;--rood:#A51C30;--groen:#0F5446;--groen-2:#0B4237;--oranje:#E8661C;--oranje-2:#D2560F;--inkt:#1C1B18;--steen:#6B6358;--lijn:#E7D5BC;--veld:#fff;--r-s:10px;--r:16px;--r-l:24px;--schaduw:0 1px 0 rgba(28,27,24,.04),0 12px 32px -12px rgba(15,84,70,.18);--gap:24px;--sectie:112px;--serif:"Bricolage Grotesque",Georgia,serif;--sans:Figtree,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--sans);font-size:1.125rem;line-height:1.6;overflow-x:clip}
img {max-width: 100%; height: auto;}
picture {display: block;}
:focus-visible {outline: 2px solid var(--groen); outline-offset: 3px;}
.skip {position: absolute; left: 0.6rem; top: -3rem; background: var(--inkt); color: var(--papier); padding: 0.4rem 0.7rem; z-index: 20;}
.skip:focus {top: 0.6rem;}
.omslag {width: min(1200px, calc(100% - 48px)); margin-inline: auto;}
.artikel .omslag {width: auto; margin: 0;}
.logo {display: block; line-height: 0; text-decoration: none;}
.logo img {height: 54px; width: auto;}
.btn-offerte, .btn-inkt {display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.55rem 1.15rem; border: 0; border-radius: 999px; font-family: var(--sans); font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer;}
.btn-offerte {background: var(--oranje); color: var(--inkt);}
.btn-offerte:hover {background: var(--inkt); color: var(--papier);}
.btn-inkt {background: var(--groen); color: var(--papier);}
.btn-inkt:hover {background: var(--inkt); color: var(--papier);}
.artikel {width: min(65ch, calc(100% - 2rem)); margin: 1.5rem auto 4rem;}
.artikel-breed {width: min(1200px, calc(100% - 48px));}
h1, h2, h3 {font-family: var(--serif); font-weight: 640; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance;}
h1 {font-size: clamp(2.05rem, 4vw, 3.2rem); line-height: 1.08; margin: 0 0 0.7rem;}
h2 {font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height: 1.12; margin: 0 0 0.75rem; max-width: 18em;}
h3 {font-size: clamp(1.2rem, 2vw, 1.45rem); margin: 1.2rem 0 0.3rem;}
p {margin: 0.7rem 0;}
.artikel p, .artikel li, .blok > .omslag > p, .faq-antwoord, .rubriek p, .praktisch li, .later {max-width: 65ch;}
.dek {font-size: 1.2rem; max-width: 36ch; margin: 0;}
a {color: var(--groen); text-underline-offset: 0.16em;}
a:hover {color: var(--rood);}
.kicker, .fijn, .byline, .colofon, .later {color: var(--steen);}
.kicker, .binnenkort-banner {font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.45rem;}
.kicker {color: var(--groen);}
.binnenkort-banner {display: inline-block; color: var(--steen); border: 1px solid var(--lijn); border-radius: 999px; padding: 0.15rem 0.6rem;}
.kruimel {font-size: 0.92rem; color: var(--steen); margin: 0 0 0.7rem;}
.kruimel a {color: var(--steen);}
.antwoord {font-size: 1.08rem;}
.opzet, .letop {margin: 1rem 0; padding: 0.1rem 0 0.1rem 0.85rem; border-left: 3px solid var(--rood);}
.letop {border-left-color: var(--groen);}
.fout {color: var(--rood);}
.blok {padding: 2.7rem 0 0.2rem;}
.paginakop {width: min(1200px, calc(100% - 48px)); margin: 1.1rem auto 0; display: grid; gap: 1.1rem 2.2rem; align-items: center;}
.paginakop h1 {margin: 0;}
.mask-rond {position: relative; justify-self: start; width: fit-content;}
.mask-rond::before {content: ""; position: absolute; z-index: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--oranje); right: -8%; top: -2%;}
.mask-rond picture {position: relative; z-index: 1;}
.mask-rond img {width: min(15.5rem, 68vw); aspect-ratio: 1; object-fit: cover; border-radius: 50%;}
.mask-illus {position: relative;}
.mask-illus img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.5rem;}
.kop-illus {padding-bottom: 1.8rem;}
.accent {position: absolute; width: 7rem; right: 5%; bottom: -1.4rem; z-index: 1;}
.accent img {width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 0.4rem solid var(--papier);}
.stappenlijst {list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1.8rem;}
.stappenlijst li {display: grid; gap: 0.35rem; align-content: start; min-width: 0;}
.stap-beeld {height: 10.5rem; display: flex; align-items: flex-end; justify-content: center;}
.stap-beeld img {width: auto; max-width: 100%; height: 9.5rem; object-fit: contain;}
.nr {font-family: var(--serif); font-weight: 640; font-size: clamp(2.1rem, 3vw, 2.75rem); line-height: 0.8; letter-spacing: -0.045em; color: var(--groen);}
.vakkaarten, .bedrijflijst {list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; align-items: stretch;}
.vakkaarten {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem;}
.bedrijflijst {grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem 1.25rem;}
.vakkaarten > li, .bedrijflijst > li {display: flex; min-width: 0;}
.bedrijflijst > li {grid-column: span 12;}
.vakkaart {display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; width: 100%; height: 100%; color: var(--inkt); text-decoration: none;}
.vakkaart:hover {color: var(--groen);}
.vak-icoon {width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: var(--groen);}
.vak-icoon svg {width: 1.65rem; height: 1.65rem;}
.vak-naam {font-family: var(--serif); font-weight: 640; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.02em;}
.vak-sub {color: var(--steen); font-size: 0.95rem;}
.pijl {width: 1.35rem; height: 1.35rem; margin-top: auto; color: var(--oranje);}
.wijken {list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0.3rem 0 1rem;}
.wijken li {border: 1px solid var(--lijn); border-radius: 999px; padding: 0.32rem 0.75rem; background: transparent;}
.waarom ul {list-style: none; padding: 0; margin: 0.3rem 0 0;}
.waarom li {position: relative; max-width: 65ch; padding: 0.8rem 0 0.8rem 1.25rem; border-top: 1px solid var(--lijn);}
.waarom li::before {content: ""; position: absolute; left: 0; top: 1.15rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--oranje);}
.praktisch ul {padding-left: 1.1rem;}
.oproep-paneel {background: var(--groen); color: var(--papier); border-radius: 1.8rem; padding: 1.6rem 1.3rem 1.45rem;}
.oproep-paneel h2, .oproep-paneel p, .oproep-paneel a {color: var(--papier);}
.oproep-rij {display: grid; gap: 0.7rem 1.8rem; align-items: center;}
.prijs {display: flex; align-items: baseline; gap: 0.7rem; margin: 0;}
.prijs-getal {font-family: var(--serif); font-weight: 640; line-height: 0.8; letter-spacing: -0.04em;}
.prijs .prijs-getal {font-size: clamp(2.8rem, 7vw, 4.2rem);}
.prijs-sub {font-size: 0.95rem; line-height: 1.2;}
.prijs-regel {display: flex; align-items: baseline; gap: 0.4rem;}
.prijs-regel .prijs-getal, .prijs-cel .prijs-getal {color: var(--groen);}
.prijs-regel .prijs-getal {font-size: clamp(2.8rem, 7vw, 4rem);}
.prijs-cel {line-height: 1;}
.prijs-cel .prijs-getal {font-size: 2.15rem; display: block;}
.duo {display: grid; gap: 2rem; margin-top: 0.4rem;}
.rubriek h3 {margin-top: 0.75rem;}
.faq-item {border-top: 1px solid var(--lijn); max-width: 65ch;}
.faq-item summary {cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.8rem; padding: 0.85rem 0;}
.faq-item summary::-webkit-details-marker {display: none;}
.faq-item summary::after {content: "+"; margin-left: auto; font-family: var(--serif); font-size: 2rem; line-height: 0.8; color: var(--oranje);}
.faq-item[open] summary::after {content: "–";}
.faq-item h3 {margin: 0; font-size: 1.35rem;}
.faq-antwoord {padding: 0 0 0.8rem;}
.formulier label, .filters label {display: grid; gap: 0.28rem; font-weight: 500;}
.formulier {max-width: 40rem;}
.formulier fieldset {border: 0; border-top: 1px solid var(--lijn); margin: 1.3rem 0 0; padding: 0.8rem 0 0;}
.formulier legend {font-family: var(--serif); font-weight: 640; font-size: 1.45rem; padding: 0; letter-spacing: -0.02em;}
.formulier .kaal {border: 0; margin: 0.4rem 0; padding: 0;}
.formulier .kaal legend {font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0;}
.rij {display: grid; gap: 0.7rem;}
.formulier label.vink {display: flex; flex-direction: row; align-items: flex-start; gap: 0.55rem; margin: 0.4rem 0; font-weight: 400;}
.sub {display: block; color: var(--steen); font-size: 0.85rem; font-weight: 400;}
input, select, textarea {font: inherit; color: var(--inkt); background: var(--veld); border: 1px solid #d9cbb4; border-radius: 4px; padding: 0.55rem 0.65rem;}
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), select, textarea {width: 100%; min-height: 44px;}
input[type="radio"], input[type="checkbox"] {width: 1.15rem; height: 1.15rem; min-width: 1.15rem; margin: 0.2rem 0 0; padding: 0; flex: none; accent-color: var(--groen); border: 0; background: transparent;}
textarea {min-height: 8rem; resize: vertical;}
input::placeholder, textarea::placeholder {color: var(--steen); opacity: 1;}
.formulier label.extra, .formulier .extra {display: none;}
.formulier label.extra.is-on, .formulier .extra.is-on {display: grid;}
[hidden] {display: none !important;}
.val {position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;}
.form-fouten:empty {display: none;}
.form-fouten {color: var(--rood); border-left: 3px solid var(--rood); padding-left: 0.75rem;}
.form-intro {color: var(--steen);}
.leeg {border-top: 3px solid var(--groen); padding: 0.8rem 0;}
.leeg-kop {font-family: var(--serif); font-weight: 640; font-size: 1.45rem; margin: 0 0 0.2rem; letter-spacing: -0.02em;}
.vaklijst {list-style: none; padding: 0;}
.vaklijst li {border-top: 1px solid var(--lijn); padding: 0.85rem 0;}
.vaklijst-naam {font-family: var(--serif); font-weight: 640; font-size: 1.45rem; margin: 0;}
.stempels {display: flex; flex-wrap: wrap; gap: 0.4rem;}
.stempel {letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; font-weight: 700; border: 1px solid var(--lijn); border-radius: 999px; padding: 0.12rem 0.55rem;}
.stempel.advertentie {border-color: var(--rood); color: var(--rood);}
.stempel.geverifieerd {border-color: var(--groen); color: var(--groen);}
.tabel-scroll {overflow-x: auto; margin: 0.8rem 0 1rem; max-width: none;}
table {border-collapse: collapse; width: 100%; font-size: 0.95rem;}
th, td {text-align: left; vertical-align: top; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--lijn);}
th {font-weight: 700;}
.pakketten td:nth-child(3), .pakketten th:nth-child(3) {background: #F6E3C8;}
.cta-regel {display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem;}
.bron {margin: 0;}
.tak-groep {margin-top: 1.5rem;}
.tak-groep h2, .tak-groep h3 {margin-top: 0;}
.tak-beeld {margin: 0 0 1rem;}
.tak-beeld img {width: 100%; height: auto; border-radius: 0.8rem;}
.tak-beeld.illu {aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;}
.tak-beeld.illu picture {width: 70%; height: 80%;}
.tak-beeld.illu img {width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain;}
.takpagina{margin-top:.4rem}
.takpagina .tak-beeld{max-height:11rem;overflow:hidden;margin:0 0 .45rem}
.takpagina .tak-beeld img{width:100%;height:11rem;object-fit:cover;object-position:var(--focus,center 25%)}
.takpagina .tak-beeld.illu{aspect-ratio:auto;height:auto}
.takpagina .tak-beeld.illu picture{width:auto;height:11rem}
.takpagina .tak-beeld.illu img{height:100%;object-fit:contain}
.takpagina h1{font-size:clamp(1.7rem,2.4vw,2.15rem);margin:0 0 .3rem}
.takpagina .kruimel{margin-bottom:.3rem}
.takpagina > p{margin:.2rem 0}
.takpagina h2{margin:.4rem 0 .2rem}
.takpagina h3{margin:.35rem 0 .1rem}
.takpagina .filters{display:flex;gap:.4rem;margin:.2rem 0 .3rem}
.takpagina .filters label{display:block;margin:0;min-width:0;flex:1;font-weight:500}
.takpagina .filters label span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.paginas{display:flex;flex-wrap:wrap;gap:.15rem .6rem;align-items:center;margin:.35rem 0 .7rem}
.paginas a,.paginas [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.namenlijst {padding-left: 1.1rem;}
.filters {display: grid; gap: 0.7rem; margin: 0.8rem 0 1rem;}
.bedrijfkaart {display: flex; flex-direction: column; gap: 0.15rem; width: 100%; height: 100%; border-top: 1px solid var(--lijn); padding-top: 0.75rem;}
.bedrijfkaart p {margin: 0;}
.chips {display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 1rem;}
.chip {font: inherit; font-weight: 500; color: var(--inkt); background: transparent; border: 1px solid var(--lijn); border-radius: 999px; min-height: 44px; padding: 0.2rem 0.85rem; cursor: pointer;}
.chip[aria-pressed="true"] {background: var(--groen); color: var(--papier); border-color: var(--groen);}
.agenda-item {border-top: 1px solid var(--lijn); padding: 0.8rem 0; overflow-wrap: anywhere; min-width: 0;}
.agenda-kop {display: grid; gap: 0.7rem; align-items: center;}
.agenda-kop .tak-beeld {margin: 0;}
.agenda-kop .tak-beeld img {width: 100%; height: 7rem; max-height: 20rem; object-fit: cover;}
.partner {border: 1px solid var(--lijn); border-radius: 1rem; padding: 1rem 1.1rem; margin-top: 1.4rem;}
.partner p {margin: 0; font-family: var(--serif); font-weight: 640; font-size: 1.35rem; letter-spacing: -0.02em;}
.claim{margin-top:1rem;font-size:.95rem}
.wazig{filter:blur(.4rem);user-select:none}
.teaser{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .65rem}
.slot{font-size:.82rem;color:var(--groen)}
.btn-mini{padding:.4rem .8rem;font-size:.95rem}
.bedrijfkaart .btn-mini{align-self:flex-start;margin-top:.35rem}
dialog.popup{position:relative;max-width:26rem;width:calc(100% - 1.5rem);border:1px solid var(--lijn);border-radius:.75rem;padding:1rem;background:var(--papier);color:var(--inkt)}
dialog.popup::backdrop{background:#1c1b1873}
dialog.popup h2{padding-right:4.2rem;margin-top:0}
dialog.popup textarea{min-height:4.6rem}
dialog.popup #popup-velden{display:flex;flex-direction:column;gap:16px}
dialog.popup #popup-velden>label{display:flex;flex-direction:column;gap:6px;margin:0;line-height:1.15}
dialog.popup #popup-velden>label.vink{flex-direction:row;align-items:flex-start;gap:9px}
.popup .sluit{position:absolute;top:.35rem;right:.4rem;min-width:44px;min-height:44px;border:0;background:transparent;color:var(--groen);font:inherit;cursor:pointer}
.sterren span{color:var(--oranje);letter-spacing:.06em}
.reviews{display:grid;gap:.65rem;margin-top:1.1rem}
.review{border-top:1px solid var(--lijn);padding-top:.5rem}
.stadsband {margin: 1.1rem auto 0;}
.stadsband img {width: 100%; height: auto; border-radius: 1.2rem;}
.nec-kop {display: flex; align-items: center; gap: 0.7rem;}
.nec-logo {height: 4.5rem; width: auto;}
.nec-logo-klein {height: 1.35rem; width: auto; flex: 0 0 auto;}
.fixtures, .weeklijst {list-style: none; padding: 0; margin: 0.4rem 0 0.8rem; overflow-wrap: anywhere;}
.weeklijst li, .fixtures li {border-top: 1px solid var(--lijn); padding: 0.45rem 0;}
.fixtures li {display: flex; gap: 0.55rem; align-items: center;}
.fixtures li.thuis, tr.thuis td {background: #F6E3C8;}
.voorbehoud {color: var(--steen); font-weight: 500;}
.seizoen td {vertical-align: middle;}
@media (min-width: 720px) {
  .rij, .filters {grid-template-columns: 1fr 1fr;}
  .oproep-rij {grid-template-columns: auto 1fr;}
  .duo {grid-template-columns: 1fr 1fr; gap: 2rem;}
  .oproep-paneel {padding: 2.1rem 2.2rem;}
}
@media (min-width: 860px) {
  .kop-rond {grid-template-columns: minmax(0, 1.3fr) auto;}
  .kop-rond .paginakop-beeld {justify-self: end;}
  .kop-illus {grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center;}
  .agenda-kop {grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem);}
  .agenda-kop .tak-beeld {grid-column: 2; grid-row: 1;}
  .agenda-kop .agenda-tekst {grid-column: 1; grid-row: 1;}
  .agenda-kop .tak-beeld img {height: 17.5rem;}
}
@media (min-width: 768px) {
  .vakkaarten {grid-template-columns: repeat(4, minmax(0, 1fr));}
  .bedrijflijst > li {grid-column: span 6;}
  .filters {grid-template-columns: 1.4fr 1fr 1fr;}
}
@media (min-width: 768px) {
  .stappenlijst {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch;}
}
@media (min-width: 1100px) {
  .vakkaarten {grid-template-columns: repeat(5, minmax(0, 1fr));}
}
@media (min-width: 1280px) {
  .bedrijflijst > li {grid-column: span 4;}
}
@media (prefers-reduced-motion: no-preference) {
  .vak, .vakkaart {transition: transform 0.18s ease;}
  .vak:hover, .vakkaart:hover {transform: translateY(-4px) rotate(-0.4deg);}
}
.wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--groen);margin:0}
.eyebrow::before{content:"";display:inline-block;width:18px;height:2px;background:var(--oranje);vertical-align:middle;margin:-3px 10px 0 0}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:999px;background:transparent;font-family:inherit;font-weight:500;font-size:16px;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer}
.knop-oranje{background:var(--oranje);color:var(--inkt);box-shadow:0 8px 18px -8px rgba(232,102,28,.7)}
.knop-oranje:hover{background:var(--oranje-2);color:var(--inkt)}
.knop-lijn{border:1.5px solid var(--groen);color:var(--groen);height:46px;padding:0 22px;font-size:15px}
.knop-lijn:hover{background:var(--groen);color:var(--papier)}
.kop{position:absolute;inset:0 0 auto 0;z-index:5}
.kop-pagina{position:static;background:var(--papier);border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;height:88px;gap:16px}
.kop .logo img{height:54px;width:auto;margin-left:-6px}
.nav{display:flex;align-items:center;gap:28px;font-weight:500;font-size:15.5px}
.nav a:not(.knop){color:var(--inkt);text-decoration:none}
.nav a[aria-current="page"]:not(.knop){color:var(--groen)}
.nav .knop{height:44px;padding:0 20px;font-size:15px}
.hero{position:relative;min-height:800px;background:var(--papier);overflow:hidden}
.hero-beeld{position:absolute;bottom:0;left:calc(50% - 560px);width:1160px;pointer-events:none}
.hero-beeld img{width:1160px;max-width:none;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%),linear-gradient(to left,transparent 0,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 9%),linear-gradient(to left,transparent 0,#000 14%);mask-composite:intersect}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--papier) 0,var(--papier) calc(50% - 420px),rgba(255,241,218,.8) calc(50% - 160px),rgba(255,241,218,0) calc(50% + 20px)),linear-gradient(180deg,var(--papier) 0,rgba(255,241,218,0) 22%)}
.hero .wrap{position:relative;z-index:2;padding-top:184px;padding-bottom:96px}
.hero-tekst{grid-column:1/span 7;align-self:start;padding-top:8px}
.hero h1{font-size:72px;line-height:1;letter-spacing:-.035em;margin:22px 0 24px;max-width:none}
.hero h1 em{font-style:normal;color:var(--groen);background:linear-gradient(transparent 78%,rgba(232,102,28,.35) 78%,rgba(232,102,28,.35) 92%,transparent 92%)}
.hero p.lead{font-size:20px;color:var(--steen);max-width:34ch;margin:0}
.werkbon{grid-column:9/span 4;align-self:start;margin:8px 0 0;background:var(--veld);border-radius:var(--r-l);padding:32px;box-shadow:0 30px 60px -24px rgba(15,84,70,.35),0 2px 0 rgba(0,0,0,.03)}
.werkbon .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.werkbon h2{font-size:28px;margin:0}
.label-gratis{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--groen);background:#E3EFE9;border-radius:999px;padding:4px 10px}
.werkbon .sub{font-size:15px;color:var(--steen);margin:0 0 22px}
.veld{display:block;margin:0 0 16px}
.veld>span:first-child{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.werkbon .invoer{height:52px;border:1.5px solid var(--lijn);border-radius:var(--r-s);display:flex;align-items:center;padding:0 16px;background:#FFFCF6;position:relative;width:100%;min-height:0}
.werkbon select{flex:1;width:100%;height:48px;min-height:0;border:0;background:transparent;padding:0 22px 0 0;appearance:none;font-size:16px;color:var(--inkt)}
.werkbon .chev{position:absolute;right:16px;width:14px;height:14px;pointer-events:none}
.werkbon .knop{width:100%;margin-top:8px}
.werkbon .klein{font-size:13px;color:var(--steen);margin:14px 0 0;text-align:center}
.trust{background:var(--veld);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);width:100vw;position:relative;left:50%;margin-left:-50vw}
.trust .grid{padding:30px 0}
.t-item{grid-column:span 3;display:flex;align-items:center;gap:14px;font-weight:500;font-size:16px}
.t-item svg{flex:0 0 40px;width:40px;height:40px}
.home{font-size:17px}
.home section.blok{padding:var(--sectie) 0 0}
.blok-kop{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;gap:16px}
.blok-kop h2{font-size:48px;margin:14px 0 0;max-width:none}
.meer{font-weight:500;color:var(--groen);border-bottom:2px solid var(--oranje);padding-bottom:2px;text-decoration:none}
.meer:hover{color:var(--groen)}
.vakken{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.vakkaarten{gap:var(--gap);grid-template-columns:repeat(4,minmax(0,1fr))}
.vakkaarten>li>.vak{width:100%;height:100%}
.vak{background:var(--veld);border-radius:var(--r);padding:28px 28px 24px;display:flex;flex-direction:column;gap:18px;min-height:184px;box-shadow:var(--schaduw);border:1px solid rgba(231,213,188,.6);color:var(--inkt);text-decoration:none}
.vak:hover{color:var(--inkt)}
.vak>svg,.vak .vak-icoon{width:64px;height:64px;padding:12px;border-radius:50%;background:var(--papier);margin-left:-4px}
.vak .vak-icoon svg{width:100%;height:100%;padding:0;background:none}
.vak .naam{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:8px}
.vak h3,.vak .vak-naam{font-size:22px;letter-spacing:-.01em;margin:0;line-height:1.1}
.vak .gaan{width:32px;height:32px;border-radius:50%;background:var(--papier);display:grid;place-items:center;color:var(--oranje);font-weight:500;flex:none}
.vak .vak-sub{color:var(--steen);font-size:14px;font-weight:400}
.stappen{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.stap{position:relative;padding-right:24px}
.stap:not(:last-child)::after{content:"";position:absolute;top:46px;left:84px;right:-12px;border-top:2px dashed #E3B98F}
.stap .nr{font-family:var(--serif);font-weight:640;font-size:88px;line-height:1;color:var(--oranje);letter-spacing:-.04em;background:var(--papier);display:inline-block;padding-right:16px;position:relative}
.stap h3{font-size:24px;margin:20px 0 10px}
.stap p{color:var(--steen);max-width:30ch;margin:0}
.uit{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.kaart{background:var(--veld);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schaduw);display:flex;flex-direction:column}
.kaart .beeld{height:240px;overflow:hidden}
.kaart .beeld img{width:100%;height:240px;max-width:none;object-fit:cover}
.beeld-agenda img{object-position:center 70%}
.beeld-voetbal img{object-position:center 35%}
.kaart .body{padding:32px 36px 36px;display:flex;flex-direction:column;flex:1}
.kaart .titel{display:flex;align-items:center;gap:14px;margin-bottom:8px;min-height:48px}
.kaart .titel h3{font-size:32px;margin:0}
.kaart .titel .nec-logo{height:48px;width:auto}
.kaart .intro{color:var(--steen);font-size:15.5px;margin:0 0 20px}
.items{list-style:none;border-top:1px solid var(--lijn);margin:0 0 28px;padding:0}
.items li{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--lijn)}
.datum{width:64px;height:64px;border-radius:var(--r-s);background:var(--groen);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.datum b{font-family:var(--serif);font-weight:640;font-size:28px;letter-spacing:-.02em}
.datum small{font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-top:5px;font-weight:500;color:#BFE0D3}
.items h4{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.3;margin:0}
.items h4 a{color:var(--inkt);text-decoration:none}
.items h4 a:hover{color:var(--groen)}
.items .waar{font-size:14.5px;color:var(--steen);margin-top:3px}
.tag{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 10px;white-space:nowrap}
.tag-thuis{background:var(--oranje);color:var(--inkt)}
.tag-uit{background:var(--papier);color:var(--steen)}
.tag-cat{background:#EEF4F1;color:var(--groen)}
.kaart .knop{margin-top:auto;align-self:flex-start}
.voetnoot{font-size:14px;color:var(--steen);margin:-12px 0 28px}
.band{margin-top:var(--sectie);background:var(--groen);color:#F5EFE3;position:relative;overflow:hidden}
.band .grid{min-height:460px;align-items:center}
.band-tekst{grid-column:1/span 5;padding:88px 0}
.band .eyebrow{color:#BFE0D3}
.band h2{font-size:52px;margin:16px 0 28px;color:#fff;max-width:12ch}
.band ul{list-style:none;margin:0 0 36px;padding:0}
.band li{display:flex;gap:14px;align-items:flex-start;font-size:18px;margin:0 0 14px;color:#E3EFE9;max-width:none}
.band li svg{flex:none;margin-top:2px}
.band-beeld{position:absolute;top:0;bottom:0;right:0;width:calc(50% + 24px);overflow:hidden;border-top-left-radius:220px}
.band-beeld picture,.band-beeld img{width:100%;height:100%;max-width:none;object-fit:cover}
.home-faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.home-faq .links{grid-column:1/span 4}
.home-faq .links h2{font-size:40px;margin:14px 0 0;max-width:none}
.home-faq .links p{color:var(--steen);margin:16px 0 0;max-width:28ch}
.home-faq .vragen{grid-column:6/span 7;border-top:1px solid var(--lijn)}
.home-faq .faq-item{max-width:none;border-top:0;border-bottom:1px solid var(--lijn)}
.home-faq .faq-item summary{display:flex;align-items:center;width:100%;padding:24px 0;gap:12px}
.home-faq .faq-item h3{flex:1 1 auto;min-width:0;font-size:21px}
.home-faq .faq-item summary::after{flex:0 0 28px;width:28px;height:28px;margin:0;border:1.5px solid var(--lijn);border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1}
.home-faq .faq-antwoord{color:var(--steen);max-width:62ch}
.voet{margin-top:var(--sectie);border-top:1px solid var(--lijn);padding:56px 0 48px;background:var(--papier)}
.voet .grid{row-gap:32px}
.f-merk{grid-column:1/span 4}
.voet .logo img{height:52px;width:auto;margin:0 0 16px -6px}
.f-merk p{font-size:14.5px;color:var(--steen);max-width:30ch;margin:0}
.f-kol{grid-column:span 2}
.f-merk+.f-kol{grid-column:7/span 2}
.f-kop{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--steen);font-weight:500;margin:0 0 14px;max-width:none;line-height:1.2}
.f-kol a{display:block;font-size:15px;margin:0 0 8px;color:var(--inkt);text-decoration:none}
.f-kol a:hover{color:var(--groen)}
.f-onder{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--lijn);padding-top:24px;font-size:13.5px;color:var(--steen)}
.f-onder a{color:var(--steen);text-decoration:none}
.f-onder a:hover{color:var(--groen)}
@media (min-width:1200px){
  .t-item{white-space:nowrap}
}
@media (max-width:1100px){
  .nav{gap:16px;font-size:14.5px}
  .t-item{font-size:15px}
}
@media (max-width:760px){
  :root{--gap:16px;--sectie:72px}
  .wrap,.omslag,.artikel-breed,.paginakop{width:calc(100% - 40px)}
  .home{font-size:16px}
  .nav a:not(.knop){display:none}
  .kop .wrap{height:72px}
  .kop .logo img{height:42px}
  .nav .knop{height:40px;padding:0 16px;font-size:14px}
  .hero{min-height:0;padding-bottom:250px}
  .hero-beeld,.hero-beeld img{width:760px}
  .hero-beeld{left:calc(50% - 470px)}
  .hero::before{background:linear-gradient(180deg,var(--papier) 0,var(--papier) 55%,rgba(255,241,218,0) 78%)}
  .hero .wrap{padding-top:120px;padding-bottom:0}
  .hero-tekst,.werkbon{grid-column:1/-1}
  .hero h1{font-size:44px;margin:16px 0}
  .hero p.lead{font-size:17.5px}
  .werkbon{margin-top:28px;padding:24px}
  .trust .grid{padding:24px 0;row-gap:18px}
  .t-item{grid-column:span 12;font-size:15.5px}
  .t-item svg{width:34px;height:34px;flex-basis:34px}
  .blok-kop{flex-direction:column;align-items:flex-start;margin-bottom:28px}
  .blok-kop h2{font-size:34px}
  .vakken,.vakkaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vak{padding:20px;min-height:150px;gap:16px}
  .vak>svg,.vak .vak-icoon{width:52px;height:52px;padding:10px}
  .vak h3,.vak .vak-naam{font-size:18px}
  .vak .gaan{display:none}
  .stappen{grid-template-columns:1fr;gap:28px}
  .stap:not(:last-child)::after{top:70px;bottom:-22px;left:31px;right:auto;border-top:0;border-left:2px dashed #E3B98F}
  .stap{display:grid;grid-template-columns:64px 1fr;column-gap:16px;padding:0}
  .stap .nr{font-size:60px;grid-row:span 2;padding:0 0 8px;text-align:center}
  .stap h3{margin:6px 0;font-size:21px}
  .uit{grid-template-columns:1fr}
  .kaart .beeld,.kaart .beeld img{height:180px}
  .kaart .body{padding:24px 20px 28px}
  .kaart .titel h3{font-size:28px}
  .items li{grid-template-columns:56px 1fr;gap:14px}
  .items .tag{grid-column:2;justify-self:start;margin-top:-6px}
  .datum{width:56px;height:56px}
  .datum b{font-size:24px}
  .band .grid{min-height:0}
  .band-tekst{grid-column:1/-1;padding:56px 0 300px}
  .band h2{font-size:38px}
  .band-beeld{top:auto;height:260px;width:100%;border-top-left-radius:140px}
  .home-faq .links,.home-faq .vragen{grid-column:1/-1}
  .home-faq .vragen{margin-top:28px}
  .home-faq .links h2{font-size:32px}
  .home-faq .faq-item summary{padding:20px 0}
  .home-faq .faq-item h3{font-size:18px}
  .f-merk{grid-column:1/-1}
  .f-kol,.f-merk+.f-kol{grid-column:span 6}
  .f-onder{flex-direction:column;gap:6px}
}