/* Productpagina WebOké AI Builder (/ai-website-builder), naar de Claude Design-handoff van 6 okt 2026
   (~/docs/AI Sitebuilder productpagina.zip). Alles binnen .aibp; geen inline stijlen in het template.
   Deel 00: gedeelde basis (lettertypen, container, sectievlakken, labels, koppen, kaarten, knoppen, vinkjes). */

/* Echt variabel Roboto (wght 100-900): het sitebrede roboto-variable.woff2 heeft één gewicht (zie pagina-mcp-server-voor-ai.css). */
@font-face { font-family: 'Roboto VF'; src: url('fonts/roboto-vf-wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

.aibp {
	--aibp-blauw: #1062fe;
	--aibp-knop: #1d65af;
	--aibp-knop-hover: #1a5a9c;
	--aibp-navy: #152a80;
	--aibp-donker: #0a1030;
	--aibp-geel: #ffd166;
	--aibp-geel-hover: #ffdb85;
	--aibp-groen: #36c055;
	--aibp-groen-tekst: #1b7d34;
	--aibp-tekst: #17191c;
	--aibp-grijs: #5e636e;
	--aibp-grijs-licht: #868a94; /* ontwerp #979ba4, iets donkerder voor 3:1 contrast op wit */
	--aibp-lijn: #e9eaec;
	--aibp-vlak: #f7f8fa;
	--aibp-verloop: linear-gradient(90deg, #152a80, #1d65af);
	--aibp-band: radial-gradient(460px 220px at 90% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(90deg, #1a4a9c, #1d65af);
	--aibp-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--aibp-ease: cubic-bezier(.2,.8,.2,1);
	--aibp-ease-zacht: cubic-bezier(.2,.7,.2,1);
	font-family: 'Roboto VF', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--aibp-tekst);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.aibp *, .aibp *::before, .aibp *::after { box-sizing: border-box; }
.aibp h1, .aibp h2, .aibp h3, .aibp h4, .aibp p, .aibp ul, .aibp ol, .aibp figure, .aibp blockquote, .aibp dl, .aibp dd { margin: 0; }
.aibp ul, .aibp ol { padding: 0; list-style: none; }
.aibp img { max-width: 100%; }
/* Elementstijlen via :where(), zodat elke klasse (knop, cta, link in een kaart) altijd wint. */
:where(.aibp) button { font: inherit; color: inherit; }
:where(.aibp) a { color: var(--aibp-blauw); }
.aibp [hidden] { display: none !important; }
.aibp :focus-visible { outline: 2px solid var(--aibp-blauw); outline-offset: 2px; }
.aibp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Container en sectievlakken */
.aibp-wrap { max-width: 1288px; margin: 0 auto; padding: 0 24px; position: relative; }
.aibp-wrap--1320 { max-width: 1320px; }
.aibp-wrap--1180 { max-width: 1180px; }
.aibp-sectie { position: relative; padding: clamp(80px, 9vw, 124px) 0; }
.aibp-wit { background: #fff; }
.aibp-grijs { background: var(--aibp-vlak); }
.aibp-blauw { background: var(--aibp-verloop); color: #fff; overflow: hidden; }
/* Rasteroverlay op een blauw vlak (alleen decoratie). */
.aibp-raster { position: absolute; inset: 0; pointer-events: none; opacity: .55;
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 54px 54px;
	-webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 80%); mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 80%); }

/* Label boven een kop: gewone tekst, geen kop */
.aibp-label { display: inline-block; font-family: var(--aibp-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--aibp-blauw); line-height: 1.4; }
.aibp-blauw .aibp-label, .aibp-band .aibp-label { color: var(--aibp-geel); }

/* Koppen en intro */
.aibp-h2 { font-size: clamp(34px, 4.2vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; color: var(--aibp-tekst); text-wrap: balance; }
.aibp-h2--03 { letter-spacing: -.03em; }
.aibp-acc { color: var(--aibp-blauw); }
.aibp-blauw .aibp-h2 { color: #fff; }
.aibp-blauw .aibp-acc { color: var(--aibp-geel); }
.aibp-intro { font-size: 18px; line-height: 1.55; color: var(--aibp-grijs); max-width: 500px; text-wrap: pretty; }
.aibp-blauw .aibp-intro { color: rgba(255,255,255,.88); }

/* Kopvormen: gesplitst (links label + kop, rechts intro), gestapeld, gecentreerd */
.aibp-kop-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; align-items: end; }
.aibp-kop-stapel { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.aibp-kop-midden { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; max-width: 720px; margin: 0 auto; }
.aibp-kop-midden .aibp-intro { max-width: 640px; }

/* Kaart */
.aibp-kaart { background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--aibp-lijn), 0 20px 40px -34px rgba(21,42,128,.4); transition: transform .3s var(--aibp-ease), box-shadow .3s var(--aibp-ease); }
.aibp-kaart--zweef:hover { transform: translateY(-4px); }

/* Vinkjes (cirkel met vinkje); het vinkje is een inline svg met stroke currentColor */
.aibp-vink { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(54,192,85,.14); color: var(--aibp-groen-tekst); }
.aibp-vink svg { width: 11px; height: 11px; }
.aibp-vink--wit { background: #fff; color: var(--aibp-navy); }
.aibp-vink--geel { background: var(--aibp-geel); color: var(--aibp-navy); }
.aibp-vink--22 { width: 22px; height: 22px; }

/* Icoontegel */
.aibp-tegel { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(16,98,254,.08); color: var(--aibp-blauw); }

/* Knoppen */
.aibp-knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 20px; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; font-size: 15.5px; font-weight: 800; line-height: 1.2; background: var(--aibp-knop); color: #fff; box-shadow: 0 1px 3px rgba(29,101,175,.35); transition: transform .2s, background .2s; }
.aibp a.aibp-knop { color: #fff; }
.aibp-knop svg { color: var(--aibp-geel); flex: none; }
.aibp-knop:hover { background: var(--aibp-knop-hover); transform: translateY(-1px); color: #fff; }
.aibp-knop--zacht, .aibp a.aibp-knop--zacht { background: rgba(29,101,175,.09); color: var(--aibp-knop); box-shadow: none; }
.aibp-knop--zacht svg { color: var(--aibp-knop); }
.aibp-knop--zacht:hover { background: rgba(29,101,175,.16); color: var(--aibp-knop); }
.aibp-knop--vol { display: flex; width: 100%; }

/* Gele CTA op blauw (hero, adresveld Vernieuwen) */
.aibp-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; flex: none; padding: 8px 8px 8px 20px; border: 0; border-radius: 999px; cursor: pointer; background: var(--aibp-geel); color: #0a1030; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; text-decoration: none; white-space: nowrap;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px -10px rgba(255,209,102,.8); transition: transform .25s var(--aibp-ease), box-shadow .25s, background .25s; }
.aibp-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); pointer-events: none; }
.aibp-cta-pijl { width: 30px; height: 30px; border-radius: 50%; background: #0a1030; color: var(--aibp-geel); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .25s var(--aibp-ease); }
.aibp-cta:hover { background: var(--aibp-geel-hover); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px -10px rgba(255,209,102,.9), 0 0 0 5px rgba(255,209,102,.16); }
.aibp-cta:hover::after { left: 120%; transition: left .8s ease; }
.aibp-cta:hover .aibp-cta-pijl { transform: translateX(2px) rotate(-8deg); }
.aibp-cta:active { transform: scale(.97); }
.aibp .aibp-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Blauw vlak B: band binnen een sectie */
.aibp-band { position: relative; overflow: hidden; background: var(--aibp-band); color: #fff; border-radius: 20px; }

/* Pil-schakelaar (betaalperiode, btw): knoppen met aria-pressed */
.aibp-pil { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--aibp-lijn); }
.aibp-pil button { border: 0; cursor: pointer; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 999px; background: transparent; color: var(--aibp-grijs); transition: background .25s, color .25s; display: inline-flex; align-items: center; gap: 9px; }
.aibp-pil button[aria-pressed="true"] { background: var(--aibp-knop); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.aibp *, .aibp *::before, .aibp *::after { transition: none !important; animation: none !important; }
}

/* Deel 10: hero (stippenveld, keuzeschakelaar, startformulier met draaiende rand, voorbeeldchips), trustbar en slot (Final CTA). */

/* Hero: blauw vlak A; het canvas (stippenveld) maakt het hero-script zelf aan. */
.aibp .aibp-hero { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 7vw, 96px); color: #fff; }
.aibp .aibp-hero-veld { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.aibp .aibp-hero-binnen { position: relative; max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; }
.aibp .aibp-hero :focus-visible { outline-color: #fff; }

.aibp .aibp-hero-tag { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 26px; padding: 7px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.07); color: #fff; font-family: var(--aibp-mono); font-size: 12px; font-weight: 600; line-height: 1.55; letter-spacing: 1.5px; text-transform: uppercase; }
.aibp .aibp-hero-stip { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--aibp-groen); box-shadow: 0 0 0 4px rgba(54,192,85,.22); }
.aibp .aibp-hero-h1 { margin: 0 0 16px; color: #fff; font-family: inherit; font-size: clamp(32px, 4.2vw, 52px); font-weight: 900; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.aibp .aibp-hero-acc { color: var(--aibp-geel); }
.aibp .aibp-hero-intro { max-width: 600px; margin: 0 auto 32px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.55; text-wrap: pretty; }

/* Keuze Nieuwe website / Bestaande site vernieuwen (knoppen met aria-pressed) */
.aibp .aibp-hero-keuze { display: inline-flex; gap: 4px; max-width: 100%; margin: 0 auto 14px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.aibp .aibp-hero-keuzeknop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 11px 20px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: #fff; box-shadow: none; font-size: 15px; font-weight: 700; line-height: 1.5; transition: background .25s, color .25s; }
.aibp .aibp-hero-keuzeknop svg { flex: none; }
.aibp .aibp-hero-keuzeknop[aria-pressed="true"] { background: #fff; color: var(--aibp-navy); box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }

/* Invoerveld: donkerblauwe kaart met een draaiende rand in de huiskleuren (mask-truc: alleen de rand van 2px blijft over). */
@property --aibp-veld-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes aibp-hero-veld { to { --aibp-veld-a: 360deg; } }
.aibp .aibp-hero-prompt { position: relative; max-width: 720px; margin: 0 auto; padding: 11px; border-radius: 24px; text-align: left;
	background: linear-gradient(160deg, #1d3a8a 0%, #142a72 55%, #0f2160 100%);
	box-shadow: 0 30px 72px -22px rgba(0,0,0,.6), 0 0 60px -14px rgba(124,196,255,.55); }
.aibp .aibp-hero-prompt:focus-within { box-shadow: 0 30px 72px -22px rgba(0,0,0,.6), 0 0 70px -10px rgba(255,209,102,.5); }
.aibp .aibp-hero-prompt::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none;
	background: conic-gradient(from var(--aibp-veld-a), #1062fe, #7cc4ff 22%, #fff 34%, #ffd166 50%, #1062fe 72%, #7cc4ff 86%, #1062fe);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	animation: aibp-hero-veld 8s linear infinite; }
.aibp .aibp-hero-label { display: block; padding: 10px 14px 4px; color: #fff; font-family: var(--aibp-mono); font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 1.3px; text-transform: uppercase; cursor: default; }
.aibp .aibp-hero-vak { position: relative; padding: 4px 6px 4px 40px; border-radius: 12px; cursor: text; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 2px 6px rgba(0,0,0,.18); transition: background .2s, box-shadow .2s; }
.aibp .aibp-hero-vak:hover { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 2px 6px rgba(0,0,0,.18); }
.aibp .aibp-hero-prompt:focus-within .aibp-hero-vak { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px var(--aibp-geel), 0 0 0 4px rgba(255,209,102,.16); }
.aibp .aibp-hero-potlood { position: absolute; left: 14px; top: 17px; display: flex; width: 16px; height: 16px; color: var(--aibp-geel); pointer-events: none; }
.aibp .aibp-hero-tekst { display: block; width: 100%; height: 92px; min-height: 92px; margin: 0; padding: 6px 10px 4px; border: 0; border-radius: 0; outline: none; resize: none; background: transparent; box-shadow: none; color: #fff; caret-color: var(--aibp-geel); font-family: inherit; font-size: 17px; font-weight: 400; line-height: 1.5; }
.aibp .aibp-hero-adres { display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 0 4px; }
.aibp .aibp-hero-https { flex: none; color: rgba(255,255,255,.72); font-family: var(--aibp-mono); font-size: 15px; }
.aibp .aibp-hero-adresveld { flex: 1; min-width: 0; height: auto; margin: 0; padding: 10px 0; border: 0; border-radius: 0; outline: none; background: transparent; box-shadow: none; color: #fff; caret-color: var(--aibp-geel); font-family: var(--aibp-mono); font-size: 16px; line-height: 1.5; }
.aibp .aibp-hero-tekst::placeholder, .aibp .aibp-hero-adresveld::placeholder { color: rgba(255,255,255,.72); opacity: 1; }
.aibp .aibp-hero-tekst:focus-visible, .aibp .aibp-hero-adresveld:focus-visible { outline: none; }
.aibp .aibp-hero-voet { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 8px 8px 6px; }
.aibp .aibp-hero-teller { color: rgba(255,255,255,.7); font-family: var(--aibp-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
/* De gele CTA komt uit de basis; '.aibp button { font: inherit; color: inherit }' weegt zwaarder dan '.aibp-cta', dus hier opnieuw. */
.aibp .aibp-hero-cta { color: #0a1030; font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }

/* USP-regel met gele vinkjes */
/* position: relative legt de regel boven de schaduw van het invoerveld (dat zelf relative is en anders eroverheen schildert). */
.aibp .aibp-hero-usps { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 16px; }
.aibp .aibp-hero-usps li { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; }

/* Voorbeeldchips: bij hover of focus wit, met een blauw plusje dat rechts inschuift */
.aibp .aibp-hero-chips { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 720px; margin: 22px auto 0; }
.aibp .aibp-hero-vb { margin-right: 2px; color: #fff; font-size: 14px; font-weight: 600; }
.aibp .aibp-hero-chip { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); font-size: 14px; font-weight: 500; line-height: 1.5;
	transition: background .25s, border-color .25s, color .25s, transform .25s cubic-bezier(.2,.8,.2,1.2), box-shadow .3s, padding .25s cubic-bezier(.2,.8,.2,1); }
.aibp .aibp-hero-chip::after { content: "+"; content: "+" / ""; position: absolute; right: 12px; top: 50%; color: var(--aibp-blauw); font-size: 15px; font-weight: 800; line-height: 1; opacity: 0; transform: translate(-6px, -50%); transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.aibp .aibp-hero-chip:hover, .aibp .aibp-hero-chip:focus-visible { padding-right: 32px; border-color: #fff; background: #fff; color: var(--aibp-navy); transform: translateY(-3px); box-shadow: 0 12px 26px -12px rgba(0,20,80,.7), 0 0 0 4px rgba(255,255,255,.14); }
.aibp .aibp-hero-chip:hover::after, .aibp .aibp-hero-chip:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.aibp .aibp-hero-chip:active { transform: translateY(-1px) scale(.97); transition-duration: .08s; }

@media (max-width: 560px) {
	.aibp .aibp-hero-h1 { font-size: clamp(30px, 9vw, 40px); }
	.aibp .aibp-hero-keuze { display: flex; width: 100%; }
	.aibp .aibp-hero-keuzeknop { flex: 1 1 0; gap: 6px; padding: 10px 10px; font-size: 13.5px; line-height: 1.25; text-align: center; }
	.aibp .aibp-hero-voet { flex-wrap: wrap; }
	.aibp .aibp-hero-cta { flex: 1 1 100%; justify-content: space-between; white-space: normal; text-align: left; }
	.aibp .aibp-hero-usps { gap: 10px 18px; }
}
@media (max-width: 400px) {
	.aibp .aibp-hero-keuzeknop svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.aibp .aibp-hero-chip:hover, .aibp .aibp-hero-chip:focus-visible, .aibp .aibp-hero-chip:active { transform: none; }
}

/* Trustbar: wit, hairline onder; scheidingslijnen tussen de items (1 x 38 px) */
.aibp .aibp-trust { padding: 26px 0; background: #fff; border-bottom: 1px solid var(--aibp-lijn); }
.aibp .aibp-trust-lijst { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 57px; }
.aibp .aibp-trust-item { position: relative; flex: 1; min-width: 210px; }
.aibp .aibp-trust-item + .aibp-trust-item::before { content: ""; position: absolute; left: -29px; top: 50%; width: 1px; height: 38px; margin-top: -19px; background: var(--aibp-lijn); }
.aibp .aibp-trust-blok { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.aibp .aibp-trust-kol { display: flex; flex-direction: column; gap: 2px; }
.aibp .aibp-trust-sterren { display: block; color: #00b67a; line-height: 1; }
.aibp .aibp-trust-sterren svg { display: block; }
.aibp .aibp-trust-num { color: var(--aibp-navy); font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.aibp .aibp-trust-label { color: var(--aibp-grijs); font-size: 12px; line-height: 1.3; white-space: pre-line; }
.aibp .aibp-trust-link:hover .aibp-trust-label { color: var(--aibp-tekst); text-decoration: underline; }
@media (max-width: 1060px) {
	.aibp .aibp-trust-lijst { gap: 22px 28px; }
	.aibp .aibp-trust-item { flex: 1 1 40%; min-width: 180px; }
	.aibp .aibp-trust-item + .aibp-trust-item::before { display: none; }
}

/* Slot (Final CTA): grijs vlak met een blauw blok */
.aibp .aibp-slot { padding: clamp(60px, 7vw, 96px) 24px; background: var(--aibp-vlak); }
.aibp .aibp-slot-blok { position: relative; overflow: hidden; max-width: 1040px; margin: 0 auto; padding: clamp(40px, 5vw, 64px); border-radius: 24px; color: #fff; text-align: center;
	background: radial-gradient(700px 360px at 85% -10%, rgba(0,154,255,.4), transparent 60%), var(--aibp-verloop);
	box-shadow: 0 40px 80px -20px rgba(10,15,30,.55), 0 15px 30px -10px rgba(10,15,30,.25), 0 2px 4px rgba(10,15,30,.08); }
.aibp .aibp-slot-blok :focus-visible { outline-color: #fff; }
.aibp .aibp-slot-label { margin-bottom: 16px; color: var(--aibp-geel); font-weight: 600; }
.aibp .aibp-slot-h2 { margin: 0 0 14px; color: #fff; font-family: inherit; font-size: clamp(32px, 4.2vw, 52px); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.aibp .aibp-slot-tekst { max-width: 520px; margin: 0 auto 28px; color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.aibp .aibp-slot-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.aibp .aibp-slot-knop { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 8px; background: var(--aibp-geel); color: #5a3d00; font-size: 17px; font-weight: 800; line-height: 1.55; text-decoration: none; box-shadow: 0 14px 34px rgba(0,0,0,.3); transition: transform .15s cubic-bezier(.34,1.56,.64,1); }
.aibp .aibp-slot-knop svg { flex: none; }
.aibp .aibp-slot-knop:hover { color: #5a3d00; text-decoration: none; transform: translateY(-2px) scale(1.02); }
.aibp .aibp-slot-knop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.aibp .aibp-slot-link { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; text-decoration: none; }
.aibp .aibp-slot-link:hover { color: #fff; text-decoration: underline; }
@media (max-width: 560px) {
	.aibp .aibp-slot-blok { padding: 40px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.aibp .aibp-slot-knop:hover { transform: none; }
}

/* Deel 20: Voorbeelden (.aibp-vb-) en Prijzen (.aibp-pr-). */

/* ---------- Voorbeelden ---------- */
/* Accentkleur van het actieve voorbeeld; geregistreerd als kleur, zodat de gloed in .6s van kleur verloopt. */
@property --aibp-vb-gloed { syntax: "<color>"; inherits: true; initial-value: #c2562c; }

.aibp .aibp-vb { overflow: hidden; padding: clamp(80px, 9vw, 120px) 0; transition: --aibp-vb-gloed .6s ease; }
.aibp .aibp-vb-gloed { position: absolute; right: -10%; top: 10%; width: 70%; height: 80%; pointer-events: none; filter: blur(20px);
	background: radial-gradient(closest-side, rgba(16,98,254,.08), transparent);
	background: radial-gradient(closest-side, color-mix(in srgb, var(--aibp-vb-gloed) 16%, transparent), transparent); }

/* Breed: links kop en lijst als één blok verticaal gecentreerd naast het beeld (de lege rijen vangen het hoogteverschil op). */
.aibp .aibp-vb-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas: ". beeld" "kop beeld" "lijst beeld" ". beeld"; column-gap: clamp(36px, 5vw, 72px); align-items: center; }
.aibp .aibp-vb-kop { grid-area: kop; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aibp .aibp-vb-intro { max-width: 460px; }
.aibp .aibp-vb-lijst { grid-area: lijst; display: flex; flex-direction: column; gap: 6px; margin-top: 30px; min-width: 0; }
.aibp .aibp-vb-beeld { grid-area: beeld; position: relative; min-width: 0; padding: 26px 10px; }

/* Lijst met beschrijvingen */
.aibp .aibp-vb-knop { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; align-items: start; width: 100%; margin: 0; text-align: left; border: 0; cursor: pointer; padding: 14px 16px; border-radius: 16px; overflow: hidden; background: transparent; box-shadow: none; transition: background .3s, box-shadow .3s; }
.aibp .aibp-vb-knop[aria-pressed="true"] { background: #fff; box-shadow: 0 18px 40px -20px rgba(10,20,60,.35), 0 0 0 1px var(--aibp-lijn); }
.aibp .aibp-vb-tegel { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--aibp-vlak); color: var(--aibp-accent, var(--aibp-blauw)); transition: background .3s; }
.aibp .aibp-vb-knop[aria-pressed="true"] .aibp-vb-tegel { background: rgba(16,98,254,.08); background: color-mix(in srgb, var(--aibp-accent, #1062fe) 14%, transparent); }
.aibp .aibp-vb-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aibp .aibp-vb-citaat { font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--aibp-grijs); text-wrap: pretty; transition: color .3s; }
.aibp .aibp-vb-knop[aria-pressed="true"] .aibp-vb-citaat, .aibp .aibp-vb-knop:hover .aibp-vb-citaat { color: var(--aibp-tekst); }
.aibp .aibp-vb-wie { font-size: 12.5px; line-height: 1.4; color: var(--aibp-grijs); }
/* Voortgangsbalk: alleen als het script automatisch wisselt (.is-auto), op het actieve voorbeeld. */
.aibp .aibp-vb-voortgang { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(16,98,254,.1); opacity: 0; }
.aibp .aibp-vb-voortgang > span { display: block; height: 100%; border-radius: 2px; background: var(--aibp-blauw); transform: scaleX(0); transform-origin: left center; }
.aibp .aibp-vb.is-auto .aibp-vb-knop[aria-pressed="true"] .aibp-vb-voortgang { opacity: 1; }

/* Beeld met badges */
.aibp .aibp-vb-beeld-binnen { position: relative; }
.aibp .aibp-vb-frame { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: #fff;
	box-shadow: 0 50px 90px -40px rgba(10,20,60,.55), 0 0 0 1px rgba(10,20,60,.08);
	transition: opacity .35s var(--aibp-ease-zacht), transform .45s var(--aibp-ease-zacht); }
.aibp .aibp-vb-frame.is-weg { opacity: 0; transform: translateY(14px); }
.aibp .aibp-vb-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.aibp .aibp-vb-badge { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 13px 9px 9px; border-radius: 14px; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.aibp .aibp-vb-badge--tijd { left: -18px; top: -4px; background: var(--aibp-donker); color: #fff; box-shadow: 0 20px 40px -14px rgba(10,16,48,.6); }
.aibp .aibp-vb-ster { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,209,102,.18); color: var(--aibp-geel); font-size: 12px; }
.aibp .aibp-vb-tijd { font-family: var(--aibp-mono); color: var(--aibp-geel); }
.aibp .aibp-vb-badge--paginas { right: 10px; bottom: -6px; background: #fff; color: var(--aibp-tekst); box-shadow: 0 20px 40px -14px rgba(10,16,48,.45); }
.aibp .aibp-vb-badge .aibp-vink { width: 24px; height: 24px; background: rgba(54,192,85,.15); }
.aibp .aibp-vb-badge .aibp-vink svg { width: 12px; height: 12px; }

/* Smal: één kolom; het beeld tussen de kop en de lijst, zodat het voorbeeld meteen te zien is. */
@media (max-width: 980px) {
	.aibp .aibp-vb-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "kop" "beeld" "lijst"; }
	.aibp .aibp-vb-beeld { padding: 34px 0 20px; }
	.aibp .aibp-vb-badge--tijd { left: -6px; }
	.aibp .aibp-vb-lijst { margin-top: 18px; }
	.aibp .aibp-vb-gloed { right: -30%; top: 20%; width: 120%; height: 50%; }
}
@media (max-width: 560px) {
	.aibp .aibp-vb-knop { padding: 13px 12px; gap: 2px 10px; }
	.aibp .aibp-vb-voortgang { left: 12px; right: 12px; }
	.aibp .aibp-vb-citaat { font-size: 15px; }
	.aibp .aibp-vb-badge { font-size: 12px; padding: 7px 11px 7px 7px; }
	.aibp .aibp-vb-badge--paginas { right: 6px; bottom: -10px; }
}

/* ---------- Prijzen ---------- */
.aibp .aibp-pr-wrap { display: flex; flex-direction: column; gap: 56px; }
.aibp .aibp-pr-koptekst { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.aibp .aibp-pr-intro { font-size: 17px; max-width: 560px; margin-top: 14px; }
.aibp .aibp-pr-schakelaars { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.aibp .aibp-pr-schakelaars .aibp-pil button { white-space: nowrap; }
.aibp .aibp-pr-schakelaars .aibp-pil button:not([aria-pressed="true"]):hover { color: var(--aibp-tekst); }
.aibp .aibp-pr .aibp-pil .aibp-pr-jaarknop { padding: 6px 8px 6px 18px; }
.aibp .aibp-pr-bespaar { padding: 4px 9px; border-radius: 999px; background: var(--aibp-geel); color: var(--aibp-navy); font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap; }

/* Prijskaart */
.aibp .aibp-pr-kaart { background: #fff; border-radius: 28px; box-shadow: 0 0 0 1px var(--aibp-lijn), 0 40px 80px -50px rgba(21,42,128,.35); }
.aibp .aibp-pr-kolommen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.aibp .aibp-pr-kolom { position: relative; display: flex; flex-direction: column; padding: 40px 34px 34px; min-width: 0; }
.aibp .aibp-pr-pakket { z-index: 2; margin-top: -18px; border-radius: 24px; background: linear-gradient(180deg, #f3f7ff, #fff 40%); box-shadow: 0 0 0 2px var(--aibp-blauw), 0 30px 60px -30px rgba(16,98,254,.45); }
.aibp .aibp-pr-badge { position: absolute; top: -14px; left: 34px; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--aibp-geel); color: var(--aibp-navy); font-size: 12.5px; font-weight: 800; line-height: 1.3; box-shadow: 0 8px 18px -8px rgba(21,42,128,.4); }
.aibp .aibp-pr-soort { font-family: var(--aibp-mono); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; line-height: 1.4; color: var(--aibp-grijs); }
.aibp .aibp-pr-soort--blauw { color: var(--aibp-blauw); }
.aibp .aibp-pr-naam { margin-top: 6px; font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--aibp-tekst); }
.aibp .aibp-pr-tekst { margin-top: 8px; min-height: 45px; font-size: 15px; line-height: 1.5; color: var(--aibp-grijs); text-wrap: pretty; }

/* Prijs: '€' + euro's + (',centen' en 'per maand' onder elkaar) + doorgestreepte maandprijs bij jaarbetaling */
.aibp .aibp-pr-prijs, .aibp .aibp-pr-prijs-zicht { display: flex; align-items: flex-start; gap: 3px; color: var(--aibp-tekst); }
.aibp .aibp-pr-prijs { margin-top: 26px; }
.aibp .aibp-pr-prijs-zicht { flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.aibp .aibp-pr-valuta { margin-top: 7px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.aibp .aibp-pr-euro { font-size: 58px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.aibp .aibp-pr-euro--tab { font-variant-numeric: tabular-nums; }
.aibp .aibp-pr-per { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; margin-left: 2px; font-size: 13px; line-height: 1.3; color: var(--aibp-grijs); white-space: nowrap; }
.aibp .aibp-pr-per--onder { justify-content: flex-end; align-self: stretch; margin: 0 0 0 6px; padding-bottom: 6px; }
.aibp .aibp-pr-centen { font-size: 22px; font-weight: 800; line-height: 1; color: var(--aibp-tekst); }
.aibp .aibp-pr-was { display: flex; flex-direction: column; gap: 2px; align-self: flex-end; margin-left: 14px; padding-bottom: 6px; }
.aibp .aibp-pr-was s { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--aibp-grijs); text-decoration: line-through; text-decoration-thickness: 2px; white-space: nowrap; }
.aibp .aibp-pr-jaarbetaling { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--aibp-groen-tekst); white-space: nowrap; }
.aibp .aibp-pr-onder { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--aibp-grijs); text-wrap: pretty; }
.aibp .aibp-pr-knop { margin-top: 26px; }

/* Regels (AI-bewerkingen, opslag, mailboxen) */
.aibp .aibp-pr-regels { margin-top: 28px; border-top: 1px solid var(--aibp-lijn); }
.aibp .aibp-pr-regels li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--aibp-lijn); }
.aibp .aibp-pr-regel-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(29,101,175,.09); color: var(--aibp-knop); }
.aibp .aibp-pr-regel-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aibp .aibp-pr-regel-titel { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--aibp-tekst); }
.aibp .aibp-pr-regel-sub { font-size: 12.5px; line-height: 1.4; color: var(--aibp-grijs); }
.aibp .aibp-pr-regel-waarde { flex: none; font-family: var(--aibp-mono); font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--aibp-tekst); }
.aibp .aibp-pr-voet { margin-top: auto; padding-top: 22px; font-size: 13.5px; line-height: 1.5; color: var(--aibp-grijs); text-wrap: pretty; }

/* In het pakket */
.aibp .aibp-pr-inhet { display: flex; flex-direction: column; gap: 22px; padding: 30px 32px 34px; border-top: 1px solid var(--aibp-lijn); border-radius: 0 0 28px 28px; background: #fbfcfd; }
.aibp .aibp-pr-inhet-kop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.aibp .aibp-pr-inhet-kop h3 { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--aibp-tekst); }
.aibp .aibp-pr-inhet-kop p { font-size: 14.5px; line-height: 1.5; color: var(--aibp-grijs); }
.aibp .aibp-pr-groepen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; }
.aibp .aibp-pr-groep { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aibp .aibp-pr-groep h4 { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 800; line-height: 1.3; color: var(--aibp-tekst); }
.aibp .aibp-pr-groep-ico { border-radius: 11px; }
.aibp .aibp-pr-groep ul { display: flex; flex-direction: column; gap: 12px; }
.aibp .aibp-pr-groep li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--aibp-tekst); }

/* Band "Zo werken bewerkingen" met de bundels */
.aibp .aibp-pr-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 24px 28px; }
.aibp .aibp-pr-band-uitleg { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.aibp .aibp-pr-band-titel { font-size: 11.5px; letter-spacing: 1.4px; }
.aibp .aibp-pr-band-tekst { font-size: 15px; line-height: 1.55; color: #fff; text-wrap: pretty; }
.aibp .aibp-pr-bundels { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.aibp .aibp-pr-meer { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.aibp .aibp-pr-meer > span { font-weight: 400; color: rgba(255,255,255,.88); }
.aibp .aibp-pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aibp .aibp-pr-chips li { display: flex; align-items: baseline; gap: 7px; padding: 8px 13px; border-radius: 10px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.aibp .aibp-pr-chip-n { font-family: var(--aibp-mono); font-size: 14px; font-weight: 700; }
.aibp .aibp-pr-chip-bedrag { margin-left: 2px; font-size: 14.5px; font-weight: 800; }

@media (max-width: 1000px) {
	.aibp .aibp-pr-groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.aibp .aibp-pr-kolommen { grid-template-columns: minmax(0, 1fr); }
	.aibp .aibp-pr-pakket { margin-top: 18px; }
	.aibp .aibp-pr-voet { margin-top: 0; }
}
@media (max-width: 560px) {
	.aibp .aibp-pr-wrap { gap: 44px; }
	.aibp .aibp-pr-groepen { grid-template-columns: minmax(0, 1fr); }
	.aibp .aibp-pr-kolom { padding: 34px 22px 26px; }
	.aibp .aibp-pr-badge { left: 22px; }
	.aibp .aibp-pr-inhet { padding: 26px 22px 30px; }
	.aibp .aibp-pr-band { padding: 22px; }
	.aibp .aibp-pr-band-uitleg { flex-basis: 100%; }
	.aibp .aibp-pr-schakelaars .aibp-pil button { padding-left: 14px; padding-right: 14px; }
	.aibp .aibp-pr .aibp-pil .aibp-pr-jaarknop { padding: 6px 6px 6px 14px; }
}

/* Deel 30: Voor wie (.aibp-vw-) en Functies (.aibp-fx-). Statisch: alleen hover-effecten en de knipperende cursor in de teksteditor.
   De nagebootste schermpjes in Functies zijn decoratief (aria-hidden in het template). */

/* Gesplitste kop: links label en H2 */
.aibp .aibp-vw-koptekst, .aibp .aibp-fx-koptekst { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* Voor wie */
.aibp .aibp-vw-wrap { display: flex; flex-direction: column; gap: 44px; }
.aibp .aibp-vw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.aibp .aibp-vw-kaart { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px; border-radius: 22px; }
.aibp .aibp-vw-tegel { width: 44px; height: 44px; border-radius: 13px; }
.aibp .aibp-vw-titel { font-size: 19px; font-weight: 800; line-height: 1.5; letter-spacing: -.02em; color: var(--aibp-tekst); }
.aibp .aibp-vw-tekst { font-size: 15px; line-height: 1.55; color: var(--aibp-grijs); text-wrap: pretty; }
.aibp .aibp-vw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.aibp .aibp-vw-tags li { padding: 5px 10px; border-radius: 999px; background: var(--aibp-vlak); font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--aibp-tekst); }

/* Band "Geen technische kennis nodig" (blauw vlak B) */
.aibp .aibp-vw-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; padding: 30px 34px; border-radius: 24px; }
.aibp .aibp-vw-band-kop { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.aibp .aibp-vw-band .aibp-label { letter-spacing: 1.4px; }
.aibp .aibp-vw-band-zin { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.aibp .aibp-vw-punten { display: flex; flex-direction: column; gap: 12px; }
.aibp .aibp-vw-punten li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: #fff; }
.aibp .aibp-vw-punten .aibp-vink { width: 22px; height: 22px; }

@media (max-width: 1000px) {
	.aibp .aibp-vw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.aibp .aibp-vw-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.aibp .aibp-vw-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Functies: bento-grid van 12 kolommen (7+5, 5+7, 4+4+4) */
.aibp .aibp-fx-wrap { display: flex; flex-direction: column; gap: 48px; }
.aibp .aibp-fx-intro { max-width: 480px; }
.aibp .aibp-fx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.aibp .aibp-fx-7 { grid-column: span 7; }
.aibp .aibp-fx-5 { grid-column: span 5; }
.aibp .aibp-fx-4 { grid-column: span 4; }
.aibp .aibp-fx-tegel { display: flex; flex-direction: column; gap: 20px; min-width: 0; overflow: hidden; padding: 28px; border-radius: 24px; background: #fff;
	box-shadow: 0 0 0 1px var(--aibp-lijn), 0 24px 50px -40px rgba(21,42,128,.4); transition: transform .3s var(--aibp-ease), box-shadow .3s; }
.aibp .aibp-fx-tegel:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--aibp-lijn), 0 30px 60px -30px rgba(21,42,128,.45); }
.aibp .aibp-fx-tegel--blauw, .aibp .aibp-fx-tegel--blauw:hover { background: var(--aibp-band); color: #fff; box-shadow: 0 30px 60px -30px rgba(21,42,128,.6); }
.aibp .aibp-fx-kop { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aibp .aibp-fx-h3 { font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--aibp-tekst); overflow-wrap: break-word; }
.aibp .aibp-fx-tekst { font-size: 15px; line-height: 1.55; color: var(--aibp-grijs); text-wrap: pretty; }
.aibp .aibp-fx-tegel--blauw .aibp-fx-h3 { color: #fff; }
.aibp .aibp-fx-tegel--blauw .aibp-fx-tekst { color: rgba(255,255,255,.85); }

/* 1. Mediabibliotheek: tegels met kleurverloop, bergsilhouet en zon; gestippelde uploadtegel; chips */
.aibp .aibp-fx-media { display: flex; flex-direction: column; gap: 20px; margin-top: auto; }
.aibp .aibp-fx-fotos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.aibp .aibp-fx-foto { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.aibp .aibp-fx-foto--1 { background: linear-gradient(135deg, #d9b27a, #8a5a2b); }
.aibp .aibp-fx-foto--2 { background: linear-gradient(135deg, #9fd3c7, #2f7a6b); }
.aibp .aibp-fx-foto--3 { background: linear-gradient(135deg, #f5b7b1, #c0392b); }
.aibp .aibp-fx-foto--4 { background: linear-gradient(135deg, #aec6ff, #1d65af); }
.aibp .aibp-fx-foto--5 { background: linear-gradient(135deg, #f9e0a3, #d4a017); }
.aibp .aibp-fx-foto svg { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 55%; }
.aibp .aibp-fx-foto path { fill: rgba(0,0,0,.22); }
.aibp .aibp-fx-foto::after { content: ""; position: absolute; right: 16%; top: 14%; width: 11px; height: 11px; border-radius: 50%; background: rgba(255,240,200,.9); }
.aibp .aibp-fx-foto-label { position: absolute; left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.4);
	font-size: 9.5px; font-weight: 700; line-height: 1.5; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aibp .aibp-fx-upload { aspect-ratio: 1 / 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; border-radius: 10px;
	border: 1.5px dashed rgba(255,255,255,.45); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; overflow: hidden; overflow-wrap: anywhere; }
.aibp .aibp-fx-upload svg { color: var(--aibp-geel); flex: none; }
.aibp .aibp-fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aibp .aibp-fx-chips span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #fff; }

/* 2. Teksteditor met zwevende werkbalk en knipperende cursor */
.aibp .aibp-fx-schrijf { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.aibp .aibp-fx-editor { position: relative; padding: 14px 16px; border-radius: 14px; background: var(--aibp-vlak); box-shadow: 0 0 0 2px var(--aibp-blauw); }
.aibp .aibp-fx-werkbalk { position: absolute; left: 12px; top: -15px; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--aibp-navy); box-shadow: 0 8px 16px -8px rgba(21,42,128,.6); }
.aibp .aibp-fx-werkbalk span { width: 24px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; line-height: 1; }
.aibp .aibp-fx-werkbalk .aibp-fx-vet { font-weight: 700; background: rgba(255,255,255,.16); }
.aibp .aibp-fx-werkbalk .aibp-fx-cursief { font-family: Georgia, serif; font-style: italic; }
.aibp .aibp-fx-regel { display: block; font-size: 16px; font-weight: 800; line-height: 1.5; letter-spacing: -.01em; color: var(--aibp-tekst); overflow-wrap: break-word; }
.aibp .aibp-fx-cursor { display: inline-block; width: 2px; height: 17px; margin-left: 2px; vertical-align: -3px; background: var(--aibp-blauw); animation: aibp-fx-knipper 1.06s step-end infinite; }
@keyframes aibp-fx-knipper { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.aibp .aibp-fx-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aibp .aibp-fx-knopje { padding: 8px 12px; border-radius: 9px; background: var(--aibp-vlak); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--aibp-tekst); }
.aibp .aibp-fx-knopje--plus { display: inline-flex; align-items: center; gap: 6px; background: rgba(29,101,175,.09); color: var(--aibp-knop); }
.aibp .aibp-fx-teller { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--aibp-groen-tekst); white-space: nowrap; }
.aibp .aibp-fx-teller::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--aibp-groen); }

/* 3. Huisstijl: kleurvlakken en lettertypekeuze */
.aibp .aibp-fx-stijl { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.aibp .aibp-fx-kleuren, .aibp .aibp-fx-letters { display: flex; gap: 8px; }
.aibp .aibp-fx-kleur { flex: 1; height: 44px; border-radius: 12px; }
.aibp .aibp-fx-kleur--1 { background: #b45309; }
.aibp .aibp-fx-kleur--2 { background: #fdecd6; }
.aibp .aibp-fx-kleur--3 { background: #7c2d12; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--aibp-blauw); }
.aibp .aibp-fx-kleur--4 { background: #f6d7b0; }
.aibp .aibp-fx-letter { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--aibp-vlak); }
.aibp .aibp-fx-letter--gekozen { background: #fff; box-shadow: 0 0 0 2px var(--aibp-blauw); }
.aibp .aibp-fx-aa { flex: none; font-size: 22px; line-height: 1.5; color: var(--aibp-tekst); }
.aibp .aibp-fx-letter--klassiek .aibp-fx-aa { font-family: Georgia, serif; }
.aibp .aibp-fx-letter--gekozen .aibp-fx-aa { font-weight: 800; letter-spacing: -.03em; }
.aibp .aibp-fx-letter-naam { min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--aibp-grijs); overflow-wrap: anywhere; }

/* 4. SEO: scorecirkel 92 van 100, controlepunten en een melding */
.aibp .aibp-fx-seo-kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.aibp .aibp-fx-score { flex: none; width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--aibp-groen) 0 92%, var(--aibp-lijn) 0); }
.aibp .aibp-fx-score-binnen { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aibp .aibp-fx-score-getal { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--aibp-tekst); }
.aibp .aibp-fx-score-van { font-size: 10.5px; line-height: 1.5; color: var(--aibp-grijs); white-space: nowrap; }
/* Flex in plaats van een auto-fit-raster: zo blijft er op tussenbreedtes geen lege kolom naast de drie punten (op 1280 gelijk aan het ontwerp). */
.aibp .aibp-fx-seo-lijst { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.aibp .aibp-fx-seo-punt { flex: 1 1 180px; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border-radius: 12px; background: var(--aibp-vlak); font-size: 14px; line-height: 1.4; color: var(--aibp-tekst); }
.aibp .aibp-fx-seo-punt .aibp-vink { width: 18px; height: 18px; }
.aibp .aibp-fx-seo-punt .aibp-vink svg { width: 10px; height: 10px; }
.aibp .aibp-fx-seo-melding { flex-basis: 100%; flex-wrap: wrap; background: rgba(255,170,0,.1); }
.aibp .aibp-fx-uitroep { flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffaa00; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; }
.aibp .aibp-fx-uitroep::before { content: "!"; }
.aibp .aibp-fx-losop { margin-left: auto; font-weight: 700; color: var(--aibp-blauw); white-space: nowrap; }

/* 5. Talen: pillen met ronde vlaggen */
.aibp .aibp-fx-talen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.aibp .aibp-fx-taal { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 7px; border-radius: 999px; background: var(--aibp-vlak); color: var(--aibp-tekst); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.aibp .aibp-fx-taal--actief { background: var(--aibp-knop); color: #fff; }
.aibp .aibp-fx-taal--erbij { gap: 6px; padding: 7px 13px; background: transparent; box-shadow: inset 0 0 0 1px var(--aibp-lijn); color: var(--aibp-blauw); }
.aibp .aibp-fx-vlag { flex: none; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.aibp .aibp-fx-taal--erbij .aibp-fx-vlag { width: 18px; height: 18px; }
.aibp .aibp-fx-vlag svg { display: block; width: 100%; height: 100%; }

/* 6. Blog: berichten met miniatuur en status */
.aibp .aibp-fx-blog { display: flex; flex-direction: column; margin-top: auto; }
.aibp .aibp-fx-bericht { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--aibp-lijn); }
.aibp .aibp-fx-duim { flex: none; width: 38px; height: 38px; border-radius: 9px; overflow: hidden; }
.aibp .aibp-fx-duim img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.aibp .aibp-fx-duim--dichtbij img { transform: scale(1.7); }
.aibp .aibp-fx-bericht-titel { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--aibp-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aibp .aibp-fx-status { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.aibp .aibp-fx-status--online { background: rgba(54,192,85,.14); color: var(--aibp-groen-tekst); }
.aibp .aibp-fx-status--gepland { background: rgba(16,98,254,.09); color: var(--aibp-blauw); }
.aibp .aibp-fx-status--concept { background: var(--aibp-vlak); color: var(--aibp-grijs); }

/* 7. Formulieren en cookies: schakelaars en het ontvangstadres */
.aibp .aibp-fx-instellingen { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.aibp .aibp-fx-instelling { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--aibp-lijn); font-size: 14px; line-height: 1.5; color: var(--aibp-tekst); }
.aibp .aibp-fx-instelling:last-child { border-bottom: 0; }
.aibp .aibp-fx-schakel { position: relative; flex: none; width: 30px; height: 18px; margin-left: auto; border-radius: 50px; background: #d5d8de; }
.aibp .aibp-fx-schakel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.aibp .aibp-fx-schakel--aan { background: var(--aibp-groen); }
.aibp .aibp-fx-schakel--aan::after { left: auto; right: 2px; }
.aibp .aibp-fx-adres { margin-left: auto; min-width: 0; font-family: var(--aibp-mono); font-size: 12.5px; color: var(--aibp-grijs); overflow-wrap: anywhere; }

@media (max-width: 980px) {
	.aibp .aibp-fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aibp .aibp-fx-5, .aibp .aibp-fx-4 { grid-column: span 1; }
	.aibp .aibp-fx-7, .aibp .aibp-fx-4:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.aibp .aibp-fx-grid { grid-template-columns: minmax(0, 1fr); }
	.aibp .aibp-fx-grid > * { grid-column: auto; }
}
/* Smal scherm: zes fototegels worden te klein voor hun label, dus drie per rij; de scorecirkel onder de uitleg in plaats van ernaast. */
@media (max-width: 560px) {
	.aibp .aibp-fx-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.aibp .aibp-fx-seo-kop { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.aibp .aibp-fx-cursor { animation: none; }
}

/* Deel 40: Vernieuwen (voor/na-schuif, stappen, adresveld) en Van jou (rijen, bestandskaart, vergelijking). */

/* ===== Vernieuwen ===== */
.aibp-rn { display: flex; flex-direction: column; gap: 44px; }
.aibp .aibp-rn-kop { max-width: 680px; gap: 16px; }
.aibp .aibp-rn-kop .aibp-intro { max-width: none; }

/* Witte kaart met de schuif */
.aibp-rn-kaart { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 1040px; margin: 0 auto; padding: 12px; border-radius: 30px; background: #fff; color: var(--aibp-tekst); box-shadow: 0 50px 90px -40px rgba(5,10,40,.6); }
.aibp-rn-hint { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 4px 6px 0; font-size: 12.5px; line-height: 1.5; color: var(--aibp-grijs); }
.aibp-rn-hint svg { flex: none; }

/* Vlak: --aibp-rn-x (0-100) is de stand van de scheidslijn; het script zet hem, zonder script 50. */
.aibp-rn-vlak { --aibp-rn-x: 50; container: aibp-rn-vlak / inline-size; position: relative; aspect-ratio: 16 / 8.6; min-height: 340px; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px var(--aibp-lijn); cursor: ew-resize; -webkit-user-select: none; user-select: none; touch-action: pan-y; }

/* Voor: de verouderde site */
.aibp-rn-oud { position: absolute; inset: 0; display: flex; flex-direction: column; background: #e6e4dc; color: #222; font-family: 'Times New Roman', Times, serif; line-height: 1.5; }
.aibp-rn-o-kop { padding: 16px 4%; background: #2f5f8f; color: #fff; font-size: clamp(16px, 2.2vw, 26px); font-weight: 700; line-height: 1.3; border-bottom: 4px solid #c9b458; }
.aibp-rn-o-menu { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 4%; background: #d4d1c6; font-size: 14px; }
.aibp-rn-o-menu span { color: #1a0dab; text-decoration: underline; }
.aibp-rn-o-romp { flex: 1; display: grid; grid-template-columns: 30% 1fr; gap: 3%; padding: 3% 4%; min-height: 0; }
.aibp-rn-o-zij { padding: 12px; background: #f3f1ea; border: 1px solid #b9b5a8; font-size: 14px; line-height: 1.6; overflow: hidden; }
.aibp-rn-o-bel { color: #b00; }
.aibp-rn-o-hoofd { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aibp-rn-o-welkom { font-size: clamp(16px, 1.8vw, 22px); font-weight: 700; text-align: center; color: #8a1c1c; }
.aibp-rn-o-tekst { font-size: 14px; line-height: 1.55; }
.aibp-rn-o-foto { flex: 1; min-height: 50px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #cfcabb 0 10px, #d8d4c7 10px 20px); border: 1px solid #b9b5a8; font-size: 13px; color: #666; }
.aibp-rn-o-voet { font-size: 11px; color: #777; text-align: center; }

/* Na: de site van de AI Builder, rechts van de lijn zichtbaar */
.aibp-rn-na { position: absolute; inset: 0; display: flex; flex-direction: column; color: #0f2e2b; line-height: 1.5;
	background: radial-gradient(600px 300px at 85% 30%, #d9f3ee, transparent 70%), linear-gradient(180deg, #f4fbf9, #fff 80%);
	clip-path: inset(0 0 0 calc(var(--aibp-rn-x) * 1%)); }
.aibp-rn-n-balk { display: flex; align-items: center; gap: 9px; padding: 14px 4% 6px; }
.aibp-rn-n-logo { flex: none; }
.aibp-rn-n-merk { font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.aibp-rn-n-menu { display: flex; gap: 16px; margin-left: auto; font-size: 12px; font-weight: 600; color: #4b6763; white-space: nowrap; }
.aibp-rn-n-afspraak { flex: none; margin-left: 8px; padding: 8px 13px; border-radius: 999px; background: #0f2e2b; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.aibp-rn-n-romp { flex: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 2%; align-items: center; padding: 0 4%; min-height: 0; }
.aibp-rn-n-tekstkolom { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.aibp-rn-n-pil { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #d8ece8; font-size: 10.5px; font-weight: 700; line-height: 1.4; color: #0f766e; }
.aibp-rn-n-pil > span { padding: 2px 7px; border-radius: 999px; background: #0f766e; color: #fff; }
.aibp-rn-n-kop { font-size: clamp(20px, 2.9vw, 38px); line-height: 1; font-weight: 800; letter-spacing: -.04em; text-wrap: balance; }
.aibp .aibp-rn-n-kop .aibp-acc { background: linear-gradient(90deg, #0f766e, #14b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aibp-rn-n-tekst { max-width: 330px; font-size: clamp(11.5px, 1.05vw, 13.5px); line-height: 1.5; color: #4b6763; }
.aibp-rn-n-knoppen { display: flex; flex-wrap: wrap; gap: 7px; }
.aibp-rn-n-knop { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: #0f766e; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; box-shadow: 0 10px 20px -10px rgba(15,118,110,.8); }
.aibp-rn-n-knop svg { flex: none; color: #fde68a; }
.aibp-rn-n-knop--licht { background: #fff; color: #0f2e2b; box-shadow: 0 0 0 1px #d8ece8; }
.aibp-rn-n-reviews { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.aibp-rn-n-gezichten { display: flex; flex: none; }
.aibp-rn-n-gezichten span { width: 22px; height: 22px; border-radius: 50%; background: #fbbf24; border: 2px solid #fff; }
.aibp-rn-n-gezichten span + span { margin-left: -7px; }
.aibp-rn-n-gezichten span:nth-child(2) { background: #14b8a6; }
.aibp-rn-n-gezichten span:nth-child(3) { background: #0f2e2b; }
.aibp-rn-n-score { font-size: 11px; line-height: 1.3; color: #4b6763; }
.aibp-rn-n-score b { color: #0f2e2b; }

/* Beeld in 3D-kanteling: rotateY van -16deg (lijn links) tot -6deg (lijn rechts). Bewust zonder preserve-3d op de kanteling:
   Chrome tekende het beeld dan niet zolang de clip-path elke frame verschoof (gezien met softwarecompositing). De badges
   liggen daardoor in het vlak van het beeld; iets verschoven en vergroot staan ze waar translateZ(60px/80px) ze zette. */
.aibp-rn-n-beeldkolom { position: relative; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 900px; }
.aibp-rn-n-kantel { position: relative; width: 96%; transform: rotateY(calc(-16deg + var(--aibp-rn-x) * .1deg)) rotateX(7deg) rotateZ(-1deg); transition: transform .2s linear; }
.aibp-rn-n-schaduw { position: absolute; left: 6%; right: 6%; bottom: -12%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(15,46,43,.35), transparent); filter: blur(8px); transform: rotateX(80deg); }
.aibp-rn-n-beeld { display: block; aspect-ratio: 1690 / 931; border-radius: 16px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 30px 50px -20px rgba(15,46,43,.55), 0 0 0 1px rgba(15,46,43,.06); }
.aibp .aibp-rn-n-beeld img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.06); }
.aibp-rn-n-badge { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border-radius: 12px; background: #fff; box-shadow: 0 16px 30px -12px rgba(15,46,43,.45); white-space: nowrap; }
.aibp-rn-n-badge--zon { left: -9%; top: -14%; transform: scale(1.06); }
.aibp-rn-n-badge--geld { right: -6%; bottom: -9%; padding-right: 12px; background: #0f2e2b; color: #fff; box-shadow: 0 18px 32px -12px rgba(15,46,43,.6); transform: scale(1.08); }
.aibp-rn-n-bicoon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fef3c7; color: #d97706; }
.aibp-rn-n-badge--geld .aibp-rn-n-bicoon { background: rgba(20,184,166,.25); color: #5eead4; }
.aibp-rn-n-btekst { display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.aibp-rn-n-blabel { font-size: 9px; color: #4b6763; }
.aibp-rn-n-badge--geld .aibp-rn-n-blabel { color: rgba(255,255,255,.7); }
.aibp-rn-n-bwaarde { font-family: var(--aibp-mono); font-size: 11.5px; font-weight: 700; }

/* Drie dienstkaarten onderaan de nieuwe site */
.aibp-rn-n-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 4% 14px; }
.aibp-rn-n-kaart { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e3efec, 0 6px 16px -12px rgba(15,46,43,.4); }
.aibp-rn-n-kicoon { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #d8f0ec; color: #0f766e; }
.aibp-rn-n-kaart--2 .aibp-rn-n-kicoon { background: #fef3c7; color: #d97706; }
.aibp-rn-n-kaart--3 .aibp-rn-n-kicoon { background: #e0ecff; color: #1d65af; }
.aibp-rn-n-ktekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.4; }
.aibp-rn-n-ktitel, .aibp-rn-n-ksub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aibp-rn-n-ktitel { font-size: 12.5px; font-weight: 800; }
.aibp-rn-n-ksub { font-size: 11px; color: #5b7773; }

/* Scheidslijn met greep (de greep is de schuifregelaar voor toetsenbord en schermlezer) */
.aibp-rn-lijn { position: absolute; top: 0; bottom: 0; left: calc(var(--aibp-rn-x) * 1%); width: 0; pointer-events: none; }
.aibp-rn-lijn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--aibp-blauw); }
.aibp-rn-greep { position: absolute; top: 50%; left: -24px; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--aibp-blauw); box-shadow: 0 0 0 3px var(--aibp-blauw), 0 10px 24px -8px rgba(16,98,254,.6); }
.aibp .aibp-rn-greep:focus-visible { outline: 3px solid var(--aibp-donker); outline-offset: 4px; }

/* Smal vlak (telefoon): minder onderdelen, kleinere letters, zodat beide sites leesbaar blijven */
@container aibp-rn-vlak (max-width: 600px) {
	.aibp-rn-o-kop { padding: 12px 5%; font-size: 17px; }
	.aibp-rn-o-menu { gap: 2px 8px; padding: 6px 5%; font-size: 12px; }
	.aibp-rn-o-romp { grid-template-columns: 38% 1fr; gap: 4%; padding: 5%; }
	.aibp-rn-o-zij { padding: 8px; font-size: 11.5px; line-height: 1.5; }
	.aibp-rn-o-welkom { font-size: 15px; }
	.aibp-rn-o-tekst { font-size: 11.5px; line-height: 1.45; }
	.aibp-rn-o-voet { font-size: 9.5px; }
	.aibp-rn-n-balk { padding: 12px 5% 4px; }
	.aibp-rn-n-menu, .aibp-rn-n-pil, .aibp-rn-n-tekst, .aibp-rn-n-knoppen, .aibp-rn-n-reviews, .aibp-rn-n-kaart--3 { display: none; }
	.aibp-rn-n-romp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 6px; padding: 8px 5% 0; }
	.aibp-rn-n-kop { font-size: 22px; }
	.aibp-rn-n-kantel { width: 84%; }
	.aibp-rn-n-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 5% 12px; }
	.aibp-rn-n-kaart { padding: 8px 10px; }
	.aibp-rn-n-kicoon { display: none; }
	.aibp-rn-n-badge { gap: 6px; padding: 5px 8px 5px 5px; }
	.aibp-rn-n-bicoon { width: 20px; height: 20px; }
	.aibp-rn-n-badge--zon { left: -3%; top: -14%; }
	.aibp-rn-n-badge--geld { right: -3%; bottom: -14%; }
}

/* Drie stappen */
.aibp .aibp-rn-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; width: 100%; max-width: 1040px; margin: 0 auto; }
.aibp-rn-stap { display: flex; align-items: flex-start; gap: 14px; }
.aibp-rn-nr { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--aibp-blauw); font-family: var(--aibp-mono); font-size: 13px; font-weight: 700; }
.aibp-rn-stap-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aibp .aibp-rn-stap h3 { font-size: 16px; font-weight: 800; line-height: 1.5; letter-spacing: 0; color: #fff; }
.aibp-rn-stap p { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.85); text-wrap: pretty; }
@media (max-width: 760px) {
	.aibp .aibp-rn-stappen { grid-template-columns: minmax(0, 1fr); }
}

/* Adresveld: zelfde vlak, rand en focus als het invoerveld in de hero, met een eigen draaiende rand */
@property --aibp-rn-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes aibp-rn-draai { to { --aibp-rn-a: 360deg; } }
.aibp-rn-form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 640px; margin: 0 auto; }
.aibp-rn-veld { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 24px;
	background: linear-gradient(160deg, #1d3a8a 0%, #142a72 55%, #0f2160 100%);
	box-shadow: 0 30px 72px -22px rgba(0,0,0,.6), 0 0 60px -14px rgba(124,196,255,.55); transition: box-shadow .3s; }
.aibp-rn-veld::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none;
	background: conic-gradient(from var(--aibp-rn-a), #1062fe, #7cc4ff 22%, #fff 34%, #ffd166 50%, #1062fe 72%, #7cc4ff 86%, #1062fe);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	animation: aibp-rn-draai 8s linear infinite; }
.aibp-rn-veld:focus-within { box-shadow: 0 30px 72px -22px rgba(0,0,0,.6), 0 0 70px -10px rgba(255,209,102,.5); }
.aibp-rn-vak { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 2px 14px; border-radius: 12px; cursor: text;
	background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 2px 6px rgba(0,0,0,.18); transition: background .2s, box-shadow .2s; }
.aibp-rn-vak:hover { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 2px 6px rgba(0,0,0,.18); }
.aibp-rn-vak:focus-within { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px var(--aibp-geel), 0 0 0 4px rgba(255,209,102,.16); }
.aibp-rn-vak svg { flex: none; color: var(--aibp-geel); }
.aibp-rn-schema { flex: none; font-family: var(--aibp-mono); font-size: 15px; color: rgba(255,255,255,.72); }
.aibp .aibp-rn-invoer { flex: 1; min-width: 0; width: auto; height: auto; margin: 0; padding: 12px 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none;
	font-family: var(--aibp-mono); font-size: 16px; line-height: 1.5; color: #fff; caret-color: var(--aibp-geel); }
.aibp .aibp-rn-invoer::placeholder { color: rgba(255,255,255,.72); opacity: 1; }
.aibp .aibp-rn-invoer:focus, .aibp .aibp-rn-invoer:focus-visible { outline: 0; box-shadow: none; }
/* .aibp button zet font en color op inherit; de gele CTA is hier een echte submitknop, dus letter en kleur opnieuw. */
.aibp .aibp-rn-veld .aibp-cta { color: var(--aibp-donker); font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.aibp-rn-gratis { font-size: 13.5px; color: rgba(255,255,255,.8); text-align: center; }
@media (max-width: 560px) {
	.aibp-rn-veld .aibp-cta { flex: 1 1 100%; justify-content: center; }
}

/* ===== Van jou ===== */
.aibp-vj { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: center; }
.aibp-vj-links { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.aibp-vj-kop { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.aibp-vj-kop .aibp-intro + .aibp-intro { margin-top: 12px; }
.aibp-vj-lijst { display: flex; flex-direction: column; }
.aibp-vj-rij { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--aibp-lijn); }
.aibp-vj-vink { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(16,98,254,.08); color: var(--aibp-blauw); }
.aibp-vj-rij-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aibp .aibp-vj-rij h3 { font-size: 17px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; color: var(--aibp-tekst); }
.aibp-vj-rij p { font-size: 15px; line-height: 1.55; color: var(--aibp-grijs); text-wrap: pretty; }

.aibp-vj-rechts { container: aibp-vj / inline-size; position: relative; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Donkere bestandskaart (illustratie) */
.aibp-vj-map { border-radius: 24px; overflow: hidden; background: var(--aibp-donker); color: #fff; box-shadow: 0 50px 90px -40px rgba(10,16,48,.7); }
.aibp-vj-map-kop { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.aibp-vj-map-kop svg { flex: none; color: var(--aibp-geel); }
.aibp-vj-domein { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--aibp-mono); font-size: 13px; font-weight: 600; color: #fff; }
.aibp-vj-server { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(54,192,85,.16); color: #6ee08b; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.aibp-vj-server::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6ee08b; }
.aibp-vj-map-romp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.aibp-vj-boom { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid rgba(255,255,255,.08); }
.aibp-vj-bestand { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; font-family: var(--aibp-mono); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.78); white-space: nowrap; }
.aibp-vj-bestand--actief { background: rgba(124,196,255,.12); color: #fff; }
.aibp-vj-bestand--sub { padding-left: 28px; }
.aibp-vj-teken { color: #7cc4ff; }
.aibp-vj-teken--map { color: var(--aibp-geel); }
.aibp-vj-grootte { margin-left: auto; padding-left: 8px; font-size: 11.5px; color: rgba(255,255,255,.45); }
.aibp .aibp-vj-code { margin: 0; padding: 15px 20px 18px; overflow: hidden; background: none; border: 0; border-radius: 0; white-space: pre;
	font-family: var(--aibp-mono); font-size: 12.5px; line-height: 1.95; color: rgba(255,255,255,.55); }
.aibp .aibp-vj-code code { padding: 0; margin: 0; background: none; border: 0; font: inherit; color: inherit; white-space: inherit; }
.aibp-vj-c-tag { color: #7cc4ff; }
.aibp-vj-c-attr { color: var(--aibp-geel); }
.aibp-vj-c-waarde { color: #9be7b0; }
.aibp-vj-c-tekst { color: #fff; }
.aibp-vj-map-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.aibp-vj-totaal { font-size: 13px; color: rgba(255,255,255,.7); }
.aibp-vj-zip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 9px; background: #fff; color: var(--aibp-navy); font-size: 13px; font-weight: 800; line-height: 1.3; }
.aibp-vj-zip svg { flex: none; }
@container aibp-vj (max-width: 500px) {
	.aibp-vj-map-romp { grid-template-columns: minmax(0, 1fr); }
	.aibp-vj-boom { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
	.aibp-vj-map-kop { flex-wrap: wrap; row-gap: 8px; }
	.aibp-vj-server { margin-left: 26px; }
}

/* Vergelijking met andere sitebouwers */
.aibp-vj-vg { display: flex; flex-direction: column; padding: 22px 24px 12px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--aibp-lijn), 0 20px 40px -30px rgba(21,42,128,.35); }
.aibp-vj-vg-kop { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.aibp-vj-vg-label { font-family: var(--aibp-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.4; text-transform: uppercase; color: var(--aibp-grijs); }
.aibp .aibp-vj-vg h3 { font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--aibp-tekst); }
.aibp-vj-vg-lijst li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--aibp-lijn); font-size: 15px; line-height: 1.45; color: var(--aibp-tekst); }
.aibp-vj-kruis { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(220,53,69,.1); color: #c0392b; }

/* Deel 50: Zo werkt het. Browserframe met vier schermafbeeldingen en de animatie erover, stappen eronder (handoff README 9).
   Lagen in het beeld: posities in % van het beeld, maten in cqw van het schermvlak (container), kleuren en tijden uit howAnim.
   De standaardwaarden hieronder zijn de eindstand per stap (zonder script en bij minder beweging); het script zet de tussenstanden. */
.aibp .aibp-hw { padding: clamp(80px, 9vw, 128px) 0; overflow: hidden;
	--aibp-hw-inter: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto VF', Roboto, sans-serif; }
.aibp .aibp-hw-binnen { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.aibp .aibp-hw-kop { gap: 16px; }
.aibp .aibp-hw-label { font-weight: 600; }

/* Schermframe: past altijd in één keer in beeld (hoogte venster min 150px), maar nooit smaller dan 640px als er ruimte is */
.aibp .aibp-hw-buiten { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 clamp(12px, 2.5vw, 40px); }
.aibp .aibp-hw-frame { width: min(100%, calc((100vh - 150px) * 16 / 9)); min-width: min(100%, 640px); margin: 0 auto; border-radius: 16px; overflow: hidden; background: #fff;
	box-shadow: 0 50px 90px -40px rgba(10,20,60,.55), 0 0 0 1px rgba(10,20,60,.08); }
.aibp .aibp-hw-balk { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; background: #eceff4; border-bottom: 1px solid #dfe3ea; }
.aibp .aibp-hw-balk span { width: 10px; height: 10px; border-radius: 50%; background: #d3d8e1; }
.aibp .aibp-hw-scherm { position: relative; aspect-ratio: 16 / 9; background: #f3f4f7; overflow: hidden; container-type: inline-size; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Wissel: de nieuwe faded direct in boven de oude, de oude gaat pas na .5s uit */
.aibp .aibp-hw-shot { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity .5s var(--aibp-ease-zacht) .5s; }
.aibp .aibp-hw-shot.is-actief { opacity: 1; z-index: 2; transition-delay: 0s; }
.aibp .aibp-hw-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aibp .aibp-hw-lagen { position: absolute; inset: 0; }
.aibp .aibp-hw-lagen > * { position: absolute; }
.aibp .aibp-hw-spin { animation: aibp-hw-draai calc(360s / 420) linear infinite; }
.aibp .aibp-hw:not(.is-spelend) .aibp-hw-spin { animation-play-state: paused; }
@keyframes aibp-hw-draai { to { transform: rotate(360deg); } }

/* Muispijl met klik (scale) en gele rimpel */
.aibp .aibp-hw-muis { width: 0; height: 0; z-index: 5; pointer-events: none; opacity: 0; transition: left .06s linear, top .06s linear, opacity .06s linear; }
.aibp .aibp-hw-muis--1 { left: 71.2%; top: 79.4%; }
.aibp .aibp-hw-muis--3 { left: 8.8%; top: 85.4%; }
.aibp .aibp-hw-muis--4 { left: 95.6%; top: 3.3%; }
.aibp .aibp-hw-rimpel { position: absolute; left: -1.3cqw; top: -1.3cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: .14cqw solid var(--aibp-geel); background: rgba(255,209,102,.22); opacity: 0; transform: scale(.25); transition: transform .06s linear, opacity .06s linear; }
.aibp .aibp-hw-pijl { position: absolute; left: -.125cqw; top: -.125cqw; width: 1.25cqw; height: 1.75cqw; overflow: visible; filter: drop-shadow(0 .08cqw .12cqw rgba(0,0,0,.35)); transform-origin: 10% 7%; transition: transform .08s; }

/* Stap 1: wit vlak over de originele tekst, typende beschrijving met cursor, knop Website maken */
.aibp .aibp-hw1-wit { left: 24.167%; top: 52.099%; width: 51.667%; height: 10.37%; background: #fff; }
.aibp .aibp-hw1-tekst { left: 24.861%; top: 52.778%; width: 50.243%; font-family: var(--aibp-hw-inter); font-size: .833cqw; font-weight: 400; line-height: 1.54; color: #15171c; white-space: pre-wrap; text-align: left; }
.aibp .aibp-hw1-caret { display: inline-block; width: max(1px, .07cqw); height: 1.15em; margin-left: .03cqw; vertical-align: -.22em; background: #15171c; opacity: 0; }
.aibp .aibp-hw1-caret.is-aan { opacity: 1; }
.aibp .aibp-hw1-knop { left: 67.847%; top: 76.975%; width: 8.264%; height: 3.519%; display: flex; align-items: center; justify-content: center; gap: .5cqw; border-radius: .45cqw; background: #1a62b0;
	font-family: var(--aibp-hw-inter); font-size: .73cqw; font-weight: 600; letter-spacing: -.01em; line-height: 1; color: #fff; white-space: nowrap; transition: background-color .15s, transform .1s; }
.aibp .aibp-hw1-knop.is-hover { background: #16569c; }
.aibp .aibp-hw1-knop.is-in { background: #124a86; transform: scale(.97); }
.aibp .aibp-hw1-ico { position: relative; flex: none; width: .56cqw; height: .56cqw; }
.aibp .aibp-hw1-pijl, .aibp .aibp-hw1-spin { position: absolute; inset: 0; margin: auto; }
.aibp .aibp-hw1-pijl { width: .46cqw; height: .36cqw; }
.aibp .aibp-hw1-spin { width: .56cqw; height: .56cqw; opacity: 0; }
.aibp .aibp-hw1-knop.is-laden .aibp-hw1-pijl { opacity: 0; }
.aibp .aibp-hw1-knop.is-laden .aibp-hw1-spin { opacity: 1; }

/* Stap 2: voortgangsbalk met percentage, vier chatregels met laadrondje dat een vinkje wordt */
.aibp .aibp-hw2-dek { left: 46.806%; top: 68.58%; width: 28.611%; height: .864%; background: linear-gradient(90deg, #134ca0, #1557aa 50%, #1661b3); }
.aibp .aibp-hw2-spoor { left: 47.083%; top: 68.858%; width: 28.09%; height: .174cqw; border-radius: .1cqw; background: #3d7dc5; overflow: hidden; }
.aibp .aibp-hw2-vul { display: block; width: 100%; height: 100%; border-radius: inherit; background: #f6d488; transition: width .06s linear; }
.aibp .aibp-hw2-pct { left: 73.333%; top: 37.407%; width: 2.153%; height: 1.914%; padding-right: .28cqw; display: flex; align-items: center; justify-content: flex-end; background: #296cb8;
	font-family: var(--aibp-hw-inter); font-size: .66cqw; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.aibp .aibp-hw2-ico { left: 6.875%; width: .833%; height: 1.481%; background: #f5f7fb; }
.aibp .aibp-hw2-ico--1 { top: 39.167%; }
.aibp .aibp-hw2-ico--2 { top: 41.759%; }
.aibp .aibp-hw2-ico--3 { top: 44.414%; }
.aibp .aibp-hw2-ico--4 { top: 46.944%; }
.aibp .aibp-hw2-ico svg { position: absolute; inset: 0; margin: auto; }
.aibp .aibp-hw2-ico .aibp-hw-spin { width: .66cqw; height: .66cqw; opacity: 0; }
.aibp .aibp-hw2-vink { width: .52cqw; height: .39cqw; }
.aibp .aibp-hw2-ico.is-bezig .aibp-hw-spin { opacity: 1; }
.aibp .aibp-hw2-ico.is-bezig .aibp-hw2-vink, .aibp .aibp-hw2-ico.is-wacht .aibp-hw2-vink { opacity: 0; }
.aibp .aibp-hw2-rij { left: 6.597%; width: 14.444%; height: 2.531%; background: #f5f7fb; opacity: 0; transition: opacity .25s; }
.aibp .aibp-hw2-rij--1 { top: 38.642%; }
.aibp .aibp-hw2-rij--2 { top: 41.235%; }
.aibp .aibp-hw2-rij--3 { top: 43.889%; }
.aibp .aibp-hw2-rij--4 { top: 46.42%; }
.aibp .aibp-hw2-rij.is-dicht { opacity: 1; }
.aibp .aibp-hw2-onder { left: 19.792%; top: 95.617%; width: 1.007%; height: 1.79%; background: #fff; }
.aibp .aibp-hw2-onder svg { position: absolute; inset: 0; margin: auto; width: .69cqw; height: .69cqw; }

/* Stap 3 en 4: knop Toepassen of Zet online donkerder bij hover en klik; in stap 3 daarna een laadrondje in de knop */
.aibp .aibp-hw3-hover { left: 6.944%; top: 83.148%; width: 5.278%; height: 3.148%; }
.aibp .aibp-hw4-hover { left: 93.194%; top: 1.049%; width: 6.076%; height: 3.086%; }
.aibp .aibp-hw3-hover, .aibp .aibp-hw4-hover { border-radius: .42cqw; background: #0a1e50; opacity: 0; transition: opacity .15s; }
.aibp .aibp-hw3-hover.is-hover, .aibp .aibp-hw4-hover.is-hover { opacity: .14; }
.aibp .aibp-hw3-hover.is-in, .aibp .aibp-hw4-hover.is-in { opacity: .3; }
.aibp .aibp-hw3-laad { left: 6.91%; top: 83.086%; width: 5.347%; height: 3.272%; border-radius: .42cqw; background: #1762b4; opacity: 0; transition: opacity .15s; }
.aibp .aibp-hw3-laad.is-aan { opacity: 1; }
.aibp .aibp-hw3-laad svg { position: absolute; inset: 0; margin: auto; width: .62cqw; height: .62cqw; }

/* Stap 4: gele ring om Zet online (rand, hoek en gloed op de schermbreedte van het ontwerp 3px, 7px en 5px, smaller mee) */
.aibp .aibp-hw4-ring { left: 92.85%; top: .5%; width: 6.75%; height: 4.1%; border-radius: clamp(3px, .576cqw, 7px); border: clamp(1.5px, .247cqw, 3px) solid var(--aibp-geel);
	box-shadow: 0 0 0 clamp(2px, .41cqw, 5px) rgba(255,209,102,.3); transition: opacity .4s; }
.aibp .aibp-hw4-ring.is-uit { opacity: 0; }

/* Stappen: breed vier naast elkaar, middel 2x2, telefoon onder elkaar (zelfde omslagpunten als de geneste auto-fit-grids) */
.aibp .aibp-hw-stappen { display: grid; grid-template-columns: 1fr; gap: 28px clamp(20px, 3vw, 40px); }
@media (min-width: 468px) { .aibp .aibp-hw-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 957px) { .aibp .aibp-hw-stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aibp .aibp-hw-stap { position: relative; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--aibp-lijn); padding: 20px 0 4px; }
.aibp .aibp-hw-gang { position: absolute; left: 0; top: -3px; width: 0; height: 3px; border-radius: 2px; background: var(--aibp-blauw); }
.aibp .aibp-hw-stap.is-actief .aibp-hw-gang { width: 100%; }
.aibp .aibp-hw-nr { font-family: var(--aibp-mono); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--aibp-grijs-licht); transition: color .3s; }
.aibp .aibp-hw-titel { font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--aibp-grijs-licht); transition: color .3s; }
.aibp .aibp-hw-stap.is-actief .aibp-hw-nr { color: var(--aibp-blauw); }
.aibp .aibp-hw-stap.is-actief .aibp-hw-titel { color: var(--aibp-tekst); }
/* De knop zit in de kop; zijn ::after dekt de hele stap, zodat de hele stap klikbaar is en de focusrand om de stap staat */
.aibp .aibp-hw-knop { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; letter-spacing: inherit; text-wrap: balance; }
.aibp .aibp-hw-knop::after { content: ""; position: absolute; inset: -3px 0 0; border-radius: 4px; }
.aibp .aibp-hw-knop:focus-visible { outline: none; }
.aibp .aibp-hw-knop:focus-visible::after { outline: 2px solid var(--aibp-blauw); outline-offset: 4px; }
.aibp .aibp-hw-uitleg { font-size: 15.5px; line-height: 1.55; color: var(--aibp-grijs); text-wrap: pretty; }

/* Deel 60: MCP (blauw vlak met raster en terminalkaart), Reviews (bestaand Trustpilot-blok op wit) en FAQ (details/summary). */

/* MCP */
.aibp .aibp-mcp-in { display: flex; flex-direction: column; gap: 48px; }
.aibp .aibp-mcp-boven { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(40px, 6vw, 72px); align-items: center; }
.aibp .aibp-mcp-links { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.aibp .aibp-mcp-kop { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.aibp .aibp-mcp-intro { max-width: 520px; color: rgba(255,255,255,.85); }
.aibp .aibp-mcp-intro p + p { margin-top: 1.55em; }
.aibp .aibp-mcp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aibp .aibp-mcp-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 13.5px; font-weight: 700; line-height: 1.2; color: #fff; }
.aibp .aibp-mcp-chip-logo { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.aibp .aibp-mcp-chip-logo img { display: block; width: 18px; height: 18px; }
.aibp .aibp-mcp-actie { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.aibp a.aibp-mcp-knop { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 999px; background: var(--aibp-geel); color: var(--aibp-donker); text-decoration: none; font-size: 15.5px; font-weight: 800; line-height: 1.2; box-shadow: 0 12px 26px -10px rgba(255,209,102,.7); transition: transform .2s, background .2s; }
.aibp a.aibp-mcp-knop svg { flex: none; }
.aibp a.aibp-mcp-knop:hover { transform: translateY(-2px); background: var(--aibp-geel-hover); color: var(--aibp-donker); }
.aibp a.aibp-mcp-knop:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.aibp .aibp-mcp-vanaf { font-size: 14.5px; color: rgba(255,255,255,.8); }

/* Terminalkaart (decoratie) */
.aibp .aibp-mcp-term { min-width: 0; border-radius: 22px; overflow: hidden; background: #060a22; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 90px -40px rgba(0,0,0,.8); }
.aibp .aibp-mcp-term-kop { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--aibp-mono); font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.6); }
.aibp .aibp-mcp-term-prompt { color: var(--aibp-geel); flex: none; }
.aibp .aibp-mcp-term-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aibp .aibp-mcp-term-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #6ee08b; white-space: nowrap; flex: none; }
.aibp .aibp-mcp-term-stip { width: 6px; height: 6px; border-radius: 50%; background: #6ee08b; }
.aibp .aibp-mcp-term-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 24px; font-family: var(--aibp-mono); font-size: 13.5px; line-height: 1.6; }
.aibp .aibp-mcp-term-wie { color: rgba(255,255,255,.5); }
.aibp .aibp-mcp-term-vraag { margin-top: -10px; font-family: 'Roboto VF', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15.5px; line-height: 1.5; color: #fff; }
.aibp .aibp-mcp-term-lijn { height: 1px; background: rgba(255,255,255,.08); }
.aibp .aibp-mcp-term-regels { display: flex; flex-direction: column; gap: 7px; margin-top: -6px; }
.aibp .aibp-mcp-term-regel { display: flex; gap: 10px; }
.aibp .aibp-mcp-term-ok { color: #6ee08b; flex: none; }
.aibp .aibp-mcp-term-live { color: var(--aibp-geel); flex: none; }
.aibp .aibp-mcp-term-tekst { min-width: 0; color: #fff; overflow-wrap: anywhere; }
.aibp .aibp-mcp-term-adres { color: #7cc4ff; }
.aibp .aibp-mcp-term-meta { margin-left: auto; padding-left: 6px; color: rgba(255,255,255,.4); white-space: nowrap; }
.aibp .aibp-mcp-term-invoer { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.55); }
.aibp .aibp-mcp-term-cursor { display: inline-block; width: 8px; height: 15px; background: var(--aibp-geel); }

/* Vier voordelen */
.aibp .aibp-mcp-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.aibp .aibp-mcp-kaart { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.aibp .aibp-mcp-tegel { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,209,102,.14); color: var(--aibp-geel); display: flex; align-items: center; justify-content: center; }
.aibp .aibp-mcp-kaart-titel { font-size: 16.5px; font-weight: 800; line-height: 1.4; color: #fff; text-wrap: balance; }
.aibp .aibp-mcp-kaart-tekst { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.8); text-wrap: pretty; }
.aibp .aibp-mcp-kaart-tekst p + p { margin-top: 1.55em; }

/* Twee producten */
.aibp .aibp-mcp-twee { display: flex; flex-direction: column; gap: 14px; }
.aibp .aibp-mcp-twee-titel { font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.aibp .aibp-mcp-vakken { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.aibp .aibp-mcp-vak { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; background: rgba(255,255,255,.08); }
.aibp .aibp-mcp-vak dt { font-family: var(--aibp-mono); font-size: 11.5px; line-height: 1.5; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; }
.aibp .aibp-mcp-vak dd { font-size: 16px; font-weight: 700; line-height: 1.5; color: #fff; text-wrap: pretty; }
.aibp .aibp-mcp-vak--mcp { background: rgba(255,209,102,.14); box-shadow: inset 0 0 0 1px rgba(255,209,102,.4); }
.aibp .aibp-mcp-vak--mcp dt { color: var(--aibp-geel); }

/* Vier kaarten: tussen 1 en 4 kolommen nooit 3 + 1, maar 2 x 2 */
@media (max-width: 1060px) and (min-width: 561px) {
	.aibp .aibp-mcp-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.aibp .aibp-mcp-term-body { padding: 18px 16px 20px; font-size: 12.5px; }
	.aibp .aibp-mcp-term-kop { padding: 12px 16px; font-size: 11.5px; align-items: flex-start; }
	.aibp .aibp-mcp-term-titel { white-space: normal; overflow: visible; }
	.aibp .aibp-mcp-term-vraag { font-size: 15px; }
	.aibp .aibp-mcp-vak { padding: 20px 22px; }
}

/* Reviews: het Trustpilot-blok (assets/sectie-trustpilot2.css) op wit en in de maat van deze pagina. De kaarten vullen
   precies de slider: zoveel per rij als het blokscript per stap verschuift (5 / 3 / 2 / 1, zelfde grenzen als dat script). */
.aibp .aibp-rv { background: #fff; padding-top: clamp(56px, 7vw, 88px); }
.aibp .aibp-rv-titel { font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--aibp-tekst); text-align: center; text-wrap: balance; margin-bottom: 24px; }
.aibp .aibp-rv .wok-trustpilot2 { background: #fff; padding: 0 0 clamp(56px, 7vw, 80px); }
.aibp .aibp-rv .wok-tp2-container { max-width: 1288px; padding: 0 24px; }
.aibp .aibp-rv .wok-tp2-header { margin-bottom: 36px; }
.aibp .aibp-rv .wok-tp2-card { width: calc((100% - 80px) / 5); min-width: calc((100% - 80px) / 5); }
/* Het blok laat de tekst meegroeien met de hoogste kaart, waardoor onder het afkappunt (…) nog een regel zichtbaar wordt;
   hier blijft de tekst op vier regels en zakt de naam naar onderen. */
.aibp .aibp-rv .wok-tp2-card-text { flex-grow: 0; }
@media (max-width: 1200px) {
	.aibp .aibp-rv .wok-tp2-card { width: calc((100% - 40px) / 3); min-width: calc((100% - 40px) / 3); }
}
@media (max-width: 768px) {
	.aibp .aibp-rv .wok-trustpilot2 { padding-bottom: 56px; }
	.aibp .aibp-rv .wok-tp2-card { width: calc((100% - 20px) / 2); min-width: calc((100% - 20px) / 2); }
}
@media (max-width: 540px) {
	.aibp .aibp-rv .wok-tp2-container { padding: 0 16px; }
	.aibp .aibp-rv .wok-tp2-card { width: 100%; min-width: 100%; }
}

/* FAQ */
.aibp .aibp-faq { padding: clamp(56px, 7vw, 90px) 0; }
.aibp .aibp-faq-kop { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.aibp .aibp-faq-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.aibp .aibp-faq-label::before, .aibp .aibp-faq-label::after { content: ""; width: 16px; height: 1px; background: currentColor; opacity: .55; }
.aibp .aibp-faq-h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--aibp-tekst); margin-bottom: 14px; text-wrap: balance; }
.aibp .aibp-faq-tekst { font-size: 17px; line-height: 1.65; color: var(--aibp-grijs); text-wrap: pretty; }
.aibp .aibp-faq-tekst a { color: var(--aibp-blauw); font-weight: 600; }
.aibp .aibp-faq-lijst { max-width: 820px; margin: 0 auto; }
.aibp .aibp-faq-cat { font-family: var(--aibp-mono); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 1.4px; text-transform: uppercase; color: var(--aibp-grijs); margin: 26px 0 8px; padding-left: 2px; }
.aibp .aibp-faq-cat:first-child { margin-top: 0; }
.aibp .aibp-faq-item { background: #fff; border: 1px solid var(--aibp-lijn); border-radius: 12px; margin-bottom: 10px; transition: box-shadow .25s, border-color .25s; }
.aibp .aibp-faq-item[open] { box-shadow: 0 1px 3px rgba(23,25,28,.04), 0 8px 24px rgba(23,25,28,.06); border-color: rgba(16,98,254,.3); }
.aibp .aibp-faq-vraag { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-radius: 11px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--aibp-tekst); }
.aibp .aibp-faq-vraag::-webkit-details-marker { display: none; }
.aibp .aibp-faq-vraag::marker { content: ""; }
.aibp .aibp-faq-vraag:hover .aibp-faq-vraagtekst { color: var(--aibp-blauw); }
.aibp .aibp-faq-vraagtekst { transition: color .2s; }
.aibp .aibp-faq-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--aibp-vlak); color: var(--aibp-blauw); transition: transform .25s var(--aibp-ease), background .25s, color .25s; }
.aibp .aibp-faq-item[open] .aibp-faq-ic { transform: rotate(45deg); background: var(--aibp-blauw); color: #fff; }
.aibp .aibp-faq-antwoord { padding: 0 20px 18px; font-size: 15px; line-height: 1.65; color: var(--aibp-grijs); text-wrap: pretty; }
.aibp .aibp-faq-antwoord a { color: var(--aibp-blauw); font-weight: 600; }

/* Uitklappen met een korte overgang waar de browser hoogte naar auto kan animeren; anders klapt het direct open. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
	.aibp .aibp-faq-item { interpolate-size: allow-keywords; }
	.aibp .aibp-faq-item::details-content { height: 0; overflow: clip; transition: height .45s cubic-bezier(.4,0,.2,1), content-visibility .45s allow-discrete; }
	.aibp .aibp-faq-item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.aibp .aibp-faq-item::details-content { transition: none; }
}
@media (max-width: 520px) {
	.aibp .aibp-faq-vraag { padding: 15px 16px; font-size: 16px; gap: 12px; }
	.aibp .aibp-faq-antwoord { padding: 0 16px 16px; }
}