@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700&display=swap');

/* Gravity Forms Customizations */
#gform_submit_button_1{
	color: #fff !important;
    border-width: 0px !important;
    border-radius: 5px;
    font-size: 1.3rem;
    font-family: 'Sora', Helvetica, Arial, Lucida, sans-serif !important;
    text-transform: uppercase !important;
    background-color: #2b2b2b !important;
	  padding:1rem;
    cursor: pointer !important
}


.gform_validation_errors {
    display: none !important;
}

/* ===== Stadswandelingen Utrecht — styleguide (geport uit static/styleguide) ===== */

/* --- tokens.css --- */
/* =====================================================================
   Stadswandelingen Utrecht — Design Tokens
   Bron: Huisstijlhandboek v1.6 + Briefing webbouwer
   Merkkompas: licht, lucht, stad, water, beweging en kennis.

   Dit bestand bevat ALLE merkvariabelen (kleur, type, ruimte, vorm).
   Pas hier waarden aan; base.css en components.css erven hiervan.
   ===================================================================== */

:root {
  /* -------------------------------------------------------------------
     KLEUR — palet uit de huisstijl
     ------------------------------------------------------------------- */
  --su-blauw-krachtig: #2468B4; /* Hoofdkleur: logo, primaire knoppen, accenten */
  --su-blauw-middel:   #5B93D0; /* Steunkleur: secundaire accenten, vlakken     */
  --su-blauw-lucht:    #A9CBEA; /* Steunkleur: subtiele vlakken, lijnen          */
  --su-blauw-ijs:      #E7F2FB; /* Achtergrond: rustige informatievlakken        */
  --su-blauw-tekst:    #163A63; /* Tekstkleur: vervangt zwart (lange tekst/kop)  */
  --su-wit:            #FFFFFF; /* Ruimte, rust, contrast                        */

  /* Afgeleide tinten (alleen voor states/hover — blijven binnen het merk) */
  --su-blauw-krachtig-hover:  #1d568f; /* donkerder voor hover op primaire knop */
  --su-blauw-krachtig-active: #18497a; /* nog donkerder voor active/pressed      */
  --su-rand-zacht:            #cfe2f4; /* zachte rand/scheidingslijn (licht)     */

  /* Semantische rollen — gebruik deze in de UI, niet de ruwe kleuren */
  --su-kleur-tekst:           var(--su-blauw-tekst);
  --su-kleur-tekst-zacht:     #41618a;               /* secundaire tekst, labels */
  --su-kleur-achtergrond:     var(--su-wit);
  --su-kleur-achtergrond-alt: var(--su-blauw-ijs);   /* afwisselende secties      */
  --su-kleur-primair:         var(--su-blauw-krachtig);
  --su-kleur-op-primair:      var(--su-wit);          /* tekst op primaire vlakken */
  --su-kleur-link:            var(--su-blauw-krachtig);
  --su-kleur-link-hover:      var(--su-blauw-krachtig-active);
  --su-kleur-focus:           var(--su-blauw-krachtig);

  /* -------------------------------------------------------------------
     TYPOGRAFIE — Source Sans 3 (basis), College Semi = ALLEEN logo
     ------------------------------------------------------------------- */
  --su-font-basis: "Source Sans 3", Arial, "Aptos", system-ui, sans-serif;

  /* Fluïde typeschaal (clamp: mobiel → desktop), conform huisstijltabel.
     Verhoudingen, ruime regelafstand en leesbaarheid blijven leidend.
     Doelgroep is gemiddeld wat ouder: leesbaarheid > compactheid. */
  --su-tekst-h1:     clamp(2.25rem, 1.30rem + 3.8vw, 3.50rem); /* 36 → 56 px */
  --su-tekst-h2:     clamp(1.75rem, 1.30rem + 1.9vw, 2.50rem); /* 28 → 40 px */
  --su-tekst-h3:     clamp(1.375rem, 1.18rem + 0.8vw, 1.75rem);/* 22 → 28 px */
  --su-tekst-h4:     clamp(1.1875rem, 1.13rem + 0.3vw, 1.375rem);/* 19 → 22 px */
  --su-tekst-body:   clamp(1.1875rem, 1.15rem + 0.2vw, 1.3125rem);/* 19 → 21 px */
  --su-tekst-klein:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);   /* 16 → 18 px */
  --su-tekst-knop:   clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);/* 17 → 19 px */
  /* Labels zijn geen leestekst maar bijschrift: duur, groepsgrootte, thema.
     Die mogen onder de 16 px van de leesschaal, anders vult een rij labels
     een halve kaart en breekt hij over drie regels. */
  --su-tekst-label:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 → 13 px */

  /* Gewichten */
  --su-gewicht-regular:  400;
  --su-gewicht-medium:   500;
  --su-gewicht-semibold: 600;
  --su-gewicht-bold:     700;

  /* Regelafstand (line-height) per type */
  --su-lh-h1:    1.12;
  --su-lh-h2:    1.20;
  --su-lh-h3:    1.28;
  --su-lh-h4:    1.35;
  --su-lh-body:  1.2;
  --su-lh-klein: 1.3;
  --su-lh-knop:  1.20;

  /* Leesbreedte voor lopende tekst (rustig, niet te breed).
     UIT op verzoek: de cap gold voor elke p/ul/ol/blockquote op de pagina en
     raakte daarmee ook de chrome van WordPress en Divi. Zonder waarde vervalt
     'max-width: var(--su-leesbreedte)' overal, en loopt lopende tekst dus door
     tot de kolombreedte. Wie hem weer aanzet: de uitzondering voor de
     admin-balk en de menu's staat hieronder al klaar, dus dan blijft die balk
     goed. Op de huidige content knijpt hij alleen vier lijsten
     (tarieven- en voorwaardenpagina) van 800 naar 731px. */
/*  --su-leesbreedte: 70ch; */

  /* -------------------------------------------------------------------
     RUIMTE — spacing-schaal (ruime, gecontroleerde witruimte)
     ------------------------------------------------------------------- */
  --su-ruimte-3xs: 0.25rem;  /*  4px */
  --su-ruimte-2xs: 0.5rem;   /*  8px */
  --su-ruimte-xs:  0.75rem;  /* 12px */
  --su-ruimte-sm:  1rem;     /* 16px */
  --su-ruimte-md:  1.5rem;   /* 24px */
  --su-ruimte-lg:  2.5rem;   /* 40px */
  --su-ruimte-xl:  4rem;     /* 64px */
  --su-ruimte-2xl: 6rem;     /* 96px */

  /* Sectiepadding (verticale ademruimte tussen blokken) */
  --su-sectie-padding: clamp(3rem, 2rem + 5vw, 6rem);

  /* Maximale contentbreedte van de pagina */
  --su-container: 75rem; /* 1200px */
  --su-container-smal: 48rem; /* 768px — voor langere leesteksten */

  /* -------------------------------------------------------------------
     VORM — radius, randen, schaduw (subtiel, geen harde zakelijkheid)
     ------------------------------------------------------------------- */
  /* Afgestemd op de huidige live site: kaarten/afbeeldingen 10px,
     primaire knoppen volledig afgerond (pill, daar 50px ≈ pill). */
  --su-radius-sm:  6px;
  --su-radius-md:  10px;  /* standaard voor kaarten, velden, vlakken (= live site) */
  --su-radius-lg:  12px;  /* iets ruimer, optioneel voor grote panelen */
  --su-radius-pil: 999px; /* knoppen en badges */

  --su-rand-dikte: 1px;
  --su-rand-kleur: var(--su-rand-zacht);

  /* Schaduwen — licht en zacht, nooit hard/dramatisch */
  --su-schaduw-sm: 0 1px 2px rgba(22, 58, 99, 0.06),
                   0 1px 3px rgba(22, 58, 99, 0.08);
  --su-schaduw-md: 0 4px 12px rgba(22, 58, 99, 0.08),
                   0 2px 6px rgba(22, 58, 99, 0.06);
  --su-schaduw-lg: 0 12px 32px rgba(22, 58, 99, 0.10),
                   0 4px 12px rgba(22, 58, 99, 0.07);

  /* Focus-ring (toegankelijkheid — duidelijk zichtbaar) */
  --su-focus-ring: 0 0 0 3px var(--su-wit), 0 0 0 6px var(--su-blauw-krachtig);

  /* -------------------------------------------------------------------
     OVERIG
     ------------------------------------------------------------------- */
  --su-transitie: 160ms ease;
}

/* --- base.css --- */
/* =====================================================================
   Stadswandelingen Utrecht — Base / Foundation
   Reset, typografie, koppen, links, lopende tekst.
   Vereist: tokens.css (laad dit ervoor).

   Font laden (Source Sans 3) — kies één:
   1) Google Fonts in de <head>:
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700&display=swap" rel="stylesheet">
   2) Of zelf-gehost via @font-face (aanbevolen voor snelheid/privacy).
   College Semi wordt NIET als webfont geladen — alleen voor het logo (SVG).
   ===================================================================== */

/* ------- Reset (compact, modern) ------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--su-font-basis);
  font-size: var(--su-tekst-body);
  font-weight: var(--su-gewicht-regular);
  line-height: var(--su-lh-body);
  color: var(--su-kleur-tekst);
  background-color: var(--su-kleur-achtergrond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* ------- Koppen ------- */
h1, h2, h3, h4 {
  color: var(--su-kleur-tekst);
  text-wrap: balance; /* nette regelafbreking in koppen */
}

h1 {
  font-size: var(--su-tekst-h1);
  font-weight: var(--su-gewicht-bold);
  line-height: var(--su-lh-h1);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--su-tekst-h2);
  font-weight: var(--su-gewicht-bold);
  line-height: var(--su-lh-h2);
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--su-tekst-h3);
  font-weight: var(--su-gewicht-semibold);
  line-height: var(--su-lh-h3);
}

h4 {
  font-size: var(--su-tekst-h4);
  font-weight: var(--su-gewicht-semibold);
  line-height: var(--su-lh-h4);
}

/* ------- Lopende tekst ------- */
p, ul, ol, blockquote {
  max-width: var(--su-leesbreedte);
}

/* De leesbreedte geldt voor lopende tekst. In WordPress zijn de admin-balk en
   de menu's ook ul's: die kregen zo een kap van 70ch. In de zwarte balk paste
   daardoor niet alles op een regel en wrapten 'Bewerk met Divi' en het profiel-
   menu naar een tweede regel, die over de pagina-inhoud heen viel. Chrome dus
   uitzonderen; die lijsten zijn navigatie, geen leestekst.
   Slaapt zolang --su-leesbreedte hierboven uitstaat, en vangt het probleem op
   zodra die token weer een waarde krijgt. */
#wpadminbar ul, #wpadminbar ol,
#main-header ul, #main-header ol,
#top-header ul, #top-header ol,
#main-footer ul, #main-footer ol { max-width: none; }

p { margin-block: 0 var(--su-ruimte-sm); }

/* Verticaal ritme: ruimte tussen kop en volgende blok */
* + h2 { margin-block-start: var(--su-ruimte-xl); }
* + h3 { margin-block-start: var(--su-ruimte-lg); }
* + h4 { margin-block-start: var(--su-ruimte-md); }
h1 + *, h2 + *, h3 + *, h4 + * { margin-block-start: var(--su-ruimte-sm); }

/* ------- Links ------- */
a {
  color: var(--su-kleur-link);
  text-decoration-color: color-mix(in srgb, var(--su-kleur-link) 40%, transparent);
  text-underline-offset: 0.15em;
  transition: color var(--su-transitie), text-decoration-color var(--su-transitie);
}
a:hover { color: var(--su-kleur-link-hover); text-decoration-color: currentColor; }

/* ------- Tekstaccenten ------- */
strong, b { font-weight: var(--su-gewicht-semibold); }

small,
.su-klein {
  font-size: var(--su-tekst-klein);
  line-height: var(--su-lh-klein);
}

.su-label {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--su-gewicht-semibold);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--su-kleur-tekst-zacht);
  margin-block-end: var(--su-ruimte-3xs);
}
/* Subkop ('eyebrow') plakt direct boven de heading eronder */
.su-label + :is(h1, h2, h3, h4) { margin-block-start: 0; }

/* Merkzin / tagline — los te gebruiken, niet standaard onder het logo */
.su-merkzin {
  font-weight: var(--su-gewicht-semibold);
  color: var(--su-kleur-primair);
}

/* ------- Lijsten ------- */
ul, ol { padding-inline-start: 1.25em; }
li { margin-block: 0.25em; }
li::marker { color: var(--su-blauw-middel); }

/* ------- Citaat ------- */
blockquote {
  border-inline-start: 4px solid var(--su-blauw-lucht);
  padding-inline-start: var(--su-ruimte-md);
  color: var(--su-kleur-tekst-zacht);
  font-size: var(--su-tekst-h4);
  line-height: var(--su-lh-h4);
}

/* ------- Scheidingslijn ------- */
hr {
  border: none;
  border-top: var(--su-rand-dikte) solid var(--su-rand-kleur);
  margin-block: var(--su-ruimte-lg);
}

