.elementor-kit-5{--e-global-color-primary:#2A3851;--e-global-color-secondary:#6A540C;--e-global-color-text:#2B2B2B;--e-global-color-accent:#7C630E;--e-global-color-clicht:#F0F9FF;--e-global-color-czand:#F7F3EC;--e-global-color-cwit:#FFFFFF;--e-global-color-clijn:#E3E0D8;--e-global-color-cfootl:#C4CBD8;--e-global-color-accentlicht:#C9A227;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.3em;--e-global-typography-secondary-font-family:"Open Sans";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.4em;background-color:#FFFFFF;color:#2B2B2B;font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:400;line-height:1.6em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#7C630E;font-family:"Open Sans", Sans-serif;font-size:16px;font-weight:500;color:#FFFFFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#7C630E;border-radius:3px 3px 3px 3px;padding:13px 26px 13px 26px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#6A540C;}.elementor-kit-5 a:hover{color:#6A540C;}.elementor-kit-5 h1{color:#2A3851;font-family:"Open Sans", Sans-serif;font-size:47px;font-weight:600;line-height:1.3em;}.elementor-kit-5 h2{color:#2A3851;font-family:"Montserrat", Sans-serif;font-size:34px;font-weight:700;line-height:1.3em;}.elementor-kit-5 h3{color:#2A3851;font-family:"Open Sans", Sans-serif;font-size:23px;font-weight:600;line-height:1.3em;}.elementor-kit-5 h4{color:#2A3851;font-family:"Open Sans", Sans-serif;font-size:19px;font-weight:600;line-height:1.3em;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{color:#FFFFFF;}.elementor-kit-5 label{color:#2A3851;}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{color:#2B2B2B;background-color:#FFFFFF;border-radius:3px 3px 3px 3px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1120px;}.e-con{--container-max-width:1120px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-5 h1{font-size:40px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5 h1{font-size:34px;}.elementor-kit-5 h2{font-size:29px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================
   Crematorium Alkmaar — componenten uit het designprototype
   Alleen wat Elementor niet standaard biedt.
   Kleuren staan als global colors; hier als variabele herhaald
   zodat losse HTML-widgets ze ook kunnen gebruiken.
   ========================================================== */
:root {
  --c-primair: #2A3851;
  --c-accent: #7C630E;
  --c-accent-donker: #6A540C;
  --c-tekst: #2B2B2B;
  --c-licht: #F0F9FF;
  --c-zand: #F7F3EC;
  --c-lijn: #E3E0D8;
  --radius: 3px;
  --schaduw: 0 2px 14px rgba(42, 56, 81, 0.08);
}

/* Zichtbare focus voor toetsenbordgebruikers (WCAG 2.4.7) */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--c-primair);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sticky belbalk op mobiel — op elke pagina, onder 1220px */
.belbalk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: var(--c-accent);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  padding: 14px 16px;
}
.belbalk:hover, .belbalk:focus { background: var(--c-accent-donker); color: #fff; }
@media (max-width: 1200px) {
  .belbalk { display: block; }
  body { padding-bottom: 64px; }
}

/* Vinklijst met eigen vinkje */
.checklijst { list-style: none; padding: 0; }
.checklijst li { padding-left: 1.7em; position: relative; }
.checklijst li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: var(--c-accent-donker);
  font-weight: 700;
}
.checklijst.niet li::before { content: "\2013"; color: #8a8a8a; }

/* "In het kort"-blok bovenaan een artikel */
.in-het-kort {
  background: var(--c-licht);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 0 0 34px;
}
.in-het-kort h2 { font-size: 1.05rem; margin-bottom: 0.5em; }
.in-het-kort ul { margin-bottom: 0; }

/* Brochurelijst: PDF-download en online bladerbrochure */
.download-lijst { list-style: none; padding: 0; margin: 0; max-width: 620px; }
.download-lijst li { margin-bottom: 12px; }
.download-lijst a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--c-lijn);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: var(--c-primair);
  font-weight: 600;
}
.download-lijst a:hover { border-color: var(--c-accent); }
.download-lijst .pdf-chip {
  flex-shrink: 0;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 2px;
  padding: 3px 8px;
  margin-top: 3px;
}
.download-lijst .web-chip { background: var(--c-primair); }
.download-lijst .download-meta {
  display: block;
  font-weight: 400;
  font-size: 0.88rem;
  color: #5a5a5a;
  margin-top: 2px;
}

/* Videokaart met afspeelknop; staande variant voor een YouTube Short */
.video-kaart {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--schaduw);
}
.video-kaart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-kaart::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(42,56,81,0.05), rgba(42,56,81,0.35));
}
.video-kaart-staand { max-width: 300px; margin-left: auto; margin-right: auto; }
.video-kaart-staand img { aspect-ratio: 9 / 16; }
.play-knop {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-accent);
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.play-knop::before {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}
.video-kaart:hover .play-knop { background: var(--c-accent-donker); }
.video-titel {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 14px 16px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
}

