/* Contactpagina. Kop wit met tagline en directe gegevens, daaronder op zachte grond het formulier als witte kaart
   met het logomerk (zelfde vormtaal als de productkaart) en ernaast wat er na het versturen gebeurt.
   Het formulier is Gravity Forms zonder eigen CSS (gform_disable_css); alle opmaak staat hier. */

:root { --cc-rand: #8a94a3; --cc-fout: #b3261e; --cc-fout-vlak: #fdf1f0; }

/* ---------- Kop ---------- */
.cc-kop { background: var(--wit); }
.cc-kop__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; padding-block: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.cc-kop .ct-kruimelpad ol { margin-bottom: 28px; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.cc-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--blauw); }
.cc-label::before { content: ""; width: 22px; height: 2px; background: var(--rood); }
.cc-kop__titel { margin: 0; color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .92; text-transform: uppercase; text-wrap: balance; }
.cc-kop__lead { margin: 22px 0 0; max-width: 52ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; color: var(--tekst); }

/* Direct contact: wie liever belt of mailt, ziet het meteen. */
.cc-direct { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.cc-direct li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--lijn); }
.cc-direct__label { color: var(--zacht); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.cc-direct__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cc-direct__waarde { display: inline-flex; align-items: center; gap: 10px; color: var(--kop); font-weight: 600; font-size: 1.1875rem; text-decoration: none; overflow-wrap: anywhere; }
.cc-direct li:first-child .cc-direct__waarde { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: .01em; }
.cc-direct__waarde .ct-icon { flex: none; width: 20px; height: 20px; color: var(--blauw); }
.cc-direct__waarde:hover { color: var(--blauw); }
.cc-kopieer { margin-top: 0; border-color: var(--lijn); color: var(--blauw); }
.cc-kopieer:hover { border-color: var(--blauw); }
.cc-kopieer.is-gekopieerd { border-color: var(--blauw); background: var(--blauw); color: var(--wit); }

/* ---------- Hoofddeel: formulier links, wat er daarna gebeurt rechts ---------- */
.cc-hoofd { padding-block: clamp(32px, 4vw, 64px) var(--sectie); background: var(--vlak); border-top: 1px solid var(--lijn); }
.cc-hoofd__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }

/* Formulierkaart met de twee rode driehoeken van het logomerk (zoals .cp-kaart). */
.cc-formulier { position: relative; padding: clamp(28px, 4vw, 52px); background: var(--wit); box-shadow: 0 24px 48px rgb(6 23 45 / .08); scroll-margin-top: calc(var(--header-h) + 16px); }
.cc-formulier::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 58px; background: var(--rood); clip-path: polygon(0 0, 100% 0, 0 100%); }
.cc-formulier::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 58px; background: var(--rood); clip-path: polygon(100% 100%, 0 100%, 100% 0); }
.cc-formulier__kop { margin: 0; color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3vw, 2.75rem); line-height: .95; text-transform: uppercase; text-wrap: balance; }
.cc-formulier__intro { margin: 12px 0 0; color: var(--tekst); }
.cc-formulier__taal { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 16px; background: var(--blauw-licht); color: var(--kop); font-weight: 600; }
.cc-formulier__taal .ct-icon { flex: none; width: 20px; height: 20px; color: var(--blauw); }
.cc-formulier__privacy { margin: 20px 0 0; color: var(--zacht); font-size: .875rem; }
.cc-formulier__privacy a { color: var(--blauw); }

/* ---------- Gravity Forms ---------- */
.cc-formulier .gform_wrapper { margin-top: 8px; }
.cc-formulier .gform_heading,
.cc-formulier .gform_validation_container,
.cc-formulier .ct-lokker,
.cc-formulier .gfield--type-hidden,
.cc-formulier .gform_fileupload_rules,
.cc-formulier .validation_message--hidden-on-empty:empty { display: none !important; }
.cc-formulier .gform_fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 20px; }
.cc-formulier .gfield { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.cc-formulier .gfield--width-half { grid-column: span 6; }

/* Tussenkoppen "Uw vraag" en "Uw gegevens" als label met de rode streep. */
.cc-formulier .gsection { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--lijn); }
.cc-formulier .gsection:first-of-type, .cc-formulier .gform_fields > .gsection:nth-child(2) { margin-top: 10px; }
.cc-formulier .gsection_title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--blauw); font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.cc-formulier .gsection_title::before { content: ""; width: 22px; height: 2px; background: var(--rood); }