/* ------- Selectie & focus (toegankelijkheid) ------- */
::selection {
  background: var(--su-blauw-lucht);
  color: var(--su-blauw-tekst);
}

:focus-visible {
  outline: none;
  box-shadow: var(--su-focus-ring);
  border-radius: var(--su-radius-sm);
}

/* ------- Layout-helpers ------- */
.su-container {
  width: 100%;
  max-width: var(--su-container);
  margin-inline: auto;
  padding-inline: var(--su-ruimte-md);
}
.su-container--smal { max-width: var(--su-container-smal); }

.su-sectie { padding-block: var(--su-sectie-padding); }
.su-sectie--alt { background-color: var(--su-kleur-achtergrond-alt); } /* = ijsblauw */

/* ------- Sectie-achtergronden — blauwvarianten -------
   Wissel lichte en donkere banden af voor rust en ritme.
   Aanbevolen volgorde, bv.: wit → ijs → wit → lucht → krachtig → wit.
   Lichte banden (wit/ijs/lucht) houden de standaard tekstkleur (tekstblauw).
   Donkere banden (middel/krachtig) krijgen witte tekst.            */
.su-sectie--wit      { background-color: var(--su-wit); }
.su-sectie--ijs      { background-color: var(--su-blauw-ijs); }
.su-sectie--lucht    { background-color: var(--su-blauw-lucht); }
.su-sectie--middel   { background-color: var(--su-blauw-middel); }
.su-sectie--krachtig { background-color: var(--su-blauw-krachtig); }

/* Lucht is licht maar iets dieper: een subtiele scheidingslijn helpt. */
.su-sectie--lucht { box-shadow: inset 0 1px 0 rgba(22,58,99,.08), inset 0 -1px 0 rgba(22,58,99,.08); }

/* Diepte-effect: koppen lijken uit de blauwe achtergrond gesneden
   (platte 'letterpress'-schaduw onder de tekst, lichter dan de band). */
.su-sectie--ijs :is(h1, h2, h3, h4),
.su-sectie--ijs .su-label,
.su-sectie--lucht :is(h1, h2, h3, h4),
.su-sectie--lucht .su-label {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Donkere banden: witte tekst + aangepaste accenten voor leesbaarheid */
.su-sectie--middel,
.su-sectie--krachtig { color: var(--su-wit); }

.su-sectie--middel :is(h1, h2, h3, h4),
.su-sectie--krachtig :is(h1, h2, h3, h4) { color: var(--su-wit); }

.su-sectie--middel .su-label,
.su-sectie--krachtig .su-label,
.su-sectie--middel .su-merkzin,
.su-sectie--krachtig .su-merkzin { color: var(--su-blauw-lucht); }

/* Tekstlinks op donkere banden: luchtblauw i.p.v. krachtig blauw */
.su-sectie--middel a:not(.su-knop):not(.su-link-cta),
.su-sectie--krachtig a:not(.su-knop):not(.su-link-cta) { color: var(--su-blauw-lucht); }

.su-sectie--middel a:not(.su-knop):hover,
.su-sectie--krachtig a:not(.su-knop):hover { color: var(--su-wit); }

/* Op donkere banden geeft de witte knop (su-knop--op-donker) het beste contrast.
   Het ijsblauwe informatievlak (.su-vlak) blijft licht binnen een donkere band. */

/* Rustig informatievlak (ijsblauw) */
.su-vlak {
  background-color: var(--su-kleur-achtergrond-alt);
  border-radius: var(--su-radius-md);
  padding: var(--su-ruimte-lg);
}


/* ------- Landmark-patronen -------
   Subtiele repeating achtergrond met Utrechtse landmarks (Domtoren, trapgevel,
   bruggetje, bootje) over de bandkleur. Donkere variant voor lichte banden,
   lichte variant voor donkere banden. */
.su-patroon-donker, .su-patroon-licht { background-repeat: repeat; background-size: 480px auto; }
.su-patroon-donker { background-image: url(../images/patroon-landmarks-donker.svg); }
.su-patroon-licht  { background-image: url(../images/patroon-landmarks-licht.svg); }

/* --- components.css --- */
/* =====================================================================
   Stadswandelingen Utrecht — Componenten
   Knoppen, badges, kaarten, formulier-velden (Recras-stijlbasis).
   Vereist: tokens.css + base.css.
   ===================================================================== */

/* =====================================================================
   LOGO
   Plaatsing van het SVG-logo met een vaste, consequente hoogte.
   Stuur de grootte via de hoogte (het logo schaalt mee in breedte).
   Gebruik de blauwe variant op licht, de witte variant op donker.

   <a class="su-logo" href="/" aria-label="Stadswandelingen Utrecht, naar home">
     <img class="su-logo__img" src="images/stadswandelingen-utrecht-logo-blauw.svg"
          alt="Stadswandelingen Utrecht" width="720" height="251">
   </a>
   ===================================================================== */
.su-logo {
  display: inline-block;
  line-height: 0; /* geen extra ruimte onder de inline afbeelding */
}
.su-logo__img {
  display: block;
  width: auto;
  height: var(--su-logo-hoogte, 2.75rem); /* ~44px standaard, prettig in een header */
}
/* Maatvarianten */
.su-logo--klein { --su-logo-hoogte: 2rem; }    /* compacte/sticky header        */
.su-logo--groot { --su-logo-hoogte: 4.5rem; }  /* hero of footer                */

/* =====================================================================
   KNOPPEN
   Conform huisstijl: rustig, professioneel, consequent, goed zichtbaar.
   - Primair  = krachtig blauw (de "Vraag wandeling aan"-knop)
   - Secundair = outline in krachtig blauw
   - Subtiel  = zachte ijsblauwe knop voor minder nadruk
   ===================================================================== */
.su-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: var(--su-tekst-knop);
  font-weight: var(--su-gewicht-semibold);
  line-height: var(--su-lh-knop);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: 0.7em 1.5em;
  border-radius: var(--su-radius-pil);
  border: 2px solid transparent;
  transition: background-color var(--su-transitie),
              border-color var(--su-transitie),
              color var(--su-transitie),
              box-shadow var(--su-transitie),
              transform var(--su-transitie);
}
.su-knop:active { transform: translateY(1px); }

/* Primair — hoofd-CTA */
.su-knop--primair {
  background-color: var(--su-kleur-primair);
  color: var(--su-kleur-op-primair);
  box-shadow: var(--su-schaduw-sm);
}
.su-knop--primair:hover {
  background-color: var(--su-blauw-krachtig-hover);
  color: var(--su-wit);
  box-shadow: var(--su-schaduw-md);
}
.su-knop--primair:active { background-color: var(--su-blauw-krachtig-active); }

/* Secundair — outline */
.su-knop--secundair {
  background-color: transparent;
  color: var(--su-kleur-primair);
  border-color: var(--su-kleur-primair);
}
.su-knop--secundair:hover {
  background-color: var(--su-kleur-primair);
  color: var(--su-wit);
}

/* Subtiel — zacht ijsblauw, voor lagere nadruk */
.su-knop--subtiel {
  background-color: var(--su-blauw-ijs);
  color: var(--su-blauw-tekst);
  border-color: var(--su-rand-zacht);
}
.su-knop--subtiel:hover {
  background-color: var(--su-blauw-lucht);
  color: var(--su-blauw-tekst);
}

/* Op donkere/blauwe achtergrond (bv. in hero of footer) */
.su-knop--op-donker {
  background-color: var(--su-wit);
  color: var(--su-kleur-primair);
}
.su-knop--op-donker:hover {
  background-color: var(--su-blauw-ijs);
}

/* Maten */
.su-knop--groot { padding: 0.9em 2em; }
.su-knop--klein {
  padding: 0.5em 1.1em;
  font-size: var(--su-tekst-klein);
}

.su-knop:disabled,
.su-knop[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tekstlink-knop (call-to-action zonder vlak). Inline zodat 'ie meevloeit met de
   excerpt-tekst; white-space:nowrap houdt tekst + pijl als geheel bij elkaar
   (wipt netjes samen naar de volgende regel i.p.v. mid-link te breken). */
.su-link-cta {
  display: inline;
  white-space: nowrap;
  font-weight: var(--su-gewicht-semibold);
  color: var(--su-kleur-primair);
  text-decoration: none;
}
.su-link-cta:hover { color: var(--su-blauw-krachtig-active); }
.su-link-cta::after { content: "\00a0\2192"; display: inline-block; transition: transform var(--su-transitie); }
.su-link-cta:hover::after { transform: translateX(3px); }

/* =====================================================================
   BADGE / LABEL-CHIP
   Bv. taal, specialisatie, thema bij een wandeling.
   ===================================================================== */
.su-badge {
  display: inline-block;
  font-size: var(--su-tekst-label);
  font-weight: var(--su-gewicht-medium);
  line-height: 1.2;
  padding: 0.25em 0.6em;
  border-radius: var(--su-radius-pil);
  background-color: var(--su-blauw-ijs);
  color: var(--su-blauw-tekst);
  border: 1px solid var(--su-rand-zacht);
}
.su-badge--primair {
  background-color: var(--su-kleur-primair);
  color: var(--su-wit);
  border-color: transparent;
}

/* =====================================================================
   KAART — voor wandelingen, gidsen, blogs (tegels)
   ===================================================================== */
.su-kaart {
  display: flex;
  flex-direction: column;
  background-color: var(--su-wit);
  border: var(--su-rand-dikte) solid var(--su-rand-kleur);
  border-radius: var(--su-radius-md); /* 10px — gelijk aan de huidige site */
  overflow: hidden;
  box-shadow: var(--su-schaduw-sm);
  transition: box-shadow var(--su-transitie), transform var(--su-transitie);
}
.su-kaart:hover {
  box-shadow: var(--su-schaduw-md);
  transform: translateY(-2px);
}
.su-kaart__beeld {
  aspect-ratio: 3 / 2;       /* vast beeldformaat = rustige, gelijke uitsnedes */
  object-fit: cover;
  width: 100%;
}
.su-kaart__body {
  display: flex;
  flex-direction: column;
  gap: var(--su-ruimte-2xs);
  padding: var(--su-ruimte-md);
}
.su-kaart__body p { margin: 0; }
.su-kaart__footer {
  margin-top: auto;
  padding-top: var(--su-ruimte-sm);
}

/* Eenvoudig responsive raster voor kaarten */
.su-raster {
  display: grid;
  gap: var(--su-ruimte-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* =====================================================================
   FORMULIER-VELDEN — stijlbasis zodat het Recras-formulier
   visueel aansluit (Source Sans 3, tekstblauw, krachtig blauw knop).
   ===================================================================== */
.su-veld {
  display: flex;
  flex-direction: column;
  gap: var(--su-ruimte-3xs);
  margin-block-end: var(--su-ruimte-sm);
}
.su-veld__label {
  font-size: var(--su-tekst-klein);
  font-weight: var(--su-gewicht-semibold);
  color: var(--su-blauw-tekst);
}
.su-veld__label .su-verplicht { color: var(--su-blauw-krachtig); }

.su-input,
.su-textarea,
.su-select {
  width: 100%;
  font-size: var(--su-tekst-body);
  color: var(--su-blauw-tekst);
  background-color: var(--su-wit);
  padding: 0.6em 0.8em;
  border: var(--su-rand-dikte) solid var(--su-rand-zacht);
  border-radius: var(--su-radius-md);
  transition: border-color var(--su-transitie), box-shadow var(--su-transitie);
}
.su-input::placeholder,
.su-textarea::placeholder { color: var(--su-kleur-tekst-zacht); opacity: 0.7; }

.su-input:focus-visible,
.su-textarea:focus-visible,
.su-select:focus-visible {
  outline: none;
  border-color: var(--su-blauw-krachtig);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--su-blauw-krachtig) 22%, transparent);
}

.su-textarea { min-height: 7rem; resize: vertical; }

/* Foutmelding — rustig en helder (binnen de blauwtinten, geen schreeuwerig rood) */
.su-veld--fout .su-input,
.su-veld--fout .su-textarea,
.su-veld--fout .su-select {
  border-color: #b4452f; /* gedempt baksteenrood, alleen functioneel */
}
.su-veld__fout {
  font-size: var(--su-tekst-klein);
  color: #b4452f;
}

/* Bevestiging na verzending */
.su-melding {
  padding: var(--su-ruimte-md);
  border-radius: var(--su-radius-md);
  background-color: var(--su-blauw-ijs);
  border: 1px solid var(--su-rand-zacht);
  color: var(--su-blauw-tekst);
}

/* =====================================================================
   HULPKLASSEN
   ===================================================================== */
.su-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--su-blauw-krachtig);
  color: var(--su-wit);
  padding: var(--su-ruimte-2xs) var(--su-ruimte-sm);
  border-radius: 0 0 var(--su-radius-sm) 0;
  z-index: 100;
}
.su-skip-link:focus { left: 0; }

