/* ============================================
   Hero (component dienst-hero) — dezelfde Elementor-opbouw op meerdere pagina's: donkere sectie, tekstkolom
   (kicker, h1, intro, vinkjeslijst, knoppen) en een beeldkolom; optioneel kerncijfers en "Snel naar"-knoppen.
   Standaard (dienst): website laten maken / lokale SEO — post-3442 (d4f83f0), post-2658 (29492d2): tekst 50%, beeld 44%.
   Varianten (--<variant>): ads (post-1485 e0a68c7), branche / kapsalon (a02acb7 / a0c32e3), leadgen (post-2153 3be9160),
   rm (post-1784 3ff3ad0), vakman (vakmanpagina's 6fe2773), salonhub (post-4161 4cc462c). Daarna de beeldsoorten: browservensters, Maps-kaartje, review-kaart.
   ============================================ */
.dienst-hero { background-color: var(--color-primary); padding: 80px 0; }
.dienst-hero__inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 72px;
}
.dienst-hero__tekst {
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  width: var(--tekst-breedte, 50%); min-width: 0; flex-shrink: var(--tekst-krimp, 0);
}
.dienst-hero__media { display: flex; flex-direction: column; gap: 14px; width: var(--media-breedte, 44%); min-width: 0; }

/* Kit "primary": Red Hat Display 800, 65/1.08em (mobiel 36) */
.dienst-hero__titel {
  margin: 0;
  font-family: var(--font-heading); font-size: var(--h-primary-size); font-weight: 800;
  line-height: var(--h-primary-lh); color: var(--color-white);
}
.dienst-hero__titel em { color: var(--color-accent); font-style: italic; }

.dienst-hero__sub {
  font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh);
  color: var(--color-white);
}

.dienst-hero .icoonlijst {
  --icoon-maat: 16px; --icoon-box: 20px; --icoon-uitlijning: flex-end; --icoon-verschuiving: -4px; --ruimte: 12px;
  --tekst-font: var(--font-ui); --tekst-maat: 16px; --tekst-gewicht: 400; --tekst-lh: 1.7;
  --tekst-kleur: var(--color-white); --icoon-kleur: var(--color-white);
}

.dienst-hero__knoppen { display: flex; align-items: flex-start; gap: 12px; }
.dienst-hero__knoppen .knop { flex-shrink: 0; }

.dienst-hero__foto { display: block; width: 100%; height: auto; }
.dienst-hero__beeld { display: block; width: 100%; max-width: 100%; height: 500px; object-fit: cover; }
.dienst-hero .video-embed { width: 100%; }
.dienst-hero__videolabel {
  width: 100%;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-light);
}

/* Kerncijfers (c364f0c, 0a2fe5f): raster van 3, gecentreerd */
.dienst-hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 100%; margin: 0; padding: 0; list-style: none;
}
.dienst-stat { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dienst-stat__getal {
  font-family: var(--font-heading); font-size: 44px; font-weight: 900; line-height: 1.12; letter-spacing: -0.9px;
  text-align: center; color: var(--color-white);
}
.dienst-stat__tekst {
  font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh);
  color: var(--color-white);
}
/* Google Ads: lege <div> met &nbsp; onder de eerste tekst = één regel extra */
.dienst-stat__tekst--lege-regel { padding-bottom: 1lh; }

