/* ============================================
   Locatiepagina's "Keralit gevelbekleding <plaats>"
   Waarden uit de Elementor-CSS van de 16 plaatspagina's (post-3292 … post-3720).
   Alle pagina's delen dezelfde elementen; de verschillen staan onderaan als
   modifier op <body>:
     loc--a  Almelo, Deventer, Enschede, Nijverdal, Rijssen, Zutphen, Apeldoorn (basis)
     loc--b  Borne, Goor, Raalte, Twello, Wierden: kopteksten van werkgebied/projecten en
             de voordeeltitels verwijzen naar niet-bestaande kit-variabelen
             (letter-spacing/line-height), dus regelhoogte 1.5 en geen letterspatiëring
     loc--c  Delden, Holten, Lochem, Markelo: als b, plus tekstbreedte lokaal blok op mobiel
     loc--apeldoorn  eigen hero-foto's, twee vaste voordeelbreedtes, bredere introteksten
   ============================================ */

/* --- Knoppen ------------------------------------------------------------- */
.lbtn {
  align-self: flex-start;
  flex: 0 0 auto;
  border-width: 2px;
}
.lbtn--icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.lbtn--icon .icon { flex-shrink: 0; width: 1em; height: 1em; fill: currentColor; }
.lbtn--yellow { --btn-bg: #FEBD17; --btn-border: var(--color-accent); --btn-color: var(--color-text); }
.lbtn--white { --btn-bg: transparent; --btn-border: var(--color-white); --btn-color: var(--color-white); }
.lbtn--dark { --btn-bg: transparent; --btn-border: var(--color-text); --btn-color: var(--color-primary); }
@media (max-width: 767px) {
  .lbtn { padding: 15px 35px; }
}

/* Label "Specialist in kunststof gevelbekleding" */
.lbadge {
  align-self: flex-start;
  padding: 12px 23px;
  border: 1px solid var(--color-accent);
  border-radius: 40px;
  background-color: #FEBD1730;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.lbadge > span, .price__badge > span { display: block; }
@media (max-width: 767px) {
  .lbadge { padding: 10px 20px; font-size: 11px; }
}

/* Bovenkopje (Elementor-kop met de accentrol). De omhulling is het flex-item,
   zodat een negatieve marge op mobiel de hoogte op 0 zet, net als de widget. */
.lkicker-w { flex: 0 0 auto; width: 45%; max-width: 45%; }
.lkicker {
  font-size: var(--fs-accent);
  font-weight: var(--fw-accent);
  text-transform: uppercase;
  color: var(--color-primary);
}
@media (max-width: 767px) {
  .lkicker-w { width: 305px; max-width: 100%; }
  .lkicker-w--pull .lkicker { margin-bottom: -35px; }
}

/* --- Hero vanaf 881px ---------------------------------------------------- */
.lhero {
  --minh: 506px;
  --justify: center;
  --gap: 50px;
  --pt: 60px; --pb: 60px; --pl: 0px; --pr: 0px;
  background-image: url("/img/bg/UjfTCbsbqG-1500.webp"); background-image: image-set(url("/img/bg/UjfTCbsbqG-1500.avif") type("image/avif"), url("/img/bg/UjfTCbsbqG-1500.webp") type("image/webp"));
  background-position: 311px -4px;
  background-repeat: repeat;
  background-size: cover;
}
.lhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(279deg, #4E4E4EBA 23%, var(--color-primary) 60%);
  opacity: 0.99;
}
.lhero > .box__in { position: relative; }
.lhero__title {
  flex: 0 0 auto;
  width: 68%;
  max-width: 68%;
  margin-bottom: 10px;
  color: var(--color-white);
  text-align: start;
}
.lhero__text {
  width: 54%;
  max-width: 54%;
  margin-top: -25px;
  color: var(--color-white);
  font-weight: 500;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.lhero__ctas, .lhero-m__ctas { --dir: row; }

/* vinkjes naast elkaar; de lijst steekt 10px uit zoals de inline-lijst van Elementor */
.lchecks {
  display: flex;
  flex-wrap: wrap;
  width: calc(58% + 20px);
  max-width: calc(58% + 20px);
  margin: 0 -10px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.lchecks li {
  display: flex;
  align-items: center;
  margin: 0 10px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 400;
}
.lchecks .icon { flex: 0 0 auto; width: 14px; height: 14px; margin-right: 3.5px; fill: var(--color-accent); }
.lchecks span { padding-left: 5px; }

@media (min-width: 768px) {
  .lhero, .lhero-m { --content: 1140px; }
}
@media (max-width: 1366px) {
  .lhero { background-position: 407px 0; }
}
@media (max-width: 1200px) {
  .lhero { background-position: -322px 0; --pt: 40px; --pb: 40px; --pl: 10px; --pr: 10px; }
}
@media (max-width: 1024px) {
  .lhero { background-position: -281px 0; }
}

/* --- Hero tot en met 880px ----------------------------------------------- */
.lhero-m {
  --gap: 50px;
  --pt: 60px; --pb: 60px; --pl: 0px; --pr: 0px;
  background-image: url("/img/bg/h_wdnB0QQT-768.webp"); background-image: image-set(url("/img/bg/h_wdnB0QQT-768.avif") type("image/avif"), url("/img/bg/h_wdnB0QQT-768.webp") type("image/webp"));
  background-position: 568px -470px;
  background-repeat: repeat;
  background-size: 67% auto;
}
.lhero-m::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-text);
  opacity: 0.9;
}
.lhero-m > .box__in { position: relative; }
.lhero-m__title {
  flex: 0 0 auto;
  width: 55%;
  max-width: 55%;
  margin-bottom: 10px;
  color: var(--color-white);
  text-align: start;
}
.lhero-m__text { color: var(--color-white); font-weight: 500; }
@media (max-width: 1200px) {
  .lhero-m { --pt: 40px; --pb: 40px; --pl: 10px; --pr: 10px; }
}
@media (max-width: 1024px) {
  .lhero-m { background-position: 0 0; }
}
@media (max-width: 767px) {
  .lhero-m {
    --gap: 30px;
    background-image: url("/img/bg/UjfTCbsbqG-1500.webp"); background-image: image-set(url("/img/bg/UjfTCbsbqG-1500.avif") type("image/avif"), url("/img/bg/UjfTCbsbqG-1500.webp") type("image/webp"));
    background-position: 605px 1px;
    background-size: 1000px auto;
  }
  .lhero-m::before { opacity: 0.66; }
  .lhero-m__title { width: 326px; max-width: 100%; font-size: 26px; }
  .lhero-m__ctas { --pad: 0px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; }
}

/* --- Voordelen ------------------------------------------------------------ */
.perks { --minh: 300px; --justify: center; --bg: var(--color-mist); }
.perks__row { --dir: row; }
.perk {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 100%;
  text-align: center;
}
.perk__icon { line-height: 0; }
.perk__icon .icon {
  display: inline-block;
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  padding: 15px;
  border-radius: 10%;
  background-color: var(--color-copper);
  fill: var(--color-white);
}
.perk__content { flex-grow: 1; }
.perk__title {
  margin: 8px 0 16px;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--fs-lead);
  font-weight: var(--fw-lead);
  line-height: 1.2;
  letter-spacing: var(--ls-primary);
}
.perk__text {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
}
@media (max-width: 767px) {
  .perks { --pt: 50px; --pb: 50px; --pl: 10px; --pr: 10px; }
  .perks__row { --justify: center; --align: center; --pad: 0px; --pt: 0px; --pr: 0px; --pb: 0px; --pl: 0px; align-self: center; }
}

/* --- Lokale specialist --------------------------------------------------- */
.local {
  --dir: row;
  --gap: 0px;
  --pt: 50px; --pb: 50px; --pl: 0px; --pr: 0px;
  --bg: var(--color-white);
}
.local__media { --justify: center; }
.local__kicker { width: 100%; max-width: 100%; }
.local__title {
  width: 74%;
  max-width: 74%;
  color: var(--color-text);
  font-size: var(--fs-secondary);
  font-weight: var(--fw-secondary);
}
.local__body { width: 83%; max-width: 83%; }
.local__body p, .local__note p { margin-bottom: 0; }
.local__note {
  width: 83%;
  max-width: 83%;
  color: var(--color-grey);
  font-size: 14px;
}
.local__list { margin: 0; padding: 0; list-style: none; }
.local__list li {
  --size: 14px;
  display: flex;
  align-items: center;
  color: var(--color-primary);
  font-family: var(--font-main);
}
.local__list li:not(:last-child) { padding-bottom: 5px; }
.local__list li:not(:first-child) { margin-top: 5px; }
.local__list .icon {
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
  margin-right: calc(var(--size) / 4 + 8px);
  fill: var(--color-copper);
}
.local__list span { padding-left: 5px; }
.local__img { text-align: center; }
.local__img img {
  display: inline-block;
  height: 450px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center center;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .local__text, .local__media { --w: 50%; }
}
@media (max-width: 767px) {
  .local { --dir: row-reverse; --wrap-m: wrap-reverse; --pt: 20px; --pb: 20px; }
  .local__text { --gap: 30px; }
  .local__kicker { width: 305px; }
  .local__kicker .lkicker { margin-bottom: -35px; }
  .local__title { width: 743px; max-width: 100%; }
  .local__list li { --size: 15px; }
  .local__img img { height: 250px; }
}

/* --- Gedeelde opbouw van de inhoudsblokken ------------------------------- */
.lsec {
  --minh: 506px;
  --justify: center;
  --gap: 25px;
  --pt: 60px; --pb: 60px; --pl: 0px; --pr: 0px;
}
.lsec__title {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  color: var(--color-text);
  font-size: var(--fs-secondary);
  font-weight: var(--fw-secondary);
  text-align: start;
}
.lsec__title--38 { font-size: var(--fs-title); font-weight: var(--fw-title); }
.lsec__text {
  --tw: 57%;
  width: var(--tw);
  max-width: var(--tw);
  color: var(--color-text);
  font-weight: 500;
}
@media (min-width: 768px) {
  .lsec { --content: 1140px; }
}
@media (max-width: 1200px) {
  .lsec { --pt: 40px; --pb: 40px; --pl: 10px; --pr: 10px; }
}
@media (max-width: 767px) {
  .lsec__title { width: 326px; }
  .lsec .lsec__text.lsec__text { --tw: 100%; }
}

/* --- Werkgebied ---------------------------------------------------------- */
.area { --bg: var(--color-mist); }
.area__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-content: start;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.area__cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  padding: 20px;
  border: 1px solid #A4A4A445;
  border-radius: 10px;
  background-color: var(--color-white);
}
.area__cell--first { justify-content: center; }
.area__box { display: flex; align-items: center; gap: 20px; max-width: 100%; text-align: start; }
.area__dot { line-height: 0; }
.area__dot .icon { width: 11px; height: 11px; fill: var(--color-copper); }
.area__content { flex-grow: 1; width: 100%; }
.area__name {
  margin: 8px 0 20px;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  line-height: 6px;
  letter-spacing: var(--ls-primary);
}
.area__sub {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 13px;
}
@media (max-width: 767px) {
  .area { --gap: 30px; }
  .area__grid { grid-template-columns: repeat(1, 1fr); }
  .area__cell { justify-content: center; }
}