.su-visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.su-stack > * + * { margin-block-start: var(--su-ruimte-sm); }
.su-stack--ruim > * + * { margin-block-start: var(--su-ruimte-lg); }

.su-knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--su-ruimte-sm);
  align-items: center;
}

/* --- wireframe page-specifieke layout --- */

    /* =====================================================================
       PAGINA-SPECIFIEKE LAYOUT (wireframe)
       Alleen page-level opbouw die niet in de component-CSS zit:
       header, hero, footer, rasters. Alles op merk-tokens.
       ===================================================================== */

    /* ---- Wireframe-label (subtiel, rechtsboven) ---- */
    .wf-badge {
      position: fixed; top: .6rem; right: .6rem; z-index: 200;
      font-size: .75rem; font-weight: 600; letter-spacing: .04em;
      text-transform: uppercase;
      background: var(--su-blauw-tekst); color: var(--su-wit);
      padding: .3em .7em; border-radius: var(--su-radius-pil);
      opacity: .85;
    }

    /* ---- Placeholder-beeld (sfeerfoto's nog niet aangeleverd) ---- */
    .wf-ph {
      display: flex; align-items: center; justify-content: center;
      text-align: center;
      background:
        repeating-linear-gradient(135deg,
          color-mix(in srgb, var(--su-blauw-lucht) 55%, white) 0 14px,
          color-mix(in srgb, var(--su-blauw-ijs) 80%, white) 14px 28px);
      color: var(--su-kleur-tekst-zacht);
      font-size: var(--su-tekst-klein); font-weight: 600;
      letter-spacing: .03em;
    }
    .wf-ph span { padding: .5em 1em; }

    /* ---- Header ---- */
    .site-header {
      position: sticky; top: 0; z-index: 100;
      background: color-mix(in srgb, var(--su-wit) 90%, transparent);
      backdrop-filter: saturate(150%) blur(8px);
      border-bottom: 1px solid var(--su-rand-zacht);
    }
    .site-header__inner {
      display: flex; align-items: center; gap: var(--su-ruimte-md);
      min-height: 5.5rem;
    }
    /* Logo groter in de header (klantfeedback) */
    .site-header .su-logo__img { height: 3.75rem; }
    .site-nav { margin-inline-start: auto; }
    .site-nav ul {
      list-style: none; margin: 0; padding: 0;
      display: flex; gap: var(--su-ruimte-md); align-items: center;
    }
    .site-nav a {
      text-decoration: none; font-weight: var(--su-gewicht-semibold);
      color: var(--su-kleur-tekst); font-size: var(--su-tekst-klein);
    }
    .site-nav a:hover { color: var(--su-kleur-primair); }

    /* Hamburger (CSS-only, geen JS) */
    .nav-toggle, .nav-toggle-label { display: none; }
    @media (max-width: 60rem) {
      .nav-toggle-label {
        display: inline-flex; flex-direction: column; gap: 5px;
        margin-inline-start: auto; cursor: pointer; padding: .5rem;
      }
      .nav-toggle-label span {
        width: 26px; height: 2px; background: var(--su-kleur-tekst); display: block;
      }
      .site-nav {
        position: absolute; inset-inline: 0; top: 100%;
        background: var(--su-wit); border-bottom: 1px solid var(--su-rand-zacht);
        margin: 0; max-height: 0; overflow: hidden; transition: max-height .2s ease;
      }
      .site-nav ul {
        flex-direction: column; align-items: stretch; gap: 0;
        padding: var(--su-ruimte-sm) var(--su-ruimte-md);
      }
      .site-nav li { border-bottom: 1px solid var(--su-rand-zacht); }
      .site-nav a { display: block; padding: .8rem 0; font-size: var(--su-tekst-body); }
      .nav-toggle:checked ~ .site-nav { max-height: 22rem; }
    }

    /* ---- Hero ---- */
    .hero { position: relative; overflow: hidden; }
    .hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
    /* Geen blauwe overlay. Leesbaarheid via een neutraal donker kader op de tekst.
       Kader op containerbreedte -> tekst lijnt links uit met de overige secties. */
    .hero__inner {
      position: relative; z-index: 2;
      margin: 2rem auto;
      padding: 2rem;
      background: rgba(0, 0, 0, 0.4);
      border-radius: var(--su-radius-md);
      color: var(--su-wit);
    }
    .hero h1, .hero p { color: var(--su-wit); max-width: 100%; }
    .hero p { max-width: 46rem; }
    .hero .su-label { color: var(--su-wit); }
    .hero__buttons { margin-top: var(--su-ruimte-lg); }
    /* Wit logo in de hero, ~breedte van de tekst (2x groter, klantwens) */
    .hero__logo {
      display: block; width: auto;
      height: clamp(6rem, 3.2rem + 12vw, 11rem);
      margin: var(--su-ruimte-sm) 0 var(--su-ruimte-md);
      filter: drop-shadow(0 3px 16px rgba(22, 58, 99, .55));
    }

    /* ---- Sectie-kop ---- */
    .sectiekop { max-width: var(--su-container-smal); margin-bottom: var(--su-ruimte-lg); }
    .sectiekop p { color: var(--su-kleur-tekst-zacht); }
    .sectiekop--midden { margin-inline: auto; text-align: center; }

    /* ---- Tours: 2x2, landschap 16:9 (klantfeedback) ---- */
    .tour-raster {
      display: grid; gap: var(--su-ruimte-lg);
      grid-template-columns: repeat(2, 1fr);
    }
    @media (max-width: 36rem) { .tour-raster { grid-template-columns: 1fr; } }
    .tour-kaart { height: 100%; }
    .tour-kaart .su-kaart__beeld { aspect-ratio: 16 / 9; } /* landschap, minder dominant op desktop */
    .tour-kaart .wf-ph { aspect-ratio: 16 / 9; width: 100%; }
    .tour-kaart h3 { margin: 0; font-size: var(--su-tekst-h3); }

    /* Gelijke kaarthoogte -> CTA's ("Lees verder" / "Meer over deze tour")
       lijnen onderaan op dezelfde hoogte uit (su-kaart__footer heeft margin-top:auto) */
    .su-raster .su-kaart { height: 100%; }

    /* Blog: vaste 3-koloms band (i.p.v. auto-fill) voor een uitgebalanceerde rij */
    .blog-raster { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 60rem) { .blog-raster { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 40rem) { .blog-raster { grid-template-columns: 1fr; } }

    /* ---- Gidsen: beeld + tekst naast elkaar ---- */
    .split {
      display: grid; gap: var(--su-ruimte-xl); align-items: center;
      grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }
    .split .wf-ph { aspect-ratio: 4 / 3; border-radius: var(--su-radius-md); }
    .gids-portret { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--su-radius-md); box-shadow: var(--su-schaduw-md); }
    .thema-beeld { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--su-radius-md); box-shadow: var(--su-schaduw-md); }

    /* ---- Volledige-breedte sfeerband (extra beeldmoment, klantfeedback "meer beeld") ---- */
    .beeldband { position: relative; overflow: hidden; height: clamp(15rem, 26vw, 24rem); }
    .beeldband__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    /* ---- Tour-strook (categorie onder de foto, volledige breedte) ---- */
    .tour-strook {
      background: var(--su-blauw-krachtig); color: var(--su-wit);
      font-size: var(--su-tekst-klein); font-weight: var(--su-gewicht-semibold);
      text-transform: uppercase; letter-spacing: .06em;
      padding: .45em var(--su-ruimte-md);
      border-bottom: 1px solid var(--su-rand-zacht);
    }

    /* ---- Tarieven-balk (strak en verankerd) ---- */
    .tarief-balk {
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--su-ruimte-lg);
      background: var(--su-wit); border: 1px solid var(--su-rand-zacht);
      border-radius: var(--su-radius-md); box-shadow: var(--su-schaduw-sm);
      padding: var(--su-ruimte-lg) var(--su-ruimte-xl);
    }
    .tarief-balk__tekst > * { margin: 0; }
    .tarief-balk__titel { font-size: var(--su-tekst-h3); color: var(--su-blauw-krachtig); margin: .15em 0 .35em; }
    .tarief-balk .su-knop { flex-shrink: 0; }
    @media (max-width: 44rem) { .tarief-balk { flex-direction: column; align-items: flex-start; gap: var(--su-ruimte-md); } }

    /* ---- Kernzin: altijd op een eigen regel ---- */
    .su-kernzin { font-weight: var(--su-gewicht-semibold); color: var(--su-kleur-tekst); }

    /* Intro- en afsluitblok: even breed als de overige secties (su-container),
       lopende tekst 100% breed en links uitgelijnd (klantwens) */
    .tekst-breed p, .tekst-breed li { max-width: none; }

    /* ---- Praktische info ---- */
    .praktisch-raster {
      display: grid; gap: var(--su-ruimte-md);
      grid-template-columns: repeat(4, 1fr);
    }
    @media (max-width: 60rem) { .praktisch-raster { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 36rem) { .praktisch-raster { grid-template-columns: 1fr; } }
    .praktisch-item {
      background: var(--su-wit); border: 1px solid var(--su-rand-zacht);
      border-radius: var(--su-radius-md); padding: var(--su-ruimte-md);
    }
    .praktisch-item h4 { margin: 0 0 var(--su-ruimte-2xs); }
    .praktisch-item p { margin: 0; font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht); }

    /* ---- Reviews ---- */
    .review-raster {
      display: grid; gap: var(--su-ruimte-md);
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 52rem) { .review-raster { grid-template-columns: 1fr; } }
    .review {
      background: var(--su-wit);
      border: 1px solid var(--su-rand-zacht);
      border-radius: var(--su-radius-md); padding: var(--su-ruimte-lg);
      box-shadow: var(--su-schaduw-sm);
    }
    .review p { margin: 0 0 var(--su-ruimte-sm); }
    .review cite { font-style: normal; font-weight: 600; color: var(--su-kleur-tekst-zacht); }
    .review__sterren { color: #ffd166; letter-spacing: 2px; margin-bottom: var(--su-ruimte-2xs); }

    /* ---- Footer ---- */
    .site-footer {
      color: var(--su-wit);
      position: relative;
    }
    /* Logo: horizontaal gecentreerd, bovenaan het egale blauwe footervlak */
    .footer-logo {
      display: block; height: 4rem; width: auto;
      margin: 0 auto var(--su-ruimte-lg);
    }
    .site-footer a { color: var(--su-blauw-lucht); }
    .site-footer a:hover { color: var(--su-wit); }
    .footer-raster {
      display: grid; gap: var(--su-ruimte-xl);
      grid-template-columns: 1.4fr 1fr 1fr; align-items: start;
    }
    @media (max-width: 52rem) { .footer-raster { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 32rem) { .footer-raster { grid-template-columns: 1fr; } }
    .footer-raster h4 { color: var(--su-wit); margin-bottom: var(--su-ruimte-sm); }
    .footer-nav ul { list-style: none; margin: 0; padding: 0; }
    .footer-nav li { margin-block: .35rem; }
    /* Footermenu in witte tekst — leest beter (klantfeedback) */
    .footer-nav a { text-decoration: none; color: var(--su-wit); }
    .footer-nav a:hover { color: var(--su-wit); text-decoration: underline; }
    .footer-onder {
      border-top: 1px solid color-mix(in srgb, var(--su-wit) 18%, transparent);
      margin-top: var(--su-ruimte-xl); padding-top: var(--su-ruimte-md);
      display: flex; flex-wrap: wrap; gap: var(--su-ruimte-sm) var(--su-ruimte-md);
      justify-content: space-between; font-size: var(--su-tekst-klein);
      color: var(--su-blauw-lucht);
    }
  
/* --- Divi-shell neutralisatie: onze Divi section/row/column zijn onzichtbaar scaffold --- */
.sw-wire .wf-badge, .sw-wire .su-skip-link { display: none !important; }
/* Dubbele (Divi-thema) footer verbergen: de merk-footer staat in de content */
#main-footer { display: none !important; }
/* Menubalk: search-icoon altijd verbergen (klantwens) */
#et_top_search, #et_search_icon, li#et_top_search,
.et_search_form_container, #et_search_outer { display: none !important; }

/* Header-nav op merk (Source Sans 3, iets groter, tekstblauw) — alle items als normale link */
#top-menu li a { font-size: var(--su-tekst-klein) !important; color: var(--su-blauw-tekst) !important; font-weight: 600; }
#top-menu li a:hover { color: var(--su-blauw-krachtig) !important; }

/* =====================================================================
   BRIDGE — styleguide op Divi's eigen module-DOM.
   De layout is opgebouwd uit echte Divi-modules; de zichtbare styling
   (sectie-bg, kaart-look, hero-paneel, beeld-radius, footer) staat op de
   modules via de Divi Design-instellingen (decoration) en is dus in de
   Visual Builder bewerkbaar. Module-níveau su-classes renderen niet via
   REST, dus mappen we alleen wat CSS moet blijven op Divi's eigen classes
   (.et_pb_text, .et_pb_blurb) + de content-classes (renderen wél).
   ===================================================================== */

/* Lopende tekst op de styleguide-schaal (Divi forceert body 14px). Geen leesbreedte-cap:
   binnen de kolommen komt de tekst vanzelf goed uit (klantwens). */
.et_pb_text, .et_pb_text .et_pb_text_inner { font-size: var(--su-tekst-body); line-height: var(--su-lh-body); }
.et_pb_text p, .et_pb_text li, .su-sectie p, .et_pb_blurb_description p { max-width: none; }
.et_pb_text .su-klein, .et_pb_text small { font-size: var(--su-tekst-klein) !important; line-height: var(--su-lh-klein); }
.et_pb_text .su-label { font-size: 0.875rem !important; }

/* su-label tegen de bovenkant van de kop plakken. Divi 5 kolommen zijn FLEX met een
   row-gap (~30px) tussen modules; die gap (geen marge) veroorzaakt de ruimte, dus
   trekken we de kop met een negatieve marge omhoog tot vlak onder het label. */
.et_pb_text:has(.su-label) .su-label { margin-bottom: 0 !important; }
.et_pb_text:has(.su-label) + .et_pb_heading { margin-top: -26px !important; }

/* Kaart = divi/blurb (zonder titel): beeld FLUSH tegen de blauwe balk, dan gepadde body.
   Hover-lift zoals in de wireframe (.su-kaart:hover). */
.et_pb_blurb { overflow: hidden; text-align: left; transition: transform 160ms ease, box-shadow 160ms ease; }
.et_pb_blurb:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(22,58,99,.16), 0 5px 14px rgba(22,58,99,.10); }
/* blurb-content is flex met 30px gap -> beeld staat los van de balk; gap weg = flush */
.et_pb_blurb .et_pb_blurb_content { max-width: none; gap: 0 !important; }
.et_pb_blurb .et_pb_main_blurb_image { margin: 0 !important; padding: 0 !important; line-height: 0; font-size: 0; }
.et_pb_blurb .et_pb_main_blurb_image img { width: 100%; display: block; vertical-align: bottom; margin: 0 !important; }
/* Vaste beeldverhouding. De aspectRatio in de module-attributen wordt niet
   toegepast, waardoor kaarten met een 3:2- of 4:3-foto hoger uitvielen dan die
   met 16:9 en de rij als een trap ging lopen. */
.et_pb_blurb .et_pb_main_blurb_image img { aspect-ratio: 16 / 9; object-fit: cover; }
/* Een gezicht vraagt om een ander kader dan een straat: op de gidsenpagina
   staan vierkante portretten, die in 16:9 hun kruin verloren. Scopen op de
   paginaklasse uit body-class.php, want Divi geeft de losse module geen klasse. */
.pagina-stadsgids .et_pb_blurb .et_pb_main_blurb_image img { aspect-ratio: 1 / 1; }

/* Functieomschrijving in de teamkaarten: 'geschiedenisliefhebber' past niet in
   een kolom van 190px en brak midden in het woord af. Afbreken op lettergrepen
   (de pagina is nl-NL) leest wel. */
.pagina-stadsgids .et_pb_blurb_description { hyphens: auto; }
/* Compacte profielkaart: naam en functie horen bij elkaar, dus dicht op elkaar.
   Hier stond een min-height van twee regels zodat de functies over de kaarten
   uitlijnden. Dat kostte 40px lege ruimte per kaart en zette de functie los van
   de naam; de kaarten zijn even hoog dankzij height:100%, dus die uitlijning is
   het niet waard. */
.pagina-stadsgids .et_pb_blurb .et_pb_module_header {
  margin-bottom: 6px;
  padding-bottom: 0;
  /* Kleiner dan de standaard kaarttitel: bij 22px viel 'Giovanna Camerani' op
     twee regels, en omdat de kaarten even hoog zijn trok die ene naam de hele
     rij 30px omhoog. Nu passen alle zeven namen op een regel. */
  font-size: 1.125rem;
  line-height: 1.3;
}
.pagina-stadsgids .et_pb_blurb_description { margin-top: 0; }
/* Divi zet 16px onder de laatste alinea. In een kaart die op de functie eindigt
   is dat loze ruimte boven de onderrand. */
.pagina-stadsgids .et_pb_blurb_description p:last-child { margin-bottom: 0; }
.pagina-stadsgids .et_pb_blurb { padding-bottom: 18px !important; }

/* Terug naar het team, onderaan elk gidsprofiel. Bewust een tekstlink en geen
   knop: de knoppen op deze pagina gaan naar de wandelingen en het
   aanvraagformulier, en die moeten opvallender blijven dan een sprong binnen
   dezelfde pagina. */
.su-terug { margin-top: var(--su-ruimte-lg); }
.su-terug a {
  color: var(--su-blauw-krachtig);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.su-terug a::before { content: '\2191  '; }
.su-terug a:hover { color: var(--su-blauw-tekst); }

/* Teamkaarten op telefoon: portret links, naam en functie ernaast. Als staande
   kaart vulde elke gids ruim een half scherm en was het team pas na 4,4 schermen
   compleet; zo staat het hele team binnen een scherm of anderhalf en kun je
   kiezen in plaats van scrollen. */
@media (max-width: 767px) {
  .pagina-stadsgids .et_pb_blurb .et_pb_blurb_content {
    flex-direction: row;
    align-items: stretch;
  }
  .pagina-stadsgids .et_pb_blurb .et_pb_main_blurb_image { flex: 0 0 108px; }
  /* Portret over de volle kaarthoogte, vlak tegen de linkerrand. Los van de
     kaartrand zwevend leest het als een fout in de opmaak. */
  .pagina-stadsgids .et_pb_blurb .et_pb_main_blurb_image > a,
  .pagina-stadsgids .et_pb_blurb .et_pb_image_wrap { display: block; height: 100%; }
  .pagina-stadsgids .et_pb_blurb .et_pb_main_blurb_image img {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 10px 0 0 10px;
  }
  .pagina-stadsgids .et_pb_blurb { padding-bottom: 0 !important; }
  .pagina-stadsgids .et_pb_blurb .et_pb_blurb_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 18px !important;
  }
}

/* Een sectie waar naartoe gesprongen wordt, moet onder de vaste kopbalk
   uitkomen; zonder deze marge verdwijnt de kop erachter. */
.et_pb_section[id] { scroll-margin-top: 130px; }

/* Gidsprofielen: de naamkaart loopt mee tijdens het lezen. Sommige profielen
   zijn duizend woorden lang; een portret van 315px liet daaronder anders meters
   wit achter naast de tekstkolom. Vanaf 768px, want dat is de grens waarop Divi
   de kolommen naast elkaar zet; daaronder staan ze gestapeld en heeft meelopen
   geen betekenis. */
@media (min-width: 768px) {
  .pagina-stadsgids .et_flex_column_8_24 {
    position: sticky;
    top: 130px;          /* onder de vaste balk met logo en menu */
    align-self: flex-start;
  }
}
/* Kaarten in een rij even hoog, zodat de randen uitlijnen ook als de ene tekst
   langer is dan de andere. */
.et_pb_column > .et_pb_blurb { height: 100%; }
/* Marge op nul, maar wel binnenruimte voor kop en tekst. Stond eerst op
   padding 0: de homepage-kaarten kregen hun ruimte uit een
   .sh-card-body-wrapper in de content-HTML, een restant van de tijd dat
   de kaarten in Code-modules stonden. Kaarten die nu uit echte
   blurb-velden komen hebben die wrapper niet en stonden daardoor tegen
   de rand. Waar de oude wrapper nog staat blijft de padding nul. */
.et_pb_blurb .et_pb_blurb_container { margin: 0 !important; padding: 16px 24px 0 !important; }
.et_pb_blurb .et_pb_blurb_container:has(.sh-card-body) { padding: 0 !important; }
.et_pb_blurb .et_pb_blurb_description { padding: 0 !important; font-size: var(--su-tekst-klein); }
.et_pb_blurb .et_pb_blurb_description > *:first-child { margin-top: 0 !important; }

/* Blauwe balk onder het beeld — categorie (tour-strook) én kaart-titel (sh-strook-titel) */
.tour-strook { display: block; background: var(--su-blauw-krachtig); color: #fff !important;
  letter-spacing: .06em; font-weight: 600; font-size: var(--su-tekst-klein) !important; text-transform: uppercase;
  line-height: 1.3; padding: .5em var(--su-ruimte-md); margin: 0; }
.sh-strook-titel { text-transform: none; letter-spacing: normal; font-size: calc(var(--su-tekst-h4) * 0.8) !important; line-height: 1.25; }
.sh-card-body { padding: var(--su-ruimte-md); display: flex; flex-direction: column; gap: .6rem; }
.sh-card-body h3, .sh-card-titel { margin: 0; color: var(--su-blauw-tekst); font-size: var(--su-tekst-h3); }
.sh-card-body p { margin: 0; }

/* Reviews (content-classes) */
.review__sterren { color: #ffd166; letter-spacing: 2px; margin-bottom: var(--su-ruimte-2xs); font-size: 1.2rem; }
cite { font-style: normal; font-weight: 600; color: var(--su-kleur-tekst-zacht); }

/* Knop-hover: vullen met krachtig-blauw + witte tekst + subtiele lift (fill zoals de
   wireframe; de decoration-hover rendert niet via REST, dus doen we het hier). */
.et_pb_button { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.et_pb_button:hover {
  background-color: var(--su-blauw-krachtig) !important; color: #fff !important;
  border-color: var(--su-blauw-krachtig) !important; transform: translateY(-1px); box-shadow: var(--su-schaduw-md);
}
/* Witte hero-knop ("Bekijk de wandelingen") houdt een witte hover (+ Divi's pijltje) */
.et_pb_button_0:hover {
  background-color: #fff !important; color: var(--su-blauw-tekst) !important; border-color: #fff !important;
}

/* Letterpress-doordruk op de sectiekoppen/labels van de licht-blauwe banden
   (ijs = tours/praktisch, lucht = thema/reviews). Wireframe: .su-sectie--ijs/lucht.
   Alleen de sectie-heading-modules + labels; de kaart-titels (in blurbs) blijven vrij. */
.et_pb_section_2 .et_pb_heading .et_pb_module_header, .et_pb_section_2 .su-label,
.et_pb_section_4 .et_pb_heading .et_pb_module_header, .et_pb_section_4 .su-label,
.et_pb_section_6 .et_pb_heading .et_pb_module_header, .et_pb_section_6 .su-label,
.et_pb_section_7 .et_pb_heading .et_pb_module_header, .et_pb_section_7 .su-label {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* Losse foto's — afgeronde hoeken (split-portret / themabeeld) */
img[alt="Willemijn Banki, stadsgids"], img[alt="Verlichte terrassen in de avond"] { border-radius: var(--su-radius-md); }

/* De oude in-content footer-hack op de laatste sectie is VERVALLEN: de footer is nu
   een globale Divi Theme Builder-footer (.et-l--footer). De vorige regels maakten de
   laatste sectie van élke pagina wit (witte FAQ-koppen, onzichtbare outline-knop). */

/* ---------------------------------------------------------------------
   DIEPERE PAGINA'S — bewuste afwijkingen van de v1-ontwerpen (klantfeedback).
   De VOLLEDIGE styleguide (typografie, ritme, kaarten, strook, hero) staat
   gescoped in pages.css; hier alleen de gevraagde overrides. -------------- */

/* Gidsportretten: profielformaat (1:1) i.p.v. het te hoge 4:5. */
.et_pb_code_inner .su-gids__portret { aspect-ratio: 1 / 1; }

/* Uitgelichte CTA (direct in een .su-stack, bv. 'Vraag een wandeling met Willemijn
   aan') was een tekstlink en viel weg. Nu een knop zodat hij opvalt. De 'Lees meer'-
   links in kaarten (.su-kaart__footer) blijven tekstlinks. */
.et_pb_code_inner .su-stack > a.su-link-cta {
  align-self: flex-start;
  margin-top: var(--su-ruimte-sm);
  background: var(--su-kleur-primair);
  color: var(--su-kleur-op-primair);
  padding: 0.7em 1.5em;
  border-radius: var(--su-radius-pil);
  font-weight: var(--su-gewicht-semibold);
  text-decoration: none;
  box-shadow: var(--su-schaduw-sm);
}
.et_pb_code_inner .su-stack > a.su-link-cta:hover {
  background: var(--su-blauw-krachtig-hover);
  color: var(--su-wit);
}

/* Anchor-navigatie (one-pager): zacht scrollen naar secties, met offset zodat
   de doelsectie niet onder de vaste header (#main-header, ~80px) verdwijnt.
   De id's worden client-side gezet (zie includes/general/anchor-nav.php). */
html { scroll-behavior: smooth; }
#wandelingen, #gidsen, #blog, #tarieven, #contact { scroll-margin-top: 96px; }

/* =====================================================================
   Mobiel menu (wireframe-stijl): witte dropdown onder de header,
   gestapelde items met scheidingslijnen, merk-tekstblauw + gekleurde
   hamburger. Vervangt Divi's default mobiele menu-styling.
   ===================================================================== */
#main-header .mobile_menu_bar:before,
#et_mobile_nav_menu .mobile_menu_bar:before { color: var(--su-blauw-tekst) !important; }
#main-header .et_mobile_menu {
  background-color: var(--su-wit);
  border-top: 3px solid var(--su-blauw-krachtig);
  box-shadow: var(--su-schaduw-md);
  /* Lucht boven en onder de menu-items; zonder de scheidingslijnen tussen de
     items voelde het uitgeklapte menu krap. 3rem = 48px (hele pixels). */
  padding: 3rem 0;
  /* Volle pagina-breedte i.p.v. de header-containerbreedte */
  left: 50%; right: auto; margin-left: -50vw; width: 100vw;
  /* Het menu is een <ul> en liep daardoor tegen de leesbreedte-cap van
     `p, ul, ol, blockquote` aan. Op telefoons viel dat niet op (100vw is daar
     smaller dan de cap), maar zodra de hamburger breder in beeld komt knijpt
     die cap het menu af. Hier expliciet vrijgeven. */
  max-width: none;
}
#main-header .et_mobile_menu li { margin: 0; }
/* Geen scheidingslijnen tússen de items (klantfeedback): alleen de blauwe rand
   bovenaan het menu blijft. De hover-vulling geeft genoeg houvast. */
#main-header .et_mobile_menu li a {
  color: var(--su-blauw-tekst) !important;
  font-family: "Source Sans 3", Arial, system-ui, sans-serif;
  font-size: var(--su-tekst-body); font-weight: 600;
  padding: 14px var(--su-ruimte-md);
  border-bottom: 0;
  opacity: 1;
}
#main-header .et_mobile_menu li a:hover { color: var(--su-blauw-krachtig) !important; background: var(--su-blauw-ijs); }
/* Submenu-items iets ingesprongen */
#main-header .et_mobile_menu .menu-item-has-children > a { font-weight: 700; }
#main-header .et_mobile_menu ul.sub-menu li a { padding-left: calc(var(--su-ruimte-md) * 1.6); font-weight: 400; }

/* =====================================================================
   Topbar (klantfeedback): dunne, rustige balk bóven het hoofdmenu met
   telefoon, e-mail en de social icons. Willemijn wilde de icons niet in
   het headermenu maar wél standaard in beeld; deze balk hangt in Divi's
   eigen #top-header, zodat Divi de fixed-header-hoogte zelf blijft
   berekenen (#page-container padding-top).

   Vlak is ijsblauw: tekstblauw (#163A63) mag per huisstijl nooit als vlak.
   Telefoon/e-mail/icons zijn in Theme Options te wijzigen; de icon-set komt
   uit includes/social_icons-header.php (Divi kent geen WhatsApp/YouTube).
   ===================================================================== */
#top-header {
  background-color: var(--su-blauw-ijs) !important;
  border-bottom: 1px solid var(--su-rand-zacht);
  line-height: 1;
  font-size: .8125rem;   /* = 13px */
}
#top-header,
#top-header a,
#top-header #et-info-phone,
#top-header #et-info-email { color: var(--su-blauw-tekst) !important; font-size: .8125rem; }
#top-header .container {
  /* rem (schaalt mee), maar wél op een hele pixel: .5rem = 8px.
     Vermijd waarden als .4rem — die worden 6.4px en geven subpixel-randen. */
  padding-top: var(--su-ruimte-2xs) !important; padding-bottom: var(--su-ruimte-2xs) !important;
  display: flex; align-items: center; justify-content: space-between; gap: var(--su-ruimte-md);
}
/* Divi's .container is een clearfix; als flex-container worden die :before/:after
   zélf flex-items en eten ze de ruimte op, waardoor space-between de icons naar
   het midden duwt in plaats van naar rechts. */
