.bb-contact {
display: flex;
flex-direction: column;
gap: 25px;
margin: 0;
}
.bb-contact__rij {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.bb-contact__veld {
display: flex;
flex-direction: column;
min-width: 0;
}
.bb-contact__label {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.bb-contact input[type="text"],
.bb-contact input[type="email"],
.bb-contact input[type="tel"],
.bb-contact textarea {
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 16px;
border: 1px solid #ddd;
border-radius: 0;
background: #fff;
color: #666;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
box-shadow: none;
}
.bb-contact textarea {
height: 200px;
resize: vertical;
}
.bb-contact input:focus,
.bb-contact textarea:focus {
outline: 2px solid #1D3C34;
outline-offset: 1px;
}
.bb-contact [aria-invalid="true"] {
border-color: #a4262c;
}
.bb-contact__fout {
margin: 6px 0 0;
padding: 0;
font-size: 14px;
color: #7a1c20;
font-weight: 500;
}
.bb-contact__melding {
padding: 12px 16px;
background: #fff;
border-left: 4px solid #a4262c;
color: #1D3C34;
font-size: 15px;
}
.bb-contact__melding[hidden] {
display: none;
}
.bb-contact__knop {
align-self: flex-start;
margin: 0;
padding: 16px 24px;
border: 0;
border-radius: 32px;
background: #1d3c34;
color: #fff;
font-family: 'Merriweather', Georgia, serif;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background-color .2s;
}
.bb-contact__knop:hover,
.bb-contact__knop:focus-visible {
background: #25403a;
}
.bb-contact__knop:disabled {
opacity: .7;
cursor: progress;
}
.bb-contact__hp {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.bb-contact__bedankt p {
margin: 0;
color: #1D3C34;
font-size: 18px;
}
.bb-contact__bedankt:focus {
outline: none;
}
@media (max-width: 600px) {
.bb-contact__rij {
grid-template-columns: 1fr;
gap: 25px;
}
}