/* "Snel naar:" knoppen naar de beroepspagina's (f42792c) */
.dienst-hero__snel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.dienst-hero__snel-label { font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.dienst-hero__snel-pil {
  padding: 8px 18px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.18);
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  color: #ccc; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.dienst-hero__snel-pil:hover, .dienst-hero__snel-pil:focus-visible { background: rgba(255, 255, 255, 0.3); color: var(--color-white); }

/* ---------- Varianten ---------- */
/* ads: kolommen 53% / 33%, uitgevuld */
.dienst-hero--ads .dienst-hero__inner { justify-content: space-between; }
.dienst-hero--ads { --tekst-breedte: 53%; --media-breedte: 33%; }

/* branche / kapsalon: 62% / 31% (kapsalon 30%), min. 808px hoog, tekstkolom krimpt mee, beeld rechts uitgelijnd */
.dienst-hero--branche,
.dienst-hero--kapsalon { --tekst-breedte: 62%; --tekst-krimp: 1; --media-breedte: 31%; padding: 0; }
.dienst-hero--kapsalon { --media-breedte: 30%; }
.dienst-hero--branche .dienst-hero__inner,
.dienst-hero--kapsalon .dienst-hero__inner { min-height: 808px; padding: 80px 0; }
.dienst-hero--branche .dienst-hero__titel,
.dienst-hero--kapsalon .dienst-hero__titel { letter-spacing: 0; }
.dienst-hero--branche .dienst-hero__knoppen,
.dienst-hero--kapsalon .dienst-hero__knoppen { align-items: normal; }
.dienst-hero--branche .dienst-hero__beeld,
.dienst-hero--kapsalon .dienst-hero__beeld { object-position: center right; }

/* leadgen: 53% / 41%, uitgevuld; accent zo groot als 5vw (40–68px) en wit; knoppen mogen omslaan */
.dienst-hero--leadgen { --tekst-breedte: 53%; --tekst-krimp: 1; --media-breedte: 41%; }
.dienst-hero--leadgen .dienst-hero__inner { justify-content: space-between; }
.dienst-hero--leadgen .dienst-hero__titel em { color: inherit; font-size: clamp(40px, 5vw, 68px); }
.dienst-hero--leadgen .dienst-hero__knoppen { flex-wrap: wrap; }

/* rm: 62% / 32%, min. 714px hoog; knoppen op een eigen laag (zoals Elementor's widget-transform: zelfde tekstweergave) */
.dienst-hero--rm { --tekst-breedte: 62%; --media-breedte: 32%; padding: 0; }
.dienst-hero--rm .dienst-hero__inner { min-height: 714px; padding: 80px 0; }
.dienst-hero--rm .dienst-hero__knoppen .knop { will-change: transform; }

/* vakman: 61% / 32%, uitgevuld, min. 714px hoog; intro 73% breed */
.dienst-hero--vakman { --tekst-breedte: 61%; --media-breedte: 32%; padding: 0; }
.dienst-hero--vakman .dienst-hero__inner { justify-content: space-between; min-height: 714px; padding: 80px 0; }
.dienst-hero--vakman .dienst-hero__titel { width: 100%; letter-spacing: normal; }
.dienst-hero--vakman .dienst-hero__sub { width: 73%; max-width: 73%; }

/* Varianten die de regelhoogtes in em opgeven (zoals hun widgets): vinkjeslijst 1.7em (mobiel 1.2em), cijfers 1.12em */
.dienst-hero--branche .icoonlijst, .dienst-hero--kapsalon .icoonlijst, .dienst-hero--rm .icoonlijst,
.dienst-hero--vakman .icoonlijst, .dienst-hero--salonhub .icoonlijst { --tekst-lh: 1.7em; }
.dienst-hero--branche .dienst-stat__getal, .dienst-hero--salonhub .dienst-stat__getal { line-height: 1.12em; }
.dienst-hero--branche .dienst-stat > * { max-width: 100%; }

/* salonhub: 62% / 32%, min. 90vh hoog, partnerbadge i.p.v. kicker */
.dienst-hero--salonhub { --tekst-breedte: 62%; --media-breedte: 32%; padding: 0; }
.dienst-hero--salonhub .dienst-hero__inner { min-height: 90vh; padding: 80px 0; }
.dienst-hero--salonhub .dienst-hero__knoppen { align-items: normal; }
.dienst-hero--salonhub .dienst-hero__beeld { object-position: center right; }
.dienst-hero__badge-wrap { min-width: 0; }
.dienst-hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 8px;
  border-radius: 100px;
  background: var(--color-white);
}
.dienst-hero__badge img { width: auto; height: 20px; }
.dienst-hero__badge-tekst {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-primary);
}