.cc-formulier .gfield_label { display: block; margin: 0 0 8px; padding: 0; color: var(--kop); font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.cc-formulier .gfield_required { margin-left: 6px; color: var(--zacht); font-size: .8125rem; font-weight: 400; }
.cc-formulier .gfield_required .gfield_required { margin: 0; }
.cc-formulier .gfield_description { margin: 6px 0 0; color: var(--zacht); font-size: .875rem; line-height: 1.45; }

.cc-formulier input:not([type="radio"], [type="checkbox"], [type="file"], [type="hidden"]),
.cc-formulier select,
.cc-formulier textarea {
	display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 14px;
	border: 1px solid var(--cc-rand); border-radius: 0; background: var(--wit); color: var(--inkt);
	font: inherit; font-size: 1rem; line-height: 1.4; /* 16px: geen inzoomen op iOS */
	transition: border-color .2s, box-shadow .2s;
}
.cc-formulier textarea { height: 140px; min-height: 120px; resize: vertical; }
.cc-formulier select { appearance: none; padding-right: 44px; background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23004a9a' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; cursor: pointer; }
.cc-formulier input:hover, .cc-formulier select:hover, .cc-formulier textarea:hover { border-color: var(--kop); }
.cc-formulier input:focus-visible, .cc-formulier select:focus-visible, .cc-formulier textarea:focus-visible { outline: 2px solid var(--blauw); outline-offset: 0; border-color: var(--blauw); }

/* Onderwerp als keuzeknoppen: alle opties zichtbaar, één tik. Echte radioknoppen, dus toetsenbord en schermlezer werken. */
.cc-formulier .ct-veld--keuzes .gfield_radio { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-formulier .ct-veld--keuzes .gchoice { position: relative; }
.cc-formulier .ct-veld--keuzes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cc-formulier .ct-veld--keuzes label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--cc-rand); background: var(--wit); color: var(--kop); font-size: .9375rem; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.cc-formulier .ct-veld--keuzes label::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color .2s, box-shadow .2s; }
.cc-formulier .ct-veld--keuzes input:hover + label { border-color: var(--blauw); }
.cc-formulier .ct-veld--keuzes input:checked + label { border-color: var(--blauw); background: var(--blauw); color: var(--wit); }
.cc-formulier .ct-veld--keuzes input:checked + label::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--blauw); }
.cc-formulier .ct-veld--keuzes input:focus-visible + label { outline: 2px solid var(--blauw); outline-offset: 2px; }

/* Bestand: knop in de stijl van de lijnknop. */
.cc-formulier input[type="file"] { width: 100%; max-width: 100%; padding: 10px; border: 1px dashed var(--cc-rand); background: var(--vlak); color: var(--tekst); font: inherit; font-size: .9375rem; cursor: pointer; }
.cc-formulier input[type="file"]::file-selector-button { margin-right: 14px; padding: 10px 16px; border: 1px solid var(--blauw); background: var(--wit); color: var(--blauw); font: inherit; font-weight: 600; cursor: pointer; }
.cc-formulier input[type="file"]:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }

/* Fouten: rood kader, melding direct onder het veld, overzicht bovenaan met links naar de velden. */
.cc-formulier .gfield_error input:not([type="radio"], [type="file"]),
.cc-formulier .gfield_error select,
.cc-formulier .gfield_error textarea { border-color: var(--cc-fout); box-shadow: inset 4px 0 0 var(--cc-fout); }
.cc-formulier .gfield_validation_message,
.cc-formulier .validation_message { display: flex; gap: 8px; margin: 8px 0 0; color: var(--cc-fout); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.cc-formulier .gfield_validation_message::before,
.cc-formulier .validation_message::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--cc-fout); color: var(--wit); font-size: .75rem; font-weight: 700; }
.cc-formulier .gform_validation_errors { margin: 4px 0 24px; padding: 16px 20px; border-left: 4px solid var(--cc-fout); background: var(--cc-fout-vlak); }
.cc-formulier .gform_validation_errors:focus { outline: 2px solid var(--cc-fout); outline-offset: 2px; }
.cc-formulier .gform_submission_error { display: flex; gap: 10px; margin: 0; color: #8f1d16; font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.cc-formulier .gform_validation_errors ol { margin: 10px 0 0; padding-left: 20px; }
.cc-formulier .gform_validation_errors li { margin: 4px 0; font-size: .9375rem; }
.cc-formulier .gform_validation_error_link { color: #8f1d16; font-weight: 600; }
.cc-formulier .gform-icon { display: none; }

.cc-formulier .gform_footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.cc-formulier .gform_footer .ct-knop { min-width: 220px; justify-content: space-between; }
.cc-formulier .gform_footer .ct-knop[disabled] { opacity: .7; cursor: progress; }
.cc-formulier .gform_ajax_spinner { width: 24px; height: 24px; }

/* Na versturen. */
.cc-formulier .gform_confirmation_message { margin-top: 20px; }
.ct-bedankt { padding: 24px; border-left: 4px solid var(--blauw); background: var(--blauw-licht); color: var(--kop); }
.ct-bedankt p { margin: 8px 0 0; }
.ct-bedankt .ct-bedankt__kop { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1; text-transform: uppercase; }
.ct-bedankt a { color: var(--blauw); font-weight: 600; }

/* ---------- Zijkolom ---------- */
.cc-zij { display: grid; gap: clamp(32px, 3vw, 44px); padding-top: 8px; }
.cc-blok__kop { margin: 0 0 18px; color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.625rem, 2vw, 2rem); line-height: 1; text-transform: uppercase; text-wrap: balance; }

/* Stappen na de aanvraag: nummers op een lijn; de eerste stap (wij bellen) is gevuld, die komt het eerst. */
.cc-stappen { list-style: none; margin: 0; padding: 0; }
.cc-stappen li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding-bottom: 20px; }
.cc-stappen li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 1px; background: var(--lijn); }
.cc-stappen__nr { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--blauw); color: var(--blauw); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; }
.cc-stappen li:first-child .cc-stappen__nr { background: var(--blauw); color: var(--wit); }
.cc-stappen strong { align-self: center; color: var(--kop); font-weight: 600; line-height: 1.3; }
.cc-stappen li > span:last-child { color: var(--tekst); font-size: .9375rem; line-height: 1.55; }

.cc-punten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--lijn); }
.cc-punten li { display: grid; align-content: start; gap: 4px; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--lijn); }
.cc-punten li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--lijn); }
.cc-punten strong { color: var(--kop); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.cc-punten span { color: var(--zacht); font-size: .875rem; line-height: 1.45; }

.cc-adres address { font-style: normal; line-height: 1.6; color: var(--tekst); }
.cc-adres address strong { color: var(--kop); }
.cc-adres__route { margin-top: 12px; color: var(--blauw); }
.cc-adres__route .ct-icon { width: 18px; height: 18px; }
.cc-adres__reg { margin: 14px 0 0; color: var(--zacht); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; }
.cc-adres__efa { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--lijn); color: var(--kop); font-weight: 600; font-size: .9375rem; }
.cc-adres__merk { flex: none; width: 34px; color: var(--rood); }

@media (max-width: 1000px) {
	.cc-kop__raster, .cc-hoofd__raster { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.cc-zij { padding-top: 0; }
}
@media (max-width: 640px) {
	.cc-formulier .gfield--width-half { grid-column: 1 / -1; }
	.cc-formulier { margin-inline: calc(-1 * var(--goot) / 2); padding-inline: 20px; }
	.cc-formulier .gform_footer .ct-knop { width: 100%; }
	.cc-kop__titel { font-size: clamp(2.25rem, 10vw, 3.25rem); hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cc-formulier * { transition: none !important; }
}