/* --- Projecten ----------------------------------------------------------- */
.work { --bg: var(--color-white); }
.work__gallery .gallery__item { border-radius: 5px; }
.work__gallery .gallery__item:hover .gallery__overlay,
.work__gallery .gallery__item:focus-visible .gallery__overlay { background-color: #0000004F; }
.work__more { align-self: center; }
@media (max-width: 767px) {
  .work { --minh: 0px; }
}

/* --- Werkwijze ----------------------------------------------------------- */
.steps { --gap: 30px; --bg: var(--color-primary); }
.steps .lkicker { color: var(--color-accent); }
.steps .lsec__title { color: var(--color-white); }
.steps__text { --tw: 56%; margin-top: 15px; color: var(--color-white); }
.steps__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  justify-content: start;
  gap: 20px;
  margin: 0;
  padding: 10px;
  list-style: none;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  border: 1px solid #DADADAB3;
  border-radius: 10px;
  background-color: #F3F3F326;
  text-align: start;
}
.step__icon { flex: 0 0 auto; width: 34px; height: 34px; fill: var(--color-accent); }
.step__content { flex-grow: 1; }
.step__title {
  margin: 8px 0 10px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: var(--ls-primary);
}
.step__text { margin: 0; color: var(--color-white); font-family: var(--font-main); }
@media (max-width: 767px) {
  .steps { --gap: 25px; }
  .steps__text { margin-top: 0; }
  .steps__text p { margin-bottom: 0; }
  .steps__grid { grid-template-columns: repeat(1, 1fr); padding: 0; }
  .step { flex-direction: column; }
}

