/* =========================================================================
   JLC Consultatie BV — stylesheet
   -------------------------------------------------------------------------
   Eén centrale stylesheet voor de hele site. De kleuren, lettertypes en
   ruimtes staan als CSS-variabelen bovenaan, zodat je de huisstijl op één
   plek kunt aanpassen zonder de rest van de code te raken.
   ========================================================================= */

/* ---- 1. Ontwerp-tokens (JLC huisstijl — Brandbook v1.0) ---------------- */
:root {
  /* Officiële huisstijlkleuren */
  --kleur-antraciet:   #20222E; /* basis: tekst, donkere vlakken, koppen   */
  --kleur-antraciet-d: #181A24; /* dieper antraciet voor hero/footer       */
  --kleur-goud:        #BA9A51; /* primair accent — leidt het oog          */
  --kleur-goud-don:    #8A6A2C; /* donker goud: links/accenttekst op licht */
  --kleur-rood:        #DA1D23; /* ondersteunend / energie (spaarzaam)     */
  --kleur-indigo:      #221E51; /* ondersteunend / diepte (spaarzaam)      */
  --kleur-grijs:       #8C8E96; /* ondertitel / bijschrift                 */

  /* Bestaande variabelenamen behouden, nu met huisstijlwaarden            */
  --kleur-marine:      #20222E; /* = antraciet (donkere basis)             */
  --kleur-marine-diep: #181A24; /* = dieper antraciet                      */
  --kleur-accent:      #BA9A51; /* = goud (vlakken/knoppen)                */
  --kleur-accent-don:  #8A6A2C; /* = donker goud (tekst/links op licht)    */
  --kleur-tekst:       #20222E; /* bodytekst = antraciet                   */
  --kleur-tekst-zacht: #5C5E68; /* secundaire/zachte tekst                 */
  --kleur-lijn:        #E3E4E8; /* randen en scheidingslijnen              */
  --kleur-wit:         #ffffff;
  --kleur-mist:        #EEEFF1; /* lichtgrijs sectie-achtergrond           */
  --kleur-zand:        #C7A85F; /* lichte goudtint, warme accenten         */

  /* Typografie — Poppins (koppen) + Carlito (body, Calibri-compatibel).
     "Noto Sans Thai" als fallback: Latijnse tekens blijven Poppins/Carlito,
     Thaise tekens vallen automatisch terug op Noto Sans Thai (per-teken).
     De Thai-webfont wordt alleen op de /th/-pagina's geladen. */
  --font-kop:  "Poppins", "Noto Sans Thai", "Segoe UI", Tahoma, Geneva, sans-serif;
  --font-body: "Carlito", "Noto Sans Thai", Calibri, "Segoe UI", Tahoma, Arial, sans-serif;

  /* Ruimte en vorm */
  --max-breedte: 1120px;
  --radius:      10px;
  --radius-klein: 6px;
  --schaduw:     0 1px 2px rgba(32, 34, 46, .07),
                 0 8px 24px rgba(32, 34, 46, .07);
  --overgang:    .2s ease;
}

