/* Rankkraft - contactpagina, alleen de aanvullingen op basis.css.
   Leidraad: diepte mag nooit over tekst heen. .gloed tekent op 55% dekking en
   daar zakt #E8EDF2 naar 3,8:1, dus is .gloed hier steeds een omhulsel van 1px
   met het leesvlak erbovenop. .kantel mag wel: die waas is 14% en daar houdt
   dezelfde tekst 11,5:1 over. */

:root{
  /* --lijn-op (.22) is 1,8:1 op --grond, te zwak voor de omtrek van een
     bedieningselement. Deze .42 haalt 3,6:1 op --grond en 3,7:1 op --vlak.
     --ct-schim is tekst in een leeg veld: 6,3:1. */
  --ct-rand:rgba(232,237,242,.42);
  --ct-schim:#8A93A0;
  --ct-rond-in:13px;                 /* --rond min de 1px rand eromheen */
}

/* 1. Aanhef */

.ct-hero{position:relative;overflow:hidden;padding-block:clamp(3.25rem,8vh,6rem) clamp(2.5rem,6vh,4rem)}

/* Lichtvlekken plus raster, puur CSS: de diepte die anders van een foto had
   moeten komen, zonder een enkel extra verzoek. */
.ct-hero::before{
  content:"";position:absolute;pointer-events:none;
  left:-15%;right:-15%;top:-40%;height:min(78vh,660px);
  background:radial-gradient(48% 52% at 26% 46%,rgba(94,230,196,.17),transparent 70%),
             radial-gradient(42% 48% at 76% 22%,rgba(255,138,76,.11),transparent 72%);
  animation:ct-adem 22s ease-in-out infinite alternate;
}
.ct-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;background-size:58px 58px;
  background-image:linear-gradient(to right,rgba(232,237,242,.055) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(232,237,242,.055) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(118% 88% at 50% 0%,#000 8%,transparent 70%);
  mask-image:radial-gradient(118% 88% at 50% 0%,#000 8%,transparent 70%);
}
@keyframes ct-adem{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2.5%,1.5%,0) scale(1.08)}}

/* Beide pseudo's dekken inline-inhoud anders af. */
.ct-hero-in{position:relative;z-index:1;max-width:56rem}
.ct-hero-in .inleiding{margin-top:1.5rem}   /* h1 is margin:0 in basis.css */
.ct-acties{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2rem}

/* .knop-lijn erft --lijn-op: 1,8:1, waar 3:1 geldt voor een omtrek. Accent
   maakt er 12,7:1 van, 7,5:1 boven de lichtvlek. */
.ct-app-knop{--knop-tekst:var(--accent);border-color:var(--accent)}
.ct-app-knop:hover{--knop-vlak:rgba(94,230,196,.12);border-color:var(--accent)}

.ct-checks{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.625rem 1.75rem;font-size:.9375rem;font-weight:500;color:var(--tekst-zacht)}
.ct-checks li,.ct-lijst li{display:flex;align-items:flex-start;gap:.6875rem}
/* Vinkje uit twee randen: scheelt acht SVG's in de HTML. */
.ct-checks li::before,.ct-lijst li::before{content:"";flex:none;width:.4rem;height:.72rem;
  margin-top:.3rem;transform:rotate(45deg);
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent)}

/* 2. Indeling middenblok */

/* .sectie + .sectie haalt de bovenmarge weg; hier wil ik lucht. */
.ct-blok + .ct-blok{padding-top:clamp(2.5rem,6vh,4.5rem)}

.ct-duo{display:grid;gap:3rem;grid-template-columns:1fr}
/* minmax(0,..) en niet 1.3fr: zonder nulminimum weigert een kolom smaller te
   worden dan zijn inhoud en duwt een lang adres de pagina breder dan het scherm. */
@media(min-width:980px){.ct-duo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}}
.ct-kolom{min-width:0}
.ct-onder{color:var(--tekst-zacht);margin:.875rem 0 1.75rem;max-width:52ch}

/* 3. Formulier */

/* color-scheme:dark houdt keuzelijst en schuifbalk donker. */
.ct-kaart{border-radius:var(--rond);background:var(--lijn);padding:1px}
.ct-form{background:var(--vlak);border-radius:var(--ct-rond-in);color-scheme:dark;
  padding:clamp(1.25rem,4vw,2.25rem)}

.ct-rij{display:grid;grid-template-columns:1fr}
@media(min-width:520px){.ct-rij{grid-template-columns:1fr 1fr;column-gap:1rem}}