/* --- Reviews ------------------------------------------------------------- */
.lreviews { --pt: 40px; --pb: 40px; --pl: 0px; --pr: 0px; --bg: var(--color-mist); }
.lreviews__head { padding-block: 2%; }
.lreviews__title {
  color: var(--color-primary);
  font-size: 38px;
  font-weight: 700;
  text-align: center;
}
/* ruimte voor de externe widget, gelijk aan de gemeten hoogte op het origineel */
.lreviews .reviews-widget { min-height: 327.90625px; }
@media (max-width: 767px) {
  .lreviews { --pt: 30px; --pb: 30px; --pl: 10px; --pr: 10px; }
  .lreviews__title { font-size: 30px; }
}

/* --- Kosten -------------------------------------------------------------- */
.prices { --bg: var(--color-white); }
.prices__text { --tw: 54%; }
.prices__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  justify-content: start;
  gap: 20px;
  padding: 10px;
}
.price {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  background-color: var(--color-mist);
  color: var(--color-text);
  font-family: var(--font-main);
  text-align: center;
}
.price p { margin: 0; }
.price--2 { background-color: var(--color-primary); color: var(--color-white); }
.price__label { font-size: var(--fs-accent); font-weight: var(--fw-accent); text-transform: uppercase; }
.price--2 .price__label { color: var(--color-accent); }
.price__amount { font-size: 28px; }
.price__amount small { font-size: 80%; }
.price__badge-w { align-self: center; }
.price__badge {
  display: block;
  margin-top: -50px;
  padding: 8px 20px;
  border: 2px solid var(--color-accent);
  border-radius: 33px;
  background-color: var(--color-accent);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .prices { --gap: 40px; }
  .prices__row { grid-template-columns: repeat(1, 1fr); }
  .price--2 { order: -99999; }
  .price__badge { padding: 8px 25px; }
}