#top-header .container:before,
#top-header .container:after { content: none; display: none; }
/* Divi geeft #et-info een padding-bottom (~9.75px). Daardoor is dat blok hoger
   dan zijn tekst en wordt telefoon/e-mail naar boven geduwd: méér lucht onder
   dan boven. Padding hier nulstellen, dan doet align-items:center zijn werk en
   staan tekst én icons gelijk gecentreerd. */
#top-header #et-info,
#top-header #et-secondary-menu {
  float: none; margin: 0; padding: 0;
  display: flex; align-items: center;
}
#top-header a:hover { color: var(--su-blauw-krachtig) !important; }

/* Telefoon en e-mail iets uit elkaar; Divi's eigen glyphs blijven staan. */
#top-header #et-info-phone { margin-right: var(--su-ruimte-md); }

/* Divi rendert de icons twee keer: één set in #et-info (links, naast telefoon/
   e-mail) en een duplicaat in #et-secondary-menu. Wij willen ze rechts, dus
   draaien we dat om: links de contactgegevens, rechts de icons.

   Alleen op desktop! Divi verbergt #et-secondary-menu onder 980px — juist
   daarom bestaat dat duplicaat. Zonder deze media query verdwijnen de icons
   op mobiel volledig, terwijl WhatsApp daar het hardst nodig is. */
