/* ttwwoo-contact.css — alleen op de proefsite: vijf opties voor de contactpagina.
   Feedback p. 15 plus reactie Juri: direct het formulier, info ernaast, niet zo massief zwart. data-k-contact 1 t/m 5; 100 is de huidige zwarte versie. */

/* gedeeld: de voet is op deze pagina veel lager */

/* gedeeld: lichte ondergrond */
html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-contact { background: var(--wit); color: var(--inkt); padding-block: clamp(40px, 4.5vw, 64px); }
html[data-k-contact="3"] body:has(.dk-contact) .dk-contact { background: var(--beige); }
html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-contact :focus-visible { outline-color: var(--inkt); }
html:not([data-k-contact="100"]) body:has(.dk-contact) .formulier { background: none; padding: 0; border-radius: 0; }
html:not([data-k-contact="100"]) body:has(.dk-contact) .sectiekop :is(h1, h2) { font-size: clamp(24px, 2vw, 28px); line-height: 1.2; }
:is([data-k-contact="1"], [data-k-contact="2"], [data-k-contact="3"], [data-k-contact="5"]) body:has(.dk-contact) .dk-contact :is(h1, h2) { color: var(--inkt); }
:is([data-k-contact="1"], [data-k-contact="2"], [data-k-contact="3"], [data-k-contact="5"]) body:has(.dk-contact) .dk-direct .dk-lbl { color: var(--zacht); }
:is([data-k-contact="1"], [data-k-contact="2"], [data-k-contact="3"], [data-k-contact="5"]) body:has(.dk-contact) .dk-direct :is(a, address, p) { color: var(--inkt); }
:is([data-k-contact="1"], [data-k-contact="2"], [data-k-contact="3"], [data-k-contact="5"]) body:has(.dk-contact) .dk-direct a:not(.dk-knop) { font-size: 17px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-direct { margin-top: 24px; gap: 0; }
html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-direct li + li { margin-top: 16px; }
html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-direct address { font-size: 17px; }
html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-direct .dk-knop { font-size: 15px; font-weight: 500; margin-top: 8px; }
:is([data-k-contact="1"], [data-k-contact="2"], [data-k-contact="3"], [data-k-contact="5"]) body:has(.dk-contact) .dk-direct .dk-knop { color: var(--inkt); }
html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-direct .dk-knop::before { display: none; }

/* gedeeld: formulier laag, vraag over de volle breedte en de velden op één rij */
@media (min-width: 861px) {
  html:not([data-k-contact="100"]) body:has(.dk-contact) .formulier { grid-template-columns: minmax(0, 1fr); }
  html:not([data-k-contact="100"]) body:has(.dk-contact) .formulier .zv-vraag { grid-column: 1; grid-row: 1; }
  html:not([data-k-contact="100"]) body:has(.dk-contact) .formulier .zv-vraag textarea { min-height: calc(4 * 1.4em + 41px); }
  html:not([data-k-contact="100"]) body:has(.dk-contact) .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"]) body:has(.dk-contact) .formulier .velden .zv-veld + .zv-veld { margin-top: 0; }
  html:not([data-k-contact="100"]) body:has(.dk-contact) .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"]) body:has(.dk-contact) .formulier .zv-slot .melding { grid-column: 1 / -1; grid-row: 2; }
}

/* 1: wit, de gegevens in een gele kaart */
@media (min-width: 861px) {
  [data-k-contact="1"] body:has(.dk-contact) .dk-contact .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); align-items: stretch; }
}
[data-k-contact="1"] body:has(.dk-contact) .dk-contact-kop { background: var(--geel); border-radius: 12px; padding: clamp(24px, 2.4vw, 32px); }
[data-k-contact="1"] body:has(.dk-contact) .dk-direct .dk-lbl { color: var(--inkt); }

/* 2: wit, geen vlakken: formulier links, gegevens smal rechts achter een dunne lijn */
@media (min-width: 861px) {
  [data-k-contact="2"] body:has(.dk-contact) .dk-contact .wrap { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 28px clamp(40px, 5vw, 72px); }
  [data-k-contact="2"] body:has(.dk-contact) .dk-contact-kop { display: contents; }
  [data-k-contact="2"] body:has(.dk-contact) .sectiekop { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  [data-k-contact="2"] body:has(.dk-contact) .formulier { grid-column: 1; grid-row: 2; }
  [data-k-contact="2"] body:has(.dk-contact) .dk-direct { grid-column: 2; grid-row: 2; margin: 0; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--lijn); align-self: stretch; }
}

/* 3: steenvlak, formulier in een witte kaart */
@media (min-width: 861px) {
  [data-k-contact="3"] body:has(.dk-contact) .dk-contact .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); }
}
html[data-k-contact="3"] body:has(.dk-contact) .formulier { background: var(--wit); border-radius: 12px; padding: 16px 36px 32px; }
@media (max-width: 860px) { html[data-k-contact="3"] body:has(.dk-contact) .formulier { padding: 10px 22px 24px; } }

