/* 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; 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; }
}

/* Deel 70: venster 'gratis account aanmaken' (aanmelden.php, 7 okt 2026). Een echte <dialog> (showModal: focusval,
   Esc en de rest van de pagina inert). De velden zijn die van /registreren (site/deel/registratie-velden, klassen
   login-* en reg-*); hun opmaak staat hier, binnen het venster, want login.css laadt niet op deze pagina. */
.aibp .aibp-am { width: min(680px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 30px 32px 26px; border: 0; border-radius: 22px;
	background: #fff; color: var(--aibp-tekst); box-shadow: 0 0 0 1px var(--aibp-lijn), 0 40px 90px -30px rgba(10,16,48,.55); overflow: auto; overscroll-behavior: contain; font-size: 15px; }
.aibp .aibp-am::backdrop { background: rgba(10,16,48,.58); }
/* Browser zonder <dialog> (Safari < 15.4): het venster nooit los op de pagina; de hero gaat dan gewoon naar de bouwer. */
.aibp .aibp-am:not([open]) { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.aibp .aibp-am[open] { animation: aibp-am-in .32s var(--aibp-ease) both; }
	@keyframes aibp-am-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
}

/* Kop. De sluitknop staat vooraan in het venster en zweeft mee (sticky), zodat hij ook na scrollen bereikbaar blijft. */
.aibp .aibp-am-kop { padding-right: 8px; }
.aibp .aibp-am-titel { margin-top: 6px; font-size: clamp(23px, 3vw, 28px); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--aibp-tekst); text-wrap: balance; }
.aibp .aibp-am-intro { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--aibp-grijs); text-wrap: pretty; }
.aibp .aibp-am-sluit { position: sticky; top: 10px; z-index: 2; float: right; margin: -12px -14px 0 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--aibp-vlak); color: var(--aibp-grijs);
	box-shadow: 0 0 0 4px #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s; }
