/* Bouwprompt en venster 'gratis account aanmaken' van de AI Builder (site/deel/aib-prompt.php en aib-aanmelden.php) voor
   pagina's buiten de productpagina, zoals de homepage. Gebouwd uit dezelfde bronnen als assets/pagina-ai-website-builder.css
   (basis, deel 12 en deel 70); de homepage zet ze in een .aibp-omhulsel. */

/* 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 12: bouwprompt (keuze Nieuwe website / Bestaande site vernieuwen, startformulier met draaiende rand, voorbeeldchips),
   gedeeld door de hero en de homepage (site/deel/aib-prompt.php; voor de homepage los gebouwd als assets/aib-prompt.css).
   Staat altijd op een blauw vlak: focusrand wit. */
.aibp [data-aibp-prompt] :focus-visible { outline-color: #fff; }

/* 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; }
/* Label in de gewone letter en zinsvorm (Danny, 7 okt 2026: de kleine monospace in hoofdletters las niet prettig); het stuk tot de
   dubbelepunt ('Probeer het gratis:') geel en vet, de opdracht erna wit. */
.aibp .aibp-hero-label { display: block; padding: 8px 14px 10px; color: rgba(255,255,255,.92); font-family: inherit; font-size: 15.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; text-wrap: pretty; cursor: default; }
.aibp .aibp-hero-label-kop { color: var(--aibp-geel); font-weight: 700; }
.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; }

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

/* Deel 70: venster 'gratis account aanmaken' (site/deel/aib-aanmelden.php, 7 okt 2026; voor de homepage ook los gebouwd als
   assets/aib-prompt.css). 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; }
}