/* ---- 2. Reset / basis -------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--kleur-tekst);
  background: var(--kleur-wit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--kleur-accent-don);
  text-decoration: none;
  transition: color var(--overgang);
}
a:hover { color: var(--kleur-antraciet); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  color: var(--kleur-marine);
  line-height: 1.22;
  font-weight: 600;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); letter-spacing: -.015em; font-weight: 700; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1.1em; }

/* Toegankelijkheid: zichtbare focus voor toetsenbordnavigatie */
:focus-visible {
  outline: 3px solid var(--kleur-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* "Sla over naar inhoud"-link voor schermlezers/toetsenbord */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kleur-marine);
  color: #fff;
  padding: .7rem 1.1rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius-klein) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---- 3. Lay-out-hulpklassen ------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-breedte);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.sectie       { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.sectie--mist { background: var(--kleur-mist); }
.sectie--marine {
  background: var(--kleur-marine-diep);
  color: #d6d7dc;
}
.sectie--marine h2,
.sectie--marine h3 { color: #fff; }

.sectie-kop { max-width: 720px; margin-bottom: 2.5rem; }
.sectie-kop.gecentreerd { margin-inline: auto; text-align: center; }
.overtitel {
  display: inline-block;
  font-family: var(--font-kop); /* Poppins Medium — label/tussenkop */
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kleur-accent-don);
  margin-bottom: .8rem;
}
.sectie--marine .overtitel { color: var(--kleur-goud); }
.lood { font-size: 1.15rem; color: var(--kleur-tekst-zacht); }
.sectie--marine .lood { color: #b9bac2; }

/* ---- 4. Knoppen ------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-kop); /* Poppins — crisp op accenten/knoppen */
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-klein);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap; /* knoptekst nooit afbreken */
  transition: background var(--overgang), color var(--overgang),
              border-color var(--overgang);
}
.knop--primair {
  background: var(--kleur-goud);
  color: var(--kleur-antraciet); /* donkere tekst op goud = voldoende contrast */
}
.knop--primair:hover {
  background: #cdad62; /* iets lichter goud bij hover */
  color: var(--kleur-antraciet);
  text-decoration: none;
}
.knop--secundair {
  background: transparent;
  color: var(--kleur-marine);
  border-color: var(--kleur-lijn);
}
.knop--secundair:hover {
  border-color: var(--kleur-accent);
  color: var(--kleur-accent-don);
  text-decoration: none;
}
.sectie--marine .knop--secundair,
.hero .knop--secundair {
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.sectie--marine .knop--secundair:hover,
.hero .knop--secundair:hover { border-color: #fff; color: #fff; }

/* ---- 5. Header / navigatie -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--kleur-antraciet-d); /* antraciet balk */
  border-bottom: 1px solid rgba(186,154,81,.30); /* fijne gouden scheidingslijn */
}
.nav {
  position: relative; /* ankerpunt voor het mobiele uitklapmenu */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* balkhoogte schaalt mee met het logo */
  min-height: clamp(110px, 13vw, 168px);
}
/* Logo-lockup linksboven: het volledige JLC-logo als afbeelding.
   De tekst in de link blijft in de DOM (voor screenreaders) maar wordt
   visueel verborgen via image-replacement. */
.merk {
  display: block;
  flex: 0 0 auto; /* logo nooit platdrukken */
  /* Logo schaalt mee met het scherm; groot genoeg zodat de tagline leesbaar is */
  width: clamp(220px, 27vw, 340px);
  aspect-ratio: 557 / 224;
  height: auto;
  max-width: 72vw;
  background: url("../img/jlc-logo.svg") left center / contain no-repeat;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}
.merk::before { content: none; }
.merk:hover { text-decoration: none; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  color: #d6d7dc;
  font-weight: 500;
  font-size: .98rem;
  white-space: nowrap; /* "Over ons" e.d. nooit over twee regels */
}
.nav-menu a:hover,
.nav-menu a[aria-current="page"] { color: var(--kleur-goud); text-decoration: none; }
.nav-menu a[aria-current="page"] { font-weight: 600; }

.nav-rechts { display: flex; align-items: center; gap: 1rem; }

/* Taalwissel */
.taal {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-klein);
  overflow: hidden;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
}
.taal a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3em;
  padding: .42rem .55rem;
  color: #c4c5cc;
}
.taal a[aria-current="true"] {
  background: var(--kleur-goud);
  color: var(--kleur-antraciet);
}
.taal a:hover { text-decoration: none; background: rgba(255,255,255,.12); }
.taal a[aria-current="true"]:hover { background: var(--kleur-goud); }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .4rem;
  color: #ffffff;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---- 6. Hero ---------------------------------------------------------- */
