/* Appfront redesign: exacte namaak van Figma "Appfront Visual Identity - Web Design"
   Diensten - nieuw (4463:10859) + Diensten-mobile (4485:3706), Contact - desktop (4971:6585) + contact - mobile (4980:9615).
   Maten volgen de Figma-tokens. Desktop is getekend op 1512 breed, mobiel op 390. */
:root{
  --teal:#06232a; --groen:#00d195; --groen-hover:#00e5a5; --pebble:#f7f9f5; --pebble-medium:#e8e8e3;
  --tekst:#06232a; --tekst-2:#334155; --tekst-3:#9ca3af; --tekst-invert:#f7f9f5;
  --rand:#94a3b8; --rand-veld:#cbd5e1; --oranje:#fc8e63; --paars:#efbbff; --boulder:#49565a;
  --h1:64px; --h1-lh:96px; --h2:40px; --h2-lh:48px; --h3:32px; --h3-lh:48px; --callout:24px; --callout-lh:36px;
  --p:18px; --p-lh:28px; --btn:18px; --btn-lh:28px;
  --px:max(120px,calc(50% - 636px)); --nav-l:max(73px,calc(50% - 683px)); --pxv:max(120px,calc(50vw - 636px)); --py:80px;
}
/* basisregels alleen binnen het nieuwe inhoudsblok: navbar en footer van de site blijven onaangeroerd */
:where(.af-redesign,.af-redesign *){box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.af-redesign{margin:0;background:#fff}
.af-redesign{color:var(--tekst);font-family:Geist,system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
:where(.af-redesign img){display:block;max-width:100%}
.af-redesign [hidden]{display:none!important}
:where(.af-redesign a){color:inherit}
:where(.af-redesign p){margin:0}
:where(.af-redesign h1,.af-redesign h2,.af-redesign h3,.af-redesign h4){margin:0;font-weight:600}
:where(.af-redesign ul){margin:0;padding:0}
.punt{color:var(--groen)}

/* knoppen en tags */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-radius:92px;font:500 var(--btn)/var(--btn-lh) Geist,sans-serif;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.knop img{width:24px;height:24px}
.knop-groen{background:var(--groen);color:var(--tekst)}
.knop-groen:hover{background:var(--groen-hover);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,209,149,.25)}
.knop-donker{background:var(--teal);color:#fff}
.knop-donker:hover{background:#0d3540}
.link-pijl{display:inline-flex;flex-direction:column;justify-content:center;height:32px;padding-bottom:4px;border-bottom:1px solid var(--rand);text-decoration:none;color:var(--tekst-2);font:500 var(--btn)/var(--btn-lh) Geist,sans-serif}
.link-pijl span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.link-pijl img{width:17px;height:16px}
.tag{display:inline-flex;align-items:center;justify-content:center;padding:1px 15px;border-radius:92px;border:1px solid rgba(73,86,90,.21);font:500 var(--btn)/var(--btn-lh) Geist,sans-serif;white-space:nowrap}
.tag-invert{border-color:#f8fafc;color:var(--tekst-invert)}
.tag-klein{padding:1px 7px;border-color:var(--rand);font:400 14px/20px Geist,sans-serif;color:var(--teal)}
.tags{display:flex;flex-wrap:wrap;gap:8px}

/* navbar */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px var(--px) 16px var(--nav-l);background:#fff;filter:drop-shadow(0 4px 2px rgba(6,31,42,.08))}
.nav-logo img{width:194.3px;height:28.5px}
.nav-menu{display:flex;gap:80px;align-items:center}
.nav-menu a{font:500 18px/28px Geist,sans-serif;color:var(--tekst);text-decoration:none}
.nav-menu a[aria-current]{text-decoration:underline;text-underline-position:from-font}
.nav .knop{width:147px}
.nav-burger{display:none;background:none;border:0;padding:0;cursor:pointer}
.nav-burger img{width:24px;height:24px}
.nav-mobiel{display:none}

/* blokken */
.blok{padding:var(--py) var(--px);display:flex;gap:80px;justify-content:center;align-items:flex-start}
.kol{flex:1 1 0;min-width:0;max-width:638px}

/* rasterachtergrond (BG grid, 10 kolommen, cel 169.6 hoog) */
.raster-licht{background-image:linear-gradient(to right,#edf0f5 1.5px,transparent 1.5px),linear-gradient(to bottom,#edf0f5 1.5px,transparent 1.5px);background-size:151.2px 169.6px;background-position:calc(50% - 756px) 0}
.raster-donker{background-color:var(--teal);background-image:linear-gradient(to right,#142f36 1.5px,transparent 1.5px),linear-gradient(to bottom,#142f36 1.5px,transparent 1.5px);background-size:151.2px 169.6px;background-position:calc(50% - 756px) 0}

/* ===== /diensten ===== */
.d-top{position:relative;overflow:hidden}
.d-top::after{content:"";position:absolute;inset:auto 0 0 0;height:6%;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.d-hero{position:relative}
.d-hero .kol{display:flex;flex-direction:column;gap:24px;position:relative}
.d-hero h1{font-size:var(--h1);line-height:var(--h1-lh)}
.d-hero .lead p{font-size:var(--p);line-height:var(--p-lh)}
.d-hero .swirl{position:absolute;left:659px;top:-219px;width:876px;height:827px;max-width:none;pointer-events:none;overflow:visible}
.d-hero .leeg{flex:1 1 0;max-width:638px}
.d-kaarten{display:flex;gap:40px;align-items:stretch;width:100%;position:relative}
.dienst-kaart{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.dienst-icoon{width:62px;height:62px;display:flex;align-items:center;justify-content:center;gap:8px}
.dienst-icoon.oranje{background:var(--oranje)}.dienst-icoon.groen{background:var(--groen)}.dienst-icoon.paars{background:var(--paars)}
.dienst-icoon .g-a{width:36.3px;height:33.3px}
.dienst-icoon .g-br{width:13.86px;height:25.06px}
.dienst-icoon .g-br.r{transform:scaleX(-1)}
.dienst-icoon .g-ch{width:13.65px;height:24.97px;transform:scaleX(-1)}
.dienst-icoon.paars{gap:2px}
.dienst-body{flex:1;background:var(--pebble);border-left:2px solid var(--teal);padding:32px 24px 32px 22px;display:flex;flex-direction:column;gap:24px}
.dienst-body h3{font-size:var(--h3);line-height:var(--h3-lh)}
.dienst-body ul{display:flex;flex-direction:column;gap:8px;padding-left:27px;font:500 var(--btn)/var(--btn-lh) Geist,sans-serif;color:var(--tekst-2);white-space:nowrap}

.d-tabs .tablijst{display:flex;flex-direction:column;gap:40px}
.d-tabs .tab{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;font:600 var(--h2)/var(--h2-lh) Geist,sans-serif;color:var(--tekst-3);text-align:left;cursor:pointer;transition:color .2s,transform .25s}
.d-tabs .tab:hover{color:var(--tekst)}
.d-tabs .tab img{width:22px;height:39.6px;display:none}
.d-tabs .tab[aria-selected=true]{color:var(--tekst)}
.d-tabs .tab[aria-selected=true] img{display:block}
.d-tabs .paneel{font-size:var(--callout);line-height:var(--callout-lh);background:radial-gradient(ellipse at center,#fff 28%,rgba(255,255,255,0) 100%);align-self:stretch}
.d-tabs .paneel p+p{margin-top:36px}
.d-tabs .acc{display:none}

.d-case{padding:24px var(--px)}
.case-uitgelicht{display:flex;width:100%;max-width:1272px;margin:0 auto}
.case-uitgelicht .visual{flex:0 0 50%;min-width:0;background:url(assets/case_douane_visual.png) center/cover no-repeat;min-height:368px}
.case-uitgelicht .tekst{flex:0 0 50%;min-width:0;background:var(--pebble);padding:24px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.case-uitgelicht .kop{display:flex;flex-direction:column;gap:16px}
.case-uitgelicht h2{font-size:var(--h2);line-height:var(--h2-lh)}
.case-uitgelicht .tekst>p{font-size:var(--p);line-height:var(--p-lh);color:var(--tekst-2)}
.case-uitgelicht .acties{display:flex;align-items:center;justify-content:space-between}
.case-uitgelicht .link-pijl{width:141px}

.d-sprint{flex-direction:column;align-items:center;gap:40px}
.d-sprint .intro{width:638px;max-width:100%;display:flex;flex-direction:column;gap:24px}
.d-sprint h2{font-size:var(--h2);line-height:var(--h2-lh)}
.d-sprint .intro div{font-size:var(--p);line-height:var(--p-lh)}
.d-sprint .visual img{width:1272px;max-width:100%;height:auto}
.d-sprint .visual .m{display:none}

.d-proces{position:relative}
.proces-kop{height:392px;display:flex;justify-content:center;padding-top:104px;position:relative}
.proces-kop h2{display:flex;align-items:center;gap:16px;height:92px;font-size:var(--h1);line-height:var(--h1-lh);color:#fff}
.proces-kop h2 img{width:22.9px;height:53.4px}
.proces-kop .lijn{position:absolute;left:calc(50% - .5px);top:220px;height:172px;width:1px;background:linear-gradient(rgba(0,209,149,0),var(--groen))}
.stap{position:relative;display:flex;height:800px}
.stap>div{flex:0 0 50%;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:center}
.stap .tekstkol{padding:80px 80px 80px var(--px);align-items:flex-start}
.stap .tekstkol.rechts{padding:80px var(--px) 80px 40px;align-items:center}
.stap .tekstkol>div{max-width:638px;width:100%;display:flex;flex-direction:column;gap:24px}
.stap .tekstkol.rechts>div{width:556px}
.stap h3{font-size:var(--h2);line-height:var(--h2-lh);color:#fff}
.stap .callout{font-size:var(--callout);line-height:var(--callout-lh);color:var(--tekst-invert)}
.stap .p{font-size:var(--p);line-height:var(--p-lh);color:var(--tekst-invert)}
.stap .stap-link{font-size:18px;line-height:28px;color:var(--tekst-invert)}
.stap .illu{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none}
.stap .illu-chev{width:420px;height:386.2px;max-width:none}
.stap .illukol.chev{padding:80px 80px 80px var(--px);align-items:flex-start}
.stap .illu-m{display:none}
.stap::before{content:"";position:absolute;left:calc(50% - .5px);top:0;bottom:0;width:1px;background:var(--groen);z-index:1}
.stap.laatste::before{bottom:87px;background:linear-gradient(var(--groen) 82%,rgba(0,209,149,0))}
.stap .stip{position:absolute;left:calc(50% - 16px);width:32px;height:32px;border-radius:50%;background:rgba(0,209,149,.5);z-index:2}
.stap .stip::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--groen)}

.d-samen .kol p{font-size:var(--callout);line-height:var(--callout-lh)}
.d-samen{padding:120px var(--px)}

.mies-blok{padding:0 var(--px) var(--py)}
.mies-kaart{display:flex;justify-content:space-between;width:898px;min-height:412px;max-width:100%;margin:0 auto;background:var(--teal)}
.mies-kaart .info{flex:1;padding:32px 40px;display:flex;flex-direction:column;gap:24px;color:#fff;align-items:flex-start}
.mies-kaart h3{font-size:32px;line-height:48px}
.mies-kaart .intro{display:flex;flex-direction:column;gap:24px}
.mies-kaart .intro p{font-size:18px;line-height:28px}
.mies-kaart .gegevens{display:flex;flex-direction:column;gap:8px}
.mies-kaart .gegevens>div{height:56px}
.mies-kaart .naam{font:500 24px/32px Geist,sans-serif}
.mies-kaart .rol{font-size:18px;line-height:28px}
.meta{display:flex;align-items:center;gap:8px;font:500 18px/28px Geist,sans-serif;color:var(--tekst-invert);text-decoration:none}
.meta img{width:24px;height:24px}
.mies-kaart .foto{width:315.9px;flex:none;background:url(assets/mies.jpg) center/cover no-repeat}

.faq h2{font-size:var(--h2);line-height:var(--h2-lh);white-space:nowrap}
.faq .vragen{display:flex;flex-direction:column;gap:24px;align-self:stretch}
.faq .vraag{border-bottom:1px solid var(--rand);padding:16px 10px 15px}
.faq .vraag button{display:flex;gap:16px;align-items:center;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:600 var(--p)/var(--p-lh) Geist,sans-serif;color:var(--tekst)}
.faq .vraag button span{flex:1}
.faq .vraag button img{width:24px;height:24px}

.odb{align-items:flex-start}
.odb .kol:first-child{display:flex;flex-direction:column;align-items:center}
.odb .beeld{width:440px;height:357px;position:relative;overflow:hidden}
.odb .beeld img{position:absolute;height:104.34%;left:-.45%;top:-4.48%;width:100.91%;max-width:none}
.odb .kol:last-child{display:flex;flex-direction:column;gap:24px}
.odb h2{font-size:var(--h2);line-height:var(--h2-lh)}
.odb p{font-size:var(--p);line-height:var(--p-lh)}
.odb .knop{align-self:flex-start}

.ons-werk{background:#fff;padding:var(--py) var(--pxv);overflow:hidden}
.ons-werk .kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.ons-werk h2{font-size:var(--h2);line-height:var(--h2-lh)}
.haakjes{display:flex;gap:12px;width:76.3px;height:32px;position:relative}
.haakjes button{flex:1;background:none;border:0;padding:0;cursor:pointer;height:32px}
.haakjes img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ons-werk .rij{display:flex;align-items:flex-start;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:224px;margin-right:calc(-1 * var(--pxv));scrollbar-width:none}
.ons-werk .rij::-webkit-scrollbar{display:none}
.case-kaart{flex:none;width:437.5px;background:var(--pebble);display:flex;flex-direction:column;scroll-snap-align:start;text-decoration:none;color:inherit;position:relative}
.case-kaart .foto{height:232px;overflow:hidden;position:relative}
.case-kaart .foto img{width:100%;height:100%;object-fit:cover}
.case-kaart .foto img.erfgoed{position:absolute;height:152.25%;top:-21.78%;left:.04%;object-fit:fill}
.case-kaart .body{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:0}
.case-kaart .body>div:first-child{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0}
.case-kaart .logo{height:56.83px;width:124px;position:relative}
.case-kaart .titel{font-size:24px;line-height:36px}
.case-kaart .pop{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center}
.case-kaart .pop span{width:56px;height:56px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.case-kaart .pop img{width:24px;height:24px}
.case-kaart:hover .pop span{transform:scale(1)}
.case-kaart .knop-m{display:none}
.ons-werk .meer{display:flex;justify-content:flex-end;margin-top:40px}
.ons-werk .meer .link-pijl{width:141px}
.logo-erfgoed{position:absolute;inset:0}
.logo-erfgoed img{position:absolute}
.logo-pharma .d{position:absolute}
.logo-pharma p{position:absolute;inset:70.81% 32.34% 13.14% 22.99%;font-size:7.21px;line-height:normal;color:#000;white-space:nowrap}

.cta{background:var(--teal);color:#fff}
.cta .kol{display:flex;flex-direction:column;gap:32px;align-items:flex-start}
.cta .kol>div{display:flex;flex-direction:column;gap:24px}
.cta h2{font-size:var(--h2);line-height:var(--h2-lh)}
.cta p{font-size:18px;line-height:28px;color:var(--tekst-invert)}
.cta .leeg{flex:1 1 0;max-width:638px;height:255px}
.cta .knop-m{display:none}

.footer{background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:60px var(--px) 120px;height:456px}
.footer .kolommen{display:flex;gap:40px;width:616px;align-self:stretch}
.footer .kolommen>div{flex:1;display:flex;flex-direction:column;gap:24px}
.footer h3{font-size:32px;line-height:48px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:16px;font:500 18px/28px Geist,sans-serif}
.footer a{text-decoration:none;color:#fff}
.footer .groep{display:flex;flex-direction:column;gap:32px;font:500 18px/28px Geist,sans-serif}
.footer .groep div{display:flex;flex-direction:column;gap:16px}
.footer .scheiding{width:1px;align-self:stretch;background:rgba(255,255,255,.5)}
.footer .rechts{width:397px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between}
.footer .rechts p{font-size:18px;line-height:28px}
.footer .rechts img{width:194px;height:28.5px}

.logos{background:var(--teal);padding:40px var(--px);display:flex;align-items:center;justify-content:space-between}
.logos img{height:40px;width:auto}

/* ===== /contact ===== */
.c-hero{display:flex;height:406px;background-image:linear-gradient(to top,#fff 0%,rgba(255,255,255,0) 11.566%),linear-gradient(to right,#edf0f5 1.5px,transparent 1.5px),linear-gradient(to bottom,#edf0f5 1.5px,transparent 1.5px);background-size:100% 100%,151.2px 169.6px,151.2px 169.6px;background-position:0 0,calc(50% - 756px) 0,calc(50% - 756px) 0}
.c-hero>div{flex:0 0 50%;display:flex;flex-direction:column;justify-content:center;align-items:center}
.c-hero .tekst{padding:0 40px 0 var(--px)}
.c-hero .tekst>div{max-width:638px;width:100%;display:flex;flex-direction:column;gap:24px}
.c-hero h1{font-size:var(--h1);line-height:var(--h1-lh)}
.c-hero .tekst p{font-size:18px;line-height:28px;color:var(--tekst-2)}
.c-hero .beeld{padding:80px calc(80px + max(0px,50% - 756px)) 80px 80px}
.c-hero .beeld img{width:244.95px;height:245.92px}
.c-form{display:flex;background:#fff}
.c-form>div{flex:0 0 50%;min-width:0}
.c-form .links{padding:80px 40px 80px var(--px)}
.c-form .rechts{padding:80px var(--px) 80px 40px;display:flex;flex-direction:column;gap:24px}
.formkaart{background:var(--pebble);border-left:2px solid var(--teal);padding:32px 32px 32px 30px;display:flex;flex-direction:column;gap:24px}
.formkaart .kop{display:flex;align-items:center;gap:8px}
.formkaart .kop img{width:14px;height:24px}
.formkaart h2{font-size:32px;line-height:48px;white-space:nowrap}
.formkaart>p{font-size:18px;line-height:28px;color:var(--tekst-2)}
.velden{display:flex;flex-direction:column;gap:16px}
.veld{display:flex;flex-direction:column;gap:8px}
.veld label{font:600 18px/28px Geist,sans-serif}
.veld input,.veld textarea{width:100%;background:#fff;border:1px solid var(--rand-veld);border-radius:8px;padding:7px 9px;font:400 18px/28px Geist,sans-serif;color:var(--tekst);outline:none}
.veld input::placeholder,.veld textarea::placeholder{color:var(--tekst-3)}
.veld input:focus,.veld textarea:focus{border-color:var(--groen);box-shadow:0 0 0 2px rgba(0,209,149,.25)}
.veld textarea{height:206px;resize:vertical}
.formkaart .knop{align-self:flex-start}
.formkaart .status{font-size:16px;line-height:24px}
.formkaart .status:empty{display:none}
.contactkaart{display:flex;background:var(--pebble);max-width:660px;min-height:200px;width:100%}
.contactkaart .foto{width:216px;min-height:260px;flex:none;position:relative;overflow:hidden}
.contactkaart .foto img{position:absolute;max-width:none}
.contactkaart .foto img.martijn{height:134.37%;left:-12.04%;top:-12.25%;width:124.07%}
.contactkaart .foto img.mies{inset:0;width:100%;height:100%;object-fit:cover}
.contactkaart .info{flex:1;padding:24px;display:flex;flex-direction:column;gap:24px}
.contactkaart h3{font:500 24px/32px Geist,sans-serif}
.contactkaart .wie p{font-size:18px;line-height:28px}
.contactkaart .wie p:first-child{font-weight:600}
.contactkaart .lijst{display:flex;flex-direction:column;gap:8px}
.contactkaart .meta{color:var(--tekst-2)}
.contactkaart .kopie{display:none}
.c-form .rechts>p{font-size:18px;line-height:28px;color:var(--tekst-2)}
.c-kaart{display:flex}
.c-kaart>div{flex:0 0 50%;min-width:0}
.c-kaart .paneel{background:var(--teal);height:436px;padding:60px 40px 60px max(120px,calc(100% - 636px));display:flex;flex-direction:column;gap:24px;color:#fff}
.c-kaart h2{font-size:var(--h2);line-height:var(--h2-lh)}
.c-kaart .paneel p{font-size:18px;line-height:28px;color:var(--tekst-invert)}
.c-kaart .rij{display:flex;align-items:center;gap:8px;font:500 18px/28px Geist,sans-serif;color:var(--tekst-invert);text-decoration:none}
.c-kaart .rij img{width:24px;height:24px}
.c-kaart .kaartbeeld{position:relative;height:436px;overflow:hidden;container-type:inline-size}
.c-kaart .kaartbeeld img.map{position:absolute;left:-6.07%;top:-6.6px;width:114.42%;height:auto;max-width:none}
.c-kaart .kaartbeeld .tint{position:absolute;inset:0;background:var(--pebble);mix-blend-mode:color}
.c-kaart .kaartbeeld .stip{position:absolute;left:39.15%;top:calc(-6.6px + 83.6cqw * 100 / 756);width:22px;height:22px}


/* ===== interactie-afwerking ===== */
.nav{transition:filter .2s}
.nav.gescrold{filter:drop-shadow(0 6px 10px rgba(6,31,42,.10))}
.nav-menu a{position:relative;transition:color .15s}
.nav-menu a:not([aria-current])::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-menu a:hover::after{transform:scaleX(1)}
.af-redesign a,.af-redesign button{-webkit-tap-highlight-color:transparent}
.af-redesign :focus-visible{outline:2px solid var(--groen);outline-offset:3px}
.knop:active{transform:translateY(0) scale(.98)}
.knop-donker:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(6,35,42,.25)}
.link-pijl img{transition:transform .2s}
.link-pijl:hover img{transform:translateX(4px)}
.link-pijl:hover{color:var(--tekst);border-color:var(--tekst)}
.tag-invert{transition:background .15s}
/* dienst-tabs: hover kleurt donker, actieve tab schuift naar rechts met het groene haakje */
.d-tabs .tab{position:relative;transform:translateX(0)}
.d-tabs .tab img{display:block!important;position:absolute;left:0;top:50%;margin-top:-19.8px;opacity:0;transform:translateX(-12px);transition:opacity .25s,transform .25s}
.d-tabs .tab[aria-selected=true]{transform:translateX(30px)}
.d-tabs .tab[aria-selected=true] img{opacity:1;transform:translateX(-30px)}
.d-tabs .paneel>div{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.d-tabs .paneel>div.zichtbaar{opacity:1;transform:none}
.dienst-kaart{transition:transform .2s}
.dienst-kaart:hover{transform:translateY(-4px)}
.dienst-kaart:hover .dienst-body{box-shadow:0 10px 24px rgba(6,35,42,.08)}
.case-uitgelicht .visual{transition:background-size .5s}
/* uitklappers */
.acc-item .inhoud,.faq .antwoord{overflow:hidden;transition:height .3s ease}
.acc-item .inhoud{display:block!important}
.acc-item button img,.faq .vraag button img{transition:transform .25s}
.faq .vraag[open] button img{transform:rotate(180deg)}
.faq .antwoord p{padding-top:12px;font-size:var(--p);line-height:var(--p-lh);color:var(--tekst-2)}
.faq .vraag button:hover span{color:#0d3d47}
/* carrousel */
.ons-werk .rij{cursor:grab;scroll-behavior:auto}
.ons-werk .rij.slepen{cursor:grabbing;scroll-snap-type:none}
.ons-werk .rij.slepen .case-kaart{pointer-events:none}
.haakjes button{border-radius:4px}
.haakjes button:disabled{cursor:default}
.ons-werk.begin .haakjes img{clip-path:none}
.haakjes::before,.haakjes::after{content:"";position:absolute;z-index:1;top:0;width:18px;height:32px;background:#fff;opacity:0;transition:opacity .2s;pointer-events:none}
.haakjes::before{left:0}.haakjes::after{right:0}
.ons-werk.begin .haakjes::before,.ons-werk.eind .haakjes::after{opacity:.65}
.case-kaart .foto img{transition:transform .5s ease}
.case-kaart:hover .foto img{transform:scale(1.04)}
.case-kaart .foto img.erfgoed{transform-origin:center}
.case-kaart .logo.vrij{height:auto;min-height:34px;display:flex;align-items:center}
.case-kaart .logo.vrij img{max-width:124px;max-height:44px;width:auto;height:auto;position:static}
.case-kaart .pop span{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.case-kaart:focus-visible .pop span{transform:scale(1)}
/* kopieerknop */
.kopie{position:relative}
.kopie.gekopieerd::after{content:"Gekopieerd";position:absolute;right:0;top:-30px;background:var(--teal);color:#fff;font:500 12px/16px Geist,sans-serif;padding:4px 8px;border-radius:6px;white-space:nowrap}

/* ===== uitgebreid contactformulier (Kort bericht / Uitgebreide briefing) ===== */
.cf-tabs{display:flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--rand-veld);border-radius:92px;align-self:flex-start}
.cf-tab{border:0;background:none;border-radius:92px;padding:6px 16px;font:500 16px/24px Geist,sans-serif;color:var(--tekst-2);cursor:pointer;transition:background .2s,color .2s}
.cf-tab:hover{color:var(--tekst)}
.cf-tab.is-aan{background:var(--teal);color:#fff}
.cf-tab-uitleg{font-size:16px;line-height:24px;color:var(--tekst-2);margin:-8px 0 0}
.cf-tab-uitleg strong{font-weight:600;color:var(--tekst)}
.formkaart .velden[hidden],.brief[hidden]{display:none!important}
#cfPanelKort .submit-button{align-self:flex-start;margin-top:8px}
.submit-button .submit-loading,.submit-button .submit-success{display:none}
.submit-button.loading .submit-text,.submit-button.success .submit-text{display:none}
.submit-button.loading .submit-loading{display:inline}
.submit-button.success .submit-success{display:inline}
.submit-button.loading{opacity:.75;cursor:wait}
.submit-button.error{animation:schud .4s}
@keyframes schud{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.form-field.focused label{color:var(--tekst)}
.brief{display:flex;flex-direction:column;gap:16px}
.brief-form{display:flex;flex-direction:column;gap:16px}
.brief-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.brief-field{display:flex;flex-direction:column;gap:8px}
.brief-field>label,.brief-label-rij label{font:600 18px/28px Geist,sans-serif;color:var(--tekst)}
.brief-field input[type=text],.brief-field input[type=email],.brief-field input[type=tel]{width:100%;background:#fff;border:1px solid var(--rand-veld);border-radius:8px;padding:7px 9px;font:400 18px/28px Geist,sans-serif;color:var(--tekst);outline:none}
.brief-field input::placeholder{color:var(--tekst-3)}
.brief-field input:focus{border-color:var(--groen);box-shadow:0 0 0 2px rgba(0,209,149,.25)}
.brief-optioneel{font-weight:400;color:var(--tekst-3);font-size:16px;margin-left:4px}
.brief-label-rij{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.brief-teller,.brief-meter{font-size:14px;line-height:20px;color:var(--tekst-3)}
.brief-editor{background:#fff;border:1px solid var(--rand-veld);border-radius:8px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.brief-editor:focus-within{border-color:var(--groen);box-shadow:0 0 0 2px rgba(0,209,149,.25)}
.brief-werkbalk{display:flex;align-items:center;gap:2px;padding:6px;border-bottom:1px solid var(--rand-veld);background:var(--pebble);flex-wrap:wrap}
.wb{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;border-radius:6px;color:var(--tekst-2);cursor:pointer}
.wb svg,.brief-dropzone svg,.brief-verstuur svg,.brief-klaar-vink svg,.success-icon-circle svg,.success-screen-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb svg{width:18px;height:18px}
.wb:hover{background:#fff;color:var(--tekst)}
.wb.is-aan{background:var(--teal);color:#fff}
.wb-scheiding{width:1px;height:20px;background:var(--rand-veld);margin:0 4px}
.wb-vul{flex:1}
.brief-vlak{min-height:220px;max-height:520px;overflow:auto;padding:12px 14px;font:400 18px/28px Geist,sans-serif;color:var(--tekst);outline:none}
.brief-vlak.is-leeg::before{content:attr(data-leeg);color:var(--tekst-3);pointer-events:none}
.brief-vlak h2{font-size:24px;line-height:32px;margin:8px 0 4px}.brief-vlak h3{font-size:20px;line-height:28px;margin:8px 0 4px}
.brief-vlak blockquote{border-left:3px solid var(--groen);margin:8px 0;padding-left:12px;color:var(--tekst-2)}
.brief-vlak img{max-width:100%;border-radius:4px}
.brief-vlak ul,.brief-vlak ol{padding-left:24px}
.brief-hint{font-size:14px;line-height:20px;color:var(--tekst-3)}
.brief-dropzone{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px;border:1.5px dashed var(--rand);border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.brief-dropzone:hover,.brief-dropzone.is-over{border-color:var(--groen);background:#effbf6}
.brief-dropzone svg{width:28px;height:28px;color:var(--groen)}
.brief-drop-tekst{font-size:16px;line-height:24px;color:var(--tekst)}
.brief-drop-link{text-decoration:underline;text-decoration-color:var(--groen);text-underline-offset:3px}
.brief-drop-sub{font-size:14px;line-height:20px;color:var(--tekst-3)}
.brief-lijst{list-style:none;display:flex;flex-direction:column;gap:6px}
.brief-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--rand-veld);border-radius:8px;padding:6px 10px;font-size:15px}
.brief-item-naam{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief-item-maat{color:var(--tekst-3);font-size:14px}
.brief-item-weg{border:0;background:none;cursor:pointer;color:var(--tekst-2);font-size:18px;line-height:1}
.brief-meter.is-vol{color:#c0392b}
.brief-honeypot{display:none!important}
.brief-fout{background:#fdecea;color:#8a1c12;border-radius:8px;padding:10px 12px;font-size:16px}
.brief-acties{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brief-verstuur{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:92px;border:0;background:var(--groen);color:var(--tekst);font:500 18px/28px Geist,sans-serif;cursor:pointer}
.brief-verstuur:hover{background:var(--groen-hover)}
.brief-verstuur svg{width:20px;height:20px}
.brief-concept,.brief-concept-boven{font-size:14px;line-height:20px;color:var(--tekst-3)}
.brief-klaar{background:#fff;border-left:2px solid var(--groen);padding:24px;display:flex;flex-direction:column;gap:12px}
.brief-klaar-vink svg{width:40px;height:40px;color:var(--groen)}
.brief-klaar-titel{font:600 24px/32px Geist,sans-serif}
.brief-klaar-tekst{font-size:16px;line-height:24px;color:var(--tekst-2)}
.brief-opnieuw{align-self:flex-start;border:1px solid var(--teal);background:none;border-radius:92px;padding:6px 16px;font:500 16px/24px Geist,sans-serif;cursor:pointer}
.success-screen{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(6,35,42,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
.success-screen.visible{opacity:1;pointer-events:auto}
.success-screen-inner{background:var(--teal);color:#fff;max-width:480px;width:calc(100% - 32px);padding:40px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;transform:translateY(12px);transition:transform .3s}
.success-screen.visible .success-screen-inner{transform:none}
.success-icon-circle{width:56px;height:56px;border-radius:50%;background:rgba(0,209,149,.15);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.success-icon-circle svg{width:28px;height:28px}
.success-screen-title{font:600 32px/48px Geist,sans-serif;color:#fff}
.success-screen-text{font-size:18px;line-height:28px;color:var(--tekst-invert)}
.success-screen-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:92px;background:var(--groen);color:var(--teal);font:500 18px/28px Geist,sans-serif;padding:8px 16px;cursor:pointer}
.success-screen-btn svg{width:20px;height:20px}
#confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:90;display:none}

/* tussenmaten (geen Figma-frame): zelfde opbouw, smallere marges, tekst mag afbreken */
@media (max-width:1199px) and (min-width:768px){
  :root{--px:40px;--pxv:40px}
  .nav{padding:16px 40px}.nav-menu{gap:32px}
  .blok{gap:40px}
  .dienst-body ul{white-space:normal}
  .formkaart h2{white-space:normal}
  .c-form .links{padding:80px 20px 80px 40px}.c-form .rechts{padding:80px 40px 80px 20px}
  .contactkaart .foto{width:150px}.contactkaart .meta{white-space:normal;word-break:break-all}
  .c-hero .tekst{padding:0 20px 0 40px}.c-kaart .paneel{padding:60px 20px 60px 40px}
  .stap .tekstkol{padding:80px 40px 80px 40px}.stap .tekstkol.rechts{padding:80px 40px}
  .stap .tekstkol.rechts>div{width:100%}
  .stap .illu{object-fit:cover}
  .faq h2{white-space:normal}
  .footer{padding:60px 40px 80px}.footer .rechts{width:260px}
  .logos{padding:40px;gap:16px}.logos img{height:28px}
  .mies-kaart{width:100%}
}
/* ===== mobiel (Figma 390) ===== */
@media (max-width:767px){
  :root{--h1:36px;--h1-lh:48px;--h2:30px;--h2-lh:36px;--h3:20px;--h3-lh:28px;--callout:18px;--callout-lh:28px;--p:16px;--p-lh:24px;--btn:16px;--btn-lh:24px;--px:16px;--pxv:16px;--py:24px}
  .af-redesign{color:#020617}
  .nav{padding:16px;height:56px;filter:none}
  .nav-logo img{width:160px;height:24px}
  .nav-menu,.nav>.knop{display:none}
  .nav-burger{display:block}
  .nav-mobiel.open{display:flex;flex-direction:column;gap:16px;position:fixed;top:56px;left:0;right:0;background:#fff;padding:16px 16px 24px;z-index:49;box-shadow:0 8px 16px rgba(6,31,42,.08)}
  .nav-mobiel a{font:500 18px/28px Geist,sans-serif;color:var(--tekst);text-decoration:none}
  .blok{flex-direction:column;gap:24px;align-items:stretch}
  .kol{max-width:none}
  .d-hero{padding:24px 16px 0}
  .d-hero .kol{gap:16px}
  .d-hero .swirl,.d-hero .leeg{display:none}
  .d-hero .lead{color:#020617}
  .d-kaarten-blok{padding:24px 16px}
  .d-kaarten{flex-direction:column;gap:16px}
  .dienst-icoon{width:41px;height:41px}
  .dienst-icoon .g-a{width:24px;height:22px}
  .dienst-icoon .g-br{width:9.2px;height:16.6px}
  .dienst-icoon .g-ch{width:9px;height:16.5px}
  .dienst-body{padding:14px;gap:16px}
  .dienst-body ul{gap:16px;font-size:16px;line-height:24px;font-weight:400;padding-left:24px;color:#020617}
  .d-top::after,.raster-licht{background-image:none}
  .d-tabs{padding:0 16px 24px}
  .d-tabs .tablijst,.d-tabs .paneel{display:none}
  .d-tabs .acc{display:flex;flex-direction:column;gap:24px}
  .acc-item{border-bottom:1px solid var(--rand);padding:10px 10px 9px;display:flex;flex-direction:column;gap:10px}
  .acc-item button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:600 30px/36px Geist,sans-serif;color:#64748b}
  .acc-item button span{flex:1}
  .acc-item button img{width:24px;height:24px}
  .acc-item[open] button{color:#020617}
  .acc-item .inhoud{display:none;font-size:16px;line-height:24px;color:var(--tekst-2)}
  .acc-item .inhoud p+p{margin-top:24px}
  .acc-item[open] .inhoud{display:block}
  .d-case{padding:24px 16px}
  .case-uitgelicht{flex-direction:column}
  .case-uitgelicht .visual{flex:none;min-height:0;height:276px;background-size:503.1px 291.1px;background-position:-72px -1px}
  .case-uitgelicht .tekst{padding:12px;gap:24px}
  .case-uitgelicht h2{color:#06232a}
  .case-uitgelicht .tags .tag{font-size:16px;line-height:24px}
  .case-uitgelicht h2{font-size:30px;line-height:36px}
  .case-uitgelicht .tekst>p{font-size:18px;line-height:28px}
  .case-uitgelicht .acties{flex-direction:column;gap:8px}
  .case-uitgelicht .acties .knop{width:100%;font-size:16px;line-height:24px}
  .case-uitgelicht .link-pijl{width:auto;height:24px;padding:0;font-size:16px;line-height:23px}
  .jij-kiest{display:flex!important}
  .d-sprint{padding:24px 16px 20px;align-items:stretch;gap:22px}
  .d-sprint .intro{width:auto;gap:24px}
  .d-sprint .visual .d{display:none}
  .d-sprint .visual .m{display:block;width:calc(100% + 32px);max-width:none;margin:0 -16px}
  .proces-kop{height:96px;padding:24px 0 24px 28px;justify-content:flex-start}
  .proces-kop h2{height:48px;font-size:36px;line-height:48px;gap:12px;align-items:center}
  .proces-kop h2 img{width:13.4px;height:31.3px}
  .proces-kop .lijn{display:none}
  .d-proces{overflow:hidden;padding-bottom:0;margin-bottom:24px;background-size:75.6px 84.8px;background-position:-4px 0}
  .d-proces::before{content:"";position:absolute;left:24px;top:96px;bottom:0;width:1px;background:linear-gradient(var(--groen) 92%,rgba(0,209,149,0))}
  .stap{flex-direction:column;height:auto;padding:24px 0 24px}
  .stap#stap-1{padding-top:72px}
  .stap::before{display:none}
  .stap>div{flex:none}
  .stap .tekstkol,.stap .tekstkol.rechts{order:1;padding:0 12px 0 60px;align-items:flex-start}
  .stap .tekstkol.rechts>div,.stap .tekstkol>div{width:auto;gap:24px}
  .stap .illukol,.stap .illukol.chev{order:2;height:auto;padding:0 0 0 60px;align-items:flex-start}
  .stap .illu{display:none}
  .stap .illu-m{display:block;max-width:none;height:auto}
  #stap-1 .illukol{margin-top:120px}#stap-1 .illu-m{width:318px;height:232px}
  #stap-2 .illukol{margin-top:64px;padding-left:41px;height:258px}#stap-2 .illu-m{width:354px}
  #stap-3{padding-bottom:0}#stap-3 .illukol{margin-top:58px;height:245px}#stap-3 .illu-m{width:293.5px}
  #stap-4 .illukol{margin-top:72px}
  .stap .illu-chev{width:318px;height:292px;max-width:none}
  .stap .stip{left:12px;top:6px!important;width:24px;height:24px}
  .stap .stip::after{inset:4.5px}
  .stap h3{font-size:30px;line-height:36px}
  .stap .callout,.stap .p,.stap .stap-link,.stap .tag-invert{color:#f1f5f9}
  .stap .p,.stap .stap-link{font-size:16px;line-height:24px}
  .stap .tag-invert{font-size:16px;line-height:24px}
  .d-samen{padding:64px 16px}
  .mies-blok{padding:24px 16px}
  .mies-kaart{flex-direction:column-reverse;width:auto}
  .mies-kaart .foto{width:100%;aspect-ratio:1/1}
  .mies-kaart .info{padding:24px 16px 16px;gap:24px}
  .mies-kaart h3{font-size:20px;line-height:28px}
  .mies-kaart .intro{gap:12px}
  .mies-kaart .intro p{font-size:16px;line-height:24px}
  .mies-kaart .naam{font-size:18px;line-height:28px}
  .mies-kaart .rol{font-size:16px;line-height:24px}
  .meta{font-size:16px;line-height:24px;color:#f1f5f9}
  .cta p,.c-kaart .paneel p,.c-kaart .rij{color:#f1f5f9}
  .mies-kaart .knop,.knop-vol{width:100%}
  .faq{padding:24px 16px}
  .faq .vragen{gap:24px}
  .faq .vraag{padding:10px 10px 9px}
  .faq .vraag button{color:#020617}
  .knop-groen{color:#020617}
  .faq .vraag button{font-size:16px;line-height:24px}
  .faq .vraag.d-only{display:none}
  .odb .kol:first-child{align-items:stretch}
  .odb .beeld{width:100%;height:auto;aspect-ratio:440/357}
  .odb .kol:last-child{gap:12px}
  .odb .knop{align-self:stretch}
  .ons-werk{padding:24px 16px}
  .ons-werk .kop{position:relative;justify-content:center;margin-bottom:24px}
  .ons-werk .kop .haakjes{position:absolute;inset:0;width:auto;justify-content:space-between}
  .ons-werk .kop .haakjes img{display:none}
  .ons-werk .kop .haakjes button{flex:none;width:14px;background:url(assets/haakje_l.svg) center/contain no-repeat}
  .ons-werk .kop .haakjes button+button{background-image:url(assets/haakje_r.svg)}
  .ons-werk .rij{padding-right:0;margin-right:0;gap:16px}
  .case-kaart{width:358px}
  .case-kaart .body{flex-direction:column;align-items:stretch;padding:24px 16px;gap:16px}
  .case-kaart .body>div:first-child{gap:16px}
  .case-kaart .logo{width:96px!important;height:44px!important}
  .case-kaart .tags{margin-top:-8px}
  .case-kaart .pop{display:none}
  .case-kaart .knop-m{display:flex;width:100%;font-size:18px;line-height:28px}
  .ons-werk .meer{justify-content:stretch;margin-top:10px}
  .ons-werk .meer .link-pijl{width:100%;height:auto;border:0;padding:8px 16px;background:var(--pebble-medium);border-radius:92px;align-items:center;font-size:16px;line-height:24px}
  .cta{padding:64px 16px;text-align:center}
  .cta .kol{align-items:stretch;gap:14px}
  .cta .kol>div{gap:12px}
  .cta p{font-size:16px;line-height:24px}
  .cta .leeg,.cta .knop-d{display:none}
  .cta .knop-m{display:flex}
  .footer{flex-direction:column;align-items:stretch;height:auto;padding:64px 24px 64px;gap:64px}
  .footer .kolommen{flex-direction:column;width:auto;gap:64px}
  .footer h3{font-size:20px;line-height:28px}
  .footer .kolommen>div{gap:16px}
  .footer ul{gap:24px;font-size:16px;line-height:24px}
  .footer .groep{gap:24px;font-size:16px;line-height:24px}
  .footer .groep div{gap:16px}
  .footer .scheiding{height:1px;width:auto;align-self:stretch}
  .footer .rechts{width:auto;flex-direction:column-reverse;gap:24px}
  .footer .rechts p{font-size:16px;line-height:24px}
  .footer .rechts img{width:194px;height:28.5px}
  .logos{height:120px;padding:40px 0;overflow:hidden;justify-content:flex-end;gap:32px}
  .logos img{height:40px;flex:none}
  .brief-row{grid-template-columns:1fr}
  .brief-field>label,.brief-label-rij label{font-size:16px;line-height:24px}
  .brief-field input[type=text],.brief-field input[type=email],.brief-field input[type=tel],.brief-vlak{font-size:16px;line-height:24px}
  .cf-tabs{align-self:stretch}.cf-tab{flex:1;padding:6px 8px;font-size:15px}
  .cf-tab-uitleg{font-size:15px;line-height:22px}
  .faq .antwoord p{font-size:16px;line-height:24px}
  .d-tabs .tab[aria-selected=true]{transform:none}
  #cfPanelKort .submit-button{align-self:stretch}
  /* contact mobiel (Figma 4980:9615) */
  .c-hero{flex-direction:column;height:auto;padding:24px 16px;align-items:stretch;background:none}
  .c-hero .tekst{padding:24px 24px 0;align-items:flex-start}
  .c-hero .tekst>div{gap:24px}
  .c-hero .tekst p{font-size:16px;line-height:24px}
  .c-hero .beeld{padding:24px 24px 24px;align-items:flex-start}
  .c-hero .beeld img{width:91px;height:92px}
  .c-form{flex-direction:column}
  .c-hero>div,.c-form>div,.c-kaart>div{flex:none}
  .c-form .links{padding:0 16px}
  .c-form .rechts{padding:24px 16px 24px;gap:16px}
  .formkaart{padding:14px 12px 15px 10px;gap:12px}
  .formkaart .kop{height:40px;gap:8px}
  .formkaart .kop img{width:22px;height:40px}
  .formkaart h2{font-size:20px;line-height:28px;white-space:normal;color:#020617}
  .formkaart>p{font-size:16px;line-height:24px}
  .velden{gap:10px}
  .veld label{font-size:16px;line-height:24px;color:#020617}
  .veld input,.veld textarea{font-size:16px;line-height:24px}
  .veld input::placeholder,.veld textarea::placeholder{color:#64748b}
  .formkaart .knop{align-self:stretch;font-size:16px;line-height:24px}
  .contactkaart{flex-direction:column;max-width:none;min-height:0}
  .contactkaart .foto{width:100%;min-height:0;height:314px;aspect-ratio:auto}
  .contactkaart .foto img.martijn{width:110.6%;height:168.7%;left:-5.3%;top:-21.9%}
  .contactkaart .info{padding:24px 10px;gap:10px;margin-top:5px}
  .contactkaart h3{font-size:18px;line-height:28px}
  .contactkaart .wie{height:56px}
  .contactkaart .wie p{font-size:16px;line-height:24px}
  .contactkaart .lijst{gap:24px}
  .contactkaart .meta{width:100%;font-size:16px;line-height:24px;color:var(--tekst-2)}
  .contactkaart .meta .tekstje{flex:1}
  .contactkaart .kopie{display:block;background:none;border:0;padding:0;cursor:pointer;height:24px}
  .c-form .rechts>p{font-size:16px;line-height:24px}
  .c-kaart{flex-direction:column;padding:24px 0}
  .c-kaart .paneel{height:276px;padding:24px 16px;gap:24px}
  .c-kaart .paneel p,.c-kaart .rij{font-size:16px;line-height:24px}
  .c-kaart .kaartbeeld{height:233px;container-type:normal}
  .c-kaart .kaartbeeld img.map{left:-45.9px;top:-6.6px;width:865px}
  .c-kaart .kaartbeeld .tint{width:756px}
  .c-kaart .kaartbeeld .stip{left:296px;top:77px}
}
.af-redesign .cta p a,.af-redesign .stap-link{text-decoration:underline;text-underline-position:from-font}

/* Formulierhulp: fout per veld (15-10) */
:where(.af-redesign) .form-field.is-fout input,:where(.af-redesign) .form-field.is-fout textarea,:where(.af-redesign) .form-field.is-fout .brief-editor{border-color:#d4351c;box-shadow:0 0 0 1px #d4351c}
:where(.af-redesign) .veld-fout{margin:6px 0 0;font-size:14px;line-height:1.4;color:#b3261e}