@media (min-width: 981px) {
  #top-header #et-info .su-social-icons { display: none; }
  #top-header .et_duplicate_social_icons { display: block !important; }
}

/* Social icons: inline SVG's (geen Divi icon-font), rechts uitgelijnd. */
#top-header .su-social-icons { display: flex; gap: .875rem;   /* = 14px */ align-items: center; margin: 0; padding: 0; }
#top-header .su-social-icon { margin: 0; list-style: none; }
#top-header .su-social-icon a.icon {
  display: flex; align-items: center; justify-content: center;
  width: 1.125rem; height: 1.125rem;   /* = 18px */
}
#top-header .su-social-icon a.icon:before { content: none; } /* Divi's icon-font uitschakelen */
#top-header .su-social-icon svg {
  width: 100%; height: 100%; display: block;
  fill: var(--su-blauw-tekst); transition: fill .15s ease;
}
#top-header .su-social-icon a.icon:hover svg { fill: var(--su-blauw-krachtig); }
#top-header .su-social-icon a.icon:focus-visible { outline: 2px solid var(--su-blauw-krachtig); outline-offset: 3px; }

/* Op smalle schermen alleen de icons: telefoon + e-mail vreten daar te veel
   breedte. Bellen/mailen kan nog via de footer en de contactpagina. */
@media (max-width: 40rem) {
  #top-header #et-info-phone,
  #top-header #et-info-email { display: none; }
  #top-header #et-info { float: none; text-align: center; }
  #top-header .su-social-icons { justify-content: center; }
}

/* =====================================================================
   Hamburgermenu op álle devices (klantfeedback): variant waarbij het
   uitgeklapte hoofdmenu plaatsmaakt voor alleen het hamburger-icoon, ook
   op desktop. Divi toont #top-menu-nav boven 980px en #et_mobile_nav_menu
   daaronder; hier draaien we dat om voor alle breedtes.
   ===================================================================== */
#et-top-navigation #top-menu-nav { display: none !important; }
#et-top-navigation #et_mobile_nav_menu { display: block !important; float: right; }
/* Divi hangt de menu-padding aan de desktop-nav; zonder #top-menu-nav valt
   die weg, dus de hamburger zelf krijgt de ademruimte. */
#et-top-navigation { padding-left: 0 !important; }
#et_mobile_nav_menu .mobile_nav { background: transparent !important; }

/* Het menu is volle vensterbreedte, maar de labels moeten op de tekstlijn van
   het logo staan i.p.v. tegen de vensterrand. Divi's .container is 80% breed
   met een max van 1080px, dus dezelfde marge naboosten. */
@media (min-width: 981px) {
  #main-header .et_mobile_menu li a {
    padding-left: max(10vw, calc((100vw - 1080px) / 2));
    padding-right: max(10vw, calc((100vw - 1080px) / 2));
  }
}

/* =====================================================================
   DIEPERE PAGINA'S (v1) — patronen uit static/ontwerpen-v1/paginaframe.css,
   geport voor de Divi-layouts (code-modules gebruiken exact deze classes).
   Alleen wat nog NIET in dit bestand stond; 16:9 bewust gescoped op de
   raster-varianten zodat de homepage-kaarten hun 3:2 houden.
   ===================================================================== */

/* Pagina-hero: compacter dan de homepage-hero. Foto op volle sterkte, geen
   blauwe waas; leesbaarheid via een neutraal donker kader achter de tekst. */
.su-paginahero { position: relative; overflow: hidden;
  min-height: clamp(14rem, 22vw, 19rem); display: flex; align-items: flex-end; }
.su-paginahero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.su-paginahero__binnen { position: relative; z-index: 1; padding-block: var(--su-ruimte-xl); }
.su-paginahero__kader { background: rgba(0,0,0,.45); padding: var(--su-ruimte-lg);
  border-radius: var(--su-radius-md); max-width: 46rem; }
.su-paginahero h1 { color: var(--su-wit); }
.su-paginahero .su-label { color: var(--su-blauw-lucht); }
.su-paginahero p { color: var(--su-wit); margin-bottom: 0; }

/* Pagina-hero, native variant: GEEN CSS-regels hier.
   Divi 5 rendert htmlAttributes.class niet naar de frontend, net zomin als de
   CSS-ID (zie anchor-nav.php). Een geporteerde su-klasse op moduleniveau doet
   dus niets, en een regel als .su-paginahero--native zou dode CSS zijn.

   De native hero haalt zijn opmaak volledig uit Divi's eigen decoration:
   achtergrondfoto op de sectie, kader (kleur, padding, radius) op de kolom,
   tekstkleur per module. Alleen de su-klassen BINNEN de module-HTML werken wel,
   want die staan gewoon in de content; waar die met de gewenste kleur botsen
   (zoals .su-label) zet de homepage er een inline style bij. */

/* Kruimelpad bovenaan de eerste contentsectie (niet in de hero: leest slecht op foto) */
.su-kruimels { font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht);
  margin-bottom: var(--su-ruimte-lg); }
.su-kruimels a { color: var(--su-kleur-tekst-zacht); }
.su-kruimels a:hover { color: var(--su-blauw-krachtig); }

/* Meta-regel op kaarten (duur / groepsgrootte / plek) */
/* Row-gap klein houden: in een smalle kaart breekt deze regel af, en met de
   volle gap kwam de tweede regel los van de eerste te hangen. */
.su-meta { display: flex; flex-wrap: wrap;
  column-gap: var(--su-ruimte-sm); row-gap: 0;
  font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht); }
/* Scheidingsteken achter het item, niet ervoor: in een smalle kaart breekt de
   regel af en dan begon de tweede regel met een losse punt. */
.su-meta span:not(:last-child)::after { content: " \00b7"; }

/* Raster-kolomvarianten (basis .su-raster staat al hoger in dit bestand) */
.su-raster--2 { grid-template-columns: repeat(2, 1fr); }
.su-raster--3 { grid-template-columns: repeat(3, 1fr); }
.su-raster--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 60rem) { .su-raster--3, .su-raster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .su-raster--2, .su-raster--3, .su-raster--4 { grid-template-columns: 1fr; } }

/* Op de diepere pagina's is het kaartbeeld liggend 16:9 (homepage blijft 3:2) */
.su-raster--2 .su-kaart__beeld,
.su-raster--3 .su-kaart__beeld,
.su-raster--4 .su-kaart__beeld { aspect-ratio: 16 / 9; }

/* Laatste sectie vóór de footer.
   Reserveerde 18,2vw voor de skyline die uit de footer omhoog kwam. Die is er
   op verzoek van de klant uit; de klasse blijft bestaan omdat tien pagina's
   hem dragen, maar houdt nu gewoon de sectiepadding aan. */
.su-sectie--voor-footer { padding-bottom: var(--su-sectie-padding); }

/* =====================================================================
   PAGINA-SPECIFIEKE CSS
   Stond tot 2 september 2026 in <style>-blokken binnen de Code-modules van
   de pagina's zelf. Die Code-modules worden vervangen door native modules,
   omdat een klant er in de builder niets mee kan. De CSS hoort hier: in het
   child-thema, versiebeheerd en bestand tegen Divi-updates.
   ===================================================================== */

/* ===== Detailpagina wandeling (was inline in de Code-modules van pagina 114) ===== */
/* Detail: tekstkolom + zijkolom met de praktische gegevens.
 Zijkolom plakt mee bij het scrollen, zodat de aanvraagknop in beeld blijft. */
.su-detail { display: grid; gap: var(--su-ruimte-xl); grid-template-columns: 1.6fr 1fr; align-items: start; }
@media (max-width: 60rem) { .su-detail { grid-template-columns: 1fr; } }
.su-zijkaart { position: sticky; top: 6rem; }
@media (max-width: 60rem) { .su-zijkaart { position: static; } }
.su-gegevens { list-style: none; margin: 0; padding: 0; }
.su-gegevens li { display: flex; justify-content: space-between; gap: var(--su-ruimte-sm);
padding: .6rem 0; border-bottom: 1px solid var(--su-rand-zacht); font-size: var(--su-tekst-klein); }
.su-gegevens li:last-child { border-bottom: 0; }
.su-gegevens dt, .su-gegevens .su-label-inline { color: var(--su-kleur-tekst-zacht); }
.su-gegevens strong { color: var(--su-blauw-tekst); text-align: right; }
/* Eén breed beeld over de volle tekstkolom. Drie foto's naast elkaar in deze
 smalle kolom werden postzegels van ~110px en voegden niets toe. */