.hero {
  background:
    linear-gradient(180deg, var(--kleur-marine) 0%, var(--kleur-marine-diep) 100%);
  color: #e6e7eb;
  position: relative;
  overflow: hidden;
  border-bottom: 5px solid transparent;
  border-image: linear-gradient(90deg,
    var(--kleur-goud) 0 25%, var(--kleur-rood) 25% 50%,
    #ffffff 50% 75%, var(--kleur-indigo) 75% 100%) 1;
}
.hero::after { /* subtiele grafische textuur, geen externe afbeelding nodig */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(186,154,81,.22), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(34,30,81,.28), transparent 40%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 760px; padding-block: clamp(3.5rem, 2rem + 8vw, 7rem); }
.hero h1 { color: #fff; margin-bottom: .6rem; }
.hero .lood { color: #c4c5cc; font-size: 1.2rem; max-width: 60ch; }
.hero-acties { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero-noot {
  margin-top: 1.6rem;
  font-size: .9rem;
  color: #9a9ba3;
}

/* ---- 7. Rasters & kaarten --------------------------------------------- */
.raster { display: grid; gap: 1.5rem; }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }

.kaart {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--schaduw);
  transition: transform var(--overgang), box-shadow var(--overgang);
}
.kaart h3 { margin-bottom: .4rem; }
.kaart p:last-child { margin-bottom: 0; }
.kaart--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(32,34,46,.14);
}
.kaart .icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-klein);
  background: rgba(186,154,81,.12);
  color: var(--kleur-accent-don);
  margin-bottom: 1.1rem;
}
.kaart .icoon svg { width: 26px; height: 26px; }
.kaart .meer {
  display: inline-block;
  margin-top: .8rem;
  font-weight: 600;
  font-size: .95rem;
}

/* Genummerde processtappen */
.stap { position: relative; padding-left: 0; }
.stap .nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--kleur-marine);
  color: #fff;
  font-family: var(--font-kop);
  font-weight: 600;
  margin-bottom: 1rem;
}
.sectie--marine .stap .nummer { background: var(--kleur-goud); color: var(--kleur-antraciet); }

