/* Lijn-B Forms: basisopmaak. Past zich aan met CSS-variabelen; thema-lettertypen en -kleuren worden overgenomen. */
.lbf-form {
	--lbf-kleur: currentColor;
	--lbf-accent: #2b6cb0;
	--lbf-rand: #b9bec6;
	--lbf-rand-focus: var(--lbf-accent);
	--lbf-achtergrond: #fff;
	--lbf-fout: #b3261e;
	--lbf-gat: 16px;
	--lbf-radius: 4px;
	--lbf-knop-tekst: #fff;
	position: relative;
	font: inherit;
	color: inherit;
}
.lbf-form *, .lbf-form *::before, .lbf-form *::after { box-sizing: border-box; }
.lbf-velden { display: flex; flex-wrap: wrap; gap: var(--lbf-gat); }
.lbf-veld { width: 100%; min-width: 0; }
.lbf-veld[hidden] { display: none; }
.lbf-breedte-helft { width: calc((100% - var(--lbf-gat)) / 2); }
.lbf-breedte-derde { width: calc((100% - 2 * var(--lbf-gat)) / 3); }
.lbf-breedte-tweederde { width: calc((100% - 2 * var(--lbf-gat)) / 3 * 2 + var(--lbf-gat)); }
.lbf-veld > label, .lbf-groep > legend { display: block; margin: 0 0 6px; font-weight: 600; padding: 0; }
.lbf-verplicht { color: var(--lbf-fout); }
/* Voor velden waarvan het label alleen voor schermlezers is (bijvoorbeeld achternaam naast voornaam): klasse lbf-label-verborgen.
   Het label houdt zijn plek, zodat de velden naast elkaar op één lijn blijven. */
.lbf-label-verborgen > label:first-child { color: transparent; user-select: none; }
.lbf-form input[type=text], .lbf-form input[type=email], .lbf-form input[type=tel], .lbf-form input[type=number],
.lbf-form input[type=date], .lbf-form input[type=url], .lbf-form select, .lbf-form textarea {
	display: block; width: 100%; padding: 10px 12px; font: inherit; color: inherit; line-height: 1.4;
	background: var(--lbf-achtergrond); border: 1px solid var(--lbf-rand); border-radius: var(--lbf-radius);
	box-shadow: none; margin: 0;
}
.lbf-form textarea { min-height: 140px; resize: vertical; }
.lbf-form input:focus, .lbf-form select:focus, .lbf-form textarea:focus {
	outline: 2px solid var(--lbf-rand-focus); outline-offset: 1px; border-color: var(--lbf-rand-focus);
}
.lbf-groep { border: 0; padding: 0; margin: 0; min-width: 0; }
.lbf-optie, .lbf-akkoord { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0; font-weight: 400; cursor: pointer; }
.lbf-optie input, .lbf-akkoord input { margin-top: 0.3em; flex: none; }
.lbf-beschrijving { margin-top: 4px; font-size: 0.9em; opacity: 0.8; }
.lbf-fout { min-height: 0; margin-top: 4px; font-size: 0.9em; color: var(--lbf-fout); }
.lbf-heeft-fout input, .lbf-heeft-fout select, .lbf-heeft-fout textarea { border-color: var(--lbf-fout); }
.lbf-acties { margin-top: calc(var(--lbf-gat) * 1.25); }
.lbf-knop {
	display: inline-block; cursor: pointer; padding: 11px 22px; font: inherit; font-weight: 600; line-height: 1.2;
	color: var(--lbf-knop-tekst); background: var(--lbf-accent); border: 2px solid var(--lbf-accent); border-radius: var(--lbf-radius);
}
.lbf-knop:hover, .lbf-knop:focus-visible { filter: brightness(0.92); }
.lbf-knop[disabled] { opacity: 0.6; cursor: wait; }
.lbf-melding { margin-top: 12px; }
.lbf-melding:empty { display: none; }
.lbf-melding.lbf-mislukt { color: var(--lbf-fout); font-weight: 600; }
.lbf-succes { padding: 14px 16px; border-left: 4px solid var(--lbf-accent); background: rgba(0, 0, 0, 0.04); }
.lbf-beheerdersmelding { padding: 10px 14px; background: #fff4e5; border: 1px solid #f0c36d; }
/* Pagina's: het formulier is opgedeeld in stappen. Zonder JavaScript staan alle pagina's onder elkaar. */
.lbf-pagina[hidden], .lbf-voortgang[hidden], .lbf-knop[hidden] { display: none; }
.lbf-pagina:focus { outline: none; }
.lbf-pagina-voorbeeld { margin: 0 0 10px; padding: 4px 0; border-top: 2px dashed var(--lbf-rand); font-size: 0.85em; font-weight: 600; opacity: 0.7; }
.lbf-pagina + .lbf-pagina .lbf-pagina-voorbeeld { margin-top: 24px; }
.lbf-voortgang { margin: 0 0 calc(var(--lbf-gat) * 1.25); }
.lbf-voortgang-tekst { font-size: 0.9em; font-weight: 600; margin: 0 0 6px; }
.lbf-voortgang-balk { height: 6px; background: rgba(0, 0, 0, 0.1); border-radius: 999px; overflow: hidden; }
.lbf-voortgang-balk span { display: block; height: 100%; width: 0; background: var(--lbf-accent); border-radius: inherit; transition: width 0.25s ease; }
.lbf-pagina-acties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.lbf-knoppen-uiteen .lbf-pagina-acties { justify-content: flex-end; }
.lbf-knoppen-uiteen .lbf-vorige { margin-right: auto; }
.lbf-knoppen-links .lbf-pagina-acties { justify-content: flex-start; }
.lbf-knoppen-midden .lbf-pagina-acties { justify-content: center; }
.lbf-knoppen-rechts .lbf-pagina-acties { justify-content: flex-end; }
.lbf-vorige-omlijnd .lbf-vorige { color: var(--lbf-accent); background: transparent; }
.lbf-vorige-tekst .lbf-vorige { color: var(--lbf-accent); background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; text-decoration: underline; }
@media (max-width: 576px) {
	.lbf-label-verborgen > label:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.lbf-breedte-helft, .lbf-breedte-derde, .lbf-breedte-tweederde { width: 100%; }
}