.su-beeld { margin: 0; }
.su-beeld img { width: 100%; aspect-ratio: 16/9; object-fit: cover;
border-radius: var(--su-radius-md); display: block; }
.su-beeld figcaption { font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht); margin-top: .5rem; }

/* ===== Tarieven en informatie (was inline in de Code-modules van pagina 117) ===== */
/* Tekstpagina: één smalle leeskolom + inhoudsopgave die meeloopt.
 Bewust rustig — dit zijn juridische en informatieve pagina's. */
.su-tekstpagina { display: grid; gap: var(--su-ruimte-xl); grid-template-columns: 16rem 1fr; align-items: start; }
@media (max-width: 60rem) { .su-tekstpagina { grid-template-columns: 1fr; } }
.su-inhoud { position: sticky; top: 6rem; }
@media (max-width: 60rem) { .su-inhoud { position: static; } }
.su-inhoud ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--su-rand-zacht); }
.su-inhoud li a { display: block; padding: .45rem var(--su-ruimte-sm); font-size: var(--su-tekst-klein);
color: var(--su-kleur-tekst-zacht); text-decoration: none; }
.su-inhoud li a:hover, .su-inhoud li a[aria-current="true"] {
color: var(--su-blauw-krachtig); box-shadow: inset 2px 0 0 var(--su-blauw-krachtig); }
.su-leestekst > * + * { margin-top: var(--su-ruimte-md); }
.su-leestekst h2 { margin-top: var(--su-ruimte-xl); }
.su-leestekst h2:first-child { margin-top: 0; }
/* Prijskaarten — volgt Divi's PricingTables (er is geen tabel-module) */
.su-prijskaarten { display: grid; gap: var(--su-ruimte-md); grid-template-columns: repeat(3, 1fr); align-items: stretch; }
@media (max-width: 60rem) { .su-prijskaarten { grid-template-columns: 1fr; } }
.su-prijs { display: flex; flex-direction: column; gap: var(--su-ruimte-sm);
background: var(--su-wit); border: 1px solid var(--su-rand-zacht);
border-radius: var(--su-radius-md); padding: var(--su-ruimte-md); box-shadow: var(--su-schaduw-sm); }
.su-prijs h3 { margin: 0; font-size: var(--su-tekst-h4); }
.su-prijs__sub { font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht); margin: 0; }
.su-prijs__bedrag { font-size: var(--su-tekst-h4); font-weight: 700; color: var(--su-blauw-krachtig); margin: 0; }
.su-prijs__bedrag span { display: block; font-size: var(--su-tekst-klein); font-weight: 400; color: var(--su-kleur-tekst-zacht); }
.su-prijs__lijst { list-style: none; margin: 0; padding: 0; font-size: var(--su-tekst-klein); }
.su-prijs__lijst li { display: flex; gap: .5rem; margin-block: .4rem; }
.su-prijs__lijst li::before { content: "✓"; color: var(--su-blauw-krachtig); font-weight: 700; }
.su-prijs .su-knop { margin-top: auto; align-self: flex-start; }

/* ===== Blogoverzicht (was inline in de Code-modules van pagina 118) ===== */
/* Uitgelicht artikel: breed, twee kolommen. Daaronder het gewone raster. */
.su-uitgelicht { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; }
@media (max-width: 60rem) { .su-uitgelicht { grid-template-columns: 1fr; } }
.su-uitgelicht img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; display: block; }
.su-uitgelicht__body { padding: var(--su-ruimte-xl); display: flex; flex-direction: column; gap: var(--su-ruimte-sm); justify-content: center; }
.su-datum { font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht); }
.su-paginering { display: flex; gap: .4rem; justify-content: center; align-items: center; }
.su-paginering a, .su-paginering span {
min-width: 2.5rem; text-align: center; padding: .5rem .6rem; border-radius: var(--su-radius-sm);
text-decoration: none; color: var(--su-blauw-krachtig); font-weight: 600; }
.su-paginering .actief { background: var(--su-blauw-krachtig); color: var(--su-wit); }

/* ===== Gidsen (was inline in de Code-modules van pagina 120) ===== */
/* Gidsen stellen zich voor. Portret staand (4:5) i.p.v. het liggende 16:9
 van de wandelkaarten: een mens vraagt om een ander kader dan een straat. */
.su-gids__portret { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
/* Leeg portret: een willekeurige stadsfoto op een gidskaart leest als een fout,
 niet als een placeholder. Liever eerlijk laten zien dat het beeld ontbreekt. */
.su-gids__portret--leeg { display: flex; align-items: center; justify-content: center;
background: var(--su-blauw-ijs); border-bottom: 1px solid var(--su-rand-zacht); }
.su-gids__portret--leeg span { font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht); }
.su-citaat { font-size: var(--su-tekst-h4); color: var(--su-blauw-tekst); font-style: italic; }
/* Labelrij: ruimte eronder, want er volgt altijd lopende tekst. Zonder die
   marge plakt de omschrijving tegen de labels aan. */
.su-tags { display: flex; flex-wrap: wrap; gap: .25rem;
  margin-block-end: var(--su-ruimte-sm); }

/* =====================================================================
   BLOGARTIKEL — Theme Builder body-layout (sjabloon 292, layout 291)
   Het ontwerp stond eerst als losse pagina (119) met een verzonnen
   voorbeeldartikel erin; de echte artikelen vielen terug op het kale
   themasjabloon. Deze regels geven de body-layout dezelfde opmaak.
   Divi 5 rendert geen eigen klassen per module, dus we haken aan de
   klassen die Divi zelf genereert: ..._tb_body.
   ===================================================================== */

/* Hero: uitgelichte afbeelding als achtergrond, met een donkere laag zodat
   de titel leesbaar blijft op elke foto. Zonder die laag verdwijnt hij in
   een lichte lucht of een drukke gevel. */
.et_pb_section_0_tb_body { padding: 0 !important; }
/* #8: de hero loopt over de volle breedte, net als op de andere pagina's. Hij
   stond in een gewone rij (80%, max 1080px) en werd daardoor een smal blok.
   De titel blijft op de lijn van de inhoud eronder: dezelfde marge als een rij. */
.et_pb_row_0_tb_body { width: 100% !important; max-width: none !important; }
.et_pb_post_title_0_tb_body {
  padding: 56px max(10%, calc((100% - 1080px) / 2)) !important; /* zelfde 56px als de hero-rij van een wandeling */
}
/* Divi maakt van de module een flex-kolom: onderin is dus justify-content, en
   align-items houdt de titel links op de lijn van de inhoud (#8). */
.et_pb_post_title_0_tb_body { position: relative; min-height: 22rem; display: flex;
  flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.et_pb_post_title_0_tb_body .et_pb_title_container { position: relative; z-index: 1; padding-block: 0 !important; }
.et_pb_post_title_0_tb_body .et_pb_title_container { text-align: left; padding-inline: 0 !important; }
/* De titel viel terug op de 26px van de Post Title-module, terwijl de hero van
   een wandeling op 56px staat. Zelfde schaal, anders leest een artikel als een
   bijzaak naast de wandelingen. */
.et_pb_post_title_0_tb_body .et_pb_title_container h1 {
  color: var(--su-wit); max-width: 22ch;
  font-size: var(--su-tekst-h1); line-height: var(--su-lh-h1);
}
.et_pb_post_title_0_tb_body::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,58,99,.75), rgba(22,58,99,.15));
}

/* Leeskolom: dezelfde regelbreedte als de andere tekstpagina's. */
.et_pb_post_content_0_tb_body { max-width: 42rem; }
.et_pb_post_content_0_tb_body > * + * { margin-top: var(--su-ruimte-md); }
.et_pb_post_content_0_tb_body h2 { margin-top: var(--su-ruimte-xl); }
.et_pb_post_content_0_tb_body img { border-radius: var(--su-radius-md); }

/* Lopende tekst. De Post Content-module heeft geen eigen tekstinstellingen en
   viel daarmee terug op Divi's standaard van 14px, terwijl dezelfde tekst op de
   wandelingpagina's op 21px staat. Dat was het verschil dat de artikelen klein
   en onaf liet ogen: kleine letters onder koppen van 40px. Hier zetten we de
   leesschaal van de styleguide expliciet op de module. */
.et_pb_post_content_0_tb_body p,
.et_pb_post_content_0_tb_body li {
  font-size: var(--su-tekst-body);
  line-height: var(--su-lh-body);
  color: var(--su-kleur-tekst);
}
.et_pb_post_content_0_tb_body h2 { font-size: var(--su-tekst-h2); line-height: var(--su-lh-h2); }
/* Sinds #6 staat de artikeltekst in een Divi-tekstmodule, zodat de builder hem
   laadt. Divi's themaopties geven de regelafstand alleen aan directe kinderen
   van de content (.et_builder_inner_content > p: 1.7em, > h1-h6: 1.4em). In de
   module vallen de alinea's daar buiten; hier houden ze dezelfde maat. */
.et_pb_post_content_0_tb_body .et_pb_text_inner > p { line-height: 1.7em; }
.et_pb_post_content_0_tb_body .et_pb_text_inner > :is(h1, h2, h3, h4, h5, h6) { line-height: 1.4em; }
.et_pb_post_content_0_tb_body h3 { font-size: var(--su-tekst-h3); line-height: var(--su-lh-h3); margin-top: var(--su-ruimte-lg); }
.et_pb_post_content_0_tb_body h4 { font-size: var(--su-tekst-h4); line-height: var(--su-lh-h4); margin-top: var(--su-ruimte-md); }
.et_pb_post_content_0_tb_body a:not(.et_pb_button) { color: var(--su-kleur-link); text-decoration: underline; text-underline-offset: 2px; }
.et_pb_post_content_0_tb_body a:not(.et_pb_button):hover { color: var(--su-kleur-link-hover); }
/* De knop onderaan het artikel is een gewone Divi-knopmodule, net als op de
   wandelingpagina's. De opmaak zetten we hier zelf, om dezelfde reden als bij
   het kaartraster: Divi schrijft de instellingen van een module in per-pagina
   gegenereerde CSS, en die bleef bij deze artikelen uit. De knop rendert dan
   als een blauwe tekstlink op een transparante achtergrond met 3px hoeken.
   Waarden gelijk aan de knop op de wandelingpagina's; de lettergrootte laten
   we met rust, die komt daar ook van Divi zelf. */
.et_pb_post_content_0_tb_body .et_pb_button {
  display: inline-block; width: auto;
  background-color: var(--su-blauw-krachtig);
  border: 2px solid var(--su-blauw-krachtig);
  border-radius: var(--su-radius-pil);
  color: var(--su-wit);
  font-weight: var(--su-gewicht-semibold);
  text-decoration: none;
}
.et_pb_post_content_0_tb_body ul, .et_pb_post_content_0_tb_body ol { padding-inline-start: 1.25em; }
.et_pb_post_content_0_tb_body li { margin-block: .25em; }
.et_pb_post_content_0_tb_body li::marker { color: var(--su-blauw-middel); }
/* Beelden vullen de leeskolom, maar worden nooit groter dan het bestand zelf:
   een van de aangeleverde foto's is 239px breed en werd op volle kolombreedte
   een uitvergrote, onscherpe plaat van 900px hoog. Kleinere beelden staan
   gecentreerd, zodat de kolom ook dan rustig blijft. */
.et_pb_post_content_0_tb_body img {
  display: block; height: auto; width: auto;
  max-width: 100%; margin-inline: auto;
}