/* ---- 8. Inhoudsblokken (afwisselend tekst/beeld) ---------------------- */
.blok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.blok + .blok { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.blok--omgekeerd .blok-beeld { order: -1; }

/* Placeholder voor beeldmateriaal dat de klant aanlevert */
.beeld-plek {
  background:
    repeating-linear-gradient(45deg,
      #eef2f6, #eef2f6 12px, #e6ecf2 12px, #e6ecf2 24px);
  border: 1px dashed #b9c6d3;
  border-radius: var(--radius);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #7d8b9b;
  font-size: .9rem;
  padding: 1.5rem;
}
.beeld-plek span { max-width: 22ch; }

/* Lijst met vinkjes */
.checks { list-style: none; padding: 0; margin: 1.2rem 0; }
.checks li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 1.1rem; height: 1.1rem;
  background: var(--kleur-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- 9. Dienst-secties met anker -------------------------------------- */
.dienst { scroll-margin-top: 184px; }
.dienst + .dienst { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
                    padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
                    border-top: 1px solid var(--kleur-lijn); }

/* ---- 10. Formulier ---------------------------------------------------- */
.form-noot {
  background: #fff8e8;
  border: 1px solid #ecd9a6;
  border-left: 4px solid var(--kleur-zand);
  border-radius: var(--radius-klein);
  padding: 1rem 1.2rem;
  font-size: .92rem;
  color: #6b5a2e;
  margin-bottom: 1.8rem;
}
.veld { margin-bottom: 1.2rem; }
.veld label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .4rem;
  color: var(--kleur-marine);
}
.veld input,
.veld textarea,
.veld select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--kleur-tekst);
  padding: .75rem .9rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  background: #fff;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.veld input:focus,
.veld textarea:focus,
.veld select:focus {
  border-color: var(--kleur-accent);
  box-shadow: 0 0 0 3px rgba(186,154,81,.22);
  outline: none;
}
.veld textarea { min-height: 150px; resize: vertical; }
.veld .verplicht { color: #b3261e; }

/* ---- 11. Contactgegevens-lijst ---------------------------------------- */
.contact-lijst { list-style: none; padding: 0; margin: 0; }
.contact-lijst li {
  display: flex;
  gap: .8rem;
  margin-bottom: 1.1rem;
  align-items: flex-start;
}
.contact-lijst .icoon {
  color: var(--kleur-accent-don);
  flex: 0 0 auto;
  margin-top: .2rem;
}
.contact-lijst .icoon svg { width: 20px; height: 20px; }
.contact-lijst .label { font-size: .8rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--kleur-tekst-zacht); }

/* ---- 12. Plaatshouder-markering (zichtbaar voor de beheerder) --------- */
.plh {
  background: #fff3cd;
  border-radius: 3px;
  padding: 0 .25em;
  color: #7a5d00;
  font-style: normal;
}

/* ---- 13. CTA-strook --------------------------------------------------- */
.cta-strook { text-align: center; }
.cta-strook .knop { margin-top: .6rem; }

/* ---- 14. Footer ------------------------------------------------------- */
.site-footer {
  background: var(--kleur-marine-diep);
  color: #aeb0b8;
  padding-block: 3.5rem 2rem;
  font-size: .95rem;
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg,
    var(--kleur-goud) 0 25%, var(--kleur-rood) 25% 50%,
    #ffffff 50% 75%, var(--kleur-indigo) 75% 100%) 1;
}
.footer-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}
.site-footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a { color: #aeb0b8; }
.site-footer a:hover { color: #fff; }
.footer-merk { font-family: var(--font-kop); font-size: 1.3rem; color: #fff;
               margin-bottom: .2rem; }
.footer-sub { font-size: .82rem; font-weight: 600; letter-spacing: .03em;
              color: var(--kleur-goud); margin: 0 0 .9rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-onder {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .85rem;
  color: #8a8c94;
}
.footer-onder a { color: #8a8c94; }

/* ---- 15. Responsief --------------------------------------------------- */
/* Navigatie klapt in zodra het grote logo + de menu-items niet comfortabel
   naast elkaar passen (logo, 7 items, taalwissel én knop) */
@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--kleur-antraciet-d);
    border-bottom: 1px solid rgba(186,154,81,.30);
    padding: .5rem 1.25rem 1.2rem;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-menu li { width: 100%; }
  .nav-menu a { display: block; padding: .8rem 0; width: 100%;
                border-bottom: 1px solid rgba(255,255,255,.08); }
}

@media (max-width: 860px) {
  .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .blok { grid-template-columns: 1fr; }
  .blok--omgekeerd .blok-beeld { order: 0; }
  .footer-raster { grid-template-columns: 1fr 1fr; }
}

/* Smalle schermen: balk compact houden — CTA-knop weg uit de balk (Contact staat
   in het menu), logo iets kleiner zodat logo + taalwissel + hamburger netjes passen */
@media (max-width: 640px) {
  .nav { min-height: 84px; }
  .merk { width: clamp(150px, 46vw, 200px); }
  .nav-rechts .knop--primair { display: none; }
}

/* Zeer smalle schermen (o.a. iPhone SE, 320px): alles nét wat compacter zodat
   logo + hamburger + drietalige NL·EN·TH-toggle samen passen */
@media (max-width: 400px) {
  .nav { gap: .5rem; }
  .merk { width: clamp(118px, 38vw, 150px); }
  .taal a { min-width: 2em; padding: .35rem .4rem; }
  .nav-toggle { padding: .2rem; }
}

@media (max-width: 560px) {
  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }
  .footer-raster { grid-template-columns: 1fr; }
  .hero-acties .knop { width: 100%; justify-content: center; }
}

/* ---- 16. Respecteer "minder beweging" --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important;
      transition-duration: .01ms !important; }
}

/* ---- 17. Uitgebreide formulieren (intake) ----------------------------- */
.veldgroep {
  min-inline-size: 0; /* fieldset-quirk: laat hem krimpen op smalle schermen */
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem 1.8rem;
  margin: 0 0 1.5rem;
  background: var(--kleur-wit);
  box-shadow: var(--schaduw);
}
.veldgroep > legend {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--kleur-marine);
  padding: 0 .55rem;
  margin-left: -.55rem;
}
.veldgroep .uitleg {
  margin-top: -.3rem;
  color: var(--kleur-tekst-zacht);
  font-size: .95rem;
}

/* twee kolommen voor korte velden */
.veld-rij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.4rem; }
@media (max-width: 560px) { .veld-rij { grid-template-columns: 1fr; } }

/* tussenkopje binnen een groep */
.subkop {
  font-family: var(--font-kop);
  font-weight: 600;
  color: var(--kleur-marine);
  margin: 1.1rem 0 .4rem;
  font-size: 1rem;
}

/* keuzelijsten (checkboxes / radio's) */
.opties {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .5rem 1rem;
}
.opties.compact { grid-template-columns: 1fr; }
.optie {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .97rem;
  font-weight: 400;
  color: var(--kleur-tekst);
  cursor: pointer;
}
.optie input {
  width: auto;
  flex: 0 0 auto;
  margin: .2rem 0 0;
  accent-color: var(--kleur-accent);
}
.optie input:focus-visible { outline: 3px solid var(--kleur-accent); outline-offset: 2px; }