/* --- Veelgestelde vragen ------------------------------------------------- */
.lfaq { --gap: 30px; --bg: var(--color-mist); }
.lfaq__acc { --acc-space: 0px; --acc-icon: 15px; }
.lfaq__acc .accordion__title.accordion__title {
  justify-content: space-between;
  gap: 0 10px;
  padding: 25px;
  border: 0;
  border-bottom: 2px solid #E7E7E7FA;
  border-radius: 0;
  background: none;
  color: #1F2124;
}
.lfaq__acc .accordion__q { font-size: 16px; line-height: 1.5; }
.lfaq__acc .accordion__icon { order: 1; }
.lfaq__acc .accordion__icon .icon { fill: #1F2124; }
.lfaq__acc .accordion__panel {
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: none;
}
.lfaq__acc .accordion__a { padding: 25px 0 15px; color: var(--color-text); }
@media (max-width: 767px) {
  .lfaq { --gap: 25px; }
  .lfaq__acc .accordion__q { font-size: 18px; }
}

/* --- Groep b en c: ontbrekende kit-variabelen in het origineel ----------- */
.loc--b .lsec__title--38, .loc--c .lsec__title--38,
.loc--b .perk__title, .loc--c .perk__title { line-height: 1.5; letter-spacing: normal; }
@media (max-width: 767px) {
  .loc--c .local__body { width: 467px; max-width: 100%; }
}

/* --- Apeldoorn ----------------------------------------------------------- */
.loc--apeldoorn .lhero {
  background-image: url("/img/bg/Rga0VMfnZu-1600.webp"); background-image: image-set(url("/img/bg/Rga0VMfnZu-1600.avif") type("image/avif"), url("/img/bg/Rga0VMfnZu-1600.webp") type("image/webp"));
  background-position: 604px 0;
  background-size: 70% auto;
}
.loc--apeldoorn .perk--w633 { width: 633px; }
.loc--apeldoorn .perk--w660 { width: 660px; }
.loc--apeldoorn .steps__text,
.loc--apeldoorn .prices__text { --tw: 60%; }
@media (max-width: 1366px) {
  .loc--apeldoorn .lhero { background-position: 407px 0; }
}
@media (max-width: 1200px) {
  .loc--apeldoorn .lhero { background-position: -322px 0; }
}
@media (max-width: 1024px) {
  .loc--apeldoorn .lhero { background-position: -281px 0; }
}
@media (max-width: 767px) {
  .loc--apeldoorn .lhero-m { background-image: url("/img/bg/L5gGU3NtLK-1500.webp"); background-image: image-set(url("/img/bg/L5gGU3NtLK-1500.avif") type("image/avif"), url("/img/bg/L5gGU3NtLK-1500.webp") type("image/webp")); background-position: 477px 1px; }
}