/* Rail: plakt mee bij het scrollen zodat de deelknoppen in beeld blijven. */
.et_pb_column_0_tb_body { position: sticky; top: 6rem; align-self: start; }
@media (max-width: 60rem) { .et_pb_column_0_tb_body { position: static; } }
.su-rail .su-auteur { display: flex; gap: var(--su-ruimte-sm); align-items: center; }
.su-rail .su-auteur img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; flex: none; }
.su-rail .su-auteur p { margin: 0; font-size: .95rem; }
.su-rail .su-deel { margin-top: var(--su-ruimte-lg); display: flex; flex-direction: column; align-items: flex-start; gap: var(--su-ruimte-2xs); }
.su-rail .su-deel .su-link-cta { font-size: .95rem; }
/* #10: Instagram (en later LinkedIn) onder de auteur. */
.su-rail .su-auteur__social { list-style: none; margin: var(--su-ruimte-sm) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--su-ruimte-2xs) var(--su-ruimte-sm); }
.su-rail .su-auteur__social li { margin: 0; padding: 0; }
.su-rail .su-auteur__social .su-link-cta { font-size: .95rem; }
.su-rail .su-auteur__social:empty { display: none; }
/* #9: 'Delen via app…' is een knop (Web Share API), maar oogt als de links erboven. */
.su-rail button.su-link-cta { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.su-rail button.su-link-cta[hidden] { display: none; }

/* Onder 60rem stapelen de kolommen. De rail werd hierboven al losgemaakt van
   het meescrollen, maar bleef wel naast de tekst staan: op een telefoon van
   375px hield de leeskolom daardoor 162px over en brak elke kop in stukken.
   Divi 5 zet deze rij als flex-rij neer en laat haar niet vanzelf omklappen. */
@media (max-width: 60rem) {
  .et_pb_row_1_tb_body { flex-wrap: wrap; }
  .et_pb_row_1_tb_body > .et_pb_column { flex: 1 1 100%; max-width: 100%; }
}

/* Kruimelpad: kleiner en rustiger dan de standaard van Divi. */
.et_pb_breadcrumbs_0_tb_body { font-size: .9rem; margin-bottom: var(--su-ruimte-md); color: var(--su-kleur-tekst-zacht); }

/* Lees ook */
.et_pb_section_2_tb_body { background-color: var(--su-kleur-achtergrond-alt); }
/* Deze kop staat in de layout als H1 en kreeg daardoor de heroschaal van 56px,
   terwijl 'Meer verhalen' op de blogpagina een gewone sectiekop van 40px is.
   Visueel gelijkgetrokken; het koppenniveau zelf zit in de layout, niet hier
   (zie scripts/bouw_artikel_template.py). */
.et_pb_heading_0_tb_body h1 { font-size: var(--su-tekst-h2); line-height: var(--su-lh-h2); }

/* =====================================================================
   BLOGKAARTEN - Divi Blog-module (/blog/ en 'Lees ook' onder een artikel)
   De module rendert zijn eigen markup en trok zich niets aan van de
   kaartopmaak van het aanbod: grijze rand zonder afronding, titels van 18px
   en meta plus samenvatting in het grijs van Divi. Deze regels geven de
   kaarten dezelfde vorm als de blurb-kaarten bij de wandelingen.
   Divi 5 rendert geen eigen klassen per module, dus haken we aan de
   structuur die Divi zelf maakt:
     .et_pb_blog > .et_pb_ajax_pagination_container
       > .et_pb_blog_posts.et_grid_module > article.et_pb_post
   ===================================================================== */
.et_pb_blog_posts.et_grid_module article.et_pb_post {
  display: flex; flex-direction: column; height: 100%;
  padding: 0; margin: 0;
  background: var(--su-kleur-achtergrond);
  border: var(--su-rand-dikte) solid var(--su-rand-kleur);
  border-radius: var(--su-radius-md);
  overflow: hidden;
  box-shadow: var(--su-schaduw-md);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
/* Zelfde lift als de kaarten in het aanbod, zodat een raster met wandelingen
   en een raster met verhalen zich hetzelfde gedragen. */
.et_pb_blog_posts.et_grid_module article.et_pb_post:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(22,58,99,.16), 0 5px 14px rgba(22,58,99,.10);
}

/* Beeld strak in de kaart, in dezelfde 16:9 als de wandelkaarten. Zonder vaste
   verhouding kreeg elke kaart de hoogte van haar eigen foto en liepen de
   titels in een rij uiteen. */
.et_pb_blog_posts.et_grid_module .et_pb_image_container { margin: 0 0 var(--su-ruimte-md); }
.et_pb_blog_posts.et_grid_module .et_pb_image_container img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

/* De tekstdelen zijn directe kinderen van het article; de binnenruimte van de
   kaart moet dus per deel. */
.et_pb_blog_posts.et_grid_module .entry-title,
.et_pb_blog_posts.et_grid_module .post-meta,
.et_pb_blog_posts.et_grid_module .post-content { padding-inline: var(--su-ruimte-md); }
.et_pb_blog_posts.et_grid_module .post-content { padding-bottom: var(--su-ruimte-md); }

.et_pb_blog_posts.et_grid_module .entry-title {
  font-size: var(--su-tekst-h4); line-height: var(--su-lh-h4);
  font-weight: var(--su-gewicht-semibold);
  padding-bottom: var(--su-ruimte-2xs);
}
.et_pb_blog_posts.et_grid_module .entry-title a { color: var(--su-blauw-tekst); }
.et_pb_blog_posts.et_grid_module .entry-title a:hover { color: var(--su-blauw-krachtig); }

/* Meta. De artikelen kwamen bij de import binnen zonder auteur, dus stond er
   letterlijk 'by |' voor de datum. font-size 0 op de regel laat de losse
   tekstknopen ('by' en de scheidingstekens) verdwijnen; de spans zetten hun
   eigen maat terug. Datum en rubriek blijven staan, in de labelstijl van de
   kaarten. Komt de auteur later alsnog uit de database, dan is alleen het
   .author-regeltje hieronder nog nodig. */
/* max-width expliciet uit: de leesbreedte staat in ch, en 70ch bij font-size 0
   is 0 breed. De datum brak dan af op elke letter. */
.et_pb_blog_posts.et_grid_module .post-meta { font-size: 0; max-width: none; margin-bottom: var(--su-ruimte-2xs); }
.et_pb_blog_posts.et_grid_module .post-meta .author { display: none; }
.et_pb_blog_posts.et_grid_module .post-meta > span,
.et_pb_blog_posts.et_grid_module .post-meta a {
  font-size: var(--su-tekst-label); letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--su-gewicht-semibold); color: var(--su-kleur-tekst-zacht);
}
.et_pb_blog_posts.et_grid_module .post-meta .entry-categories::before { content: "\00a0\00b7\00a0"; }

/* Divi zet de samenvatting zelf op 14px via
   'body .et_pb_bg_layout_light .et_pb_post .post-content'. Die regel staat in
   de gegenereerde CSS na de onze, dus hier een selector die er duidelijk
   bovenuit komt in plaats van een !important. */
body .et_pb_blog .et_pb_blog_posts.et_grid_module .post-content,
body .et_pb_blog .et_pb_blog_posts.et_grid_module .post-content p {
  font-size: var(--su-tekst-klein); line-height: var(--su-lh-klein);
  color: var(--su-kleur-tekst); margin: 0;
}

/* Divi genereert de grid-basisregel (display:grid op .et_grid_module) per
   pagina en liet die na het legen van de et-cache weg bij het artikelsjabloon:
   het raster viel terug op display block en elke kaart werd volle breedte.
   Op /blog/ ging het wel goed, dus het is een gok welke pagina het treft, en
   deploy.sh leegt die cache bij elke deploy. Daarom zetten we het raster hier
   zelf neer; de gaten komen uit Divi's eigen variabelen, met zijn standaard
   van 30px als terugval. */
.et_pb_blog .et_pb_blog_posts.et_grid_module {
  display: grid;
  grid-template-columns: repeat(var(--column-count, 3), 1fr);
  column-gap: var(--horizontal-gap, 30px);
  row-gap: var(--vertical-gap, 30px);
}

/* Het aantal kolommen staat in Divi 5 als --column-count op de module, maar
   alleen voor desktop: op een telefoon bleef het raster driekoloms en werd elke
   kaart 80px breed, met titels die per letter afbraken. Divi zet hier geen
   breekpunten bij, dus doen we dat hier. Zelfde grenzen als Divi's eigen
   stapelpunten (980 / 767), zodat de kaarten tegelijk met de rijen omklappen. */
@media (max-width: 980px) {
  .et_pb_blog .et_pb_blog_posts.et_grid_module { --column-count: 2; }
}
@media (max-width: 767px) {
  .et_pb_blog .et_pb_blog_posts.et_grid_module { --column-count: 1; }
}

/* Paginering onder het raster (#7): genummerd, uit includes/navigation-index.php.
   Omlijnde pillen zoals de knoppen; de huidige pagina gevuld. */
.et_pb_blog .pagination { margin-top: var(--su-ruimte-lg); }
.su-paginering ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
}
.su-paginering .page-numbers li { margin: 0; padding: 0; }
.su-paginering a.page-numbers,
.su-paginering span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 1rem;
  border: 2px solid var(--su-blauw-krachtig); border-radius: var(--su-radius-pil);
  font-size: var(--su-tekst-klein); font-weight: var(--su-gewicht-semibold);
  color: var(--su-blauw-krachtig); text-decoration: none;
}
.su-paginering a.page-numbers:hover { background: var(--su-blauw-ijs); color: var(--su-blauw-tekst); }
.su-paginering span.page-numbers.current { background: var(--su-blauw-krachtig); color: var(--su-wit); }
.su-paginering span.page-numbers.dots { border-color: transparent; padding: 0; min-width: 1.5rem; }

/* =====================================================================
   TARIEVENTABEL - Divi's prijzentabel-module (pagina 117)
   De module stond in Divi's eigen opmaak op de pagina: grijze koppen met
   grijze randen zonder afronding, het bedrag in 80px Divi-cyaan (waardoor
   'op aanvraag' over de rand van de kolom liep) en knoppen in diezelfde
   cyaan. Hier krijgt hij de kaartvorm van het wandelaanbod en de
   merkkleuren. De blauwe kopband is dezelfde greep als de categoriestrook
   op de wandelkaarten: krachtig blauw als vlak, nooit het tekstblauw.
   ===================================================================== */
/* De verdeling over de rij zetten we zelf, om dezelfde reden als bij het
   kaartraster en de knop: Divi's klassen voor kolombreedte (24_24_phone en
   familie) krijgen hun waarden uit per-pagina gegenereerde CSS, en die bleef
   hier uit. Zonder die regels stond de rij op nowrap en werden de drie
   kaarten op een telefoon 77px breed. */
.et_pb_pricing_tables { display: flex; flex-wrap: wrap; gap: var(--su-ruimte-md); }
/* Niet meegroeien: anders rekt een kaart die alleen op de laatste rij staat
   zich uit over de volle breedte en is hij twee keer zo breed als de rest. */
.et_pb_pricing_table { flex: 0 1 calc((100% - 2 * var(--su-ruimte-md)) / 3); }
@media (max-width: 980px) {
  .et_pb_pricing_table { flex-basis: calc((100% - var(--su-ruimte-md)) / 2); }
}
@media (max-width: 767px) {
  .et_pb_pricing_table { flex-basis: 100%; }
}
.et_pb_pricing_table {
  display: flex; flex-direction: column;
  background: var(--su-kleur-achtergrond);
  border: var(--su-rand-dikte) solid var(--su-rand-kleur);
  border-radius: var(--su-radius-md);
  overflow: hidden;
  box-shadow: var(--su-schaduw-md);
}
.et_pb_pricing_table .et_pb_pricing_heading {
  background: var(--su-blauw-krachtig);
  border-bottom: 0;
  padding: var(--su-ruimte-md);
}
.et_pb_pricing_table .et_pb_pricing_title {
  font-size: var(--su-tekst-h4); line-height: var(--su-lh-h4);
  font-weight: var(--su-gewicht-semibold); color: var(--su-wit); padding: 0;
}
.et_pb_pricing_table .et_pb_best_value {
  background: none; padding: 0;
  font-size: var(--su-tekst-label); letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--su-gewicht-semibold); color: var(--su-blauw-lucht);
}

/* De drie kopbanden even hoog houden: bij 'Op maat' loopt de ondertitel over
   twee regels, waardoor het bedrag en de opsomming op die kaart lager
   begonnen dan bij de andere twee. Alleen waar de kaarten naast elkaar
   staan; gestapeld op de telefoon heeft uitlijnen geen betekenis. */