/* Ja/Nee-rijtje naast een vraag */
.janee {
  display: inline-flex;
  gap: 1.4rem;
  margin-left: .2rem;
}
.janee .optie { font-weight: 500; }

/* vraag met inline Ja/Nee */
.vraag-rij {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--kleur-lijn);
}
.vraag-rij:last-child { border-bottom: 0; }
.vraag-rij .vraag { font-weight: 500; max-width: 60ch; }

/* keuze-items kunnen een info-icoon naast het label dragen */
.opties li { display: flex; align-items: flex-start; gap: .15rem; }
.opties .optie { flex: 0 1 auto; }

/* Info-icoon met tooltip (uitleg van afkortingen) */
.info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: .3rem; margin-top: .18rem;
  border: 1px solid var(--kleur-accent);
  border-radius: 50%;
  color: var(--kleur-accent-don);
  font-size: 11px; font-weight: 700; font-style: normal; line-height: 1;
  font-family: var(--font-body);
  cursor: help; position: relative; flex: 0 0 auto;
}
.info::after { content: "i"; }
.subkop .info { margin-top: 0; vertical-align: middle; }
.info .tip {
  display: none; /* volledig uit de layout als verborgen — voorkomt overflow op mobiel */
  position: absolute;
  bottom: 150%; left: 50%;
  transform: translateX(-50%);
  width: 240px; max-width: 70vw;
  background: var(--kleur-marine);
  color: #fff;
  font-size: .8rem; font-weight: 400; font-style: normal;
  line-height: 1.45; text-align: left;
  padding: .6rem .75rem;
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw);
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease;
  z-index: 60; pointer-events: none;
}
.info .tip::after {
  content: "";
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--kleur-marine);
}
.info:hover .tip,
.info:focus .tip,
.info:focus-visible .tip { display: block; opacity: 1; visibility: visible; }

/* Op smalle schermen: tooltip rechts uitlijnen op het icoon, zodat hij
   binnen het scherm blijft (icoontjes staan vrijwel altijd aan het regeleinde) */
@media (max-width: 640px) {
  .info .tip {
    left: auto;
    right: -6px;
    transform: none;
    max-width: calc(100vw - 3rem);
  }
  .info .tip::after {
    left: auto;
    right: 10px;
    transform: none;
  }
}

/* Tab-wisselaar tussen intakeformulier 1 en 2 */
.intake-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4rem;
  background: var(--kleur-mist);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  padding: .35rem;
  margin-bottom: 1.8rem;
}
.intake-tabs a {
  padding: .55rem 1.1rem;
  border-radius: 4px;
  font-weight: 600; font-size: .95rem;
  color: var(--kleur-tekst-zacht);
}
.intake-tabs a:hover { text-decoration: none; color: var(--kleur-marine); }
.intake-tabs a[aria-current="page"] { background: var(--kleur-marine); color: #fff; }

/* Herhaalbare productblokken */
.product-blok + .product-blok {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--kleur-lijn);
}
.product-blok-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}
.product-titel {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--kleur-marine);
}
.product-verwijder {
  background: none;
  border: 0;
  padding: .2rem .2rem;
  color: var(--kleur-rood);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.product-verwijder:hover { text-decoration: underline; }
.product-verwijder[hidden] { display: none; }
.product-toevoegen { margin-top: 1.3rem;
  white-space: normal; line-height: 1.3; text-align: left; } /* mag afbreken op smalle schermen */
.product-toevoegen span { font-size: 1.15em; line-height: 0; }

/* Statusmelding na verzenden */
.form-status {
  margin-top: 1.3rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius-klein);
  border: 1px solid transparent;
  font-size: .97rem;
}
.form-status[data-status="ok"] {
  background: rgba(186,154,81,.12);
  border-color: rgba(186,154,81,.40);
  color: var(--kleur-accent-don);
}
.form-status[data-status="info"] {
  background: #fff8e8;
  border-color: #ecd9a6;
  color: #6b5a2e;
}
.form-status[data-status="error"] {
  background: #fdecea;
  border-color: #f5c2c0;
  color: #9b2620;
}

/* ---- 18. Website-afbeeldingen ------------------------------------------ */
.blok-beeld img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  display: block;
}
.kaart-foto {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-klein);
  margin-bottom: 1.3rem;
  display: block;
}