/* Vraag van de maand */
.maand-label {
  display: inline-block;
  background: var(--c-primair);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 5px 15px;
  margin-bottom: 14px;
}
.kort-antwoord {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-primair);
}

/* Groot telefoonblok op /overlijden-melden/ */
.bel-blok {
  background: var(--c-licht);
  border-radius: 6px;
  padding: 30px;
  text-align: center;
}
.bel-blok .nummer {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--c-accent-donker);
  text-decoration: none;
  margin: 8px 0;
}
.bel-blok .nummer:hover { color: var(--c-primair); }

/* Vergelijkingstabel: scrollt horizontaal op mobiel */
.tabel-scroll { overflow-x: auto; }
.vergelijk { border-collapse: collapse; width: 100%; min-width: 640px; }
.vergelijk th, .vergelijk td {
  border: 1px solid var(--c-lijn);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.vergelijk thead th { background: var(--c-primair); color: #fff; }
.vergelijk tbody th { font-weight: 600; color: var(--c-primair); background: var(--c-licht); }
.vergelijk td.ja::before { content: "\2713 "; color: var(--c-accent-donker); font-weight: 700; }
.vergelijk td.nee { color: #767676; }
.vergelijk td.nee::before { content: "\2013 "; }

/* Alleen voor schermlezers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ==========================================================
   Header — rechterkant: secundaire adviesknop + oker belknop
   ========================================================== */
.header-rechts { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.header-belknop {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-accent);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 9px 22px;
  white-space: nowrap;
}
.header-belknop:hover, .header-belknop:focus { background: var(--c-accent-donker); color: #fff; }
.header-belknop .bel-icoon::before { content: "\260E\FE0E"; font-size: 1.4rem; }
.header-belknop .bel-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.header-belknop .bel-label { font-size: 0.74rem; font-weight: 500; }
.header-belknop .bel-nummer { font-size: 1.18rem; font-weight: 700; }

/* Compacte belknop naast de hamburger; alleen onder het breekpunt */
.header-bel-compact {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--c-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 9px 14px;
  white-space: nowrap;
}
.header-bel-compact::before { content: "\260E\FE0E"; }
.header-bel-compact:hover, .header-bel-compact:focus { background: var(--c-accent-donker); color: #fff; }

/* Breekpunt 1220px: logo + menu + belknop passen samen op ~1205px.
   Komt er een menu-item bij, dan moet deze grens mee omhoog. */
@media (max-width: 1200px) {
  .header-belknop { display: none; }
  .header-bel-compact { display: inline-flex; }
  .header-advies { display: none; }
  .header-rechts { width: auto !important; }
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer { color: #fff; }
.site-footer h2 { color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #D8C68A; }

.footer-menu { list-style: none; padding: 0; margin: 0; }
.footer-menu li { margin-bottom: 0.5em; }

.footer-onder {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.2);
  margin-top: 34px;
  padding-top: 20px;
  font-size: 0.9rem;
  color: #C4CBD8;
}
.footer-onder a { color: #C4CBD8; }

/* De vaste zin over wie wij zijn, kleiner dan de rest */
.site-footer p { font-size: 0.95rem; }

/* Koppen: H2 is Montserrat, de rest Open Sans (zoals in het prototype) */
h1, .elementor-widget-heading h1.elementor-heading-title,
h3, .elementor-widget-heading h3.elementor-heading-title,
h4, .elementor-widget-heading h4.elementor-heading-title {
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 600;
}
h2, .elementor-widget-heading h2.elementor-heading-title {
  font-family: "Montserrat", "Open Sans", Arial, sans-serif;
  font-weight: 700;
}

/* De belknop mag de header niet 3px breder maken dan het venster */
.header-belknop, .header-belknop .bel-tekst { min-width: 0; }
.header-belknop .bel-nummer, .header-belknop .bel-label { white-space: nowrap; }
body { overflow-x: hidden; }

/* De belknop duwde de pagina 3px breder dan het venster */
html { overflow-x: clip; }
.header-belknop { max-width: 100%; }

/* ==========================================================================
   Aanvulling huisstijl — overgenomen uit het designprototype (css/style.css)
   Toegevoegd 29-07-2026. Bij de overzetting naar Elementor waren deze regels
   blijven liggen, waardoor formulieren, knoppen, stappen en chips ongestyled
   op de pagina stonden.
   ========================================================================== */

:root {
  --c-wit: #FFFFFF;
  --font-basis: "Open Sans", Arial, sans-serif;
  --font-accent: "Montserrat", "Open Sans", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-basis);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 13px 26px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn:hover { background: var(--c-accent-donker); border-color: var(--c-accent-donker); color: #fff; }

.btn-groot {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 16px 32px;
}

.btn-omlijnd {
  background: transparent;
  color: var(--c-primair);
  border-color: var(--c-primair);
}

.btn-omlijnd:hover { background: var(--c-primair); color: #fff; }

.sectie-donker .btn-omlijnd { color: #fff; border-color: #fff; }

.sectie-donker .btn-omlijnd:hover { background: #fff; color: var(--c-primair); }

.kaart-binnen { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }

.kaart .btn { margin-top: auto; align-self: flex-start; }

.beeld-placeholder {
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  background: linear-gradient(160deg, #DCE9F5 0%, #F0F9FF 45%, #E9E2CE 100%);
  display: flex;
  align-items: flex-end;
  padding: 12px 16px;
  color: var(--c-primair);
  font-size: 0.85rem;
  font-style: italic;
}

.vergelijk thead th .prijs {
  display: block;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Stappen (overlijden melden)
   -------------------------------------------------------------------------- */
.stappen { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; counter-reset: stap; }

.stappen li {
  background: var(--c-wit);
  border: 1px solid var(--c-lijn);
  border-radius: 6px;
  box-shadow: var(--schaduw);
  padding: 30px 26px;
  counter-increment: stap;
}

.stappen li::before {
  content: counter(stap);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 16px;
}

.persoon {
  display: flex;
  align-items: center;
  gap: 16px;
}

.persoon img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Formulier
   -------------------------------------------------------------------------- */
.formulier { display: grid; gap: 18px; max-width: 520px; }

.formulier label { font-weight: 600; color: var(--c-primair); display: block; margin-bottom: 6px; }

.formulier input, .formulier select, .formulier textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid #A9A9A9;
  border-radius: var(--radius);
  background: #fff;
  color: var(--c-tekst);
}

.formulier .hulptekst { font-size: 0.88rem; color: #5a5a5a; margin-top: 6px; }

.formulier textarea { min-height: 130px; resize: vertical; }

/* Twee korte velden naast elkaar (postcode + woonplaats) */
.formulier-rij { display: grid; gap: 18px; }

.formulier input:focus, .formulier select:focus, .formulier textarea:focus {
  outline: 3px solid var(--c-accent);
  outline-offset: 1px;
  border-color: var(--c-primair);
}

/* Honeypot: onzichtbaar voor bezoekers, wel invulbaar voor spambots */
.formulier .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Validatie: pas kleuren nadat de bezoeker een keer heeft verzonden */
.formulier.gecontroleerd input:invalid,
.formulier.gecontroleerd select:invalid,
.formulier.gecontroleerd textarea:invalid { border-color: #A5321C; }

.formulier .veldfout {
  font-size: 0.88rem;
  color: #A5321C;
  margin-top: 6px;
  font-weight: 600;
}

/* Bedankt-melding na verzenden */
.formulier-bedankt {
  display: none;
  background: var(--c-licht);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 22px 26px;
  max-width: 520px;
}

.formulier-bedankt.zichtbaar { display: block; }

.formulier-bedankt h3 { margin-bottom: 0.4em; }

.formulier-bedankt p:last-child { margin-bottom: 0; }

/* Formulier in een omkaderd blok, voor midden op een pagina */
.formulier-blok {
  background: var(--c-zand);
  border: 1px solid var(--c-lijn);
  border-radius: var(--radius);
  padding: 30px 30px 34px;
}

.formulier-blok > h2, .formulier-blok > h3 { margin-bottom: 0.4em; }

.formulier-blok .formulier { margin-top: 24px; }

.formulier-blok .formulier-bedankt { background: var(--c-wit); }

/* --------------------------------------------------------------------------
   Kennisbank ("Gewoon geregeld")
   -------------------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
}

.chip {
  display: inline-block;
  border: 1.5px solid var(--c-primair);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-primair);
  text-decoration: none;
  background: var(--c-wit);
}

.chip:hover { background: var(--c-licht); color: var(--c-primair); }

.chip.actief { background: var(--c-primair); color: #fff; }

.vraag-kaart .kaart-binnen { padding: 22px 24px 26px; }

.video-badge {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 11px;
}

.video-badge::before { content: "\25B6\FE0E"; margin-right: 6px; font-size: 0.7em; }

.lees-link { font-weight: 600; }

/* Meerkoloms vanaf de breekpunten uit het prototype (mobile first) */
@media (min-width: 768px) {
  .stappen { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .formulier-rij { grid-template-columns: 1fr 1.4fr; }
}

@media (max-width: 767px) {
  .formulier-blok { padding: 24px 20px 28px; }
}

/* Elementor zet zijn globale knopstijl op `.elementor-kit-5 button` (0,1,1).
   Dat is specifieker dan `.btn-groot` (0,1,0), waardoor de grote verzendknop
   in de formulieren terugviel op het basisformaat. Zelfde specificiteit,
   later in het bestand — dus deze wint. */
button.btn-groot,
input[type="submit"].btn-groot {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 16px 32px;
}

/* ==========================================================================
   Herstel naar het designprototype — 29-07-2026
   Bij de overzetting naar Elementor zijn deze regels afgeweken van
   css/style.css. Hieronder staan ze weer gelijk aan het prototype.
   ========================================================================== */

/* 1. De backslashes in de content-waarden waren verloren gegaan, waardoor er
      letterlijk "2713" en "260EFE0E" op de pagina stond in plaats van een
      vinkje en een telefoonicoon. */
.checklijst li::before { content: "\2713"; }
.checklijst.niet li::before { content: "\2013"; }
.vergelijk td.ja::before { content: "\2713 "; }
.vergelijk td.nee::before { content: "\2013 "; }
.header-bel-compact::before { content: "\260E\FE0E"; }
.header-belknop .bel-icoon::before { content: "\260E\FE0E"; }

/* 2. De titel over een videokaart stond zonder verloop op de foto,
      waardoor de witte tekst slecht leesbaar was. */
.video-titel {
  background: linear-gradient(transparent, rgba(42, 56, 81, 0.85));
  padding: 12px 16px;
}

/* 3. Telefoonblok op /overlijden-melden/: terug naar Montserrat, marineblauw
      en het meeschalende formaat uit het prototype. */
.bel-blok { padding: 40px 20px; }

.bel-blok .nummer {
  font-family: var(--font-accent);
  font-size: clamp(1.8rem, 6vw, 3rem);
  color: var(--c-primair);
  margin: 8px 0 4px;
}

.bel-blok .nummer:hover { color: var(--c-accent-donker); }

/* 4. Vergelijkingstabel: alleen een lijn onder elke rij, ruimere cellen. */
.vergelijk th, .vergelijk td {
  border: 0;
  border-bottom: 1px solid var(--c-lijn);
  padding: 14px 18px;
}

.vergelijk thead th {
  font-family: var(--font-basis);
  font-weight: 600;
}

/* 5. Brochurelijst: kaartje met schaduw, chip en tekst verticaal gecentreerd. */
.download-lijst a {
  align-items: center;
  border-radius: 6px;
  box-shadow: var(--schaduw);
  padding: 16px 18px;
}

.download-lijst .pdf-chip {
  border-radius: var(--radius);
  letter-spacing: 0.06em;
  padding: 6px 9px;
  margin-top: 0;
}

.download-lijst .download-meta { font-size: 0.85rem; }

/* ==========================================================================
   Linkkleuren herstellen — 29-07-2026
   Elementor zet de globale linkkleur via `.elementor-kit-5 a` (specificiteit
   0,1,1). Dat wint van een enkele class als `.header-belknop` (0,1,0),
   waardoor deze knoppen okergoude tekst op een okergoude achtergrond kregen.
   Hieronder dezelfde regels met een element+class-.elementor-kit-5, zodat ze weer
   winnen. De hover-varianten moeten mee, want `.elementor-kit-5 a:hover`
   is 0,2,1.
   ========================================================================== */
a.header-belknop,
a.header-belknop:hover,
a.header-bel-compact,
a.header-bel-compact:hover,
a.belbalk,
a.belbalk:hover,
a.btn,
a.btn:hover,
a.chip.actief { color: #fff; }

a.chip,
a.chip:hover { color: var(--c-primair); }

a.btn-omlijnd { color: var(--c-primair); }
a.btn-omlijnd:hover { color: #fff; }

/* === HERSTEL-DESIGNPROTOTYPE-29JUL2026 === */
/* ==========================================================================
   Herstel 29 juli 2026 — afwijkingen t.o.v. het goedgekeurde designprototype.
   De klassen rij-2, rij-3, kaart, hero-donker en knop-omlijnd staan op de
   Elementor-elementen, zodat de vormgeving hier centraal staat en niet per
   widget wordt gedupliceerd.
   ========================================================================== */

/* 6. Kolomrijen braken af. De kolombreedtes telden op tot exact 100% terwijl
      er ook nog een tussenruimte bij kwam, waardoor de laatste kolom naar de
      volgende regel klapte — op de homepage de derde pakketkaart. De breedte
      verrekent nu de gap. Onder 800px stapelt alles, net als in het prototype. */
.e-con.rij-3 > .e-con { width: calc((100% - 56px) / 3); }
.e-con.rij-2 > .e-con { width: calc((100% - 40px) / 2); }

/* Kaarten even hoog; tekst/beeld-rijen blijven verticaal gecentreerd. */
.e-con.rij-3 { align-items: stretch; }
.e-con.rij-2 { align-items: center; }

@media (max-width: 1024px) {
  .e-con.rij-3 > .e-con,
  .e-con.rij-2 > .e-con { width: 100%; }
}

/* De drie pakketkaarten stapelen eerder dan de rest. Tussen 1025 en 1199px is
   de kaart smaller dan 336px en loopt de kop "Opbaren in familiekamer + aula +
   koffiekamer" over drie regels, terwijl de andere twee er twee nodig hebben;
   geen enkele vaste min-height klopt dan voor alle drie. Gemeten: 3 regels bij
   1101px (kaart 323px), 2 regels vanaf 1140px (336px). */
@media (max-width: 1199px) {
  .e-con.pakketkaarten > .e-con { width: 100%; }
}

/* 7. De kaarten waren losse tekstblokken geworden. De opmaak stond al in deze
      stylesheet (.kaart), maar de containers droegen de klasse niet. */
.e-con.kaart {
  background: #fff;
  border: 1px solid var(--c-lijn);
  border-radius: 6px;
  box-shadow: var(--schaduw);
  overflow: hidden;
  padding: 26px 26px 30px;
}

/* Beeld bovenin loopt door tot de kaartrand, zoals in het prototype. */
.e-con.kaart > .kaart-beeld { margin: -26px -26px 20px; }
.e-con.kaart > .kaart-beeld img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Knop onderaan vastzetten, zodat alle knoppen op dezelfde hoogte staan. */
.e-con.kaart > .kaart-knop {
  margin-top: auto;
  align-self: flex-start;
}

/* Aanduiding bovenin de kaart is een chip, geen losse regel tekst. */
.e-con.kaart > .elementor-widget-text-editor.kaart-label {
  align-self: flex-start;
  margin-bottom: 12px;
}
.e-con.kaart > .kaart-label p {
  display: inline-block;
  margin: 0;
  background: var(--c-licht);
  color: var(--c-primair);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 12px;
}

/* De "Meest gekozen"-kaart is in het prototype uitgelicht met een accentrand. */
.e-con.kaart.kaart-uitgelicht { border-top: 5px solid var(--c-accent); }

/* 8. In de hero erfden de kop, de introtekst en het fotobijschrift de donker-
      blauwe tekstkleur en vielen daardoor weg tegen de donkere overlay. */
.e-con.hero-donker .elementor-heading-title,
.e-con.hero-donker .elementor-widget-text-editor,
.e-con.hero-donker .elementor-widget-text-editor a { color: #fff; }

/* 9. De omlijnde knopvariant rendeerde als gevulde accentknop. Elementor laat
      een achtergrond rgba(0,0,0,0) weg uit de gegenereerde CSS, waarna de
      widgetregel .elementor-widget-button .elementor-button met de accentkleur
      overblijft. Die staat in pagina-CSS die na deze stylesheet laadt, dus de
      klasse zit hier aan de widget zelf vast: drie klassen, en daarmee
      voorrang, zonder !important. */
.elementor-widget-button.knop-omlijnd .elementor-button { background-color: transparent; }

/* ==========================================================================
   Ronde 2 — 29 juli 2026
   ========================================================================== */

/* 10. De footer erfde de globale tekstkleur #2B2B2B en linkkleur #6A540C op
       een donkerblauwe achtergrond: contrast rond 1,2 : 1 respectievelijk
       1,6 : 1, dus praktisch onzichtbaar. Waarden uit het prototype
       (.site-footer). De onderste balk zit in html-widgets en houdt zijn
       eigen kleur, daarom raakt dit alleen de tekstwidgets. */
.e-con.site-footer .elementor-widget-text-editor { color: #E8ECF3; }
.e-con.site-footer .elementor-widget-text-editor a { color: #FFFFFF; }
.e-con.site-footer .elementor-widget-text-editor a:hover,
.e-con.site-footer .elementor-widget-text-editor a:focus { color: #D8C68A; }

/* 11. Het footerlogo is donker en stond rechtstreeks op de donkerblauwe
       achtergrond. In het prototype zit het in een wit kader (.footer-logo). */
.e-con.site-footer .footer-logo img {
  background: #fff;
  padding: 10px 14px;
  border-radius: 4px;
  height: 44px;
  width: auto;
  margin-bottom: 18px;
}

/* === STROOK-PIETER-29JUL2026 === */
/* Homepagestrook "Uitvaartverzorging Pieter Dekker".
   De rij stond op align-items:center, waardoor de rechterkolom 228px lager
   begon dan de linker. De vormgeving staat hier en niet in de widgets. */

.e-con.strook-pieter { align-items: flex-start; padding: 0; }
.e-con.strook-pieter > .e-con { flex: 1 1 0; min-width: 0; padding: 0; }

/* De ene kop breekt over twee regels, de andere niet; zonder minimumhoogte
   begint de tekst eronder alsnog op verschillende hoogtes. */
@media (min-width: 1025px) {
  .e-con.strook-pieter .elementor-widget-heading .elementor-heading-title {
    min-height: 2.5em;
  }
}

.e-con.strook-pieter .kamerfoto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 4px; margin-bottom: 26px;
}

.e-con.strook-pieter .auteur {
  flex-direction: row; align-items: center; gap: 14px;
  width: auto; margin-bottom: 22px;
}
.e-con.strook-pieter .auteur > .elementor-widget { width: auto; }
.e-con.strook-pieter .auteur img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
}
.e-con.strook-pieter .auteur p { margin: 0; font-size: 16px; }

/* Elementor schrijft de normale achtergrondkleur van een knop niet weg uit de
   widgetinstelling (alleen hover), waardoor de globale accentkleur blijft
   staan. Vandaar hier. Wit op #2A3851 is 11,78 : 1. */
.e-con.strook-pieter .elementor-widget-button .elementor-button {
  background-color: #2A3851; color: #FFFFFF;
  padding: 15px 28px; border-radius: 4px;
}
.e-con.strook-pieter .elementor-widget-button .elementor-button:hover,
.e-con.strook-pieter .elementor-widget-button .elementor-button:focus {
  background-color: #1F2A3C; color: #FFFFFF;
}

@media (max-width: 1024px) {
  /* flex-basis 0 wint van de width:100% waarmee .rij-2 normaal stapelt */
  .e-con.strook-pieter > .e-con { flex: 1 1 100%; }
  .e-con.strook-pieter .elementor-widget-heading .elementor-heading-title {
    min-height: 0; font-size: 28px;
  }
}

/* === DIENSTEN-29JUL2026 === */
/* Strook "Overige diensten" + contactkaart, en de knoppen op de zes kaarten.
   .btn en .sr-only stonden al in deze stylesheet en worden hier hergebruikt. */

.e-con.strook-diensten { align-items: flex-start; padding: 0; }
.e-con.strook-diensten > .e-con { padding: 0; min-width: 0; }
.e-con.strook-diensten > .kolom-links { flex: 3 1 0; min-width: 320px; }
.e-con.strook-diensten > .kolom-rechts { flex: 2 1 0; min-width: 300px; }
/* Elementor zet .elementor .elementor .e-con > .elementor-widget op max-width:100%
   met vier klassen; vandaar deze zwaardere .elementor-kit-5 voor de 68ch-regelbreedte. */
.elementor.elementor .e-con.strook-diensten > .e-con > .elementor-widget-text-editor {
  max-width: 68ch;
}

/* De contactkaart krijgt dezelfde opmaak als de zes dienstenkaarten (.kaart),
   zodat een korte rechterkolom niet naast een lange linkerkolom zweeft. */
.e-con.strook-diensten > .e-con.contactkaart { padding: 26px 26px 30px; }
.elementor.elementor .e-con.contactkaart > .elementor-widget-text-editor { max-width: none; }
.e-con.contactkaart .elementor-widget-text-editor { margin-bottom: 4px; }
.e-con.contactkaart .label-24 p { font-size: 14px; color: #5A5A5A; margin: 6px 0 2px; }
.e-con.contactkaart .telefoon-groot a {
  font-family: var(--font-kop); font-weight: 700; font-size: 22px;
  color: var(--c-primair); text-decoration: none;
}
.e-con.contactkaart .portret { margin-top: 18px; }
.e-con.contactkaart .portret img {
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
}

/* Knop onderaan de kaart. De bestaande regel gold alleen voor de knop-widget;
   deze knoppen zijn html-widgets, omdat Elementor geen download-attribuut en
   geen verborgen schermlezertekst in een knop kan zetten. */
.e-con.kaart > .kaart-slot {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 4px;
}

/* De kaartenrij had 10px eigen padding. Daardoor was de binnenmaat 1100 in
   plaats van 1120 en bleef er 20px over aan de rechterkant, waardoor het
   raster niet aansloot op de rest van de pagina. */
.elementor-12 .e-con.rij-3 { padding: 0; }

/* Lijnvariant voor de zesde kaart; #6A540C op wit is 7,27 : 1. */
/* a.btn draagt elders al color:#fff met element+klasse; vandaar ook hier a. */
a.btn.btn-lijn { background: transparent; border-color: #6A540C; color: #6A540C; }
a.btn.btn-lijn:hover, a.btn.btn-lijn:focus { background: #6A540C; border-color: #6A540C; color: #fff; }

/* Geen eigen breekpunt: de min-widths (320 + 300 + 48 gap) laten de rij vanzelf
   afbreken onder 668px, zoals in de opdracht beschreven. */

/* === FOOTER-29JUL2026 === */
/* De drie footerkolommen stonden op 42/29/29%. Met 2 x 40px gap kwam dat op
   1180px in een rij van 1120, waardoor de contactkolom wrapte. Percentages
   verrekenen de gap niet; flex-basis 0 wel. */
.e-con.footer-rij { padding: 0; }   /* eigen 10px padding maakte de binnenmaat 1100 */
.e-con.footer-rij > .e-con { flex: 1 1 0; min-width: 0; }

/* Het logo zat in een wit kader midden in de blauwe footer. Wit maken met een
   filter scheelt een tweede logobestand. */
.e-con.site-footer .footer-logo img {
  background: none; padding: 0; border-radius: 0;
  filter: brightness(0) invert(1);
  height: auto; margin-bottom: 18px;
}

/* Bodytekst stond op 0.95rem (15,2px) en de menulinks op 18px; beide 16px. */
.e-con.site-footer .elementor-widget-text-editor,
.e-con.site-footer .elementor-widget-text-editor p,
.e-con.site-footer .footer-menu,
.e-con.site-footer .footer-menu a { font-size: 16px; }
.e-con.site-footer .elementor-widget-heading .elementor-heading-title { font-size: 18px; }

/* De disclaimer is een voetnoot, geen mededeling. */
.e-con.site-footer .footer-disclaimer {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.e-con.site-footer .footer-disclaimer p { font-size: 14px; color: #B9C2D2; margin: 0; }

/* Negen menu-items onder elkaar maakten deze kolom veel hoger dan de andere. */
.e-con.site-footer .footer-menu { columns: 2; column-gap: 24px; }

/* Het telefoonnummer is de belangrijkste conversie van de site. */
.e-con.site-footer .footer-label p { font-size: 14px; color: #B9C2D2; margin: 12px 0 2px; }
.e-con.site-footer .footer-tel p { margin: 0 0 10px; }
.e-con.site-footer .footer-tel a {
  font-family: var(--font-accent); font-weight: 700; font-size: 22px;
  color: #FFFFFF; text-decoration: none;
}

@media (max-width: 1024px) {
  .e-con.footer-rij > .footer-kolom-eerste { flex: 1 1 100%; min-width: 100%; }
  .e-con.footer-rij > .footer-kolom { flex: 1 1 calc(50% - 20px); }
  .e-con.site-footer .footer-menu { columns: 1; }
}

@media (max-width: 767px) {
  .e-con.footer-rij { row-gap: 36px; }
  .e-con.footer-rij > .e-con { flex: 1 1 100%; min-width: 100%; }
}

/* var(--font-kop) bestaat niet in deze kit; het is --font-accent (Montserrat).
   Stond zo ook in het blok van de contactkaart op /diensten/. */
.e-con.contactkaart .telefoon-groot a { font-family: var(--font-accent); }

/* === KOSTEN-29JUL2026 === */
/* De bedragen begonnen direct onder hun eigen pakketnaam. "Alleen cremeren"
   past op één regel, de andere twee namen op twee, waardoor het eerste bedrag
   24px hoger stond. Het bedrag hangt nu onderaan de cel, los van de titel. */
.vergelijk thead th { position: relative; padding-bottom: 50px; }
.vergelijk thead th .prijs {
  position: absolute;
  left: 18px; right: 18px; bottom: 14px;
  margin-top: 0;
}

/* De rij stond op align-items:center, waardoor de rechterkolom 63px lager
   begon dan de linker. Alleen deze rij; .rij-2 blijft elders ongemoeid. */
.e-con.kosten-rij { align-items: flex-start; }

/* === RUIMTEFOTO-29JUL2026 === */
/* De twee nieuwe ruimtefoto's op dezelfde maat als de drie die er al staan. */
.e-con.rij-2 .ruimtefoto img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px;
}

/* === MOBIELE-HEADER-29JUL2026 === */
/* Onder 880px wrapte de headerrij naar drie regels van samen 245px: het logo
   hield zijn desktopbreedte van 280px, waardoor er niets naast paste. Nu één
   regel: logo links, hamburger rechts. De belknop en de knop Adviesgesprek
   verdwijnen daar; bellen staat al in de vaste belbalk onderaan en
   Adviesgesprek staat als eerste item in het hamburgermenu. */

@media (max-width: 1024px) {
  .e-con.header-rij {
    flex-wrap: nowrap;
    align-items: center;
    padding: 10px 20px;
  }

  /* de merkkolom en het logo terug naar hun eigen maat */
  .e-con.header-merk { width: auto; flex: 0 0 auto; }
  /* body ervoor: de door Elementor gegenereerde regel met width:280px staat in
     post-27.css, dat ná deze stylesheet laadt. */
  body .elementor .elementor-widget.header-logo-img img {
    height: 40px; width: auto; max-width: none;
  }

  /* de menukolom vult de rest, de hamburger komt rechts te staan */
  .e-con.header-menu-rechts {
    width: auto; flex: 1 1 auto; align-items: flex-end; padding: 0;
  }

  /* knop Adviesgesprek + compacte belknop eruit (beide elders bereikbaar) */
  .e-con.header-belblok { display: none; }
  .header-bel-compact { display: none; }

  /* tikgebied van de hamburger naar de minimale 44x44 */
  .elementor-menu-toggle {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* "Adviesgesprek" staat op desktop al als losse knop in de header. */
@media (min-width: 1025px) {
  /* Elementor zet display:flex op de menu-items met drie klassen; vandaar
     dezelfde zwaarte hier, anders blijft het item op desktop dubbel staan. */
  .elementor-nav-menu--main .elementor-nav-menu > li.alleen-mobiel,
  .elementor-nav-menu--dropdown .elementor-nav-menu > li.alleen-mobiel,
  li.alleen-mobiel { display: none; }
}

/* === PAKKETKAARTEN-29JUL2026 === */
/* De bedragen begonnen op 143,7 / 177,6 / 173,6px vanaf de kaartrand. Twee
   oorzaken: "Alleen cremeren" past op één regel (29,9px) waar de andere twee
   koppen er twee nodig hebben (59,8px), en de accentrand van de uitgelichte
   kaart is 5px tegen 1px bij de buitenste twee. */

/* 26px padding minus de 4px extra rand houdt de inhoud op dezelfde hoogte. */
.e-con.kaart.kaart-uitgelicht { padding-top: 22px; }

/* Alleen deze rij: de zeven kaartkoppen op /diensten/ zijn allemaal
   éénregelig, daar zou een min-height alleen witruimte toevoegen.
   En alleen vanaf 1201px: daaronder is de kaart smaller dan 348px en loopt de
   derde kop over drie of vier regels, waar twee regels reservering niets meer
   oplost. Onder 769px staan de kaarten onder elkaar en speelt het niet. */
@media (min-width: 1200px) {
  .pakketkaarten .kaart h3 { min-height: 2.6em; }   /* 23px x 1,3 x 2 */
}

/* === HOVER-29JUL2026 === */
/* Grondregel: een hover blijft binnen zijn eigen kleurfamilie. Goud wordt
   donkerder goud (#7C630E -> #6A540C), blauw wordt donkerder blauw
   (#2A3851 -> #1F2B3E). De kleuromslag goud -> blauw is weg (kit-instelling
   link_hover_color staat nu op #6A540C). */

/* Tekstlinks houden hun kleur; de onderstreping levert de feedback. Alleen in
   lopende tekst: knoppen, menu-items en chips zijn ook <a> en horen niet te
   onderstrepen. De footer heeft al een eigen hover (#E8ECF3 -> #D8C68A). */
.elementor-widget-text-editor a:hover,
.elementor-widget-theme-post-content a:hover,
.entry-content a:hover { text-decoration: underline; }
.e-con.site-footer .elementor-widget-text-editor a:hover { text-decoration: none; }

/* Gevulde gouden knoppen zonder eigen hoverinstelling (de drie pakketknoppen
   en de losse CTA-knoppen) hadden geen achtergrond-hover: de kitwaarde
   button_background_hover_color wordt door Elementor niet uitgeschreven.
   Knoppen met een eigen instelling (0,3,1) winnen hiervan. */
.elementor-kit-5 .elementor-button:hover,
.elementor-kit-5 .elementor-button:focus { background-color: #6A540C; }

/* Alles klapte hard om: transition stond overal op 0s. */
a, .btn, .btn-lijn, .btn-omlijnd, .chip,
.elementor-button, .elementor-item, .elementor-sub-item,
.header-belknop, .header-bel-compact, .belbalk, .download-lijst a {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* === MOBIELE-WITRUIMTE-29JUL2026 === */
/* De stroken hielden op mobiel hun desktopmaat van 80px boven en onder. Twee
   stroken achter elkaar leverden zo gaten van bijna 200px op een scherm van
   844px. Elementor zet de sectiepadding niet als padding maar als de variabelen
   --padding-top/--padding-bottom; bij een boxed container leest .e-con-inner
   die uit. Een gewone padding-regel op de sectie komt er dus bovenop in plaats
   van in de plaats. Vandaar de variabelen. Selector (0,3,1) tegen Elementors
   eigen Elementors eigen regel per element (0,2,0). De paginaheaders
   staan al op 48px en veranderen dus niet.

   De tweede helft: elke geneste rij zonder eigen padding erft Elementors
   standaard van 10px boven en onder. Twee niveaus diep aan weerskanten van een
   strookgrens is 40px extra, waardoor het gat op 128px uitkwam in plaats van
   96px. Rijen met een eigen padding-instelling hebben een eigen --padding-top
   en merken hier niets van; .kaart c.s. krijgen hun padding rechtstreeks uit
   deze stylesheet en blijven eveneens ongemoeid. */
@media (max-width: 767px) {
  body .elementor .e-con.e-parent { --padding-top: 48px; --padding-bottom: 48px; }
  body .elementor .e-con.e-child {
    --container-default-padding-top: 0px;
    --container-default-padding-bottom: 0px;
  }
  /* Een deel van de rijen heeft wél een eigen padding-instelling (op
     /het-crematorium/ staan de ruimterijen op 48px). Die telt bij de 48px van
     de strook op tot 192px. Alleen het bovenste rijniveau; kaarten zitten een
     laag dieper en houden hun eigen padding. */
  body .elementor .e-con.e-parent > .e-con-inner > .e-con,
  body .elementor .e-con.e-parent > .e-con.e-child {
    --padding-top: 0px; --padding-bottom: 0px;
  }
}


/* === FOOTER-MOBIEL-29JUL2026 === */
/* De kolom "Menu" stond op mobiel en tablet rechts en samengeknepen. Oorzaak:
   de headerregel stuurde op elementor-element-60bcd55, en dat ID hoort in de
   footer bij de menukolom. Alle ID-.elementor-kit-5s staan nu op een eigen class; dit
   blok zet alleen nog wat de footer zelf nodig heeft. */

/* Kolommen zijn kolomrichting; wrap zou de widgets naast elkaar laten
   springen zodra er ooit een hoogte op komt. */
.e-con.site-footer .footer-rij > .e-con { flex-wrap: nowrap; align-items: normal; }

@media (max-width: 767px) {
  /* 1384px hoog op een toestel van 844px. Gemeten winst: 1384 -> 1314. */
  .e-con.site-footer .footer-rij > .e-con { --row-gap: 14px; }
  .e-con.footer-rij { row-gap: 28px; }
}

/* De opsomming brak middenin af, met kans op een losse punt aan het regeleinde.
   Het scheidingsteken zit met een harde spatie aan het woord ervoor. */
.e-con.site-footer .footer-onder a { white-space: nowrap; }/* End custom CSS */