/* ---------- Twee browservensters (website laten maken) ---------- */
.browser-schermen { position: relative; width: 100%; max-width: 900px; aspect-ratio: 3 / 2.2; margin: 0 auto; }
.browser-scherm {
  position: absolute; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px;
  background: var(--color-white);
  box-shadow: rgba(0, 0, 0, 0.22) 0 24px 64px, rgba(0, 0, 0, 0.12) 0 4px 16px;
}
.browser-scherm--1 { width: 82%; bottom: 0; left: 0; z-index: 1; }
.browser-scherm--2 { width: 78%; top: 0; right: 0; z-index: 2; }
.browser-scherm__balk {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #f0f0f0;
}
.browser-scherm__stippen { display: flex; gap: 5px; flex-shrink: 0; }
.browser-scherm__stippen span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.browser-scherm__stippen span:nth-child(2) { background: #febc2e; }
.browser-scherm__stippen span:nth-child(3) { background: #28c840; }
.browser-scherm__url {
  flex: 1 1 0%; display: flex; align-items: center; height: 20px; padding: 0 8px;
  border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; background: var(--color-white);
  font-family: var(--font-ui); font-size: 11px; font-weight: 500; line-height: 1.5; color: #666;
}
.browser-scherm img { display: block; width: 100%; }

/* ---------- Google Maps-kaartje (lokale SEO) ---------- */
.maps-kaart { width: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 500; line-height: 1.5; }
.maps-kaart__omhulsel { position: relative; width: 100%; max-width: 400px; padding: 20px 24px; }
.maps-badge {
  position: absolute; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--color-white); box-shadow: rgba(0, 0, 0, 0.22) 0 8px 32px;
  font-size: 13px; font-weight: 700; color: var(--color-primary); white-space: nowrap;
}
.maps-badge__icoon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--color-accent); color: var(--color-white); font-size: 15px;
}
.maps-badge--1 { top: 6px; right: 0; }
.maps-badge--2 { bottom: 6px; left: 0; }
.maps-kaart__kaart { width: 100%; overflow: hidden; border-radius: 16px; background: var(--color-white); box-shadow: rgba(0, 0, 0, 0.16) 0 20px 60px; }
.maps-kaart__zoek { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #e8e8e8; background: var(--color-white); }
.maps-kaart__zoekbalk {
  flex: 1 1 0%; display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 24px; background: #f1f3f4;
}
.maps-kaart__zoekbalk .fa { font-size: 13px; color: #5f6368; }
.maps-kaart__zoekbalk span { font-size: 13px; font-weight: 500; color: #202124; }
.maps-kaart__google { font-size: 15px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; }
.maps-kaart__google .g1, .maps-kaart__google .g4 { color: #4285f4; }
.maps-kaart__google .g2, .maps-kaart__google .g6 { color: #ea4335; }
.maps-kaart__google .g3 { color: #fbbc05; }
.maps-kaart__google .g5 { color: #34a853; }
.maps-kaart__kaartbeeld { display: block; height: 170px; overflow: hidden; }
.maps-kaart__kaartbeeld svg { display: block; width: 100%; height: 100%; }
.maps-kaart__label { padding: 8px 14px 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: #9aa0a6; }
.maps-resultaat { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-top: 1px solid #f0f0f0; }
.maps-resultaat--winnaar { background: #fffaf6; }
.maps-resultaat__nr {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: #ebebeb; color: #aaa; font-size: 11px; font-weight: 700;
}
.maps-resultaat--winnaar .maps-resultaat__nr { background: var(--color-accent); color: var(--color-white); }
.maps-resultaat__info { flex: 1 1 0%; } /* geen min-width: 0: op smalle schermen loopt de naam door, zoals in het origineel */
.maps-resultaat__naam { overflow: hidden; font-size: 13px; font-weight: 700; color: #bbb; text-overflow: ellipsis; white-space: nowrap; }
.maps-resultaat--winnaar .maps-resultaat__naam { color: #1a73e8; }
.maps-resultaat__jouw {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 3px;
  background: var(--color-accent); color: var(--color-white);
  font-size: 9px; font-weight: 700; vertical-align: middle;
}
.maps-resultaat__sterren { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.maps-resultaat__sterren .fa { font-size: 9px; color: #ddd; }
.maps-resultaat--winnaar .maps-resultaat__sterren .fa { color: var(--color-accent); }
.maps-resultaat__score { margin-left: 3px; font-size: 11px; color: #ddd; white-space: pre; }
.maps-resultaat--winnaar .maps-resultaat__score { color: #70757a; }
.maps-resultaat__meta { margin-top: 1px; font-size: 11px; color: #ddd; }
.maps-resultaat--winnaar .maps-resultaat__meta { color: #70757a; }
.maps-resultaat__open { font-weight: 600; color: #137333; }

/* ---------- Review-kaart (review management, rc-mock) ---------- */
.rm-mock {
  padding: 24px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.rm-mock__bedrijf { margin-bottom: 4px; font-family: var(--font-ui); font-size: 12px; color: #999; }
.rm-mock__score-rij { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rm-mock__score { font-family: var(--font-heading); font-size: 40px; font-weight: 900; line-height: 1; color: var(--color-primary); }
.rm-mock__sterren .fa { font-size: 18px; color: var(--color-accent); }
.rm-mock__aantal { margin-top: 2px; font-family: var(--font-ui); font-size: 12px; color: #666; }
.rm-mock__reviews { display: flex; flex-direction: column; gap: 10px; }
.rm-mock__review { padding: 12px 14px; border-radius: 10px; background: #f9f9f9; }
.rm-mock__review-kop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.rm-mock__naam { font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--color-primary); }
.rm-mock__review-sterren .fa { font-size: 10px; color: var(--color-accent); }
.rm-mock__tekst { font-family: var(--font-ui); font-size: 12px; line-height: 1.5; color: #555; }
.rm-mock__voet {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
  font-family: var(--font-ui);
  font-size: 11px;
  color: #999;
}
.rm-mock__voet-accent { font-weight: 600; color: var(--color-accent); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .dienst-hero { padding: 50px 30px 75px; }
  .dienst-hero--branche, .dienst-hero--kapsalon, .dienst-hero--rm, .dienst-hero--salonhub { padding: 0; }
  .dienst-hero--branche .dienst-hero__inner,
  .dienst-hero--kapsalon .dienst-hero__inner,
  .dienst-hero--rm .dienst-hero__inner,
  .dienst-hero--salonhub .dienst-hero__inner { padding: 50px 30px 75px; }
  .dienst-hero--vakman { padding: 0 30px; }
  .dienst-hero--vakman .dienst-hero__inner { padding: 50px 0 75px; }
}

@media (max-width: 768px) {
  .dienst-hero__snel-pil { padding: 6px 14px; font-size: 12px; }
  /* review-kaart (widget-grens 768px) */
  .rm-mock { padding: 18px; }
  .rm-mock__score { font-size: 30px; }
  .rm-mock__sterren .fa { font-size: 14px; }
  .rm-mock__reviews { display: none; }
  .dienst-hero__badge { gap: 7px; padding: 4px 12px 4px 6px; }
  .dienst-hero__badge img { height: 15px; }
  .dienst-hero__badge-tekst { font-size: 10px; letter-spacing: 0.5px; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 767px) {
  .dienst-hero { padding: 30px 20px 60px; }
  .dienst-hero__inner { flex-direction: column; justify-content: center; align-items: flex-start; gap: 50px; }
  .dienst-hero--ads .dienst-hero__inner,
  .dienst-hero--leadgen .dienst-hero__inner { gap: 24px; }
  .dienst-hero__tekst { width: 100%; justify-content: flex-start; align-items: flex-start; align-self: flex-start; }
  .dienst-hero__titel { width: 339px; max-width: 100%; }
  .dienst-hero .icoonlijst { width: 100%; --icoon-uitlijning: center; --icoon-verschuiving: 0px; --ruimte: 14px; --tekst-lh: 1.2; }
  .dienst-hero__knoppen { flex-wrap: wrap; width: 100%; }
  .dienst-hero__knoppen .knop { width: 100%; }
  .dienst-hero__media { width: 100%; align-items: center; }
  .dienst-hero__foto { height: 378px; object-fit: cover; object-position: top center; border-radius: 14px; }
  .dienst-hero__stats { grid-template-columns: 1fr; gap: 24px; }
  .dienst-stat { align-items: flex-start; }
  .dienst-stat__getal { font-size: 30px; text-align: start; }

  .dienst-hero--branche, .dienst-hero--kapsalon, .dienst-hero--rm, .dienst-hero--salonhub { padding: 0; }
  .dienst-hero--branche .dienst-hero__inner,
  .dienst-hero--kapsalon .dienst-hero__inner,
  .dienst-hero--rm .dienst-hero__inner,
  .dienst-hero--salonhub .dienst-hero__inner { min-height: 0; padding: 30px 20px 60px; }
  .dienst-hero--branche .dienst-hero__beeld,
  .dienst-hero--kapsalon .dienst-hero__beeld,
  .dienst-hero--salonhub .dienst-hero__beeld { height: 229px; }
  .rm-mock { width: 100%; }
  .dienst-hero--branche .icoonlijst, .dienst-hero--kapsalon .icoonlijst, .dienst-hero--rm .icoonlijst,
  .dienst-hero--vakman .icoonlijst, .dienst-hero--salonhub .icoonlijst { --tekst-lh: 1.2em; }
  .dienst-hero--vakman { padding: 0 20px; }
  .dienst-hero--vakman .dienst-hero__inner { justify-content: center; min-height: 0; padding: 30px 0 60px; }
  .dienst-hero--vakman .dienst-hero__titel { width: 339px; max-width: 100%; }
  .dienst-hero--vakman .dienst-hero__sub { width: 100%; max-width: 100%; }
  .dienst-hero--vakman .dienst-hero__beeld { height: 186px; }
}

@media (max-width: 600px) {
  .maps-badge { padding: 8px 12px; font-size: 12px; }
  .maps-badge__icoon { width: 28px; height: 28px; font-size: 13px; }
  .maps-badge--1 { right: -4px; }
  .maps-badge--2 { left: -4px; }
}