@media (min-width: 768px) {
  .et_pb_pricing_table .et_pb_pricing_heading {
    min-height: 8.5rem;
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* Het bedrag is hier tekst ('op aanvraag'), geen getal; op 80px paste dat
   niet in de kolom. Zolang de bedragen ontbreken leest dit als een gewone
   regel, en met echte bedragen erin blijft het in verhouding. */
.et_pb_pricing_table .et_pb_pricing_content_top {
  background: none; border-bottom: 1px solid var(--su-rand-zacht);
  padding: var(--su-ruimte-md);
}
.et_pb_pricing_table .et_pb_et_price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em; }
.et_pb_pricing_table .et_pb_sum {
  font-size: var(--su-tekst-h3); line-height: var(--su-lh-h3);
  font-weight: var(--su-gewicht-semibold); color: var(--su-blauw-tekst);
}
.et_pb_pricing_table .et_pb_frequency {
  font-size: var(--su-tekst-klein); color: var(--su-kleur-tekst-zacht);
}

/* Divi zet de opsomming in een ul binnen een li binnen een ul; zonder deze
   regel krijgt elk punt twee bolletjes. */
.et_pb_pricing_table ul.et_pb_pricing { padding: 0; margin: 0; }
.et_pb_pricing_table ul.et_pb_pricing > li { list-style: none; padding: 0; }
.et_pb_pricing_table ul.et_pb_pricing > li::before { content: none; }
/* Divi tekent zijn eigen bolletje op de span binnen die buitenste li; samen
   met het bolletje van de echte lijst eronder gaf dat twee stippen. */
.et_pb_pricing_table ul.et_pb_pricing > li > span::before { content: none; }
.et_pb_pricing_table ul.et_pb_pricing ul { padding-inline-start: 1.15em; margin: 0; }
.et_pb_pricing_table ul.et_pb_pricing ul li {
  font-size: var(--su-tekst-klein); line-height: var(--su-lh-klein);
  color: var(--su-kleur-tekst); padding: 0; margin-block: .35em;
}
.et_pb_pricing_table ul.et_pb_pricing ul li::marker { color: var(--su-blauw-middel); }
.et_pb_pricing_table .et_pb_pricing_content {
  padding: var(--su-ruimte-md); flex: 1 1 auto;
}

/* Knop gelijk aan de andere knoppen op de site; de module-instellingen van
   Divi komen ook hier uit per-pagina gegenereerde CSS. */
.et_pb_pricing_table .et_pb_button_wrapper { padding: 0 var(--su-ruimte-md) var(--su-ruimte-md); }
.et_pb_pricing_table .et_pb_pricing_table_button {
  display: inline-block;
  background-color: var(--su-blauw-krachtig);
  border: 2px solid var(--su-blauw-krachtig);
  border-radius: var(--su-radius-pil);
  color: var(--su-wit);
  font-weight: var(--su-gewicht-semibold);
}

/* =====================================================================
   INHOUDSOPGAVE - Divi's table-of-contents-module
   Op de tarievenpagina vindt de module geen koppen (ze zitten in
   Divi-modules, niet in de lopende tekst) en toont ze 'No headings found
   in this post.' Een lege inhoudsopgave hoort niet op de pagina, dus die
   verbergen we. Zodra de lijst wel vult, verschijnt hij vanzelf weer:
   de regel grijpt alleen als er geen enkel item staat.
   ===================================================================== */
.et_pb_table_of_contents:has(.et_pb_table_of_contents__empty):not(:has(.et_pb_table_of_contents__item)) {
  display: none;
}
/* Met een verborgen inhoudsopgave heeft de smalle linkerkolom geen functie
   meer: de tekst stond 226px naar rechts geschoven met een leeg blok ernaast.
   De kolom gaat dus mee weg en de tekstkolom neemt de hele rij. */
.et_pb_row:has(.et_pb_table_of_contents__empty):not(:has(.et_pb_table_of_contents__item)) > .et_pb_column:has(.et_pb_table_of_contents) {
  display: none;
}
.et_pb_row:has(.et_pb_table_of_contents__empty):not(:has(.et_pb_table_of_contents__item)) > .et_pb_column:not(:has(.et_pb_table_of_contents)) {
  flex: 1 1 100%; max-width: 100%;
}

/* =====================================================================
   RECRAS-FORMULIER
   De aanvraagpagina toonde een nagebouwd formulier in een Code-module:
   mooi, maar het deed niets. Het echte formulier komt uit Recras, via de
   Recras-plugin, en die levert eigen markup:

     form.recras-contact > dl > dt > label
                              > dd > input | select | textarea

   Zonder opmaak ziet dat eruit als een kale definitielijst. Deze regels
   geven het dezelfde opmaak als het demoformulier had, zodat het aanvoelt
   als onderdeel van de site en niet als een los extern systeem (opdracht
   paragraaf 22). Ze hangen aan de Recras-klassen en werken dus automatisch
   op elk formulier dat de plugin plaatst, ook op andere pagina's.

   Eén kolom, ruime velden, duidelijke labels: de doelgroep is gemiddeld wat
   ouder, dus leesbaarheid gaat hier voor compactheid.
   ===================================================================== */

form.recras-contact dl { margin: 0; display: flex; flex-direction: column; }
form.recras-contact dt { margin: 0 0 var(--su-ruimte-3xs); }
form.recras-contact dd { margin: 0 0 var(--su-ruimte-sm); }

form.recras-contact label {
  font-size: var(--su-tekst-klein);
  font-weight: var(--su-gewicht-semibold);
  color: var(--su-blauw-tekst);
}
form.recras-contact .recras-required {
  color: var(--su-blauw-krachtig);
  margin-inline-start: .15em;
}

form.recras-contact input[type="text"],
form.recras-contact input[type="email"],
form.recras-contact input[type="tel"],
form.recras-contact input[type="url"],
form.recras-contact input[type="number"],
form.recras-contact input[type="date"],
form.recras-contact input[type="time"],
form.recras-contact select,
form.recras-contact textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--su-tekst-body);
  color: var(--su-blauw-tekst);
  background-color: var(--su-wit);
  padding: 0.6em 0.8em;
  border: var(--su-rand-dikte) solid var(--su-rand-zacht);
  border-radius: var(--su-radius-md);
  transition: border-color var(--su-transitie), box-shadow var(--su-transitie);
}
form.recras-contact ::placeholder { color: var(--su-kleur-tekst-zacht); opacity: 0.7; }
form.recras-contact :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--su-blauw-krachtig);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--su-blauw-krachtig) 22%, transparent);
}
form.recras-contact textarea { min-height: 7rem; resize: vertical; }

/* Het browser-eigen 'invalid' is te schreeuwerig; dit blijft binnen de huisstijl
   en gebruikt hetzelfde gedempte baksteenrood als de rest van de foutmeldingen. */
form.recras-contact :is(input, select, textarea):user-invalid { border-color: #b4452f; }

/* Keuzerondjes en aankruisvakjes staan bij Recras zonder wrapper in de dd. */
form.recras-contact input[type="radio"],
form.recras-contact input[type="checkbox"] { width: auto; margin-inline-end: .5em; }
form.recras-contact .clearRadioChoice {
  display: inline-block; margin-block-start: .4rem;
  background: none; border: 0; padding: 0;
  font-size: var(--su-tekst-klein); color: var(--su-blauw-krachtig);
  text-decoration: underline; cursor: pointer;
}
form.recras-contact .recras-prefilled-package { font-weight: var(--su-gewicht-semibold); }

/* Verzendknop: dezelfde pil als de rest van de site. */
form.recras-contact button[type="submit"],
form.recras-contact input[type="submit"] {
  font-family: inherit;
  font-size: var(--su-tekst-body);
  font-weight: var(--su-gewicht-semibold);
  color: var(--su-wit);
  background-color: var(--su-blauw-krachtig);
  border: 2px solid var(--su-blauw-krachtig);
  border-radius: 999px;
  padding: 14px 32px;
  cursor: pointer;
  transition: background-color var(--su-transitie), border-color var(--su-transitie);
}
form.recras-contact :is(button, input)[type="submit"]:hover {
  background-color: var(--su-blauw-tekst);
  border-color: var(--su-blauw-tekst);
}

/* Checklijst met vinkjes. Stond in het <style>-blok van de Code-module op de
   aanvraagpagina; die module is vervangen door native modules, dus hoort de
   opmaak hier. */
.su-checklijst { list-style: none; margin: 0; padding: 0; }
.su-checklijst li { display: flex; gap: .6rem; align-items: flex-start; margin-block: .7rem; }
.su-checklijst li::before { content: "✓"; color: var(--su-blauw-krachtig); font-weight: 700; flex: none; }

/* =====================================================================
   AANVRAAGKNOP op elk scherm (#56) - markup uit includes/general/aanvraag-cta.php
   Desktop: pil in de vaste header, links van de hamburger.
   Telefoon/tablet: Divi laat de header daar meescrollen, dus daar een vaste
   balk onderin. Breekpunt 980/981 = Divi's eigen header-breekpunt.
   ===================================================================== */
.su-aanvraagknop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem;                 /* 44px: WCAG-doelgrootte */
  padding: 0.5em 1.25em;
  background: var(--su-blauw-krachtig);
  color: var(--su-wit) !important;
  border-radius: var(--su-radius-pil);
  font-family: var(--su-font-basis);
  font-size: var(--su-tekst-knop); font-weight: var(--su-gewicht-semibold);
  line-height: var(--su-lh-knop);
  text-decoration: none;
  white-space: nowrap;
}
.su-aanvraagknop:hover { background: var(--su-blauw-krachtig-hover); color: var(--su-wit) !important; }
.su-aanvraagknop:active { background: var(--su-blauw-krachtig-active); }
.su-aanvraagknop:focus-visible { outline: 3px solid var(--su-blauw-tekst); outline-offset: 3px; }

/* Header: knop en hamburger op één lijn, verticaal gecentreerd. */
#et-top-navigation .su-aanvraagknop--header { float: left; margin: 0 1.5rem 0 0;
  /* Divi's hamburgervlak heeft 24px padding-bottom onder een icoon van 32px:
     het icoon staat dus 12px boven het midden van het vlak. Zelfde verschuiving
     hier, zonder de hoogte van de header te veranderen. */
  position: relative; top: -12px; }
.et_header_style_left #et-top-navigation { display: flex; align-items: center; }
.et_header_style_left #et-top-navigation #et_mobile_nav_menu { float: none; }

/* Vaste balk onderin: standaard uit. */
.su-aanvraagbalk { display: none; }

@media (max-width: 980px) {
  #et-top-navigation .su-aanvraagknop--header { display: none; }
  .su-aanvraagbalk {
    display: flex; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    background: var(--su-wit);
    border-top: 1px solid var(--su-rand-zacht);
    box-shadow: 0 -4px 12px rgba(22, 58, 99, 0.08);
  }
  .su-aanvraagbalk .su-aanvraagknop { width: 100%; max-width: 26rem; }
  /* Ruimte onder de footer, zodat de balk niets afdekt. */
  body.su-heeft-aanvraagbalk { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
}

@media print {
  .su-aanvraagbalk, .su-aanvraagknop--header { display: none !important; }
}

/* ===== Content styling site-wide (#63) ===== */
/* Foto's in de inhoud altijd met afgeronde hoeken, gelijk aan de kaarten.
   Alleen binnen #main-content: het logo in kop en voet blijft zoals het is. */
#main-content .et_pb_image .et_pb_image_wrap { border-radius: var(--su-radius-md); overflow: hidden; }
#main-content .et_pb_image img:not([src*="logo"]) { border-radius: var(--su-radius-md); }

/* Zijkaart 'Praktisch' op de wandelingpagina's: de lijst en de knop krijgen
   links en rechts dezelfde binnenruimte als de blauwe kop (20px), zodat de
   waarden niet tegen de rand van de kaart staan. */
.et_pb_column:has(.su-gegevens) .su-gegevens { padding: 0 20px; }
.et_pb_column:has(.su-gegevens) .et_pb_button_module_wrapper { margin-inline: 20px; }

/* ===== Blogs: kop en alinea's in eigen modules (#62) ===== */
/* In één tekstmodule klapten de marges van alinea en kop in elkaar en had
   elke alinea behalve de laatste 1em ruimte eronder. Nu elke kop en alinea een
   eigen module is, zet de kolom er 30px flex-gap tussen en klappen marges niet
   meer in. Deze regels geven de blog dezelfde maten als vóór de splitsing
   (nagemeten op alle tien blogs, desktop en mobiel). Op een blog die nog één
   tekstmodule heeft, veranderen ze niets. */
.et_pb_post_content_0_tb_body .et_pb_column { row-gap: 0; }
.et_pb_post_content_0_tb_body .et_pb_text:has(+ :is(.et_pb_text, .et_pb_heading, .et_pb_image)) .et_pb_text_inner > :last-child { padding-bottom: 1em; }
.et_pb_post_content_0_tb_body .et_pb_heading .et_pb_module_header { line-height: 1.4em; margin-bottom: var(--su-ruimte-sm); }
.et_pb_post_content_0_tb_body .et_pb_text + .et_pb_heading h2 { margin-top: calc(var(--su-ruimte-xl) - var(--su-ruimte-sm)); }
.et_pb_post_content_0_tb_body .et_pb_text + .et_pb_heading h3 { margin-top: calc(var(--su-ruimte-lg) - var(--su-ruimte-sm)); }
/* De knop onder het verhaal hield zijn afstand van de flex-gap. */
.et_pb_post_content_0_tb_body .et_pb_button_module_wrapper { margin-top: 30px; }

/* ===== Knoppen: basisopmaak ook zonder Divi's dynamische CSS (#32) ===== */
/* Divi zet de basisopmaak van knoppen in de inline kritieke CSS als er een
   knop boven de vouw staat, en anders in et-cache/<id>/et-divi-dynamic-*.css.
   Die bestanden hebben geen versie in de URL en de server laat ze tien jaar
   cachen. Verhuist een knop onder de vouw (zoals op /stadsgids/ na #32), dan
   houdt een terugkerende bezoeker het oude bestand zonder knopregels, en wordt
   de knop zo breed als de kolom. Dezelfde regels als Divi's eigen; ze
   veranderen niets aan pagina's die het goed doen (nagemeten op acht pagina's). */
.et_pb_button { display: inline-block; }
.et_pb_module.et_pb_button:not(.et_block_module) { max-width: max-content; }