/* ---------- lettertypes: van de eigen server, er gaat niets naar Google (zelfde regels als beeld/letters/letters-v1.css) ---------- */
@font-face{ font-family:"Anybody"; font-style:normal; font-weight:100 900; font-stretch:50% 150%; font-display:swap;
  src:url(/beeld/letters/anybody-v13-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Anybody"; font-style:normal; font-weight:100 900; font-stretch:50% 150%; font-display:swap;
  src:url(/beeld/letters/anybody-v13-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/beeld/letters/schibsted-grotesk-v7-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/beeld/letters/schibsted-grotesk-v7-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@property --w { syntax: '<number>'; inherits: false; initial-value: 100; }

/* ---------- kleuren: papier (zie ook de huisstijl in /beheer) ---------- */
:root{
  color-scheme:light;
  --bg:#F1EFEA; --ink:#15171F;
  --hi:#FFE45C; --hi-ink:#15171F;
  --pop:#FF6FA8; --pop-ink:#15171F;
  --card:#FFFFFF; --card-ink:#15171F;
  --alt:#2230F5; --alt-ink:#F1EFEA;
  --deep:#15171F; --deep-ink:#F1EFEA;
  --ok:#2FB36B;
  --shadow:rgba(21,23,31,.25);
  --display:"Anybody", "Arial Black", Impact, sans-serif;
  --body:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --max:1280px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background-color .4s; }
h1, h2, h3, h4{ text-wrap:balance; }
a{ color:inherit; }
button, select, input{ font:inherit; }
:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }
[hidden]{ display:none !important; }
/* tekst in een markering boven het geel: anders valt het geel van de volgende regel over staarten en voeten */
mark > .mk{ position:relative; }
mark{ background:var(--hi); color:var(--hi-ink); padding:0 .14em; border-radius:.14em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.t-hi mark{ background:var(--card); color:var(--card-ink); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.bm{ fill:currentColor; flex:none; }

/* ---------- sectietypes ---------- */
.t-bg{ --sec:var(--bg); --sec-ink:var(--ink); }
.t-alt{ --sec:var(--alt); --sec-ink:var(--alt-ink); }
.t-deep{ --sec:var(--deep); --sec-ink:var(--deep-ink); }
.t-hi{ --sec:var(--hi); --sec-ink:var(--hi-ink); }
.t-bg, .t-alt, .t-deep, .t-hi{ background:var(--sec); color:var(--sec-ink); --muted:color-mix(in srgb, var(--sec-ink) 80%, var(--sec)); --faint:color-mix(in srgb, var(--sec-ink) 22%, var(--sec)); transition:background-color .4s, color .4s; }
.s{ padding-block:clamp(72px, 10vw, 140px); }

.kick{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 18px; }
.kick .bm{ width:12px; height:auto; }
.h2{ font-family:var(--display); font-variation-settings:"wdth" 118, "wght" 900; font-size:clamp(42px, 7.6vw, 108px); line-height:.9; letter-spacing:-.01em; margin:0; }
.sec-head{ margin-bottom:clamp(32px, 5vw, 60px); }
.sec-sub{ font-size:clamp(17px, 1.6vw, 20px); max-width:54ch; margin:20px 0 0; color:var(--muted); }
.btn{ display:inline-flex; align-items:center; gap:10px; background:var(--sec-ink); color:var(--sec); border:2px solid var(--sec-ink); border-radius:999px; padding:14px 24px; font-weight:800; font-size:16px; text-decoration:none; cursor:pointer; transition:transform .2s; }
.btn:hover{ transform:translateY(-2px) rotate(-1.5deg); }
.btn.ghost{ background:transparent; color:var(--sec-ink); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.tags li{ border:2px solid currentColor; border-radius:999px; padding:3px 12px; font-size:13px; font-weight:700; }
.ext{ font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }

/* ---------- stickers ---------- */
.c-hi{ background:var(--hi); color:var(--hi-ink); }
.c-card{ background:var(--card); color:var(--card-ink); }
.c-pop{ background:var(--pop); color:var(--pop-ink); }
.c-inv{ background:var(--sec-ink); color:var(--sec); border-color:var(--sec-ink); }

/* ---------- voordeur ---------- */
.ref{ background:var(--hi); color:var(--hi-ink); border-bottom:2px solid var(--hi-ink); }
.ref-in{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding-block:12px; }
.ref p{ margin:0; flex:1 1 320px; }
.ref a{ font-weight:800; }
.ref button{ width:32px; height:32px; border-radius:50%; border:2px solid currentColor; background:transparent; color:inherit; font-weight:800; font-size:18px; line-height:1; cursor:pointer; }

/* ---------- navigatie ---------- */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.01em; text-decoration:none; }
.logo .bm{ width:20px; height:auto; overflow:visible; }
/* het beeldmerk: de bolletjes veren op bij aanwijzen; het paasei laat de B uit elkaar springen */
.logo .bm rect, .logo .bm circle{ transform-box:fill-box; transform-origin:center; }
@media (hover:hover){
  .logo:hover .bm circle:first-of-type{ animation:bmveer .55s ease-in-out; }
  .logo:hover .bm circle:last-of-type{ animation:bmveer .55s .09s ease-in-out; }
}
@keyframes bmveer{ 0%, 100%{ transform:none; } 40%{ transform:translateY(-14%) scale(1.07); } 70%{ transform:translateY(5%) scale(.95); } }
.logo .lw{ display:inline-block; white-space:pre; }
.logo .ll{ display:inline-block; }
.ei-bel{ position:fixed; z-index:80; max-width:min(280px, calc(100vw - 32px)); padding:9px 14px; border-radius:14px; background:var(--hi); color:var(--hi-ink); border:2px solid var(--hi-ink); font-weight:800; font-size:14px; line-height:1.3; box-shadow:0 8px 0 -3px rgba(0,0,0,.3); pointer-events:none; animation:eibel 3s ease forwards; }
.ei-bel::before{ content:""; position:absolute; left:18px; top:-9px; width:14px; height:14px; background:var(--hi); border-left:2px solid var(--hi-ink); border-top:2px solid var(--hi-ink); transform:rotate(45deg); }
@keyframes eibel{ 0%{ opacity:0; transform:translateY(10px) scale(.8); } 10%{ opacity:1; transform:rotate(-2deg); } 85%{ opacity:1; transform:rotate(-2deg); } 100%{ opacity:0; transform:translateY(-8px) rotate(-2deg); } }
.links{ display:flex; gap:28px; font-weight:600; font-size:15.5px; }
/* zeven links in het menu (sinds 15-10-2026): net boven de telefoonbreedte dichter op elkaar, zodat het logo op een regel blijft */
@media (min-width:901px) and (max-width:1080px){ .links{ gap:12px; font-size:15px; } header .logo{ white-space:nowrap; flex-shrink:0; } }   /* sinds 22-10-2026 (programmeren en servers in het menu): anders viel het logo op 901 px over twee regels */
.links a{ text-decoration:none; }
.links a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.pill{ background:var(--sec-ink); color:var(--sec); border-radius:999px; padding:11px 20px; font-weight:800; font-size:15px; text-decoration:none; white-space:nowrap; }
.pill.ghost{ background:transparent; color:var(--sec-ink); box-shadow:inset 0 0 0 2px var(--sec-ink); }
.nav-r{ display:flex; align-items:center; gap:8px; }
.pill-prijs{ display:none; }
.links a.nav-prijs{ background:var(--hi); color:var(--hi-ink); padding:3px 11px; margin:-3px 0; border-radius:999px; }

/* prijzen: een prijsregel bovenaan en prijskaartjes bij de onderdelen (bedragen komen uit het blok Prijzen) */
.hero-prijs{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-weight:700; font-size:15.5px; line-height:1.35; text-decoration:none; color:inherit; }
.hero-prijs .eu{ flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--hi); color:var(--hi-ink); border:2px solid var(--hi-ink); font-weight:900; font-size:15px; transform:rotate(-10deg); }
.hero-prijs:hover > span:last-child{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.hero-prijs mark{ background:var(--hi); color:var(--hi-ink); padding:0 .2em; border-radius:.2em; }
.pk{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; width:fit-content; max-width:100%; margin-top:clamp(28px, 4vw, 44px); padding:12px 20px 12px 38px; background:var(--hi); color:var(--hi-ink); border:2px solid var(--hi-ink); border-radius:8px 18px 18px 8px; text-decoration:none; transform:rotate(-1.2deg); box-shadow:0 8px 0 -3px rgba(0,0,0,.28); transition:transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.pk::before{ content:""; position:absolute; left:13px; top:50%; width:11px; height:11px; margin-top:-5.5px; border-radius:50%; background:var(--sec, var(--bg)); border:2px solid var(--hi-ink); }
.pk:hover{ transform:rotate(0deg) translateY(-2px); }
.pk-k{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.pk-t{ font-weight:700; font-size:16px; line-height:1.35; }
.pk-t mark{ background:none; color:inherit; padding:0; font-weight:900; font-size:1.12em; }
.pk-p{ font-weight:900; font-size:18px; transition:transform .2s; }
.pk:hover .pk-p{ transform:translateX(4px); }
.t-hi .pk{ background:var(--card); color:var(--card-ink); border-color:var(--card-ink); }
.t-hi .pk::before{ border-color:var(--card-ink); }
.cta-in .pk{ margin-inline:auto; }

/* ---------- hero ---------- */
.hero{ overflow:clip; }
.hero-in{ container-type:inline-size; padding-block:clamp(8px, 2vw, 28px) clamp(56px, 8vw, 104px); }
.word{ margin:0; font-family:var(--display); font-weight:900; line-height:.8; white-space:nowrap; display:flex; justify-content:center; user-select:none; touch-action:pan-y; contain:layout style; font-size:18vw; font-size:min(21cqi, 300px); }
.word-in{ display:inline-flex; }
.word-in span, .big .l{ display:inline-block; font-variation-settings:"wdth" var(--w, 100), "wght" 900; cursor:pointer; }
.big{ touch-action:pan-y; user-select:none; }
.boing{ animation:boing .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes boing{ 0%{ transform:none; } 22%{ transform:translateY(5%) scale(1.1, .84); } 55%{ transform:translateY(-16%) scale(.94, 1.08); } 100%{ transform:none; } }
.hero-row{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:32px 48px; align-items:start; margin-top:clamp(20px, 3cqi, 40px); }
.line{ font-size:clamp(28px, 3.9cqi, 50px); font-weight:800; line-height:1.08; letter-spacing:-.025em; margin:0; max-width:19ch; }
.rot{ display:grid; }
/* eerst de oude zin weg, dan pas de nieuwe erin: anders liggen twee zinnen even half over elkaar */
.rot > span{ grid-area:1 / 1; opacity:0; transform:translateY(.25em); transition:opacity .18s, transform .18s; }
.rot > span.on{ opacity:1; transform:none; transition:opacity .25s .2s, transform .25s .2s; }
.rot mark{ background:var(--hi); color:var(--hi-ink); padding:0 .16em; border-radius:.18em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hero-sub{ font-size:clamp(17px, 1.6vw, 19px); max-width:48ch; margin:22px 0 28px; color:var(--muted); }
.ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.stapel{ position:relative; min-height:370px; }
.kaart{ position:absolute; left:var(--x); top:var(--y); width:min(64%, 380px); display:block; background:var(--card); color:var(--card-ink); border:2px solid var(--card-ink); border-radius:14px; overflow:hidden; text-decoration:none; transform:rotate(var(--r)); box-shadow:0 18px 30px -18px var(--shadow); transition:transform .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.kb{ display:flex; align-items:center; gap:5px; padding:6px 10px; font-size:11.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:2px solid color-mix(in srgb, var(--card-ink) 14%, var(--card)); }
.kb i{ width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--card-ink) 25%, var(--card)); flex:none; }
.kb i:last-of-type{ margin-right:6px; }
.kaart img{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; object-position:top; }
@media (hover:hover){
  .stapel:hover .kaart{ transform:translate(var(--fx), var(--fy)) rotate(var(--r2)); }
  .stapel .kaart:hover{ z-index:5; transform:translateY(-10px) rotate(0deg) scale(1.05); box-shadow:0 26px 40px -20px var(--shadow); }
}
.kaart:focus-visible{ z-index:5; outline-offset:4px; }
.hint{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:18px 0 0; text-align:right; opacity:.75; }

/* ---------- band ---------- */
.band{ background:var(--hi); color:var(--hi-ink); border-block:2px solid var(--hi-ink); overflow:hidden; white-space:nowrap; padding-block:14px; }
.band-run{ display:inline-block; font-family:var(--display); font-variation-settings:"wdth" 130, "wght" 900; font-size:clamp(20px, 2.4vw, 30px); line-height:1; animation:run 114s linear infinite; }
.band-run i{ display:inline-block; width:.42em; height:.42em; border-radius:50%; background:var(--pop); border:2px solid var(--hi-ink); margin:0 .6em; vertical-align:.12em; }
@keyframes run{ to{ transform:translateX(-50%); } }

/* ---------- web development ---------- */
.bouw{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(20px, 3vw, 40px); align-items:start; }
.soorten{ display:grid; gap:10px; }
.soort{ display:grid; gap:2px; text-align:left; padding:14px 18px; border:2px solid currentColor; border-radius:20px; background:transparent; color:inherit; cursor:pointer; transition:transform .2s, background .2s, color .2s; }
.soort b{ font-family:var(--display); font-variation-settings:"wdth" 115, "wght" 900; font-size:clamp(22px, 2.2vw, 30px); line-height:1; }
.soort span{ font-size:14px; font-weight:600; opacity:.85; }
.soort:hover{ transform:rotate(-1.5deg); }
.soort[aria-pressed="true"]{ background:var(--hi); color:var(--hi-ink); border-color:var(--hi); transform:rotate(-1deg); }
.wf{ aspect-ratio:16 / 10; position:relative; overflow:hidden; padding:14px; background:color-mix(in srgb, var(--card-ink) 4%, var(--card)); }
/* van schets naar site: de echte schermafbeelding veegt van links naar rechts over de schets */
.wf-echt{ position:absolute; inset:0; margin:0; overflow:hidden; background:var(--card); clip-path:inset(0 100% 0 0); cursor:pointer; }
.wf-echt.aan{ clip-path:inset(0 0 0 0); }
.wf-echt.wf-veeg{ transition:clip-path .9s cubic-bezier(.7, 0, .2, 1); }
.wf-echt img{ position:absolute; left:0; top:0; width:100%; height:auto; display:block; transition:top 1.2s ease, transform 1.2s ease; }
.wf-echt:hover img, .wf-echt.go img{ top:100%; transform:translateY(-100%); transition-duration:8s; transition-timing-function:linear; }
.wf-label{ position:absolute; left:12px; bottom:12px; z-index:2; padding:5px 12px; border:0; border-radius:999px; background:var(--deep); color:var(--deep-ink); font:800 12px/1.2 var(--body); letter-spacing:.06em; text-transform:uppercase; transform:rotate(-2deg); cursor:pointer; box-shadow:0 5px 0 -2px rgba(0,0,0,.3); }
.wf-label.echt{ background:var(--hi); color:var(--hi-ink); }
.wf-label:hover{ transform:rotate(0deg) scale(1.05); }
.wf > div{ display:none; height:100%; flex-direction:column; gap:12px; animation:pop .4s cubic-bezier(.3, 1.4, .5, 1); }
.wf[data-soort="website"] .wf-website, .wf[data-soort="webshop"] .wf-webshop, .wf[data-soort="etalage"] .wf-etalage, .wf[data-soort="webapp"] .wf-webapp{ display:flex; }
.wf i{ display:block; border-radius:6px; background:color-mix(in srgb, var(--card-ink) 16%, var(--card)); }
.wf-nav{ display:flex; align-items:center; gap:10px; }
.wf-nav i{ width:9%; height:9px; }
.wf-nav .wf-logo{ width:12%; height:18px; background:var(--card-ink); margin-right:auto; }
.wf-nav .wf-knop, .wf-hero .wf-knop{ width:13%; height:22px; border-radius:999px; background:var(--pop); }
.wf-nav .wf-zoek{ width:22%; height:20px; border-radius:999px; }
.wf-nav .wf-mand{ width:22px; height:22px; border-radius:50%; background:var(--pop); }
.wf-hero{ flex:1; display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center; }
.wf-hero > div{ display:grid; gap:9px; align-content:center; }
.wf-hero .wf-h1{ height:22px; background:var(--card-ink); }
.wf-hero .wf-h1.kort{ width:70%; }
.wf-hero .wf-p{ height:8px; }
.wf-hero .wf-knop{ width:34%; margin-top:6px; }
.wf-beeld{ height:100%; min-height:80px; background:linear-gradient(135deg, var(--hi), var(--pop)) !important; border-radius:14px !important; }
.wf-drie{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; height:18%; }
.wf-grid{ flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.wf-grid.drie{ grid-template-columns:repeat(3, 1fr); }
.wf-grid i{ position:relative; border-radius:10px; background:var(--card); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--card-ink) 14%, var(--card)); }
.wf-grid i::before{ content:""; position:absolute; left:10%; right:10%; top:10%; height:48%; border-radius:6px; background:color-mix(in srgb, var(--card-ink) 12%, var(--card)); }
.wf-grid i::after{ content:""; position:absolute; left:10%; width:45%; bottom:12%; height:8px; border-radius:4px; background:var(--pop); }
.wf-etalage .wf-grid i::after{ background:var(--ok); width:30%; }
.wf-schap{ flex:1; display:grid; grid-template-columns:22% 1fr; gap:12px; }
.wf-filter{ display:grid; gap:8px; align-content:start; padding:10px; border-radius:10px; background:var(--card); }
.wf-filter i{ height:9px; }
.wf-filter i:first-child{ background:var(--card-ink); height:14px; }
.wf-app2{ flex:1; display:grid; grid-template-columns:22% 1fr; gap:12px; height:100%; }
.wf-side{ display:grid; gap:8px; align-content:start; padding:12px; border-radius:12px; background:var(--deep); }
.wf-side i{ height:10px; background:color-mix(in srgb, var(--deep-ink) 30%, var(--deep)); }
.wf-side .wf-logo{ height:16px; width:70%; background:var(--deep-ink); margin-bottom:6px; }
.wf-side .aan{ background:var(--hi); }
.wf-main{ display:grid; gap:10px; grid-template-rows:auto 1fr; }
.wf-tegels{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.wf-tegels i{ height:46px; border-radius:10px; background:var(--card); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--card-ink) 14%, var(--card)); }
.wf-rijen{ display:grid; gap:8px; align-content:start; padding:10px; border-radius:10px; background:var(--card); }
.wf-rijen i{ height:11px; }
.wf-rijen i:nth-child(2n){ width:80%; }
.bouw-uitleg{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-top:16px; }
.bouw-uitleg p{ margin:0; max-width:52ch; font-size:17px; }
.bouw-uitleg .ext{ white-space:nowrap; }
.los{ margin-top:clamp(28px, 4vw, 40px); display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, .6fr); gap:18px 32px; align-items:center; padding:clamp(22px, 3vw, 32px); border:3px dashed currentColor; border-radius:30px; }
.los-k{ margin:0 0 6px; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.los h3{ margin:0 0 8px; font-family:var(--display); font-variation-settings:"wdth" 115, "wght" 900; font-size:clamp(26px, 3vw, 38px); line-height:1; }
.los p{ margin:0; max-width:56ch; }
.los-prijs{ display:grid; gap:6px; justify-items:start; }
.los-prijs b{ font-family:var(--display); font-variation-settings:"wdth" 110, "wght" 900; font-size:clamp(30px, 3.4vw, 44px); line-height:1; }
.los-prijs span{ font-size:14px; font-weight:600; margin-bottom:8px; }

/* ---------- de knoop ---------- */
.knoop-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; margin-bottom:22px; }
.btn.big{ font-size:clamp(17px, 1.8vw, 21px); padding:16px 28px; }
.meters{ display:flex; flex-wrap:wrap; gap:10px; }
.meter{ display:grid; gap:2px; padding:10px 16px; border:2px solid currentColor; border-radius:16px; min-width:122px; }
.meter span{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.meter b{ font-family:var(--display); font-variation-settings:"wdth" 110, "wght" 900; font-size:26px; line-height:1.05; font-variant-numeric:tabular-nums; }
.stage{ position:relative; height:600px; border:2px dashed var(--faint); border-radius:32px; overflow:hidden; background-image:radial-gradient(var(--faint) 1.2px, transparent 1.6px); background-size:26px 26px; }
.wires{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.w{ fill:none; stroke:var(--sec-ink); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-dasharray:2000; stroke-dashoffset:2000; transition:stroke-dashoffset .9s cubic-bezier(.5, 0, .2, 1); transition-delay:calc(var(--i) * 70ms + 200ms); }
.w-flow{ fill:none; stroke:var(--pop); stroke-width:6; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:.5 12; opacity:0; transition:opacity .4s 1.1s; }
.stage[data-state="orde"] .w{ stroke-dashoffset:0; }
.stage[data-state="orde"] .w-flow{ opacity:1; animation:flow 1.3s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-12.5; } }
.tile{ position:absolute; left:var(--x); top:var(--y); z-index:2; transform:translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg)); display:flex; align-items:center; gap:10px; min-width:150px; padding:9px 16px 9px 9px; background:var(--card); color:var(--card-ink); border:2px solid var(--card-ink); border-radius:18px; text-align:left; cursor:pointer; box-shadow:0 8px 0 -3px var(--shadow); transition:left .85s cubic-bezier(.2, .9, .25, 1.12), top .85s cubic-bezier(.2, .9, .25, 1.12), transform .85s cubic-bezier(.2, .9, .25, 1.12), opacity .5s, filter .5s; }
.tile i{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-style:normal; font-family:var(--display); font-variation-settings:"wdth" 110, "wght" 900; font-size:17px; flex:none; }
.tile:nth-of-type(3n+1) i{ background:var(--hi); color:var(--hi-ink); }
.tile:nth-of-type(3n+2) i{ background:var(--pop); color:var(--pop-ink); }
.tile:nth-of-type(3n) i{ background:var(--deep); color:var(--deep-ink); }
.tile b{ display:block; font-size:15px; line-height:1.15; }
.tile small{ display:block; font-size:12px; font-weight:600; opacity:.75; }
.tile .retired{ position:absolute; left:50%; top:-14px; transform:translateX(-50%) rotate(-4deg); background:var(--pop); color:var(--pop-ink); border-radius:999px; padding:2px 10px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; opacity:0; transition:opacity .4s .8s; }
.stage[data-state="chaos"] .tile{ touch-action:none; cursor:grab; }
.tile.dragging{ transition:none; z-index:6; cursor:grabbing; box-shadow:0 16px 0 -4px var(--shadow); }
.tile.sel{ box-shadow:0 0 0 4px var(--pop), 0 8px 0 -3px var(--shadow); }
.tile.wiggle{ animation:wiggle .45s; }
@keyframes wiggle{ 25%{ rotate:-6deg; } 75%{ rotate:6deg; } }
.stage[data-state="orde"] .tile.pensioen{ opacity:.6; filter:grayscale(1); }
.stage[data-state="orde"] .tile.pensioen .retired{ opacity:1; filter:none; }
.hub{ position:absolute; left:50%; top:50%; z-index:3; transform:translate(-50%, -50%) scale(0); display:grid; justify-items:center; gap:4px; padding:18px 26px; background:var(--deep); color:var(--deep-ink); border:0; border-radius:26px; text-align:center; cursor:pointer; box-shadow:0 12px 0 -4px var(--shadow); visibility:hidden; transition:transform .55s cubic-bezier(.3, 1.6, .5, 1) .35s, visibility 0s .9s; }
.hub .bm{ width:22px; height:auto; }
.hub b{ font-family:var(--display); font-variation-settings:"wdth" 118, "wght" 900; font-size:clamp(20px, 2.2vw, 28px); line-height:1; }
.hub span{ font-size:12.5px; font-weight:700; opacity:.85; }
.stage[data-state="orde"] .hub{ transform:translate(-50%, -50%) scale(1); visibility:visible; transition:transform .55s cubic-bezier(.3, 1.6, .5, 1) .35s, visibility 0s 0s; }
.postit{ position:absolute; left:var(--x); top:var(--y); z-index:1; transform:translate(-50%, -50%) rotate(var(--r, 0deg)); max-width:150px; padding:10px 12px 12px; background:var(--hi); color:var(--hi-ink); font-family:var(--display); font-variation-settings:"wdth" 80, "wght" 750; font-size:16px; line-height:1.1; box-shadow:0 8px 12px -8px var(--shadow); pointer-events:none; transition:transform .6s cubic-bezier(.5, -.4, .6, 1), opacity .5s; }
.stage[data-state="orde"] .postit{ opacity:0; transform:translate(-50%, -50%) translate(var(--fx), var(--fy)) rotate(calc(var(--r) * 6)) scale(.4); }
.k-panel{ margin-top:18px; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px 32px; align-items:center; padding:20px 24px; background:var(--card); color:var(--card-ink); border-radius:22px; min-height:128px; }
.k-panel h3{ font-size:20px; font-weight:800; margin:0 0 4px; }
.k-panel p{ margin:0; max-width:62ch; }

/* ---------- eigen omgeving ---------- */
.env{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 3vw, 44px); align-items:start; }
.mods{ display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; }
.mod{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border:2px solid currentColor; border-radius:999px; background:transparent; color:inherit; font-weight:700; font-size:15px; cursor:pointer; transition:transform .2s, background .2s, color .2s; }
.mod::before{ content:""; width:36px; height:20px; border-radius:999px; background:radial-gradient(circle at 10px 50%, var(--sec-ink) 0 6px, transparent 6.5px), var(--faint); flex:none; }
.mod[aria-pressed="true"]{ background:var(--sec-ink); color:var(--sec); }
.mod[aria-pressed="true"]::before{ background:radial-gradient(circle at 26px 50%, var(--sec) 0 6px, transparent 6.5px), var(--hi); }
.mod:hover{ transform:rotate(-1.5deg); }
.mod.wild{ border-style:dashed; }
.app{ background:var(--card); color:var(--card-ink); border-radius:22px; overflow:hidden; box-shadow:0 30px 60px -30px var(--shadow); }
.app-bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:2px solid color-mix(in srgb, var(--card-ink) 14%, var(--card)); font-size:13px; font-weight:700; }
.dots3{ display:inline-flex; gap:6px; flex:none; }
.dots3 i{ width:10px; height:10px; border-radius:50%; background:color-mix(in srgb, var(--card-ink) 25%, var(--card)); }
.app-url{ background:color-mix(in srgb, var(--card-ink) 8%, var(--card)); border-radius:8px; padding:4px 12px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-in{ display:grid; grid-template-columns:minmax(0, 190px) minmax(0, 1fr); min-height:360px; }
.app-side{ background:var(--deep); color:var(--deep-ink); padding:16px 12px; display:flex; flex-direction:column; gap:4px; }
.app-side b{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; margin:0 4px 12px; }
.app-side b .bm{ width:12px; height:auto; }
.side-list{ display:flex; flex-direction:column; gap:4px; }
.side-list span{ padding:7px 10px; border-radius:10px; font-size:14px; font-weight:600; animation:pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.side-list span.on{ background:var(--hi); color:var(--hi-ink); }
.side-list .leeg{ opacity:.6; font-style:italic; }
@keyframes pop{ from{ transform:scale(.6); opacity:0; } }
.app-main{ padding:22px; display:grid; align-content:start; gap:14px; }
.app-main h3{ font-family:var(--display); font-variation-settings:"wdth" 115, "wght" 900; font-size:28px; line-height:1; margin:0; }
.app-main p{ margin:0; }
.sk{ display:grid; gap:10px; margin-top:6px; }
.sk-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.sk-tiles i{ height:58px; border-radius:12px; background:color-mix(in srgb, var(--card-ink) 8%, var(--card)); position:relative; }
.sk-tiles i::before, .sk-tiles i::after{ content:""; position:absolute; left:12px; height:8px; border-radius:4px; background:color-mix(in srgb, var(--card-ink) 28%, var(--card)); }
.sk-tiles i::before{ top:14px; width:40%; }
.sk-tiles i::after{ top:32px; width:62%; background:var(--pop); }
.sk-rows i{ display:block; height:12px; border-radius:6px; margin-bottom:10px; background:color-mix(in srgb, var(--card-ink) 12%, var(--card)); animation:grow .6s ease both; }
.sk-rows i:nth-child(1){ width:92%; } .sk-rows i:nth-child(2){ width:74%; animation-delay:.06s; } .sk-rows i:nth-child(3){ width:84%; animation-delay:.12s; } .sk-rows i:nth-child(4){ width:58%; animation-delay:.18s; }
@keyframes grow{ from{ transform:scaleX(0); transform-origin:left; } }
.nieuw{ display:grid; place-items:center; text-align:center; gap:8px; min-height:260px; }
.nieuw b{ font-family:var(--display); font-variation-settings:"wdth" 130, "wght" 900; font-size:clamp(40px, 5vw, 64px); line-height:.9; }
.nieuw span{ background:var(--pop); color:var(--pop-ink); border-radius:999px; padding:6px 16px; font-weight:800; transform:rotate(-4deg); }
.facts{ list-style:none; margin:clamp(32px, 4vw, 48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px 28px; }
.facts li{ border-top:2px solid currentColor; padding-top:12px; font-size:15.5px; }
.facts b{ display:block; font-size:17px; margin-bottom:2px; }

/* ---------- kassa ---------- */
.kassa-grid{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr); gap:clamp(28px, 4vw, 64px); align-items:center; }
.kassa-txt{ display:flex; flex-direction:column; gap:16px; }
.kassa-txt > p{ margin:0; max-width:44ch; }
.kassa-k{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.hw{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.hw li{ padding:8px 16px; border-radius:999px; background:var(--card); color:var(--card-ink); font-weight:800; font-size:15px; transform:rotate(-1.2deg); box-shadow:0 6px 0 -2px rgba(0,0,0,.35); }
.hw li:nth-child(2n){ transform:rotate(1.4deg); }
.hw li:nth-child(3n){ background:var(--hi); color:var(--hi-ink); }
.hw li:nth-child(5n){ background:var(--pop); color:var(--pop-ink); }
.kassa-noot{ font-size:13.5px; opacity:.75; }

/* kassa: bewegende demo (vinger, scanlijn, aanwijzen, de factuur als pdf).
   De telefoon staat hier links, want rechts zitten de bon en de knoppen Pin, Contant en Op rekening. */
.case-media.kd{ padding:0 0 9% 11%; }
.case-media.kd.solo{ padding:0; }
.kd .phone{ right:auto; left:0; }
.kd .toast{ left:auto; right:-3%; top:15%; bottom:auto; }
.kd-view{ position:relative; aspect-ratio:16 / 10; overflow:hidden; display:flex; flex-direction:column; background:var(--card); }
.kd-view > .kd-img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.kd-tel{ aspect-ratio:9 / 19; border-radius:19px; }
.kd-balk{ display:none; flex:none; align-items:center; gap:10px; height:34px; padding:0 12px; background:#323639; color:#F1F1F1; font-size:12px; font-weight:600; }
.kd-balk .kd-bestand{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kd-balk svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.kd-tel .kd-balk{ height:26px; padding:0 8px; gap:6px; font-size:9.5px; }
.kd-tel .kd-balk .kd-pag{ display:none; }
.kd-tel .kd-balk svg{ width:11px; height:11px; }
.kd-port{ position:relative; flex:1; overflow:hidden; }
.kd-doek{ position:absolute; left:0; right:0; top:0; transition:transform .9s cubic-bezier(.5, 0, .2, 1); }
.kd-doek > .kd-img{ display:block; width:100%; height:100%; }
.kd-view.pdf{ background:#525659; }
.kd-view.pdf .kd-balk{ display:flex; }
.kd-view.pdf .kd-doek{ left:13%; right:13%; top:14px; box-shadow:0 6px 18px rgba(0,0,0,.45); }
.kd-tel.pdf .kd-doek{ left:5%; right:5%; top:8px; }
/* op de computer: zijbalk met een miniatuur, de pagina rechts ervan (links staat de telefoon) */
.kd-duim{ display:none; position:absolute; left:0; top:0; bottom:0; width:20%; background:#3B3F43; padding-top:14px; }
.kd-duim img{ display:block; width:52%; margin:0 auto; outline:3px solid #8AB4F8; outline-offset:2px; }
.kd-duim span{ display:block; margin-top:6px; text-align:center; color:#E8EAED; font-size:11px; }
.kd-view.pdf:not(.kd-tel) .kd-duim{ display:block; }
.kd-view.pdf:not(.kd-tel) .kd-doek{ left:26%; right:6%; }
.kd-vinger, .kd-ring, .kd-wijs, .kd-scan{ position:absolute; pointer-events:none; opacity:0; z-index:3; }
.kd-vinger{ width:max(20px, 6.5%); aspect-ratio:1; border-radius:50%; background:rgba(21,23,31,.42); border:clamp(2px, .5vw, 4px) solid #fff; box-shadow:0 0 0 2px rgba(21,23,31,.5), 0 6px 18px rgba(0,0,0,.4); transform:translate(-50%, -50%); transition:left .8s cubic-bezier(.5, 0, .2, 1), top .8s cubic-bezier(.5, 0, .2, 1), opacity .25s, transform .15s; }
.kd-tel .kd-vinger{ width:max(12px, 15%); border-width:2px; }
.kd-vinger.aan{ opacity:1; }
.kd-vinger.druk{ transform:translate(-50%, -50%) scale(.78); }
.kd-vinger.druk::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:3px solid var(--hi); animation:kdrimpel .6s ease-out forwards; }
@keyframes kdrimpel{ from{ transform:scale(1); opacity:1; } to{ transform:scale(2.8); opacity:0; } }
.kd-ring{ width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; border:3px solid var(--pop); box-shadow:0 0 0 6px rgba(255,111,168,.3); transform:scale(.5); transition:opacity .3s, transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.kd-ring.aan{ opacity:1; transform:none; }
.kd-wijs{ width:max-content; max-width:min(62%, 300px); padding:7px 11px; border-radius:10px; background:var(--hi); color:var(--hi-ink); font-size:13px; font-weight:800; line-height:1.25; box-shadow:0 6px 14px rgba(0,0,0,.3); transform:translate(30px, -50%); transition:opacity .3s; }
.kd-wijs.kd-links{ transform:translate(-30px, -50%); }
.kd-wijs.aan{ opacity:1; }
.kd-scan{ width:30%; height:3px; margin-top:-1px; background:#FF3B3B; box-shadow:0 0 12px 3px rgba(255,59,59,.75); transform:translateX(-50%) scaleX(.1); }
.kd-scan.aan{ opacity:1; animation:kdscan .5s ease-in-out 4 alternate; }
@keyframes kdscan{ from{ transform:translateX(-50%) scaleX(.1); } to{ transform:translateX(-50%) scaleX(1); } }
.kd-uitleg{ position:absolute; left:50%; bottom:12px; z-index:4; margin:0; max-width:calc(100% - 24px); padding:6px 13px; border-radius:999px; background:var(--deep); color:var(--deep-ink); font-size:12.5px; font-weight:700; line-height:1.3; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transform:translate(-50%, 8px); opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; }
.kd-uitleg.aan{ opacity:1; transform:translate(-50%, 0); }
.kd-tel .kd-uitleg{ bottom:8px; padding:4px 9px; font-size:10px; }
.kd-js .kd-view{ cursor:pointer; }
.kd-js .toast{ animation:none; opacity:0; transform:translateY(12px); transition:opacity .35s, transform .35s; }
.kd-js .toast.aan{ opacity:1; transform:none; }
.kd-knop{ flex:none; width:28px; height:28px; border-radius:50%; border:2px solid currentColor; background:transparent; color:inherit; cursor:pointer; position:relative; }
.kd-knop::before, .kd-knop::after{ content:""; position:absolute; top:7px; width:3px; height:10px; background:currentColor; border-radius:1px; }
.kd-knop::before{ left:8px; }
.kd-knop::after{ right:8px; }
.kd-knop[aria-pressed="true"]::before{ left:9px; width:0; height:0; background:none; border-style:solid; border-width:5px 0 5px 9px; border-color:transparent transparent transparent currentColor; border-radius:0; }
.kd-knop[aria-pressed="true"]::after{ display:none; }
#kassa .facts{ margin-top:clamp(36px, 5vw, 56px); }

/* ---------- als-dan ---------- */
.machine{ background:var(--card); color:var(--card-ink); border-radius:30px; padding:clamp(22px, 3vw, 40px); box-shadow:0 12px 0 -4px var(--shadow); }
.zin{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px 16px; align-items:center; font-family:var(--display); font-variation-settings:"wdth" 100, "wght" 800; font-size:clamp(22px, 3vw, 40px); line-height:1.2; margin:0; }
.zin select{ justify-self:start; appearance:none; -webkit-appearance:none; max-width:100%; font:inherit; font-variation-settings:inherit; color:var(--card-ink); background:var(--hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M1 1l6 7 6-7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 14px center; border:2px solid var(--card-ink); border-radius:14px; padding:0 40px 0 14px; cursor:pointer; text-overflow:ellipsis; }
.m-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.m-row .btn{ --sec:var(--card); --sec-ink:var(--card-ink); }
.dice{ display:inline-block; width:22px; height:22px; border-radius:6px; background:var(--card); position:relative; }
.dice::before{ content:""; position:absolute; inset:4px; background:radial-gradient(circle, var(--card-ink) 0 2px, transparent 2.5px) 0 0 / 7px 7px; }
.btn.spin .dice{ animation:spin .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes spin{ to{ transform:rotate(540deg); } }
.flow{ position:relative; display:flex; align-items:center; gap:0; margin-top:clamp(24px, 3vw, 36px); padding:clamp(16px, 2vw, 24px); border-radius:22px; background:color-mix(in srgb, var(--card-ink) 6%, var(--card)); }
.f-node{ flex:0 1 auto; padding:12px 16px; border-radius:16px; background:var(--card); border:2px solid var(--card-ink); font-weight:800; font-size:15px; text-align:center; min-width:0; }
.f-node.core{ background:var(--deep); color:var(--deep-ink); border-color:var(--deep); }
.pipe{ flex:1 1 40px; min-width:24px; height:6px; background:repeating-linear-gradient(90deg, var(--card-ink) 0 8px, transparent 8px 18px); background-size:18px 6px; animation:pipe .7s linear infinite; }
@keyframes pipe{ to{ background-position:18px 0; } }
.kan{ position:absolute; right:clamp(10px, 2vw, 24px); top:-26px; background:var(--pop); color:var(--pop-ink); border:3px solid var(--pop-ink); border-radius:14px; padding:6px 16px; font-family:var(--display); font-variation-settings:"wdth" 115, "wght" 900; font-size:clamp(20px, 2.2vw, 28px); transform:rotate(-7deg); }
.kan.bam{ animation:bam .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bam{ from{ transform:rotate(-7deg) scale(2.2); opacity:0; } }

/* ---------- werk ---------- */
.case{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr); gap:clamp(28px, 4vw, 64px); align-items:center; padding-block:clamp(32px, 4vw, 56px); border-top:2px solid var(--faint); }
.case:nth-of-type(even){ grid-template-columns:minmax(0, .7fr) minmax(0, 1.3fr); }
.case:nth-of-type(even) .case-media{ order:2; }
.case.here{ outline:4px dashed var(--hi); outline-offset:10px; border-radius:18px; }
.case-media{ position:relative; padding:0 11% 9% 0; }
.case-media.solo{ padding:0; }
.browser{ position:relative; background:var(--card); color:var(--card-ink); border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -30px var(--shadow); }
.b-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:9px 12px; border-bottom:2px solid color-mix(in srgb, var(--card-ink) 14%, var(--card)); font-size:12.5px; font-weight:700; }
.b-tabs{ display:flex; gap:4px; margin-left:auto; }
.b-tab{ border:0; background:transparent; color:inherit; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; cursor:pointer; }
.b-tab:hover{ background:color-mix(in srgb, var(--card-ink) 10%, var(--card)); }
.b-tab[aria-pressed="true"]{ background:var(--card-ink); color:var(--card); }
.shot{ position:relative; overflow:hidden; aspect-ratio:16 / 10; cursor:pointer; }
.shot img{ position:absolute; left:0; top:0; width:100%; height:auto; display:block; transition:top 1.2s ease, transform 1.2s ease; }
.shot.go img{ top:100%; transform:translateY(-100%); transition-duration:9s; transition-timing-function:linear; }
@media (hover:hover){ .shot:hover img{ top:100%; transform:translateY(-100%); transition-duration:9s; transition-timing-function:linear; } }
.hshot img{ top:0 !important; height:100%; width:auto; max-width:none; transition:transform .8s cubic-bezier(.6, 0, .2, 1) !important; }
.phone{ position:absolute; right:0; bottom:0; width:25%; background:var(--deep); border:7px solid var(--deep); border-radius:26px; overflow:hidden; box-shadow:0 24px 40px -20px var(--shadow); }
.phone .shot{ aspect-ratio:9 / 19; border-radius:19px; }
.phone .shot.go img{ transition-duration:7s; }
@media (hover:hover){ .phone .shot:hover img{ transition-duration:7s; } }
.toast{ position:absolute; left:-3%; bottom:13%; z-index:2; display:flex; align-items:center; gap:10px; max-width:300px; padding:10px 14px; background:var(--card); color:var(--card-ink); border:2px solid var(--card-ink); border-radius:16px; font-size:13.5px; font-weight:700; line-height:1.25; box-shadow:0 10px 0 -4px var(--shadow); animation:toast 7s ease-in-out infinite; }
.toast::before{ content:""; width:12px; height:12px; border-radius:50%; background:var(--pop); flex:none; }
@keyframes toast{ 0%, 8%{ opacity:0; transform:translateY(14px); } 14%, 80%{ opacity:1; transform:none; } 90%, 100%{ opacity:0; transform:translateY(-8px); } }
.case-txt{ display:flex; flex-direction:column; gap:14px; container-type:inline-size; }
.nr{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0; }
.here-tag{ align-self:flex-start; background:var(--hi); color:var(--hi-ink); border-radius:999px; padding:3px 12px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.case h3{ font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 900; font-size:clamp(28px, 3.6vw, 56px); font-size:min(56px, 10cqi); line-height:.95; margin:0; overflow-wrap:anywhere; hyphens:manual; }
.case-txt > p:not(.nr){ margin:0; color:var(--muted); max-width:46ch; }
.free{ margin-top:clamp(28px, 4vw, 48px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; padding:clamp(22px, 3vw, 36px); border:3px dashed currentColor; border-radius:30px; }
.free b{ display:block; font-family:var(--display); font-variation-settings:"wdth" 118, "wght" 900; font-size:clamp(28px, 3.4vw, 44px); line-height:1; }
.free p{ margin:6px 0 0; color:var(--muted); }
.free-knoppen{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- verhaal ---------- */
.statement{ font-family:var(--display); font-variation-settings:"wdth" 100, "wght" 800; font-size:clamp(30px, 4.6vw, 64px); line-height:1.06; letter-spacing:-.01em; margin:0; max-width:22ch; }
.statement mark{ background:var(--hi); color:var(--hi-ink); padding:0 .14em; border-radius:.14em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.story{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 48px; margin-top:clamp(36px, 5vw, 64px); max-width:980px; }
.story p{ margin:0; font-size:clamp(17px, 1.5vw, 19px); max-width:44ch; }

/* ---------- rekenmodule ---------- */
.calc{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, 4vw, 56px); align-items:center; }
.fields{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 20px; }
.field{ display:grid; gap:6px; align-content:end; }
.field label{ font-size:14.5px; font-weight:700; }
.field input{ width:100%; font-weight:800; font-size:24px; color:var(--card-ink); background:var(--card); border:2px solid var(--card-ink); border-radius:14px; padding:10px 14px; font-variant-numeric:tabular-nums; }
.result{ background:var(--deep); color:var(--deep-ink); border-radius:30px; padding:clamp(24px, 3vw, 40px); container-type:inline-size; }
.result p{ margin:0; }
.result .r-k{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.result .r-big{ font-family:var(--display); font-variation-settings:"wdth" 120, "wght" 900; font-size:min(120px, 34cqi); line-height:.9; margin:10px 0 4px; font-variant-numeric:tabular-nums; }
.result .r-sub{ font-size:18px; font-weight:700; }
.result .r-note{ margin-top:18px; font-size:15px; opacity:.9; }

/* ---------- prijzen ---------- */
.quiz{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px 28px; margin-bottom:clamp(28px, 4vw, 44px); padding:clamp(20px, 2.6vw, 28px); border:2px solid currentColor; border-radius:26px; }
.q p{ margin:0 0 10px; font-weight:800; }
.q-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.q-opt{ padding:8px 14px; border:2px solid currentColor; border-radius:999px; background:transparent; color:inherit; font-weight:700; font-size:14.5px; cursor:pointer; }
.q-opt[aria-pressed="true"]{ background:var(--sec-ink); color:var(--sec); }
.q-out{ grid-column:1 / -1; margin:0; font-family:var(--display); font-variation-settings:"wdth" 105, "wght" 850; font-size:clamp(20px, 2.2vw, 28px); line-height:1.15; }
.q-out mark{ background:var(--hi); color:var(--hi-ink); padding:0 .15em; border-radius:.15em; }
.tiers{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2vw, 28px); align-items:start; padding-top:18px; }
.tier{ position:relative; display:flex; flex-direction:column; gap:16px; padding:clamp(22px, 2.6vw, 32px); background:var(--card); color:var(--card-ink); border-radius:30px; transform:rotate(var(--r, 0deg)); box-shadow:0 12px 0 -4px var(--shadow); transition:transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .35s; }
.tier.fav{ background:var(--hi); color:var(--hi-ink); }
.tier{ scroll-margin-top:28px; }
.tier:target{ outline:4px dashed var(--pop); outline-offset:8px; animation:wiebel .55s ease-in-out 2; }
@keyframes wiebel{ 0%, 100%{ transform:rotate(var(--r, 0deg)); } 50%{ transform:rotate(calc(var(--r, 0deg) + 2.5deg)) scale(1.02); } }
.tier.match{ transform:rotate(0deg) translateY(-12px); box-shadow:0 0 0 5px var(--pop), 0 26px 30px -20px var(--shadow); }
.tier-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.size{ font-family:var(--display); font-variation-settings:"wdth" 150, "wght" 900; font-size:54px; line-height:.8; }
.tier h3{ font-family:var(--display); font-variation-settings:"wdth" 118, "wght" 900; font-size:clamp(28px, 2.8vw, 36px); line-height:.95; margin:0; }
.for{ margin:0; font-weight:600; }
.price{ display:grid; gap:8px; padding:14px 16px; border:2px solid currentColor; border-radius:18px; }
.p-main{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }
.p-main small{ font-size:14px; font-weight:700; }
.p-main b{ font-family:var(--display); font-variation-settings:"wdth" 110, "wght" 900; font-size:clamp(40px, 4vw, 52px); line-height:.9; font-variant-numeric:tabular-nums; }
.p-main span{ font-size:15px; font-weight:700; }
.p-sub{ display:flex; justify-content:space-between; gap:12px; padding-top:8px; border-top:2px dashed currentColor; font-size:14.5px; }
.p-sub b{ font-weight:800; text-align:right; }
.extra{ margin-top:clamp(28px, 4vw, 40px); display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.extra > b{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-right:6px; }
.extra span{ display:inline-flex; gap:8px; align-items:baseline; padding:7px 14px; border-radius:999px; background:var(--card); color:var(--card-ink); font-size:14.5px; font-weight:700; transform:rotate(var(--r, 0deg)); }
.extra span i{ font-style:normal; font-family:var(--display); font-variation-settings:"wdth" 105, "wght" 900; }
.extra.maat{ margin-top:14px; }
.extra.maat span{ background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor; }
.maat-reken{ color:inherit; font-weight:800; font-size:14.5px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.tier ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.tier li{ display:grid; grid-template-columns:22px minmax(0, 1fr); gap:8px; font-size:15.5px; }
.tier li::before{ content:""; width:18px; height:18px; margin-top:3px; border-radius:50%; border:2px solid currentColor; background:radial-gradient(circle, currentColor 0 3.5px, transparent 4px); }
.tier .btn{ align-self:flex-start; --sec:var(--card); --sec-ink:var(--card-ink); }
.tier.fav .btn{ --sec:var(--hi); --sec-ink:var(--hi-ink); }
.fav-st{ position:absolute; top:-18px; left:22px; background:var(--pop); color:var(--pop-ink); border:2px solid var(--pop-ink); border-radius:999px; padding:5px 14px; font-weight:800; font-size:13px; transform:rotate(-5deg); }
.tbl{ margin-top:clamp(36px, 5vw, 56px); overflow-x:auto; border-top:3px solid currentColor; }
.cmp{ width:100%; min-width:640px; border-collapse:collapse; font-size:15.5px; }
.cmp th, .cmp td{ padding:13px 14px 13px 0; border-bottom:2px solid var(--faint); text-align:left; vertical-align:middle; }
.cmp thead th{ font-family:var(--display); font-variation-settings:"wdth" 110, "wght" 850; font-size:17px; }
.cmp tbody th{ font-weight:700; width:34%; }
.ja, .nee{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; vertical-align:middle; }
.ja{ background:var(--hi); border:2px solid var(--hi-ink); }
.ja::after{ content:""; width:6px; height:11px; border:solid var(--hi-ink); border-width:0 3px 3px 0; transform:translateY(-1px) rotate(45deg); }
.nee{ border:2px dashed var(--faint); }
.tiers-note{ margin:24px 0 0; font-size:17px; font-weight:600; }
.tier-knoppen{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.tier-reken{ color:inherit; font-weight:800; font-size:14.5px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }

/* ---------- hosting: serverkast met lampjes, verkeer via https, hartslag en het logboek ---------- */
.host{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(28px, 4vw, 56px); align-items:start; }
.host-l{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.verkeer{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.vk-punt{ flex:none; padding:4px 10px; border:2px solid currentColor; border-radius:999px; }
.vk-lijn{ position:relative; flex:1; min-width:24px; height:12px; }
.vk-lijn::before{ content:""; position:absolute; left:0; right:0; top:5px; height:2px; background:repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 40%, transparent) 0 6px, transparent 6px 12px); }
.vk-lijn i{ position:absolute; top:1px; left:0; width:10px; height:10px; border-radius:50%; background:var(--hi); animation:vk 2.4s linear infinite; }
.vk-lijn i:nth-child(2){ animation-delay:-.8s; }
.vk-lijn i:nth-child(3){ animation-delay:-1.6s; background:var(--pop); }
@keyframes vk{ 0%{ left:0; opacity:0; } 12%, 88%{ opacity:1; } 100%{ left:calc(100% - 10px); opacity:0; } }
.vk-slot{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--ok); color:var(--hi-ink); }
.vk-slot svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.rek{ display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:18px; background:#0B0D12; border:2px solid #232734; box-shadow:0 30px 50px -30px rgba(0,0,0,.7); }
.rek-kop{ display:flex; justify-content:space-between; align-items:center; padding:2px 4px 6px; color:#9AA1B5; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rek-leds{ display:flex; gap:6px; }
.rek-leds i{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:knipper 1.6s steps(1) infinite; }
.rek-leds i:nth-child(2){ background:var(--hi); box-shadow:0 0 8px var(--hi); animation-delay:-.5s; }
.rek-leds i:nth-child(3){ animation-delay:-1.1s; animation-duration:2.3s; }
.vak{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; background:linear-gradient(#232734, #191C25); border:1px solid #2E3342; color:#E7E9F0; font:600 14px/1.2 ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; }
.vak-naam{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vak-led{ width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); animation:knipper 2.2s infinite; }
.vak:nth-child(3n) .vak-led{ animation-duration:1.7s; }
.vak:nth-child(3n+1) .vak-led{ animation-duration:2.9s; }
.vak-act{ display:flex; align-items:flex-end; gap:3px; height:16px; }
.vak-act i{ width:4px; height:30%; border-radius:1px; background:#6B7390; animation:act 1.1s ease-in-out infinite alternate; }
.vak-act i:nth-child(2){ animation-duration:.8s; animation-delay:-.3s; }
.vak-act i:nth-child(3){ animation-duration:1.3s; animation-delay:-.6s; }
.vak-act i:nth-child(4){ animation-duration:.9s; animation-delay:-.2s; }
.vak-act i:nth-child(5){ animation-duration:1.5s; animation-delay:-.5s; }
@keyframes act{ from{ height:20%; } to{ height:100%; } }
@keyframes knipper{ 0%, 70%{ opacity:1; } 75%, 85%{ opacity:.25; } 100%{ opacity:1; } }
.vak-nieuw{ border-color:var(--hi); animation:inschuif .7s cubic-bezier(.2, 1.3, .4, 1); }
.vak-nieuw .vak-led{ background:var(--hi); box-shadow:0 0 10px var(--hi); }
.vak-nieuw.klaar .vak-led{ background:var(--ok); box-shadow:0 0 10px var(--ok); }
@keyframes inschuif{ from{ transform:translateX(-36px); opacity:0; } to{ transform:none; opacity:1; } }
.rek-voet{ display:flex; justify-content:space-between; padding:4px 6px 0; }
.rek-voet i{ width:26px; height:6px; border-radius:3px; background:#2E3342; }
.hartslag{ display:flex; align-items:center; gap:12px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.hartslag svg{ flex:1; min-width:0; height:34px; }
.hartslag path.basis{ stroke:color-mix(in srgb, var(--ok) 30%, transparent); stroke-dasharray:none; animation:none; }
.hartslag path{ fill:none; stroke:var(--ok); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:32 68; animation:ecg 2.6s linear infinite; }
@keyframes ecg{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
.host-knop{ align-self:flex-start; }
.host-knop:disabled{ opacity:.8; cursor:default; transform:none; }
.term{ min-width:0; border-radius:16px; overflow:hidden; background:#0B0D12; border:1px solid #2E3342; box-shadow:0 30px 50px -30px rgba(0,0,0,.7); }
.term-bar{ display:flex; align-items:center; gap:10px; padding:9px 12px; background:#1A1D27; color:#E7E9F0; font-size:12.5px; font-weight:700; }
.term-bar .dots3 i{ background:#3A3F50; }
.term-bar .app-url{ background:#232734; }
.term-in{ margin:0; padding:16px 18px; color:#D6DAE6; font:500 13.5px/1.75 ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.term-in .tijd{ color:#8A91A6; }
.term-in .ok{ color:#4ADE80; font-weight:700; }
.term-cursor{ display:inline-block; width:.6em; height:1.1em; margin-left:2px; vertical-align:-.2em; background:var(--hi); animation:knipper 1s steps(1) infinite; }

/* ---------- offerte-calculator: links kiezen, rechts de bon ---------- */
.of{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(28px, 4vw, 64px); align-items:start; }
.of-form{ display:flex; flex-direction:column; gap:28px; min-width:0; }
.of-f{ border:0; margin:0; padding:0; min-width:0; }
.of-f legend, .of-num label{ display:block; padding:0; margin-bottom:12px; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.of-pk{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.of-kies, .of-vink{ position:relative; cursor:pointer; }
.of-kies input, .of-vink input{ position:absolute; opacity:0; width:1px; height:1px; }
.of-kies span{ display:flex; flex-direction:column; gap:2px; height:100%; padding:14px 16px; border:2px solid currentColor; border-radius:18px; transition:background-color .2s, color .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.of-kies b{ font-size:17px; }
.of-kies small{ font-size:13.5px; opacity:.85; }
.of-kies input:checked + span{ background:var(--hi); color:var(--hi-ink); border-color:var(--hi); transform:rotate(-1.5deg); }
.of-ex{ display:flex; flex-wrap:wrap; gap:10px; }
.of-vink{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 12px; border:2px solid currentColor; border-radius:999px; font-weight:700; font-size:15px; transition:background-color .2s, color .2s; }
.of-vink::before{ content:""; flex:none; width:16px; height:16px; border-radius:5px; border:2px solid currentColor; }
.of-vink:has(input:checked:not(:disabled)){ background:var(--card); color:var(--card-ink); border-color:var(--card); }
.of-vink:has(input:checked:not(:disabled))::before{ background:var(--pop); border-color:var(--card-ink); box-shadow:inset 0 0 0 2px var(--card); }
.of-vink i{ font-style:normal; font-weight:800; opacity:.8; }
.of-vink em{ font-style:normal; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.of-vink em:empty{ display:none; }
.of-vink:has(input:disabled){ cursor:default; }
.of-vink:has(input:disabled):not(.erin){ opacity:.55; }
.of-vink.erin{ opacity:1; background:var(--hi); color:var(--hi-ink); border-color:var(--hi); }
.of-kies:has(input:focus-visible) span, .of-vink:has(input:focus-visible){ outline:3px solid var(--hi); outline-offset:3px; }
.of-num input{ width:min(100%, 12ch); font-weight:800; font-size:24px; color:var(--card-ink); background:var(--card); border:2px solid var(--card-ink); border-radius:14px; padding:10px 14px; font-variant-numeric:tabular-nums; }
.of-num small{ display:block; margin-top:8px; font-size:14px; opacity:.85; }
.of-num.uit{ opacity:.5; }
.of-maat{ display:grid; gap:8px; }
.of-m{ display:grid; grid-template-columns:minmax(0, 1fr) auto 64px; align-items:center; gap:4px 14px; padding:10px 12px 10px 16px; border:2px solid currentColor; border-radius:16px; transition:background-color .2s, color .2s; }
.of-m-naam{ display:flex; flex-direction:column; gap:1px; min-width:0; cursor:pointer; }
.of-m-naam b{ font-size:15.5px; }
.of-m-naam small{ font-size:13px; opacity:.8; }
.of-m-prijs{ font-weight:800; font-size:14.5px; text-align:right; white-space:nowrap; }
.of-m-prijs small{ display:block; font-weight:600; font-size:12.5px; opacity:.8; }
.of-m-in[type="number"]{ width:64px; font-weight:800; font-size:18px; padding:6px 6px; border-radius:10px; border:2px solid var(--card-ink); background:var(--card); color:var(--card-ink); text-align:center; font-variant-numeric:tabular-nums; }
.of-m-in[type="checkbox"]{ justify-self:center; width:26px; height:26px; margin:0; accent-color:var(--pop); cursor:pointer; }
.of-m em{ grid-column:1 / -1; font-style:normal; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.of-m em:empty{ display:none; }
.of-m.aan{ background:var(--card); color:var(--card-ink); border-color:var(--card); }
.of-m.uit{ opacity:.55; }
.of-m.erin{ background:var(--hi); color:var(--hi-ink); border-color:var(--hi); }
.of-regels li.of-groep{ border-bottom:0; padding:12px 0 2px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }
.of-regels li.of-groep:first-child{ padding-top:2px; }
.of-regels li span{ min-width:0; overflow-wrap:anywhere; }
.of-bon{ position:sticky; top:24px; margin-bottom:12px; padding:26px 24px 30px; background:var(--card); color:var(--card-ink); border-radius:6px 6px 0 0; box-shadow:0 24px 40px -24px rgba(0,0,0,.55); transform:rotate(1deg); }
.of-bon::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; background:linear-gradient(135deg, var(--card) 6px, transparent 0) 0 0 / 12px 12px repeat-x, linear-gradient(225deg, var(--card) 6px, transparent 0) 0 0 / 12px 12px repeat-x; }
.of-bon-k{ margin:0 0 10px; padding-bottom:12px; border-bottom:2px dashed color-mix(in srgb, var(--card-ink) 30%, var(--card)); text-align:center; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.of-regels{ list-style:none; margin:0; padding:0; }
.of-regels li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px dashed color-mix(in srgb, var(--card-ink) 22%, var(--card)); font-size:15px; }
.of-regels li b{ white-space:nowrap; }
.of-regels li small{ display:block; font-size:12.5px; opacity:.7; }
.of-tot{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:14px; padding-top:12px; border-top:2px solid var(--card-ink); font-weight:800; }
.of-tot b{ font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 900; font-size:clamp(30px, 3.4vw, 44px); line-height:1; white-space:nowrap; }
.of-sub{ display:flex; justify-content:space-between; gap:12px; margin-top:6px; font-size:15px; }
.of-sub b{ text-align:right; }
.of-noot{ margin:16px 0; font-size:13px; opacity:.75; }
.of-knoppen{ display:flex; flex-wrap:wrap; gap:10px; }
.of-bon .btn{ --sec:var(--card); --sec-ink:var(--card-ink); }
.of-tik{ animation:oftik .4s ease-out; }
@keyframes oftik{ from{ background:var(--hi); } to{ background:transparent; } }

/* ---------- zo werkt het ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px 28px; position:relative; }
.steps::before{ content:""; position:absolute; left:34px; right:34px; top:33px; border-top:3px dashed currentColor; }
.steps li{ position:relative; display:flex; flex-direction:column; gap:12px; }
.st-n{ width:68px; height:68px; border-radius:50%; background:var(--sec-ink); color:var(--sec); display:grid; place-items:center; font-family:var(--display); font-variation-settings:"wdth" 130, "wght" 900; font-size:30px; line-height:1; }
.steps li:nth-child(4) .st-n{ background:var(--pop); color:var(--pop-ink); border:3px solid var(--sec-ink); }
.steps h3{ font-size:22px; font-weight:800; line-height:1.2; letter-spacing:-.01em; margin:6px 0 0; }
.steps p{ margin:0; max-width:34ch; }

/* ---------- bel je broer ---------- */
.cta-in{ container-type:inline-size; }
.big{ margin:0; font-family:var(--display); font-weight:900; line-height:.9; font-size:9cqi; white-space:nowrap; }
.big .grp{ display:inline-block; white-space:nowrap; }
.big .l{ display:inline-block; }
.contact{ display:flex; flex-wrap:wrap; gap:16px 40px; margin-top:clamp(32px, 5vw, 56px); }
.contact > div{ display:grid; gap:8px; }
.c-k{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.ph{ display:inline-block; border:2px solid currentColor; border-radius:14px; padding:10px 18px; font-size:clamp(20px, 2.2vw, 26px); font-weight:800; text-decoration:none; overflow-wrap:anywhere; transition:background .2s, color .2s, transform .2s; }
.ph:hover{ background:var(--sec-ink); color:var(--sec); transform:rotate(-1.5deg); }
.cta-note{ margin:28px 0 0; font-size:18px; max-width:48ch; }

/* ---------- footer ---------- */
.foot{ padding-block:clamp(48px, 6vw, 72px) 40px; }
/* het merk over de hele breedte, de lijsten eronder; op een half scherm drie kolommen, op een telefoon twee (27-10-2026) */
.foot-in{ display:grid; grid-template-columns:repeat(5, auto); justify-content:space-between; gap:28px 48px; padding-bottom:40px; border-bottom:2px solid currentColor; }
/* logo en zin op een lijn (center: het logo heeft geen grondlijn, op baseline stond het hoger dan de tekst) */
.f-brand{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 32px; padding-bottom:24px; border-bottom:2px solid var(--faint); }
.f-brand .logo{ font-size:22px; }
.f-brand p{ margin:0; max-width:none; color:var(--muted); text-wrap:pretty; }
.f-col{ display:flex; flex-direction:column; gap:8px; }
.f-col b{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.f-col a{ text-decoration:none; font-weight:600; white-space:nowrap; }
.f-col a:hover{ text-decoration:underline; }
.foot-bot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; padding-top:24px; font-size:14px; font-weight:600; }
.badge{ display:inline-flex; align-items:center; gap:8px; background:var(--sec-ink); color:var(--sec); border-radius:999px; padding:7px 16px 7px 12px; font-weight:800; font-size:13.5px; }
.badge .bm{ width:11px; height:auto; }

.conf{ position:fixed; z-index:60; width:10px; height:14px; border-radius:2px; pointer-events:none; }

/* ---------- responsive ---------- */
/* half scherm: drie kolommen, de diensten (de langste lijst) over twee rijen links */
@media (max-width:1100px){
  .foot-in{ grid-template-columns:repeat(3, minmax(0, 1fr)); justify-content:stretch; gap:32px 28px; }
  .f-diensten{ grid-row:span 2; }
  .f-col a{ white-space:normal; }
}
@media (max-width:1000px){
  .facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .steps::before{ display:none; }
  .quiz{ grid-template-columns:1fr; }
  .tiers{ grid-template-columns:1fr; max-width:560px; }
  .env{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .bouw, .los{ grid-template-columns:minmax(0, 1fr); }
  .soorten{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .wf{ aspect-ratio:4 / 3; padding:10px; }
  .hero-row, .story, .calc, .case, .kassa-grid{ grid-template-columns:1fr; }
  .case:nth-of-type(even){ grid-template-columns:1fr; }
  .case:nth-of-type(even) .case-media{ order:0; }
  .nav-r .pill{ padding:9px 14px; font-size:14px; }
  .of{ grid-template-columns:1fr; }
  .host{ grid-template-columns:1fr; }
  .term-in{ font-size:12px; padding:12px 14px; }
  .of-pk{ grid-template-columns:1fr; }
  .of-m{ grid-template-columns:minmax(0, 1fr) 64px; }
  .of-m-prijs{ grid-column:1; grid-row:2; text-align:left; }
  .of-m-in{ grid-column:2; grid-row:1 / span 2; }
  .of-bon{ position:relative; top:0; transform:none; }
  .pk{ padding:11px 16px 11px 34px; }
  .pk-t{ font-size:15px; }
  .hint{ text-align:left; }
  .stapel{ min-height:0; aspect-ratio:1.3; margin-top:8px; }
  .stage{ height:660px; }
  .tile{ min-width:0; width:44%; max-width:170px; gap:8px; padding:7px 10px 7px 7px; border-radius:14px; }
  .tile i{ width:28px; height:28px; font-size:14px; border-radius:9px; }
  .tile b{ font-size:13px; }
  .tile small{ font-size:11px; }
  .postit{ font-size:13.5px; max-width:120px; padding:8px 10px; }
  .hub{ padding:12px 16px; border-radius:20px; }
  .k-panel{ grid-template-columns:1fr; }
  .app-in{ grid-template-columns:1fr; }
  .side-list{ flex-direction:row; flex-wrap:wrap; }
  .app-side b{ margin-bottom:6px; }
  .facts{ grid-template-columns:1fr; }
  .flow{ flex-direction:column; align-items:stretch; }
  .pipe{ flex:0 0 30px; width:6px; min-width:6px; height:30px; align-self:center; background:repeating-linear-gradient(180deg, var(--card-ink) 0 8px, transparent 8px 18px); background-size:6px 18px; animation-name:pipe-v; }
  @keyframes pipe-v{ to{ background-position:0 18px; } }
  .fields{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .steps::before{ display:block; left:33px; right:auto; top:34px; bottom:34px; border-top:0; border-left:3px dashed currentColor; }
  .steps li{ padding-left:92px; min-height:68px; }
  .st-n{ position:absolute; left:0; top:0; }
  .steps h3{ margin-top:0; }
  .big{ font-size:17cqi; }
  .big .grp{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .word span, .word:not(.live) span, .big .l, .band-run, .toast, .pipe, .w-flow, .sk-rows i, .side-list span{ animation:none !important; }
  .kd-doek, .kd-vinger, .kd-ring{ transition:none !important; }
  .tier:target{ animation:none; }
  .vk-lijn i, .rek-leds i, .vak-led, .vak-act i, .hartslag path, .term-cursor, .vak-nieuw{ animation:none !important; }
  .vk-lijn i:nth-child(2){ left:45%; }
  .vk-lijn i:nth-child(3){ left:calc(100% - 10px); }
  .tile, .hub, .postit, .w, .shot img, .btn, .rot > span, .tier, .mod{ transition:none !important; }
  /* de letters rekken dan niet: dus ook geen hint die dat belooft en geen handje */
  .hint{ display:none; }
  .word-in span, .big .l{ cursor:default; }
}

/* ---------- dienstpagina's (Websites, Koppelingen, Kassa, Hosting) ---------- */
.meer{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-weight:800; font-size:16.5px; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.meer::after{ content:"\2192"; text-decoration:none; transition:transform .2s; }
.meer:hover::after{ transform:translateX(4px); }
.dh-in{ padding-block:clamp(20px, 4vw, 48px) clamp(56px, 8vw, 104px); }
.kruimel{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:clamp(28px, 5vw, 56px); font-size:14.5px; font-weight:700; color:var(--muted); }
.kruimel a{ color:inherit; }
.kruimel [aria-current]{ color:var(--sec-ink); }
.dh-kop{ font-family:var(--display); font-variation-settings:"wdth" 118, "wght" 900; font-size:clamp(44px, 8.4vw, 124px); line-height:.9; letter-spacing:-.01em; margin:0; max-width:15ch; }
.dh-kop mark{ background:var(--hi); color:var(--hi-ink); padding:0 .12em; border-radius:.12em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.dh-intro{ font-size:clamp(18px, 1.8vw, 22px); max-width:54ch; margin:28px 0 30px; color:var(--muted); }
.dk{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.dk li{ background:var(--card); color:var(--card-ink); border:2px solid var(--card-ink); border-radius:22px; padding:22px 24px 24px; box-shadow:0 8px 0 -3px var(--shadow); }
.dk li:nth-child(odd){ transform:rotate(-.7deg); }
.dk li:nth-child(even){ transform:rotate(.6deg); }
.dk h3{ font-size:21px; line-height:1.2; letter-spacing:-.01em; margin:0 0 8px; }
.dk p{ margin:0; color:color-mix(in srgb, var(--card-ink) 78%, var(--card)); }
.dk-krijg{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px 36px; }
.dp{ list-style:none; margin:0; padding:0; border-top:2px solid currentColor; max-width:980px; }
.dp li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:4px 24px; padding:20px 0; border-bottom:2px solid var(--faint); }
.dp-naam{ font-weight:800; font-size:clamp(19px, 1.8vw, 22px); }
.dp-prijs{ font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 900; font-size:clamp(22px, 2.6vw, 32px); line-height:1.1; text-align:right; }
.dp-prijs mark, .dp-uitleg mark{ background:var(--hi); color:var(--hi-ink); padding:0 .15em; border-radius:.15em; }
.dp-uitleg{ grid-column:1 / -1; color:var(--muted); max-width:70ch; }
.dp-knoppen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px, 4vw, 44px); }
.vr{ display:grid; gap:12px; max-width:900px; }
.vr-item{ border:2px solid currentColor; border-radius:20px; padding:0 22px; }
.vr-item summary{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:800; font-size:clamp(17px, 1.6vw, 20px); cursor:pointer; list-style:none; }
.vr-item summary::-webkit-details-marker{ display:none; }
.vr-item summary::after{ content:"+"; flex:none; font-family:var(--display); font-weight:900; font-size:30px; line-height:1; transition:transform .25s; }
.vr-item[open] summary::after{ transform:rotate(45deg); }
.vr-item p{ margin:0 0 20px; max-width:66ch; color:var(--muted); }
/* artikelpagina's: de lopende tekst uit Markdown */
.art-tekst{ max-width:72ch; font-size:clamp(16.5px, 1.3vw, 18px); }
.art-tekst > :first-child{ margin-top:0; }
.art-tekst h2{ font-family:var(--display); font-variation-settings:"wdth" 116, "wght" 900; font-size:clamp(28px, 3.4vw, 44px); line-height:1; letter-spacing:-.01em; margin:clamp(40px, 6vw, 72px) 0 18px; }
.art-tekst h3{ font-size:clamp(19px, 1.7vw, 22px); margin:28px 0 8px; }
.art-tekst p{ margin:0 0 18px; }
.art-tekst ul, .art-tekst ol{ margin:0 0 22px; padding-left:1.25em; }
.art-tekst li{ margin:0 0 12px; }
.art-tekst li > p{ margin:0; }
.art-tekst li strong{ font-weight:800; }
.art-tekst ol{ counter-reset:stap; list-style:none; padding-left:0; }
.art-tekst ol > li{ counter-increment:stap; position:relative; padding-left:54px; min-height:40px; }
.art-tekst ol > li::before{ content:counter(stap); position:absolute; left:0; top:-4px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--hi); color:var(--hi-ink); border:2px solid var(--hi-ink); font-family:var(--display); font-weight:900; font-size:17px; transform:rotate(-6deg); }
.art-tekst a{ color:inherit; font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.art-tekst a:hover{ text-decoration-thickness:3px; }
.art-tekst mark{ background:var(--hi); color:var(--hi-ink); padding:0 .15em; border-radius:.15em; }
.art-kop{ max-width:18ch; }
.vr-ant p{ margin:0 0 16px; max-width:66ch; color:var(--muted); }
.vr-ant > :last-child{ margin-bottom:20px; }
.meer-over h3 a{ color:inherit; text-decoration:none; }
.meer-over h3 a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.meer-over h3 a::after{ content:" \2192"; }
.case-txt .verhaal{ margin-top:-6px; }
@media (max-width:1000px){
  .dk-krijg{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .dk-krijg{ grid-template-columns:1fr; }
  .dk li:nth-child(n){ transform:none; }
  .dp li{ grid-template-columns:1fr; }
  .dp-prijs{ text-align:left; }
  .vr-item{ padding:0 16px; }
}
@media (prefers-reduced-motion: reduce){
  .vr-item summary::after, .meer::after{ transition:none; }
}

/* ---------- menu op de telefoon en naar boven ---------- */
.links a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.menu-knop{ display:none; align-items:center; gap:9px; border:0; cursor:pointer; font:inherit; font-weight:800; font-size:15px; }
.mk-l{ display:grid; gap:4px; }
.mk-l i{ display:block; width:16px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s; }
.menu-knop[aria-expanded="true"] .mk-l i:first-child{ transform:translateY(3px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .mk-l i:last-child{ transform:translateY(-3px) rotate(-45deg); }
.mob-menu{ border-top:2px solid var(--faint); padding-block:6px 22px; }
.mob-menu a{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 0; border-bottom:2px solid var(--faint); font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 850; font-size:28px; line-height:1.1; text-decoration:none; }
.mob-menu a::after{ content:"\2192"; font-size:22px; }
.mob-menu a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px; }
.naar-boven{ position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40; display:grid; place-items:center; width:52px; height:52px; padding:0; border-radius:50%; background:var(--ink); color:var(--bg); border:2px solid var(--bg); box-shadow:0 8px 0 -3px var(--shadow); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:opacity .25s, visibility .25s, transform .3s cubic-bezier(.3, 1.5, .5, 1), background-color .2s, color .2s; }
.naar-boven.aan{ opacity:1; visibility:visible; transform:none; }
.naar-boven:hover{ background:var(--hi); color:var(--hi-ink); border-color:var(--hi-ink); transform:translateY(-2px) rotate(-6deg); }
.naar-boven svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce){
  .naar-boven, .mk-l i{ transition:none; }
}

/* ---------- minder scrollen op de telefoon ---------- */
.veeg-stip{ display:none; }
@media (max-width:760px){
  .s{ padding-block:52px; }
  .veeg{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); scroll-padding-inline:var(--gutter); max-width:none; }
  .veeg::-webkit-scrollbar{ display:none; }
  .veeg > article{ flex:0 0 86%; scroll-snap-align:start; scroll-snap-stop:always; }
  /* vaste hoogte: elke case zo hoog als de hoogste, dus bij het vegen verschuift er niets en valt er niets te scrollen */
  .cases.veeg{ align-items:stretch; }
  .cases.veeg .b-tabs{ flex-wrap:wrap; }
  .cases.veeg .b-tab{ white-space:nowrap; }
  .cases.veeg > .case{ border-top:0; padding-block:4px 8px; align-content:start; }
  /* ruimte boven de kaarten voor de sticker 'Onze favoriet' (een strook die opzij schuift, knipt boven en onder af) */
  .tiers.veeg{ padding-top:36px; padding-bottom:16px; align-items:stretch; }
  .cases.veeg > .case.here{ outline-offset:-4px; padding:16px 12px 18px; }
  /* bolletjes: het raakvlak is 28 px, het bolletje zelf 12 px */
  .veeg-stip{ display:flex; justify-content:center; gap:0; margin-top:8px; }
  .veeg-stip button{ position:relative; width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; color:inherit; }
  .veeg-stip button::before{ content:""; position:absolute; inset:8px; border-radius:50%; border:2px solid currentColor; opacity:.55; }
  .veeg-stip button[aria-current="true"]::before{ background:currentColor; opacity:1; transform:scale(1.15); }
}
.tbl-uit > summary{ display:none; }
@media (max-width:760px){
  .tbl-uit > summary{ display:inline-flex; list-style:none; margin-top:clamp(28px, 4vw, 44px); }
  .tbl-uit > summary::-webkit-details-marker{ display:none; }
  .tbl-uit > summary::after{ content:"+"; font-family:var(--display); font-weight:900; font-size:20px; line-height:1; margin-left:6px; transition:transform .25s; }
  .tbl-uit[open] > summary::after{ transform:rotate(45deg); }
}

/* ---------- offerte stap voor stap (telefoon) ---------- */
.of-stap-kop, .of-stap-voet{ display:none; }
@media (max-width:760px){
  .of-stap-kop:not([hidden]){ display:block; margin-bottom:18px; scroll-margin-top:16px; }
  .of.of-stappen.of-op-bon > .of-form{ display:none; }
  .of-stap-tel{ margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
  .of-stap-balk{ display:flex; gap:6px; }
  .of-stap-balk i{ flex:1; height:6px; border-radius:6px; background:currentColor; opacity:.2; transition:opacity .25s; }
  .of-stap-balk i.af{ opacity:1; }
  .of.of-stappen .of-form > .of-f:not(.of-stap-nu), .of.of-stappen > .of-bon:not(.of-stap-nu){ display:none; }
  .of.of-stappen .of-f legend:focus, .of.of-stappen .of-num label:focus, .of.of-stappen .of-bon-k:focus{ outline:none; }
  .of-stap-voet:not([hidden]){ display:grid; gap:12px; margin-top:22px; }
  .of-stap-knoppen{ display:flex; gap:10px; }
  .of-stap-knoppen .btn{ flex:1; justify-content:center; }
  .of-stap-knoppen .of-terug{ flex:0 0 auto; }
  .of-stap-prijs{ margin:0; font-weight:800; text-align:center; }
  .of-stap-prijs:empty{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .of-stap-balk i{ transition:none; } }

/* ---------- na de controle van 27-09-2026 ---------- */
/* overslaan-link: de eerste Tab op elke pagina */
.oversla{ position:absolute; left:-999px; top:0; }
.oversla:focus{ left:16px; top:12px; z-index:90; padding:10px 16px; background:var(--ink); color:var(--bg); border-radius:999px; font-weight:800; text-decoration:none; }
main:focus{ outline:none; }

/* zichtbare focus op gevulde knoppen: de rand krijgt de kleur van de tekst van de sectie, niet die van de knop zelf */
.btn:focus-visible, .pill:focus-visible, .pk:focus-visible, .mod[aria-pressed="true"]:focus-visible, .q-opt[aria-pressed="true"]:focus-visible,
.tile:focus-visible, .hub:focus-visible, .t-alt input:focus-visible, .t-deep input:focus-visible{ outline-color:var(--sec-ink, var(--ink)); }
.btn.ghost:focus-visible, .pill.ghost:focus-visible{ outline-color:currentColor; }
.b-tab[aria-pressed="true"]:focus-visible{ outline-color:var(--card-ink); }
.soort[aria-pressed="true"]:focus-visible{ outline-color:var(--hi); }
.of-m.aan .of-m-in:focus-visible{ outline-color:var(--card-ink); }
.naar-boven:focus-visible{ outline:3px solid var(--ink); outline-offset:5px; box-shadow:0 0 0 5px var(--bg); }

/* lange woorden in een kop breken af in plaats van buiten het scherm te vallen (een ~ in de tekst kiest de plek) */
.h2, .dh-kop{ overflow-wrap:break-word; }
.btn.big{ white-space:normal; user-select:auto; }
.bouw > *{ min-width:0; }
.band:hover .band-run{ animation-play-state:paused; }

/* het menu achter de knop tot 900 px: op een tablet (768) paste het volle menu niet naast 'Bel je broer' */
@media (max-width:900px){
  .js .links{ display:none; }
  .js .menu-knop{ display:inline-flex; }
  .nav-r .pill{ padding:9px 14px; font-size:14px; }
  /* zonder javascript werkt de knop niet: dan blijven de gewone links staan, op een eigen regel */
  html:not(.js) .nav{ flex-wrap:wrap; }
  html:not(.js) .links{ order:3; flex-basis:100%; flex-wrap:wrap; gap:6px 18px; }
  .verkeer{ font-size:10.5px; gap:6px; }
  .vk-lijn{ min-width:12px; }
  .vk-punt, .vk-slot{ padding-inline:7px; }
}
@media (min-width:761px){
  /* tegels en briefjes van de knoop blijven binnen het vak */
  .tile{ left:clamp(104px, var(--x), calc(100% - 104px)); }
  .postit{ left:clamp(82px, var(--x), calc(100% - 82px)); }
}
/* de knop naar boven staat op geen enkele breedte over de laatste regel van de voet */
.foot-bot{ padding-right:68px; }
.kd-tel .kd-uitleg{ display:none; }
@media (max-width:760px){
  .bouw-uitleg .ext{ white-space:normal; }
  /* als dit, dan dat: de gekozen zin past niet naast 'Als' en 'dan', dus eronder en over twee regels */
  .zin{ grid-template-columns:1fr; gap:4px 0; }
  .zin select{ width:100%; font-size:17px; white-space:normal; padding:8px 40px 8px 14px; margin-bottom:8px; }
  .cases.veeg .b-tab{ min-height:32px; }
}
@media (max-width:400px){
  .soort{ padding:12px; }
  .soort b{ font-size:17px; }
}
@media (max-width:380px){
  .nav{ gap:8px; }
  .nav-r{ gap:6px; }
  .nav-r .pill{ padding:8px 10px; font-size:13px; }
  .menu-knop{ gap:6px; }
  .h2{ font-size:11.2vw; }
  .dh-kop{ font-size:11.4vw; }
}
@media (max-width:340px){
  .logo{ font-size:16px; gap:7px; }
  .nav-r .pill{ padding:8px 9px; font-size:12.5px; }
  .tile{ width:46%; padding-right:6px; }
  .tile b{ font-size:12px; }
}

/* offerte: kopieren en afdrukken */
.of-melding{ margin:12px 0 0; font-size:14px; font-weight:700; min-height:1.4em; }
.of-melding:empty{ min-height:0; margin:0; }

/* bedrijfsgegevens in de voet */
.foot-zaak{ display:flex; flex-wrap:wrap; gap:4px 18px; font-weight:500; opacity:.85; }

/* pagina niet gevonden */
.ng-in{ padding-block:clamp(36px, 7vw, 96px) clamp(48px, 8vw, 104px); }
.ng-links{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none; }
.ng-tekst{ font-size:clamp(17px, 1.6vw, 20px); max-width:54ch; margin:20px 0 0; color:var(--muted); }
.ng-in .ctas{ margin-top:28px; }

/* zonder javascript: wat alleen met javascript iets toont, neemt geen ruimte in */
html:not(.js) .quiz, html:not(.js) #knoop .knoop-bar, html:not(.js) #knoop .stage, html:not(.js) #knoop .k-panel, html:not(.js) .env,
html:not(.js) .machine, html:not(.js) .calc, html:not(.js) .of, html:not(.js) .naar-boven{ display:none; }
/* de grote kop wordt door site.js in woorden verdeeld; zonder javascript mag hij gewoon afbreken */
html:not(.js) .big{ white-space:normal; }

/* ---------- tekstpagina (algemene voorwaarden): klassen beginnen met tp- ---------- */
.foot-tekst{ display:flex; flex-wrap:wrap; gap:4px 18px; }
/* cookiemelding: onderaan, twee even grote knoppen */
.cookie{ position:fixed; left:0; right:0; bottom:0; z-index:60; padding:0 16px max(16px, env(safe-area-inset-bottom)); pointer-events:none; }
.cookie-in{ --sec:var(--card); --sec-ink:var(--card-ink); pointer-events:auto; max-width:620px; margin:0 auto; background:var(--card); color:var(--card-ink); border:3px solid var(--card-ink); border-radius:22px; padding:20px 22px 18px; box-shadow:0 12px 0 -4px var(--shadow); }
.cookie-kop{ font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 900; font-size:clamp(20px, 2.4vw, 26px); line-height:1.05; margin:0 0 10px; }
.cookie-tekst{ margin:0 0 12px; font-size:15px; line-height:1.45; color:color-mix(in srgb, var(--card-ink) 82%, var(--card)); }
.cookie-nu{ margin:0 0 10px; font-size:14.5px; font-weight:700; }
.cookie-knoppen{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cookie-knoppen .btn{ justify-content:center; width:100%; }
.cookie-meer{ margin:10px 0 0; font-size:13.5px; }
.cookie-meer a{ color:inherit; font-weight:700; }
@media (max-width:480px){ .cookie-knoppen{ grid-template-columns:1fr; } }
@media print{ .cookie{ display:none; } }
.foot-tekst a{ text-underline-offset:3px; }
.foot-tekst a[aria-current]{ text-decoration-thickness:2px; }
.tp-kop{ padding-block:clamp(20px, 4vw, 48px) clamp(28px, 4vw, 48px); }
.tp-titel{ font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 900; font-size:clamp(34px, 5.6vw, 76px); line-height:.96; letter-spacing:-.01em;
  margin:0; max-width:18ch; overflow-wrap:break-word; }
.tp-versie{ margin:18px 0 0; font-size:15px; font-weight:700; color:var(--muted); }
.tp-knoppen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.tp-knoppen .btn{ padding:11px 20px; font-size:15px; }
.tp{ padding-block:0 clamp(72px, 9vw, 128px); }
.tp-in{ display:grid; grid-template-columns:minmax(0, 1fr); gap:28px; }
.tp-in::before{ content:""; grid-column:1 / -1; border-top:2px solid currentColor; }
.tp-tekst{ min-width:0; max-width:72ch; font-size:17px; line-height:1.62; overflow-wrap:break-word; }
.tp-tekst > :first-child{ margin-top:0; }
.tp-tekst p{ margin:0 0 16px; }
.tp-tekst h2{ font-family:var(--display); font-variation-settings:"wdth" 110, "wght" 900; font-size:clamp(27px, 3.2vw, 42px); line-height:1.02;
  margin:clamp(56px, 7vw, 88px) 0 8px; padding-top:22px; border-top:2px solid currentColor; }
.tp-tekst h2 .tp-nr{ display:block; margin-bottom:10px; font-family:var(--body); font-variation-settings:normal; font-size:13px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.2; }
.tp-tekst h3{ font-size:clamp(19px, 1.7vw, 22px); font-weight:800; line-height:1.25; margin:40px 0 12px; }
.tp-tekst h3 .tp-nr{ color:var(--muted); font-weight:700; }
.tp-tekst h2 + h3{ margin-top:28px; }
.tp-tekst h2, .tp-tekst h3, .tp-tekst li[id]{ scroll-margin-top:24px; }
/* een sprong naar een artikel gaat in een keer: rustig meeschuiven over de hele tekst duurt te lang en leest niet */
html:has(.tp-pagina){ scroll-behavior:auto; }
.tp-tekst ol, .tp-tekst ul{ margin:0 0 16px; padding-left:1.7em; }
.tp-tekst li{ margin:0 0 9px; padding-left:.25em; }
.tp-tekst li::marker{ font-weight:800; font-variant-numeric:tabular-nums; }
.tp-tekst li > ol, .tp-tekst li > ul{ margin:9px 0 0; }
.tp-tekst li > p{ margin:9px 0 0; }
.tp-tekst a{ text-decoration-thickness:2px; text-underline-offset:3px; }
.tp-tekst a:hover{ background:var(--hi); color:var(--hi-ink); }
.tp-los{ padding:2px 0 2px 18px; border-left:4px solid var(--hi); font-weight:600; box-shadow:-2px 0 0 var(--sec-ink); }
/* waar een link in de tekst of de inhoudsopgave naartoe springt */
.tp-tekst :target{ background:var(--hi); color:var(--hi-ink); box-shadow:0 0 0 8px var(--hi); border-radius:1px; }
.tp-tabel{ margin:20px 0 24px; overflow-x:auto; }
.tp-tabel table{ width:100%; border-collapse:collapse; font-size:16px; line-height:1.5; }
.tp-tabel th, .tp-tabel td{ padding:12px 16px 12px 0; text-align:left; vertical-align:top; border-top:1px solid var(--faint); }
.tp-tabel thead th{ border-top:0; border-bottom:2px solid currentColor; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.tp-tabel tbody th{ width:26%; min-width:9em; font-weight:800; }
.tp-tabel td:last-child, .tp-tabel th:last-child{ padding-right:0; }
/* inhoudsopgave: op de telefoon achter een knop, op een breed scherm een vaste kolom links */
.tp-nav{ min-width:0; font-size:15px; line-height:1.35; }
.tp-uit > summary{ display:inline-flex; align-items:center; gap:10px; list-style:none; cursor:pointer; border:2px solid currentColor; border-radius:999px; padding:10px 20px;
  font-weight:800; }
.tp-uit > summary::-webkit-details-marker{ display:none; }
.tp-uit > summary::after{ content:"+"; font-family:var(--display); font-weight:900; font-size:20px; line-height:1; transition:transform .25s; }
.tp-uit[open] > summary::after{ transform:rotate(45deg); }
.tp-inh, .tp-inh ol{ list-style:none; margin:0; padding:0; }
.tp-inh{ margin-top:18px; }
.tp-inh > li{ margin:0 0 18px; }
.tp-inh > li > a{ font-weight:800; }
.tp-inh ol{ margin:8px 0 0; padding-left:14px; border-left:2px solid var(--faint); }
.tp-inh ol li{ margin:0; }
.tp-inh a{ display:block; padding:5px 0; text-decoration:none; }
.tp-inh ol a{ padding:4px 0; color:var(--muted); font-weight:500; }
.tp-inh a:hover{ text-decoration:underline; }
.tp-inh a.nu{ color:var(--sec-ink); font-weight:800; }
.tp-inh ol a.nu{ margin-left:-16px; padding-left:14px; border-left:2px solid var(--sec-ink); }
@media (min-width:1000px){
  .tp-in{ grid-template-columns:minmax(230px, 300px) minmax(0, 1fr); gap:28px clamp(40px, 6vw, 96px); align-items:start; }
  .tp-nav{ position:sticky; top:24px; max-height:calc(100vh - 48px); overflow-y:auto; overscroll-behavior:contain; padding:4px 12px 24px 0; scrollbar-width:thin; }
  .tp-uit > summary{ border:0; padding:0; cursor:default; pointer-events:none; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
  .tp-uit > summary::after{ content:none; }
}
@media (max-width:620px){
  /* een tabel past niet naast elkaar: elke rij onder elkaar, met de naam van de kolom erboven als er meer dan twee zijn */
  .tp-tabel thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .tp-tabel tr, .tp-tabel tbody th, .tp-tabel td{ display:block; width:auto; min-width:0; }
  .tp-tabel tr{ padding:14px 0; border-top:1px solid var(--faint); }
  .tp-tabel tbody th, .tp-tabel td{ padding:0; border:0; }
  .tp-tabel td{ margin-top:4px; }
  .tp-breed td[data-kop]:not([data-kop=""])::before{ content:attr(data-kop) ": "; font-weight:700; }
  .tp-tekst ol, .tp-tekst ul{ padding-left:1.45em; }
}
html:not(.js) .tp-knoppen{ display:none; }

/* afdrukken */
@media print{
  header, .naar-boven, .menu-knop, .mob-menu, .links, .veeg-stip, .of-stap-kop, .of-stap-voet, .band, .ref, .hint, .oversla,
  .tbl-uit > summary, .kd-knop, .toast, .ctas, .of-knoppen, .tier-knoppen, .free-knoppen, .dp-knoppen{ display:none !important; }
  .t-alt, .t-deep, .t-hi{ --sec:#fff; --sec-ink:#15171F; }
  body{ background:#fff; }
  .s{ padding-block:28px; }
  .veeg{ display:block; overflow:visible; margin-inline:0; padding-inline:0; max-width:none; }
  .veeg > article{ margin-bottom:24px; }
  .of.of-stappen .of-form > .of-f, .of.of-stappen > .of-bon{ display:block !important; }
  .of.of-stappen.of-op-bon > .of-form{ display:flex !important; }
  .tbl-uit::details-content{ content-visibility:visible; display:block; }
  .tier, .case, .dk li, .of-m, .of-bon{ break-inside:avoid; }
  .of-bon{ position:static; transform:none; box-shadow:none; border:2px solid #15171F; }
  /* alleen de bon (knop 'Afdrukken of bewaren als pdf' bij de offerte) */
  .druk-bon body > *:not(main), .druk-bon main > *:not(#offerte), .druk-bon #offerte .sec-head, .druk-bon #offerte .of-form{ display:none !important; }
  .druk-bon #offerte{ padding:0; }
  .druk-bon .of{ display:block; }
  /* een tekstpagina op papier: alleen de titel en de tekst */
  .tp-pagina ~ footer, .tp-pagina #bel, .tp-nav, .tp-knoppen, .tp-pagina .kruimel{ display:none !important; }
  .tp-in{ display:block; }
  .tp-in::before{ content:none; }
  .tp-kop{ padding-block:0 12px; }
  .tp-titel{ font-size:26pt; max-width:none; }
  .tp-tekst{ max-width:none; font-size:10.5pt; line-height:1.45; }
  .tp-tekst h2{ font-size:17pt; margin-top:28pt; break-after:avoid; }
  .tp-tekst h3{ font-size:12pt; margin-top:16pt; break-after:avoid; }
  .tp-tekst p, .tp-tekst li{ orphans:3; widows:3; }
  .tp-tekst a{ text-decoration:none; }
  .tp-tekst :target{ background:none; box-shadow:none; }
  .tp-los{ border-left:2px solid #15171F; box-shadow:none; }
  .tp-tabel tr{ break-inside:avoid; }
}

/* offerte: het aanvraagformulier onder de calculator (09-10-2026). Een eigen kaart, niet in het bonnetje: dat plakt en zou
   anders hoger worden dan een laptopscherm, met de knop buiten beeld */
.of-aanvraag{ --sec:var(--card); --sec-ink:var(--card-ink); margin-top:44px; padding:28px clamp(18px, 3vw, 34px) 26px; background:var(--card); color:var(--card-ink); border:3px solid var(--card-ink); border-radius:22px; box-shadow:0 12px 0 -4px var(--shadow); scroll-margin-top:24px; }
.of-aanvraag-kop h3{ margin:0 0 6px; font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 900; font-size:clamp(24px, 2.6vw, 32px); line-height:1.05; }
.of-aanvraag-kop p{ margin:0 0 20px; max-width:62ch; font-size:16px; }
.of-velden{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; }
.of-veld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.of-veld > span{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.of-veld small{ font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; opacity:.7; }
.of-veld input, .of-veld textarea{ width:100%; font:inherit; font-size:17px; color:var(--card-ink); background:var(--card); border:2px solid var(--card-ink); border-radius:12px; padding:11px 14px; }
.of-veld textarea{ resize:vertical; min-height:88px; }
.of-veld input:focus-visible, .of-veld textarea:focus-visible{ outline:3px solid var(--alt); outline-offset:2px; }
.of-veld input[aria-invalid="true"]{ border-color:#B3261E; }
.of-breed{ grid-column:1 / -1; }
.of-valstrik{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.of-aanvraag-voet{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:20px; }
.of-aanvraag-voet .btn[disabled]{ opacity:.6; cursor:wait; transform:none; }
.of-privacy{ margin:0; font-size:14px; opacity:.8; }
.of-privacy a{ color:inherit; }
.of-aanvraag-melding{ margin:14px 0 0; font-size:15px; font-weight:700; }
.of-aanvraag-melding:empty{ display:none; }
.of-aanvraag-melding.fout{ color:#B3261E; }
.of-aanvraag.klaar .of-velden, .of-aanvraag.klaar .of-aanvraag-voet{ display:none; }
.of-aanvraag.klaar .of-aanvraag-melding{ font-size:clamp(18px, 2vw, 22px); color:var(--card-ink); }
@media (max-width:640px){ .of-velden{ grid-template-columns:1fr; } .of-aanvraag{ margin-top:28px; } }
/* in stappen (telefoon): het formulier pas bij de laatste stap, de bon */
.of.of-stappen:has(> .of-bon:not(.of-stap-nu)) ~ .of-aanvraag{ display:none; }

/* ---------- blog (2026-10-15) ---------- */
/* onder de kop van een bericht: wie en wanneer; onderaan het blokje over de schrijver; de lijst op /blog */
.blog-door{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; margin:18px 0 0; font-size:15.5px; font-weight:600; color:var(--muted); }
.blog-door b{ color:var(--sec-ink); font-weight:800; }
.blog-door > * + *::before{ content:"\00B7"; margin:0 10px; font-weight:800; }
.blog-door + .dh-intro{ margin-top:22px; }
/* "Nieuw" achter de tijd van een bericht jonger dan 48 uur (site.js, blok "tijd geleden") */
time.is-nieuw::after{ content:"Nieuw"; display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; background:var(--hi); color:var(--hi-ink);
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; vertical-align:1px; }
/* smal scherm: wie en wanneer onder elkaar, zonder puntje ertussen (anders begint de tweede regel met een puntje) */
@media (max-width:420px){ .blog-door{ flex-direction:column; align-items:flex-start; gap:2px; } .blog-door > * + *::before{ content:none; } }
.blog-onder{ padding-top:0; }
.blog-schrijver{ display:flex; align-items:center; gap:clamp(18px, 3vw, 32px); max-width:72ch; background:var(--card); color:var(--card-ink); border:3px solid var(--card-ink); border-radius:22px; padding:clamp(20px, 3vw, 30px); box-shadow:0 12px 0 -4px var(--shadow); }
.blog-foto{ flex:none; width:144px; height:144px; border-radius:50%; border:3px solid var(--card-ink); object-fit:cover; background:var(--bg); }
.blog-letters{ display:grid; place-items:center; background:var(--hi); color:var(--hi-ink); font-family:var(--display); font-variation-settings:"wdth" 116, "wght" 900; font-size:48px; line-height:1; letter-spacing:-.02em; transform:rotate(-4deg); }
.blog-over p{ margin:0; }
.blog-naam{ font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 900; font-size:clamp(22px, 2.4vw, 28px); line-height:1.05; }
.blog-over .blog-rol{ margin-top:4px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--card-ink) 70%, var(--card)); }
.blog-over .blog-zin{ margin-top:12px; font-size:16.5px; }
.blog-meer{ display:inline-block; margin-top:12px; color:inherit; font-weight:800; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.blog-meer::after{ content:" \2192"; }
.blog-meer:hover{ text-decoration-thickness:3px; }
.blog-lijst{ list-style:none; margin:0; padding:0; max-width:72ch; }
.blog-item{ padding:26px 0; border-top:2px solid var(--faint); }
.blog-item:first-child{ padding-top:0; border-top:0; }
.blog-item time{ display:block; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.blog-item h2{ margin:0 0 8px; font-size:clamp(22px, 2.4vw, 30px); line-height:1.15; letter-spacing:-.01em; }
.blog-item h2 a{ color:inherit; text-decoration:none; }
.blog-item h2 a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.blog-item p{ margin:0; color:var(--muted); font-size:clamp(16.5px, 1.3vw, 18px); }
/* per bericht het pictogram uit stipjes (22-10-2026), zoals op de voorpagina; van hieruit vouwt het bericht ook open */
.blog-item{ position:relative; }
.blog-item-icoon{ position:absolute; right:0; top:26px; width:52px; }
.blog-item:first-child .blog-item-icoon{ top:0; }
.blog-item-icoon svg{ display:block; width:100%; height:auto; }
.blog-item:has(.blog-item-icoon) > :not(.blog-item-icoon){ margin-right:76px; }
.blog-leeg{ margin:0; font-size:clamp(17px, 1.5vw, 20px); }
/* een blogtitel is een zin, geen kreet: kleiner dan de kop van een dienst, zodat hij in twee of drie regels past */
.art-kop:has(+ .blog-door){ font-size:clamp(34px, 4.6vw, 64px); line-height:1; max-width:24ch; }
/* bovenaan een blog een gele band met het pictogram uit stipjes (22-10-2026, server.py pictogram_svg): de gele kaart op de
   voorpagina vouwt hiernaartoe open (site.js, blok "klik op een blog") */
.blog-kop .dh-in, .dienst-kop .dh-in{ position:relative; }
.blog-kop-icoon{ display:block; position:absolute; top:clamp(44px, 5vw, 64px); right:0; width:clamp(88px, 10vw, 136px); }
.blog-kop-icoon svg{ display:block; width:100%; height:auto; }
.blog-kop .kick, .blog-kop .art-kop, .blog-kop .blog-door, .blog-kop .dh-intro,
.dienst-kop .kick, .dienst-kop .dh-kop, .dienst-kop .blog-door, .dienst-kop .dh-intro{ margin-right:clamp(100px, 13vw, 170px); }
@media (max-width:760px){
  .blog-kop-icoon{ position:static; width:72px; margin:4px 0 10px; }
  .blog-kop .kick, .blog-kop .art-kop, .blog-kop .blog-door, .blog-kop .dh-intro,
  .dienst-kop .kick, .dienst-kop .dh-kop, .dienst-kop .blog-door, .dienst-kop .dh-intro{ margin-right:0; }
}
/* bovenaan een regiopagina een oude prent van de stad in een rond venster op geel (26-10-2026, server.py REGIO_BEELD);
   de prent is grijs en drukt met multiply in het geel. Een stip groeit uit tot het venster, niet bij minder beweging */
.regio-beeld{ margin:36px 0 0; }
.regio-raam{ display:block; position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:18px; background:var(--hi); border:2px solid var(--ink); }
.regio-raam img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.regio-beeld figcaption{ margin-top:10px; font-size:13px; color:var(--muted); }
@media (min-width:980px){
  .regio-kop .dh-in{ display:grid; grid-template-columns:minmax(0, 1fr) clamp(300px, 34vw, 500px); column-gap:clamp(32px, 5vw, 80px); }
  .regio-kop .dh-in > *{ grid-column:1; }
  /* gemeten 26-10: de kop past in de smalle kolom bij ongeveer 10 procent van de kolombreedte; zo begint hij al passend
     en hoeft site.js hem niet zichtbaar te verkleinen */
  .regio-kop .dh-kop{ font-size:clamp(40px, calc(1.8vw + 36px), 62px); }
  .regio-kop .regio-beeld{ grid-column:2; grid-row:1 / span 8; align-self:center; margin:0; text-align:center; }
  .regio-raam{ aspect-ratio:1; border-radius:50%; }
}
@media (prefers-reduced-motion: no-preference){
  .regio-raam{ animation:regio-open 1.1s cubic-bezier(.65, 0, .35, 1) .2s both; }
  .regio-raam img{ animation:regio-beeld .6s ease .75s both; }
}
@keyframes regio-open{ from{ transform:scale(.04); border-radius:50%; } }
@keyframes regio-beeld{ from{ opacity:0; } }

/* de overgang van de voorpagina naar een blog (22-10-2026): de browser vouwt de kaart open tot de gele band (view transitions
   tussen pagina's). site.js zet de namen alleen bij een klik op een blog vanaf de voorpagina en slaat elke andere overgang
   over. Een browser die dit niet kent, gaat gewoon direct naar de pagina. 0,38 s, zacht afremmend (NN/g: 100 tot 400 ms). */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }
::view-transition-group(*){ animation-duration:.38s; animation-timing-function:cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root){ animation:.22s ease-out both vt-weg; }
::view-transition-new(root){ animation:.3s ease-out .08s both vt-in; }
/* de kaart: het geel zelf is de achtergrond van de groep, die van de kaart naar de band groeit; de inhoud wordt niet
   uitgerekt (object-fit:none) en vervaagt alleen even */
::view-transition-group(blog-kaart){ background:#FFE45C; border-radius:12px; overflow:clip; }
::view-transition-old(blog-kaart), ::view-transition-new(blog-kaart){ height:100%; object-fit:none; object-position:left top; }
::view-transition-old(blog-kaart){ animation:.14s ease-out both vt-weg; }
::view-transition-new(blog-kaart){ animation:.24s ease-out .14s both vt-in; }
::view-transition-group(dienst-kaart){ background:#F1EFEA; border-radius:12px; overflow:clip; }
::view-transition-old(dienst-kaart), ::view-transition-new(dienst-kaart){ height:100%; object-fit:none; object-position:left top; }
::view-transition-old(dienst-kaart){ animation:.14s ease-out both vt-weg; }
::view-transition-new(dienst-kaart){ animation:.24s ease-out .14s both vt-in; }
::view-transition-image-pair(blog-icoon), ::view-transition-image-pair(dienst-icoon){ isolation:auto; }
::view-transition-old(blog-icoon), ::view-transition-new(blog-icoon), ::view-transition-old(dienst-icoon), ::view-transition-new(dienst-icoon){ animation:none; mix-blend-mode:normal; }
::view-transition-old(blog-icoon), ::view-transition-old(dienst-icoon){ display:none; }
@keyframes vt-weg{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; } }
/* /blog: de lijst direct onder de kop, zonder groot gat */
.blog-pagina .dh + .s{ padding-top:clamp(12px, 2vw, 24px); }
.blog-pagina .dh-kop{ font-size:clamp(44px, 6vw, 88px); }
@media (max-width:560px){
  .blog-schrijver{ flex-direction:column; align-items:flex-start; }
  .blog-foto{ width:96px; height:96px; }
  .blog-letters{ font-size:34px; }
}

/* ---------- voorpagina nieuw (2026-10-15) ---------- */
/* voorbeeld van een kortere voorpagina (voorpagina-nieuw.html, alleen lokaal met VOORPAGINA_NIEUW=1). Alles hangt onder
   main.nv, zodat de andere pagina's er niets van merken. Rustiger dan de oude: kleinere koppen, kaarten met een dunne rand. */
.nv .nv-s{ padding-block:clamp(52px, 6.5vw, 96px); }
.nv .nv-s-klein{ padding-block:clamp(44px, 5vw, 76px); }
.nv .nv-lijn{ border-top:2px solid var(--faint); }
.nv .kick{ margin-bottom:12px; }
.nv .nv-kop{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 48px; margin-bottom:clamp(24px, 3vw, 40px); }
.nv .nv-h2{ font-family:var(--display); font-variation-settings:"wdth" 108, "wght" 850; font-size:clamp(30px, 3.4vw, 46px); line-height:1.02; letter-spacing:-.01em; margin:0; max-width:22ch; }
.nv .nv-kop-sub{ margin:0; max-width:46ch; color:var(--muted); font-size:17px; }
/* een lang woord in een kop uit het beheer (zoals "Automatiseringsprojecten") breekt af in plaats van de pagina breder te maken */
.nv .nv-kop > div{ min-width:0; max-width:100%; }
.nv .nv-h2{ overflow-wrap:break-word; hyphens:auto; }
.nv .nv-knoppen{ display:flex; flex-wrap:wrap; gap:12px; }
.nv .nv-anker{ display:block; height:0; }

/* hero: links de kop, de knoppen en de prijsregel; rechts de B van het logo (sinds 20-10-2026, eerst een schema) */
.nv .nv-hero-in{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:36px 64px; align-items:center; padding-block:clamp(24px, 4vw, 64px) clamp(32px, 4vw, 56px); }
.nv .nv-h1{ font-family:var(--display); font-variation-settings:"wdth" 104, "wght" 850; font-size:clamp(34px, 3.8vw, 54px); line-height:1.05; letter-spacing:-.01em; margin:0; max-width:19ch; }
.nv .nv-h1 mark{ padding:0 .1em; white-space:nowrap; }
.nv .nv-sub{ font-size:clamp(17px, 1.5vw, 19px); line-height:1.6; max-width:48ch; margin:22px 0 30px; color:var(--muted); }
.nv .nv-hero .hero-prijs{ margin-top:22px; }
/* de B van het logo (site.js, blok "de B"): een canvas dat zelf schaalt; de tekening heeft een vaste maat van 560 bij 520 */
.nv .nv-b{ margin:0; width:100%; max-width:560px; justify-self:end; }
.nv .nv-b-doek{ display:block; width:100%; height:auto; aspect-ratio:560 / 520; max-height:min(560px, 74vh); border-radius:18px; cursor:default; }
.nv .nv-b-doek:focus-visible{ outline:3px solid var(--alt); outline-offset:4px; }
.nv .nv-b-onder{ display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:6px; font-size:13px; color:var(--muted); }
/* bewust onopvallend (Mart 21-10): grijs zo licht als kan met nog genoeg contrast (ruim 4,5 tegen 1), donker bij de muis erop */
.nv .nv-b-opnieuw{ font:inherit; font-weight:500; color:color-mix(in srgb, var(--ink) 62%, var(--bg)); background:none; border:0; padding:6px 2px; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--ink) 30%, var(--bg)); text-underline-offset:3px; cursor:pointer; transition:color .2s; }
.nv .nv-b-opnieuw:hover, .nv .nv-b-opnieuw:focus-visible{ color:var(--ink); }
/* "Bel je broer." onderaan: de letters rekken mee (site.js, #big), de knipoog die van BROER in de hero overbleef */
.nv .nv-bel .nv-big{ font-size:clamp(38px, 4.6vw, 64px); line-height:1; white-space:nowrap; max-width:none; }
.nv .nv-feiten{ list-style:none; margin:0; padding:20px 0 clamp(28px, 4vw, 44px); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px 28px; border-top:2px solid var(--faint); }
.nv .nv-feiten li{ display:grid; grid-template-columns:22px minmax(0, 1fr); align-content:start; column-gap:10px; font-size:14.5px; line-height:1.35; }
.nv .nv-feiten li::before{ content:""; grid-row:1 / span 2; width:22px; height:22px; border-radius:50%; border:2px solid var(--ink);
  background:var(--hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2315171F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.nv .nv-feiten b{ font-weight:800; }
.nv .nv-feiten span{ color:var(--muted); }

/* wat we maken: zes kaarten, de hele kaart is de link (via de kop) */
.nv .nv-diensten{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.nv .nv-dienst{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px 24px 20px; background:var(--card); color:var(--card-ink); border:2px solid var(--card-ink); border-radius:18px; scroll-margin-top:24px; transition:transform .2s, box-shadow .2s; }
.nv .nv-dienst:hover{ transform:translateY(-3px); box-shadow:0 10px 0 -4px var(--shadow); }
.nv .nv-dienst h3{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0; font-size:21px; font-weight:800; line-height:1.2; letter-spacing:-.01em; }
.nv .nv-dienst h3::after{ content:"\2192"; flex:none; font-size:20px; transition:transform .2s; }
.nv .nv-dienst:hover h3::after{ transform:translateX(4px); }
.nv .nv-dienst h3 a, .nv .nv-case h3 a{ text-decoration:none; }
.nv .nv-dienst h3 a::after, .nv .nv-case h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.nv .nv-dienst h3 a:hover, .nv .nv-case h3 a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.nv .nv-dienst > p{ margin:0; font-size:15.5px; line-height:1.5; color:color-mix(in srgb, var(--card-ink) 78%, var(--card)); }
.nv .nv-dienst > .nv-prijs{ margin-top:auto; padding-top:12px; border-top:2px dashed color-mix(in srgb, var(--card-ink) 22%, var(--card)); font-size:14.5px; font-weight:600; color:var(--card-ink); }
.nv .nv-prijs b{ font-weight:900; background:var(--hi); color:var(--hi-ink); padding:0 .25em; border-radius:.2em; white-space:nowrap; }

/* wat we gemaakt hebben: vijf kaarten op een rij (telefoon: vegen) */
@media (min-width:761px){ .nv .nv-cases{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; } }
.nv .nv-case{ position:relative; display:flex; flex-direction:column; background:var(--card); color:var(--card-ink); border-radius:16px; overflow:hidden; scroll-margin-top:24px; transition:transform .2s; }
.nv .nv-case:hover{ transform:translateY(-4px); }
.nv .nv-case.here{ outline:4px dashed var(--hi); outline-offset:4px; overflow:visible; }
.nv .nv-case-beeld{ aspect-ratio:16 / 10; overflow:hidden; border-bottom:2px solid color-mix(in srgb, var(--card-ink) 14%, var(--card)); border-radius:16px 16px 0 0; }
.nv .nv-case-beeld img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.nv .nv-case-txt{ display:flex; flex-direction:column; gap:6px; flex:1; padding:14px 16px 16px; }
.nv .nv-case .nr{ font-size:11.5px; letter-spacing:.08em; color:color-mix(in srgb, var(--card-ink) 72%, var(--card)); }
.nv .nv-case h3{ margin:0; font-family:var(--display); font-variation-settings:"wdth" 104, "wght" 850; font-size:21px; line-height:1.05; overflow-wrap:anywhere; hyphens:manual; }
.nv .nv-case-t{ margin:0; font-size:14px; line-height:1.45; color:color-mix(in srgb, var(--card-ink) 78%, var(--card)); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nv .nv-case-feit{ display:flex; flex-wrap:wrap; gap:4px; max-height:48px; overflow:hidden; margin:2px 0 0; font-size:11.5px; font-weight:700; }
.nv .nv-case-feit span{ border:1.5px solid currentColor; border-radius:999px; padding:1px 8px; white-space:nowrap; }
.nv .nv-case-meer{ margin-top:auto; padding-top:6px; font-size:14px; font-weight:800; }
.nv .nv-case-meer::after{ content:" \2192"; }
.nv .nv-vrij{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:20px 0 0; padding:14px 20px; border:2px dashed currentColor; border-radius:16px; }
.nv .nv-vrij b{ font-family:var(--display); font-variation-settings:"wdth" 112, "wght" 900; font-size:20px; }
.nv .nv-vrij span{ color:var(--muted); }
.nv .nv-vrij a{ margin-left:auto; font-weight:800; text-decoration-thickness:2px; text-underline-offset:4px; }

/* wat het kost: de drie broers, kort */
@media (min-width:761px){ .nv .nv-tiers{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; align-items:stretch; padding-top:14px; } }
.nv .nv-tier{ position:relative; display:flex; flex-direction:column; gap:10px; padding:22px 24px; background:var(--card); color:var(--card-ink); border:2px solid var(--card-ink); border-radius:20px; scroll-margin-top:28px; }
.nv .nv-tier.fav{ background:var(--hi); color:var(--hi-ink); box-shadow:0 10px 0 -4px var(--shadow); }
.nv .nv-fav{ position:absolute; top:-14px; left:20px; background:var(--pop); color:var(--pop-ink); border:2px solid var(--pop-ink); border-radius:999px; padding:3px 12px; font-weight:800; font-size:12.5px; transform:rotate(-3deg); }
.nv .nv-tier-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.nv .nv-tier h3{ margin:0; font-family:var(--display); font-variation-settings:"wdth" 110, "wght" 880; font-size:26px; line-height:1; }
.nv .nv-maat{ font-family:var(--display); font-variation-settings:"wdth" 140, "wght" 900; font-size:26px; line-height:1; }
.nv .nv-voor{ margin:0; font-size:15px; font-weight:600; }
.nv .nv-bedrag{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:4px 0 0; }
.nv .nv-bedrag small{ font-size:14px; font-weight:700; }
.nv .nv-bedrag b{ font-family:var(--display); font-variation-settings:"wdth" 110, "wght" 900; font-size:44px; line-height:.9; font-variant-numeric:tabular-nums; }
.nv .nv-bedrag span{ font-size:15px; font-weight:700; }
.nv .nv-tweede{ display:flex; justify-content:space-between; gap:10px; margin:0; padding-top:8px; border-top:2px dashed currentColor; font-size:14.5px; }
.nv .nv-tweede b{ font-weight:800; text-align:right; }
.nv .nv-tier ul{ list-style:none; display:grid; gap:6px; margin:4px 0 0; padding:0; font-size:14.5px; }
.nv .nv-tier li{ display:grid; grid-template-columns:18px minmax(0, 1fr); gap:8px; line-height:1.4; }
.nv .nv-tier li::before{ content:""; width:14px; height:14px; margin-top:3px; border-radius:50%; border:2px solid currentColor; background:radial-gradient(circle, currentColor 0 2.5px, transparent 3px); }
.nv .nv-prijs-voet{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; margin-top:26px; }
.nv .nv-prijs-voet p{ margin:0; font-size:16px; }
.nv .nv-prijs-voet p b{ margin-right:4px; }

/* zo werken we: vier stappen op een rij */
.nv .nv-stappen{ list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px 28px; margin:0; padding:0; }
.nv .nv-stappen li{ display:grid; grid-template-columns:40px minmax(0, 1fr); column-gap:14px; align-items:start; }
.nv .nv-st-n{ grid-row:1 / span 2; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--bg); font-family:var(--display); font-variation-settings:"wdth" 120, "wght" 900; font-size:19px; line-height:1; }
.nv .nv-stappen li:last-child .nv-st-n{ background:var(--hi); color:var(--hi-ink); border:2px solid var(--ink); }
.nv .nv-stappen h3{ margin:7px 0 4px; font-size:17.5px; font-weight:800; line-height:1.25; }
.nv .nv-stappen p{ margin:0; font-size:15px; color:var(--muted); }

/* je broer en contact: een blok, donker */
.nv .nv-slot{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:40px 72px; align-items:center; }
.nv .nv-mart{ display:flex; align-items:flex-start; gap:24px; padding:24px; border:2px solid var(--faint); border-radius:20px; scroll-margin-top:24px; }
.nv .nv-foto{ flex:none; width:144px; height:144px; border-radius:50%; border:3px solid var(--deep-ink); object-fit:cover; background:var(--bg); }
.nv .nv-mb{ display:grid; place-items:center; background:var(--hi); color:var(--hi-ink); font-family:var(--display); font-variation-settings:"wdth" 116, "wght" 900; font-size:48px; line-height:1; letter-spacing:-.02em; }
.nv .nv-mart .kick{ margin-bottom:8px; }
.nv .nv-naam{ margin:0; font-family:var(--display); font-variation-settings:"wdth" 108, "wght" 850; font-size:26px; line-height:1.05; }
.nv .nv-rol{ margin:2px 0 10px; font-weight:700; color:var(--muted); }
.nv .nv-mart-t{ margin:0 0 12px; font-size:15.5px; max-width:44ch; }
.nv .nv-pijl{ font-weight:800; text-decoration-thickness:2px; text-underline-offset:4px; }
.nv .nv-pijl::after{ content:" \2192"; }
.nv .nv-bel .nv-h2{ font-size:clamp(38px, 4.6vw, 64px); }
.nv .nv-bel-knoppen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.nv .nv-bel .ph{ display:inline-flex; flex-direction:column; gap:2px; font-size:clamp(18px, 1.8vw, 22px); }
.nv .nv-bel .c-k{ font-size:11.5px; }
.nv .nv-adres{ margin:18px 0 0; font-weight:600; }
.nv .nv-noot{ margin:6px 0 0; font-size:15.5px; color:var(--muted); max-width:52ch; }

@media (min-width:761px) and (max-width:1100px){ .nv .nv-cases{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:1000px){
  .nv .nv-hero-in{ grid-template-columns:minmax(0, 1fr); gap:40px; }
  .nv .nv-b{ justify-self:center; }
  .nv .nv-diensten{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nv .nv-feiten, .nv .nv-stappen{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nv .nv-slot{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:760px){
  .nv .nv-s{ padding-block:44px; }
  .nv .nv-hero-in{ gap:32px; padding-block:16px 28px; }
  .nv .nv-sub{ margin:16px 0 22px; }
  .nv .nv-feiten{ gap:12px 14px; padding-top:16px; }
  .nv .nv-feiten li{ grid-template-columns:20px minmax(0, 1fr); column-gap:8px; font-size:13.5px; }
  .nv .nv-feiten li::before{ width:20px; height:20px; background-size:14px; }
  .nv .nv-diensten{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .nv .nv-dienst{ padding:16px 18px; gap:6px; }
  .nv .nv-dienst h3{ font-size:19px; }
  .nv .nv-dienst > p{ font-size:14.5px; }
  .nv .nv-dienst > .nv-prijs{ padding-top:8px; font-size:14px; }
  .nv .nv-cases.veeg, .nv .nv-tiers.veeg{ align-items:stretch; }
  .nv .nv-tiers.veeg{ padding-top:22px; padding-bottom:6px; }
  .nv .nv-vrij a{ margin-left:0; }
  .nv .nv-stappen{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .nv .nv-mart{ gap:16px; padding:18px; }
  .nv .nv-foto{ width:88px; height:88px; }
  .nv .nv-mb{ font-size:32px; }
  .nv .nv-bel .ph{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .nv .nv-dienst, .nv .nv-case, .nv .nv-dienst h3::after{ transition:none; }
}
/* vloeiender (22-10-2026, na onderzoek NN/g): geen lijnen over de hele breedte en geen grote gaten (die voelen als het einde
   van de pagina), overal dezelfde ruimte, de donkere secties als afgeronde panelen met de lichte pagina eromheen, een
   compacter eerste blok zodat de volgende sectie op een laptop al in beeld komt, en de stipjes als terugkerend teken. */
.nv .nv-s{ padding-block:clamp(36px, 3.6vw, 52px); }
.nv .nv-paneel{ margin:clamp(8px, 1.4vw, 20px) clamp(8px, 1.6vw, 24px); padding-block:clamp(44px, 5vw, 76px); border-radius:clamp(20px, 2.6vw, 36px); overflow:clip; }
.nv .nv-hero-in{ padding-block:clamp(16px, 2.4vw, 40px) clamp(20px, 2.6vw, 36px); }
.nv .nv-b-doek{ max-height:min(480px, 52vh); }
.nv .nv-h1{ font-size:clamp(32px, 3.3vw, 50px); max-width:22ch; }
.nv .nv-feiten{ padding-bottom:clamp(8px, 1vw, 16px); }
#diensten.nv-s{ padding-top:clamp(28px, 2.6vw, 40px); }
.nv .kick::before{ content:""; flex:none; width:6px; height:6px; margin-right:16px; border-radius:50%; background:var(--sec-ink, var(--ink));
  box-shadow:9px 0 0 var(--alt), 18px 0 0 var(--pop); }
.nv .nv-dienst-icoon{ width:40px; height:40px; margin:0 0 2px; }
/* Zo werkt het: de vier stappen verbonden door een lijn van stipjes (van het midden van bolletje 1 naar dat van 4) */
.nv .nv-stappen{ position:relative; }
.nv .nv-stappen li{ position:relative; z-index:1; }
/* op een breed scherm de bolletjes op een rij met de kop en tekst eronder: dan loopt de lijn alleen van bolletje naar
   bolletje, overal even lang en nergens langs tekst (Mart 21-10: "zit door elkaar") */
@media (min-width:1001px){
  .nv .nv-stappen li{ display:block; }
  .nv .nv-st-n{ margin-bottom:14px; }
  .nv .nv-stappen h3{ margin-top:0; }
}
.nv .nv-stappen::before{ content:""; position:absolute; top:17px; left:20px; right:calc((100% - 84px) / 4 - 20px); height:6px;
  background:radial-gradient(circle, var(--ink) 2px, transparent 2.6px) 0 50% / 12px 6px repeat-x; }
@media (max-width:1000px){ .nv .nv-stappen::before{ display:none; } }
/* bewegende stipjes (22-10-2026): site.js geeft een sectie eerst nv-wacht en, als hij in beeld komt, nv-in. Zonder site.js
   of bij minder beweging krijgt hij die klassen niet en staat alles meteen goed. De drie stipjes bij het kopje komen uit
   een stipje; in Zo werkt het tekent de lijn zich van stap 1 naar stap 4 en ploppen de bolletjes erbij op. */
.nv .nv-wacht .kick::before{ transform:scale(0); }
.nv .nv-in .kick::before{ animation:nvStip .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes nvStip{
  0%{ transform:scale(0); box-shadow:0 0 0 var(--alt), 0 0 0 var(--pop); }
  45%{ transform:scale(1.3); box-shadow:0 0 0 var(--alt), 0 0 0 var(--pop); }
  100%{ transform:scale(1); box-shadow:9px 0 0 var(--alt), 18px 0 0 var(--pop); }
}
.nv .nv-wacht .nv-stappen::before{ clip-path:inset(0 100% 0 0); }
.nv .nv-in .nv-stappen::before{ clip-path:inset(0 0 0 0); transition:clip-path 1.1s cubic-bezier(.4, 0, .2, 1) .15s; }
.nv .nv-wacht .nv-st-n{ transform:scale(.3); opacity:0; }
.nv .nv-in .nv-st-n{ transform:none; opacity:1; transition:transform .4s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.nv .nv-in .nv-stappen li:nth-child(1) .nv-st-n{ transition-delay:.1s; }
.nv .nv-in .nv-stappen li:nth-child(2) .nv-st-n{ transition-delay:.45s; }
.nv .nv-in .nv-stappen li:nth-child(3) .nv-st-n{ transition-delay:.8s; }
.nv .nv-in .nv-stappen li:nth-child(4) .nv-st-n{ transition-delay:1.15s; }
@media (max-width:760px){ .nv .nv-wacht .nv-stappen::before{ clip-path:inset(0 0 100% 0); } }
@media (max-width:760px){
  .nv .nv-stappen::before{ display:block; top:20px; bottom:20px; left:17px; right:auto; width:6px; height:auto;
    background:radial-gradient(circle, var(--ink) 2px, transparent 2.6px) 50% 0 / 6px 12px repeat-y; }
  .nv .nv-paneel{ border-radius:20px; }
}
/* de blogs op de voorpagina (21-10-2026): links het nieuwste groot en geel, rechts de drie daarna. Het pictogram tekent
   site.js uit stipjes. De hele kaart is de link (a::after over de kaart). Zonder site.js staat alles gewoon klaar; met
   site.js schuiven de drie in (klasse wacht, dan in) als het blok in beeld komt. */
.nv .nv-blog-alle{ font-weight:800; color:inherit; text-underline-offset:3px; }
.nv .nv-blog{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:16px; align-items:stretch; }
.nv .nv-blog-uit{ position:relative; display:flex; flex-direction:column; gap:12px; margin:0; padding:clamp(22px, 3vw, 34px) clamp(150px, 16vw, 200px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px);
  background:var(--hi); color:var(--hi-ink); border:2px solid var(--ink); border-radius:20px; box-shadow:0 8px 0 -3px var(--shadow); transition:transform .25s; }
.nv .nv-blog-uit:hover{ transform:translateY(-3px); }
.nv .nv-blog-uit .nv-blog-icoon{ position:absolute; top:clamp(22px, 3vw, 34px); right:clamp(18px, 2.6vw, 34px); width:120px; height:120px; }
.nv .nv-blog-meta{ margin:0; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.nv .nv-blog-uit h3{ margin:0; font-family:var(--display); font-variation-settings:"wdth" 104, "wght" 850; font-size:clamp(26px, 2.8vw, 38px); line-height:1.08; text-wrap:balance; }
.nv .nv-blog h3 a{ color:inherit; text-decoration:none; }
.nv .nv-blog h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.nv .nv-blog-uit:focus-within, .nv .nv-blog-lijst li:focus-within{ outline:3px solid var(--alt); outline-offset:4px; }
.nv .nv-blog h3 a:focus-visible{ outline:none; }
.nv .nv-blog-tekst{ margin:0; font-size:16px; line-height:1.5; max-width:46ch; }
.nv .nv-blog-lees{ margin-top:auto; align-self:flex-start; padding:10px 18px; border-radius:999px; background:var(--ink); color:var(--bg); font-weight:800; font-size:14px; }
.nv .nv-blog-lijst{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-auto-rows:1fr; }
.nv .nv-blog-lijst li{ position:relative; display:grid; grid-template-columns:44px minmax(0, 1fr); gap:16px; align-items:center; padding:16px 18px;
  background:var(--card); color:var(--card-ink); border:2px solid var(--card-ink); border-radius:16px; transition:transform .25s, opacity .25s; }
.nv .nv-blog-lijst li:hover{ transform:translateX(4px); }
.nv .nv-blog-lijst .nv-blog-icoon{ width:44px; height:44px; }
.nv .nv-blog-lijst time{ font-size:12.5px; color:color-mix(in srgb, var(--card-ink) 62%, var(--card)); }
.nv .nv-blog-lijst h3{ margin:2px 0 0; font-size:17px; font-weight:800; line-height:1.25; }
.nv .nv-blog.wacht .nv-blog-lijst li{ opacity:0; transform:translateY(22px); }   /* van onder: van rechts gaf zijwaarts scrollen */
.nv .nv-blog.wacht.in .nv-blog-lijst li{ opacity:1; transform:none; transition:transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.nv .nv-blog.wacht.in .nv-blog-lijst li:nth-child(2){ transition-delay:.12s; }
.nv .nv-blog.wacht.in .nv-blog-lijst li:nth-child(3){ transition-delay:.24s; }
@media (max-width:860px){
  .nv .nv-blog{ grid-template-columns:minmax(0, 1fr); }
  .nv .nv-blog-uit{ padding:22px; }
  .nv .nv-blog-uit .nv-blog-icoon{ position:static; width:84px; height:84px; }
}
@media (prefers-reduced-motion: reduce){ .nv .nv-blog-uit, .nv .nv-blog-lijst li{ transition:none; } .nv .nv-blog-uit:hover, .nv .nv-blog-lijst li:hover{ transform:none; } }

/* foto's van personen (Mart, 15-10-2026): niet slepen en geen "Afbeelding opslaan" via de rechtermuisknop. Houdt geen kenner
   tegen (een schermafdruk kan altijd), wel de gewone bezoeker. Zie ook PRIVE_BEELDEN in server.py. */
.blog-foto, .nv-foto{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; pointer-events:none; }
/* de foto als knop (site.js, blok "foto in stipjes"): de klik gaat naar de knop, de foto zelf blijft onaanraakbaar. Bij een klik
   valt hij uiteen in stipjes, die even de B vormen en dan weer de foto worden. Het canvas ligt er even groot overheen, drie keer
   zo breed zodat de stipjes ruimte hebben, en doet niet mee met klikken. */
.foto-knop{ position:relative; flex:none; display:block; padding:0; margin:0; border:0; background:none; border-radius:50%; line-height:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.foto-knop img{ transition:transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.foto-knop:hover img{ transform:rotate(-5deg) scale(1.04); }
.foto-knop:focus-visible{ outline:3px solid var(--alt); outline-offset:4px; }
.foto-knop.speelt img{ opacity:0; transform:none; }
.foto-stip{ position:absolute; left:-100%; top:-100%; width:300%; height:300%; pointer-events:none; z-index:2; }
@media (prefers-reduced-motion: reduce){ .foto-knop img{ transition:none; } .foto-knop:hover img{ transform:none; } }

/* telefoon (21-10-2026) */
main h1, main h2, main h3{ overflow-wrap:break-word; }   /* vangnet: een te lang woord in een kop maakt de pagina niet breder (ook zonder site.js) */
@media (max-width:760px){
  /* de knop naar boven alleen bij terug omhoog scrollen (site.js zet .aan), en iets kleiner: hij lag steeds over de tekst */
  .naar-boven{ width:44px; height:44px; }
  .naar-boven svg{ width:20px; height:20px; }
  /* voet op een telefoon: twee kolommen; de diensten over de hele breedte in twee rijtjes, eigen zaken en contact over de hele
     breedte zodat een domeinnaam of mailadres heel blijft; links wat hoger om op te tikken */
  .foot-in{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 20px; }
  .f-col.f-diensten{ grid-column:1 / -1; grid-row:auto; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2px 20px; align-items:start; }
  .f-diensten b{ grid-column:1 / -1; }
  .f-zaken, .f-contact{ grid-column:1 / -1; }
  .f-col{ gap:2px; }
  .f-col a{ display:flex; align-items:center; min-height:34px; white-space:normal; overflow-wrap:anywhere; break-inside:avoid; }
  /* labels in de cases en het blok Bel je broer niet kleiner dan 12 px */
  .nv .nv-case .nr, .nv .nv-case-feit, .nv .nv-bel .c-k{ font-size:12px; }
}
@media (max-width:480px){
  /* een lang woord (ontwikkeling, verwerkersovereenkomst) breekt op een lettergreep met een streepje, niet op een losse letter.
     Alleen woorden van 12 letters of meer, zodat de rest van de koppen gelijk blijft */
  h1, h2, h3, .tp-tekst{ hyphens:auto; -webkit-hyphenate-limit-before:5; -webkit-hyphenate-limit-after:5; hyphenate-limit-chars:12 5 5; }
}