.ct-veld{display:flex;flex-direction:column;gap:.4375rem;margin:0 0 1.25rem}
.ct-veld label{font-size:.9375rem;font-weight:600;display:flex;flex-wrap:wrap;
  align-items:center;gap:.5rem}

/* "verplicht" voluit: een sterretje leest voor als "ster", of niet. */
.ct-vlag{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-waas);padding:.125rem .5rem;border-radius:999px}

.ct-veld :is(input,select,textarea){
  width:100%;min-height:3rem;padding:.6875rem .875rem;   /* 48px hoog */
  font:inherit;font-size:1rem;          /* 16px; kleiner laat iOS inzoomen */
  color:var(--tekst);background:var(--grond);
  border:1px solid var(--ct-rand);border-radius:var(--rond-klein);
  transition:border-color var(--snel) ease}
.ct-veld textarea{min-height:9.5rem;resize:vertical;line-height:1.6}
.ct-veld ::placeholder{color:var(--ct-schim);opacity:1}
.ct-veld :is(input,select,textarea):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}

/* De fout staat voluit in woorden en niet alleen in een rode rand: kleur alleen
   is geen informatie. #FF9A8B is 9,6:1 op --grond. :user-invalid en niet
   :invalid: die kleurt elk verplicht veld al rood voor de eerste toets. */
.ct-fout{display:none;gap:.5rem;align-items:flex-start;font-size:.875rem;
  line-height:1.45;color:var(--fout)}
.ct-fout::before{content:"!";flex:none;display:grid;place-items:center;
  width:1.125rem;height:1.125rem;margin-top:.06rem;border:1px solid currentColor;
  border-radius:50%;font-size:.75rem;font-weight:700;line-height:1}
.ct-veld :user-invalid{border-color:var(--fout)}
.ct-veld :user-invalid ~ .ct-fout{display:flex}
/* Terugval apart: een browser gooit een hele selectorlijst weg zodra er een
   deel in staat dat hij niet kent. */
.ct-veld :invalid:not(:focus):not(:placeholder-shown){border-color:var(--fout)}
.ct-veld :invalid:not(:focus):not(:placeholder-shown) ~ .ct-fout{display:flex}

/* De eerlijke mededeling staat waar de beslissing valt: boven de knop. In de
   actiekleur, niet rood en niet groen. Rand op .55 zodat het vlak zelf 3,2:1
   haalt; tekst erin 7,1 en 7,7:1. */
.ct-nota{margin:.5rem 0 1.5rem;padding:1rem 1.125rem;border-radius:var(--rond-klein);
  background:rgba(255,138,76,.07);border:1px solid rgba(255,138,76,.55);
  border-left:3px solid var(--actie)}
.ct-nota h3{font-size:.9375rem;color:var(--actie);margin-bottom:.4375rem;letter-spacing:0}
.ct-nota p{font-size:.875rem;line-height:1.55;color:var(--tekst-zacht);margin:0}
.ct-verzend{width:100%}
.ct-slot{margin:.875rem 0 0;font-size:.8125rem;color:var(--tekst-zacht);text-align:center}

/* 4. Directe gegevens */

/* Dezelfde truc: de lijst is het gloed-element, de regels liggen er als kaarten
   bovenop met 1px ertussen. Het licht komt door de naden. */
.ct-gegevens{margin:0;padding:1px;border-radius:var(--rond);background:var(--lijn);
  display:grid;gap:1px;overflow:hidden}   /* rondt de hoeken af */
.ct-gegeven{background:var(--vlak);display:grid;align-items:center;
  grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.125rem;
  padding:.9375rem 1.125rem}
.ct-teken{grid-row:1/3;display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:var(--rond-klein);background:var(--accent-waas);color:var(--accent)}
.ct-teken svg{width:1.25rem;height:1.25rem}
.ct-gegevens dt{grid-column:2;font-size:.6875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tekst-zacht)}
.ct-gegevens dd{grid-column:2;margin:0;font-weight:600;display:flex;flex-wrap:wrap;
  align-items:center;gap:.375rem .75rem;
  overflow-wrap:anywhere}            /* lang adres breekt af, kolom rekt niet op */
.ct-gegevens dd a{text-decoration:none}
.ct-gegevens dd a:hover{text-decoration:underline}

/* basis.js maakt deze knop aan uit [data-kopie]: zonder JS geen klembord, en dan
   hoort er geen knop te staan. relative want het verborgen woord ligt absoluut. */