.aibp .aibp-am-sluit:hover { background: #eceef2; color: var(--aibp-tekst); }

/* De beschrijving of het adres uit de hero */
.aibp .aibp-am-beschrijving { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 20px; padding: 14px 16px; border-radius: 14px; background: rgba(16,98,254,.05); box-shadow: inset 0 0 0 1px rgba(16,98,254,.12); }
.aibp .aibp-am-beschrijving .aibp-tegel { width: 32px; height: 32px; border-radius: 9px; }
.aibp .aibp-am-beschrijving-tekst { min-width: 0; flex: 1; }
.aibp .aibp-am-beschrijving-label { font-family: var(--aibp-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--aibp-blauw); }
/* Inloggen bovenaan, onder de beschrijving */
.aibp .aibp-am-inlog.aibp-am-inlog--kop { margin: -8px 0 18px; padding: 0; border: 0; text-align: left; font-size: 14px; }
.aibp .aibp-am-citaat { margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--aibp-tekst); white-space: pre-line; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Samenvatting van de fouten (role=alert) */
.aibp .aibp-am-samenvatting { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; color: #b91c1c; font-size: 14px; font-weight: 600; }

/* Velden (zelfde maten als login.css, in de stijl van de pagina) */
.aibp .aibp-am .reg-honeypot { position: absolute; left: -6000px; top: -6000px; }
.aibp .aibp-am .reg-rij { display: flex; flex-wrap: wrap; gap: 0 14px; }
.aibp .aibp-am .reg-rij .login-veld { flex: 1 1 180px; min-width: 0; }
.aibp .aibp-am .reg-rij .reg-veld-adres { flex: 4 1 240px; }
.aibp .aibp-am .reg-rij .reg-veld-smal { flex: 0 1 96px; min-width: 78px; }
/* Wachtwoordrij: labels, velden en meldingen elk op hun eigen regel van het raster (subgrid). Zo staan de velden op één
   lijn, ook als de generatorlink onder het label valt of er onder één veld een melding staat. */
.aibp .aibp-am .reg-rij--laatste { align-items: flex-end; }
.aibp .aibp-am .reg-rij--laatste.reg-rij--regels { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); column-gap: 14px; row-gap: 0; }
.aibp .aibp-am .reg-rij--regels > .login-veld { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.aibp .aibp-am .reg-rij--regels > .login-veld > :first-child { align-self: end; }
.aibp .aibp-am .login-veld { margin-bottom: 14px; }
.aibp .aibp-am .login-label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: var(--aibp-tekst); }
.aibp .aibp-am .reg-label-rij { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.aibp .aibp-am .reg-genereer { margin-bottom: 6px; padding: 0; border: 0; background: none; color: var(--aibp-knop); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.aibp .aibp-am .reg-genereer:hover { color: var(--aibp-navy); }
.aibp .aibp-am .login-invoer { position: relative; display: block; }
.aibp .aibp-am .login-input { width: 100%; min-height: 46px; padding: 11px 13px; border: 1.5px solid #dfe2e7; border-radius: 12px; background: var(--aibp-vlak); color: var(--aibp-tekst);
	font: inherit; font-size: 15px; line-height: 1.3; transition: border-color .15s, background .15s, box-shadow .15s; }
.aibp .aibp-am select.login-input { padding-right: 34px; cursor: pointer; }
.aibp .aibp-am .login-input:hover { border-color: #c9ced6; }
.aibp .aibp-am .login-input:focus { outline: none; border-color: var(--aibp-knop); background: #fff; box-shadow: 0 0 0 4px rgba(16,98,254,.14); }
.aibp .aibp-am .login-input[aria-invalid="true"] { border-color: #dc2626; background: #fff; }
/* Focus op een veld met een fout: een duidelijke blauwe rand eromheen (rood op rood viel bijna weg). */
.aibp .aibp-am .login-input[aria-invalid="true"]:focus { outline: 2px solid var(--aibp-knop); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(220,38,38,.14); }
.aibp .aibp-am .login-input--wachtwoord { padding-right: 48px; }
.aibp .aibp-am .login-oog { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--aibp-grijs);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.aibp .aibp-am .login-oog svg[hidden] { display: none; }
.aibp .aibp-am .login-oog:hover { background: rgba(16,98,254,.08); color: var(--aibp-knop); }
.aibp .aibp-am .reg-veldfout { margin-top: 6px; color: #b91c1c; font-size: 13px; line-height: 1.4; }
.aibp .aibp-am .reg-nieuwsbrief { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.aibp .aibp-am .reg-nieuwsbrief input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--aibp-knop); }
.aibp .aibp-am .reg-nieuwsbrief-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--aibp-grijs); }

/* Turnstile, knop, voetregels */
.aibp .aibp-am-robot { min-height: 0; margin-bottom: 12px; border-radius: 8px; }
.aibp .aibp-am-robot:empty { margin-bottom: 0; }
.aibp .aibp-am-robot:focus { outline: 2px solid var(--aibp-knop); outline-offset: 3px; }
.aibp .aibp-am-robot + .reg-veldfout { margin: -4px 0 12px; }
.aibp .aibp-am-knop { margin-top: 4px; padding: 16px 20px; font-size: 16px; }
.aibp .aibp-am-knop[aria-disabled="true"] { cursor: progress; opacity: .8; transform: none; }
.aibp .aibp-am-gratis { margin-top: 10px; text-align: center; font-size: 13px; color: var(--aibp-grijs); }
.aibp .aibp-am-inlog { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--aibp-lijn); text-align: center; font-size: 14.5px; color: var(--aibp-grijs); }
.aibp .aibp-am-inlog a { margin-left: 4px; font-weight: 800; color: var(--aibp-knop); }

/* Telefoon: het venster vult het scherm, één kolom waar de rij niet past */
@media (max-width: 600px) {
	.aibp .aibp-am { width: 100vw; max-height: 100dvh; height: 100dvh; padding: 20px 18px 22px; border-radius: 0; }
	.aibp .aibp-am-sluit { margin: -10px -8px 0 10px; }
	.aibp .aibp-am-beschrijving { margin: 14px 0 16px; padding: 12px 14px; }
	.aibp .aibp-am .login-input { font-size: 16px; }
}