@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fredoka.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk.woff2) format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/sora.woff2) format('woff2');}

/* ====== Basis-opmaak (niet nodig om aan te passen) ====== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:#FFF8F1;color-scheme:only light;scrollbar-color:#C2401E #FFF8F1;}
/* ===== Light mode geforceerd: darkmode van het apparaat mag de kleuren nooit veranderen ===== */
:root{color-scheme:only light;}
body{color-scheme:only light;}
/* Formulieren en knoppen: voorkomt dat Safari (iPhone) en Chrome ze automatisch donker maken.
   De kleuren zelf staan al expliciet in de code en blijven dus exact zoals ontworpen. */
input,textarea,select,button{color-scheme:only light;}
/* Scrollbalk in Dato-kleuren (Chrome/Safari/Edge) */
::-webkit-scrollbar{width:12px;}
::-webkit-scrollbar-track{background:#FFF8F1;}
::-webkit-scrollbar-thumb{background:#C2401E;border-radius:100px;border:3px solid #FFF8F1;}
::-webkit-scrollbar-thumb:hover{background:#C2401E;}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:#FFF8F1;color:#3D3539;line-height:1.62;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:#F17B43;color:#211D20;}
a{color:inherit;}

/* Hover-effecten op knoppen en links */
.nav-link:hover{color:#C2401E;}
.btn-primary:hover{background:#C2401E;}
.btn-white:hover{background:#F45731;color:#211D20;}
.btn-ghost:hover{border-color:#fff;}
.card-hover{transition:transform 0.25s ease,box-shadow 0.25s ease;}
.card-hover:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(33,29,32,0.10);}
/* ===== Pakketkaarten: basiskleuren in CSS, stabiele subtiele hover ===== */
.pricing-card{position:relative;border-radius:20px;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;}
.pricing-starter{background:#FBF4EA;border:1.5px solid #EBD9C4;}
.pricing-business{background:#C2401E;box-shadow:0 26px 54px rgba(244,87,49,0.30);}
.pricing-complete{background:#211D20;}
/* hover alleen op apparaten met een echte muis, egale kleuren = geen flikker */
@media (hover:hover) and (pointer:fine){
  .pricing-card:hover{transform:translateY(-3px);}
  .pricing-starter:hover{background:#FFF4E8;border-color:rgba(244,87,49,.18);box-shadow:0 16px 36px rgba(33,29,32,.08);}
  .pricing-business:hover{background:#E04A26;}
  .pricing-complete:hover{background:#452112;box-shadow:0 18px 40px rgba(33,29,32,.18);}
}
/* Voorbeelden-titel: letters kleuren oranje onder de muis */
.vb-l{transition:color 0.7s ease;}
.vb-l:hover{color:#C2401E;transition-duration:0.3s;}
.pkg-link:hover{background:#FBEADB;border-color:#FBEADB;}
.btn-cta:hover{background:#F17B43;}
/* Contactformulier: warme focus-stijl en placeholderkleur */
#contact-form input:focus,#contact-form select:focus,#contact-form textarea:focus{border-color:rgba(246,167,123,0.6);background:rgba(255,255,255,0.1);box-shadow:0 0 0 4px rgba(241,123,67,0.12);}
#contact-form input::placeholder,#contact-form textarea::placeholder{color:rgba(230,205,186,0.5);}
.btn-cta-ghost:hover{background:rgba(246,167,123,0.18);border-color:rgba(246,167,123,0.45);}
.foot-link:hover{color:#fff;}
.foot-link-gold:hover{color:#F17B43;}

/* ====== Bewegingen (animaties) ====== */
@keyframes datoBob{0%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-14px) rotate(5deg);}100%{transform:translateY(0) rotate(0deg);}}
@keyframes datoSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes datoSmoke{0%{opacity:0;transform:translateY(0) scale(0.5);}25%{opacity:0.55;}100%{opacity:0;transform:translateY(-12px) scale(1.25);}}
/* ---- Hero: heel trage, premium lichtbeweging ---- */
@keyframes heroGlowA{0%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-46px,34px,0) scale(1.12);}100%{transform:translate3d(0,0,0) scale(1);}}
@keyframes heroGlowB{0%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(40px,-28px,0) scale(1.08);}100%{transform:translate3d(0,0,0) scale(1);}}
@keyframes heroBeam{0%{transform:translateX(-8%) rotate(-16deg);opacity:0.0;}30%{opacity:0.5;}70%{opacity:0.5;}100%{transform:translateX(10%) rotate(-16deg);opacity:0.0;}}
.hero-glow-a{animation:heroGlowA 26s ease-in-out infinite;}
.hero-glow-b{animation:heroGlowB 32s ease-in-out infinite;}
.hero-beam{animation:heroBeam 34s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){*{animation:none !important;}}

/* ===== Mobiel menu (hamburger) ===== */
.nav-burger{flex-direction:column;gap:5px;}
.burger-line{display:block;width:22px;height:2.5px;border-radius:2px;background:#fff;transition:transform 0.3s ease,opacity 0.3s ease,background 0.3s ease;}
/* Uitklapmenu: compact, warm donkerbruin, rustig open/dicht */
.nav-panel{display:flex;flex-direction:column;gap:2px;background:rgba(255,250,243,0.72);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid transparent;border-radius:20px;padding:0 10px;overflow:hidden;max-height:0;opacity:0;visibility:hidden;pointer-events:none;transition:max-height 0.35s ease,opacity 0.28s ease,padding 0.35s ease,visibility 0s linear 0.35s,border-color 0.3s ease;}
.nav-panel.open{max-height:380px;opacity:1;visibility:visible;pointer-events:auto;padding:10px;border-color:rgba(244,87,49,0.14);box-shadow:0 18px 44px rgba(33,29,32,0.16);transition:max-height 0.35s ease,opacity 0.28s ease,padding 0.35s ease,visibility 0s,border-color 0.3s ease;}
.nav-panel-link{font-family:'Fredoka',sans-serif;font-weight:500;font-size:15.5px;color:#211D20;text-decoration:none;padding:11px 14px;border-radius:12px;transition:background 0.2s ease;}
.nav-panel-link:hover,.nav-panel-link:active{background:rgba(33,29,32,0.06);}
.nav-panel-cta{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:#fff;background:#C2401E;text-decoration:none;padding:12px 16px;border-radius:100px;text-align:center;margin-top:8px;}
/* burger naar kruisje als open */
.nav-burger.open .burger-line:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-burger.open .burger-line:nth-child(2){opacity:0;}
.nav-burger.open .burger-line:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
/* schakelen: op smal scherm hamburger tonen, desktop-nav verbergen */
@media (min-width:821px){
  .nav-panel{display:none;}
}
@media (max-width:820px){
  .nav-desktop{display:none !important;}
  .nav-burger{display:flex !important;}
  /* Compacte maten op mobiel; de KLEUREN komen van het scroll-script,
     zodat de balk net als op desktop meekleurt met de sectie eronder */
  header{padding:12px 14px 0 !important;}
  #navbar{padding:8px 12px 8px 18px !important;}
  /* Uitklapmenu ligt als overlay ÓVER de pagina (duwt niks omlaag) */
  #navPanel{position:absolute;left:14px;right:14px;top:calc(100% + 8px);margin:0 !important;max-width:none !important;z-index:60;}
}

    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

    /* ---- Layout van de sectie ---- */
    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

    /* ===== VOORBEELDEN: laptops ===== */
    .lw-wrap{cursor:pointer;perspective:1200px;position:relative;}
    .lw-wrap:before{display:none;}
    .lw-laptop{position:relative;width:100%;max-width:540px;margin:0 auto;z-index:2;transition:transform 0.45s cubic-bezier(0.16,0.84,0.44,1);}
    .lw-screen{position:relative;background:linear-gradient(160deg,#403A34 0%,#211D18 58%,#2B2620 100%);border:1px solid rgba(0,0,0,0.45);border-radius:22px 22px 7px 7px;padding:12px 12px 15px;box-shadow:0 60px 110px -24px rgba(33,29,32,0.5),0 26px 60px rgba(33,29,32,0.26),0 3px 8px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,0.14),inset 0 0 0 1px rgba(255,255,255,.03);transition:transform 0.45s cubic-bezier(0.16,0.84,0.44,1),box-shadow 0.45s ease;}
    .lw-screen:before{content:"";position:absolute;left:12px;right:12px;top:12px;height:38%;border-radius:8px 8px 40px 40px;background:linear-gradient(158deg,rgba(255,255,255,0.09),rgba(255,255,255,0) 62%);opacity:.5;pointer-events:none;z-index:30;}
    .lw-cam{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a4652,#0a0806 60%);box-shadow:0 0 0 1.5px rgba(0,0,0,.5),inset 0 0 1px rgba(120,160,200,.5);z-index:31;}
    .lw-window{position:relative;border-radius:8px;overflow:hidden;height:300px;background:#fff;border:1px solid rgba(0,0,0,0.22);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5);}
    .lw-base{height:15px;background:linear-gradient(180deg,#F3ECE5 0%,#D8CDC2 38%,#B3A598 80%,#94867A 100%);border-radius:2px 2px 16px 16px/2px 2px 12px 12px;margin:0 -30px;position:relative;box-shadow:0 22px 30px -6px rgba(33,29,32,0.26),0 6px 10px rgba(33,29,32,0.10),inset 0 1px 0 rgba(255,255,255,.75);}
    .lw-base:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));border-radius:inherit;}
    .lw-base:after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:5px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#6E6157,#8C7E71);box-shadow:inset 0 1px 1px rgba(0,0,0,.35);}
    .lw-glow{display:none;}
    .lw-wrap:hover .lw-screen{box-shadow:0 66px 118px -24px rgba(33,29,32,0.54),0 28px 64px rgba(33,29,32,0.28),0 3px 8px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,0.14),inset 0 0 0 1px rgba(255,255,255,.03);}
    .lw-slides{position:absolute;inset:0;}
    .lw-window .lw-slides{top:24px;}
    /* onzichtbare slides: niet tekenen en animaties stilzetten (scheelt veel rekenwerk) */
    .lw-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 0.7s ease,visibility 0s linear .7s;overflow:hidden;}
    .lw-slide.active{opacity:1;visibility:visible;transition:opacity 0.7s ease,visibility 0s linear 0s;}
    .lw-slide:not(.active) *{animation-play-state:paused !important;}
    .lw-inner{position:absolute;top:0;left:0;width:100%;transition:transform 9s ease-in-out;}
    .lw-wrap:hover .lw-slide.active .lw-inner:not(.lw-static){transform:translateY(calc(-100% + 276px));}
    .lw-wrap:hover .lw-slide.active .lw-static{transform:translateY(calc(-100% + 276px));}
    /* browserbalk bovenin het laptopscherm */
    .lw-bar{position:absolute;left:0;right:0;top:0;height:24px;z-index:15;display:flex;align-items:center;gap:10px;padding:0 10px;background:linear-gradient(180deg,#F4EFEA,#E9E2DB);border-bottom:1px solid rgba(33,29,32,.10);}
    .lw-bar .tl{display:flex;gap:5px;}
    .lw-bar .tl i{width:7px;height:7px;border-radius:50%;display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15);}
    .lw-bar .tl i:nth-child(1){background:#FF5F57;}.lw-bar .tl i:nth-child(2){background:#FEBC2E;}.lw-bar .tl i:nth-child(3){background:#28C840;}
    .lw-bar .url{flex:0 1 230px;margin:0 auto;transform:translateX(-22px);height:15px;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(33,29,32,.08),inset 0 0 0 1px rgba(33,29,32,.06);display:flex;align-items:center;justify-content:center;gap:4px;font-family:'Hanken Grotesk',sans-serif;font-size:8px;color:#7B6355;letter-spacing:.01em;white-space:nowrap;overflow:hidden;}
    .lw-bar .url:before{content:"";width:5px;height:4px;border:1.2px solid #948A8E;border-radius:1px;margin-top:2px;position:relative;box-shadow:0 -2.5px 0 -1px #948A8E;}
    /* statusbalk telefoon */
    .ph-status{position:absolute;left:0;right:0;top:0;height:46px;z-index:39;display:flex;justify-content:space-between;align-items:center;padding:4px 30px 0 34px;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;color:#fff;pointer-events:none;}
    .ph-status .ic{display:flex;align-items:center;gap:5px;}
    .ph-status .sig{display:flex;align-items:flex-end;gap:1.5px;height:9px;}
    .ph-status .sig b{width:3px;background:currentColor;border-radius:1px;display:block;}
    .ph-status .bat{width:21px;height:10px;border:1.3px solid currentColor;border-radius:3px;padding:1px;position:relative;opacity:.95;}
    .ph-status .bat:after{content:"";position:absolute;right:-3.5px;top:2.5px;width:1.5px;height:3.5px;border-radius:0 1px 1px 0;background:currentColor;opacity:.6;}
    .ph-status .bat i{display:block;height:100%;width:78%;background:currentColor;border-radius:1.5px;}

    /* ===== Voorbeeldsites in de laptop (ms) · per site eigen kleuren via variabelen ===== */
    .ms{background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;}
    .ms img,.mp img{display:block;width:100%;height:100%;object-fit:cover;}
    .ms-nav{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:12px 18px;color:#fff;font-size:8.5px;}
    .ms-hero.light .ms-nav{color:var(--ink);}
    .ms-logo{font-family:'Sora',sans-serif;font-weight:800;font-size:11px;letter-spacing:.01em;margin-right:auto;}
    .ms-logo em{font-style:normal;color:var(--ac2);}
    .ms-nav nav{display:flex;gap:13px;opacity:.85;font-weight:500;}
    .ms-btn{display:inline-flex;align-items:center;background:var(--ac);color:var(--on);font-family:'Sora',sans-serif;font-weight:700;font-size:8.5px;padding:7px 13px;border-radius:100px;white-space:nowrap;}
    .ms-btn.ghost{background:none;color:inherit;box-shadow:inset 0 0 0 1px currentColor;}
    .ms-nav .ms-btn{padding:6px 11px;font-size:8px;}
    .ms-hero{position:relative;height:208px;overflow:hidden;color:#fff;background:var(--ink);}
    .ms-hero.light{color:var(--ink);}
    .ms-hero > img{position:absolute;inset:0;}
    .ms-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--shade),.94) 0%,rgba(var(--shade),.72) 36%,rgba(var(--shade),0) 70%),linear-gradient(180deg,rgba(var(--shade),.5),rgba(var(--shade),0) 28%);}
    .ms-txt{position:absolute;left:18px;bottom:22px;z-index:2;max-width:230px;}
    .ms-h{font-family:'Sora',sans-serif;font-weight:800;font-size:23px;line-height:1.04;letter-spacing:-.025em;}
    .ms-h em,.mp-h em{font-style:normal;color:var(--ac2);}
    .ms-txt p{font-size:9.5px;line-height:1.55;opacity:.86;margin:8px 0 12px;max-width:205px;}
    .ms-ctas{display:flex;gap:6px;}
    .ms-trust{display:flex;justify-content:space-between;gap:10px;padding:10px 18px;font-size:8px;font-weight:600;background:var(--soft);}
    .ms-trust i{font-style:normal;color:#F17B43;letter-spacing:1px;margin-right:4px;}
    .ms-sec{padding:18px 18px 16px;}
    .ms-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
    .ms-head b{font-family:'Sora',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:-.01em;}
    .ms-head span{font-size:8px;font-weight:700;color:var(--ac3);}
    .ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
    .ms-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.05);}
    .ms-card .im{height:74px;}
    .ms-card .tx{padding:8px 9px 9px;}
    .ms-card b{display:block;font-size:9px;font-weight:700;}
    .ms-card small{display:block;font-size:7.5px;opacity:.65;margin-top:2px;}
    .ms-card .pr{display:block;margin-top:5px;font-family:'Sora',sans-serif;font-weight:800;font-size:9.5px;color:var(--ac3);}
    .ms-card.solid{background:var(--ink);color:#fff;padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;}
    .ms-card.solid b{font-family:'Sora',sans-serif;font-size:11px;line-height:1.2;}
    .ms-card.solid .ms-btn{align-self:flex-start;}
    .ms-step{background:#fff;border-radius:10px;padding:11px 10px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px rgba(0,0,0,.05);}
    .ms-step .n{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:14px;color:var(--ac3);margin-bottom:4px;}
    .ms-step b{display:block;font-size:9px;}
    .ms-step small{display:block;font-size:7.5px;opacity:.65;margin-top:2px;line-height:1.4;}
    .ms-band{margin:0 18px 16px;border-radius:12px;background:var(--ink);color:#fff;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
    .ms-band b{font-family:'Sora',sans-serif;font-size:10.5px;}
    .ms-band small{display:block;font-size:8px;opacity:.65;margin-top:2px;}
    .ms-foot{display:flex;justify-content:space-between;padding:11px 18px 15px;font-size:7.5px;opacity:.6;border-top:1px solid rgba(0,0,0,.07);}

    /* ===== Voorbeeldsites in de telefoon (mp) ===== */
    html,.lw-grid{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
    @media (max-width:820px){#voorbeelden{padding-bottom:56px !important;}}
    .mp{height:566px;position:relative;overflow:hidden;background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;}
    .mp-hero{position:relative;height:318px;color:#fff;background:var(--ink);}
    .mp-hero > img{position:absolute;inset:0;}
    .mp-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--shade),.62) 0%,rgba(var(--shade),0) 24%,rgba(var(--shade),0) 38%,rgba(var(--shade),.93) 100%);}
    .mp-nav{position:absolute;left:22px;right:22px;top:50px;z-index:2;display:flex;justify-content:space-between;align-items:center;font-family:'Sora',sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;}
    .mp-txt{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;}
    .mp-h{font-family:'Sora',sans-serif;font-weight:800;font-size:28px;line-height:1.03;letter-spacing:-.025em;}
    .mp-txt p{font-size:12px;line-height:1.5;opacity:.88;margin:8px 0 14px;max-width:230px;}
    .mp-btn{display:inline-flex;align-items:center;background:var(--ac);color:var(--on);font-family:'Sora',sans-serif;font-weight:700;font-size:12px;padding:11px 20px;border-radius:100px;white-space:nowrap;}
    .mp-sec{padding:18px 22px 0;}
    .mp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
    .mp-head b{font-family:'Sora',sans-serif;font-size:14px;font-weight:800;}
    .mp-head span{font-size:10px;font-weight:700;color:var(--ac3);}
    .mp-row{display:flex;align-items:center;gap:12px;padding:7px;background:var(--soft);border-radius:14px;margin-bottom:8px;}
    .mp-row .th{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none;}
    .mp-row b{display:block;font-size:12.5px;}
    .mp-row small{display:block;font-size:10px;opacity:.65;margin-top:1px;}
    .mp-row .pr{margin-left:auto;padding-right:7px;font-family:'Sora',sans-serif;font-weight:800;font-size:13px;color:var(--ac3);}
    .mp-dot{width:44px;height:44px;border-radius:10px;flex:none;}
    .mp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
    .mp-tile{background:var(--soft);border-radius:14px;padding:12px 8px;text-align:center;}
    .mp-tile b{display:block;font-size:11px;}
    .mp-tile span{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:16px;margin-top:3px;color:var(--ac3);}
    .mp-tile.on{background:var(--ink);color:#fff;}
    .mp-tile.on span{color:var(--ac2);}
    .mp-bar{position:absolute;left:10px;right:10px;bottom:16px;border-radius:18px;background:var(--ink);color:#fff;padding:11px 11px 11px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 10px 24px rgba(0,0,0,.18);}
    .mp-bar b{font-family:'Sora',sans-serif;font-size:12px;}
    .mp-bar small{display:block;font-size:9.5px;opacity:.65;margin-top:2px;}
    .mp-bar .mp-btn{padding:9px 15px;font-size:11px;}
    .lw-dots{display:flex;gap:7px;justify-content:center;margin-top:18px;}
    .lw-dot{width:8px;height:8px;border-radius:50%;background:#E0CBB4;transition:background 0.4s ease,width 0.4s ease,transform .3s ease;}
    .lw-dot.on{background:#C2401E;width:24px;border-radius:100px;transform:translateY(-1px);}
    .lw-grid{position:relative;max-width:760px;margin:0 auto;padding:0 20px 40px;}
    #lwA{flex:0 1 640px;}
    /* laptop iets naar links, zodat de telefoon alleen de rand overlapt en de inhoud vrij blijft */
    @media (min-width:821px){#lwA .lw-laptop{margin:0 auto 0 24px;}}
    .ph-wrap{position:absolute;right:50px;bottom:30px;z-index:5;width:143px;height:278px;}
    /* ===== DESKTOP: laptop groot, telefoon ernaast ===== */
    @media (max-width:900px){.lw-grid{grid-template-columns:1fr !important;gap:44px !important;}.lw-laptop{max-width:480px;}}

    /* ===== MOBIEL (<=820px): alleen de telefoon-mockup, gecentreerd ===== */
    .dots-mobile{display:none;}
    @media (max-width:820px){
      /* laptop verbergen op mobiel */
      #lwA{display:none;}
      /* telefoon wordt het hoofdelement: uit absolute flow, gecentreerd.
         Geen overflow:hidden hier · dat sneed de zachte gloed hard af (de sectie zelf vangt overloop al op) */
      .lw-grid{position:relative;max-width:100%;margin:0 auto;padding:8px 16px 0;display:flex;justify-content:center;overflow:visible;}
      .lw-grid .ph-wrap{position:relative;right:auto;bottom:auto;width:100%;max-width:300px;z-index:1;display:flex;justify-content:center;height:calc(584px * 0.78);margin-bottom:0;}
      /* telefoon groot en in het midden (.lw-grid ervoor zodat deze regel wint van de desktop-regel) */
      .lw-grid .ph{position:relative;width:300px;flex:none;margin:0 auto;transform:scale(0.78);transform-origin:top center;animation:none;}
      /* zachtere schaduw om het toestel: geen harde rand, wel subtiele diepte */
      .lw-grid .ph-body{box-shadow:0 12px 28px rgba(33,29,32,0.10),inset 0 0 0 1.5px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,0.12);}
      /* telefoon-hover-lift ook op mobiel niet nodig */
      .lw-grid:hover .ph-body,.ph-wrap:hover .ph-body{transform:none;box-shadow:0 12px 28px rgba(33,29,32,0.10),inset 0 0 0 1.5px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,0.12);}
      /* puntjes: desktop-rij verbergen, mobiel-rij tonen */
      .dots-desktop{display:none;}
      .dots-mobile{display:flex;}
      /* warme vlek: kleiner en zachter, zodat hij nergens tegen een rand knalt */
      .lw-grid .ph-glow{left:50%;top:46%;width:270px;height:370px;filter:blur(42px);opacity:.6;}
      /* contactschaduw onder het toestel: zachter en subtieler */
      .lw-grid .ph-wrap:before{left:20%;right:20%;bottom:4px;height:18px;filter:blur(11px);background:radial-gradient(circle,rgba(33,29,32,0.14) 0%,rgba(33,29,32,0) 72%);}
    }
    /* smalle telefoons: iets kleiner, wrapper-hoogte mee aanpassen zodat niks afsnijdt */
    @media (max-width:360px){
      .lw-grid .ph{transform:scale(.70);}
      .lw-grid .ph-wrap{height:calc(584px * 0.70);}
      .lw-grid .ph-glow{width:240px;height:330px;}
    }
    @media (max-width:320px){
      .lw-grid .ph{transform:scale(.60);}
      .lw-grid .ph-wrap{height:calc(584px * 0.60);}
      .lw-grid .ph-glow{width:210px;height:290px;}
    }
    /* smalle telefoons (<=340px): schaal de hele mockup iets terug zodat 'ie past */

    .lw-showcase-shell{position:relative;padding:20px 0;}
    @media (max-width:900px){.lw-showcase-shell{padding:26px 20px;}.lw-tagrow{justify-content:flex-start;max-width:none;}}
    
    /* ===== telefoon-mockup ===== */
    .ph-wrap:before{content:"";position:absolute;left:12%;right:24%;bottom:2px;height:14px;border-radius:50%;background:radial-gradient(circle,rgba(33,29,32,0.20) 0%,rgba(33,29,32,0) 72%);filter:blur(7px);z-index:0;}
    .ph{position:relative;width:300px;margin:0;z-index:2;transform:scale(0.47);transform-origin:top left;}
    .ph-body{position:relative;background:linear-gradient(150deg,#403A34,#1C1813);border-radius:48px;padding:9px;box-shadow:0 16px 36px rgba(33,29,32,0.14),inset 0 0 0 1.5px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,0.12);transition:transform .5s cubic-bezier(0.22,0.8,0.24,1),box-shadow .5s ease;}
    /* telefoon staat los voor de laptop: heel subtiel zweven bij hover over de sectie of het toestel */
    .lw-grid:hover .ph-body,.ph-wrap:hover .ph-body{transform:translateY(-5px) rotate(-0.6deg);box-shadow:0 26px 48px rgba(33,29,32,0.22),inset 0 0 0 1.5px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,0.12);}
    .ph-glow{transition:opacity .4s ease;}
    .lw-grid:hover .ph-glow,.ph-wrap:hover .ph-glow{transform:translate(-50%,-50%);}
    .ph-body:before{content:"";position:absolute;right:-2px;top:158px;width:3px;height:58px;border-radius:2px;background:linear-gradient(180deg,#4a433c,#221e19);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);}
    .ph-body:after{content:"";position:absolute;left:-2px;top:138px;width:3px;height:74px;border-radius:2px;background:linear-gradient(180deg,#4a433c,#221e19);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);}
    /* zachte warme vlek ACHTER de telefoon (geen ring, geen glow om het toestel) */
    .ph-glow{position:absolute;inset:auto;left:50%;top:50%;width:210px;height:256px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(241,123,67,0.26) 0%,rgba(244,87,49,0.14) 40%,rgba(246,167,123,0.12) 60%,rgba(244,87,49,0) 80%);opacity:1;z-index:-1;filter:blur(32px);pointer-events:none;}
    .ph-screen{position:relative;border-radius:36px;overflow:hidden;height:566px;background:#fff;}
    .ph-screen:before{content:"";position:absolute;inset:0;border-radius:36px;background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,0) 24%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 16px rgba(0,0,0,.10);pointer-events:none;z-index:38;}
    .ph-screen:after{content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:96px;height:4px;border-radius:100px;background:rgba(26,23,25,.32);z-index:39;pointer-events:none;}
    .ph-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:88px;height:24px;background:#000;border-radius:100px;z-index:40;box-shadow:inset 0 0 2px rgba(255,255,255,.06);}
    .ph-notch:after{content:"";position:absolute;right:12px;top:8px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#1a2733,#000 65%);box-shadow:inset 0 0 1px rgba(90,140,190,.6);}

    /* ===== Opstartlogo binnen de mockup-schermen (standaard onzichtbaar) ===== */
    .device-boot-logo{position:absolute;inset:0;background:#1C0F0A;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s;}
    /* klik = scherm uit: donker scherm met dato-logo, fade't rustig in */
    #voorbeelden .toggled.device-off .device-boot-logo{opacity:1 !important;visibility:visible !important;transition:opacity .55s ease,visibility 0s linear 0s !important;}
    .device-off .device-boot-logo{opacity:1 !important;visibility:visible !important;transition:opacity .55s ease,visibility 0s linear 0s !important;}
    .device-off .device-boot-logo span{opacity:1 !important;transition:opacity .5s ease .25s !important;}
    /* scherm weer aan: donker scherm fade't rustig weg */
    #voorbeelden .toggled .device-boot-logo{transition:opacity .6s ease,visibility 0s linear .6s !important;}
    #voorbeelden .toggled .device-boot-logo span{transition:opacity .4s ease !important;}
    .device-boot-logo span{font-family:'Fredoka',sans-serif;font-weight:600;color:#FFFFFF;letter-spacing:-0.02em;line-height:1;}
    .lw-window .device-boot-logo{z-index:20;}
    .lw-window .device-boot-logo span{font-size:30px;}
    .ph-screen .device-boot-logo{z-index:35;}
    .ph-screen .device-boot-logo span{font-size:34px;}

    /* ===== Voorbeelden: intro-animatie (laptop klapt open via scharnier, telefoon gaat aan) ===== */
    @media (prefers-reduced-motion: no-preference){
      /* beginstand: alleen actief als JS 'mock-prep' heeft gezet, dus zonder JS blijft alles gewoon zichtbaar */
      #voorbeelden.mock-prep .lw-wrap{perspective:1200px;}
      /* het scherm/de klep draait om het scharnier onderaan; de base blijft stil */
      #voorbeelden.mock-prep .lw-screen{transform-origin:center bottom;transform-style:preserve-3d;will-change:transform;}
      /* laptop begint bijna dicht */
      #voorbeelden.mock-prep:not(.mock-live) .lw-screen{transform:rotateX(-72deg);}
      #voorbeelden.mock-prep:not(.mock-live) .lw-window{opacity:0;}
      /* telefoon: scherm start donker en 'gaat aan' net na de laptop */
      #voorbeelden.mock-prep:not(.mock-live) .ph-screen{filter:brightness(0.04);}
      #voorbeelden.mock-prep:not(.mock-live) .ph-glow{opacity:0;}
      /* de animatie zelf: klep opent soepel naar rechtop, rustig en zonder overshoot */
      #voorbeelden.mock-live .lw-screen{transform:rotateX(0deg);transition:transform 1.5s cubic-bezier(0.22,0.8,0.24,1) .2s,box-shadow 1.5s ease .2s;}
      /* scherminhoud fade't pas in wanneer de klep bijna open is */
      #voorbeelden.mock-live .lw-window{opacity:1;transition:opacity .9s ease 1.1s;}
      #voorbeelden.mock-live .ph-screen{filter:brightness(1);transition:filter .9s ease .6s;}
      #voorbeelden.mock-live .ph-glow{opacity:1;transition:opacity 1s ease .75s;}
      /* opstartlogo: donker scherm dekt de mini-site af zodra de intro klaarstaat */
      #voorbeelden.mock-prep .device-boot-logo{opacity:1;visibility:visible;}
      #voorbeelden.mock-prep .device-boot-logo span{opacity:0;}
      /* zodra de schermen aangaan: logo licht op, blijft even staan, dan fade't het donkere scherm weg */
      #voorbeelden.mock-live .lw-window .device-boot-logo span{opacity:1;transition:opacity .4s ease 1.1s;}
      #voorbeelden.mock-live .lw-window .device-boot-logo{opacity:0;visibility:hidden;transition:opacity .45s ease 2.0s,visibility 0s linear 2.45s;}
      #voorbeelden.mock-live .ph-screen .device-boot-logo span{opacity:1;transition:opacity .35s ease .85s;}
      #voorbeelden.mock-live .ph-screen .device-boot-logo{opacity:0;visibility:hidden;transition:opacity .45s ease 1.7s,visibility 0s linear 2.15s;}
    }
    .m-bar3{display:flex;flex-direction:column;gap:3px;}
    .m-bar3 span{width:16px;height:2px;border-radius:2px;background:currentColor;display:block;}
    /* ===== compacte sedan (autobedrijf / autoschade) ===== */
/* ===== Voordelen-blok "Wat je krijgt": inklapbaar op mobiel ===== */
/* Desktop: gedraagt zich als een gewoon blok · alles zichtbaar, geen pijltjes */
.voordeel{list-style:none;}
.voordeel-sum{list-style:none;cursor:default;display:block;}
.voordeel-sum::-webkit-details-marker{display:none;}
.voordeel-sum::marker{content:"";}

/* ===== Pakketten op iPad/tablet: 1 kaart per rij, netjes gecentreerd ===== */
@media (max-width:1100px){
  .pakketten-grid{grid-template-columns:1fr !important;max-width:560px;margin:0 auto;}
  .pricing-card{width:100%;}
  /* iets extra ruimte tussen de kaarten zodat het Aanrader-label vrij hangt */
  .pakketten-grid{row-gap:26px !important;}
}

/* ===== Mobiele fixes (telefoon-schermen) ===== */
@media (max-width:640px){
  /* Pakketten: compactere ruimte (1-kolom komt al uit de tablet-regel hierboven) */
  .pakketten-grid{max-width:100%;row-gap:18px !important;}
  .pricing-business{margin-top:8px;}
  /* Voordelen: alleen op mobiel echt inklapbaar */
  .voordeel-sum{cursor:pointer;position:relative;padding:18px 0 !important;padding-right:34px !important;}
  /* Nummer iets compacter naast de titel op mobiel */
  .voordeel-nr{font-size:24px !important;}
  /* Titel netjes uitlijnen, geen marge onder als dicht */
  .voordeel-sum h3{margin-bottom:0 !important;font-size:17.5px !important;}
  /* Uitleg standaard verborgen op mobiel */
  .voordeel-p{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height 0.3s ease,opacity 0.25s ease,margin-top 0.3s ease;}
  /* Open: uitleg schuift netjes tevoorschijn */
  .voordeel[open] .voordeel-p{max-height:200px;opacity:1;margin-top:8px;}
  /* Plusje rechts, draait naar een kruisje als open */
  .voordeel-sum::after{content:"";position:absolute;right:4px;top:22px;width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4502A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;transition:transform 0.3s ease;}
  .voordeel[open] .voordeel-sum::after{transform:rotate(135deg);}
  /* Eigendom-blok: minder padding, tekst netjes */
  .eigendom-blok{padding:32px 22px !important;}
  /* Pakketten: compacter op mobiel */
  .pakketten-grid > div{padding:26px 22px !important;}
  /* Contact-blok "Klaar voor een site die van jou is": minder padding, knoppen op volle breedte */
  .contact-blok{padding:34px 22px !important;}
  .contact-blok .btn-cta,.contact-blok .btn-cta-ghost{width:100%;justify-content:center;}
}
@media (max-width:400px){
  .eigendom-blok{padding:26px 18px !important;}
  .contact-blok{padding:28px 18px !important;}
}
/* Soepeler scrollen: zwevende cirkels op eigen laag, en animaties pauzeren buiten beeld */
[data-bg]{will-change:transform;}
.anim-pauze, .anim-pauze *{animation-play-state:paused !important;}

/* ============================================================
   DATO · APRICOT V5 (concept november 2026)
   Eén set tokens voor kleur, letters, ruimte, hoeken en beweging.
   ============================================================ */
:root{
  --ap-0:#FFF8F1;   /* warm gebroken wit */
  --ap-1:#FFE0C7;   /* licht perzik */
  --ap-2:#FAC3A0;   /* zacht abrikoos */
  --ap-3:#F6A77B;   /* warme perzik */
  --ap-4:#F17B43;   /* koraal */
  --ink:#211D20;    /* diep donkerbruin */
  --ink-2:#4E4549;  /* lopende tekst */
  --ink-3:#7C7176;  /* zachte tekst */
  --koraal-tekst:#C2401E;  /* koraal dat leesbaar blijft op licht */
  --nacht:#211D20; --nacht-2:#2D282B;
  --lijn:rgba(33,29,32,0.10); --lijn-2:rgba(33,29,32,0.16);
  --f-kop:'Fredoka',system-ui,sans-serif;
  --f-tekst:'Hanken Grotesk',system-ui,sans-serif;
  --f-label:'Sora',system-ui,sans-serif;
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px; --r-podium:clamp(28px,3vw,44px);
  --sec:clamp(88px,10vw,144px);
  --ease:cubic-bezier(0.2,0.7,0.2,1);
  --sh-zacht:0 1px 2px rgba(33,29,32,0.05),0 10px 30px -12px rgba(33,29,32,0.14);
  --sh-diep:0 40px 90px -30px rgba(120,46,20,0.38);
}
html{background:var(--ap-0);scrollbar-color:var(--ap-4) var(--ap-0);scroll-padding-top:110px;}
body{background:var(--ap-0);color:var(--ink-2);font-family:var(--f-tekst);font-size:16px;line-height:1.65;}
::selection{background:var(--ap-2);color:var(--ink);}
main{overflow:clip;}
.w{max-width:1120px;margin:0 auto;padding:0 32px;position:relative;}
.sec{padding:var(--sec) 0;position:relative;}
.label{display:block;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 18px;}
.label--licht{color:var(--ap-3);}
.kop-xl,.kop-l,.kop-m{font-family:var(--f-kop);color:var(--ink);margin:0;text-wrap:balance;}
.kop-xl{font-weight:600;font-size:clamp(40px,5.6vw,80px);line-height:0.98;letter-spacing:-0.03em;}
.kop-l{font-weight:600;font-size:clamp(31px,3.7vw,52px);line-height:1.02;letter-spacing:-0.025em;}
.kop-m{font-weight:600;font-size:clamp(27px,2.6vw,38px);line-height:1.08;letter-spacing:-0.02em;}
.acc{color:var(--koraal-tekst);}
.lead{font-size:clamp(16px,1.2vw,18px);line-height:1.62;color:var(--ink-2);max-width:54ch;margin:0;text-wrap:pretty;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ap-4);outline-offset:3px;border-radius:8px;}

/* Knoppen en tekstlinks */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--f-kop);font-weight:600;font-size:15px;letter-spacing:-0.01em;line-height:1;text-decoration:none;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:12px;padding:15px 22px;cursor:pointer;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(33,29,32,0.6);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s ease,border-color .3s ease;}
.knop:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(33,29,32,0.6);}
.pijl{display:inline-block;transition:transform .35s var(--ease);}
.knop:hover .pijl,.tlink:hover .pijl{transform:translateX(5px);}
.knop--glas{background:rgba(255,248,241,0.4);color:var(--ink);border:1px solid rgba(255,255,255,0.75);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 12px 28px -16px rgba(33,29,32,0.35);}
.knop--glas:hover{background:rgba(255,248,241,0.72);}
.knop--rand{background:transparent;color:var(--ink);border-color:var(--lijn-2);box-shadow:none;}
.knop--rand:hover{border-color:var(--ink);box-shadow:none;}
.tlink{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-kop);font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;padding-bottom:5px;border-bottom:1.5px solid var(--lijn-2);transition:border-color .3s ease;}
.tlink:hover{border-color:var(--ink);}
.tlink--licht{color:#FBEDE3;border-color:rgba(255,255,255,0.25);}
.tlink--licht:hover{border-color:#fff;}

/* Glas en abrikoos-vlakken zonder zichtbare kleurbanen */
.glas{background:rgba(255,248,241,0.56);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);border:1px solid rgba(255,255,255,0.78);box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),var(--sh-diep);}
.abrikoos{background:
  radial-gradient(70% 90% at 0% 0%, rgba(255,247,240,0.95) 0%, rgba(255,247,240,0) 62%),
  radial-gradient(62% 85% at 100% 100%, rgba(241,123,67,0.88) 0%, rgba(241,123,67,0) 64%),
  radial-gradient(55% 75% at 90% 16%, rgba(246,167,123,0.92) 0%, rgba(246,167,123,0) 70%),
  radial-gradient(60% 70% at 28% 100%, rgba(250,195,160,0.95) 0%, rgba(250,195,160,0) 72%),
  linear-gradient(160deg,#FFE0C7 0%,#FAC3A0 100%);}
.korrel{isolation:isolate;}
.korrel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.korrel > *{position:relative;z-index:1;}

/* Verschijnen bij scrollen */
.js .r{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.js .r.in{opacity:1;transform:none;}

/* Menu: zelfde balk, fijner glas en strakkere letters */
#navbar{-webkit-backdrop-filter:blur(18px) saturate(1.6) !important;backdrop-filter:blur(18px) saturate(1.6) !important;}

/* ============ 1 · HERO ============ */
.hero{position:relative;overflow:hidden;min-height:90vh;display:flex;align-items:center;margin-top:-90px;padding-top:90px;}
.hero-in{width:100%;padding-top:40px;padding-bottom:150px;}
.hero-kop{font-family:var(--f-kop);font-weight:600;font-size:clamp(42px,7.4vw,106px);line-height:0.96;letter-spacing:-0.035em;color:var(--ink);margin:0 0 32px;}
.hero-kop .hr{display:block;}
.hero-acc{background:linear-gradient(95deg,#C65A30 0%,#A3401C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:0.24em;margin-bottom:-0.16em;}
.hero-tekst{font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:#3D3539;max-width:500px;margin:0 0 34px;text-wrap:pretty;}
.hero-knoppen{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px;}
.hero-feiten{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;font-size:15px;font-weight:500;color:#4E4549;}
.hero-feiten b{color:var(--ink);font-weight:680;}
.hero-feiten i{display:block;width:1px;height:16px;background:rgba(33,29,32,0.25);}
.hero-boog{position:absolute;border-radius:50%;pointer-events:none;}
.hero-boog-1{width:900px;height:900px;right:max(-320px,-46vw);bottom:-440px;border:1.5px solid rgba(255,255,255,0.55);}
.hero-boog-2{width:1150px;height:1150px;right:max(-445px,-60vw);bottom:-565px;border:1px solid rgba(255,255,255,0.32);}
.hero-licht{position:absolute;width:640px;height:640px;right:6%;top:4%;border-radius:50%;background:radial-gradient(circle,rgba(255,250,245,0.6) 0%,rgba(255,250,245,0) 62%);pointer-events:none;animation:licht 18s ease-in-out infinite alternate;}
@keyframes licht{from{transform:translate(0,0);}to{transform:translate(-60px,40px);}}
.hero-golf{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0;}
.hero-golf svg{display:block;width:100%;height:120px;}
@keyframes opkomen{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
.hero .hr,.hero-tekst,.hero-knoppen,.hero-feiten{animation:opkomen 1.1s var(--ease) both;}
.hero .hr:nth-child(2){animation-delay:.08s;} .hero .hr:nth-child(3){animation-delay:.16s;}
.hero-tekst{animation-delay:.3s;} .hero-knoppen{animation-delay:.4s;} .hero-feiten{animation-delay:.5s;}

/* ============ 2 · WAT DATO DOET ============ */
.dd-sec{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(72px,8vw,120px);background:
  radial-gradient(40% 55% at 96% 70%, rgba(246,167,123,0.30) 0%, rgba(246,167,123,0) 70%),
  linear-gradient(180deg,var(--ap-0) 0%,#FFF4EB 100%);}
.dd-kop{margin-bottom:44px;}
.dd-titel{max-width:22ch;}
.dd{position:relative;}
.dd-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn-2);}
.dd-item{border-bottom:1px solid var(--lijn-2);}
.dd-h{margin:0;font:inherit;}
.dd-knop{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 22px;align-items:center;gap:10px;padding:17px 0;cursor:pointer;}
.dd-knop:focus-visible{outline:2px solid var(--ap-4);outline-offset:2px;border-radius:10px;}
.dd-naam{font-family:var(--f-kop);font-weight:500;font-size:clamp(19px,1.55vw,22px);line-height:1.15;letter-spacing:-0.01em;color:var(--ink);transition:color .35s ease,transform .5s var(--ease);}
.dd-teken{width:18px;height:18px;justify-self:end;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211D20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .45s var(--ease),opacity .3s ease;}
.js .dd-item:not(.aan) .dd-naam{color:rgba(33,29,32,0.40);}
.js .dd-knop:hover .dd-naam{color:var(--ink);}
.dd-paneel-in{min-height:0;overflow:hidden;}
.dd-uitleg{margin:0 0 14px;max-width:44ch;font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:pretty;}
.dd-link{margin:0 0 26px;}
.js .dd-paneel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease);}
.js .dd-item.aan .dd-paneel{grid-template-rows:1fr;}
.js .dd-item:not(.aan) .dd-paneel-in{visibility:hidden;transition:visibility 0s .55s;}

/* Preview: zacht abrikoos-podium met een echt beeld of een rustige uitleg-tekening */
.dd-preview{position:relative;aspect-ratio:5/4;margin:0 0 28px;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;background:
  radial-gradient(70% 60% at 88% 8%, rgba(241,123,67,0.36) 0%, rgba(241,123,67,0) 70%),
  radial-gradient(60% 60% at 8% 100%, rgba(250,195,160,0.95) 0%, rgba(250,195,160,0) 70%),
  linear-gradient(160deg,#FFEEE2 0%,#FFE0C7 55%,#FAC3A0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),inset 0 0 0 1px rgba(255,255,255,0.45),0 40px 80px -46px rgba(120,46,20,0.5);}
.dd-preview--nacht{background:
  radial-gradient(70% 60% at 90% 0%, rgba(241,123,67,0.32) 0%, rgba(241,123,67,0) 70%),
  radial-gradient(60% 50% at 0% 100%, rgba(246,167,123,0.14) 0%, rgba(246,167,123,0) 70%),
  linear-gradient(160deg,var(--nacht-2) 0%,var(--nacht) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 40px 80px -40px rgba(33,29,32,0.6);}
.pv-noot{position:absolute;left:22px;bottom:18px;z-index:5;margin:0;max-width:calc(100% - 44px);font-size:12.5px;line-height:1.4;color:var(--ink-3);}
.dd-preview--nacht .pv-noot{color:#9A8F93;}
/* websites */
.pv-browser{position:absolute;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -28px rgba(33,29,32,0.55),0 0 0 1px rgba(33,29,32,0.06);}
.pv-bb{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F7EDE5;border-bottom:1px solid var(--lijn);}
.pv-bb i{width:7px;height:7px;border-radius:50%;background:rgba(33,29,32,0.16);}
.pv-bb span{margin-left:8px;font-size:11px;line-height:1.5;color:var(--ink-3);background:#fff;border-radius:6px;padding:1px 9px;}
.pv-browser img{display:block;width:100%;height:auto;}
.pv-b2{width:88%;left:18%;top:6%;}
.pv-b1{width:82%;left:7%;top:37%;z-index:2;}
/* systemen en dashboards: het beeld loopt het podium uit */
.pv-img{position:absolute;left:8%;top:12%;width:150%;max-width:none;height:auto;}
/* app in ontwikkeling: alleen een rustige schets, geen verzonnen schermen */
.pv-tel{position:absolute;left:50%;top:11%;width:min(42%,230px);aspect-ratio:9/19;margin-left:calc(min(42%,230px) / -2);border-radius:38px;background:#211D20;padding:9px;box-shadow:0 40px 70px -30px rgba(33,29,32,0.6),inset 0 0 0 1px rgba(255,255,255,0.08);}
.pv-scherm{height:100%;border-radius:30px;background:var(--ap-0);overflow:hidden;padding:30px 14px 0;display:flex;flex-direction:column;gap:10px;}
.sk{border-radius:10px;background:rgba(33,29,32,0.08);flex-shrink:0;}
.sk-1{height:9px;width:44%;}
.sk-2{height:36%;border-radius:18px;background:linear-gradient(150deg,var(--ap-2) 0%,var(--ap-3) 55%,var(--ap-4) 100%);}
.sk-3{height:46px;background:#fff;border:1px solid var(--lijn);}
.sk-4{height:46px;background:#fff;border:1px solid var(--lijn);opacity:0.7;}
.pv-status{position:absolute;left:calc(50% + min(21%,115px) - 30px);top:24%;z-index:3;margin:0;font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--koraal-tekst);background:rgba(255,248,241,0.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.85);border-radius:12px;padding:12px 14px;box-shadow:0 18px 40px -20px rgba(33,29,32,0.45);}
/* koppelingen */
.pv-koppel{position:absolute;left:0;right:0;top:0;bottom:56px;display:flex;align-items:center;padding:0 7%;}
.kp-node{flex:0 0 auto;width:min(25%,136px);aspect-ratio:1;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:rgba(255,248,241,0.72);border:1px solid rgba(255,255,255,0.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,0 24px 50px -28px rgba(33,29,32,0.5);font-family:var(--f-kop);font-weight:620;font-size:14px;line-height:1.2;color:var(--ink);}
.kp-node svg{width:26px;height:26px;fill:none;stroke:var(--koraal-tekst);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.kp-node--dato{background:var(--ink);border-color:var(--ink);color:#FFF1E7;box-shadow:0 30px 60px -26px rgba(33,29,32,0.7);}
.kp-node--dato svg{stroke:var(--ap-3);}
.kp-lijn{flex:1;height:2px;position:relative;background:repeating-linear-gradient(90deg,rgba(33,29,32,0.28) 0 6px,transparent 6px 12px);}
.kp-lijn i{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--ap-4);box-shadow:0 0 0 5px rgba(241,123,67,0.18);animation:stroom 2.6s var(--ease) infinite;}
.kp-lijn--2 i{animation-delay:1.3s;}
@keyframes stroom{0%{left:0;opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{left:calc(100% - 10px);opacity:0;}}
.dd-item:not(.aan) .kp-lijn i{animation-play-state:paused;}
/* hosting en beheer */
.pv-paneel{position:absolute;left:12%;right:12%;top:calc(50% - 28px);transform:translateY(-50%);border-radius:var(--r-l);padding:18px 18px 16px;background:radial-gradient(90% 60% at 100% 0%,rgba(241,123,67,0.16),rgba(241,123,67,0) 60%),linear-gradient(160deg,var(--nacht-2),var(--nacht));border:1px solid rgba(255,255,255,0.08);box-shadow:0 40px 80px -30px rgba(33,29,32,0.6);}
.pp-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 4px 12px;font-family:var(--f-kop);font-weight:650;font-size:15px;color:#FFF1E7;}
.pp-kop em{font-style:normal;font-family:var(--f-label);font-weight:500;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:#9A8F93;}
.pp-rij{display:flex;align-items:center;gap:12px;margin-top:7px;padding:12px 14px;border-radius:13px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);font-family:var(--f-kop);font-weight:520;font-size:15px;color:#EFE9E6;}
.pp-rij svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--ap-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pp-rij span{margin-right:auto;}
.pp-rij em{font-style:normal;font-family:var(--f-label);font-weight:600;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#F6A77B;}

/* ============ 3 · UITGELICHT WERK ============ */
.werk{padding-top:0;padding-bottom:clamp(80px,9vw,140px);background:linear-gradient(180deg,#FFF4EB 0%,var(--ap-0) 30%);}
.podium-rand{padding:0 clamp(12px,2vw,28px);}
.podium{position:relative;max-width:1240px;margin:0 auto;border-radius:var(--r-podium);overflow:hidden;padding-top:clamp(52px,5.5vw,80px);color:#D6CDCA;background:
  radial-gradient(46% 34% at 50% 0%, rgba(241,123,67,0.30) 0%, rgba(241,123,67,0) 72%),
  radial-gradient(60% 40% at 50% 58%, rgba(246,167,123,0.20) 0%, rgba(246,167,123,0) 72%),
  linear-gradient(180deg,#2D282B 0%,var(--nacht) 72%);
  box-shadow:0 70px 120px -70px rgba(120,46,20,0.7);}
.podium-kop{text-align:center;max-width:760px;margin:0 auto;padding:0 28px;}
.podium-kop .kop-l{color:#FFF4EC;}
.podium-kop p:not(.label){margin:18px auto 24px;max-width:60ch;font-size:clamp(15.5px,1.15vw,17px);line-height:1.65;color:#D6CDCA;text-wrap:pretty;}
.podium-beeld{position:relative;width:min(820px,76%);margin:clamp(32px,4vw,52px) auto 0;}
.pod-1{display:block;width:100%;height:auto;transform-origin:50% 100%;transform:perspective(1800px) rotateX(calc((1 - var(--p,1)) * 12deg)) translateY(calc((1 - var(--p,1)) * 50px));}
.podium-voet{position:relative;z-index:3;margin-top:-10%;padding:clamp(90px,10vw,140px) 32px 34px;background:linear-gradient(180deg,rgba(33,29,32,0) 0%,rgba(33,29,32,0.8) 45%,var(--nacht) 75%);}
.podium-noot{text-align:center;margin:0;font-size:12.5px;color:#9A8F93;}
.meer{display:flex;justify-content:space-between;align-items:baseline;gap:20px 56px;flex-wrap:wrap;margin-top:44px;}
.meer p{margin:0;max-width:64ch;font-size:16px;line-height:1.65;color:var(--ink-3);}
.meer b{font-weight:600;color:var(--ink);}

/* ============ 4 · WAAROM DATO ============ */
.waarom{background:
  radial-gradient(42% 52% at 14% 52%, rgba(246,167,123,0.55) 0%, rgba(246,167,123,0) 70%),
  radial-gradient(40% 50% at 96% 26%, rgba(250,195,160,0.85) 0%, rgba(250,195,160,0) 70%),
  linear-gradient(180deg,var(--ap-0) 0%,#FFEBDC 22%,#FFE0C7 52%,#FFEBDC 80%,var(--ap-0) 100%);}
.waarom-grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:clamp(44px,6vw,88px);align-items:center;}
.voordelen{list-style:none;margin:36px 0 30px;padding:0;border-top:1px solid var(--lijn-2);}
.voordelen li{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--lijn-2);}
.voordelen h3{margin:0;font-family:var(--f-kop);font-weight:500;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.3;letter-spacing:-0.015em;color:var(--ink);}
.voordelen p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);}
.waarom-links{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.waarom-beeld{position:relative;padding:30px 30px 40px 0;}
.waarom-beeld::before{content:"";position:absolute;inset:-12% -10% -8% -16%;z-index:0;background:radial-gradient(closest-side,rgba(241,123,67,0.30),rgba(246,167,123,0.12) 60%,rgba(255,224,199,0) 100%);}
.map-vel{position:absolute;left:24px;right:6px;border-radius:var(--r-l);background:rgba(255,248,241,0.5);border:1px solid rgba(255,255,255,0.7);}
.map-vel-2{top:10px;bottom:22px;transform:translateX(14px);}
.map-vel-3{top:20px;bottom:6px;transform:translateX(28px);opacity:0.6;}
.map{position:relative;z-index:1;border-radius:var(--r-l);padding:24px 24px 20px;}
.map-titel{font-family:var(--f-kop);font-weight:600;font-size:20px;letter-spacing:-0.01em;color:var(--ink);margin:0 0 12px;}
.map-rij{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--lijn);font-family:var(--f-tekst);font-weight:550;font-size:14.5px;color:var(--ink);}
.map-rij svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--koraal-tekst);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.map-rij span{margin-right:auto;}
.map-rij em{font-style:normal;font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.1em;color:var(--ink-3);}
.map-voet{margin:14px 0 0;padding-top:14px;border-top:1px dashed var(--lijn-2);font-family:var(--f-kop);font-weight:600;font-size:14.5px;color:var(--koraal-tekst);}
.js .waarom-beeld .map-rij,.js .waarom-beeld .map-voet{opacity:0;transform:translateX(-12px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js .waarom-beeld.in .map-rij,.js .waarom-beeld.in .map-voet{opacity:1;transform:none;}
.js .waarom-beeld .map-rij:nth-of-type(1){transition-delay:.35s;}
.js .waarom-beeld .map-rij:nth-of-type(2){transition-delay:.47s;}
.js .waarom-beeld .map-rij:nth-of-type(3){transition-delay:.59s;}
.js .waarom-beeld .map-rij:nth-of-type(4){transition-delay:.71s;}
.js .waarom-beeld .map-rij:nth-of-type(5){transition-delay:.83s;}
.js .waarom-beeld .map-voet{transition-delay:1s;}

/* ============ 5 · WEBSITEPRIJZEN ============ */
.prijzen{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(56px,6vw,96px);background:
  radial-gradient(38% 60% at 0% 64%, rgba(250,195,160,0.7) 0%, rgba(250,195,160,0) 70%),
  radial-gradient(34% 50% at 100% 18%, rgba(246,167,123,0.22) 0%, rgba(246,167,123,0) 70%),
  var(--ap-0);}
.prijs-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(44px,6vw,88px);align-items:center;}
.prijs-kop{margin-bottom:30px;}
.prijs-lijst{border-top:1px solid var(--lijn-2);border-bottom:1px solid var(--lijn-2);padding:10px 0;}
.pr{all:unset;box-sizing:border-box;position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 38px;align-items:center;gap:24px;padding:21px 22px;border-radius:var(--r-l);cursor:pointer;isolation:isolate;}
.pr::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,0.6);box-shadow:0 0 0 1px rgba(255,255,255,0.8);opacity:0;transform:scale(0.98);transition:opacity .35s ease,transform .45s var(--ease);}
.pr:hover::before{opacity:1;transform:none;}
.pr:focus-visible{outline:2px solid var(--ap-4);outline-offset:2px;}
.pr--aanrader::before{opacity:1;transform:none;background:radial-gradient(80% 100% at 100% 0%,rgba(241,123,67,0.42) 0%,rgba(241,123,67,0) 70%),linear-gradient(120deg,#FFEDE0 0%,#FFE0C7 50%,#FAC3A0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 30px 60px -34px rgba(160,70,30,0.5);}
.pr-naam{display:flex;align-items:center;gap:14px;font-family:var(--f-label);font-weight:600;font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);}
.pr-tag{font-size:10.5px;letter-spacing:0.12em;color:var(--koraal-tekst);}
.pr-voor{display:block;margin-top:8px;font-family:var(--f-tekst);font-weight:500;font-size:clamp(15.5px,1.15vw,17px);line-height:1.4;letter-spacing:-0.015em;color:var(--ink-2);}
.pr-bedrag{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--f-kop);font-weight:600;font-size:clamp(28px,2.5vw,36px);line-height:1;letter-spacing:-0.02em;color:var(--ink);font-variant-numeric:tabular-nums;transition:transform .45s var(--ease);}
.pr-bedrag small{font-family:var(--f-tekst);font-weight:500;font-size:13px;letter-spacing:0;color:var(--ink-3);margin-bottom:6px;}
.pr-pijl{justify-self:end;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--lijn-2);font-size:18px;color:var(--ink);transition:opacity .3s ease,transform .4s var(--ease),background .3s ease,color .3s ease;}
.pr-pijl{opacity:0;transform:translateX(-6px);}
.pr:hover .pr-pijl,.pr:focus-visible .pr-pijl{opacity:1;transform:none;background:var(--ink);border-color:var(--ink);color:#fff;}
.pr:hover .pr-bedrag{transform:translateX(-4px);}
.pr-onder{margin:18px 0 0;padding:0 26px;font-size:14px;color:var(--ink-3);}
.pr-wissel{display:none;gap:4px;padding:4px;margin:0 0 16px;border-radius:13px;background:rgba(33,29,32,0.06);}
.js .pr-wissel{display:inline-flex;}
.pr-wissel button{all:unset;cursor:pointer;font-family:var(--f-kop);font-weight:500;font-size:15px;line-height:1;color:var(--ink-2);padding:11px 20px;border-radius:10px;transition:background .3s ease,color .3s ease,box-shadow .3s ease;}
.pr-wissel button:hover{color:var(--ink);}
.pr-wissel button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(33,29,32,0.35);}
.pr-wissel button:focus-visible{outline:2px solid var(--ap-4);outline-offset:2px;}
.js .pr-paneel[data-uit]{display:none;}
.pr-paneel + .pr-paneel{margin-top:28px;}
.js .pr-paneel + .pr-paneel{margin-top:0;}
.pr-paneel{animation:paneel .5s var(--ease) both;}
@keyframes paneel{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.pr-bedrag em{font-style:normal;font-family:var(--f-tekst);font-weight:500;font-size:12.5px;letter-spacing:0;color:var(--ink-3);margin-top:6px;}
.pr-bedrag--tekst{font-size:clamp(20px,1.7vw,24px);}

/* ============ 6 · KENNISMAKEN ============ */
.contact{position:relative;overflow:hidden;text-align:center;padding:clamp(130px,13vw,190px) 0 clamp(110px,11vw,160px);}
.contact-golf{position:absolute;left:0;right:0;top:-1px;z-index:3;line-height:0;transform:scale(-1,-1);}
.contact-golf svg{display:block;width:100%;height:110px;}
.contact .hero-boog-1{right:auto;left:max(-360px,-50vw);bottom:-520px;}
.contact .hero-boog-2{right:auto;left:max(-480px,-64vw);bottom:-650px;}
.contact-in{max-width:900px;}
.contact .lead{margin:28px auto 40px;color:#3D3539;}
.contact-knoppen{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.contact-direct{margin:36px 0 0;font-size:15.5px;color:#4E4549;}
.contact-direct a{color:var(--ink);font-weight:620;text-decoration:none;border-bottom:1px solid rgba(33,29,32,0.25);transition:border-color .3s ease;}
.contact-direct a:hover{border-color:var(--ink);}
.contact-regio{margin:14px auto 0;max-width:56ch;font-size:14px;line-height:1.55;color:#5E5458;text-wrap:balance;}

/* Footer: compact, in de nacht-tint, schuift als een vel over het abrikoos */
.df{background:var(--nacht);}
.df-wrap{padding-top:68px;}
.df-kop{font-family:var(--f-label) !important;letter-spacing:0.14em;color:var(--ap-3) !important;}
.df-tekst,.df-menu a{font-family:var(--f-tekst);}
.df-grid > div:nth-child(2) .df-menu{display:grid;grid-template-columns:repeat(2,max-content);gap:11px 40px;}
.df-onder a:hover{color:var(--ap-3);}
@media (max-width:560px){
  footer.df .df-wrap{padding:52px 22px 26px;}
  footer.df .df-grid{gap:30px;}
  footer.df .df-grid > div:nth-child(2) .df-menu,footer.df .df-grid > div:nth-child(3) .df-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 20px;}
  footer.df .df-menu a{font-size:15px;}
  footer.df .df-kop{margin-bottom:14px;}
  footer.df .df-onder{flex-direction:column;align-items:flex-start;gap:8px;margin-top:34px;}
  footer.df .df-bedrijf,footer.df .df-credit{text-align:left;}
}

/* ---------- Tablet ---------- */
@media (min-width:1025px){
  .js .dd{min-height:500px;}
  .js .dd-lijst{width:42%;}
  .js .dd-preview{position:absolute;top:0;right:0;width:53%;height:100%;aspect-ratio:auto;margin:0;opacity:0;transform:translateY(18px) scale(0.985);transition:opacity .45s ease,transform .8s var(--ease);}
  .js .dd-item.aan .dd-preview{opacity:1;transform:none;transition-delay:.06s;}
  .dd-teken{transform:rotate(-90deg);opacity:0;}
  .dd-item.aan .dd-teken,.dd-knop:hover .dd-teken{opacity:1;}
  .dd-item.aan .dd-naam{transform:translateX(4px);}
}
@media (max-width:1024px){
  .dd-kop,.waarom-grid,.prijs-grid{grid-template-columns:1fr;gap:28px;}
  .dd-item.aan .dd-teken{transform:rotate(180deg);}
  .dd-uitleg,.dd-link{margin-left:0;}
  .dd-preview{max-width:620px;}
  .dd-preview--web{aspect-ratio:1/1;}
  .waarom-beeld{order:2;max-width:520px;}
  .waarom-beeld::before{inset:-6% -12% 0 -12%;}
  .podium-voet{margin-top:-8%;padding-top:90px;}
}
/* ---------- Mobiel ---------- */
@media (max-width:760px){
  .podium-beeld{width:128%;margin-left:7%;}
  .podium-voet{margin-top:-10%;padding-top:80px;}
}
@media (max-width:640px){
  .w{padding:0 20px;}
  .hero-in{padding-top:28px;padding-bottom:130px;}
  .hero-kop{font-size:clamp(38px,10.4vw,48px);margin-bottom:26px;}
  .hero-knoppen .knop{width:100%;}
  .hero-feiten{flex-direction:column;align-items:flex-start;gap:8px;}
  .hero-feiten i{display:none;}
  .dd-knop{grid-template-columns:minmax(0,1fr) 20px;padding:16px 0;}
  .concept-balk{left:10px;right:10px;bottom:10px;font-size:12px;padding:8px 12px;gap:6px;}
  .dd-kop{margin-bottom:36px;}
  .pv-b2{width:92%;left:14%;}
  .pv-b1{width:84%;left:5%;top:36%;}
  .pv-noot{left:16px;bottom:12px;font-size:12px;}
  .pv-koppel{padding:0 5%;bottom:50px;}
  .kp-node{border-radius:16px;font-size:12px;gap:6px;}
  .kp-node svg{width:20px;height:20px;}
  .pv-paneel{left:7%;right:7%;padding:14px 12px 12px;}
  .pp-rij{padding:9px 11px;font-size:14px;margin-top:6px;}
  .pv-status{left:auto;right:6%;top:18%;padding:9px 11px;font-size:10px;}
  .podium-kop{padding:0 22px;}
  .podium-voet{padding-left:22px;padding-right:22px;}
  .voordelen li{grid-template-columns:1fr;gap:6px;}
  .waarom-beeld{padding-right:24px;}
  .map{padding:22px 20px 18px;}
  .pr{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;padding:22px 18px;}
  .pr-pijl{display:none;}
  .pr-naam{flex-wrap:wrap;gap:4px 12px;}
  .pr-onder{padding:0 18px;}
  .contact-knoppen .knop{width:100%;}
  .js .pr-wissel{display:flex;}
  .pr-wissel button{flex:1;text-align:center;white-space:nowrap;}
}
@media (prefers-reduced-motion:reduce){
  .hero .hr,.hero-tekst,.hero-knoppen,.hero-feiten,.hero-licht{animation:none;}
  .js .r,.js .waarom-beeld .map-rij,.js .waarom-beeld .map-voet{opacity:1;transform:none;transition:none;}
  .knop,.pr,.pr::before,.dd-naam,.dd-teken{transition:none;}
  .js .dd-paneel,.js .dd-preview{transition:none;}
  .kp-lijn i{animation:none;left:calc(50% - 5px);}
  .pr-paneel{animation:none;}
}

/* Conceptbalk (niet voor de live site) */
.concept-balk{position:fixed;left:16px;bottom:16px;z-index:9999;display:flex;gap:10px;background:var(--nacht);color:#F3E2D2;font-family:var(--f-kop);font-weight:560;font-size:14px;padding:10px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.3);}
.concept-balk a{color:var(--ap-3);}

/* ============ PROJECTEN ============ */
.kop-s{font-family:var(--f-kop);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-0.015em;color:var(--ink);margin:0;text-wrap:balance;}
.pj-kop{position:relative;overflow:hidden;margin-top:-90px;padding:calc(90px + clamp(64px,8vw,112px)) 0 clamp(130px,13vw,180px);}
.pj-kop h1{font-family:var(--f-kop);font-weight:600;font-size:clamp(40px,6vw,88px);line-height:0.98;letter-spacing:-0.035em;color:var(--ink);margin:0 0 24px;}
.pj-kop .lead{color:#3D3539;max-width:46ch;}
.pj-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:34px;font-family:var(--f-kop);font-weight:600;font-size:15px;}
.pj-nav a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid rgba(33,29,32,0.2);padding-bottom:3px;transition:border-color .3s ease;}
.pj-nav a:hover{border-color:var(--ink);}
.pj-nav i{display:block;width:1px;height:14px;background:rgba(33,29,32,0.25);}
.pj-sec-kop{margin-bottom:clamp(44px,5vw,64px);}
.pj-sec-kop .lead{margin-top:14px;}
.pj-sys{padding-top:clamp(56px,7vw,96px);background:radial-gradient(40% 30% at 100% 30%,rgba(246,167,123,0.22) 0%,rgba(246,167,123,0) 70%),var(--ap-0);}
.pj{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:clamp(40px,6vw,88px);align-items:center;}
.pj + .pj{margin-top:clamp(80px,9vw,128px);}
.pj--om{grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);}
.pj--om .pj-tekst{order:2;}
.pj-tekst > p:not(.label){margin:16px 0 0;font-size:16px;line-height:1.65;max-width:42ch;}
.pj-meer{margin:24px 0 26px;border-top:1px solid var(--lijn-2);border-bottom:1px solid var(--lijn-2);}
.pj-meer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:14px 0;font-family:var(--f-kop);font-weight:600;font-size:15px;color:var(--ink);}
.pj-meer summary::-webkit-details-marker{display:none;}
.pj-meer summary::after{content:"";width:18px;height:18px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211D20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s var(--ease);}
.pj-meer[open] summary::after{transform:rotate(180deg);}
.pj-meer ul{list-style:none;margin:0 0 12px;padding:0;}
.pj-meer li{padding:10px 0;border-top:1px solid var(--lijn);font-size:14.5px;line-height:1.55;color:var(--ink-2);}
.pj-beeld{margin:0;}
.pj-podium{position:relative;aspect-ratio:16/11;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;background:
  radial-gradient(70% 60% at 88% 8%, rgba(241,123,67,0.36) 0%, rgba(241,123,67,0) 70%),
  radial-gradient(60% 60% at 8% 100%, rgba(250,195,160,0.95) 0%, rgba(250,195,160,0) 70%),
  linear-gradient(160deg,#FFEEE2 0%,#FFE0C7 55%,#FAC3A0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 40px 80px -46px rgba(120,46,20,0.5);}
.pj-podium--nacht{background:
  radial-gradient(70% 60% at 90% 0%, rgba(241,123,67,0.30) 0%, rgba(241,123,67,0) 70%),
  radial-gradient(60% 50% at 0% 100%, rgba(246,167,123,0.12) 0%, rgba(246,167,123,0) 70%),
  linear-gradient(160deg,var(--nacht-2) 0%,var(--nacht) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 40px 80px -40px rgba(33,29,32,0.6);}
.pj-podium img{position:absolute;left:8%;top:16%;width:132%;max-width:none;height:auto;transition:opacity .5s ease,transform .7s var(--ease);}
.pj-podium .pj-beeld-2{opacity:0;transform:translateY(10px);}
.pj-podium.toon-2 .pj-beeld-1{opacity:0;transform:translateY(-10px);}
.pj-podium.toon-2 .pj-beeld-2{opacity:1;transform:none;}
.pj-noot{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3);}
.pj-wissel{position:absolute;left:16px;top:16px;z-index:3;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(33,29,32,0.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);}
.pj-wissel button{all:unset;cursor:pointer;font-family:var(--f-kop);font-weight:600;font-size:13px;line-height:1;color:#D6CDCA;padding:9px 13px;border-radius:9px;transition:background .3s ease,color .3s ease;}
.pj-wissel button:hover{color:#fff;}
.pj-wissel button[aria-pressed="true"]{background:rgba(255,248,241,0.94);color:var(--ink);}
.pj-wissel button:focus-visible{outline:2px solid var(--ap-4);outline-offset:2px;}
.pj-maand{margin:clamp(64px,7vw,96px) 0 0;padding-top:24px;border-top:1px solid var(--lijn-2);font-size:15.5px;color:var(--ink-3);}
.pj-maand a{color:var(--ink);font-weight:600;text-decoration-color:var(--ap-3);text-underline-offset:4px;}
.pj-web{background:
  radial-gradient(40% 50% at 10% 50%, rgba(246,167,123,0.45) 0%, rgba(246,167,123,0) 70%),
  radial-gradient(40% 50% at 95% 30%, rgba(250,195,160,0.8) 0%, rgba(250,195,160,0) 70%),
  linear-gradient(180deg,var(--ap-0) 0%,#FFEBDC 25%,#FFE0C7 55%,#FFEBDC 82%,var(--ap-0) 100%);}
.lv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px);}
.lv{display:block;text-decoration:none;}
.lv-browser{display:block;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(33,29,32,0.5),0 0 0 1px rgba(33,29,32,0.06);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.lv:hover .lv-browser{transform:translateY(-4px);box-shadow:0 40px 70px -30px rgba(33,29,32,0.55),0 0 0 1px rgba(33,29,32,0.06);}
.lv-browser img{display:block;width:100%;height:auto;}
.lv-tekst{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:18px;}
.lv-tekst b{font-family:var(--f-kop);font-weight:600;font-size:18px;color:var(--ink);}
.lv-tekst small{font-size:14.5px;color:var(--ink-3);}
.lv-tekst em{margin-left:auto;font-style:normal;font-family:var(--f-kop);font-weight:600;font-size:14.5px;color:var(--ink);border-bottom:1.5px solid var(--lijn-2);padding-bottom:3px;transition:border-color .3s ease;}
.lv:hover .lv-tekst em{border-color:var(--ink);}
#voorbeelden{padding:var(--sec) 0 calc(var(--sec) * 0.7) !important;}
.vb-kop{text-align:center;}
.vb-sub{font-size:16px;color:var(--ink-3);margin:14px auto 0;max-width:520px;}
@media (max-width:1024px){
  .pj,.pj--om{grid-template-columns:1fr;gap:28px;}
  .pj--om .pj-tekst{order:0;}
  .pj-tekst > p:not(.label){max-width:56ch;}
}
@media (max-width:640px){
  .pj-nav{gap:8px 14px;font-size:14.5px;}
  .pj-podium{aspect-ratio:5/4;}
  .pj-podium img{width:150%;top:20%;}
  .pj-wissel{left:12px;top:12px;}
  .lv-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .pj-podium img,.lv-browser{transition:none;}
}

/* ============ WEBSITES ============ */
.nav-link.actief,.nav-panel-link.actief{position:relative;}
.nav-link.actief::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--ap-4);}
.nav-panel-link.actief{font-weight:600 !important;}
.kop-s{font-family:var(--f-kop);font-weight:600;font-size:clamp(21px,1.8vw,25px);line-height:1.15;letter-spacing:-0.015em;color:var(--ink);margin:0;text-wrap:balance;}
.s-kop{max-width:640px;margin-bottom:clamp(40px,5vw,60px);}
.s-kop .lead{margin-top:16px;}
.s-kop--midden{margin-left:auto;margin-right:auto;text-align:center;}
.s-kop--midden .lead{margin-left:auto;margin-right:auto;}
.band{background:
  radial-gradient(40% 50% at 8% 50%, rgba(246,167,123,0.42) 0%, rgba(246,167,123,0) 70%),
  radial-gradient(40% 50% at 96% 30%, rgba(250,195,160,0.8) 0%, rgba(250,195,160,0) 70%),
  linear-gradient(180deg,var(--ap-0) 0%,#FFEBDC 22%,#FFE0C7 52%,#FFEBDC 80%,var(--ap-0) 100%);}
/* kop */
.ws-kop{position:relative;overflow:hidden;margin-top:-90px;padding:calc(90px + clamp(64px,8vw,112px)) 0 clamp(140px,13vw,190px);}
.ws-kop h1{font-family:var(--f-kop);font-weight:600;font-size:clamp(40px,6vw,86px);line-height:0.98;letter-spacing:-0.035em;color:var(--ink);margin:0 0 26px;max-width:12ch;}
.ws-kop .lead{color:#3D3539;max-width:48ch;}
.ws-kop .hero-knoppen{margin:30px 0 36px;}
.ws-kop .hero-feiten{gap:10px 16px;font-size:14.5px;}
.ws-kop-grid{display:block;}

/* huren of bezitten */
.hb{display:grid;grid-template-columns:1fr 1fr;}
.hb-kol{padding:4px 0;}
.hb-kol:first-child{padding-right:clamp(28px,4vw,56px);}
.hb-kol + .hb-kol{padding-left:clamp(28px,4vw,56px);border-left:1px solid var(--lijn-2);}
.hb-kol h3{margin:0 0 12px;font-family:var(--f-kop);font-weight:500;font-size:19px;color:var(--ink);}
.hb-kol ul{list-style:none;margin:0;padding:0;}
.hb-kol li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:15.5px;line-height:1.5;}
.hb-kol li svg{flex-shrink:0;width:16px;height:16px;margin-top:3px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hb-huur{color:var(--ink-3);}
.hb-huur h3{color:var(--ink-3);}
.hb-huur li svg{stroke:#BDB3B6;}
.hb-bezit{color:var(--ink);}
.hb-bezit li svg{stroke:var(--koraal-tekst);}
/* inbegrepen */
.ib{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,56px);border-top:1px solid var(--lijn-2);}
.ib div{padding:22px 0;border-bottom:1px solid var(--lijn-2);}
.ib h3{margin:0 0 6px;font-family:var(--f-kop);font-weight:500;font-size:17.5px;color:var(--ink);}
.ib p{margin:0;font-size:15px;line-height:1.6;max-width:44ch;}
.ib-onder{margin-top:34px;}
/* beheer */
.bh-grid{display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);gap:clamp(40px,6vw,88px);align-items:start;}
.bh-zinnen{display:grid;gap:10px;margin:24px 0 40px;}
.bh-zinnen p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:52ch;}
.bh-zinnen b{font-weight:600;color:var(--ink);}
.mods{border-top:1px solid var(--lijn-2);margin-top:18px;}
.mod{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center;padding:15px 4px;border-bottom:1px solid var(--lijn-2);cursor:pointer;}
.mod:focus-visible{outline:2px solid var(--ap-4);outline-offset:2px;border-radius:8px;}
.mod-naam{font-family:var(--f-kop);font-weight:500;font-size:17px;color:var(--ink);}
.mod-naam small{margin-left:10px;font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);}
.mod-uitleg{grid-column:1;font-size:14.5px;line-height:1.5;color:var(--ink-2);}
.mod-vink{grid-column:2;grid-row:1 / span 2;position:relative;width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(33,29,32,0.28);box-sizing:border-box;transition:background .25s ease,border-color .25s ease;}
.mod-vink::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease);}
.mod[aria-pressed="true"] .mod-vink,.mod--vast .mod-vink{background:var(--ink);border-color:var(--ink);}
.mod[aria-pressed="true"] .mod-vink::after,.mod--vast .mod-vink::after{transform:rotate(45deg) scale(1);}
.mod--vast{cursor:default;}
.mod--vast .mod-vink{opacity:0.4;}
.mods-noot{margin:18px 0 26px;font-size:14.5px;line-height:1.6;color:var(--ink-3);}
.bh-beeld{position:sticky;top:120px;}
.bh-app{position:relative;border-radius:22px;overflow:hidden;padding-bottom:12px;font-family:var(--f-tekst);background:radial-gradient(90% 50% at 100% 0%,rgba(241,123,67,0.15),rgba(241,123,67,0) 60%),linear-gradient(170deg,#2D282B 0%,#1A1719 100%);border:1px solid rgba(255,255,255,0.07);box-shadow:0 50px 90px -40px rgba(33,29,32,0.65),inset 0 1px 0 rgba(255,255,255,0.05);}
.bh-app-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.06);}
.bh-app-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.13);}
.bh-app-bar span{margin-left:12px;font-size:12px;color:#857B7F;}
.bh-app-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:20px 22px 2px;}
.bh-merk{display:flex;align-items:center;gap:12px;}
.bh-merk svg{display:block;height:21px !important;width:auto;}
.bh-merk span{padding-left:12px;border-left:1px solid rgba(255,255,255,0.16);font-family:var(--f-kop);font-weight:500;font-size:17px;line-height:1;color:#E6DFDC;}
.bh-app-kop em{font-style:normal;font-size:12.5px;color:#857B7F;}
.bh-groep{margin:18px 22px 6px;font-family:var(--f-label);font-weight:600;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#7C7176;}
.bh-rij{display:flex;align-items:center;gap:14px;margin:0 12px;padding:9px 10px;border-radius:12px;font-size:15px;color:#EFE9E6;transition:background .25s ease;}
.bh-rij:hover{background:rgba(255,255,255,0.04);}
.bh-ik{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,0.055);}
.bh-ik svg{width:17px;height:17px;fill:none;stroke:#D3CACC;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.bh-naam{margin-right:auto;}
.bh-rij em{font-style:normal;font-size:12.5px;color:#857B7F;}
.bh-rij--mod .bh-ik{background:rgba(241,123,67,0.18);}
.bh-rij--mod .bh-ik svg{stroke:var(--ap-3);}
.bh-rij--mod em{color:var(--ap-3);}
.js .bh-rij--mod{display:none;}
.js .bh-rij--mod.aan{display:flex;animation:paneel .45s var(--ease) both;}
.bh-leeg{margin:4px 22px 6px;font-size:13.5px;color:#7C7176;}
.bh-app:has(.bh-rij--mod.aan) .bh-leeg{display:none;}
.bh-paneel-noot{margin:14px 4px 0;font-size:12.5px;color:var(--ink-3);}
/* eigendomsmap */
.em-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,88px);align-items:center;}
.em-grid .lead{margin:18px 0 28px;}
/* werkwijze */
.ww{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn-2);}
.ww::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease) .2s;}
.ww.in::after{transform:scaleX(1);}
.ww li{padding-top:22px;}
.ww-nr{display:block;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.08em;color:var(--ink-3);margin-bottom:10px;}
.ww h3{margin:0 0 6px;font-family:var(--f-kop);font-weight:500;font-size:17px;color:var(--ink);}
.ww p{margin:0;font-size:14.5px;line-height:1.55;}
.ww-onder{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px 40px;margin-top:44px;padding-top:24px;border-top:1px solid var(--lijn-2);font-family:var(--f-kop);font-weight:500;font-size:17px;color:var(--ink);}
/* gemaakt */
.lv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px);}
.lv{display:block;text-decoration:none;}
.lv-browser{display:block;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(33,29,32,0.5),0 0 0 1px rgba(33,29,32,0.06);transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.lv:hover .lv-browser{transform:translateY(-4px);}
.lv-browser img{display:block;width:100%;height:auto;}
.lv-tekst{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:18px;}
.lv-tekst b{font-family:var(--f-kop);font-weight:600;font-size:18px;color:var(--ink);}
.lv-tekst small{font-size:14.5px;color:var(--ink-3);}
.lv-tekst em{margin-left:auto;font-style:normal;font-family:var(--f-kop);font-weight:600;font-size:14.5px;color:var(--ink);border-bottom:1.5px solid var(--lijn-2);padding-bottom:3px;}
.gm-onder{margin-top:40px;}
.gm-kop{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px 48px;max-width:980px;margin-bottom:clamp(36px,4vw,52px);}
.gm-kop .lead{margin-top:14px;}
.gm-werk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.5vw,32px);max-width:980px;}
.gm-item{display:block;text-decoration:none;}
.gm-foto{display:block;}
.gm-foto img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 18px 36px -22px rgba(33,29,32,0.55),0 0 0 1px rgba(33,29,32,0.06);transition:transform .6s var(--ease),box-shadow .6s var(--ease);}
.gm-item:hover .gm-foto img{transform:translateY(-3px);box-shadow:0 26px 44px -24px rgba(33,29,32,0.6),0 0 0 1px rgba(33,29,32,0.06);}
.gm-tekst{display:flex;align-items:baseline;gap:12px;padding:14px 4px 0;}
.gm-tekst b{font-family:var(--f-kop);font-weight:500;font-size:17.5px;color:var(--ink);}
.gm-tekst small{font-size:14.5px;color:var(--ink-3);}
.gm-tekst i{margin-left:auto;font-style:normal;font-size:17px;color:var(--ink);transition:transform .35s var(--ease);}
.gm-item:hover .gm-tekst i{transform:translate(3px,-3px);}
/* pakketten */
.pk-wrap{max-width:900px;margin:0 auto;}
.pk-wissel-rij{display:flex;justify-content:center;margin-bottom:24px;}
.pk2-lijst{border-top:1px solid var(--lijn-2);border-bottom:1px solid var(--lijn-2);padding:8px 0;}
.pk2{padding:22px 24px;border-radius:var(--r-l);}
.pk2 + .pk2{border-top:1px solid var(--lijn);}
.pk2--aanrader{background:radial-gradient(80% 100% at 100% 0%,rgba(241,123,67,0.30) 0%,rgba(241,123,67,0) 70%),linear-gradient(120deg,#FFEDE0 0%,#FFE0C7 55%,#FAC3A0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);}
.pk2--aanrader,.pk2--aanrader + .pk2{border-top-color:transparent;}
.pk2-top{display:grid;grid-template-columns:minmax(0,1fr) auto 168px;gap:28px;align-items:center;}
.pk2-naam{margin:0;display:flex;align-items:center;gap:12px;font-family:var(--f-label);font-weight:600;font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);}
.pk2-naam small{font-size:10.5px;letter-spacing:0.12em;color:var(--koraal-tekst);}
.pk2-voor{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-2);}
.pk2-bedrag{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--f-kop);font-weight:600;font-size:clamp(28px,2.6vw,36px);line-height:1;letter-spacing:-0.02em;color:var(--ink);white-space:nowrap;}
.pk2-bedrag small{font-family:var(--f-tekst);font-weight:500;font-size:12.5px;letter-spacing:0;color:var(--ink-3);margin-bottom:6px;}
.pk2-bedrag em{font-style:normal;font-family:var(--f-tekst);font-weight:500;font-size:12px;letter-spacing:0;color:var(--ink-3);margin-top:6px;}
.pk2-bedrag--tekst{font-size:clamp(20px,1.8vw,24px);}
.pk2 .knop{width:100%;padding:13px 18px;font-size:14.5px;}
.pk2-meer{margin-top:10px;}
.pk2-meer summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0;font-family:var(--f-kop);font-weight:500;font-size:14.5px;color:var(--ink-2);}
.pk2-meer summary::-webkit-details-marker{display:none;}
.pk2-meer summary::after{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211D20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s var(--ease);}
.pk2-meer[open] summary::after{transform:rotate(180deg);}
.pk2-meer ul{list-style:none;margin:10px 0 4px;padding:0;columns:2;column-gap:32px;}
.pk2-meer li{break-inside:avoid;position:relative;padding:7px 0 7px 22px;font-size:14.5px;line-height:1.5;color:var(--ink-2);}
.pk2-meer li::before{content:"";position:absolute;left:2px;top:13px;width:10px;height:5px;border-left:1.6px solid var(--koraal-tekst);border-bottom:1.6px solid var(--koraal-tekst);transform:rotate(-45deg);}
.pk-usps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;list-style:none;margin:36px 0 0;padding:0;font-family:var(--f-kop);font-weight:500;font-size:15.5px;color:var(--ink);}
.pk-usps li{display:flex;align-items:center;gap:22px;}
.pk-usps li + li::before{content:"";width:1px;height:15px;background:var(--lijn-2);}
.pk-meer-nodig{max-width:680px;margin:48px auto 0;padding-top:28px;border-top:1px solid var(--lijn-2);text-align:center;}
.pk-meer-nodig h3{margin:0 0 10px;font-family:var(--f-kop);font-weight:600;font-size:21px;color:var(--ink);}
.pk-meer-nodig p{margin:0 0 18px;font-size:15.5px;line-height:1.62;}
.pk-klein{margin:26px 0 0;text-align:center;font-size:13.5px;color:var(--ink-3);}
/* vragen */
.faq-grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:clamp(40px,6vw,88px);align-items:start;}
.faq-kop{position:sticky;top:120px;}
.faq-kop .lead{margin-top:18px;}
.faq-kop .lead a{color:var(--ink);font-weight:600;text-decoration-color:var(--ap-3);text-underline-offset:4px;}
.faq-lijst{border-top:1px solid var(--lijn-2);}
.faq{border-bottom:1px solid var(--lijn-2);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary h3{margin:0;font-family:var(--f-kop);font-weight:500;font-size:clamp(17px,1.4vw,19px);line-height:1.35;color:var(--ink);transition:color .25s ease;}
.faq summary:hover h3{color:var(--koraal-tekst);}
.faq-plus{position:relative;width:32px;height:32px;flex-shrink:0;border-radius:10px;border:1px solid var(--lijn-2);transition:background .3s ease,border-color .3s ease;}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);}
.faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease);}
.faq[open] .faq-plus{background:var(--ap-1);border-color:var(--ap-1);}
.faq[open] .faq-plus::after{transform:translate(-50%,-50%) rotate(0deg);}
.faq p{margin:0;padding:0 56px 24px 0;font-size:15.5px;line-height:1.7;}
/* contact met formulier */
.ws-contact{position:relative;overflow:hidden;padding:clamp(140px,13vw,190px) 0 clamp(110px,11vw,160px);}
.ws-contact .contact-golf{position:absolute;left:0;right:0;top:-1px;z-index:3;line-height:0;transform:scale(-1,-1);}
.ws-contact .contact-golf svg{display:block;width:100%;height:110px;}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:start;}
.ct-grid .lead{margin:22px 0 0;color:#3D3539;}
.ct-direct{margin:30px 0 0;padding-top:22px;border-top:1px solid rgba(33,29,32,0.16);font-size:15.5px;color:#4E4549;}
.ct-direct a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(33,29,32,0.25);}
.ct-form{border-radius:var(--r-xl);padding:34px;display:flex;flex-direction:column;gap:14px;}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.veld{display:flex;flex-direction:column;gap:7px;position:relative;}
.veld label{font-family:var(--f-kop);font-weight:500;font-size:13.5px;color:var(--ink);}
.veld input,.veld select,.veld textarea{width:100%;box-sizing:border-box;font-family:var(--f-tekst);font-size:16px;color:var(--ink);background:rgba(255,255,255,0.7);border:1px solid rgba(33,29,32,0.14);border-radius:var(--r-s);padding:13px 15px;outline:none;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;}
.veld input::placeholder,.veld textarea::placeholder{color:#9A8F93;}
.veld input:focus,.veld select:focus,.veld textarea:focus{background:#fff;border-color:var(--ap-4);box-shadow:0 0 0 4px rgba(241,123,67,0.18);}
.veld select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211D20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;cursor:pointer;}
.veld textarea{resize:vertical;min-height:104px;}
.ct-form .knop{margin-top:4px;}
.ct-noot{margin:0;font-size:13.5px;color:var(--ink-2);text-align:center;}
.ct-klein{margin:0;font-size:12px;line-height:1.55;color:var(--ink-3);text-align:center;}
.ct-klein a{color:inherit;}
@media (max-width:1024px){
  .bh-grid,.em-grid,.faq-grid,.ct-grid,.ws-kop-grid{grid-template-columns:1fr;}

  .bh-beeld,.faq-kop{position:static;}
  .bh-beeld{max-width:560px;}
  .ww{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ww::after{display:none;}
  .ib{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .hb,.ib,.lv-grid,.gm-werk{grid-template-columns:1fr;}
  .gm-werk{gap:32px;}
  .hb-kol:first-child{padding-right:0;}
  .hb-kol + .hb-kol{padding-left:0;border-left:none;border-top:1px solid var(--lijn-2);margin-top:18px;padding-top:22px;}
  .pk2{padding:20px 16px;}

  .pk2-top{grid-template-columns:minmax(0,1fr) auto;gap:14px 18px;}
  .pk2-top .knop{grid-column:1 / -1;}
  .pk2-meer ul{columns:1;}
  .ib{gap:0;}
  .ww{grid-template-columns:1fr;gap:0;}
  .ww li{padding:18px 0;border-bottom:1px solid var(--lijn);}
  .pk-usps{flex-direction:column;align-items:center;gap:8px;}
  .pk-usps li + li::before{display:none;}
  .faq p{padding-right:0;}
  .ct-form{padding:24px 18px;}
  .veld-rij{grid-template-columns:1fr;}
  .ct-form .knop,.ws-kop .hero-knoppen .knop{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .ww::after{transition:none;transform:scaleX(1);}
  .mod-vink,.mod-vink::after,.lv-browser,.gm-foto img,.gm-tekst i{transition:none;}
  .js .bh-rij--mod.aan{animation:none;}
}

/* ============ WERKWIJZE, OVER DATO, BLOG EN TEKSTPAGINA'S ============ */
.ws-kop--ww h1{max-width:none;}
.ws-kop--od h1{max-width:15ch;font-size:clamp(38px,5.2vw,74px);}
.ib--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.ib .tlink{margin-top:16px;}
.ib-sec{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(8px,2vw,24px);}
.ib--links > div{display:flex;flex-direction:column;align-items:flex-start;}
.ib--links p{margin-bottom:18px;}
.ib--links .tlink{margin-top:auto;}

/* Werkwijze: de zes stappen, links de stap, rechts wat jij en Dato doen */
.stap-nr{display:inline-block;min-width:40px;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.08em;color:var(--ink-3);vertical-align:0.2em;}
.dd-preview--stap{aspect-ratio:auto;display:flex;align-items:center;padding:clamp(18px,3vw,44px);}
.stap-kaart{width:100%;border-radius:var(--r-l);padding:clamp(22px,2.6vw,32px);}
.stap-jd{display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(20px,2.4vw,32px);}
.stap-wie{margin:0 0 10px;font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);}
.stap-jd ul{list-style:none;margin:0;padding:0;}
.stap-jd li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--lijn);font-size:14.5px;line-height:1.5;color:var(--ink);}
.stap-jd li svg{flex-shrink:0;width:15px;height:15px;margin-top:3px;fill:none;stroke:var(--koraal-tekst);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.stap-res{margin:20px 0 0;padding-top:16px;border-top:1px dashed var(--lijn-2);font-family:var(--f-kop);font-weight:600;font-size:16px;line-height:1.35;color:var(--koraal-tekst);}
.stap-res span{display:block;margin-bottom:4px;font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);}
.stap-onder{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px 40px;margin-top:44px;padding-top:24px;border-top:1px solid var(--lijn-2);font-family:var(--f-kop);font-weight:500;font-size:17px;color:var(--ink);}

/* Over Dato */
.od-feit{margin:18px 0 0;font-size:15.5px;line-height:1.65;max-width:52ch;}
.od-feit + .tlink{margin-top:26px;}
.citaat{margin:0 auto;max-width:880px;text-align:center;}
.citaat-teken{display:block;height:58px;font-family:var(--f-kop);font-weight:600;font-size:96px;line-height:1;color:var(--ap-4);}
.citaat blockquote{margin:0;font-family:var(--f-kop);font-weight:500;font-size:clamp(24px,2.7vw,38px);line-height:1.24;letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;}
.citaat figcaption{margin-top:28px;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);}
.ct-regio{margin:14px 0 0;font-size:14px;line-height:1.55;color:#5E5458;max-width:46ch;}

/* Kop van blog en tekstpagina's: dezelfde abrikoos, compacter */
.tk-kop{position:relative;overflow:hidden;margin-top:-90px;padding:calc(90px + clamp(56px,7vw,100px)) 0 clamp(120px,11vw,168px);}
.tk-kop .w{max-width:784px;}
.tk-kop--blog .w{max-width:1120px;}
.tk-kop .label a{color:inherit;text-decoration:none;}
.tk-kop .label a:hover{color:var(--ink);}
.tk-kop h1{font-family:var(--f-kop);font-weight:600;font-size:clamp(32px,3.9vw,50px);line-height:1.04;letter-spacing:-0.03em;color:var(--ink);margin:0;max-width:22ch;text-wrap:balance;}
.tk-kop--blog h1{font-size:clamp(40px,5.6vw,80px);line-height:0.98;letter-spacing:-0.035em;max-width:12ch;}
.tk-kop .lead{margin-top:24px;color:#3D3539;}
.tk-meta{margin:22px 0 0;font-size:15px;color:#4E4549;}

/* Leesbare kolom voor artikelen en juridische teksten */
.lees{max-width:784px;padding-top:clamp(40px,5vw,72px);padding-bottom:var(--sec);}
.lees > p,.lees li{font-size:17.5px;line-height:1.75;color:var(--ink-2);text-wrap:pretty;}
.lees p{margin:0 0 22px;}
.lees h2{margin:52px 0 16px;font-family:var(--f-kop);font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-0.015em;color:var(--ink);text-wrap:balance;}
.lees > h2:first-child{margin-top:0;}
.lees ul,.lees ol{list-style:none;margin:0 0 26px;padding:0;}
.lees li{position:relative;margin:0 0 10px;padding-left:30px;}
.lees ul li::before{content:"";position:absolute;left:7px;top:0.72em;width:7px;height:7px;border-radius:50%;background:var(--ap-4);}
.lees ol{counter-reset:stap;}
.lees ol li{counter-increment:stap;}
.lees ol li::before{content:counter(stap);position:absolute;left:0;top:0.22em;width:22px;height:22px;border-radius:7px;background:var(--ap-1);font-family:var(--f-kop);font-weight:600;font-size:12.5px;line-height:22px;text-align:center;color:var(--koraal-tekst);}
.lees a{color:var(--ink);text-decoration-color:var(--ap-3);text-underline-offset:3px;}
.lees a:hover{text-decoration-color:var(--ink);}
.lees strong{color:var(--ink);font-weight:650;}
.bronnen{margin-top:56px;padding-top:28px;border-top:1px solid var(--lijn-2);}
.lees .bronnen h2{margin:0 0 16px;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);}
.lees .bronnen li{font-size:14.5px;line-height:1.55;padding-left:22px;}
.lees .bronnen li::before{left:4px;width:5px;height:5px;background:var(--ap-3);}
.lees .bronnen a{color:var(--ink-2);}
.artikel-cta{margin-top:56px;padding:clamp(28px,4vw,44px);border-radius:var(--r-l);background:
  radial-gradient(60% 80% at 100% 0%, rgba(241,123,67,0.22) 0%, rgba(241,123,67,0) 70%),
  linear-gradient(160deg,#FFEEE2 0%,#FFE0C7 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);}
.lees .artikel-cta h2{margin:0 0 10px;}
.artikel-cta p{margin:0 0 24px;font-size:16px;line-height:1.65;color:#3D3539;max-width:52ch;}
.artikel-cta .knop{color:#fff;text-decoration:none;}
.lees .terug{display:inline-flex;align-items:center;gap:10px;margin-top:40px;font-family:var(--f-kop);font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;padding-bottom:5px;border-bottom:1.5px solid var(--lijn-2);transition:border-color .3s ease;}
.lees .terug:hover{border-color:var(--ink);}
.blokje{margin-top:40px;padding:24px 28px;border-radius:var(--r-m);background:#FFF1E6;border:1px solid var(--lijn);}
.lees .blokje p{margin:0;font-size:16px;line-height:1.75;}

/* Blogoverzicht */
.bl-sec{padding-top:clamp(48px,6vw,88px);}
.bl{border-top:1px solid var(--lijn-2);}
.bl-rij{display:grid;grid-template-columns:180px minmax(0,1fr) 38px;gap:10px clamp(24px,4vw,56px);align-items:start;padding:30px 0;border-bottom:1px solid var(--lijn-2);color:inherit;text-decoration:none;}
.bl-rij time{padding-top:6px;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);}
.bl-rij h2{margin:0 0 8px;font-family:var(--f-kop);font-weight:500;font-size:clamp(20px,1.8vw,24px);line-height:1.25;letter-spacing:-0.01em;color:var(--ink);text-wrap:balance;transition:color .25s ease;}
.bl-rij p{margin:0;font-size:15.5px;line-height:1.6;max-width:64ch;}
.bl-pijl{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--lijn-2);font-family:var(--f-kop);font-weight:600;color:var(--ink);transition:background .3s ease,color .3s ease,border-color .3s ease,transform .35s var(--ease);}
.bl-rij:hover h2{color:var(--koraal-tekst);}
.bl-rij:hover .bl-pijl{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateX(3px);}

@media (max-width:1024px){
  .ib--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .ib--4{grid-template-columns:1fr;}
  .stap-jd{grid-template-columns:1fr;}
  .dd-preview--stap{padding:14px;}
  .bl-rij{grid-template-columns:minmax(0,1fr) 38px;padding:24px 0;}
  .bl-rij time{grid-column:1 / -1;padding:0;}
  .lees > p,.lees li{font-size:16.5px;}
  .blokje{padding:20px;}
}

/* ============================================================
   DATO · APRICOT ORANGE × DARK INK
   Warm waar het kan, krachtig waar het moet.
   ============================================================ */
:root{
  --oranje:#F45731;            /* Bold Orange: accenten, nooit grote vlakken */
  --verloop:linear-gradient(125deg,#FFE0C7 0%,#F6A77B 50%,#F17B43 100%);
  --nacht-tekst:#CFC6C8; --nacht-zacht:#9A8F93; --lijn-nacht:rgba(255,255,255,0.12);
  --sh-diep:0 40px 90px -34px rgba(33,29,32,0.42);
}
body{color:var(--ink-2);}

/* ---------- De herkenbare gradient ---------- */
.abrikoos{background:
  radial-gradient(52% 72% at 4% 2%, rgba(255,248,241,0.92) 0%, rgba(255,248,241,0) 62%),
  radial-gradient(46% 62% at 100% 100%, rgba(244,87,49,0.40) 0%, rgba(244,87,49,0) 70%),
  var(--verloop);}
/* Rustige variant voor werkwijze, over Dato, blog en tekstpagina's */
.zacht{background:
  radial-gradient(58% 90% at 100% 0%, rgba(246,167,123,0.55) 0%, rgba(246,167,123,0) 70%),
  radial-gradient(44% 70% at 72% 100%, rgba(255,224,199,0.95) 0%, rgba(255,224,199,0) 70%),
  var(--ap-0);}
.tk-kop.zacht{padding-bottom:clamp(48px,5vw,80px);}
.zacht .hero-golf{display:none;}
.zacht .hero-boog-1{border-color:rgba(241,123,67,0.22);}
.zacht .hero-boog-2{border-color:rgba(241,123,67,0.12);}
/* Koppen in Dark Ink: geen oranje tekst op een oranje ondergrond */
.hero-acc{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;padding-bottom:0;margin-bottom:0;}
.acc{color:var(--koraal-tekst);}
.hero-tekst,.ws-kop .lead,.pj-kop .lead,.tk-kop .lead{color:#2F292C;}
.hero-feiten{color:#3D3539;}
.hero-feiten i{background:rgba(33,29,32,0.28);}
.label{color:var(--ink-3);}
.nav-link.actief::after{background:var(--oranje);}

/* ---------- Dark Ink: software, systemen en showcases ---------- */
.donker{position:relative;color:var(--nacht-tekst);background:
  radial-gradient(48% 42% at 88% 0%, rgba(244,87,49,0.15) 0%, rgba(244,87,49,0) 70%),
  radial-gradient(40% 40% at 0% 100%, rgba(246,167,123,0.07) 0%, rgba(246,167,123,0) 70%),
  var(--nacht);}
.donker .label{color:var(--ap-4);}
.donker h1,.donker h2,.donker h3,.donker .kop-xl,.donker .kop-l,.donker .kop-m,.donker .kop-s{color:#fff;}
.donker p,.donker .lead{color:var(--nacht-tekst);}
.donker .acc{color:var(--oranje);}
.donker .tlink{color:#fff;border-color:rgba(255,255,255,0.24);}
.donker .tlink:hover{border-color:#fff;}
.donker .knop{background:#FFF8F1;border-color:#FFF8F1;color:var(--ink);box-shadow:0 16px 34px -16px rgba(0,0,0,0.7);}
.donker .knop--glas,.donker .knop--rand{background:transparent;border-color:rgba(255,255,255,0.28);color:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.donker .knop--glas:hover,.donker .knop--rand:hover{border-color:#fff;background:rgba(255,255,255,0.05);}
.donker .pj-meer{border-color:var(--lijn-nacht);}
.donker .pj-meer summary{color:#fff;}
.donker .pj-meer summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
.donker .pj-meer li{border-color:var(--lijn-nacht);color:var(--nacht-tekst);}
.donker .pj-meer li.pj-noot-li{color:var(--nacht-zacht);}
.donker ::selection{background:var(--oranje);color:#fff;}

/* ---------- Homepage ---------- */
.dd-preview,.dd-preview--nacht{background:none;box-shadow:none;border-radius:0;overflow:visible;}
.dd-preview::before{content:"";position:absolute;inset:6% 4%;z-index:-1;background:radial-gradient(closest-side,rgba(246,167,123,0.42),rgba(255,224,199,0) 100%);}
.pv-img{left:0;top:50%;width:100%;transform:translateY(-50%);}
.pv-typo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 4% 0 8%;}
.pv-typo::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--lijn-2);}
.pv-status{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--koraal-tekst);}
.pv-status i{width:8px;height:8px;border-radius:50%;background:var(--oranje);box-shadow:0 0 0 6px rgba(244,87,49,0.14);}
.pv-groot{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(30px,3.2vw,46px);line-height:1.04;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance;}
.pv-klein{margin:20px 0 0;max-width:38ch;font-size:15px;line-height:1.6;color:var(--ink-2);}
/* Uitgelicht werk: een volle donkere band in plaats van een afgerond podium */
.werk{padding:0;background:none;}
.podium-rand{padding:0;}
.podium{max-width:none;border-radius:0;box-shadow:none;color:var(--nacht-tekst);background:
  radial-gradient(42% 34% at 50% 0%, rgba(244,87,49,0.24) 0%, rgba(244,87,49,0) 72%),
  radial-gradient(60% 40% at 50% 62%, rgba(246,167,123,0.10) 0%, rgba(246,167,123,0) 72%),
  var(--nacht);}
.podium .label--licht{color:var(--ap-4);}
.podium-kop .kop-l{color:#fff;}
.podium-kop p:not(.label){color:var(--nacht-tekst);}
.podium-beeld{width:min(960px,82%);}
.podium-voet{background:linear-gradient(180deg,rgba(33,29,32,0) 0%,rgba(33,29,32,0.86) 45%,var(--nacht) 75%);padding-bottom:clamp(48px,5vw,72px);}
.podium-noot{color:var(--nacht-zacht);}
.podium .meer{max-width:1120px;margin:30px auto 0;padding:26px 0 0;border-top:1px solid var(--lijn-nacht);}
.podium .meer p{color:var(--nacht-tekst);}
.podium .meer b{color:#fff;}
.waarom-grid--open{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;}
.waarom-grid--open .lead{margin:22px 0 30px;}
.waarom-grid--open .voordelen{margin-top:6px;}
.pr--aanrader::before{background:radial-gradient(80% 100% at 100% 0%,rgba(241,123,67,0.30) 0%,rgba(241,123,67,0) 70%),linear-gradient(120deg,#FFF1E6 0%,#FFE0C7 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);}

/* ---------- Homepage: Dato Wasstraat, ingezoomd en het beeld uit lopend ---------- */
.ws5{position:relative;overflow:hidden;min-height:calc(clamp(88px,8vw,120px) + clamp(1180px,82vw,1440px) * 0.4167 + clamp(110px,11vw,160px));padding:clamp(96px,10vw,140px) 0 0;background:
  radial-gradient(34% 52% at 74% 62%, rgba(244,87,49,0.22) 0%, rgba(244,87,49,0) 72%),
  radial-gradient(30% 40% at 96% 18%, rgba(246,167,123,0.10) 0%, rgba(246,167,123,0) 70%),
  var(--nacht);}
.ws5-w{position:relative;z-index:2;}
.ws5-tekst{max-width:min(440px,36vw);padding-bottom:clamp(72px,8vw,112px);}
.ws5-kop{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(42px,5.4vw,80px);line-height:0.95;letter-spacing:-0.04em;color:#fff;}
.ws5-lead{margin:24px 0 28px;font-size:16px;line-height:1.65;color:var(--nacht-tekst);}
.ws5-scherm.aan{opacity:1;}
.ws5-tabs{display:flex;gap:4px;margin:0 0 16px;padding:4px;width:max-content;max-width:100%;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);}
.ws5-tab{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;font-family:var(--f-kop);font-weight:500;font-size:14.5px;line-height:1.1;color:var(--nacht-tekst);white-space:nowrap;transition:background .25s ease,color .25s ease;}
.ws5-tab:hover{color:#fff;}
.ws5-tab[aria-selected="true"]{background:#fff;color:var(--ink);}
.ws5-tab:focus-visible{outline:2px solid var(--ap-4);outline-offset:2px;}
.ws5-panelen{display:grid;margin:0 0 26px;}
.ws5-paneel{grid-area:1 / 1;margin:0;font-size:15px;line-height:1.62;color:#fff;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;}
.ws5-paneel.aan{opacity:1;visibility:visible;transition:opacity .45s ease;}
.ws5-ook{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:30px 0 0;font-size:12.5px;color:var(--nacht-zacht);}
.ws5-ook a{color:var(--nacht-tekst);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.18);transition:color .25s ease,border-color .25s ease;}
.ws5-ook a:hover{color:#fff;border-color:#fff;}
.ws5-ook i{width:4px;height:4px;border-radius:50%;background:var(--oranje);}
.ws5-golf{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0;pointer-events:none;}
.ws5-golf svg{display:block;width:100%;height:clamp(70px,8vw,120px);}
/* Het echte dashboard: groot, rechts en onderaan het vlak uit, zonder omlijsting */
.ws5-beeld{position:absolute;z-index:1;left:max(calc(50% - 560px + min(440px,36vw) + clamp(48px,5vw,88px)),40%);top:clamp(88px,8vw,120px);width:clamp(1180px,82vw,1440px);margin:0;
  --p:1;transform:translate3d(calc((1 - var(--p)) * 56px),calc((1 - var(--p)) * 36px),0) scale(calc(0.95 + var(--p) * 0.05));transform-origin:0 0;}
.ws5-beeld{display:grid;}
.ws5-scherm{grid-area:1 / 1;display:block;width:100%;height:auto;opacity:0;transition:opacity .45s ease;border-radius:18px 0 0 18px;box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 40px 120px -30px rgba(244,87,49,0.28);}
@media (max-width:900px){
  .ws5{min-height:0;padding-top:clamp(80px,14vw,112px);}
  .ws5-tekst{max-width:none;padding-bottom:40px;}
  .ws5{padding-bottom:clamp(90px,16vw,130px);}
  .ws5-beeld{position:relative;left:auto;top:auto;width:170%;margin:0 0 0 clamp(20px,5vw,32px);transform:none;}
}
@media (max-width:640px){
  .ws5-beeld{width:210%;}
}
@media (prefers-reduced-motion:reduce){
  .ws5-beeld{transform:none !important;}
  .ws5-scherm,.ws5-paneel{transition:none;}
}

/* ---------- Open lijst in plaats van kaarten (Eigendomsmap, afspraken) ---------- */
.em-lijst{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink);counter-reset:em;}
.em-lijst li{display:flex;align-items:baseline;gap:22px;padding:17px 0;border-bottom:1px solid var(--lijn-2);font-family:var(--f-kop);font-weight:500;font-size:clamp(19px,1.75vw,25px);line-height:1.25;letter-spacing:-0.015em;color:var(--ink);counter-increment:em;}
.em-lijst li::before{content:counter(em,decimal-leading-zero);flex-shrink:0;min-width:26px;font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.1em;color:var(--koraal-tekst);}
.em-voet{margin:20px 0 0;font-family:var(--f-kop);font-weight:600;font-size:15.5px;color:var(--koraal-tekst);}
.js .r .em-lijst li{opacity:0;transform:translateX(-12px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.js .r.in .em-lijst li{opacity:1;transform:none;}
.js .r.in .em-lijst li:nth-child(2){transition-delay:.08s;} .js .r.in .em-lijst li:nth-child(3){transition-delay:.16s;}
.js .r.in .em-lijst li:nth-child(4){transition-delay:.24s;} .js .r.in .em-lijst li:nth-child(5){transition-delay:.32s;}
.donker .em-lijst{border-top-color:#fff;}
.donker .em-lijst li{color:#fff;border-color:var(--lijn-nacht);}
.donker .em-lijst li::before,.donker .em-voet{color:var(--ap-4);}

/* Regels: grote uitspraak links, uitleg rechts */
.regels{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink);}
.regels li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(28px,4vw,56px);align-items:baseline;padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--lijn-2);}
.regels h3{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(21px,2vw,28px);line-height:1.15;letter-spacing:-0.02em;color:var(--ink);}
.regels p{margin:0;font-size:16px;line-height:1.65;max-width:52ch;}

/* Platte lijst zonder vinkjes */
.lijst-plat{list-style:none;margin:0;padding:0;}
.lijst-plat li{padding:12px 0;border-top:1px solid var(--lijn-2);font-size:15.5px;line-height:1.55;color:var(--ink-2);}
.donker .lijst-plat li{border-color:var(--lijn-nacht);color:var(--nacht-tekst);}

/* ---------- Websites: huren of bezitten als vergelijking ---------- */
.vg{width:100%;border-collapse:collapse;}
.vg th{padding:0 0 16px;text-align:left;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);vertical-align:bottom;}
.vg th + th{color:var(--ink);}
.vg td{width:50%;padding:18px 0;border-top:1px solid var(--lijn-2);vertical-align:baseline;}
.vg td:first-child{padding-right:clamp(24px,4vw,56px);font-size:16px;color:var(--ink-3);}
.vg td + td{font-family:var(--f-kop);font-weight:500;font-size:clamp(18px,1.6vw,22px);letter-spacing:-0.01em;color:var(--ink);}
.vg tr:last-child td{border-bottom:1px solid var(--lijn-2);}
.vg th + th,.vg td + td{padding-left:clamp(20px,2.6vw,36px);border-left:2px solid var(--oranje);}
.vg-voet{margin:26px 0 0;}

/* ---------- Websites: pakketkiezer ---------- */
.kz{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:clamp(32px,5vw,72px);align-items:start;text-align:left;}
.kz-tabs{display:none;}
.js .kz-tabs{display:block;list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink);}
.kz-tab{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 18px;padding:20px 0 20px 18px;border-bottom:1px solid var(--lijn-2);position:relative;transition:padding .4s var(--ease);}
.kz-tab::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;background:var(--oranje);transform:scaleY(0);transition:transform .4s var(--ease);}
.kz-tab:focus-visible{outline:2px solid var(--ap-4);outline-offset:2px;border-radius:6px;}
.kz-tab-naam{font-family:var(--f-kop);font-weight:600;font-size:clamp(20px,1.8vw,24px);letter-spacing:-0.015em;color:rgba(33,29,32,0.42);transition:color .3s ease;}
.kz-tab-naam small{margin-left:10px;font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--koraal-tekst);vertical-align:0.25em;}
.kz-tab-prijs{font-family:var(--f-kop);font-weight:500;font-size:17px;color:rgba(33,29,32,0.42);font-variant-numeric:tabular-nums;transition:color .3s ease;}
.kz-tab-voor{grid-column:1 / -1;font-size:14px;line-height:1.5;color:var(--ink-3);}
.kz-tab:hover .kz-tab-naam,.kz-tab:hover .kz-tab-prijs{color:var(--ink);}
.kz-tab[aria-selected="true"]{padding-left:26px;}
.kz-tab[aria-selected="true"]::before{transform:scaleY(1);}
.kz-tab[aria-selected="true"] .kz-tab-naam,.kz-tab[aria-selected="true"] .kz-tab-prijs{color:var(--ink);}
.kz-panelen{display:grid;gap:56px;}
.js .kz-panelen{gap:0;}
.js .kz-paneel{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .5s var(--ease),visibility 0s .35s;}
.js .kz-paneel.aan{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .05s,transform .6s var(--ease) .05s,visibility 0s;}
.kz-paneel-naam{margin:0 0 6px;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);}
.kz-bedrag{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(52px,6vw,84px);line-height:1;letter-spacing:-0.035em;color:var(--ink);font-variant-numeric:tabular-nums;}
.kz-bedrag small{font-family:var(--f-tekst);font-weight:500;font-size:15px;letter-spacing:0;color:var(--ink-3);}
.kz-bedrag--tekst{font-size:clamp(38px,4vw,56px);}
.kz-voor{margin:18px 0 0;font-family:var(--f-kop);font-weight:500;font-size:clamp(18px,1.5vw,21px);line-height:1.35;color:var(--ink);max-width:36ch;}
.kz-kern{margin:8px 0 26px;font-size:15px;color:var(--ink-3);}
.kz-paneel .lijst-plat{columns:2;column-gap:clamp(24px,3vw,40px);margin-bottom:30px;}
.kz-paneel .lijst-plat li{break-inside:avoid;}
.kz-vergelijk{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--lijn-2);border-bottom:1px solid var(--lijn-2);text-align:left;}
.kz-vergelijk summary{list-style:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:18px 0;font-family:var(--f-kop);font-weight:600;font-size:16px;color:var(--ink);}
.kz-vergelijk summary::-webkit-details-marker{display:none;}
.kz-vergelijk summary::after{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211D20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s var(--ease);}
.kz-vergelijk[open] summary::after{transform:rotate(180deg);}
.kz-kolommen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);padding:6px 0 28px;}
.kz-kolommen h4{margin:0 0 6px;font-family:var(--f-kop);font-weight:600;font-size:18px;color:var(--ink);}
.kz-kolommen h4 small{margin-left:8px;font-family:var(--f-tekst);font-weight:500;font-size:14px;color:var(--ink-3);}
.kz-kolommen .lijst-plat li{font-size:14.5px;padding:10px 0;}

.pk-wrap{max-width:none;}
.pk-wissel-rij{justify-content:flex-start;}
.pk-usps{justify-content:flex-start;}
.pk-meer-nodig{max-width:720px;margin-left:0;text-align:left;}
.pk-klein{text-align:left;}

/* ---------- Werkwijze: tijdlijn zonder kaarten ---------- */
.tl-stops{display:none;}
.tl-knoppen{display:none;}
.tl-paneel{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,9.4fr);gap:10px clamp(28px,4vw,64px);padding:clamp(28px,3vw,40px) 0;border-top:1px solid var(--lijn-2);}
.tl-paneel:last-child{border-bottom:1px solid var(--lijn-2);}
.tl-nr{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(46px,5.4vw,80px);line-height:0.86;letter-spacing:-0.04em;color:var(--oranje);font-variant-numeric:tabular-nums;}
.tl-paneel h3{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(25px,2.5vw,36px);line-height:1.08;letter-spacing:-0.025em;color:var(--ink);}
.tl-uitleg{margin:14px 0 0;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:54ch;}
.tl-wie{display:grid;grid-template-columns:1fr 1fr;gap:18px clamp(28px,4vw,56px);margin-top:28px;padding-top:22px;border-top:1px dashed var(--lijn-2);}
.tl-wie p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-2);}
.tl-wie b{display:block;margin-bottom:6px;font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);}
.tl-res{display:flex;align-items:center;gap:14px;margin:24px 0 0;font-family:var(--f-kop);font-weight:500;font-size:clamp(16.5px,1.4vw,19px);color:var(--ink);}
.tl-res::before{content:"";flex-shrink:0;width:28px;height:2px;background:var(--oranje);}
@media (min-width:900px){
  .js .tl-stops{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:0 0 clamp(40px,4.5vw,64px);padding:0;border-top:1px solid var(--lijn-2);}
  .js .tl-balk{position:absolute;left:0;top:-1.5px;height:2px;width:calc(var(--stap,1) / 6 * 100%);background:var(--oranje);transition:width .7s var(--ease);}
  .js .tl-stop{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;width:100%;padding:22px 14px 4px 0;cursor:pointer;}
  .js .tl-stop::before{content:"";position:absolute;left:0;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--ap-0);border:1.5px solid rgba(33,29,32,0.28);transition:background .3s ease,border-color .3s ease,transform .4s var(--ease);}
  .js .tl-stop.klaar::before{background:var(--oranje);border-color:var(--oranje);}
  .js .tl-stop[aria-selected="true"]::before{background:var(--oranje);border-color:var(--oranje);transform:scale(1.35);box-shadow:0 0 0 6px rgba(244,87,49,0.14);}
  .js .tl-stop:focus-visible{outline:2px solid var(--ap-4);outline-offset:4px;border-radius:6px;}
  .tl-stop-nr{display:block;margin-bottom:6px;font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.1em;color:var(--ink-3);}
  .tl-stop-naam{display:block;font-family:var(--f-kop);font-weight:500;font-size:clamp(15px,1.3vw,18px);line-height:1.2;color:rgba(33,29,32,0.42);transition:color .3s ease;}
  .js .tl-stop:hover .tl-stop-naam,.js .tl-stop[aria-selected="true"] .tl-stop-naam{color:var(--ink);}
  .js .tl-panelen{display:grid;}
  .js .tl-paneel{grid-area:1 / 1;border:0;padding:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .5s var(--ease),visibility 0s .35s;}
  .js .tl-paneel.aan{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .05s,transform .7s var(--ease) .05s,visibility 0s;}
  .tl-knoppen{display:flex;gap:10px;margin-top:34px;}
}
.tl-volgende{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-kop);font-weight:600;font-size:15px;color:var(--ink);padding-bottom:5px;border-bottom:1.5px solid var(--lijn-2);transition:border-color .3s ease;}
.tl-volgende:hover{border-color:var(--ink);}
.tl-volgende:focus-visible{outline:2px solid var(--ap-4);outline-offset:3px;border-radius:4px;}
.tl-volgende[hidden]{display:none;}

.sec--kort{padding-top:clamp(48px,6vw,88px);}
.sec--aansluit{padding-top:0;}
.donker .ib{border-color:var(--lijn-nacht);}
.donker .ib div{border-color:var(--lijn-nacht);}
.donker .ib h3{color:#fff;}
.donker .s-kop .lead{color:var(--nacht-tekst);}
.stap-onder{margin-top:clamp(36px,4vw,52px);}
/* ---------- Kop van werkwijze en over Dato: licht en rustig ---------- */
.lk{position:relative;overflow:hidden;margin-top:-90px;padding:calc(90px + clamp(64px,8vw,116px)) 0 clamp(72px,8vw,112px);}
.lk h1{font-family:var(--f-kop);font-weight:600;font-size:clamp(40px,6vw,86px);line-height:0.98;letter-spacing:-0.035em;color:var(--ink);margin:0 0 26px;}
.lk .lead{color:#3D3539;max-width:50ch;}
.lk .hero-knoppen{margin:30px 0 36px;}
.lk .hero-feiten{gap:10px 16px;font-size:14.5px;}

.lk-breed{max-width:15ch;font-size:clamp(38px,5.4vw,78px) !important;}
.od-wie{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(40px,6vw,96px);align-items:start;}
.od-tekst p{margin:0 0 18px;font-size:16.5px;line-height:1.7;max-width:56ch;}
.od-tekst .od-groot{font-family:var(--f-kop);font-weight:500;font-size:clamp(20px,1.9vw,26px);line-height:1.35;letter-spacing:-0.015em;color:var(--ink);}
.od-tekst .tlink{margin-top:10px;}
.donker .citaat blockquote{color:#fff;}
.donker .citaat-teken{color:var(--oranje);}
.donker .citaat figcaption{color:var(--nacht-zacht);}
/* ---------- Systemen: donker en technisch ---------- */
.sx-held{position:relative;overflow:hidden;margin-top:-90px;padding:calc(90px + clamp(72px,9vw,128px)) 0 clamp(64px,7vw,96px);background:
  radial-gradient(44% 56% at 92% 8%, rgba(244,87,49,0.26) 0%, rgba(244,87,49,0) 70%),
  var(--nacht);}
.sx-held::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:72px 72px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(64% 80% at 82% 20%,#000 0%,transparent 78%);mask-image:radial-gradient(64% 80% at 82% 20%,#000 0%,transparent 78%);}
.sx-held .w{position:relative;}
.sx-held h1{margin:0 0 28px;font-family:var(--f-kop);font-weight:600;font-size:clamp(40px,5.2vw,74px);line-height:0.95;letter-spacing:-0.04em;color:#fff;}
.sx-held h1 em{font-style:normal;color:var(--oranje);}
.sx-held .lead{max-width:50ch;color:var(--nacht-tekst);}
.sx-held .hero-knoppen{margin:34px 0 0;}
.sx-kan{display:flex;flex-wrap:wrap;gap:10px 0;list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:22px 0 0;border-top:1px solid var(--lijn-nacht);}
.sx-kan li{display:flex;align-items:center;font-family:var(--f-label);font-weight:600;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--nacht-zacht);}
.sx-kan li + li::before{content:"";width:5px;height:5px;margin:0 18px;border-radius:50%;background:var(--oranje);}
.sx{padding:clamp(72px,8vw,128px) 0;}
.sx--na-held{padding-top:clamp(24px,3vw,48px);background:radial-gradient(50% 40% at 40% 70%, rgba(244,87,49,0.12) 0%, rgba(244,87,49,0) 70%),var(--nacht);}
.sx-overlap{margin:0;}
.kol2 + .ky-onder{margin-top:34px;}
.sx-kop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px clamp(40px,6vw,96px);align-items:start;margin-bottom:clamp(36px,4vw,60px);}
.sx-kop .label{margin-bottom:14px;}
.sx-tekst{margin:4px 0 0;font-size:16.5px;line-height:1.65;max-width:46ch;}
.sx-kop .pj-meer{margin:22px 0 24px;}
.sx-noot{margin:22px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3);}
.donker .sx-noot{color:var(--nacht-zacht);}
.sx img{display:block;width:100%;height:auto;}
/* Wasstraat: twee echte schermen over elkaar */
.sx-overlap{position:relative;padding-top:clamp(64px,12%,150px);}
.sx-overlap::before{content:"";position:absolute;inset:14% 6% 0 10%;background:radial-gradient(closest-side,rgba(244,87,49,0.26),rgba(244,87,49,0) 100%);pointer-events:none;}
.sx-voor{position:relative;z-index:2;width:82%;}
.sx-achter{position:absolute;z-index:1;right:0;top:0;width:58%;}
.sx-achter img{opacity:0.9;}
/* Hagelschade en werkplaats: asymmetrisch, tekst smal en beeld groot */
.sx-rij{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(36px,5vw,80px);align-items:center;}
.sx-rij--om{grid-template-columns:minmax(0,8fr) minmax(0,4fr);}
.sx-rij--om .sx-rij-tekst{order:2;}
.sx-rij-tekst .sx-tekst{margin-top:18px;}
.sx-rij-tekst .pj-meer{margin:24px 0 26px;}
.sx-rij-beeld{position:relative;margin:0;}
.sx-rij-beeld::before{content:"";position:absolute;inset:8% 4% -2%;z-index:0;background:radial-gradient(closest-side,rgba(246,167,123,0.45),rgba(255,224,199,0) 100%);pointer-events:none;}
.donker .sx-rij-beeld::before{background:radial-gradient(closest-side,rgba(244,87,49,0.24),rgba(244,87,49,0) 100%);}
.sx-rij-beeld img{position:relative;z-index:1;}
.sx-rij-beeld figcaption{position:relative;z-index:1;}
.sx-maand{margin:clamp(48px,5vw,72px) 0 0;padding-top:22px;border-top:1px solid var(--lijn-2);font-size:15.5px;color:var(--ink-3);}
.sx-maand a{color:var(--ink);font-weight:600;text-decoration-color:var(--ap-3);text-underline-offset:4px;}
.ww--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.ww-nr{color:var(--koraal-tekst);}
.kol2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,72px);}
.kol2 h3{margin:0 0 12px;font-family:var(--f-kop);font-weight:600;font-size:clamp(20px,1.8vw,24px);color:var(--ink);}
/* Formulieren: geen losse crème kaart, maar glas in de kleur van de achtergrond */
.ws-contact .ct-form.glas{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.45);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0 30px 70px -44px rgba(120,46,20,0.5);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);}
.ws-contact .veld input,.ws-contact .veld select,.ws-contact .veld textarea{background-color:rgba(255,248,241,0.34);border-color:rgba(255,255,255,0.6);}
.ws-contact .veld input:hover,.ws-contact .veld select:hover,.ws-contact .veld textarea:hover{background-color:rgba(255,248,241,0.46);}
.ws-contact .veld input:focus,.ws-contact .veld select:focus,.ws-contact .veld textarea:focus{background:rgba(255,248,241,0.72);border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,0.28);}
.ws-contact .veld select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23211D20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;}
.ws-contact .veld input::placeholder,.ws-contact .veld textarea::placeholder{color:rgba(33,29,32,0.55);}
.ws-contact .ct-noot{color:var(--ink);}
.ws-contact .ct-klein{color:rgba(33,29,32,0.66);}
.ct-paneel{border-radius:22px;padding:34px;display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,0.035);border:1px solid var(--lijn-nacht);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);}
.donker .ct-paneel .veld label{color:#fff;}
.donker .veld input,.donker .veld select,.donker .veld textarea{color:#fff;background-color:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.14);}
.donker .veld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
.donker .veld select option{color:#211D20;}
.donker .veld input:hover,.donker .veld select:hover,.donker .veld textarea:hover{background-color:rgba(255,255,255,0.08);}
.donker .veld input:focus,.donker .veld select:focus,.donker .veld textarea:focus{background-color:rgba(255,255,255,0.09);border-color:var(--ap-4);box-shadow:0 0 0 4px rgba(241,123,67,0.22);}
.donker .veld select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;}
.donker .veld input::placeholder,.donker .veld textarea::placeholder{color:rgba(255,255,255,0.42);}
.donker .ct-paneel .ct-noot{color:var(--nacht-tekst);}
.donker .ct-paneel .ct-klein{color:var(--nacht-zacht);}
.donker .ct-paneel .ct-klein a{color:#fff;}
.donker .ct-direct{border-color:var(--lijn-nacht);color:var(--nacht-tekst);}
.donker .ct-direct a{color:#fff;border-color:rgba(255,255,255,0.3);}
.sy-mw .lead{margin:18px 0 0;}
.sy-mw h3{margin:34px 0 0;padding-top:24px;border-top:1px solid var(--lijn-nacht);font-family:var(--f-kop);font-weight:600;font-size:21px;}
.sy-mw h3 + p{margin:10px 0 0;font-size:15.5px;line-height:1.62;max-width:46ch;}
.sx-contact{padding:clamp(96px,10vw,150px) 0;}

/* ---------- Projecten: echte producten centraal ---------- */
.pj-donker{padding:clamp(80px,9vw,140px) 0 clamp(72px,8vw,120px);}
.pj-donker .pj-sec-kop{margin-bottom:0;}
.cs{padding:clamp(72px,8vw,120px) 0;}
.pj-maand--donker{border-color:var(--lijn-nacht);color:var(--nacht-zacht);}
.pj-maand--donker a{color:#fff;}
.cs + .cs{border-top:1px solid var(--lijn-nacht);}
.cs-kop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(20px,3vw,40px);align-items:end;margin-bottom:clamp(32px,4vw,52px);}
.cs-nr{font-family:var(--f-kop);font-weight:600;font-size:clamp(56px,7vw,104px);line-height:0.8;letter-spacing:-0.04em;color:var(--oranje);}
.cs-kop h3{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(28px,3.2vw,46px);line-height:1.02;letter-spacing:-0.03em;}
.cs-kop .label{margin-bottom:10px;}
.cs-beeld{position:relative;margin:0;}
.cs-beeld::before{content:"";position:absolute;inset:10% 8% -4%;background:radial-gradient(closest-side,rgba(244,87,49,0.22),rgba(244,87,49,0) 100%);pointer-events:none;}
.cs-beeld img{position:relative;display:block;width:100%;height:auto;}
.cs-feiten{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,0.8fr);gap:24px clamp(28px,4vw,56px);margin-top:clamp(28px,3vw,44px);padding-top:26px;border-top:1px solid var(--lijn-nacht);}
.cs-feiten h4{margin:0 0 10px;font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ap-4);}
.cs-feiten p{margin:0;font-size:15.5px;line-height:1.62;}
.cs-feiten .lijst-plat li:first-child{border-top:0;padding-top:0;}
.cs-feiten .tlink{margin-top:18px;}

/* ---------- Blog en tekstpagina's ---------- */
.artikel-cta{background:none;box-shadow:none;border-radius:0;padding:30px 0 0;border-top:1.5px solid var(--ink);}
.artikel-cta p{color:var(--ink-2);}
.blokje{background:none;border:0;border-left:2px solid var(--oranje);border-radius:0;padding:4px 0 4px 22px;}
.lees ul li::before{background:var(--oranje);}
.lees ol li::before{background:none;border:1.5px solid var(--lijn-2);color:var(--ink);line-height:19px;}
.bl-pijl{border-radius:999px;}
.bl-rij:hover .bl-pijl{background:var(--oranje);border-color:var(--oranje);color:#fff;}

/* ---------- Footer: Dark Ink ---------- */
footer.df{background:var(--nacht);}
footer.df::before{background:radial-gradient(620px 400px at 90% 0%, rgba(244,87,49,0.10), transparent 70%);}
footer.df .df-kop{color:var(--ap-3);}


/* ============================================================
   LIQUID GLASS, rustig: knoppen, schakelaars en formulieren
   Een dunne lichtrand, zachte schaduw en een vleugje glans.
   ============================================================ */
.knop,.nav-cta,.nav-panel-cta{position:relative;isolation:isolate;overflow:hidden;}
.knop::before,.nav-cta::before,.nav-panel-cta::before{content:"";position:absolute;left:1px;right:1px;top:1px;height:50%;z-index:-1;border-radius:999px 999px 50% 50% / 999px 999px 16px 16px;background:linear-gradient(180deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%);pointer-events:none;}
.knop::after,.nav-cta::after,.nav-panel-cta::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(60px 60px at var(--mx,50%) var(--my,0%),rgba(255,255,255,0.12),rgba(255,255,255,0) 70%);opacity:0;transition:opacity .35s ease;pointer-events:none;}
.knop:hover::after,.nav-cta:hover::after,.nav-panel-cta:hover::after{opacity:1;}
/* Donker glas: de hoofdknop */
.knop{border-radius:999px;padding:15px 24px;color:#fff;border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg,#2F2A2D 0%,#211D20 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),0 10px 22px -14px rgba(33,29,32,0.5);}
.knop:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 14px 28px -16px rgba(33,29,32,0.55);}
/* Licht glas: tweede knop op de gradient en op licht */
.knop--glas,.knop--rand{color:var(--ink);border:1px solid rgba(255,255,255,0.6);
  background:linear-gradient(180deg,rgba(255,255,255,0.34) 0%,rgba(255,255,255,0.18) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75),0 8px 20px -16px rgba(120,46,20,0.3);}
.knop--glas::before,.knop--rand::before{background:linear-gradient(180deg,rgba(255,255,255,0.28) 0%,rgba(255,255,255,0) 100%);}
.knop--glas:hover,.knop--rand:hover{background:linear-gradient(180deg,rgba(255,255,255,0.46) 0%,rgba(255,255,255,0.26) 100%);border-color:rgba(255,255,255,0.85);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 10px 24px -16px rgba(120,46,20,0.32);}
.zacht .knop--glas,.sec .knop--rand,.band .knop--rand{border-color:rgba(33,29,32,0.10);}
.knop--glas::after,.knop--rand::after{background:radial-gradient(60px 60px at var(--mx,50%) var(--my,0%),rgba(255,255,255,0.45),rgba(255,255,255,0) 70%);}
/* Op Dark Ink: lichte hoofdknop, rookglas als tweede knop */
.donker .knop{color:var(--ink);border-color:rgba(255,255,255,0.8);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF4EC 100%);
  box-shadow:inset 0 1px 0 #fff,0 12px 26px -16px rgba(0,0,0,0.6);}
.donker .knop::before{background:linear-gradient(180deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);}
.donker .knop--glas,.donker .knop--rand{color:#fff;border-color:rgba(255,255,255,0.18);
  background:linear-gradient(180deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.03) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 10px 24px -16px rgba(0,0,0,0.6);}
.donker .knop--glas::before,.donker .knop--rand::before{background:linear-gradient(180deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0) 100%);}
.donker .knop--glas:hover,.donker .knop--rand:hover{background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.05) 100%);border-color:rgba(255,255,255,0.32);}
.donker .knop--glas::after,.donker .knop--rand::after{background:radial-gradient(60px 60px at var(--mx,50%) var(--my,0%),rgba(255,255,255,0.10),rgba(255,255,255,0) 70%);}
/* Menuknop: de kleur komt uit het menuscript, het glas uit deze regels */
.nav-cta,.nav-panel-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 8px 18px -12px rgba(33,29,32,0.4) !important;}

/* Schakelaar eenmalig of per maand */
.pr-wissel{border-radius:999px;padding:4px;border:1px solid rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.26);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);}
.pr-wissel button{border-radius:999px;padding:11px 22px;}
.pr-wissel button[aria-pressed="true"]{background:#fff;box-shadow:0 4px 12px -8px rgba(33,29,32,0.35);}
/* Kleine ronde knoppen */
.faq-plus,.bl-pijl{border-radius:999px;border-color:rgba(33,29,32,0.10);
  background:rgba(255,255,255,0.55);
  box-shadow:inset 0 1px 0 #fff,0 2px 6px -4px rgba(33,29,32,0.2);}
.faq[open] .faq-plus{background:var(--ap-1);border-color:var(--ap-1);}

/* Formulier op de gradient: rustig glas in de kleur van de achtergrond */
.ws-contact .ct-form.glas{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;border:1px solid rgba(255,255,255,0.5);
  background:linear-gradient(160deg,rgba(255,255,255,0.24) 0%,rgba(255,255,255,0.12) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 30px 70px -48px rgba(120,46,20,0.45);}
.ws-contact .ct-form.glas::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 45% at 0% 0%,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0) 50%);}
.ws-contact .veld input,.ws-contact .veld select,.ws-contact .veld textarea{border-radius:14px;background-color:rgba(255,255,255,0.26);border-color:rgba(255,255,255,0.55);
  box-shadow:inset 0 1px 2px rgba(120,46,20,0.06);}
.ws-contact .veld input:hover,.ws-contact .veld select:hover,.ws-contact .veld textarea:hover{background-color:rgba(255,255,255,0.34);}
.ws-contact .veld input:focus,.ws-contact .veld select:focus,.ws-contact .veld textarea:focus{background-color:rgba(255,255,255,0.62);box-shadow:0 0 0 4px rgba(255,255,255,0.28);}
/* Formulier op Dark Ink: rookglas */
.ct-paneel{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(160deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.025) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),0 30px 70px -44px rgba(0,0,0,0.65);}
.ct-paneel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 45% at 0% 0%,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 50%);}
.donker .veld input,.donker .veld select,.donker .veld textarea{border-radius:14px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.25);}
@media (prefers-reduced-motion:reduce){.knop::after,.nav-cta::after{transition:none;}}


/* ---------- Websites: Dato Beheer, donker en strak ---------- */
.bh2{padding:clamp(104px,12vw,176px) 0;overflow:hidden;background:
  radial-gradient(40% 50% at 100% 0%, rgba(244,87,49,0.14) 0%, rgba(244,87,49,0) 70%),
  var(--nacht);}
.bh2-kop{margin:0;max-width:13ch;font-family:var(--f-kop);font-weight:600;font-size:clamp(44px,7vw,104px);line-height:0.96;letter-spacing:-0.04em;color:#fff;}
.bh2-punt{color:var(--oranje);}
.bh2-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px clamp(48px,7vw,112px);align-items:start;margin-top:clamp(56px,7vw,104px);}
.bh2-lead{margin:0 0 34px;max-width:44ch;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.65;color:var(--nacht-tekst);}
.bh2-wie{margin:0 0 38px;border-top:1px solid var(--lijn-nacht);}
.bh2-wie div{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.6fr);gap:6px 20px;padding:16px 0;border-bottom:1px solid var(--lijn-nacht);}
.bh2-wie dt{padding-top:3px;font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ap-4);}
.bh2-wie dd{margin:0;font-size:15px;line-height:1.55;color:var(--nacht-tekst);}
/* De demonstratie: één veld, het resultaat groot */
.bh2-demo{position:relative;padding:4px 0 0 clamp(24px,3vw,44px);border-left:1px solid var(--lijn-nacht);}
.bh2-demo-label{display:block;margin-bottom:6px;font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--nacht-zacht);}
.bh2-demo-label i{margin:0 6px;font-style:normal;color:var(--oranje);}
.bh2-invoer{width:100%;box-sizing:border-box;padding:14px 0 12px;font-family:var(--f-tekst);font-size:18px;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,0.24);border-radius:0;outline:none;caret-color:var(--oranje);transition:border-color .3s ease;}
.bh2-invoer:hover{border-bottom-color:rgba(255,255,255,0.4);}
.bh2-invoer:focus{border-bottom-color:var(--oranje);}
.bh2-invoer:focus-visible{outline:none;}
.donker .bh2-pijl{display:flex;align-items:center;gap:12px;margin:22px 0 clamp(40px,5vw,64px);font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ap-4);}
.bh2-pijl span{position:relative;width:1px;height:34px;background:linear-gradient(180deg,rgba(244,87,49,0),var(--oranje));}
.bh2-pijl span::after{content:"";position:absolute;left:-3px;bottom:0;width:6px;height:6px;border-right:1px solid var(--oranje);border-bottom:1px solid var(--oranje);transform:rotate(45deg);}
.donker .bh2-site{margin:0 0 12px;font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--nacht-zacht);}
.donker .bh2-resultaat{margin:0;min-height:2.1em;font-family:var(--f-kop);font-weight:600;font-size:clamp(34px,4vw,60px);line-height:1.04;letter-spacing:-0.03em;color:#fff;overflow-wrap:anywhere;}
.bh2-cursor{display:inline-block;width:3px;height:0.82em;margin-left:6px;vertical-align:-0.06em;background:var(--oranje);opacity:0;}
.bh2-demo.typt .bh2-cursor{opacity:1;animation:bh2-knipper 1s steps(1) infinite;}
@keyframes bh2-knipper{50%{opacity:0;}}
/* Modules: één rustige regel */
.bh2-modules{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(48px,7vw,112px);align-items:baseline;margin-top:clamp(72px,8vw,120px);padding-top:28px;border-top:1px solid var(--lijn-nacht);}
.donker .bh2-modules p{margin:0;max-width:46ch;font-size:14.5px;line-height:1.6;color:var(--nacht-zacht);}
.bh2-modules b{font-weight:600;color:#fff;}
.bh2-modules ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px clamp(24px,3vw,40px);list-style:none;margin:0;padding:0;}
.bh2-modules li{display:flex;align-items:baseline;gap:8px;font-family:var(--f-kop);font-weight:500;font-size:16px;color:#fff;}
.bh2-modules li small{font-family:var(--f-label);font-weight:600;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--nacht-zacht);}
.bh2-modules li::before{content:"";align-self:center;flex-shrink:0;width:5px;height:5px;margin-right:4px;border-radius:50%;background:var(--oranje);}
@media (max-width:1024px){
  .bh2-grid,.bh2-modules{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .bh2-wie div{grid-template-columns:1fr;}
  .bh2-demo{padding-left:20px;}
  .bh2-modules ul{grid-template-columns:1fr;gap:12px;}
}
@media (prefers-reduced-motion:reduce){.bh2-demo.typt .bh2-cursor{animation:none;}}


/* ============================================================
   EIGEN OPENING PER PAGINA
   Eén huisstijl, maar elke pagina begint op zijn eigen manier.
   ============================================================ */
.punt{color:var(--oranje);}

/* ---------- Websites: licht en typografisch, de drie feiten groot ernaast ---------- */
.wh{position:relative;margin-top:-90px;padding:calc(90px + clamp(64px,8vw,120px)) 0 clamp(64px,7vw,104px);overflow:hidden;background:
  radial-gradient(46% 70% at 96% 40%, rgba(246,167,123,0.30) 0%, rgba(246,167,123,0) 70%),
  var(--ap-0);}
.wh-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);gap:48px clamp(48px,7vw,112px);align-items:end;}
.wh h1{margin:0 0 26px;font-family:var(--f-kop);font-weight:600;font-size:clamp(42px,6.4vw,96px);line-height:0.95;letter-spacing:-0.04em;color:var(--ink);max-width:11ch;}
.wh .lead{max-width:46ch;}
.wh-cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin:34px 0 0;}
.wh-cijfers{margin:0;border-top:1.5px solid var(--ink);}
.wh-cijfers div{padding:18px 0;border-bottom:1px solid var(--lijn-2);}
.wh-cijfers dt{font-family:var(--f-kop);font-weight:600;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-0.03em;color:var(--ink);}
.wh-cijfers dd{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-3);max-width:32ch;}
.js .wh-cijfers div{animation:opkomen 1s var(--ease) both;}
.js .wh-cijfers div:nth-child(2){animation-delay:.1s;}
.js .wh-cijfers div:nth-child(3){animation-delay:.2s;}

/* ---------- Systemen: het echte systeem loopt de kop uit ---------- */
.sx-held{padding-bottom:clamp(48px,5vw,72px);}
.sx-held-grid{position:relative;min-height:clamp(420px,40vw,600px);}
.sx-held-tekst{position:relative;z-index:2;max-width:56%;}
.sx-held-beeld{position:absolute;z-index:1;top:clamp(10px,2vw,40px);left:58%;width:min(1100px,76vw);margin:0;perspective:2000px;}
.sx-held-beeld img{display:block;width:100%;height:auto;transform:rotateY(-11deg) rotateX(4deg);transform-origin:0 50%;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,0.25) 92%),linear-gradient(180deg,#000 70%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,0.25) 92%),linear-gradient(180deg,#000 70%,transparent 100%);mask-composite:intersect;}
.sx-held-beeld::before{content:"";position:absolute;inset:10% 20% 0 0;background:radial-gradient(closest-side,rgba(244,87,49,0.30),rgba(244,87,49,0) 100%);pointer-events:none;}
.sx-held-beeld figcaption{position:absolute;left:4%;bottom:-6px;font-size:12px;color:var(--nacht-zacht);}
.js .sx-held-beeld img{animation:sx-in 1.4s var(--ease) .2s both;}
@keyframes sx-in{from{opacity:0;transform:rotateY(-18deg) rotateX(6deg) translateX(40px);}to{opacity:1;transform:rotateY(-11deg) rotateX(4deg);}}
.sx-cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin:34px 0 0;}
.sx-ws-beeld{position:relative;margin:0;}
.sx-ws-beeld::before{content:"";position:absolute;inset:8% 6% -2%;background:radial-gradient(closest-side,rgba(244,87,49,0.24),rgba(244,87,49,0) 100%);pointer-events:none;}
.sx-ws-beeld img{position:relative;display:block;width:100%;height:auto;}

/* ---------- Projecten: een index van echt werk met een groot voorbeeld ---------- */
.pjh{position:relative;margin-top:-90px;padding:calc(90px + clamp(56px,7vw,100px)) 0 clamp(64px,7vw,104px);background:var(--ap-0);}
.pjh-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,5vw,80px);align-items:center;}
.pjh h1{margin:0 0 20px;font-family:var(--f-kop);font-weight:600;font-size:clamp(44px,6.4vw,96px);line-height:0.95;letter-spacing:-0.04em;color:var(--ink);}
.pjh .lead{max-width:40ch;}
.pjh-index{list-style:none;margin:36px 0 26px;padding:0;border-top:1.5px solid var(--ink);}
.pjh-index a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid var(--lijn-2);color:inherit;text-decoration:none;}
.pjh-nr{font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:0.1em;color:var(--ink-3);transition:color .3s ease;}
.pjh-index b{font-family:var(--f-kop);font-weight:600;font-size:clamp(19px,1.7vw,23px);letter-spacing:-0.015em;color:rgba(33,29,32,0.45);transition:color .3s ease,transform .45s var(--ease);}
.pjh-index small{font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);}
.pjh-index a:hover b,.pjh-index a:focus-visible b,.pjh-index a.aan b{color:var(--ink);transform:translateX(4px);}
.pjh-index a.aan .pjh-nr{color:var(--oranje);}
.pjh-index a:focus-visible{outline:2px solid var(--ap-4);outline-offset:2px;border-radius:6px;}
.pjh-preview{position:relative;margin:0;aspect-ratio:16 / 10;}
.pjh-preview::before{content:"";position:absolute;inset:-6% -8% -10%;background:radial-gradient(closest-side,rgba(246,167,123,0.5),rgba(255,224,199,0) 100%);pointer-events:none;}
.pjh-laag{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(12px) scale(0.985);transition:opacity .45s ease,transform .7s var(--ease);}
.pjh-laag.aan{opacity:1;transform:none;}
.pjh-laag img{display:block;width:100%;height:auto;max-height:88%;object-fit:contain;}
.pjh-laag--site img{border-radius:12px;box-shadow:0 0 0 1px rgba(33,29,32,0.06),0 40px 80px -40px rgba(120,46,20,0.5);}
.pjh-laag figcaption{margin-top:14px;font-size:13px;color:var(--ink-3);}
.pjh-laag figcaption b{font-weight:650;color:var(--ink);}

/* Cases op de projectenpagina: elk project zijn eigen vorm */
.cs--zij{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:36px clamp(40px,5vw,80px);align-items:center;}
.cs--zij.cs--om{grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);}
.cs--zij.cs--om .cs-zij-tekst{order:2;}
.cs--zij .cs-kop{grid-template-columns:1fr;gap:10px;margin-bottom:26px;}
.cs--zij .cs-nr{font-size:clamp(46px,4.6vw,72px);}
.cs--zij .cs-kop h3{font-size:clamp(26px,2.6vw,38px);}
.cs--zij .cs-feiten{grid-template-columns:1fr;gap:0;margin-top:0;padding-top:0;border-top:0;}
.cs--zij .cs-feiten > div{padding:16px 0;border-top:1px solid var(--lijn-nacht);}
.cs--zij .cs-feiten .lijst-plat li{font-size:14.5px;}
.cs .sx-overlap{margin-top:0;}
.lv-grid{grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);align-items:end;}
.lv-grid .lv:nth-child(2){margin-bottom:12%;}

/* ---------- Werkwijze: open en typografisch ---------- */
.wk{position:relative;margin-top:-90px;padding:calc(90px + clamp(64px,8vw,120px)) 0 clamp(56px,6vw,88px);background:var(--ap-0);}
.wk-kop{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(44px,7.4vw,112px);line-height:0.95;letter-spacing:-0.045em;color:var(--ink);}
.wk-kop > span{display:block;}
.wk-kop .wk-in{padding-left:clamp(0px,16vw,230px);}
.wk-onder{display:grid;grid-template-columns:minmax(0,1fr);max-width:540px;margin:clamp(28px,3vw,40px) 0 0 clamp(0px,16vw,230px);}
.wk-onder .tlink{margin-top:26px;justify-self:start;}
.wk-regels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(28px,4vw,56px);list-style:none;margin:clamp(64px,7vw,104px) 0 0;padding:26px 0 0;border-top:1.5px solid var(--ink);}
.wk-regels li{position:relative;}
.wk-regels h2{margin:0 0 8px;font-family:var(--f-kop);font-weight:600;font-size:clamp(19px,1.6vw,22px);letter-spacing:-0.015em;color:var(--ink);}
.wk-regels p{margin:0;font-size:15px;line-height:1.62;max-width:36ch;}
.wk-regels li::before{content:"";position:absolute;left:0;top:-31px;width:9px;height:9px;border-radius:50%;background:var(--oranje);}

/* ---------- Over Dato: persoonlijk, met naam en direct contact ---------- */
.oh{position:relative;margin-top:-90px;padding:calc(90px + clamp(64px,8vw,120px)) 0 clamp(56px,6vw,88px);background:var(--ap-0);}
.oh-grid{display:grid;grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);gap:40px clamp(40px,6vw,96px);align-items:end;}
.oh h1{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(40px,5.6vw,84px);line-height:0.98;letter-spacing:-0.035em;color:var(--ink);}
.oh .lead{grid-column:1;max-width:52ch;margin-top:4px;}
.oh-wie{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0;}
.oh-naam{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.02em;color:var(--ink);}
.oh-rol{margin:4px 0 18px;font-size:15px;color:var(--ink-3);}
.oh-wie dl{margin:0 0 24px;border-top:1.5px solid var(--ink);}
.oh-wie dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--lijn-2);font-size:15px;}
.oh-wie dt{font-family:var(--f-label);font-weight:600;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px;}
.oh-wie dd{margin:0;color:var(--ink);}
.oh-wie dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--lijn-2);}
.oh-wie dd a:hover{border-color:var(--ink);}

/* ---------- Blog: compact en typografisch ---------- */
.bk{margin-top:-90px;padding:calc(90px + clamp(48px,6vw,88px)) 0 clamp(28px,3vw,40px);background:var(--ap-0);}
.bk-rij{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(40px,6vw,96px);align-items:end;}
.bk h1{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(40px,5.6vw,84px);line-height:0.98;letter-spacing:-0.035em;color:var(--ink);}
.bk .lead{margin:0;}
.bk + .bl-sec{padding-top:clamp(24px,3vw,40px);}

/* ---------- Artikelen en juridische pagina's: een rustige kop ---------- */
.tk{margin-top:-90px;padding:calc(90px + clamp(40px,5vw,72px)) 0 0;background:var(--ap-0);}
.tk .w{max-width:784px;}
.tk h1{margin:0;font-family:var(--f-kop);font-weight:600;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-0.025em;color:var(--ink);text-wrap:balance;}
.tk-meta{margin:18px 0 0;padding-bottom:26px;border-bottom:1px solid var(--lijn-2);font-size:14.5px;color:var(--ink-3);}
.tk-meta a{color:var(--ink);text-decoration:none;font-weight:600;}
.tk + .lees{padding-top:clamp(32px,4vw,52px);}

@media (max-width:1024px){
  .wh-grid,.pjh-grid,.oh-grid,.bk-rij,.cs--zij,.cs--zij.cs--om,.lv-grid{grid-template-columns:1fr;}
  .cs--zij.cs--om .cs-zij-tekst{order:0;}
  .lv-grid .lv:nth-child(2){margin-bottom:0;}
  .oh-wie{grid-column:1;grid-row:auto;max-width:460px;}
  .sx-held-grid{min-height:0;}
  .sx-held-tekst{max-width:none;}
  .sx-held-beeld{position:relative;top:auto;left:auto;width:118%;margin:clamp(36px,6vw,56px) 0 0;}
  .wk-regels{grid-template-columns:1fr;}
  .wk-regels li::before{display:none;}
}
@media (max-width:640px){
  .wk-kop .wk-in,.wk-onder{padding-left:0;margin-left:0;}
  .sx-held-beeld{width:135%;}
  .sx-held-beeld img{transform:rotateY(-8deg) rotateX(3deg);}
}
@media (prefers-reduced-motion:reduce){
  .js .wh-cijfers div,.js .sx-held-beeld img{animation:none;}
  .pjh-laag{transition:none;}
}


/* ---------- Keuzelijsten in Dato-stijl (vervangt het menu van het besturingssysteem op computers) ---------- */
.dd-keuze{position:absolute;z-index:2147483000;margin:0;padding:6px;list-style:none;max-height:380px;overflow:auto;box-sizing:border-box;
  border-radius:14px;background:rgba(255,250,246,0.97);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(33,29,32,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 24px 54px -22px rgba(33,29,32,0.4);
  font-family:var(--f-tekst);font-size:15px;line-height:1.3;animation:dd-in .18s var(--ease) both;}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.dd-keuze li{position:relative;padding:10px 12px 10px 34px;border-radius:9px;color:var(--ink);cursor:pointer;user-select:none;}
.dd-keuze li.hover{background:rgba(244,87,49,0.10);}
.dd-keuze li[aria-selected="true"]{font-weight:650;}
.dd-keuze li[aria-selected="true"]::before{content:"";position:absolute;left:13px;top:50%;width:9px;height:5px;border-left:2px solid var(--oranje);border-bottom:2px solid var(--oranje);transform:translateY(-70%) rotate(-45deg);}
.dd-keuze.dd-donker{background:rgba(45,40,43,0.97);border-color:rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 24px 54px -22px rgba(0,0,0,0.7);}
.dd-keuze.dd-donker li{color:#fff;}
.dd-keuze.dd-donker li.hover{background:rgba(255,255,255,0.08);}
@media (prefers-reduced-motion:reduce){.dd-keuze{animation:none;}}

@media (max-width:1024px){
  .waarom-grid--open,.kz,.sx-kop,.sx-rij,.sx-rij--om,.od-wie{grid-template-columns:1fr;}
  .sx-rij--om .sx-rij-tekst{order:0;}
  .ww--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cs-feiten{grid-template-columns:1fr 1fr;}
  .cs-feiten > div:last-child{grid-column:1 / -1;}
}
@media (max-width:899px){
  .tl-paneel{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .regels li{grid-template-columns:1fr;}
  .tl-wie{grid-template-columns:1fr;}
  .ww--4,.kol2{grid-template-columns:1fr;}
  .kol2 > div + div{margin-top:36px;}
  .kz-paneel .lijst-plat{columns:1;}
  .kz-kolommen{grid-template-columns:1fr;}
  .vg thead{display:none;}
  .vg,.vg tbody,.vg tr,.vg td{display:block;width:auto;}
  .vg tr{padding:16px 0;border-top:1px solid var(--lijn-2);}
  .vg tr:last-child{border-bottom:1px solid var(--lijn-2);}
  .vg td,.vg tr:last-child td{border:0;padding:0;}
  .vg td:first-child{font-size:14.5px;padding:0 0 6px;}
  .vg td:first-child::before{content:"Huren: ";}
  .vg td + td{padding-left:14px;border-left:2px solid var(--oranje);}
  .sx-kan{gap:10px 18px;}
  .sx-kan li + li::before{display:none;}
  .sx-rij-beeld,.sx-overlap,.cs-beeld{margin-left:-12px;margin-right:-12px;}
  .podium-beeld{width:92%;}
  .sx-overlap{padding-top:18%;}
  .sx-voor{width:90%;}
  .sx-achter{width:62%;}
  .cs-feiten{grid-template-columns:1fr;}
  .pv-typo{padding:0;}
  .pv-typo::before{display:none;}
  .ct-paneel{padding:24px;}
}
@media (prefers-reduced-motion:reduce){
  .js .r .em-lijst li,.js .tl-paneel,.js .kz-paneel,.tl-balk{transition:none;}
}