.kopieknop{position:relative;display:inline-flex;align-items:center;gap:.375rem;
  margin-left:auto;min-height:2.75rem;padding:.25rem .8125rem;   /* 44px hoog */
  font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;
  color:var(--tekst-zacht);background:transparent;
  border:1px solid var(--ct-rand);border-radius:999px;
  transition:color var(--snel) ease,border-color var(--snel) ease,background-color var(--snel) ease}
.kopieknop svg{width:.9375rem;height:.9375rem;flex:none}
.kopieknop:hover{color:var(--tekst);border-color:var(--tekst);background:rgba(232,237,242,.07)}
.kopieknop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kopieknop.gelukt{color:var(--goed);border-color:var(--goed)}
/* Voor de schermlezer: "Kopieer" zegt niet wat er gekopieerd wordt. */
.kopieknop-erbij{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* Nooit display:none als de melding leeg is: een gebied dat verschijnt en weer
   verdwijnt wordt door sommige schermlezers niet meer gelezen. Vandaar de vaste
   min-height. #7FE0A8 is 11,4:1 op --vlak, #FF9A8B 8,9:1. */
.ct-melding{margin:.875rem 0 0;min-height:1.5rem;display:flex;align-items:center;
  gap:.5rem;font-size:.875rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.ct-melding[data-status="goed"]{color:var(--goed)}
.ct-melding[data-status="fout"]{color:var(--fout)}

/* 5. Wat je kunt verwachten */

/* position:relative en een eigen border-radius: de twee eisen van .kantel. */
.ct-verwacht{position:relative;margin-top:1.75rem;padding:1.5rem 1.375rem;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond)}
.ct-verwacht h3{font-size:1.0625rem;margin-bottom:1rem}
.ct-lijst{list-style:none;margin:0;padding:0;display:grid;gap:.625rem;
  font-size:.9375rem;color:var(--tekst-zacht)}

.ct-app{margin-top:1.25rem;padding:1.125rem 1.25rem;border-radius:var(--rond-klein);
  border:1px solid var(--lijn);border-left:3px solid var(--accent);
  background:linear-gradient(100deg,rgba(94,230,196,.09),rgba(94,230,196,0) 70%)}
.ct-app p{margin:0;font-size:.9375rem;color:var(--tekst-zacht)}
.ct-app strong{color:var(--tekst)}

/* 6. Veelgestelde vragen */

.ct-vragen{margin-top:2.25rem;display:grid;gap:.75rem}

/* Geen 3D hier: een lijst die kantelt terwijl je hem leest is hinderlijk. De
   diepte zit in de linkerrand die oplicht bij open, en de chevron zegt het
   ook, zodat de toestand niet alleen aan kleur af te lezen is. */
.ct-vraag{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);
  border-left:3px solid transparent;
  transition:border-color var(--snel) ease,background-color var(--snel) ease}
.ct-vraag:hover{border-color:var(--lijn-op)}
.ct-vraag[open]{border-left-color:var(--accent);background:var(--vlak-op)}

.ct-vraag summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:3.25rem;padding:.9375rem 1.25rem;      /* 52px, ruim boven 44px */
  cursor:pointer;list-style:none;color:var(--tekst);
  font-family:var(--kop);font-weight:600;font-size:1.0625rem;letter-spacing:-.012em}
.ct-vraag summary::-webkit-details-marker{display:none}
.ct-vraag summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;
  border-radius:calc(var(--rond) - 2px)}
/* Chevron uit twee randen, draait bij open. */
.ct-vraag summary::after{content:"";flex:none;width:.5rem;height:.5rem;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translate(-.1em,-.1em);
  transition:transform var(--traag) var(--veer)}
.ct-vraag[open] summary::after{transform:rotate(225deg) translate(-.1em,-.1em)}

.ct-antwoord{padding:0 1.25rem 1.25rem}
.ct-antwoord p{color:var(--tekst-zacht);margin:0;max-width:62ch}
.ct-faq-slot{margin-top:1.75rem;font-size:.9375rem;color:var(--tekst-zacht)}

/* 7. Stilstand. Twee keer los opgeschreven: een browser die de media-query
   niet kent zou anders ook de klasse-variant weggooien. */

@media(prefers-reduced-motion:reduce){
  .ct-hero::before{animation:none;transform:none}
  .ct-vraag summary::after{transition:none}
  .ct-verwacht{transform:none !important}
}

html.rustig .ct-hero::before{animation:none;transform:none}
html.rustig .ct-vraag summary::after{transition:none}
html.rustig .ct-verwacht{transform:none !important}