/*
Theme Name:   Grevelingenpolder Child
Theme URI:    https://www.grevelingenpolder.nl/
Template:     hello-elementor
Description:  Custom child theme voor Vakantiepark Grevelingenpolder — bouwt voort op Hello Elementor. Bevat alle site-brede styling, mobile menu en globale variabelen.
Author:       Grevelingenpolder
Author URI:   https://www.grevelingenpolder.nl/
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  gp-child
*/

/* =====================================================
   1. GLOBALE VARIABELEN — kleuren, fonts, radius, shadows
   Zet dit ook in Elementor → Site Settings → Global Colors
   voor 1-op-1 koppeling met Elementor widgets.
   ===================================================== */
:root{
  --cream:        #FBF8F0;
  --cream-2:      #F3EDDD;
  --white-soft:   #FCFAF3;
  --ink:          #2B2B2B;
  --ink-soft:     #6D6D6D;
  --line:         #E6E0D1;
  --sand:         #C8B78A;
  --green:        #4CAF50;
  --green-dark:   #009640;
  --blue:         #1A8FAE;
  --blue-dark:    #006D8C;

  --font-title:   'Caveat', 'Brush Script MT', cursive;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --radius:       14px;
  --radius-lg:    22px;
  --shadow-soft:  0 4px 16px rgba(0,0,0,.06);
  --shadow-lift:  0 12px 36px rgba(0,0,0,.10);
}


*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.menu-open{ overflow: hidden; }

img{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }

.container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* =====================================================
   HEADER — witte sticky balk, ALTIJD zichtbaar
   ===================================================== */
.site-header{
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 14px rgba(0,0,0,.04);
  padding: 12px 0;
}

/* Taalkiezer — alleen vlaggen */
.lang{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-right: 22px;
}
.lang-item{
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  opacity: .75;
  transition: opacity .2s ease, transform .15s ease;
}
.lang-item:hover{ opacity: 1; transform: translateY(-1px); }
.lang-item.is-active{ opacity: 1; }
.flag{
  display: inline-block;
  width: 22px; height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
}
.flag-nl{
  background: linear-gradient(to bottom,
    #AE1C28 0 33.3%, #fff 33.3% 66.6%, #21468B 66.6% 100%);
}
.flag-de{
  background: linear-gradient(to bottom,
    #000 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6% 100%);
}

/* Main nav */
.main-nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0;
  position: relative;
  z-index: 2;
}
.main-nav .nav-left{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}
.main-nav .nav-items{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
  letter-spacing: .04em;
  font-weight: 600;
  text-transform: uppercase;
}
.main-nav .nav-right{ justify-content: flex-start; padding-left: 8px; }
.main-nav a:not(.lang-item):not(.logo-wrap){
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.main-nav a:not(.lang-item):not(.logo-wrap)::after{
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--green-dark);
  transition: width .25s ease;
}
.main-nav a:not(.lang-item):not(.logo-wrap):hover{ color: var(--green-dark); }
.main-nav a:not(.lang-item):not(.logo-wrap):hover::after{ width: 100%; }

.logo-wrap{
  justify-self: center;
  display: block;
  padding: 4px;
}
.logo{
  width: auto;
  height: 84px;   /* duidelijk groter dan demo4 */
  transition: height .25s ease;
}

/* Hamburger — alleen mobile */
.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 50%;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  padding: 0;
  z-index: 100;
}
.nav-toggle span{
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* Mobile menu overlay */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s;
  overflow-y: auto;
}
.mobile-menu.is-open{ transform: translateY(0); visibility: visible; }

/* Close button — absoluut rechtsboven, geen streep meer */
.mm-close{
  position: absolute;
  top: 16px;
  right: clamp(20px, 4vw, 32px);
  background: transparent;
  border: 1.5px solid var(--ink);
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease, color .2s ease;
}
.mm-close:hover{ background: var(--ink); color: #fff; }

/* Inner: gecentreerde logo boven, menu-links eronder — bovenaan uitgelijnd */
.mm-inner{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(80px, 14vw, 110px) 20px 40px;
  gap: clamp(18px, 3.5vw, 28px);
}

.mm-logo{ display: block; text-align: center; }
.mm-logo img{ height: clamp(70px, 12vw, 90px); width: auto; }

.mm-nav{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mm-link{
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 500;
  color: var(--ink);
  padding: 5px 16px;
  text-align: center;
  line-height: 1.15;
}
.mm-link:hover{ color: var(--green-dark); }
.mm-cta{
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 28px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}

/* =====================================================
   HERO — video, geen donker overlay
   ===================================================== */
.hero{
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1C2A3A; /* fallback achter de video */
}
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.28) 100%);
}
.hero-inner{
  width: 100%;
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 7vw, 80px);
  color: #fff;
}
.hero h1{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: .95;
  color: #fff;
  margin: 0 auto;
  max-width: 22ch;
  text-shadow: 0 3px 22px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.3);
  letter-spacing: -.005em;
}

/* =====================================================
   PAGE-HERO — kleinere hero voor binnenpagina's
   ===================================================== */