/* 4: alleen een smalle zwarte strook met de gegevens, formulier eronder op wit */
html[data-k-contact="4"] body:has(.dk-contact) .dk-contact { padding-top: 0; }
[data-k-contact="4"] body:has(.dk-contact) .dk-contact .wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 3.5vw, 48px); }
[data-k-contact="4"] body:has(.dk-contact) .dk-contact-kop { background: var(--inkt); box-shadow: 0 0 0 100vmax var(--inkt); clip-path: inset(0 -100vmax); padding-block: 28px; }
[data-k-contact="4"] body:has(.dk-contact) .dk-contact :is(h1, h2) { color: var(--wit); }
[data-k-contact="4"] body:has(.dk-contact) .dk-direct address { line-height: 1.45; }
@media (min-width: 861px) {
  [data-k-contact="4"] body:has(.dk-contact) .dk-contact-kop { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
  [data-k-contact="4"] body:has(.dk-contact) .dk-direct { margin: 0; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 32px; }
  [data-k-contact="4"] body:has(.dk-contact) .dk-direct li + li { margin-top: 0; }
}

/* 5: geen zwart op de hele pagina: formulier op een steenvlak, de voet ook in steen */
@media (min-width: 861px) {
  [data-k-contact="5"] body:has(.dk-contact) .dk-contact .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); }
}
html[data-k-contact="5"] body:has(.dk-contact) .formulier { background: var(--beige); border-radius: 12px; padding: 16px 36px 32px; }
@media (max-width: 860px) { html[data-k-contact="5"] body:has(.dk-contact) .formulier { padding: 10px 22px 24px; } }
html[data-k-contact="5"] body:has(.dk-contact) .formulier.zweef .zv-veld { border-bottom-color: #a9aaa2; }
html[data-k-contact="5"] body:has(.dk-contact) .formulier.zweef :is(.zv-groot, .zv-klein, .zv-uitleg) { color: #55554f; }
[data-k-contact="5"] body:has(.dk-contact) .voet { background: var(--beige); color: var(--inkt); }
[data-k-contact="5"] body:has(.dk-contact) .voet a, [data-k-contact="5"] body:has(.dk-contact) .voet .wx-ts-link { color: var(--inkt); }
[data-k-contact="5"] body:has(.dk-contact) .voet :focus-visible { outline-color: var(--inkt); }
[data-k-contact="5"] body:has(.dk-contact) .voet-merk .woord svg path { fill: var(--inkt); }
[data-k-contact="5"] body:has(.dk-contact) .voet-merk .pand { content: url("img/pand-neutraal.svg"); }
[data-k-contact="5"] body:has(.dk-contact) :is(.voet-juridisch, .voet-onder) { border-top-color: rgba(30, 30, 30, .18); }
[data-k-contact="5"] body:has(.dk-contact) .voet-onder { color: #55554f; }
[data-k-contact="4"] body:has(.dk-contact) .dk-direct address { color: var(--op-inkt-2); }
[data-k-contact="4"] body:has(.dk-contact) .dk-direct .dk-lbl { color: var(--steen-licht); }
[data-k-contact="4"] body:has(.dk-contact) .dk-contact-kop :focus-visible { outline-color: var(--wit); }

/* korte pagina: de voet sluit aan op de onderkant van het scherm, geen witte strook eronder */
html:not([data-k-contact="100"]) body:has(.dk-contact) { min-height: 100vh; display: flex; flex-direction: column; }
html:not([data-k-contact="100"]) body:has(.dk-contact) main { flex: 1 0 auto; }
/* alleen de korte contactpagina zelf helemaal in steen; elders (klanten, team, doorklik) alleen het contactblok */
html[data-k-contact="3"] body.ep-contact main { background: var(--beige); }
html[data-k-contact="3"] body:has(.dk-contact) .dk-direct .dk-lbl { color: #55554f; }
@media (min-width: 861px) { html[data-k-contact="1"] body:has(.dk-contact) .formulier { align-self: start; align-content: start; } }

/* doorklikpagina's hebben geen gegevensblok naast het formulier: het formulier neemt de ruimte */
@media (min-width: 861px) {
  html[data-k-contact="2"] body:not(.ep-contact) .dk-contact .formulier { grid-column: 1 / -1; }
  html[data-k-contact="4"] body:not(.ep-contact) .dk-contact .dk-contact-kop { display: block; }
}

/* doorklik: de korte tekst onder de kop was wit op wit */
html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-contact .dk-contact-kop > p, html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-contact .sectiekop ~ p, html:not([data-k-contact="100"]) body:has(.dk-contact) .dk-contact .sectiekop p { color: var(--inkt); font-size: 17px; margin-top: 14px; }
html[data-k-contact="4"] body:has(.dk-contact) .dk-contact .dk-contact-kop > p, html[data-k-contact="4"] body:has(.dk-contact) .dk-contact .sectiekop ~ p, html[data-k-contact="4"] body:has(.dk-contact) .dk-contact .sectiekop p { color: var(--wit); }
@media (min-width: 861px) {
  html[data-k-contact="2"] body:not(.ep-contact) .dk-contact .dk-slot { grid-column: 1 / -1; grid-row: 2; margin: -14px 0 0; }
  html[data-k-contact="2"] body:not(.ep-contact) .dk-contact .formulier { grid-row: 3; }
}