/* ttwwoo-contact-home.css — alleen op de proefsite: de contactopties op de homepage. Afgeleid van ttwwoo-contact-wb.css. 100 is de huidige zwarte versie. */

/* lage voet weg (feedback ttwwoo V5, 9 nov): overal weer de grote voet met het woordmerk en het pand */

/* gedeeld: lichte ondergrond, geen losse witte kaart, lage kop */
html:not([data-k-contact="100"]) .pagina-home .contact.avond { background: var(--wit); color: var(--inkt); padding-block: clamp(40px, 4.5vw, 64px); }
html[data-k-contact="3"] .pagina-home .contact.avond { background: var(--beige); }
html:not([data-k-contact="100"]) .pagina-home .contact.avond :focus-visible { outline-color: var(--inkt); }
html:not([data-k-contact="100"]) .pagina-home .contact.avond .sectiekop { margin: 0; min-height: 0; padding: 0; }
html:not([data-k-contact="100"]) .pagina-home .contact.avond .sectiekop h2 { color: var(--inkt); font-size: clamp(24px, 2vw, 28px); line-height: 1.2; margin: 0; }
html:not([data-k-contact="100"]) .pagina-home .contact.avond .avond-sub { color: var(--inkt); margin-top: 14px; font-size: 17px; }
html:not([data-k-contact="100"]) .pagina-home .contact.avond .formulier { background: none; padding: 0; border-radius: 0; margin: 0; }

/* gedeeld: formulier laag, vraag over de volle breedte en de velden op één rij */
@media (min-width: 861px) {
  html:not([data-k-contact="100"]) .pagina-home .contact.avond .formulier { grid-template-columns: minmax(0, 1fr); }
  html:not([data-k-contact="100"]) .pagina-home .contact.avond .formulier .zv-vraag { grid-column: 1; grid-row: 1; }
  html:not([data-k-contact="100"]) .pagina-home .contact.avond .formulier .zv-vraag textarea { min-height: calc(4 * 1.4em + 41px); }
  html:not([data-k-contact="100"]) .pagina-home .contact.avond .formulier .velden { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin-top: 8px; }
  html:not([data-k-contact="100"]) .pagina-home .contact.avond .formulier .velden .zv-veld + .zv-veld { margin-top: 0; }
  html:not([data-k-contact="100"]) .pagina-home .contact.avond .formulier .zv-slot { grid-column: 1; grid-row: 3; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 28px; }
  html:not([data-k-contact="100"]) .pagina-home .contact.avond .formulier .zv-slot .melding { grid-column: 1 / -1; grid-row: 2; }
  html:is([data-k-contact="1"], [data-k-contact="3"], [data-k-contact="5"]) .pagina-home .contact.avond .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
}
@media (max-width: 860px) { html:not([data-k-contact="100"]) .pagina-home .contact.avond .sectiekop { margin-bottom: 24px; } }

/* 1: wit, de kop in een gele kaart */
html[data-k-contact="1"] .pagina-home .contact.avond .sectiekop { background: var(--geel); border-radius: 12px; padding: clamp(24px, 2.4vw, 32px); }

/* 2: wit, geen vlakken, een lijn boven het formulier */
html[data-k-contact="2"] .pagina-home .contact.avond .sectiekop { padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--lijn); }

/* 3: steenvlak, formulier in een witte kaart */
html[data-k-contact="3"] .pagina-home .contact.avond .formulier { background: var(--wit); border-radius: 12px; padding: 16px 36px 32px; }

/* 4: alleen een smalle zwarte strook met de kop */
html[data-k-contact="4"] .pagina-home .contact.avond { padding-top: 0; }
html[data-k-contact="4"] .pagina-home .contact.avond .sectiekop { background: var(--inkt); box-shadow: 0 0 0 100vmax var(--inkt); clip-path: inset(0 -100vmax); padding-block: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
html[data-k-contact="4"] .pagina-home .contact.avond .sectiekop h2, html[data-k-contact="4"] .pagina-home .contact.avond .avond-sub { color: var(--wit); }
html[data-k-contact="4"] .pagina-home .contact.avond .sectiekop :focus-visible { outline-color: var(--wit); }

/* 5: geen zwart: formulier op een steenvlak, de voet ook in steen */
html[data-k-contact="5"] .pagina-home .contact.avond .formulier { background: var(--beige); border-radius: 12px; padding: 16px 36px 32px; }
html[data-k-contact="5"] .pagina-home .contact.avond .formulier.zweef .zv-veld { border-bottom-color: #a9aaa2; }
html[data-k-contact="5"] .pagina-home .contact.avond .formulier.zweef :is(.zv-groot, .zv-klein, .zv-uitleg) { color: #55554f; }
html[data-k-contact="5"] .pagina-home .voet { background: var(--beige); color: var(--inkt); }
html[data-k-contact="5"] .pagina-home .voet a, html[data-k-contact="5"] .pagina-home .voet .wx-ts-link { color: var(--inkt); }
html[data-k-contact="5"] .pagina-home .voet :focus-visible { outline-color: var(--inkt); }
html[data-k-contact="5"] .pagina-home .voet-merk .woord svg path { fill: var(--inkt); }
html[data-k-contact="5"] .pagina-home .voet-merk .pand { content: url("img/pand-neutraal.svg"); }
html[data-k-contact="5"] .pagina-home :is(.voet-juridisch, .voet-onder) { border-top-color: rgba(30, 30, 30, .18); }
html[data-k-contact="5"] .pagina-home .voet-onder { color: #55554f; }

@media (max-width: 860px) {
  html:is([data-k-contact="3"], [data-k-contact="5"]) .pagina-home .contact.avond .formulier { padding: 10px 22px 24px; }
}