.page-hero{
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.page-hero::before{
  content:""; position: absolute; inset: 0; z-index: -2;
  background-image: url('https://www.grevelingenpolder.nl/wp-content/uploads/2022/11/luchtfoto-brouwershaven.jpg');
  background-size: cover;
  background-position: center 50%;
}
.page-hero::after{
  content:""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28,42,58,.45) 0%, rgba(28,42,58,.65) 100%);
}
.page-hero .container{
  padding-top: clamp(70px, 9vw, 110px);
  padding-bottom: clamp(70px, 9vw, 110px);
}
.page-hero h1{
  font-family: var(--font-title);
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  font-weight: 500;
  max-width: 22ch;
  margin: 14px 0 18px;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.page-hero .lead{
  max-width: 56ch;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  opacity: .95;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* Breadcrumb (binnenpagina's) */
.breadcrumb{
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.breadcrumb li{ display: inline-flex; align-items: center; gap: 10px; }
.breadcrumb a{ color: rgba(255,255,255,.85); }
.breadcrumb a:hover{ color: #fff; }
.breadcrumb .sep{ opacity: .55; }
.breadcrumb [aria-current="page"]{ color: #fff; font-weight: 600; }

/* Intro-band (onder hero) */
.page-intro{
  padding: clamp(60px, 8vw, 90px) 0 clamp(30px, 4vw, 50px);
  background: #fff;
}
.page-intro .container{ max-width: 780px; }
.page-intro p.lede{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.55;
}
.page-intro p{
  font-size: 17px;
  color: var(--ink);
  line-height: 1.7;
  margin: 0;
}

/* =====================================================
   INFO-GRID — cleane tegels (informatie2.php)
   3 kolommen op desktop, witte achtergrond, geen iconen
   ===================================================== */
.info-grid-section{
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 130px);
  background: #fff;
}
.info-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.info-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px 28px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.info-card:hover{
  transform: translateY(-4px);
  border-color: var(--sand);
  box-shadow: var(--shadow-soft);
  color: inherit;
}
.info-card h3{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.info-card h3 .leaf{
  display: inline-flex;
  flex-shrink: 0;
  width: 22px; height: 22px;
}
.info-card p{
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
}
.info-card p:last-of-type{ margin-bottom: 0; }
.info-card ul{
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
  padding-left: 20px;
}
.info-card ul li{ margin: 4px 0; }
.info-card ul li strong{ color: var(--ink); font-weight: 600; }
.info-card .read{
  margin-top: auto;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.info-card .read .arr{ transition: transform .2s ease; }
.info-card:hover .read .arr{ transform: translateX(3px); }

@media (max-width: 980px){
  .info-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   TERUG-LINK — onder content op binnenpagina's
   ===================================================== */
.back-link-wrap{
  padding: 0 0 clamp(60px, 8vw, 100px);
  background: #fff;
  text-align: center;
}
/* Wanneer de terug-link volgt op cream-sectie (chalet-gallery): kleur meebrengen */
.chalet-gallery + .back-link-wrap{ background: var(--cream); }
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: color .2s ease, border-color .2s ease;
}
.back-link:hover{ color: var(--ink); border-color: var(--ink); }

/* =====================================================
   PHONE-SECTIES — editorial (telefoonnummers.php)
   ===================================================== */
.phone-sections{
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px);
  background: #fff;
}
.phone-sections .container{ max-width: 820px; }
.phone-section{
  padding: clamp(34px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--line);
}
.phone-section:first-child{ padding-top: 0; }
.phone-section:last-child{ border-bottom: none; }
.phone-section .eyebrow{
  display: inline-block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-dark);
  font-weight: 700;
  margin-bottom: 12px;
}
.phone-section h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.phone-section h2 .leaf{ display: inline-flex; flex-shrink: 0; width: 24px; height: 24px; }

.phone-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px dashed var(--line);
}
.phone-row:first-of-type{ border-top: none; padding-top: 6px; }
.phone-row .label{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.phone-row .label .sub{
  display: block;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.5;
}
.phone-row .number{
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 19px;
  color: var(--blue-dark);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.phone-row a.number:hover{ color: var(--green-dark); border-color: var(--green-dark); }
.phone-row .number.spoed{
  background: var(--green-dark);
  color: #fff;
  padding: 5px 14px;
  border-radius: 6px;
  font-weight: 700;
}
.phone-row .number.spoed:hover{ background: var(--green); color: #fff; border: none; }

.phone-section .note{
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-style: italic;
  font-family: var(--font-serif);
}

/* =====================================================
   PHONE-GRID — grid-tegels (telefoonnummers2.php)
   ===================================================== */
.phone-grid-section{
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px);
  background: #fff;
}
.phone-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.phone-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.phone-card:hover{
  transform: translateY(-3px);
  border-color: var(--sand);
  box-shadow: var(--shadow-soft);
  color: inherit;
}
.phone-card .label{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.phone-card h3{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 14px;
  flex-grow: 1;
}
.phone-card .number{
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 22px;
  color: var(--blue-dark);
  line-height: 1.1;
}
.phone-card .note-small{
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.phone-card.spoed{
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.phone-card.spoed .label,
.phone-card.spoed h3,
.phone-card.spoed .number,
.phone-card.spoed .note-small{ color: #fff; }
.phone-card.spoed .label{ opacity: .85; }
.phone-card.spoed .number{ font-size: 32px; }
.phone-card.spoed .note-small{ opacity: .85; }
a.phone-card.spoed:hover{ background: var(--green); border-color: var(--green); color: #fff; }

@media (max-width: 980px){
  .phone-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   RULES-LIST — genummerde regels binnen .phone-section
   (gedragsregels.php)
   ===================================================== */
.rules-list{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: rule;
}
.rules-list li{
  counter-increment: rule;
  position: relative;
  padding: 12px 0 12px 44px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  border-top: 1px dashed var(--line);
}
.rules-list li:first-child{ border-top: none; padding-top: 6px; }
.rules-list li::before{
  content: counter(rule);
  position: absolute;
  left: 0; top: 14px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--green-dark);
  background: var(--cream);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* In de grid-variant (gedragsregels2): compacter */
.info-card .rules-list-compact{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  counter-reset: rule;
}
.info-card .rules-list-compact li{
  counter-increment: rule;
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.info-card .rules-list-compact li::before{
  content: counter(rule) '.';
  position: absolute;
  left: 0; top: 6px;
  font-weight: 700;
  font-size: 12px;
  color: var(--green-dark);
}

/* =====================================================
   DOWNLOAD-CARD — voor PDF's (recronvoorwaarden)
   ===================================================== */
.download-card{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  margin: clamp(20px, 3vw, 30px) auto;
  max-width: 780px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.download-card:hover{
  border-color: var(--sand);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  color: inherit;
}
.download-card .pdf-ic{
  width: 56px; height: 56px;
  border-radius: var(--radius);
  background: var(--green-dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
}
.download-card .body .meta{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}
.download-card .body h3{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 4px 0 0;
}
.download-card .body p{
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.download-card .arr{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-dark);
}

@media (max-width: 720px){
  .download-card{ grid-template-columns: 1fr; text-align: left; }
  .download-card .arr{ justify-self: start; }
}

/* =====================================================
   CONTRACTOR-ROWS — bedrijven netjes onder elkaar (onderhoud.php)
   ===================================================== */
.contractor-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
}
.contractor-row:first-of-type{ border-top: none; padding-top: 2px; }
.contractor-row > *{ margin: 0; }
.contractor-row p{ margin: 0; }
.contractor-row .name{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.contractor-row .addr{
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.contractor-row .contact-col{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  line-height: 1.3;
}
.contractor-row .contact-col a{
  color: var(--blue-dark);
  font-weight: 600;
  font-size: 13.5px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.contractor-row .contact-col a:hover{ border-color: var(--blue-dark); color: var(--green-dark); }
.contractor-row .contact-col a.email{
  font-weight: 400;
  color: var(--ink-soft);
  font-size: 12px;
  font-variant-numeric: normal;
}

@media (max-width: 720px){
  .contractor-row{ grid-template-columns: 1fr; }
  .contractor-row .contact-col{ align-items: flex-start; text-align: left; }
}

/* =====================================================
   LONG ARTICLE — gestructureerde tekst (info-nieuwe-gasten)
   ===================================================== */
.long-article{
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px);
  background: #fff;
}
.long-article .container{ max-width: 760px; }
.long-article-section{
  padding: clamp(34px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--line);
}
.long-article-section:first-child{ padding-top: 0; }
.long-article-section:last-child{ border-bottom: none; }
.long-article-section > h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.long-article-section > h2 .leaf{ display: inline-flex; flex-shrink: 0; width: 24px; height: 24px; }
.long-article-section h3{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 24px 0 8px;
}
.long-article-section p{
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
}
.long-article-section a{
  color: var(--blue-dark);
  border-bottom: 1px solid var(--blue-dark);
  padding-bottom: 1px;
}
.long-article-section a:hover{ color: var(--green-dark); border-color: var(--green-dark); }

/* =====================================================
   4 CONTENT-BLOKKEN — foto links / titel rechts
   ===================================================== */
.content-blocks{
  padding: clamp(60px, 8vw, 100px) 0;
  background: #fff;          /* witter dan demo4 */
  position: relative;
}
.content-blocks .container{ max-width: 1240px; position: relative; z-index: 1; }

.cblock{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);  /* foto iets groter dan tekst */
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
  padding: clamp(50px, 7vw, 90px) 0;
}
.cblock + .cblock{
  border-top: 1px solid rgba(0,0,0,.06);
}
.cblock-media{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white-soft);
  box-shadow: var(--shadow-soft);
}
.cblock-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.cblock:hover .cblock-media img{ transform: scale(1.03); }

/* h2 met leaf-icoon — past op één regel op groot scherm (longest: "Alle informatie op een rijtje") */
.cblock-body h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 20px;
  letter-spacing: -.015em;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.cblock-body h2 .leaf{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(22px, 2.6vw, 30px);
  height: clamp(22px, 2.6vw, 30px);
}
.cblock-body h2 .leaf svg{
  width: 100%; height: 100%;
}

.cblock-body p{
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 50ch;
}
.cblock-body p.small-note{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  opacity: .9;
  margin-top: -10px;
  margin-bottom: 22px;
}

.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-dark);
  background: transparent;
  border: 1.5px solid var(--blue-dark);
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.btn-outline:hover{ background: var(--blue-dark); color: #fff; }
.btn-outline .arr{ transition: transform .2s ease; }
.btn-outline:hover .arr{ transform: translateX(3px); }

/* =====================================================
   FAQ
   ===================================================== */
.faq{
  padding: clamp(70px, 9vw, 110px) 0;
  background: var(--cream);
}
.faq .container{ max-width: 800px; }
.faq-head{
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.faq-head h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
details.faq-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
details.faq-item[open]{ box-shadow: var(--shadow-soft); }
details.faq-item summary{
  cursor: pointer;
  padding: 22px 60px 22px 26px;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--ink);
  list-style: none;
  position: relative;
}
details.faq-item summary::-webkit-details-marker{ display: none; }
details.faq-item summary::after{
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--green-dark);
  font-weight: 300;
  line-height: 1;
}
details.faq-item[open] summary::after{ content: '−'; }
details.faq-item .a{
  padding: 0 26px 22px;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}
details.faq-item .a p{ margin: 0; }

/* =====================================================
   CONTACT
   ===================================================== */
.contact{
  padding: clamp(70px, 9vw, 110px) 0;
  background: #fff;
}
.contact-head{
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.contact-head h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  color: var(--ink);
  margin: 0;
  line-height: 1;
}
.contact-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact-info h3{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.contact-info .address{
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 22px;
}
.contact-info .address strong{ font-weight: 600; }
.contact-info .map-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-dark);
  border-bottom: 1px solid var(--blue-dark);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.contact-info .map-link:hover{ color: var(--green-dark); border-color: var(--green-dark); }
.contact-info .info-extra{
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.contact-info .info-extra a{
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: border-color .2s ease;
}
.contact-info .info-extra a:hover{ border-color: var(--ink); }

.contact-form{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-soft);
}
.contact-form .field{ margin-bottom: 18px; }
.contact-form label{
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea{
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  transition: border-color .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--sand);
}
.contact-form textarea{
  min-height: 130px;
  resize: vertical;
  font-family: inherit;
}
.contact-form .btn-submit{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green-dark);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.contact-form .btn-submit:hover{
  background: var(--green);
  transform: translateY(-1px);
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{
  background: var(--ink);
  color: rgba(255,255,255,.78);
  padding: clamp(50px, 6vw, 70px) 0 30px;
  font-size: 14px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand img{
  height: 56px;
  width: auto;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.footer-brand p{ margin: 0; max-width: 32ch; line-height: 1.6; }
.footer-col h4{
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
}
.footer-col p{ margin: 0; line-height: 1.7; }
.footer-col a{
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.18);
  transition: border-color .2s ease, color .2s ease;
}
.footer-col a:hover{ color: #fff; border-color: rgba(255,255,255,.5); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px;
}
.logout-link{
  color: rgba(255,255,255,.55);
  border-bottom: 1px dotted rgba(255,255,255,.35);
}
.logout-link:hover{ color: #fff; border-color: #fff; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 980px){
  .main-nav{ grid-template-columns: auto 1fr auto; }
  .main-nav .nav-items{ display: none; }
  .main-nav .nav-left{ justify-content: flex-start; padding-right: 0; }
  .main-nav .logo-wrap{ justify-self: center; }
  .logo{ height: 56px; }
  .nav-toggle{ display: inline-flex; }

  .hero{ min-height: 60vh; }
  .hero-inner{ padding: 50px 0; }

  .cblock{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }
  .cblock-body h2{ white-space: normal; }

  .contact-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom{ flex-direction: column; gap: 12px; }
}

/* =====================================================
   OVER GREVELINGENPOLDER (over-grevelingenpolder.php)
   ===================================================== */
.over-intro{
  padding: clamp(60px, 8vw, 100px) 0 clamp(30px, 4vw, 50px);
  background: #fff;
}
.over-intro .container{ max-width: 780px; text-align: center; }
.over-intro .lede{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 22px;
}
.over-intro p{
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.over-intro p:last-child{ margin-bottom: 0; }

.team-section{
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--cream);
}
.team-heading{
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}
.team-heading .eyebrow{
  display: inline-block;
  padding: 6px 14px;
  background: rgba(76,175,80,.12);
  color: var(--green-dark);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.team-heading h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1;
}
.team-heading p{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

.team-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
.person-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: clamp(20px, 3vw, 30px);
  align-items: start;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.person-card:hover{
  border-color: var(--sand);
  box-shadow: var(--shadow-soft);
}
.portrait{
  aspect-ratio: 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center 15%;  /* rondje hoger in de foto, gezicht in beeld */
  background-color: var(--cream);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.person-body .role{
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.person-body h3{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.4vw, 2rem);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1;
}
.person-body blockquote{
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.5;
  border-left: 3px solid var(--green);
  padding-left: 14px;
}
.person-body p{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 720px){
  .team-grid{ grid-template-columns: 1fr; }
  .person-card{
    grid-template-columns: 90px 1fr;
    gap: 18px;
  }
}

/* Twee-generaties CTA */
.generations-block{
  padding: clamp(60px, 8vw, 100px) 0;
  background: #fff;
}
.generations-block .container{ max-width: 780px; text-align: center; }
.generations-block .eyebrow{
  display: inline-block;
  padding: 6px 14px;
  background: rgba(76,175,80,.12);
  color: var(--green-dark);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.generations-block h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1;
}
.generations-block p{
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
}
.generations-block .cta-links{
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 22px;
}
.generations-block .cta-links a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-dark);
  border: 1.5px solid var(--blue-dark);
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.generations-block .cta-links a:hover{
  background: var(--blue-dark);
  color: #fff;
}

/* =====================================================
   OMGEVING & DUURZAAMHEID (omgeving.php) — TOC-layout
   ===================================================== */
.omg-body{
  padding: clamp(50px, 7vw, 90px) 0 clamp(80px, 10vw, 130px);
  background: #fff;
}
.omg-body .container{ max-width: 1180px; }
.omg-grid{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(40px, 5vw, 70px);
  align-items: start;
}

/* TOC — sticky sidebar */
.omg-toc{
  position: sticky;
  top: 130px;
  align-self: start;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.omg-toc .toc-label{
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 700;
  margin-bottom: 18px;
}
.omg-toc ol{
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.omg-toc ol li{ counter-increment: toc; }
.omg-toc ol li a{
  display: block;
  position: relative;
  padding: 6px 0 6px 34px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  border-radius: 4px;
  transition: color .2s ease;
}
.omg-toc ol li a::before{
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0; top: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--sand);
  font-weight: 700;
}
.omg-toc ol li a:hover{ color: var(--ink); }
.omg-toc ol li a:hover::before{ color: var(--green-dark); }
.omg-toc ol li a.is-active{
  color: var(--ink);
  font-weight: 600;
}
.omg-toc ol li a.is-active::before{ color: var(--green-dark); }

/* Content column */
.omg-content > *{ scroll-margin-top: 130px; }
.omg-content .part-heading{ text-align: left; margin: 0 0 30px; max-width: none; }
.omg-content .part-heading:not(:first-child){ margin-top: clamp(60px, 8vw, 90px); }

/* Natuur-cards: full-width binnen content-kolom, stack onder elkaar */
.natuur-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 36px);
  margin-bottom: 18px;
}
.natuur-card h3{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.natuur-card h3 .leaf{ flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; }
.natuur-card p{
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.natuur-card p:last-child{ margin-bottom: 0; }
.natuur-card p strong{ color: var(--ink); font-weight: 600; }
.natuur-card ul{
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 12px;
  padding-left: 20px;
}
.natuur-card ul li{ margin: 6px 0; }
.natuur-card ul li strong{ color: var(--ink); font-weight: 600; }

/* MVO grid ook responsive binnen content-column */
.omg-content .mvo-grid{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px){
  .omg-grid{ grid-template-columns: 1fr; gap: 30px; }
  .omg-toc{
    position: static;
    padding: 22px 24px;
    background: var(--cream);
    border-left: none;
    border-radius: var(--radius);
  }
  .omg-content .mvo-grid{ grid-template-columns: 1fr; }
}


.part-heading{
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}
.part-heading .eyebrow{
  display: inline-block;
  padding: 6px 14px;
  background: rgba(76,175,80,.12);
  color: var(--green-dark);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}
.part-heading h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1;
}
.part-heading .part-lede{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

.green-koers{
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 130px);
  background: var(--cream);
}
.green-koers .container{ max-width: 900px; }

.green-block{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 44px);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.green-block h3{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.05;
}
.green-block p{
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
}
.green-block p:last-child{ margin-bottom: 0; }

/* Green Key badge variant */
.green-block.gk{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
  background: linear-gradient(135deg, #F0F6E8 0%, #FFFFFF 100%);
  border-color: var(--green);
}
.gk-badge{
  background: var(--green-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 26px;
  text-align: center;
  min-width: 130px;
}
.gk-badge .gk-tag{
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .85;
}
.gk-badge strong{
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 42px;
  line-height: 1;
  color: #FCD34D;
  margin: 6px 0 6px;
  letter-spacing: .02em;
}
.gk-badge .gk-since{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}
.gk-body h3{ margin-top: 0; }

.section-title{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  color: var(--ink);
  margin: clamp(50px, 6vw, 70px) 0 22px;
  text-align: center;
  line-height: 1;
}

.mvo-grid{ margin-bottom: 22px; }
.mvo-card h3{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.4rem;
}
.mvo-card .num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--green-dark);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.signature{
  text-align: center;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 22px 0 0;
}
.signature em{ font-style: italic; }

.verslagen-intro{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

.verslagen{ display: flex; flex-direction: column; gap: 12px; }
details.verslag{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
details.verslag[open]{ box-shadow: var(--shadow-soft); }
details.verslag summary{
  cursor: pointer;
  padding: 20px 60px 20px 26px;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink);
  list-style: none;
  position: relative;
  line-height: 1.15;
}
details.verslag summary::-webkit-details-marker{ display: none; }
details.verslag summary::after{
  content: '+';
  position: absolute;
  right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--green-dark);
  font-weight: 300;
  line-height: 1;
}
details.verslag[open] summary::after{ content: '−'; }
details.verslag summary .year{
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 400;
  font-style: italic;
  margin-left: 10px;
}
.verslag-body{
  padding: 0 26px 26px;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.65;
}
.verslag-body p{ margin: 0 0 12px; }
.verslag-body strong{ color: var(--ink); font-weight: 600; }
.verslag-body .closing{
  padding-top: 8px;
  margin-top: 4px;
  font-style: italic;
  color: var(--ink-soft);
}
.verslag-body .verslag-sig{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}

@media (max-width: 720px){
  .green-block.gk{ grid-template-columns: 1fr; text-align: center; }
  .gk-badge{ justify-self: center; }
  .mvo-card h3{ font-size: 1.25rem; }
}

/* =====================================================
   CHALET-OVERZICHT (stacaravans-te-koop.php)
   ===================================================== */
.chalet-grid-section{
  padding: clamp(60px, 8vw, 100px) 0;
  background: #fff;
}
.chalet-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.chalet-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.chalet-card:hover{
  transform: translateY(-4px);
  border-color: var(--sand);
  box-shadow: var(--shadow-soft);
  color: inherit;
}
.chalet-card .media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream);
}
.chalet-card .media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.chalet-card:hover .media img{ transform: scale(1.04); }
.chalet-card .tag{
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.chalet-card .tag.verkocht{
  background: var(--ink);
  color: #fff;
}
.chalet-card .body{
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.chalet-card .body .plek{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.chalet-card .body h3{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 14px;
}
.chalet-card .body .price{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.chalet-card .body .price .amount{
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 20px;
  color: var(--blue-dark);
  white-space: nowrap;
  flex-shrink: 0;
}
.chalet-card .body .price .amount .verkocht-text{
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
}
.chalet-card .body .price .meta{
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: right;
  line-height: 1.4;
}

@media (max-width: 980px){
  .chalet-grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   CHALET-DETAIL (stacaravan-plek-XX.php)
   ===================================================== */
.chalet-hero{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  min-height: clamp(360px, 52vh, 520px);
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.chalet-hero::before{
  content:""; position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center;
}
.chalet-hero::after{
  content:""; position: absolute; left: 0; right: 0; bottom: 0; top: 45%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
}
.chalet-hero .container{
  padding-top: clamp(40px, 6vw, 70px);
  padding-bottom: clamp(30px, 4vw, 50px);
  width: 100%;
}
.chalet-hero .breadcrumb{ margin-bottom: 14px; }
.chalet-hero h1{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  color: #fff;
  margin: 0;
  max-width: 30ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* Detail body layout */
.chalet-detail{
  padding: clamp(50px, 7vw, 90px) 0 clamp(60px, 8vw, 100px);
  background: #fff;
}
.chalet-detail .container{ max-width: 1180px; }
.chalet-detail-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(40px, 5vw, 70px);
  align-items: start;
}
.chalet-lede{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 30px;
}
.chalet-body h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ink);
  margin: 40px 0 16px;
  line-height: 1;
}
.chalet-body h2:first-child{ margin-top: 0; }
.chalet-body p{
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
}
.chalet-features{
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 32px;
}
.chalet-features li{
  padding: 8px 0 8px 22px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  break-inside: avoid;
}
.chalet-features li::before{
  content: '';
  position: absolute;
  left: 0; top: 15px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-dark);
}

/* Sidebar */
.chalet-aside{
  position: sticky;
  top: 130px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.chalet-aside .price-block{
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.chalet-aside .price-label{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.chalet-aside .price-amount{
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 30px;
  color: var(--blue-dark);
  line-height: 1;
}
.chalet-aside .price-note{
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.5;
}
.chalet-specs{ display: grid; grid-template-columns: 1fr; gap: 0; }
.chalet-spec{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
  font-size: 14.5px;
  align-items: baseline;
}
.chalet-spec:first-child{ border-top: none; padding-top: 2px; }
.chalet-spec .label-col{ color: var(--ink-soft); }
.chalet-spec .value-col{ color: var(--ink); font-weight: 600; text-align: right; }

.chalet-aside .cta{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.chalet-aside .cta a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}
.chalet-aside .cta .btn-primary{
  background: var(--green-dark);
  color: #fff;
}
.chalet-aside .cta .btn-primary:hover{ background: var(--green); transform: translateY(-1px); }
.chalet-aside .cta .btn-secondary{
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.chalet-aside .cta .btn-secondary:hover{ background: var(--ink); color: #fff; }

/* Gallery */
.chalet-gallery{
  padding: clamp(40px, 5vw, 60px) 0 clamp(60px, 8vw, 100px);
  background: var(--cream);
}
.chalet-gallery h2{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  color: var(--ink);
  margin: 0 0 24px;
  text-align: center;
}
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gallery-grid img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
  transition: opacity .2s ease;
}
.gallery-grid img:hover{ opacity: .9; }

@media (max-width: 980px){
  .chalet-detail-grid{ grid-template-columns: 1fr; }
  .chalet-aside{ position: static; }
  .chalet-features{ columns: 1; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}


/* =====================================================
   ELEMENTOR-SPECIFIEKE OVERRIDES
   Zorg dat onze design tokens ook in Elementor widgets doorwerken.
   ===================================================== */

/* Elementor Container widget in "Boxed" layout krijgt onze max-width */
.e-con-boxed{ max-width: 1180px; }

/* Elementor headings & body: gebruik onze fonts als Elementor Site Settings deze aanwijzen */
.elementor-widget-heading .elementor-heading-title{ line-height: 1.05; letter-spacing: -.01em; }

/* Handschrift-heading modifier voor Elementor headings met class "gp-title" */
.elementor-widget-heading.gp-title .elementor-heading-title{
  font-family: var(--font-title);
  font-weight: 500;
  letter-spacing: -.005em;
}

/* Blaadje-icoon via Elementor Icon widget: geef een groene tint via CSS-class */
.elementor-widget-icon.gp-leaf svg{
  fill: var(--green-dark);
  width: 24px; height: 24px;
}

/* Elementor Button in "outline" preset — matcht onze .btn-outline */
.elementor-button.gp-btn-outline{
  background: transparent;
  color: var(--blue-dark);
  border: 1.5px solid var(--blue-dark);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.elementor-button.gp-btn-outline:hover{
  background: var(--blue-dark);
  color: #fff;
}

/* Elementor Accordion — matcht onze FAQ-stijl */
.elementor-accordion .elementor-accordion-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.elementor-accordion .elementor-tab-title{
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--ink);
  padding: 22px 26px;
}
.elementor-accordion .elementor-tab-title .elementor-accordion-icon{ color: var(--green-dark); }

/* Elementor Post Loop / Loop Grid — voor chalet-overzicht.
   De Loop Item template zelf krijgt classes via Elementor's editor,
   maar we voegen defensieve styling toe. */
.chalet-loop-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.chalet-loop-item:hover{
  transform: translateY(-4px);
  border-color: var(--sand);
  box-shadow: var(--shadow-soft);
}


/* =====================================================
   HEADER - Elementor-brug
   De header is in Elementor Theme Builder gebouwd. Deze regels
   laten de widgets zich gedragen zoals in het demo6-ontwerp.
   ===================================================== */

/* In demo6 is de header .site-header > .container > .main-nav, waarbij
   .main-nav een raster is van 1fr auto 1fr: het logo houdt zijn eigen
   breedte en de zijkanten zijn exact even breed. Met kolommen van
   33/34/33 staat het logo niet precies in het midden.
   bron: .site-header, .container en .main-nav */
.gp-header{
  padding: 12px 0;
}
.gp-header > .elementor-container{
  width: 100%;
  max-width: 1240px !important;   /* de sectie-instelling in Elementor staat op 1180 */
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center;
  gap: 24px;
}
/* min-width: 0 is nodig omdat een 1fr-kolom anders meegroeit met zijn
   inhoud; de linkerkolom (vlaggen plus menu) werd daardoor breder dan
   de rechter, waardoor het logo niet meer in het midden stond. */
.gp-header > .elementor-container > .elementor-column{
  width: 100% !important;
  min-width: 0;
}

/* Linkerkolom: vlaggen en menu naast elkaar op een regel */
.gp-header .gp-hd-left > .elementor-widget-wrap{
  flex-wrap: nowrap !important;
  align-items: center;
  column-gap: 22px;
  row-gap: 0;
}
.gp-header .gp-hd-left .elementor-widget-html,
.gp-header .gp-hd-left .elementor-widget-nav-menu{
  width: auto;
}
.gp-header .gp-hd-left .elementor-widget-html{ flex-shrink: 0; }

/* Rechterkolom: menu en hamburger naast elkaar, uitgelijnd rechts */
.gp-header .gp-hd-right > .elementor-widget-wrap{
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-end;
  column-gap: 16px;
}

/* Navigatie horizontaal houden, geen afbreking naar een tweede regel */
.gp-header .elementor-nav-menu{
  display: flex !important;
  flex-wrap: nowrap;
  gap: 26px;
}
/* Menu-opmaak uit demo6, zodat die niet in de template hoeft te staan.
   bron: .main-nav .nav-items en .main-nav a */
.gp-header .elementor-nav-menu a.elementor-item{
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}
.gp-header .elementor-nav-menu a.elementor-item:hover{
  color: var(--green-dark) !important;
}
.gp-header .elementor-nav-menu li{ white-space: nowrap; }
.gp-header .elementor-nav-menu a.elementor-item{ padding: 8px 0 !important; }

/* Logo schalen in plaats van croppen */
.gp-header .gp-logo img,
.gp-header .elementor-widget-image img{
  max-width: 220px;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: inline-block;
}

/* De onderstreping bij hover. Elementor gebruikt hiervoor zijn
   accentkleur en 3px; demo6 gebruikt groen en 2px.
   bron: .main-nav a::after */
.gp-header .elementor-nav-menu .elementor-item::after,
.gp-header .elementor-nav-menu .elementor-item::before{
  background-color: var(--green-dark) !important;
  height: 2px !important;
}

/* Taalkeuze */
.gp-header .gp-lang{ display: inline-flex; gap: 8px; vertical-align: middle; }
.gp-header .gp-lang a{ padding: 4px; opacity: .75; line-height: 0; }
.gp-header .gp-lang a:hover{ opacity: 1; }
.gp-header .gp-lang .flag{
  display: inline-block; width: 22px; height: 15px;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.gp-header .gp-lang .flag-nl{
  background: linear-gradient(to bottom,#AE1C28 0 33%,#fff 33% 66%,#21468B 66% 100%);
}
.gp-header .gp-lang .flag-de{
  background: linear-gradient(to bottom,#000 0 33%,#DD0000 33% 66%,#FFCE00 66% 100%);
}


/* =====================================================
   MOBIEL MENU - Elementor-brug

   Het overlay zelf staat compleet in het demo6-deel hierboven
   (.mobile-menu, .mm-inner, .mm-logo, .mm-nav, .mm-link, .mm-cta,
   .mm-close). De markup komt uit functions.php. Hier staan alleen de
   twee dingen die in WordPress anders liggen dan in de demo.
   ===================================================== */

/* In demo6 zit de header op z-index 60 en het overlay op 90. Elementor
   zet op een sticky sectie z-index 99, waardoor de header over het
   overlay heen kwam te liggen. */
.mobile-menu{ z-index: 9999; }

/* De Kit geeft elke <button> een achtergrondkleur, een ronding en een
   eigen tekstgrootte. Dat is specifieker dan ".mm-close", dus staan de
   demo6-waarden hier terug. bron: .mm-close */
.mobile-menu button.mm-close{
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
}
.mobile-menu button.mm-close:hover{
  background: var(--ink);
  color: #fff;
}


/* =====================================================
   FOOTER - Elementor-brug
   De footer volgt nu de opbouw van demo6: .site-footer met daarin
   .footer-grid en .footer-bottom. Alle opmaak komt uit de regels
   hierboven; hier staat alleen wat Elementor's wrappers nodig hebben.
   ===================================================== */

/* Hello Elementor gebruikt de naam .site-footer zelf, voor zijn eigen
   footer. Die regels (theme.css en header-footer.css) knijpen de sectie
   tot 1140px en zetten er padding-block op. Hier teruggezet naar de
   waarden van demo6: volle breedte, padding clamp(50px,6vw,70px) 0 30px. */
.site-footer.elementor-section{
  max-width: none !important;
  width: auto !important;
  margin-inline: 0 !important;
  padding-block: clamp(50px, 6vw, 70px) 30px;
  padding-inline: 0;
}

.site-footer > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* bron: .footer-grid */
.footer-grid > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  gap: 40px;
}
.footer-grid > .elementor-container > .elementor-column{ width: 100% !important; }
.footer-grid{
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* bron: .footer-bottom */
.footer-bottom > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom{
  display: block !important;
  justify-content: normal !important;
}

.site-footer .elementor-widget{ margin-bottom: 0; }
.site-footer .elementor-widget-text-editor p{ margin: 0; }

/* Tekst. De Kit zet kleur en grootte op .elementor-widget-text-editor;
   dat is specifieker dan de overerving vanaf .site-footer, waardoor de
   tekst donker op donker kwam te staan.
   bron: .site-footer, .footer-brand p, .footer-col p, .footer-bottom */
.site-footer .elementor-widget-text-editor{
  color: rgba(255,255,255,.78);
  font-size: 14px;
}
.footer-brand .elementor-widget-text-editor{
  max-width: 32ch;
  line-height: 1.6;
}
.footer-col .elementor-widget-text-editor{ line-height: 1.7; }
.footer-bottom .elementor-widget-text-editor{ font-size: 12.5px; }

/* Koppen. Global Typography uit de Kit is specifieker dan .footer-col h4.
   bron: .footer-col h4 */
.footer-col .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: normal !important;
  color: #fff !important;
  margin: 0 0 14px !important;
}

/* Responsive: zelfde breekpunt als demo6.
   demo6 zet dit op ".footer-grid" zelf, maar hier staat het raster op de
   container daarbinnen. Zonder deze regel bleven de drie kolommen ook op
   een telefoon naast elkaar staan en liep de pagina horizontaal over.
   bron: de @media (max-width: 980px) hierboven */
@media (max-width: 980px){
  .footer-grid > .elementor-container{
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .footer-bottom > .elementor-container{
    flex-direction: column;
    gap: 12px;
  }
}

/* bron: .footer-brand img */
.footer-brand img{
  height: 56px;
  width: auto;
  max-width: none;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
  opacity: .92;
}

/* =====================================================
   CHALET-DETAIL - Elementor-brug

   Voegt geen nieuwe vormgeving toe. Twee dingen gebeuren hier:

   1. Elementor's wrappers gedragen zich als de HTML-structuur van
      demo6, zodat de CSS hierboven (sectie CHALET-DETAIL) precies
      zo aanslaat als op de demo.
   2. De koppen worden teruggezet naar de demo6-waarden. Elementor's
      Global Typography uit de Kit heeft hogere specificiteit dan
      bijvoorbeeld ".chalet-body h2", dus die moet expliciet worden
      overruled. Alle waarden zijn letterlijk overgenomen uit de
      regels .chalet-hero h1, .chalet-body h2 en .chalet-gallery h2.
   ===================================================== */

/* --- Structuur --- */

/* Hero: Elementor-container gedraagt zich als .container */
.chalet-hero > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 70px) clamp(20px, 4vw, 56px) clamp(30px, 4vw, 50px);
}
.chalet-hero{ align-items: flex-end; }
.chalet-hero > .elementor-container > .elementor-column{ width: 100%; }
.chalet-hero .elementor-widget-shortcode:empty{ display: none; }

/* Detail: container en grid in een keer */
.chalet-detail > .elementor-container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);

  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr) !important;
  gap: clamp(40px, 5vw, 70px);
  align-items: start;
}
.chalet-detail > .elementor-container > .elementor-column{ width: 100% !important; }

/* Galerij: Elementor-container gedraagt zich als .container */
.chalet-gallery > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* Elementor's widget-marges neutraliseren; demo6 rekent op eigen marges */
.chalet-hero .elementor-widget-shortcode,
.chalet-detail .elementor-widget-shortcode,
.chalet-gallery .elementor-widget-shortcode{
  margin-bottom: 0;
}
.chalet-body > .elementor-widget-wrap,
.chalet-aside > .elementor-widget-wrap{
  display: block;
}

/* --- Koppen terug naar demo6 --- */

/* bron: .chalet-hero h1 */
.chalet-hero .elementor-widget-theme-post-title .elementor-heading-title,
.chalet-hero .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  color: #fff !important;
  margin: 0;
  max-width: 30ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* bron: .chalet-body h2 */
.chalet-body .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
}
.chalet-body .elementor-widget-heading{ margin: 40px 0 16px; }
.chalet-body > .elementor-widget-wrap > .elementor-widget-heading:first-child{ margin-top: 0; }

/* bron: .chalet-gallery h2 */
.chalet-gallery .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
  text-align: center;
}
.chalet-gallery .elementor-widget-heading{ margin: 0 0 24px; }

/* De terug-link neemt in demo6 de zandkleur van de galerij mee, via
   ".chalet-gallery + .back-link-wrap". Hier staat de link in een eigen
   Elementor-sectie na de galerij, met nog vier lagen ertussen, dus die
   selector raakt hem niet. De kleur hoort op de sectie, anders loopt de
   zandkleur maar tot de rand van de container.
   bron: .chalet-gallery + .back-link-wrap */
.chalet-gallery + .elementor-section{
  background-color: var(--cream);
}
.chalet-gallery + .elementor-section .back-link-wrap,
.chalet-gallery + .back-link-wrap{
  background: transparent;
}

/* bron: .chalet-body p */
.chalet-body .elementor-widget-theme-post-content p{
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
}

/* --- Responsive: zelfde breakpoint als demo6 --- */
@media (max-width: 980px){
  .chalet-detail > .elementor-container{ grid-template-columns: 1fr; }
}


/* =====================================================
   CHALET-OVERZICHT - Elementor-brug

   Zelfde principe als bij de detailpagina: Elementor's wrappers
   gedragen zich als de HTML-structuur van demo6, zodat de CSS in
   de sectie CHALET-OVERZICHT hierboven precies zo aanslaat.
   ===================================================== */

/* Page-hero: Elementor-container gedraagt zich als .container */
.page-hero > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(70px, 9vw, 110px) clamp(20px, 4vw, 56px);
}
.page-hero > .elementor-container > .elementor-column{ width: 100%; }

/* bron: .page-hero h1 */
.page-hero .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  color: #fff !important;
  font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  max-width: 22ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.page-hero .elementor-widget-heading{ margin: 14px 0 18px; }
.page-hero .elementor-widget-text-editor{ margin-bottom: 0; }

/* Grid-sectie: Elementor-container gedraagt zich als .container */
.chalet-grid-section > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* Loop Grid gedraagt zich als .chalet-grid.
   Elementor zet zelf grid-template-columns op de widget en zijn
   stylesheet laadt na het child theme, dus bij gelijke specificiteit
   wint Elementor. Vandaar !important: anders blijft de grid op drie
   kolommen staan onder de demo6-breakpoint van 980px, en wordt de
   kaarttitel veel te groot voor de smalle kolom. */
.chalet-grid-loop .elementor-grid{
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
}
.chalet-grid-loop .elementor-grid-item{
  display: flex;
  min-width: 0;   /* voorkomt dat lange titels de kolom oprekken */
}

/* Elementor-wrappers op border-box, anders telt de padding bij de
   breedte op en loopt de derde kaart buiten beeld. */
.chalet-grid-section *,
.chalet-grid-section *::before,
.chalet-grid-section *::after,
.page-hero *,
.page-hero *::before,
.page-hero *::after{
  box-sizing: border-box;
}

/* De kaart zelf is een <a class="chalet-card"> uit [gp_card], precies
   zoals in demo6. De Elementor-wrappers eromheen mogen geen eigen
   opmaak of ruimte toevoegen en moeten de cel volledig vullen. */
.chalet-card-wrap,
.chalet-card-wrap > .elementor-container,
.chalet-card-wrap > .elementor-container > .elementor-column,
.chalet-card-wrap .elementor-widget-wrap,
.chalet-card-wrap .elementor-widget-shortcode,
.chalet-card-wrap .elementor-widget-shortcode > .elementor-widget-container{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.chalet-card-wrap .chalet-card{ flex-grow: 1; }

/* Kaarttitel terug naar demo6 - bron: .chalet-card .body h3
   De Elementor Kit zet H3 op hoofdletters en laadt na het child theme,
   dus bij gelijke specificiteit wint de Kit. Vandaar !important op de
   eigenschappen die de Kit overschrijft. */
.chalet-card .body h3,
.chalet-grid-loop .chalet-card .body h3,
.elementor .chalet-card .body h3{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: 1.8rem !important;
  line-height: 1.05 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  color: var(--ink);
  margin: 0 0 14px;
}

/* bron: .chalet-card .body .plek */
.chalet-card .body .plek,
.chalet-grid-loop .chalet-card .body .plek{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

@media (max-width: 980px){
  .chalet-grid-loop .elementor-grid{ grid-template-columns: 1fr !important; }
}


/* =====================================================
   HOME EN OVER GREVELINGENPOLDER - Elementor-brug

   Zelfde principe als bij de andere pagina's: Elementor's wrappers
   gedragen zich als de HTML van demo6, zodat de CSS hierboven
   (secties HERO, 4 CONTENT-BLOKKEN, FAQ, CONTACT en OVER
   GREVELINGENPOLDER) precies zo aanslaat.
   ===================================================== */

/* --- Belangrijk: layout hoort op de container, niet op de sectie ---
   In demo6 bevat bijvoorbeeld .cblock direct twee kinderen, dus daar
   werkt "display: grid" op het element zelf. Elementor schuift er een
   .elementor-container tussen. Zonder onderstaande regels wordt de
   grid twee keer toegepast: de sectie verdeelt de breedte, en de
   container verdeelt die helft nog eens.
   De grid-waarden zelf blijven ongewijzigd; alleen het niveau schuift op. */
.cblock,
.contact-grid,
.person-card,
.team-grid{
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
/* .team-grid brengt in demo6 ook een maatbeperking mee. Die hoort op de
   rasterwrapper, niet op de sectie; anders wordt de sectie inclusief
   achtergrond afgeknepen tot 1080px. */
.team-section.team-grid{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Containers: de Elementor-container gedraagt zich als .container ---
     demo6 overschrijft .container per sectie (andere max-width, soms
     gecentreerde tekst). Die waarden zijn hieronder per sectie
     overgenomen in plaats van overal dezelfde breedte te gebruiken. --- */

/* bron: .container (geen eigen override) */
.hero > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* bron: .content-blocks .container */
.content-blocks > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* bron: .faq .container */
.faq > .elementor-container{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* bron: .container (geen eigen override) */
.contact > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* bron: .over-intro .container */
.over-intro > .elementor-container{
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  text-align: center;
  box-sizing: border-box;
}

/* bron: .container (geen eigen override) */
.team-section > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* bron: .generations-block .container */
.generations-block > .elementor-container{
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  text-align: center;
  box-sizing: border-box;
}

.hero *, .content-blocks *, .faq *, .contact *,
.over-intro *, .team-section *, .generations-block *,
.hero *::before, .content-blocks *::before, .faq *::before,
.contact *::before, .over-intro *::before, .team-section *::before,
.generations-block *::before{
  box-sizing: border-box;
}

/* --- Videohero ---
   In demo6 ligt de video absoluut achter de hero (z-index -2) en
   centreert .hero zijn inhoud met flex. Elementor geeft zijn kolommen
   standaard position: relative; daardoor zou de video zich op de kolom
   richten in plaats van op de hero, en erachter verdwijnen. Deze
   wrappers krijgen daarom position: static. */
.hero > .elementor-container,
.hero > .elementor-container > .elementor-column,
.hero > .elementor-container > .elementor-column > .elementor-widget-wrap,
.hero .elementor-widget-shortcode,
.hero .elementor-widget-shortcode > .elementor-widget-container,
.hero .hero-inner,
.hero .hero-inner > .elementor-container,
.hero .hero-inner > .elementor-container > .elementor-column,
.hero .hero-inner > .elementor-container > .elementor-column > .elementor-widget-wrap{
  position: static;
}
.hero > .elementor-container{
  align-items: center;
}
.hero .elementor-widget-shortcode{ margin-bottom: 0; }
.hero > .elementor-container > .elementor-column{ width: 100%; }

/* bron: .hero-inner (padding hoort bij de inner, niet bij de container) */
.hero .hero-inner > .elementor-container{
  max-width: 1240px;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
  text-align: center;
}

/* bron: .hero h1 */
.hero .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2.8rem, 7vw, 5.4rem) !important;
  line-height: .95 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: #fff !important;
  margin: 0 auto;
  max-width: 22ch;
  text-shadow: 0 3px 22px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.3);
}
/* bron: .hero-inner */
.hero-inner{
  width: 100%;
  text-align: center;
}

/* --- Content-blokken ---
   Twee kolommen: foto links iets groter dan de tekst rechts.
   bron: .cblock */
.cblock > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.cblock > .elementor-container > .elementor-column{ width: 100% !important; }

/* In demo6 is .cblock-media een kader van 4:3 met afgeronde hoeken, en
   vult de foto dat kader helemaal (height: 100%, object-fit: cover).
   Hier is .cblock-media de kolom, met twee lagen tussen het kader en de
   foto: de widget-wrap en de image-widget. Die gaven de hoogte niet door,
   waardoor de foto lager bleef dan het kader: onderaan bleef de
   achtergrond van het kader zichtbaar (die crème strook) en werden de
   onderhoeken vierkant, omdat de foto de rand van het kader niet raakte.
   bron: .cblock-media en .cblock-media img */
.cblock-media > .elementor-widget-wrap,
.cblock-media .elementor-widget-image,
.cblock-media .elementor-widget-image > .elementor-widget-container{
  height: 100%;
}
.cblock-media .elementor-widget-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* De kop krijgt het blaadje als ::before, zodat de titel zelf een
   gewone Elementor Heading blijft die de klant kan bewerken.
   bron: .cblock-body h2 en .cblock-body h2 .leaf */
.cblock-body .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2rem, 3.6vw, 2.8rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cblock-body .elementor-widget-heading .elementor-heading-title::before{
  content: "";
  flex-shrink: 0;
  width: clamp(22px, 2.6vw, 30px);
  height: clamp(22px, 2.6vw, 30px);
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M21.5%203.2c-1.4%2011.4-8.5%2015.7-13.2%2016.4%201.7-3.7%205-6.4%209.1-7.5-4.6%200-9.1%201.6-12.4%205.6C2.2%2012.4%206.7%204.6%2016.8%203.6c1.6-.2%203.2-.3%204.7-.4z%27%20fill%3D%27%23009640%27%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.cblock-body .elementor-widget-heading{ margin-bottom: 20px; }

/* --- FAQ ---
   Elementor's Accordion heeft een andere opbouw dan de <details> in
   demo6. Deze regels geven de accordion dezelfde vormgeving.
   bron: details.faq-item en de bijbehorende regels */
.faq .elementor-accordion .elementor-accordion-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
/* De titeltekst zit in een <a class="elementor-accordion-title">; zonder
   deze regel krijgt die de linkkleur uit de Kit in plaats van de
   vormgeving van demo6. bron: details.faq-item summary */
.faq .elementor-accordion .elementor-accordion-title{
  font-family: var(--font-serif) !important;
  font-size: 1.12rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink) !important;
  text-decoration: none;
}

.faq .elementor-accordion .elementor-tab-title{
  cursor: pointer;
  padding: 22px 60px 22px 26px;
  font-family: var(--font-serif) !important;
  font-size: 1.12rem !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink);
  position: relative;
  border: 0;
  background: transparent;
}
.faq .elementor-accordion .elementor-tab-title.elementor-active{
  box-shadow: none;
}
.faq .elementor-accordion .elementor-accordion-item:has(.elementor-active){
  box-shadow: var(--shadow-soft);
}
/* Het plus- en minteken rechts, net als in demo6 */
.faq .elementor-accordion .elementor-accordion-icon{
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  color: var(--green-dark);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}
.faq .elementor-accordion .elementor-accordion-icon i,
.faq .elementor-accordion .elementor-accordion-icon svg{ display: none; }
.faq .elementor-accordion .elementor-accordion-icon::after{ content: "+"; }
.faq .elementor-accordion .elementor-active .elementor-accordion-icon::after{ content: "\2212"; }

.faq .elementor-accordion .elementor-tab-content{
  padding: 0 26px 22px;
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  border: 0;
  background: transparent;
}
.faq .elementor-accordion .elementor-tab-content p{ margin: 0; }

/* bron: .faq-head h2 */
.faq .elementor-widget-heading .elementor-heading-title{
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* --- Contact --- */
.contact-grid > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.contact-grid > .elementor-container > .elementor-column{ width: 100% !important; }

/* Elementor's Form widget de vorm van .contact-form geven.

   Label boven het veld, zoals in demo6. Niet met flex-direction: column,
   want Elementor zet op het veld "flex-basis: 100%" en dat betekent in
   een kolomrichting 100% van de HOOGTE. In combinatie met flex-wrap
   springt het veld dan naar een nieuwe kolom naast het label, en steekt
   het aan de rechterkant buiten de kaart. Dat was de scheve uitlijning.

   Daarom blijft de richting op rij staan en krijgen het label en het
   veld allebei een hele regel. bron: .contact-form label (display: block)
   en .contact-form input (width: 100%). */
.contact-form .elementor-field-group{
  margin-bottom: 18px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.contact-form .elementor-field-group > label{
  display: block;
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 6px;
}
.contact-form .elementor-field-group .elementor-field{
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}

/* --- Team --- */
/* De kop en de vier persoonskaarten liggen als losse blokken in een
   kolom van .team-section. Elementor ondersteunt maar een niveau
   nesting, dus wordt die kolom zelf het raster.
   bron: .team-grid */
.team-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
.team-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}
/* De kop staat boven beide kolommen */
.team-section .team-heading,
.team-grid .team-heading{ grid-column: 1 / -1; }
.team-section .person-card,
.team-grid .person-card{ width: 100%; }

/* In demo6 is .portrait een div met background-image. Met een Elementor
   Image widget wordt het een <img>; deze regels geven dezelfde ronde
   uitsnede. bron: .portrait */
.person-card .portrait img,
.portrait img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 50%;
  background-color: var(--cream);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  display: block;
}


/* --- person-card is in demo6 een grid: portret links, tekst rechts.
       bron: .person-card --- */
.person-card > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  gap: clamp(20px, 3vw, 30px);
  align-items: start;
}
.person-card > .elementor-container > .elementor-column{ width: 100% !important; }
.person-card .elementor-widget{ margin-bottom: 0; }

/* --- De knop "Verder lezen".
       Elementor zet css_classes op de widget-wrapper, niet op de <a>,
       dus de demo6-regels voor .btn-outline slaan niet vanzelf aan op
       de knop zelf. Deze regels zetten ze door naar .elementor-button.
       Alle waarden letterlijk uit .btn-outline en .btn-outline:hover. --- */
.gp-btn .elementor-button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--blue-dark) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid var(--blue-dark) !important;
  border-radius: 4px !important;
  transition: background .2s ease, color .2s ease;
}
.gp-btn .elementor-button:hover{
  background: var(--blue-dark) !important;
  background-color: var(--blue-dark) !important;
  color: #fff !important;
}
/* De tekst in de knop erft de kleur van de knop zelf */
.gp-btn .elementor-button .elementor-button-content-wrapper,
.gp-btn .elementor-button .elementor-button-text{
  color: inherit !important;
}
/* De pijl staat in demo6 als <span class="arr"> in de link; een
   Elementor Button kan geen HTML in de tekst hebben, dus die komt
   hier als ::after. bron: .btn-outline .arr */
.gp-btn .elementor-button .elementor-button-text::after{
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  transition: transform .2s ease;
}
.gp-btn .elementor-button:hover .elementor-button-text::after{
  transform: translateX(3px);
}

/* --- Het contactformulier.
       Elementor's Form-widget brengt zijn eigen opmaak mee, en die is
       specifieker dan ".contact-form label" en ".contact-form input"
       uit demo6. Vandaar dat die waarden hier expliciet terugkomen.
       Alles letterlijk overgenomen uit de regels .contact-form label,
       .contact-form input/textarea en .btn-submit hierboven. --- */

/* bron: .contact-form label */
.contact-form .elementor-field-group > label,
.contact-form .elementor-field-label{
  display: block;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: normal !important;
  color: var(--ink-soft) !important;
  margin-bottom: 6px;
}

/* bron: .contact-form input, .contact-form textarea */
.contact-form .elementor-field-group .elementor-field-textual{
  width: 100%;
  padding: 12px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: normal !important;
  color: var(--ink) !important;
  background-color: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  outline: none;
  box-shadow: none;
  transition: border-color .2s ease;
}
.contact-form .elementor-field-group .elementor-field-textual:focus{
  border-color: var(--sand) !important;
  box-shadow: none;
}
/* bron: .contact-form textarea */
.contact-form textarea.elementor-field-textual{
  min-height: 130px;
  resize: vertical;
}

/* bron: .btn-submit. In demo6 is de knop inline-flex en dus zo breed als
   zijn tekst; Elementor rekt hem standaard over de volle breedte. */
.contact-form .elementor-field-type-submit{
  justify-content: flex-start;
}
.contact-form .elementor-field-type-submit .elementor-button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Elementor rekt de knop over de volle breedte met
     ".elementor-button-align-stretch ... {flex-basis:100%}". Die selector
     is specifieker, vandaar !important. */
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 14px 28px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  line-height: normal !important;
  color: #fff !important;
  background-color: var(--green-dark) !important;
  border: 0 !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.contact-form .elementor-field-type-submit .elementor-button:hover{
  background-color: var(--green) !important;
  transform: translateY(-1px);
}



/* --- Koppen die als Elementor Heading-widget in de pagina staan.
       De Kit-stylesheet laadt na het child theme, dus de demo6-waarden
       worden hier expliciet teruggezet. Waarden zijn letterlijk
       overgenomen uit de regels hierboven. --- */

/* bron: .faq-head h2 */
.faq-head .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2.8rem, 6vw, 4.2rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
}
.faq-head .elementor-widget-heading{ margin: 0; }

/* bron: .contact-head h2 */
.contact-head .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2.8rem, 6vw, 4.2rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
}
.contact-head .elementor-widget-heading{ margin: 0; }

/* bron: .team-heading h2 */
.team-heading .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
}
.team-heading .elementor-widget-heading{ margin: 0 0 14px; }

/* bron: .person-body h3 */
.person-body .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(1.7rem, 2.4vw, 2rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
}
.person-body .elementor-widget-heading{ margin: 0 0 14px; }

/* bron: .generations-block h2 */
.generations-block .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 3.8vw, 3rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
}
.generations-block .elementor-widget-heading{ margin: 0 0 18px; }

/* --- Responsive: dezelfde breekpunten als demo6 --- */
@media (max-width: 980px){
  .cblock > .elementor-container,
  .contact-grid > .elementor-container,
  .person-card > .elementor-container{
    grid-template-columns: 1fr !important;
  }
  .team-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
.team-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
    grid-template-columns: 1fr !important;
  }
}


/* =====================================================
   INFORMATIE - Elementor-brug
   ===================================================== */

/* bron: .container (info-grid-section heeft geen eigen override) */
.info-grid-section > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* De tegels liggen als losse shortcodes in een kolom; die kolom wordt
   het raster. bron: .info-grid */
.info-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px;
}
/* De sectie zelf mag geen raster zijn; dat hoort op de wrapper hierboven */
.info-grid{
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
/* In demo6 is de tegel zelf een raster-item, waardoor tegels binnen een
   rij vanzelf even hoog worden. Hier zitten er twee lagen tussen: de
   widget en een div.elementor-shortcode. Allebei moeten de hoogte
   doorgeven, anders blijft een korte tegel lager dan de rest. */
.info-grid .elementor-widget-shortcode{
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.info-grid .elementor-shortcode{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.info-grid .info-card{ flex-grow: 1; }

@media (max-width: 980px){
  .info-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
    grid-template-columns: 1fr !important;
  }
}


/* --- Sub-pagina's van Informatie ---
   De tegels staan hier als losse blokken in een kolom; die kolom wordt
   het raster. Tussenkoppen lopen over de volle breedte, net als in
   demo6, waar ze tussen de rasters staan. --- */

.info-grid > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-section{
  width: 100%;
}
/* tegels die als eigen sectie zijn opgebouwd */
.info-grid > .elementor-container > .elementor-column > .elementor-widget-wrap > .info-card{
  display: flex;
  flex-direction: column;
}
.info-card > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  flex-grow: 1;
}
.info-card > .elementor-container > .elementor-column{ width: 100% !important; }

/* Tussenkop over de volle breedte van het raster.
   bron: de inline stijl op <h2> in demo6/onderhoud.php */
.info-grid .info-groepkop{
  grid-column: 1 / -1;
  margin: 0 0 18px;
}
.info-grid .info-groepkop .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2rem, 3.4vw, 2.6rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Het blaadje staat in demo6 als span in de kop; hier als achtergrond,
   zodat de kop een gewone bewerkbare Heading blijft. */
.info-grid .info-groepkop .elementor-heading-title::before{
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M21.5%203.2c-1.4%2011.4-8.5%2015.7-13.2%2016.4%201.7-3.7%205-6.4%209.1-7.5-4.6%200-9.1%201.6-12.4%205.6C2.2%2012.4%206.7%204.6%2016.8%203.6c1.6-.2%203.2-.3%204.7-.4z%27%20fill%3D%27%23009640%27%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* De eerste tussenkop hoeft geen extra ruimte boven zich */
.info-grid .info-groepkop + .info-card{ margin-top: 0; }


/* --- Telefoonnummers en Recronvoorwaarden --- */

/* bron: .container (phone-grid-section heeft geen eigen override) */
.phone-grid-section > .elementor-container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* De telefoonkaarten liggen als losse shortcodes in een kolom; die
   kolom wordt het raster. bron: .phone-grid */
.phone-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px;
}
.phone-grid{
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
/* Ook hier moeten de twee tussenlagen de hoogte doorgeven, anders
   worden kaarten in een rij niet even hoog. */
.phone-grid .elementor-widget-shortcode{
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.phone-grid .elementor-shortcode{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.phone-grid .phone-card{ flex-grow: 1; }

@media (max-width: 980px){
  .phone-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
    grid-template-columns: 1fr !important;
  }
}


/* --- Telefoonkaarten, opgebouwd uit losse Elementor-widgets ---
   In demo6 is de tegel een <a> met daarin spans. Hier is het een sectie
   met widgets; de klasse staat op de widget in plaats van op een span,
   dus de bestaande regels (.phone-card .label enzovoort) slaan gewoon
   aan. Wat hier bij moet: de tegel weer een kolom-flex maken en de
   link over de hele tegel leggen. --- */

.phone-card > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  flex-grow: 1;
}
.phone-card > .elementor-container > .elementor-column{ width: 100% !important; }
.phone-card > .elementor-container > .elementor-column > .elementor-widget-wrap{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0;
}
/* De kop duwt het nummer naar onderen, net als in demo6 */
.phone-card .elementor-widget-heading{ flex-grow: 1; }
.phone-card .elementor-widget{ margin-bottom: 0; }

/* De tekstwidgets bevatten een <p>; die mag geen eigen marges toevoegen */
.phone-card .elementor-widget-text-editor p{ margin: 0; }
.phone-card .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink) !important;
}

/* Link over de hele tegel. Elementor zet position: relative op vier
   lagen; die moeten hier static staan, anders richt de link zich op de
   widget in plaats van op de tegel. */
.phone-card{ position: relative; }
.phone-card > .elementor-container,
.phone-card > .elementor-container > .elementor-column,
.phone-card > .elementor-container > .elementor-column > .elementor-widget-wrap,
.phone-card .gp-cardlink-wrap,
.phone-card .gp-cardlink-wrap > .elementor-widget-container{
  position: static;
}
.phone-card .gp-cardlink{
  position: absolute;
  inset: 0;
  z-index: 2;
}
.phone-card .gp-cardlink-wrap{ margin: 0; }

/* De tegel gedraagt zich als link */
.phone-card:hover{
  transform: translateY(-4px);
  border-color: var(--sand);
  box-shadow: var(--shadow-soft);
}


/* --- Tegels op de informatiepagina's, opgebouwd uit losse widgets ---
   De klassen staan op de widget in plaats van op een span of link, zodat
   de bestaande regels uit demo6 gewoon aanslaan. --- */

/* Tegel wordt weer een kolom-flex, zodat "Verder lezen" onderaan blijft */
.info-card > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  flex-grow: 1;
}
.info-card > .elementor-container > .elementor-column{ width: 100% !important; }
.info-card > .elementor-container > .elementor-column > .elementor-widget-wrap{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0;
}
.info-card .elementor-widget{ margin-bottom: 0; }
.info-card .elementor-widget-text-editor p{ margin: 0; }
/* de tekst duwt de leeslink naar onderen */
.info-card .elementor-widget-text-editor:not(.read){ flex-grow: 1; }

/* Kop met blaadje ervoor. bron: .info-card h3 en .info-card h3 .leaf */
.info-card .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: 1.9rem !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.info-card .met-blad .elementor-heading-title::before{
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M21.5%203.2c-1.4%2011.4-8.5%2015.7-13.2%2016.4%201.7-3.7%205-6.4%209.1-7.5-4.6%200-9.1%201.6-12.4%205.6C2.2%2012.4%206.7%204.6%2016.8%203.6c1.6-.2%203.2-.3%204.7-.4z%27%20fill%3D%27%23009640%27%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Klikbare tegel op de informatiepagina */
.info-card-link{ position: relative; }
.info-card-link > .elementor-container,
.info-card-link > .elementor-container > .elementor-column,
.info-card-link > .elementor-container > .elementor-column > .elementor-widget-wrap,
.info-card .gp-cardlink-wrap,
.info-card .gp-cardlink-wrap > .elementor-widget-container{
  position: static;
}
.info-card .gp-cardlink{ position: absolute; inset: 0; z-index: 2; }
.info-card .gp-cardlink-wrap{ margin: 0; }

/* Adres- en contactregel op de onderhoudspagina.
   bron: de inline stijlen op <p> en <a> in demo6/onderhoud.php */
.info-card .kaart-adres{
  color:var(--ink-soft);
  font-size:14px;
  margin-bottom:8px;
}
.info-card .kaart-contact a[href^="tel"]{
  color:var(--blue-dark);
  font-weight:600;
  border-bottom:1px solid var(--blue-dark);
}
.info-card .kaart-contact a[href^="mailto"]{
  color:var(--ink-soft);
}

/* --- Downloadtegel, ook uit widgets --- */
.download-card > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 22px;
  align-items: center;
}
.download-card > .elementor-container > .elementor-column{ width: 100% !important; }
.download-card .elementor-widget{ margin-bottom: 0; }
.download-card .elementor-widget-text-editor p{ margin: 0; }
.download-card{ position: relative; }
.download-card > .elementor-container,
.download-card > .elementor-container > .elementor-column,
.download-card > .elementor-container > .elementor-column > .elementor-widget-wrap,
.download-card .gp-cardlink-wrap,
.download-card .gp-cardlink-wrap > .elementor-widget-container{
  position: static;
}
.download-card .gp-cardlink{ position: absolute; inset: 0; z-index: 2; }
.download-card .gp-cardlink-wrap{ margin: 0; }


/* --- Slottegel op Informatie voor gasten ---
   In demo6 staat deze tegel met inline stijlen in de pagina; hier als
   klassen, met dezelfde waarden. Het raster eromheen is daar een kolom
   breed (grid-template-columns: 1fr), dus de tegel loopt over de volle
   breedte. --- */
.info-card.slotkaart{
  text-align: center;
  padding: clamp(28px, 4vw, 40px);
  grid-column: 1 / -1;
}
.slotkaart .slot-quote{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.55;
}
.slotkaart .slot-wens{
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.slotkaart .slot-team{
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}
.slotkaart .slot-knoppen{
  margin-top: 26px;
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.slotkaart .slot-knoppen a{
  display:inline-flex;
  align-items:center;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue-dark);
  border: 1.5px solid var(--blue-dark);
  border-radius: 4px;
  text-decoration: none;
}
/* de tegel heeft geen kop, dus niets hoeft naar onderen geduwd */
.slotkaart .elementor-widget-text-editor{ flex-grow: 0 !important; }


/* --- Recronvoorwaarden ---
   De container is hier smaller dan standaard en er staat een
   inleidende alinea boven de downloadtegel.
   bron: de inline stijlen in demo6/recronvoorwaarden.php --- */
.recron-sectie > .elementor-container{
  max-width: 760px;
}
.recron-intro{
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 22px;
}
.recron-intro p{ margin: 0; }


/* =====================================================
   DUURZAAMHEID EN OMGEVING - Elementor-brug
   ===================================================== */

/* Deelkop boven een raster. In demo6 staat .part-heading buiten
   .info-grid; hier ligt hij als eerste blok in dezelfde kolom, dus moet
   hij over alle kolommen lopen. bron: .part-heading */
.info-grid .part-heading{ grid-column: 1 / -1; }
.part-heading > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
}
.part-heading > .elementor-container > .elementor-column{ width: 100% !important; }
.part-heading .elementor-widget{ margin-bottom: 0; }

/* bron: .part-heading h2 */
.part-heading .elementor-widget-heading .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  margin: 0 0 14px !important;
}

/* bron: de inline stijl background:var(--cream) op de tweede
   .info-grid-section in demo6/omgeving2.php */
.info-grid-section.section-cream{ background: var(--cream); }

/* Containers, per sectie zoals demo6 ze overschrijft */
.green-koers > .elementor-container{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}
.phone-sections > .elementor-container{
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* De blokken liggen als losse secties in een kolom */
.natuur-card > .elementor-container,
.green-block > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
}
.natuur-card > .elementor-container > .elementor-column,
.green-block > .elementor-container > .elementor-column{ width: 100% !important; }
.natuur-card .elementor-widget,
.green-block .elementor-widget{ margin-bottom: 0; }

/* Blokkop met blaadje. bron: de inline stijl op <h2> in de sub-pagina's */
.blok-kop .elementor-heading-title{
  font-family: var(--font-title) !important;
  font-weight: 500 !important;
  font-size: clamp(2rem, 3.4vw, 2.8rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-style: normal !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
.blok-kop .elementor-heading-title::before{
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M21.5%203.2c-1.4%2011.4-8.5%2015.7-13.2%2016.4%201.7-3.7%205-6.4%209.1-7.5-4.6%200-9.1%201.6-12.4%205.6C2.2%2012.4%206.7%204.6%2016.8%203.6c1.6-.2%203.2-.3%204.7-.4z%27%20fill%3D%27%23009640%27%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.blok-kop{ margin: 0 0 24px; }

/* MVO-verklaring: de genummerde kaarten in een raster */
.mvo-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mvo-grid .green-block{ grid-column: 1 / -1; }
.mvo-card > .elementor-container{
  width: 100%;
  max-width: none;
  padding: 0;
  flex-grow: 1;
}
.mvo-card > .elementor-container > .elementor-column{ width: 100% !important; }
.mvo-card .elementor-widget{ margin-bottom: 0; }

/* Green Key-badge */
.gk-badge p{ margin: 0; }

/* MVO-verslagen: Elementor's accordion in de vorm van demo6.
   bron: details.verslag en de bijbehorende regels */
.verslagen .elementor-accordion-item{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.verslagen .elementor-tab-title{
  padding: 22px 60px 22px 26px;
  position: relative;
  border: 0;
  background: transparent;
}
.verslagen .elementor-accordion-title{
  font-family: var(--font-serif) !important;
  font-size: 1.12rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ink) !important;
  text-decoration: none;
}
.verslagen .elementor-accordion-icon{
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  color: var(--green-dark);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}
.verslagen .elementor-accordion-icon i,
.verslagen .elementor-accordion-icon svg{ display: none; }
.verslagen .elementor-accordion-icon::after{ content: "+"; }
.verslagen .elementor-active .elementor-accordion-icon::after{ content: "\2212"; }
.verslagen .elementor-tab-content{
  padding: 0 26px 22px;
  border: 0;
  background: transparent;
}

/* Sectie met de MVO-verslagen; zelfde container als green-koers */
.verslagen-sectie > .elementor-container{
  max-width: 900px;
}
/* bron: de inline stijl op p.verslagen-intro */
.verslagen-intro{
  text-align: left;
  margin: 0 0 28px;
}
.verslagen-intro p{ margin: 0; }
/* bron: p.signature met margin-top uit de pagina */
.signature{ margin-top: 24px; }
.signature p{ margin: 0; }

/* Green Key: badge naast de tekst. In demo6 is .green-block.gk zelf het
   raster; hier zit de Elementor-container ertussen, dus die krijgt het.
   bron: .green-block.gk */
.green-block.gk > .elementor-container{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: clamp(28px, 4vw, 44px);
  align-items: center;
}
.green-block.gk > .elementor-container > .elementor-column{ width: 100% !important; }
.green-block.gk .gk-badge p{ margin: 0; }

/* Responsive voor de twee rasters die in de brug op een ander niveau
   staan dan in demo6, en daardoor buiten de mediaregels van demo6 vallen.
   Zonder deze regels liep mvo-verklaring op een telefoon over naar 643px
   en green-key naar 428px. Breekpunten en waarden uit demo6 overgenomen. */

/* bron: @media (max-width: 980px){ .omg-content .mvo-grid{ 1fr } } */
@media (max-width: 980px){
  .mvo-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
    grid-template-columns: 1fr;
  }
}

/* bron: @media (max-width: 720px){ .green-block.gk{ 1fr; center }
                                    .gk-badge{ justify-self: center } } */
@media (max-width: 720px){
  .green-block.gk > .elementor-container{
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .green-block.gk .gk-badge{ justify-self: center; }
}

/* Taalvlaggen in het mobiele menu. In de header staan ze al; daar zijn ze
   op tablet en mobiel verborgen, dus komen ze hier terug.
   Kleuren en maten uit de header-brug hierboven overgenomen. */
.mobile-menu .gp-lang-mm{
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 220px;
}
.mobile-menu .gp-lang-mm a{
  padding: 6px;
  line-height: 0;
  opacity: .6;
  transition: opacity .2s ease;
}
.mobile-menu .gp-lang-mm a:hover{ opacity: 1; }
.mobile-menu .gp-lang-mm .flag{
  display: block;
  width: 30px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
}
.mobile-menu .gp-lang-mm .flag-nl{
  background: linear-gradient(to bottom,#AE1C28 0 33%,#fff 33% 66%,#21468B 66% 100%);
}
.mobile-menu .gp-lang-mm .flag-de{
  background: linear-gradient(to bottom,#000 0 33%,#DD0000 33% 66%,#FFCE00 66% 100%);
}

/* De taal waar je nu naar kijkt, volledig zichtbaar met een randje eronder */
.gp-lang a.is-actief{ opacity: 1; }
.gp-header .gp-lang a.is-actief{
  box-shadow: inset 0 -2px 0 0 var(--green-dark);
  border-radius: 2px;
}
.mobile-menu .gp-lang-mm a.is-actief{
  opacity: 1;
  box-shadow: inset 0 -2px 0 0 var(--green-dark);
  border-radius: 2px;
}