/* Aeolus Contact – huisstijl zoals Mijn Aeolus en de Surfmobiel. Knop met dubbele klassen: het thema kleurt
   elke button roze. */
.acn {
	--acn-rood: #CF0000; --acn-rood-donker: #A80000; --acn-rood-licht: #FFF0F0;
	--acn-tekst: #111111; --acn-tekst-2: #4A5560; --acn-band: #EAF3F5; --acn-veld: #C5D3D9; --acn-hoofd: #0B7285;
	--acn-groen-licht: #E8F6EE;
	max-width: 680px;
	font: 400 16px/1.5 Roboto, system-ui, -apple-system, sans-serif;
	color: var(--acn-tekst);
}
.acn *, .acn *::before, .acn *::after { box-sizing: border-box; }
.acn [hidden] { display: none !important; }
.acn-form { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 20px; background: var(--acn-band); }
.acn-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acn-veld { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 15px; font-weight: 600; min-width: 0; }
.acn-req { color: var(--acn-rood); }
.acn .acn-veld input, .acn .acn-veld select, .acn .acn-veld textarea {
	width: 100%; min-height: 48px; margin: 0; padding: 10px 14px;
	border: 1.5px solid var(--acn-veld); border-radius: 12px; background: #fff; box-shadow: none;
	font: 400 16px/1.4 Roboto, system-ui, -apple-system, sans-serif; color: var(--acn-tekst);
}
.acn .acn-veld textarea { min-height: 150px; resize: vertical; }
.acn .acn-veld input:focus, .acn .acn-veld select:focus, .acn .acn-veld textarea:focus { outline: none; border-color: var(--acn-hoofd); box-shadow: 0 0 0 3px rgba(11, 114, 133, .2); }
.acn .acn-veld [aria-invalid="true"] { border-color: var(--acn-rood); }
.acn-fout { font-size: 14px; font-weight: 500; color: #9A0000; }
.acn-klein { margin: 0; font-size: 14px; color: var(--acn-tekst-2); }
.acn-klein a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.acn-status:empty { display: none; }
.acn-status { margin: 0; font-size: 15px; color: var(--acn-tekst-2); }
.acn-status.is-fout { padding: 12px 14px; border-radius: 12px; background: var(--acn-rood-licht); color: #7A0000; font-weight: 500; }
.acn button.acn-knop.acn-knop {
	align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; margin: 0; padding: 0 28px;
	border: 2px solid var(--acn-rood); border-radius: 37px; background: var(--acn-rood); color: #fff;
	font: 600 16px/1.2 Roboto, system-ui, -apple-system, sans-serif; text-transform: none; letter-spacing: 0;
	cursor: pointer; transition: background-color .15s, border-color .15s;
}
.acn button.acn-knop.acn-knop:hover, .acn button.acn-knop.acn-knop:focus { border-color: var(--acn-rood-donker); background: var(--acn-rood-donker); color: #fff; }
.acn button.acn-knop.acn-knop:focus-visible { outline: 3px solid var(--acn-tekst); outline-offset: 3px; }
.acn button.acn-knop.acn-knop:disabled { opacity: .6; cursor: wait; }
.acn-klaar { padding: 28px; border-radius: 20px; background: var(--acn-groen-licht); color: #10442B; }
.acn-klaar:focus { outline: none; }
.acn-klaar p { margin: 0; }
.acn-klaar-kop { margin-bottom: 6px !important; font: 700 22px/1.3 Poppins, system-ui, sans-serif; color: #10442B; }
@media (max-width: 600px) {
	.acn-form, .acn-klaar { padding: 20px 16px; border-radius: 18px; }
	.acn-rij { grid-template-columns: 1fr; }
	.acn button.acn-knop.acn-knop { align-self: stretch; }
}