/* ForestEdge versie 3.0 - onderdelen die op elke pagina terugkomen. */

/* ---- topbalk --------------------------------------------------------- */
/* Vervangt Verbinden, Creeren en Bereiken (rapport 8.2). Die drie staan
   voortaan in de footer. Donkere tekst op salie haalt 7,18:1. */

.fe-top {
  background: var(--fe-salie);
  color: var(--fe-inkt);
  font-size: var(--fe-ts-label);
}
.fe-top .fe-inhoud, .fe-kop-balk .fe-inhoud { max-width: var(--fe-balk); }
.fe-top .fe-inhoud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fe-ruimte-8) var(--fe-ruimte-16);
  min-height: 36px;
  padding-block: var(--fe-ruimte-8);
}
.fe-top a { color: inherit; text-decoration: none; }
.fe-top a:hover { text-decoration: underline; }
.fe-top__reviews { display: inline-flex; align-items: center; gap: var(--fe-ruimte-8); }
.fe-sterren { color: var(--fe-actie); letter-spacing: 0.06em; }
.fe-top__belofte { opacity: 0.85; }
.fe-top__tel { font-weight: 700; white-space: nowrap; }

/* onder 600 px past de belofte er niet bij; dan blijven reviews en telefoon */
@media (max-width: 599px) { .fe-top__belofte { display: none; } }

/* ---- header ---------------------------------------------------------- */

/* Een sprong naar een anker (bijvoorbeeld /contact/#locatie uit het menu)
   zette de kop van het blok op 0 en dus achter deze balk: je landde midden
   in de adresregels. scroll-margin houdt er de hoogte van de balk plus de
   ruimte boven de kop vrij, zodat het hele vlak zichtbaar begint. De 84 px
   is de gemeten hoogte van deze balk (81) met een paar pixels lucht. */
#locatie, #reviews, #fe-hoofd, #fe-snelvraag { scroll-margin-top: calc(var(--fe-sectie) + 84px); }

.fe-kop-balk {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fe-wit);
  border-bottom: 1px solid rgba(41, 48, 56, 0.1);
}
/* Alleen de eerste rij is de balk zelf. De tweede wikkelt het mobiele menu en
   moet samenvallen zolang dat dicht is; anders staat er 72 px niets onder de
   header, op elke pagina. */
.fe-kop-balk > .fe-inhoud:first-child {
  display: flex;
  align-items: center;
  gap: var(--fe-ruimte-24);
  min-height: var(--fe-kopbalk-rij);
  padding-block: var(--fe-ruimte-12);
}
.fe-kop-balk > .fe-inhoud:last-child { padding-block: 0; }
/* de hoogte van de balkrij zelf, op een plek: de rij meet zich eraan en het
   open menu rekent ermee hoeveel venster er overblijft */
.fe-kop-balk { --fe-kopbalk-rij: 72px; }
.fe-kop-balk > .fe-inhoud:last-child:has(.fe-mobielmenu:not([data-open])) { display: none; }
.fe-logo { margin-right: auto; display: flex; align-items: center; }
.fe-logo img { width: auto; max-width: 180px; max-height: 48px; }
@media (max-width: 1279px) { .fe-logo img { max-width: 150px; } }

/* ---- hoofdmenu ------------------------------------------------------- */
/* Zichtbaar vanaf 1024 px (Q1). In versie 2.0 verdween het onder 1400 px. */

.fe-menu { display: none; }
.fe-menu ul { display: flex; align-items: center; gap: var(--fe-ruimte-20, 20px); margin: 0; padding: 0; list-style: none; }
.fe-menu a {
  display: inline-flex;
  align-items: center;
  gap: var(--fe-ruimte-4);
  min-height: var(--fe-raak);
  font-family: var(--fe-font-kop);
  font-size: var(--fe-ts-menu);
  font-weight: 700;
  color: var(--fe-inkt);
  text-decoration: none;
  white-space: nowrap;
}
.fe-menu a:hover, .fe-menu a[aria-current="page"] { color: var(--fe-actie); }

.fe-menu__groep { position: relative; }
.fe-menu__groep > a::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.fe-menu__uit {
  position: absolute;
  top: 100%;
  left: calc(var(--fe-ruimte-16) * -1);
  display: none;
  flex-direction: column;
  gap: 0;
  min-width: 260px;
  padding: var(--fe-ruimte-8) 0;
  background: var(--fe-wit);
  border: 1px solid rgba(41, 48, 56, 0.1);
  border-radius: var(--fe-rond-vlak);
  box-shadow: 0 10px 28px rgba(41, 48, 56, 0.12);
}
.fe-menu__groep:hover > .fe-menu__uit,
.fe-menu__groep:focus-within > .fe-menu__uit { display: flex; }
.fe-menu__uit a {
  justify-content: space-between;
  padding: var(--fe-ruimte-8) var(--fe-ruimte-16);
  font-weight: 400;
  white-space: normal;
}
.fe-menu__uit a:hover { background: var(--fe-warmgrijs); }
.fe-menu__maat { font-size: var(--fe-ts-label); color: var(--fe-tekst); white-space: nowrap; }

/* ---- knop in de header ----------------------------------------------- */

/* Logo, menu en knop krimpen geen van drieen. Krimpen liet eerst de knop naar
   twee regels breken, en daarna schoof het menu er overheen. Past het niet,
   dan moet het menu korter of het breekpunt hoger, niet stilletjes overlappen. */
.fe-kop-balk .fe-knop--primair { display: none; flex-shrink: 0; }
.fe-logo { flex-shrink: 0; }
.fe-menu { flex-shrink: 0; }
.fe-menu ul { flex-wrap: nowrap; }

/* ---- hamburger ------------------------------------------------------- */

.fe-hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--fe-raak);
  height: var(--fe-raak);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.fe-hamburger span { display: block; height: 2px; background: var(--fe-inkt); border-radius: 2px; }

.fe-mobielmenu { display: none; padding-bottom: var(--fe-ruimte-16); }
/* Het open menu moet in het venster passen (19-10-2026, gemeld vanaf een
   iPhone: "kan er niet in scrollen").
   Het paneel hangt onder in .fe-kop-balk, en die balk is position: sticky met
   top: 0. Een plakkend blok dat hoger is dan het venster blijft op top 0
   staan: hij schuift niet mee omhoog, dus de onderste regels van het menu
   waren met geen enkele veeg te bereiken. Het menu was 1162 px hoog en de
   balk daarmee 1235, op een telefoon van 667 tot 844 px.
   Nu schuift het paneel zelf. 100dvh en niet 100vh, want op iOS rekent 100vh
   met een adresbalk die er niet altijd is; de regel met vh blijft staan voor
   een browser die dvh niet kent. overscroll-behavior houdt de veeg in het
   menu in plaats van de pagina erachter mee te trekken. */
.fe-mobielmenu[data-open] {
  display: block;
  /* de 1 px is de onderrand van de balk: zonder die aftrek is de balk samen
     met het paneel precies 1 px hoger dan het venster */
  max-height: calc(100vh - var(--fe-kopbalk-rij) - 1px);
  max-height: calc(100dvh - var(--fe-kopbalk-rij) - 1px);
  /* Allebei de assen uitschrijven, en overflow-x als eerste. Zet je alleen
     overflow-y op auto, dan rekent de browser de andere as mee om: visible
     wordt dan auto. Het paneel was 1 px breder dan zijn eigen binnenkant
     (afronding op een scherm van 2x), en die ene px kon het dus opzij
     schuiven. Met een veeg op iOS geeft dat precies het zwabberen van links
     naar rechts dat gemeld is (19-10-2026). */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* overflow-x: hidden knipt af op de rand van het paneel, en de focusring van
   een menuregel ligt 2 px buiten de link. Die leggen we naar binnen, zoals bij
   de reviewcarrousel, anders is met toetsenbord niet te zien waar je staat. */
.fe-mobielmenu[data-open] a:focus-visible { outline-offset: -2px; }
.fe-mobielmenu ul { margin: 0; padding: 0; list-style: none; }
.fe-mobielmenu li + li { border-top: 1px solid rgba(41, 48, 56, 0.1); }
.fe-mobielmenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fe-ruimte-16);
  min-height: var(--fe-raak);
  padding: var(--fe-ruimte-12) 0;
  font-family: var(--fe-font-kop);
  font-size: var(--fe-ts-tekst);
  font-weight: 700;
  color: var(--fe-inkt);
  text-decoration: none;
}
.fe-mobielmenu .fe-menu__uit-mob a { padding-left: var(--fe-ruimte-16); font-weight: 400; }
/* De maat ("tot 12") mag niet afbreken en kan in het smalle paneel krap
   komen te zitten naast een lange ruimtenaam. Met wrap gaat hij dan naar de
   volgende regel in plaats van te krimpen tot hij zijn eigen tekst afknipt.
   Alleen in het mobiele paneel; in het uitklapmenu op desktop staat hij rechts
   naast de naam. */
.fe-mobielmenu a { flex-wrap: wrap; row-gap: 0; }
.fe-mobielmenu .fe-knop { width: 100%; margin-top: var(--fe-ruimte-16); }

/* ---- vanaf 1024 px: menu zichtbaar, hamburger weg -------------------- */

/* Q1 vraagt 1024 px, en dat kan nu ook. De eerdere 1200 kwam uit een meting
   met de oorspronkelijke labels en een logo van 180 px: toen had de header
   1.220 px nodig. Met de ingekorte labels ("Locatie", "Over ons", besluit
   11-10) en het logo op 150 px onder 1.280 is dat nog 939 px: logo 150,
   menu 582, knop 207. Nagemeten op 1.024 px, geen horizontale schuifbalk. */
@media (min-width: 1024px) {
  .fe-menu { display: block; }
  .fe-kop-balk .fe-knop--primair { display: inline-flex; }
  .fe-hamburger, .fe-mobielmenu { display: none !important; }
}

/* ---- kaartenraster --------------------------------------------------- */
/* Op desktop drie per rij: acht ruimtes plus een vergelijkkaart is precies
   drie bij drie. Op mobiel hele kaarten, want een raster van twee maakt de
   foto 167 px breed en dat is te klein voor je beste verkoper. */

.fe-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fe-ritme-kaarten);
}
@media (min-width: 1024px) { .fe-raster { grid-template-columns: repeat(3, 1fr); } }

.fe-kaart {
  display: flex;
  flex-direction: column;
  background: var(--fe-wit);
  border: var(--fe-kaartrand);
  border-radius: var(--fe-rond-vlak);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.fe-kaart:hover { box-shadow: 0 8px 24px rgba(41, 48, 56, 0.1); }
.fe-kaart img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* flex: 1 zodat het tekstvak de hele kaart vult. Zonder dat doet de
   margin-top: auto op de voet niets: de kaarten in een rij waren wel even
   hoog, maar de prijsregel begon per kaart op een andere hoogte (gemeten
   25-10-2026: 2220, 2247 en 2274 px in dezelfde rij, want de omschrijvingen
   zijn 4, 5 en 6 regels). Nu staat de onderste regel van elke kaart in een
   rij op dezelfde lijn. */
.fe-kaart__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  gap: var(--fe-ruimte-8); padding: var(--fe-ritme-kaart);
}
.fe-kaart h3 { margin: 0; font-size: var(--fe-ts-h4); }
.fe-kaart p { margin: 0; font-size: var(--fe-ts-tekst); line-height: var(--fe-ts-tekst-regel); }
.fe-kaart__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrap, zodat de prijsregel heel blijft. Met de ruimere binnenruimte van de
     kaart (25-10-2026) brak "vanaf 400 euro per dag, excl. btw" af achter het
     woord excl., met btw alleen op de tweede regel. Nu zakt de link naar een
     eigen regel zodra het krap wordt, en blijft de prijs een geheel. */
  flex-wrap: wrap;
  gap: var(--fe-ruimte-8) var(--fe-ruimte-16);
  margin-top: auto;
  padding-top: var(--fe-ruimte-12);
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
}
.fe-kaart__voet > :first-child { flex: 1 1 auto; min-width: 0; }
/* de streep komt bij het aanwijzen van de hele kaart, zie basis.css */
.fe-kaart__meer { color: var(--fe-olijf-tekst); white-space: nowrap; }

/* ---- CTA-blok (rapport hoofdstuk 7) ---------------------------------- */
/* Twee kolommen binnen de inhoudsbreedte. Links Andrea en de reviewkaart,
   rechts de drie tegels met het formulier er direct onder. Geen tegel die
   eerst open moet klappen. */

/* minmax(0, 1fr) en niet 1fr. Een kolom van 1fr betekent voor de browser
   minmax(auto, 1fr): hij mag nooit smaller worden dan de krapste maat van
   zijn inhoud. De reviewcarrousel in de zijkolom geeft als krapste maat de
   volle breedte van een reviewtekst terug, en daarmee werd de kolom op een
   telefoon 608 px breed in een venster van 390. De nul zegt: deze kolom mag
   zo smal als het venster, de inhoud past zich aan. */
.fe-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fe-ruimte-24); }
/* De inhoudskolom (kop, tegels, formulier) staat links en komt ook in de
   html eerst, zodat de leesrichting, de tabvolgorde en een schermlezer
   dezelfde volgorde aanhouden. Tot 25-10-2026 stond Andrea met de review
   links en moest je daar eerst langs voor je bij de keuze kwam; op verzoek
   van Alexander omgedraaid, zodat het formulier eerder in de kijkrichting
   valt. De zijkolom blijft 340 px. */
@media (min-width: 1024px) { .fe-cta { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--fe-ruimte-32); } }

.fe-cta__zij {
  display: flex;
  flex-direction: column;
  gap: var(--fe-ruimte-16);
  /* dezelfde reden als hierboven: een kolom in een flexkolom mag niet door
     zijn inhoud worden opgerekt */
  min-width: 0;
  padding: var(--fe-ruimte-24);
  background: var(--fe-warmgrijs);
  border-radius: var(--fe-rond-vlak);
}
.fe-persoon { display: flex; align-items: center; gap: var(--fe-ruimte-16); }
.fe-persoon__foto {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--fe-salie);
  display: grid; place-items: center;
  font-family: var(--fe-font-kop); font-weight: 700; font-size: var(--fe-ts-h4);
  color: var(--fe-inkt);
  object-fit: cover;
}
.fe-persoon__naam { font-family: var(--fe-font-kop); font-weight: 700; color: var(--fe-inkt); }
.fe-persoon__rol, .fe-persoon__belofte { font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }

/* De reviews trokken relatief veel aandacht: een wit paneel naast een blok
   dat zelf al op een gekleurd vlak staat. Nu een rustig citaat op dezelfde
   ondergrond, met alleen een dunne lijn erboven. Inhoud blijft gelijk:
   score, naam, datum, sterren en de carrousel. (31-10-2026) */
.fe-reviewkaart {
  min-width: 0;
  padding: var(--fe-ritme-kaart) 0 0;
  border-top: 1px solid rgba(41, 48, 56, 0.14);
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
}
.fe-reviewkaart__score { display: flex; align-items: center; gap: var(--fe-ruimte-8); font-weight: 700; color: var(--fe-inkt); }

/* ---- de drie tegels -------------------------------------------------- */

.fe-tegels { display: grid; gap: var(--fe-ritme-kaarten); margin: var(--fe-ruimte-16) 0 var(--fe-ruimte-24); }
@media (min-width: 1024px) { .fe-tegels { grid-template-columns: repeat(2, 1fr); } }

.fe-tegel {
  position: relative;
  /* Een rastervak is standaard minstens zo breed als zijn langste
     onafbreekbare stuk tekst. Sinds het telefoonnummer op de tegel niet meer
     mag afbreken, duwde dat de hele rij 13 px buiten de pagina (gemeten op
     1.024 px). Met min-width 0 mag het vak smaller zijn dan zijn inhoud en
     breekt de regel voor het nummer, wat precies de bedoeling is. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--fe-ruimte-4);
  min-height: 56px;
  padding: var(--fe-ruimte-16);
  background: var(--fe-wit);
  border: 2px solid var(--fe-inkt);
  border-radius: var(--fe-rond-vlak);
  color: var(--fe-inkt);
  text-decoration: none;
}
@media (min-width: 1024px) { .fe-tegel { min-height: 80px; } }
.fe-tegel__titel { display: flex; align-items: center; gap: var(--fe-ruimte-8); font-family: var(--fe-font-kop); font-size: var(--fe-ts-tegeltitel); font-weight: 700; }
/* zelfde maat en ritme als het bijschrift; twee stijlen van 14 px met een
   verschil van een pixel in de regelhoogte is ruis, geen onderscheid */
.fe-tegel__onder { font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }

/* ---- de beltegel met Andrea erop (31-10-2026) ------------------------
   Andrea stond als los blokje boven de reviewkaart. Nu staat ze op de tegel
   waar haar nummer op staat, met een grotere foto (72 naar 96 px), en loopt
   die tegel over de volle breedte van de rij. Zo is het persoonlijke contact
   het grootste vlak van de drie in plaats van het kleinste. */
.fe-tegel--persoon {
  flex-direction: row;
  align-items: center;
  gap: var(--fe-ritme-kaart);
  padding: var(--fe-ruimte-16) var(--fe-ritme-kaart);
}
@media (min-width: 1024px) { .fe-tegels .fe-tegel--persoon { grid-column: 1 / -1; } }
.fe-tegel__foto {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--fe-salie);
  object-fit: cover;
}
.fe-tegel__tekst { display: flex; flex-direction: column; gap: var(--fe-ruimte-4); min-width: 0; }
/* Haar naam staat boven de actie, in dezelfde opmaak als in de voet: dit is
   een persoon, geen tweede kop. Het nummer blijft de grootste regel, want de
   tegel is een belknop (31-10-2026). */
.fe-tegel__naam { font-family: var(--fe-font-kop); font-weight: 700; font-size: var(--fe-ts-tekst); }
.fe-tegel__rol { font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); opacity: .75; }
.fe-tegel:hover { background: var(--fe-warmgrijs); }

.fe-tegel--primair { background: var(--fe-actie); border-color: var(--fe-actie); color: var(--fe-wit); }
.fe-tegel--primair:hover { background: #B2452A; border-color: #B2452A; color: var(--fe-wit); }
.fe-tegel__merk {
  position: absolute;
  top: calc(var(--fe-ruimte-8) * -1);
  right: var(--fe-ruimte-12);
  padding: 2px var(--fe-ruimte-8);
  background: var(--fe-salie);
  border-radius: var(--fe-rond-knop);
  font-family: var(--fe-font-kop);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fe-inkt);
}

.fe-cta__links { display: flex; flex-wrap: wrap; gap: var(--fe-ruimte-8) var(--fe-ruimte-24); font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }
.fe-cta__links a { display: inline-flex; align-items: center; gap: var(--fe-ruimte-8); }
.fe-garanties { display: flex; flex-wrap: wrap; gap: var(--fe-ruimte-8) var(--fe-ruimte-24); margin-top: var(--fe-ruimte-12); padding: 0; list-style: none; font-size: var(--fe-ts-tekst); }
.fe-garanties li { display: flex; align-items: center; gap: var(--fe-ruimte-8); }

/* het formulier: vier velden in twee rijen op desktop */
.fe-cta__form { margin-top: var(--fe-ruimte-24); }
.fe-velden { display: grid; gap: 0 var(--fe-ruimte-16); }
@media (min-width: 1024px) {
  .fe-velden { grid-template-columns: 1fr 1fr; }
  /* Ronde 2, punt 6: rij 1 Voornaam op halve breedte, rij 2 E-mail en
     Telefoon naast elkaar, rij 3 Bericht. Expliciete rijen, want met
     automatische plaatsing schuift E-mail naast Voornaam. */
  .fe-velden .fe-veld--half { grid-row: 1; grid-column: 1 / 2; }
  .fe-velden .fe-veld:nth-of-type(2) { grid-row: 2; grid-column: 1 / 2; }
  .fe-velden .fe-veld:nth-of-type(3) { grid-row: 2; grid-column: 2 / 3; }
  .fe-velden .fe-veld--breed { grid-row: 3; grid-column: 1 / -1; }
}

/* ---- de zwevende offerteknop van MICE op mobiel (19-10) --------------- */
/* Op een telefoon staat onze eigen vaste balk al onderaan met Bel, Vraag en
   Offerte aanvragen. De zwevende knop van MICE komt daar bovenop en voegt
   niets toe, dus die blijft daar weg.

   Het is een iframe van MICE zelf; wij kunnen er geen klasse op zetten. Het
   onderscheid zit in de stijl die hun script erop zet: dichtgeklapt staat er
   een maat in pixels (de knop, 267 of 276 px breed; dat verschilt per
   pagina), opengeklapt gaat hetzelfde iframe naar width en height 100% en
   dekt het het scherm af. Alleen de dichtgeklapte stand wordt weggehaald,
   zodat onze eigen offerteknoppen de widget nog gewoon openen.

   Geen display:none en geen visibility:hidden. Gemeten op 19-10: met
   visibility:hidden reageerde de widget niet meer op de klik uit widget.js
   en bleef het iframe dicht. Met opacity blijft hij voor de browser gewoon
   zichtbaar en werkt hij, maar zie en raak je hem niet.

   De regel eist dat width en height allebei niet op 100% staan. Verandert
   MICE een van de twee, dan blijft de overlay zichtbaar; dat is de kant
   waar een fout mag vallen. */
@media (max-width: 767.98px) {
  iframe[src*="/widget/embed/launcher"]:not([style*="width: 100%"]):not([style*="height: 100%"]) {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ---- WhatsApp-knop linksonder (25-10-2026) ---------------------------
   Rechtsonder staat de offertewidget van MICE, dus deze staat links. Op een
   telefoon zweeft hij boven de vaste balk (56 px plus de veilige zone van het
   toestel), niet erover.

   Groen met een wit teken: de merkrichtlijn van WhatsApp. De kleur komt als
   token uit het ontwerpsysteem, net als de logo's in de logobalk hun eigen
   kleur houden. Het groen heeft tegen wit maar 1,8:1, dus er zit een dunne
   donkere rand en een schaduw omheen; anders valt de knop op een lichte
   achtergrond weg. */
.fe-wa {
  position: fixed;
  left: var(--fe-zijmarge);
  bottom: calc(56px + var(--fe-ruimte-12) + env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: var(--fe-ruimte-8);
  min-height: var(--fe-raak);
  padding: 0 var(--fe-ruimte-20) 0 var(--fe-ruimte-16);
  background: var(--fe-whatsapp);
  color: var(--fe-wit);
  border: 1px solid rgba(41, 48, 56, 0.18);
  border-radius: var(--fe-rond-knop);
  box-shadow: 0 6px 20px rgba(41, 48, 56, 0.22);
  font-family: var(--fe-font-kop);
  font-size: var(--fe-ts-mobiele_balk);
  font-weight: 700;
  text-decoration: none;
}
.fe-wa:hover, .fe-wa:focus-visible { color: var(--fe-wit); filter: brightness(0.94); }
.fe-wa__merk { flex-shrink: 0; }
/* Op een telefoon alleen het merkteken, in een rondje. Met het woord erbij
   is de knop 144 px breed en dekt hij een flink stuk van de pagina af; het
   teken alleen is genoeg om te herkennen, en de tekst blijft staan voor een
   schermlezer (aria-label). Vanaf 768 px is er ruimte zat. */
@media (max-width: 767.98px) {
  .fe-wa {
    width: var(--fe-raak);
    padding: 0;
    justify-content: center;
  }
  .fe-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* op desktop is er geen vaste balk, dus mag hij lager staan */
@media (min-width: 1024px) {
  .fe-wa { left: var(--fe-ruimte-24); bottom: var(--fe-ruimte-24); }
}
/* zolang het toetsenbord openstaat verdwijnt de balk; de knop gaat mee omlaag */
.fe-balk[hidden] ~ .fe-wa { bottom: calc(var(--fe-ruimte-12) + env(safe-area-inset-bottom)); }

/* ---- vaste balk onderin op mobiel (Q7) ------------------------------- */
/* Drie delen, samen 100 procent. Hoogte 56 px plus de veilige zone van de
   telefoon. Verdwijnt zodra het toetsenbord open is, anders dekt hij velden af. */

.fe-balk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fe-wit);
  border-top: 1px solid rgba(41, 48, 56, 0.12);
}
.fe-balk a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fe-ruimte-8);
  min-height: 56px;
  font-family: var(--fe-font-kop);
  font-size: var(--fe-ts-mobiele_balk);
  font-weight: 700;
  color: var(--fe-inkt);
  text-decoration: none;
}
.fe-balk__offerte { background: var(--fe-actie); color: var(--fe-wit); }
.fe-balk[hidden] { display: none; }
@media (min-width: 1024px) { .fe-balk { display: none; } }
body:has(.fe-balk) { padding-bottom: 72px; }
@media (min-width: 1024px) { body:has(.fe-balk) { padding-bottom: 0; } }

/* ---- hero (rapport Q13 en 9.2) --------------------------------------- */
/* De foto is een echte <img>, geen achtergrond: de browser vindt hem dan
   meteen in de HTML in plaats van pas na de CSS. Daarboven het donkere
   verloop uit Q13, exact die waarde, ook op mobiel. De tekst staat links
   uitgelijnd, want daar is het verloop het donkerst. */

.fe-hero {
  position: relative;
  display: grid;
  /* De rij moet zich aan het kader meten, niet aan de foto. Zonder dit werd de
     rij 810 px (de eigen verhouding van de foto) terwijl het kader 620 is, en
     stak de foto onder de hero uit over de volgende sectie heen. */
  /* minmax(0, 1fr) en niet 1fr: een rij heeft standaard de eigen minimumhoogte
     van zijn inhoud als ondergrens, en dat was precies die 810 px. */
  grid-template-rows: minmax(0, 1fr);
  /* Dezelfde nul in de andere richting, en om dezelfde reden: een kolom heeft
     standaard de krapste maat van zijn inhoud als ondergrens. Op 320 px gaf de
     knop in de herokaart (die niet mag afbreken) 322 px als krapste maat, en
     daarmee werd de hele hero 357 px breed in een venster van 320. */
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
  /* Zonder dit steekt de foto onder de hero uit. aspect-ratio rekent de hoogte
     uit de breedte (1440 / 1,78 = 810 px), max-height knipt alleen het kader af
     tot 620, en de foto liep dus 190 px over de volgende sectie heen. */
  overflow: hidden;
}
/* picture is van zichzelf inline; dan heeft de height: 100% van de foto niets
   om zich aan te meten en houdt hij zijn eigen verhouding aan. Als blok dat de
   hele rij vult klopt het wel, en kan object-fit de foto netjes centreren. */
.fe-hero > picture { grid-area: 1 / 1; display: block; width: 100%; height: 100%; }
.fe-hero img { width: 100%; height: 100%; object-fit: cover; }

.fe-hero::after {
  content: "";
  grid-area: 1 / 1;
  background: var(--fe-hero-verloop);
  z-index: 1;
}
.fe-hero__over {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: center;
  width: 100%;
  padding-block: var(--fe-sectie);
  text-align: left;
}
/* ---- het leesvlak in de hero (31-10-2026) ----------------------------
   De hero oogde te donker en te gesloten naast de lichte foto's verderop.
   Het verloop over de hele foto was 75 procent zwart, en moest dus kiezen
   tussen een donkere foto en leesbare tekst. Gemeten voor de wijziging:
   op desktop haalden 12 van de 27 tekstvakken hun contrast niet (de
   salie-eyebrow 1,1 waar 4,5 moet, twee h1's op 2,1 waar 3,0 moet), terwijl
   mobiel op 8 a 9:1 zat en juist te donker oogde.

   Nu doet een licht vlak achter de tekst het leeswerk, met donkere letters
   erop. De foto blijft licht, het verloop is nog een hint (22 procent), en
   het contrast hangt niet meer af van wat er toevallig achter de tekst zit.
   De waas is dezelfde truc als bij de formulierkaart over de foto. */
.fe-hero__paneel {
  max-width: 640px;
  padding: var(--fe-ritme-kaart);
  background: var(--fe-heropaneel);
  -webkit-backdrop-filter: blur(var(--fe-heropaneel-waas));
  backdrop-filter: blur(var(--fe-heropaneel-waas));
  border-radius: var(--fe-rond-vlak);
  color: var(--fe-tekst);
}
/* ---- de zachte hero (31-10-2026, voorlopig alleen de home) -----------
   Het dichte vlak van 92 procent dekte de foto af, en juist die foto moet het
   gevoel dragen. Hier een sluier die naar rechts uitvloeit tot niets, los van
   de boven- en onderrand van de hero, met donkere letters erop.

   62 procent is geen smaak maar een ondergrens plus wat lucht. Gemeten op de
   herofoto van de home: onder de tekst loopt die van L 0,01 (donkere
   raamhoeken) tot 0,88 (lucht), dus zonder iets erover haalt noch witte noch
   donkere tekst zijn contrast (1,1 tot 2,7). Met donkere letters is 50 procent
   net te weinig (introzin 4,2 bij een eis van 4,5) en 55 het minimum.

   De lichte schaduw onder de letters maakt ze knapper op een drukke foto. Die
   telt niet mee voor WCAG: het contrast staat op eigen benen. */
.fe-hero__paneel--zacht {
  max-width: 720px;
  /* ruimte aan de rechterkant, zodat de tekst nooit in het uitvloeiende deel
     van de sluier komt te staan */
  padding: var(--fe-ruimte-32) calc(var(--fe-ritme-kaart) * 4) var(--fe-ruimte-32) var(--fe-ritme-kaart);
  /* Alleen rechts vloeit de sluier uit; boven en onder blijft de rand strak.
     De volle sluier loopt door tot 78 procent, want sinds het vlak op de
     breedte van de kopbalk staat lopen de opsommingsregels verder door: een
     regel zakte naar 3,3 bij een eis van 4,5. */
  background: linear-gradient(97deg,
      rgba(252, 252, 252, calc(var(--fe-heropaneel-zacht) + 0.06)) 0%,
      rgba(252, 252, 252, var(--fe-heropaneel-zacht)) 78%,
      rgba(252, 252, 252, 0) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: var(--fe-rond-vlak);
  color: var(--fe-inkt);
}
/* Op een telefoon is het vlak zo smal dat het uitvloeiende deel onder de
   tekst zou komen: een regel haalde daar 4,4 bij een eis van 4,5. Daar dus
   een gelijkmatige sluier en gewone ruimte rechts. */
@media (max-width: 767.98px) {
  .fe-hero__paneel--zacht {
    padding: var(--fe-ritme-kaart);
    background: rgba(252, 252, 252, calc(var(--fe-heropaneel-zacht) + 0.04));
  }
}

/* De zachte hero loopt op de breedte van de kopbalk (1280) en niet op die
   van de inhoud (1080): dan staat het leesvlak onder het logo en het
   formulier onder de knop in de balk. 31-10-2026. */
.fe-hero__over:has(.fe-hero__paneel--zacht) .fe-inhoud,
.fe-hero:has(.fe-hero__paneel--zacht) .fe-hero__formulier .fe-inhoud { max-width: var(--fe-balk); }

/* Het vlak mag de boven- en onderrand van de hero niet raken: dan wordt het
   een doos in plaats van een sluier. Minder lucht boven en onder de tekst dan
   de gewone hero, en de hero mag meegroeien als de tekst niet in 620 px past
   (op de home is het vlak 593 px hoog; met de vaste hoogte werd het boven en
   onder afgeknipt). */
.fe-hero__over:has(.fe-hero__paneel--zacht) { padding-block: var(--fe-ruimte-32); }
@media (min-width: 1024px) {
  /* 680 in plaats van 620: het vlak is op de home 593 px hoog en past met zijn
     lucht niet in 620. Hoogte auto kan niet, want dan bepaalt de eigen
     verhouding van de foto de hoogte (1280 bij 720 geeft 810 px op een breed
     scherm). Zo blijft er boven en onder het vlak foto over. Alleen vanaf
     1024 px: daaronder groeit de hero met zijn inhoud mee, anders knipt hij
     het vlak af (gemeten op zeven pagina's bij 820 px). */
  .fe-hero:has(.fe-hero__paneel--zacht) { height: min(56.25vw, 680px); }
}

/* alles in inkt: olijf haalde op 13 px het contrast niet */
.fe-hero__over .fe-hero__paneel--zacht :is(h1, p, li, .fe-label, .fe-icoon) { color: var(--fe-inkt); }
.fe-hero__over .fe-hero__paneel--zacht :is(h1, p, li, .fe-label) { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); }

.fe-hero__over :is(h1, .fe-label) { color: var(--fe-kop); }
.fe-hero__over h1 { color: var(--fe-inkt); }
/* olijf en niet salie: salie haalde op een lichte ondergrond 1,1 */
.fe-hero__over .fe-label { color: var(--fe-olijf-tekst); }
.fe-hero__over .fe-icoon { color: var(--fe-olijf-tekst); }
/* de tweede knop stond wit op de foto; op het lichte vlak wordt hij inkt */
.fe-hero__knoppen .fe-knop--secundair { border-color: var(--fe-inkt); color: var(--fe-inkt); }
.fe-hero__knoppen .fe-knop--secundair:hover { background: var(--fe-inkt); color: var(--fe-wit); }
.fe-hero__tekst { max-width: 34ch; font-size: var(--fe-ts-intro); line-height: var(--fe-ts-intro-regel); }
.fe-hero__usp { display: flex; flex-wrap: wrap; gap: var(--fe-ruimte-8) var(--fe-ruimte-20); margin: var(--fe-ruimte-16) 0 0; padding: 0; list-style: none; font-size: var(--fe-ts-tekst); }
.fe-hero__usp li { display: flex; align-items: center; gap: var(--fe-ruimte-8); }
.fe-hero__knoppen { display: flex; flex-wrap: wrap; gap: var(--fe-ruimte-12); margin-top: var(--fe-ruimte-24); }
.fe-hero__knoppen .fe-knop--secundair { background: transparent; }

/* De staande uitsnede op mobiel, de liggende daarboven.
   width: 100% is hier niet optioneel: met aspect-ratio en max-height, maar
   zonder expliciete breedte, leidt de browser de BREEDTE af uit de maximale
   hoogte. Dat gaf 620 x 16/9 = 1.102 px en dus een witte strook rechts op elk
   scherm breder dan dat. */
.fe-hero { width: 100%; min-height: 420px; }
@media (min-width: 768px) {
  /* Geen aspect-ratio met max-height: dat gaf een rij van 810 px die tot 620
     werd afgeknipt, waardoor de foto vanaf de onderkant wegviel in plaats van
     gecentreerd te staan. Een directe hoogte geeft een rij die precies klopt. */
  .fe-hero { height: min(56.25vw, 620px); min-height: 480px; }
}
/* Tussen 768 en 1024 px is de hero 480 px hoog en past het leesvlak er niet
   in: op zeven pagina's stak het er tot 247 px bovenuit en knipte de hero
   (overflow: hidden) het af. Daar groeit de hero met zijn inhoud mee; de foto
   dekt de extra hoogte gewoon af (object-fit: cover). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .fe-hero { height: auto; }
}

/* Op een telefoon stond het verloop van links naar rechts over een STAANDE
   foto. Links is dan 75 procent zwart over bijna de volle breedte, dus van de
   foto bleef vrijwel niets over (ronde 4, A8). Onder 768 px loopt het verloop
   daarom van onder naar boven: onderaan .70, op 55 procent van de hoogte niets
   meer. De bovenste helft van de foto is vrij en de tekst zakt mee naar de
   onderste helft, waar het verloop donker genoeg is om wit leesbaar te houden.
   Deze regels staan na de basis, want ze hebben dezelfde specificiteit. */
@media (max-width: 767.98px) {
  /* Het verloop zit hier op het TEKSTBLOK, niet op de hele hero. Een verloop
     over de hele hoogte kan niet allebei: de bovenste helft vrijlaten en de
     tekst leesbaar houden. Het tekstblok is op een telefoon namelijk bijna zo
     hoog als de hero zelf (gemeten: 595 van de 645 px op de home). Op het blok
     loopt het verloop mee met de tekst: donker achter de letters, en precies
     erboven uit naar niets, zodat alles daarboven vrije foto is. */
  .fe-hero::after { background: none; }
  .fe-hero__over { align-self: end; background: var(--fe-hero-verloop-mobiel); }
}

/* ---- footer ---------------------------------------------------------- */

.fe-voet { background: var(--fe-inkt); color: var(--fe-papier); padding: var(--fe-sectie) 0 var(--fe-ruimte-32); }
.fe-voet__raster { display: grid; grid-template-columns: 1fr; gap: var(--fe-ruimte-32); }
@media (min-width: 768px) { .fe-voet__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .fe-voet__raster { grid-template-columns: 1.5fr 1.2fr repeat(3, 1fr); } }

/* Op telefoon stonden alle vijf de onderdelen onder elkaar en werd de voet
   een scrollparcours (31-10-2026). Nu staan het merk en Andrea over de volle
   breedte, en delen de drie linklijsten twee kolommen: de lange lijst links
   over twee rijen, de twee korte rechts eronder. De plek komt uit de sleutel
   van de kolom en niet uit de volgorde, zodat een kolom erbij of eraf de
   indeling niet stilletjes verschuift. */
@media (max-width: 767.98px) {
  .fe-voet__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fe-ruimte-32) var(--fe-ruimte-16);
  }
  .fe-voet__merk, .fe-voet__kolom--contact { grid-column: 1 / -1; }
  .fe-voet__kolom--paginas { grid-column: 1; grid-row: 3 / span 2; }
  .fe-voet__kolom--locatie { grid-column: 2; grid-row: 3; }
  .fe-voet__kolom--waarden { grid-column: 2; grid-row: 4; }
  .fe-voet ul { gap: var(--fe-ruimte-12); }
}

/* Andrea bij "Neem contact op" (31-10-2026). Dezelfde opbouw als de beltegel
   in het CTA-blok: ronde foto naast haar naam, functie en wanneer ze
   antwoordt. Op de donkere voet staat de foto op salie, zodat hij ook
   uitkomt zolang hij laadt. */
.fe-voetpersoon {
  display: flex; align-items: center; gap: var(--fe-ruimte-12);
  margin-bottom: var(--fe-ruimte-16);
}
/* Op telefoon loopt de kolom over de volle breedte en staat de foto naast
   haar naam. Vanaf 768 px is de kolom een smalle footerkolom van circa 200
   px: daar brak "Andrea Siemons" over twee regels en viel de belofte in
   vier. Daarom staat de foto daar boven de tekst. */
@media (min-width: 768px) {
  .fe-voetpersoon { flex-direction: column; align-items: flex-start; }
}
.fe-voetpersoon__foto {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--fe-salie);
  object-fit: cover;
}
.fe-voetpersoon__wie { display: flex; flex-direction: column; gap: var(--fe-ruimte-4); min-width: 0; }
.fe-voetpersoon__naam { font-family: var(--fe-font-kop); font-weight: 700; font-size: var(--fe-ts-tekst); }
.fe-voetpersoon__rol { font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); opacity: .8; }

.fe-voet__merk img { max-width: 180px; max-height: 64px; }
.fe-voet__payoff { margin-top: var(--fe-ruimte-16); font-size: var(--fe-ts-tekst); max-width: 38ch; }
.fe-voet h2 { font-size: var(--fe-ts-h4); color: var(--fe-papier); margin-bottom: var(--fe-ruimte-12); }
.fe-voet ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--fe-ruimte-8); font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }
.fe-voet a { color: var(--fe-papier); text-decoration: none; }
.fe-voet a:hover { color: var(--fe-salie); text-decoration: underline; }
.fe-voet__onder {
  display: flex; flex-wrap: wrap; gap: var(--fe-ruimte-8) var(--fe-ruimte-24);
  margin-top: var(--fe-ruimte-32); padding-top: var(--fe-ruimte-16);
  border-top: 1px solid rgba(252, 252, 252, 0.18);
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
}

/* ---- zo werkt het: drie stappen direct onder de hero ----------------- */

.fe-stappen { display: grid; grid-template-columns: 1fr; gap: var(--fe-ruimte-16); margin: 0; padding: 0; list-style: none; counter-reset: stap; }
@media (min-width: 768px) { .fe-stappen { grid-template-columns: repeat(3, 1fr); } }
.fe-stappen li { display: flex; align-items: flex-start; gap: var(--fe-ruimte-12); counter-increment: stap; }
.fe-stappen li::before {
  content: counter(stap);
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--fe-olijf); color: var(--fe-wit);
  border-radius: 50%;
  font-family: var(--fe-font-kop); font-weight: 700; font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
}

/* ---- fotocollage: een grote en vier kleine --------------------------- */

.fe-collage { display: grid; gap: var(--fe-ritme-kaarten); grid-template-columns: repeat(2, 1fr); }
/* Lucht tussen de laatste regel tekst en de foto's eronder (18-10). Zonder
   dit begon de foto direct onder de zin en leek hij erbij te horen als
   onderschrift in plaats van als beeld bij het blok. */
.fe-meet + .fe-collage, .fe-punten + .fe-collage { margin-top: var(--fe-ruimte-24); }
/* en net zo tussen de zin die de opsomming aankondigt en de opsomming zelf */
.fe-meet + .fe-punten { margin-top: var(--fe-ruimte-24); }
@media (min-width: 768px) { .fe-collage { grid-template-columns: repeat(4, 1fr); } }
.fe-collage a { display: block; border-radius: var(--fe-rond-vlak); overflow: hidden; }
.fe-collage img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.fe-collage > :first-child { grid-column: span 2; }
@media (min-width: 768px) { .fe-collage > :first-child { grid-row: span 2; grid-column: span 2; } }
@media (min-width: 768px) { .fe-collage > :first-child img { aspect-ratio: 1 / 1; } }
/* Een blok met maar een foto (ronde 4, punt 16: de lunchwandeling) stond op
   de halve breedte met een leeg vlak ernaast, alsof er een tegel ontbrak, en
   werd bovendien vierkant uitgesneden. Deze regels staan na de twee
   mediaquery's hierboven, want die maken :first-child juist groot en
   vierkant; een enkele foto is ook de eerste. */
.fe-collage > :only-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .fe-collage > :only-child { grid-row: auto; grid-column: 1 / -1; }
  .fe-collage > :only-child img { aspect-ratio: 2 / 1; }
}

/* Zes foto's (ronde 4, punt 11). Met vier kolommen zou de zesde alleen op een
   nieuwe rij komen, met drie gaten ernaast. Drie kolommen maakt het precies
   vol: de grote beslaat twee bij twee, daarnaast twee en daaronder drie. Op
   een telefoon staan ze alle zes even groot in twee kolommen; de grote foto
   zou daar een halve rij overhouden. */
@media (max-width: 767.98px) {
  .fe-collage--zes > :first-child { grid-column: auto; }
  .fe-collage--zes > :first-child img { aspect-ratio: 3 / 2; }
}
@media (min-width: 768px) {
  .fe-collage--zes { grid-template-columns: repeat(3, 1fr); }
  /* De grote foto blijft bij vier kolommen vierkant; bij drie kolommen is hij
     twee derde van de breedte en wordt een vierkant daar 636 px hoog. Dat
     maakte het blok 856 px en gaf de twee foto's ernaast een vierkante
     uitsnede terwijl de onderste rij 3:2 was. Met 3:2 op de grote foto zijn
     alle zes dezelfde vorm en is het blok 648 px. */
  .fe-collage--zes > :first-child img { aspect-ratio: 3 / 2; }
}

/* Een rij foto's van gelijk gewicht (ronde 3, A8). De collage hierboven maakt
   de eerste foto groot en vierkant; dat is bedoeld voor de set van vijf onder
   een hero. Bij twee of drie foto's naast een tekstblok staat dat scheef. */
.fe-collage--rij > :first-child { grid-column: auto; }
.fe-collage--rij img { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
  .fe-collage--rij { grid-template-columns: repeat(2, 1fr); }
  .fe-collage--rij > :first-child { grid-row: auto; grid-column: auto; }
  .fe-collage--rij > :first-child img { aspect-ratio: 3 / 2; }
}

/* Beeld bij een stap in de tijdlijn (ronde 3, A10, schets M14). De foto staat
   rechts van de regel en schuift op een telefoon onder de tekst, zodat de
   tijden onder elkaar blijven staan. */
.fe-tijdlijn__beeld { display: block; margin-top: var(--fe-ruimte-8); }
.fe-tijdlijn__beeld img {
  display: block; width: 100%; max-width: 320px; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--fe-rond-vlak);
}
@media (min-width: 768px) {
  /* met beeld erbij past de lijst niet meer in de tekstkolom; anders wordt de
     regel tekst samengeknepen tot twee woorden per regel */
  .fe-tijdlijn:has(.fe-tijdlijn__beeld) { max-width: none; }
  .fe-tijdlijn li:has(.fe-tijdlijn__beeld) { align-items: center; }
  .fe-tijdlijn__beeld { margin-top: 0; margin-left: auto; }
  .fe-tijdlijn__beeld img { width: 220px; }
}

/* De laatste tegel van de collage met "+ X foto's" (ronde 3, A9). Daarachter
   staan de foto's van de ruimtegalerijen als verborgen links; de lightbox
   leest die mee, zodat je vanaf hier door alle foto's bladert. */
/* twee klassen diep, want .fe-collage a zet display:block en die is
   specifieker dan een losse klasse. Zelfde reden als bij
   .fe-galerij__beeld.is-verborgen. */
.fe-collage a.fe-collage__verborgen { display: none; }
.fe-collage__meer { position: relative; display: block; }
.fe-collage__meer > a { display: block; height: 100%; }
.fe-collage__meer-tekst {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(41, 48, 56, 0.55);
  border-radius: var(--fe-rond-vlak);
  color: var(--fe-papier);
  font-family: var(--fe-font-kop); font-weight: 700;
  font-size: var(--fe-ts-h4);
  pointer-events: none;
}

/* ---- groepsfilter ---------------------------------------------------- */

.fe-groepen { display: flex; flex-wrap: wrap; gap: var(--fe-ruimte-8); margin: var(--fe-ruimte-16) 0 var(--fe-ruimte-24); padding: 0; list-style: none; }
.fe-groep {
  min-height: var(--fe-raak);
  padding: var(--fe-ruimte-8) var(--fe-ruimte-20);
  background: var(--fe-wit);
  border: 2px solid var(--fe-inkt);
  border-radius: var(--fe-rond-knop);
  font-family: var(--fe-font-kop); font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); font-weight: 700;
  color: var(--fe-inkt);
  cursor: pointer;
}
.fe-groep[aria-pressed="true"] { background: var(--fe-inkt); color: var(--fe-wit); }
.fe-kaart[hidden] { display: none; }

/* Op mobiel staan er vier kaarten, de rest achter een knop. Acht hele kaarten
   onder elkaar is 4.390 px, bijna veertig procent van de pagina. */
.fe-meer { width: 100%; margin-top: var(--fe-ruimte-16); }
@media (min-width: 1024px) { .fe-meer { display: none !important; } }
/* De regel onder het groepsfilter: geen treffer, of bij de grootste groep
   de hele locatie (S5). Zelfde maat als de lopende tekst eromheen. */
.fe-geenmatch, .fe-heel { font-size: var(--fe-ts-tekst); }

/* ---- bereikbaar ------------------------------------------------------ */

.fe-punten { display: grid; grid-template-columns: 1fr; gap: var(--fe-ruimte-16); margin: 0 0 var(--fe-ruimte-24); padding: 0; list-style: none; }
@media (min-width: 768px) { .fe-punten { grid-template-columns: repeat(var(--punten-kolommen, 3), 1fr); } }
/* Een opsomming zonder icoontje: een streepje in de merkkleur, zoals in de
   prijskaarten. Zonder dat stonden de regels als kale tekst in kolommen en
   zag je niet dat het een lijst was. */
/* Een punt met een eigen naam (18-10): "Frans: croissants, jam, ..." las als
   een lange regel met een dubbele punt in het midden. Nu een kaartje met de
   naam erboven, in dezelfde stijl als de andere kaarten op de site. */
.fe-punten--kaart { gap: var(--fe-ritme-kaarten); }
.fe-punten--kaart li.fe-puntkaart {
  display: block; padding: var(--fe-ritme-kaart);
  background: var(--fe-wit); border: var(--fe-kaartrand); border-radius: var(--fe-rond-vlak);
}
.fe-punten--kaart .fe-puntkaart h3 { margin: 0 0 var(--fe-ruimte-4); font-size: var(--fe-ts-h4); }
.fe-punten--kaart .fe-puntkaart p { margin: 0; font-size: var(--fe-ts-tekst); line-height: var(--fe-ts-tekst-regel); }

.fe-punten--streep li { position: relative; padding-left: var(--fe-ruimte-16); }
.fe-punten--streep li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 7px; height: 1px; background: var(--fe-olijf);
}
.fe-punten li { display: flex; align-items: flex-start; gap: var(--fe-ruimte-12); }
.fe-punten .fe-icoon { color: var(--fe-olijf); margin-top: 2px; }

/* ---- prijs ----------------------------------------------------------- */

.fe-prijs { display: grid; gap: var(--fe-ruimte-16); }
@media (min-width: 768px) { .fe-prijs { grid-template-columns: 1fr 1.3fr; align-items: start; } }
.fe-prijs__regels { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--fe-ruimte-8); }
.fe-prijs__regels li { font-family: var(--fe-font-kop); font-size: var(--fe-ts-h4); font-weight: 700; color: var(--fe-inkt); }
.fe-prijs__voorbeeld { padding: var(--fe-ruimte-16); background: var(--fe-wit); border-radius: var(--fe-rond-vlak); font-size: var(--fe-ts-tekst); }

/* ---- FAQ ------------------------------------------------------------- */

.fe-faq { max-width: var(--fe-tekstkolom); }
.fe-faq details { border-bottom: 1px solid rgba(41, 48, 56, 0.14); }
.fe-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fe-ruimte-16);
  min-height: var(--fe-raak);
  padding: var(--fe-ruimte-16) 0;
  font-family: var(--fe-font-kop); font-size: var(--fe-ts-h4); font-weight: 700;
  color: var(--fe-inkt);
  cursor: pointer;
  list-style: none;
}
.fe-faq summary::-webkit-details-marker { display: none; }
.fe-faq summary::after {
  content: ""; flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.fe-faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.fe-faq details p { padding-bottom: var(--fe-ruimte-16); }

/* ---- blokkenraster (maak er een dag van, waarom trainers terugkomen) -- */

.fe-blokken { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fe-ritme-kaarten); }
@media (min-width: 768px) { .fe-blokken { grid-template-columns: repeat(3, 1fr); gap: var(--fe-ruimte-16); } }
.fe-blok { background: var(--fe-wit); border: var(--fe-kaartrand); border-radius: var(--fe-rond-vlak); overflow: hidden; }
.fe-blok img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Een tegel zonder foto reserveert geen fotoruimte. Een leeg grijs vlak van 4:3
   per tegel kostte op de heidagpagina ruim 2.000 px aan niets. */
.fe-blok__body { padding: var(--fe-ritme-kaart); }
.fe-blok h3 { margin-bottom: var(--fe-ruimte-12); font-size: var(--fe-ts-h4); }
.fe-blok p { margin: 0; font-size: var(--fe-ts-tekst); line-height: var(--fe-ts-tekst-regel); }

/* ---- tijdlijn (voorbeeldprogramma, schets M14) ----------------------- */

.fe-tijdlijn { margin: var(--fe-ruimte-16) 0 0; padding: 0; list-style: none; max-width: var(--fe-tekstkolom); }
.fe-tijdlijn li { display: flex; gap: var(--fe-ruimte-16); padding: var(--fe-ruimte-12) 0; border-bottom: 1px solid rgba(41, 48, 56, 0.12); }
.fe-tijd { flex-shrink: 0; width: 64px; font-family: var(--fe-font-kop); font-weight: 700; color: var(--fe-olijf-tekst); }

/* ---- ligging: kaart met reistijden ----------------------------------- */

.fe-ligging { display: grid; grid-template-columns: 1fr; gap: var(--fe-ruimte-24); align-items: center; margin-top: var(--fe-ruimte-16); }
@media (min-width: 768px) { .fe-ligging { grid-template-columns: 1.2fr 1fr; } }
.fe-nlkaart { width: 100%; height: auto; }
.fe-nlkaart__provincie { fill: #EFEDE8; stroke: var(--fe-wit); stroke-width: 1; }
.fe-nlkaart__provincie.is-uitgelicht { fill: #DCDACF; }
.fe-nlkaart__water { fill: #D8DFDC; }
.fe-nlkaart__ring { fill: none; stroke: var(--fe-olijf); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: 0.75; }
.fe-nlkaart__ringlabel { fill: var(--fe-olijf-tekst); font-family: var(--fe-font-kop); font-size: 11px; font-weight: 700; text-anchor: middle; }
.fe-nlkaart__stip { fill: var(--fe-inkt); }
.fe-nlkaart__stad { fill: var(--fe-tekst); font-family: var(--fe-font-tekst); font-size: 11px; }
.fe-nlkaart__stad.is-accent { fill: var(--fe-inkt); font-weight: 600; }
.fe-nlkaart__halo { fill: var(--fe-actie); opacity: 0.12; }
.fe-nlkaart__speld { fill: var(--fe-actie); }
.fe-nlkaart__speldoog { fill: var(--fe-wit); }
.fe-nlkaart__hier { fill: var(--fe-inkt); font-family: var(--fe-font-kop); font-size: 13px; font-weight: 700; }
.fe-nlkaart__hier-plaats { fill: var(--fe-tekst); font-family: var(--fe-font-tekst); font-size: 11px; }

/* De tussenkop van de reistijden binnen het blok Bezoek ons (ronde 4, punt
   17). Hij volgt op de twee foto's en heeft daar lucht boven nodig. */
.fe-gegevens__kop { margin-top: var(--fe-sectie); }

.fe-reistijden { margin: var(--fe-ruimte-16) 0 0; padding: 0; list-style: none; max-width: 320px; }
.fe-reistijden li { display: flex; justify-content: space-between; gap: var(--fe-ruimte-16); padding: var(--fe-ruimte-8) 0; border-bottom: 1px solid rgba(41, 48, 56, 0.12); font-size: var(--fe-ts-tekst); }

/* ---- reviewkaarten --------------------------------------------------- */

.fe-reviews { display: grid; grid-template-columns: 1fr; gap: var(--fe-ritme-kaarten); }
@media (min-width: 768px) { .fe-reviews { grid-template-columns: repeat(3, 1fr); } }
/* Een review die bij een blok hoort (ronde 2, punt 16) staat eronder, niet in
   een rij van drie. Een enkele quote over de volle breedte leest als een
   banner; begrensd leest hij als wat hij is: iemand die dit zelf schreef. */
.fe-reviews--bij { margin-top: var(--fe-ruimte-16); }
@media (min-width: 768px) {
  .fe-reviews--een { grid-template-columns: minmax(0, 62ch); }
}
/* Hoort de review bij een tegelraster, dan staat hij in het raster: vier
   tegels op drie kolommen lieten de tweede rij voor twee derde leeg
   (31-10-2026). De quote vult de plek naast de vierde tegel en de kaart
   loopt tot onderaan, zodat de rij netjes afsluit. */
.fe-blokken__review { grid-column: 1 / -1; margin-top: 0; }
.fe-blokken__review .fe-review { height: 100%; display: flex; flex-direction: column;
  justify-content: center; }
@media (min-width: 768px) {
  .fe-blokken__review { grid-column: span 2; grid-template-columns: minmax(0, 1fr); }
}
/* De kaart is wit. Op een warme sectie valt hij daarmee op, op een witte
   sectie viel hij weg; de dunne kaartrand van de site maakt hem overal een
   kaart. Zelfde stijl als .fe-blok en .fe-prijskaart. */
.fe-review {
  margin: 0; padding: var(--fe-ritme-kaart);
  background: var(--fe-wit); border: var(--fe-kaartrand); border-radius: var(--fe-rond-vlak);
}
.fe-review p { margin: 0 0 var(--fe-ruimte-12); font-size: var(--fe-ts-tekst); line-height: var(--fe-ts-tekst-regel); }
.fe-review cite { font-style: normal; font-weight: 700; font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); color: var(--fe-inkt); }

/* De kop van een reviewkaart (ronde 4, punt 22): wie, wanneer, hoeveel
   sterren. Een losse quote met een naam eronder zegt niet waar hij vandaan
   komt; dit wel. Een foto van de reviewer hebben we niet, dus staan er
   initialen in een rondje, zoals Trustindex zelf ook doet bij een profiel
   zonder foto. */
.fe-review__kop { display: flex; align-items: center; gap: var(--fe-ruimte-8); }
.fe-review__avatar {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fe-olijf); color: var(--fe-wit);
  font-size: var(--fe-ts-label); font-weight: 700; letter-spacing: 0.02em;
}
.fe-review__wie { display: flex; flex-direction: column; min-width: 0; }
.fe-review__wie cite { margin: 0; }
.fe-review__datum { font-size: var(--fe-ts-label); line-height: 1.3; color: var(--fe-tekst); }
.fe-review__bron { margin-left: auto; font-size: var(--fe-ts-label); color: var(--fe-tekst); }
.fe-review__sterren { display: block; margin: var(--fe-ruimte-8) 0 var(--fe-ruimte-4); }
.fe-review__sterren + p { margin-top: 0; }
.fe-review .fe-review__kop + p { margin-top: var(--fe-ruimte-12); }

/* ---- de reviewcarrousel in het CTA-blok (ronde 4, punt 4) ------------ */
/* Een rij die je kunt vegen, met knoppen ernaast. De kaart eromheen is al
   wit met een rand (.fe-reviewkaart), dus de kaarten in de rij laten hun
   eigen omlijsting vallen: anders staat er een kaart in een kaart. */
.fe-reviewrij { min-width: 0; margin-top: var(--fe-ruimte-8); }
.fe-reviewrij__spoor {
  display: flex; margin: 0; padding: 0; list-style: none;
  /* overflow-y hoort er expliciet bij: met alleen overflow-x: auto zet de
     browser de andere as ook op auto, en dan tekent macOS er een verticale
     schuifbalk bij die nergens heen schuift. De focusring van de link
     eromheen zou door hidden worden afgeknipt, dus die leggen we naar binnen
     met outline-offset. */
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fe-reviewrij__spoor::-webkit-scrollbar { display: none; }
/* geen gap: de knoppen rekenen met hele vensterbreedtes, en met ruimte
   ertussen klopt die rekensom niet meer */
.fe-reviewrij__item { flex: 0 0 100%; scroll-snap-align: start; }
.fe-reviewrij .fe-review { padding: 0; background: none; border: 0; }
/* In de smalle zijkolom past het woord Google er niet naast; de scoreregel
   erboven zegt al waar deze reviews vandaan komen. */
.fe-reviewrij .fe-review__bron { display: none; }
.fe-reviewrij .fe-review__link:focus-visible { outline-offset: -3px; }
/* Alle kaarten in de rij zijn even hoog, dus bepaalt de langste review de
   hoogte van het hele blok. Vijf regels en dan afkappen houdt dat in de hand.
   De volledige tekst blijft in de HTML staan, dus voor een schermlezer en
   voor Google is er niets weg, en de kaart linkt naar de hele review. */
.fe-reviewrij .fe-review p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  overflow: hidden;
}
.fe-reviewrij__balk {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--fe-ruimte-4); margin-top: var(--fe-ruimte-4);
}
.fe-reviewrij__teller { margin-right: auto; font-size: var(--fe-ts-label); color: var(--fe-tekst); }
.fe-reviewrij__knop {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: var(--fe-kaartrand); border-radius: 50%;
  color: var(--fe-inkt); font-size: 20px; line-height: 1; cursor: pointer;
}
.fe-reviewrij__knop:hover { background: var(--fe-warmgrijs); }
.fe-reviewrij__knop[disabled] { opacity: .35; cursor: default; }
.fe-reviewrij__knop[disabled]:hover { background: none; }

/* ---- ruimtepagina (rapport 11.3) ------------------------------------- */

.fe-ruimtebalk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--fe-ruimte-16);
  /* Sinds de knoppen eruit zijn (13-10-2026) is dit een regel tekst. Die hoeft
     geen 16 px eigen ruimte meer; de sectie eromheen is ook ingekort. */
  padding: var(--fe-ruimte-4) 0;
  font-family: var(--fe-font-kop); font-weight: 700; color: var(--fe-inkt);
}
/* De compacte sectie geeft standaard 40 px boven en onder. Dat is bedoeld voor
   blokken met inhoud; om een enkele regel kenmerken is het te veel. */
.fe-sectie--compact:has(> .fe-inhoud > .fe-ruimtebalk) {
  padding-top: var(--fe-ruimte-16);
  padding-bottom: var(--fe-ruimte-16);
}

/* Onder 768 px (ronde 4, A2): de grote foto over de volle breedte in 3:2, en
   daaronder de vier kleine op een rij, vierkant. Ze stonden groot onder elkaar,
   waardoor de galerij 1.165 px hoog werd en de prijs en de knoppen twee
   schermen naar beneden zakten. Nu is het blok ongeveer 290 px. */
.fe-galerij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fe-galerij > :first-child { grid-column: 1 / -1; }
.fe-galerij__beeld {
  position: relative; display: block;
  border-radius: var(--fe-rond-vlak); overflow: hidden;
  /* de verhouding staat op het klikvlak, niet op de img: die heeft height:100%
     en dan telt aspect-ratio op de img niet mee */
  aspect-ratio: 1 / 1;
}
.fe-galerij > :first-child.fe-galerij__beeld { aspect-ratio: 3 / 2; }
.fe-galerij__beeld.is-verborgen { display: none; }
.fe-galerij img { width: 100%; height: 100%; object-fit: cover; }
.fe-galerij .fe-beeld { height: 100%; }

@media (min-width: 768px) {
  /* een grote links, vier kleine rechts in 2 x 2 (S4, ronde 2 punt 10) */
  .fe-galerij { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--fe-ritme-kaarten); }
  .fe-galerij > :first-child { grid-row: span 2; grid-column: auto; }
  .fe-galerij__beeld,
  .fe-galerij > :first-child.fe-galerij__beeld { aspect-ratio: auto; }
  .fe-galerij img { aspect-ratio: 3 / 2; }
  .fe-galerij > :first-child img { aspect-ratio: 4 / 3; }
}
.fe-galerij__meer { display: none; }
}
@media (min-width: 768px) {
  /* een grote links, vier kleine rechts in 2 x 2 (S4, ronde 2 punt 10) */
  .fe-galerij { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .fe-galerij > :first-child { grid-row: span 2; }
}
.fe-galerij__beeld { position: relative; display: block; border-radius: var(--fe-rond-vlak); overflow: hidden; }
.fe-galerij__beeld.is-verborgen { display: none; }
.fe-galerij img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (min-width: 768px) { .fe-galerij > :first-child img { aspect-ratio: 4 / 3; } }
.fe-galerij__meer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(41, 48, 56, 0.55);
  color: var(--fe-wit);
  font-family: var(--fe-font-kop); font-size: var(--fe-ts-h4); font-weight: 700;
}

/* de overlay hoort bij de compacte mobiele vorm; op desktop staat er een knop
   "Alle foto's (X)" onder de galerij. Deze regel staat bewust na de definitie
   hierboven: anders wint die op volgorde. */
@media (min-width: 768px) { .fe-galerij__meer { display: none; } }

.fe-beeld { position: relative; margin: 0; height: 100%; }

.fe-tags { display: flex; flex-wrap: wrap; gap: var(--fe-ruimte-8); margin: 0 0 var(--fe-ruimte-16); padding: 0; list-style: none; }
.fe-tags li {
  padding: var(--fe-ruimte-8) var(--fe-ruimte-16);
  background: var(--fe-warmgrijs);
  border-radius: var(--fe-rond-knop);
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
}
.fe-garanties--kolom { flex-direction: column; gap: var(--fe-ruimte-12); }
/* Dezelfde rij vinkjes, maar als zelfstandige opsomming in een tekstblok:
   wat ruimer, met lucht erboven omdat er een zin aan voorafgaat (18-10). */
.fe-garanties--ruim { gap: var(--fe-ruimte-12) var(--fe-ruimte-24); margin-top: var(--fe-ruimte-24); }

/* Naar een andere ruimte (8.5). Was een rij grijze woordjes zonder kop; nu
   kaartjes, zodat zichtbaar is dat het een keuze is. */
.fe-ruimtekeuzes {
  display: grid;
  /* Vaste kolommen in plaats van auto-fill: met een minimumbreedte werden het
     er op een breed scherm zes, en dan breken "Experience Center" en de naam
     van de huidige ruimte over twee regels. Twee op een telefoon, vier daarboven,
     dus altijd volle rijen bij acht ruimtes. */
  /* Sinds het fotootje erbij staat (ronde 2, punt 17) is een telefoon een
     kolom: met twee kolommen bleef er naast 56 px foto nog geen 70 px over
     voor de naam, en liep "Experience Center" buiten de kaart. */
  grid-template-columns: 1fr;
  gap: var(--fe-ruimte-12);
  margin: var(--fe-ruimte-24) 0 0;
  padding: 0;
  list-style: none;
}
.fe-ruimtekeuze {
  position: relative;
  display: flex;
  /* Standaard is de aanraakvariant uit 8.5: het fotootje klein naast de naam.
     Een scherm met een muisaanwijzer krijgt verderop de hovervariant. */
  flex-direction: row;
  align-items: center;
  gap: var(--fe-ruimte-12);
  height: 100%;
  padding: var(--fe-ruimte-12) var(--fe-ruimte-16);
  background: var(--fe-wit);
  border: var(--fe-kaartrand);
  border-radius: var(--fe-rond-vlak);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 160ms ease;
}
a.fe-ruimtekeuze:hover,
a.fe-ruimtekeuze:focus-visible { box-shadow: 0 8px 24px rgba(41, 48, 56, 0.1); }
.fe-ruimtekeuze__tekst { display: flex; flex-direction: column; gap: var(--fe-ruimte-4); min-width: 0; }
/* Het fotootje bij de knop (ronde 2, punt 17). Plek 1 van de galerij van die
   ruimte, in de kleinste webp (circa 15 kB), lui geladen. */
.fe-ruimtekeuze__beeld {
  flex: none;
  width: 56px; height: 42px;
  overflow: hidden;
  border-radius: var(--fe-rond-vlak);
  background: var(--fe-warmgrijs);
}
.fe-ruimtekeuze__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fe-ruimtekeuze__naam {
  font-family: var(--fe-font-kop); font-weight: 700;
  font-size: var(--fe-ts-h4); color: var(--fe-inkt);
  overflow-wrap: break-word;
}
.fe-ruimtekeuze__maat {
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
  color: var(--fe-tekst);
}
/* De ruimte waar je al bent: wel in de rij, niet klikbaar. */
.fe-ruimtekeuze.is-hier { background: var(--fe-salie); border-color: transparent; }
.fe-ruimtekeuze__hier {
  margin-top: var(--fe-ruimte-4);
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
  font-weight: 700; color: var(--fe-inkt);
}
@media (min-width: 600px) {
  .fe-ruimtekeuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .fe-ruimtekeuzes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Op een scherm met een echte muisaanwijzer staat het fotootje niet naast de
   naam maar erboven, en alleen bij hover of toetsenbordfocus: 180 bij 120,
   afgeronde hoeken, zachte schaduw, 150 ms. Zo blijft de rij rustig en zie je
   de ruimte toch voor je klikt. (8.5, ronde 2 punt 17) */
/* Pas vanaf 768 px, want daar staan de kaartjes in vier kolommen. Daaronder
   blijft ook met een muis de kleine variant staan: in twee kolommen zou het
   fotootje steeds de kaart erboven afdekken. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .fe-ruimtekeuze { flex-direction: column; align-items: stretch; gap: var(--fe-ruimte-4); }
  .fe-ruimtekeuze__beeld {
    position: absolute;
    bottom: calc(100% + var(--fe-ruimte-8));
    left: 50%;
    z-index: 2;
    width: 180px; height: 120px;
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 12px 28px rgba(41, 48, 56, 0.32);
    transition: opacity 150ms ease, transform 150ms ease;
  }
  a.fe-ruimtekeuze:hover .fe-ruimtekeuze__beeld,
  a.fe-ruimtekeuze:focus-visible .fe-ruimtekeuze__beeld {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  /* De onderste rij klapt om: boven de kaart zou het fotootje de kaart erboven
     afdekken, en dan lijkt het bij de verkeerde ruimte te horen. */
  .fe-ruimtekeuzes > li:nth-child(n+5) .fe-ruimtekeuze__beeld {
    bottom: auto;
    top: calc(100% + var(--fe-ruimte-8));
    transform: translateX(-50%) translateY(-6px);
  }
  .fe-ruimtekeuzes > li:nth-child(n+5) a.fe-ruimtekeuze:hover .fe-ruimtekeuze__beeld,
  .fe-ruimtekeuzes > li:nth-child(n+5) a.fe-ruimtekeuze:focus-visible .fe-ruimtekeuze__beeld {
    transform: translateX(-50%) translateY(0);
  }
}

/* De rij met de twee knoppen. 8.5 wil ze links en rechts van de rij; daar is
   pas vanaf 1.280 px ruimte voor zonder dat "Experience Center" over drie
   regels breekt. Daaronder staan ze eronder, verdeeld over de breedte. */
.fe-ruimtenav__rij {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fe-ruimte-16);
  margin-top: var(--fe-ruimte-24);
}
.fe-ruimtenav__rij .fe-ruimtekeuzes { flex: 1 1 100%; order: 1; margin-top: 0; }
.fe-ruimtenav__pijl--vorige { order: 2; margin-right: auto; }
.fe-ruimtenav__pijl--volgende { order: 3; margin-left: auto; text-align: right; }
.fe-ruimtenav__pijl {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none;
  color: var(--fe-olijf-tekst);
}
.fe-ruimtenav__label {
  font-family: var(--fe-font-kop); font-weight: 700;
  white-space: nowrap;
}
.fe-ruimtenav__wie {
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
  white-space: nowrap; opacity: .8;
}
.fe-ruimtenav__pijl:hover .fe-ruimtenav__label,
.fe-ruimtenav__pijl:focus-visible .fe-ruimtenav__label { text-decoration: underline; }
@media (min-width: 1280px) {
  .fe-ruimtenav__rij { flex-wrap: nowrap; }
  .fe-ruimtenav__rij .fe-ruimtekeuzes { flex: 1 1 auto; order: 2; }
  .fe-ruimtenav__pijl { flex: none; width: 150px; }
  .fe-ruimtenav__pijl--vorige { order: 1; margin-right: 0; }
  .fe-ruimtenav__pijl--volgende { order: 3; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fe-ruimtekeuze, .fe-ruimtekeuze__beeld { transition: none; }
}

.fe-ruimte-twee { display: grid; gap: var(--fe-ruimte-32); }
@media (min-width: 1024px) { .fe-ruimte-twee { grid-template-columns: 1fr 340px; align-items: start; } }
/* De rechterkolom bevat alleen nog de compacte CTA, en die hoort volgens 11.3
   wel mee te bewegen. "Wat zit erbij" en "Wat kost het" staan nu links en
   blijven dus staan. */
.fe-ruimte-zij { position: static; }
@media (min-width: 1024px) { .fe-ruimte-zij { position: sticky; top: 100px; align-self: start; } }

/* ---- vergelijkingstabel (schets M12) --------------------------------- */

.fe-tabelwikkel { overflow-x: auto; margin-top: var(--fe-ruimte-16); }
.fe-tabel { width: 100%; border-collapse: collapse; font-size: var(--fe-ts-tekst); }
.fe-tabel th, .fe-tabel td { padding: var(--fe-ruimte-12); text-align: left; border-bottom: 1px solid rgba(41,48,56,0.14); white-space: nowrap; }
.fe-tabel th { font-family: var(--fe-font-kop); font-weight: 700; color: var(--fe-inkt); }
.fe-tabel tbody tr:hover { background: var(--fe-warmgrijs); }

/* ---- prijskaarten ---------------------------------------------------- */

.fe-prijskaarten { display: grid; grid-template-columns: 1fr; gap: var(--fe-ritme-kaarten); }
@media (min-width: 768px) { .fe-prijskaarten { grid-template-columns: repeat(3, 1fr); } }
/* Ronde 4, punt 15: de drie kaarten waren even hoog, maar hun foto's niet
   gelijk uitgelijnd. De beschrijving van de middelste is twee regels en die
   van de andere drie, dus begon die foto 25 px hoger en hield de kaart
   onderaan ruimte over. De kaart is nu een kolom en de foto wordt naar
   beneden geduwd: alle drie de foto's beginnen en eindigen op dezelfde
   hoogte, hoe lang de tekst ook is. */
.fe-prijskaart {
  display: flex; flex-direction: column;
  padding: var(--fe-ruimte-24); background: var(--fe-wit);
  border: var(--fe-kaartrand); border-radius: var(--fe-rond-vlak);
}
/* Subgrid, zodat de vier delen van elke prijskaart (kop, omschrijving, prijs
   met uitklapper, foto) in een rij op dezelfde lijn staan. De omschrijvingen
   zijn 2 of 3 regels; daardoor begon de prijs per kaart op een andere hoogte
   (gemeten 25-10-2026: 1032 tegen 1059 px in dezelfde rij). Alleen vanaf
   768 px, want daaronder staat elke kaart op zijn eigen regel. Deze regel
   staat bewust na de regel hierboven: hij vervangt display: flex. */
@media (min-width: 768px) {
  .fe-prijskaart {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}
.fe-prijskaart h3 { margin-bottom: var(--fe-ruimte-12); font-size: var(--fe-ts-h4); }
.fe-prijskaart__bedrag { display: block; font-family: var(--fe-font-kop); font-size: var(--fe-ts-h2); font-weight: 700; line-height: 1.1; color: var(--fe-inkt); }
/* De prijs is een blok op zichzelf, met lucht eronder. Zonder die marge
   plakte "per persoon, excl. btw" tegen de beschrijving eronder en leek de
   kaart volgepropt. */
.fe-prijskaart__prijs { margin: 0 0 var(--fe-ruimte-16); }
.fe-prijskaart__prijs .fe-klein { display: block; margin-top: var(--fe-ruimte-4); }

/* De prijs als uitklapper (ronde 4, punt 21). De hele prijsregel is de knop,
   met een pijltje dat omklapt. list-style none plus ::-webkit-details-marker
   haalt het standaarddriehoekje weg, dat anders voor het bedrag komt te
   staan. */
.fe-prijskaart__meer { margin: 0; }
.fe-prijskaart__meer > summary {
  list-style: none; cursor: pointer; border-radius: var(--fe-rond-vlak);
}
.fe-prijskaart__meer > summary::-webkit-details-marker { display: none; }
/* De regel die zegt dat er iets open kan. Hij staat in de merkkleur en
   onderstreept bij hover, zoals elke andere link op de site, zodat de kaart
   laat zien dat je erop kunt klikken. */
.fe-prijskaart__hint {
  display: inline-flex; align-items: center; gap: var(--fe-ruimte-8);
  margin-top: var(--fe-ruimte-8);
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
  font-weight: 700; color: var(--fe-olijf-tekst);
}
.fe-prijskaart__meer > summary:hover .fe-prijskaart__hint { text-decoration: underline; color: var(--fe-actie); }
.fe-prijskaart__pijl {
  width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.fe-prijskaart__meer[open] > summary .fe-prijskaart__pijl { margin-top: 2px; transform: rotate(-135deg); }
.fe-prijskaart__detail {
  margin-top: var(--fe-ruimte-12);
  padding-top: var(--fe-ruimte-12);
  border-top: var(--fe-kaartrand);
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
}
.fe-prijskaart__detail p { margin: 0 0 var(--fe-ruimte-8); font-size: inherit; line-height: inherit; }
.fe-prijskaart__extrakop { font-weight: 700; color: var(--fe-inkt); }
.fe-prijskaart__detail .fe-prijskaart__lijst { margin-top: 0; }
/* de opsomming en de alinea erna plakten aan elkaar */
.fe-prijskaart__detail .fe-prijskaart__lijst + p { margin-top: var(--fe-ruimte-12); }


/* ---- lightbox (rapport S4, schets M6; ronde 4 punt 7) ---------------- */
/* De pijlen stonden als gridkolom naast de foto: bij een staande foto schoven
   ze mee naar het midden en stonden ze op elke foto ergens anders. Nu liggen
   ze vast aan de rand van het beeldvlak, dat altijd de volle breedte heeft.
   Ze zijn ook twee keer zo groot (88 px, op een telefoon 56). Daaronder staat
   de filmstrip; de foto is daardoor lager, en dat hoort zo. */

.fe-lightbox {
  position: fixed; inset: 0;
  /* De zwevende offerteknop van MICE is een iframe op z-index 2147483646, het
     hoogste dat een browser kent op een na. Met onze eigen 90 stond die knop
     dwars over de filmstrip heen. Een venster dat de hele pagina afdekt hoort
     bovenop te liggen, dus pakken we die ene erboven. Gemeten in de browser,
     niet gegokt. */
  z-index: 2147483647;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  gap: var(--fe-ruimte-12);
  padding: var(--fe-ruimte-24) var(--fe-ruimte-16) var(--fe-ruimte-16);
  background: rgba(25, 30, 20, 0.92);
}
.fe-lightbox[hidden] { display: none; }
.fe-lightbox__beeldvlak {
  position: relative;
  display: grid; place-items: center;
  min-height: 0; height: 100%;
}
.fe-lightbox__beeld {
  max-width: 100%; max-height: var(--fe-lightbox-beeld);
  border-radius: var(--fe-rond-vlak);
}
.fe-lightbox__pijl, .fe-lightbox__sluit, .fe-lightbox__schuif {
  display: grid; place-items: center;
  background: rgba(252, 252, 252, 0.14); color: var(--fe-wit);
  border: 0; border-radius: 50%;
  line-height: 1; cursor: pointer;
}
.fe-lightbox__pijl:hover, .fe-lightbox__sluit:hover,
.fe-lightbox__schuif:hover { background: rgba(252, 252, 252, 0.3); }
.fe-lightbox__pijl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--fe-lightbox-pijl-mobiel); height: var(--fe-lightbox-pijl-mobiel);
  font-size: calc(var(--fe-lightbox-pijl-mobiel) / 2);
}
.fe-lightbox__pijl.is-vorige { left: 0; }
.fe-lightbox__pijl.is-volgende { right: 0; }
@media (min-width: 768px) {
  .fe-lightbox__pijl {
    width: var(--fe-lightbox-pijl); height: var(--fe-lightbox-pijl);
    font-size: calc(var(--fe-lightbox-pijl) / 2);
  }
  .fe-lightbox__pijl.is-vorige { left: var(--fe-ruimte-16); }
  .fe-lightbox__pijl.is-volgende { right: var(--fe-ruimte-16); }
}
.fe-lightbox__sluit {
  position: absolute; top: var(--fe-ruimte-16); right: var(--fe-ruimte-16);
  width: var(--fe-raak); height: var(--fe-raak); font-size: 22px;
}
.fe-lightbox__teller {
  margin: 0; text-align: center;
  color: var(--fe-papier);
  font-family: var(--fe-font-kop); font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); font-weight: 700;
}

/* de filmstrip: alle foto's naast elkaar, met een knop aan weerszijden */
.fe-lightbox__strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--fe-ruimte-8);
}
.fe-lightbox__strip[hidden] { display: none; }
.fe-lightbox__schuif { width: var(--fe-raak); height: var(--fe-raak); font-size: 22px; }
.fe-lightbox__spoor {
  display: flex; gap: var(--fe-ruimte-8);
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.fe-lightbox__spoor::-webkit-scrollbar { display: none; }
.fe-lightbox__duim {
  display: block; padding: 0;
  width: calc(var(--fe-lightbox-duim) * 4 / 3); height: var(--fe-lightbox-duim);
  background: none; border: 0; border-radius: var(--fe-rond-vlak);
  cursor: pointer; opacity: .55;
  /* een doorzichtige rand van dezelfde dikte als de actieve: anders springt
     de hele strip een paar pixels zodra je ergens overheen gaat */
  outline: 2px solid transparent; outline-offset: -2px;
}
.fe-lightbox__duim img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: var(--fe-rond-vlak);
}
.fe-lightbox__duim:hover, .fe-lightbox__duim:focus-visible { opacity: 1; }
.fe-lightbox__duim.is-nu { opacity: 1; outline-color: var(--fe-wit); }

/* ---- compacte CTA op ruimtepagina's (rapport 7.2) -------------------- */
/* De smalle kolom die meeloopt terwijl je de galerij en de beschrijving leest.
   Dit is het blok dat volgens 11.3 hoort mee te bewegen; de informatieblokken
   staan vast in de linkerkolom. */

.fe-kort {
  display: flex;
  flex-direction: column;
  gap: var(--fe-ruimte-8);
  padding: var(--fe-ruimte-20);
  background: var(--fe-wit);
  border: var(--fe-kaartrand);
  border-radius: var(--fe-rond-vlak);
  box-shadow: 0 8px 24px rgba(41, 48, 56, 0.07);
}
/* Plakken moet op het rasteritem zelf, niet op het blok erbinnen: een sticky
   element beweegt alleen binnen zijn ouder, en die ouder was precies even hoog
   als het blok. Het rasteritem beslaat wel de hele rijhoogte. */

.fe-kort__naam { margin: 0; font-family: var(--fe-font-kop); font-size: var(--fe-ts-h3); font-weight: 700; color: var(--fe-inkt); }
.fe-kort__onder { margin: 0; font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }
.fe-kort__prijs { margin: var(--fe-ruimte-8) 0 0; font-family: var(--fe-font-kop); font-size: var(--fe-ts-h4); font-weight: 700; color: var(--fe-inkt); }
.fe-kort .fe-knop { width: 100%; }
.fe-kort .fe-knop--primair { margin-top: var(--fe-ruimte-12); }
.fe-kort__tel { margin: var(--fe-ruimte-4) 0 0; text-align: center; font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }
.fe-kort__vraag { margin: var(--fe-ruimte-4) 0 0; text-align: center; font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }

.fe-kort__form { margin-top: var(--fe-ruimte-12); padding-top: var(--fe-ruimte-16); border-top: 1px solid rgba(41, 48, 56, 0.12); }
.fe-kort__form .fe-veld { margin-bottom: var(--fe-ruimte-12); }
.fe-kort__form .fe-veld > span { font-size: var(--fe-ts-label, 13px); }
.fe-kort__form :is(input, textarea) { min-height: 40px; padding: var(--fe-ruimte-8) var(--fe-ruimte-12); font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }

.fe-kort__andrea { display: flex; align-items: flex-start; gap: var(--fe-ruimte-12); margin-top: var(--fe-ruimte-16); padding-top: var(--fe-ruimte-16); border-top: 1px solid rgba(41, 48, 56, 0.12); }
.fe-kort__andrea .fe-persoon__foto { width: 64px; height: 64px; font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel); }
.fe-kort__wie { display: flex; flex-direction: column; gap: var(--fe-ruimte-4); min-width: 0; }

/* het poppetje achter de groepsgrootte in het uitklapmenu */
.fe-menu__maat { display: inline-flex; align-items: center; gap: 3px; }
.fe-menu__maat .fe-icoon { opacity: 0.7; }

/* het poppetje in plaats van het woord personen */
.fe-personen { display: inline-flex; align-items: center; gap: 3px; }
.fe-personen .fe-icoon { opacity: 0.7; }

/* Ruimtekaart: de lege ruimte blijft staan (daar vergelijk je opstellingen),
   bij hover komt de foto met mensen erover. Regel 1 uit hoofdstuk 9.1.
   Alleen op een apparaat met een echte aanwijzer: op een telefoon bestaat
   hover niet en zou de foto blijven hangen na een tik. */
.fe-kaart__beeld { position: relative; display: block; }
.fe-kaart__hover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .fe-kaart:hover .fe-kaart__hover,
  .fe-kaart:focus-visible .fe-kaart__hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fe-kaart__hover { transition: none; }
}

/* Wandelroutes op de bospagina (9.7). Eigen schets in plaats van een
   schermafbeelding van Google Maps; zie BESLUITEN.md 13-10-2026. */
.fe-routes {
  display: grid;
  gap: var(--fe-ruimte-24);
  margin-top: var(--fe-ruimte-24);
}
@media (min-width: 768px) { .fe-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fe-route {
  background: var(--fe-wit);
  border: var(--fe-kaartrand);
  border-radius: var(--fe-rond-vlak);
  overflow: hidden;
}
/* Het kaartje is sinds 25-10-2026 een echt kaartje (svg uit OSM-gegevens) en
   geen schets meer. Een vaste verhouding houdt de twee kaarten even hoog, ook
   als het ene rondje langer is dan het andere. */
.fe-route__kaart {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 640;
  height: auto;
  object-fit: cover;
  background: var(--fe-warmgrijs);
}
.fe-routes__bron { margin-top: var(--fe-ruimte-8); opacity: .7; }
.fe-route__label {
  font-family: var(--fe-font-tekst);
  font-size: 13px;
  fill: var(--fe-inkt);
  paint-order: stroke;
  stroke: var(--fe-wit);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.fe-route__body { padding: var(--fe-ritme-kaart); }
.fe-route__body h3 { margin: 0; font-size: var(--fe-ts-h4); }
.fe-route__maat {
  margin: var(--fe-ruimte-4) 0 var(--fe-ruimte-8);
  font-weight: 700;
  color: var(--fe-olijf-tekst);
}
.fe-route__body p { margin: 0; font-size: var(--fe-ts-tekst); line-height: var(--fe-ts-tekst-regel); }

/* Echte Google-reviews. Letterlijk overgenomen, dus als citaat opgemaakt. */
.fe-reviewkaart__quote { margin: var(--fe-ruimte-8) 0 0; }
.fe-reviewkaart__quote p { margin: 0; }
.fe-reviewkaart__quote cite {
  display: block;
  margin-top: var(--fe-ruimte-4);
  font-style: normal;
  font-size: var(--fe-ts-klein);
  line-height: var(--fe-ts-klein-regel);
  color: var(--fe-olijf-tekst);
}

/* De ruimtewisselaar staat op een donker vlak. De olijfkleur van de pijlen
   haalt daar maar 2,3:1; op papier wordt het 13:1. */
.fe-sectie--inkt .fe-ruimtenav__pijl { color: var(--fe-papier); }

/* ---- het snelle formulier in de hero (10.1, ronde 2 punt 1) -----------
   Een component op twee plekken. Op desktop staat de kaart rechts naast de
   H1, binnen dezelfde contentbreedte als de rest van de pagina; op mobiel
   zakt hij als tweede rij uit het rooster, direct onder de foto. De kaart
   zit bewust binnen <section class="fe-hero">, zodat meten.js "hero" als
   plek doorgeeft. */
.fe-hero--form { grid-template-rows: minmax(0, 1fr) auto; }
.fe-hero--form > picture,
.fe-hero--form::after,
.fe-hero--form .fe-hero__over { grid-row: 1; }
.fe-hero__formulier { grid-row: 2; z-index: 3; padding-block: var(--fe-ruimte-24); }
.fe-hero__kaart {
  background: var(--fe-wit);
  color: var(--fe-tekst);
  border-radius: var(--fe-rond-vlak);
  padding: var(--fe-ruimte-20);
  /* zelfde kaartstijl als het uitklapmenu en de ruimtekaarten: de rand uit het
     ontwerpsysteem, de schaduw in dezelfde schrijfwijze als elders in dit
     bestand (de inktkleur op lage dekking) */
  border: var(--fe-kaartrand);
  box-shadow: 0 10px 28px rgba(41, 48, 56, 0.12);
}
.fe-hero__kaart .fe-form__kop { margin: 0 0 var(--fe-ruimte-12); font-size: var(--fe-ts-h4); }
/* dezelfde compacte velden als in de meeloopkaart op de ruimtepagina's, zodat
   de kaart binnen de hero past en niet over de foto heen valt (10.1) */
.fe-hero__kaart .fe-veld { margin-bottom: var(--fe-ruimte-12); }
.fe-hero__kaart .fe-veld > span { font-size: var(--fe-ts-label, 13px); }
.fe-hero__kaart :is(input, textarea) {
  min-height: 40px;
  padding: var(--fe-ruimte-8) var(--fe-ruimte-12);
  font-size: var(--fe-ts-klein);
  line-height: var(--fe-ts-klein-regel);
}
/* in de smalle kaart passen twee velden naast elkaar niet; daar is onder
   elkaar de compacte vorm */
.fe-hero__kaart .fe-velden { grid-template-columns: 1fr; }
.fe-hero__kaart .fe-velden .fe-veld { grid-row: auto; grid-column: 1 / -1; }
/* Een knop mag normaal niet afbreken (zie .fe-knop), maar deze is al zo breed
   als de kaart: afbreken kan hier geen rommelige rij geven, en zonder dit zet
   de knoptekst een ondergrens waar een smalle telefoon niet onder komt. */
.fe-hero__kaart .fe-form__submit { width: 100%; white-space: normal; }

@media (min-width: 1024px) {
  /* terug naar een rij: de kaart komt over de foto te liggen, netjes
     gecentreerd en rechts uitgelijnd op de contentkolom */
  /* de hero is hier minstens zo hoog als de kaart plus lucht; anders steekt
     de kaart eruit, en dat is precies wat 10.1 niet wil */
  .fe-hero--form { grid-template-rows: minmax(0, 1fr); min-height: 560px; }
  .fe-hero--form .fe-hero__formulier {
    grid-area: 1 / 1;
    align-self: center;
    width: 100%;
    padding-block: 0;
    pointer-events: none;
  }
  .fe-hero--form .fe-hero__kaart {
    pointer-events: auto;
    width: 380px;
    margin-left: auto;
    /* Doorzichtig over de foto (16-10-2026): een dicht wit blok sloot de hero
       af, nu schijnt de foto erdoorheen. De waas houdt de tekst rustig, ook
       boven een druk stukje foto. Waarden uit het ontwerpsysteem.
       Alleen hier: onder 1.024 px staat de kaart niet over de foto. */
    background: var(--fe-herokaart-vlak);
    -webkit-backdrop-filter: blur(var(--fe-herokaart-waas));
    backdrop-filter: blur(var(--fe-herokaart-waas));
  }
  /* De velden blijven dicht wit: zij moeten juist opvallen als iets waarin je
     typt. Dat verschil doet hier het werk dat de rand alleen niet doet. */
  /* de tekst links houdt afstand van de kaart, anders loopt de H1 eronder door */
  .fe-hero--form .fe-hero__over .fe-inhoud > * { max-width: calc(100% - 420px); }
}

/* ---- logobalk "Zij vergaderden bij ons" (S6, schets M8) --------------
   Onder het reviewblok. Elk logo op dezelfde optische hoogte, geen
   bijkleuren: de merkrichtlijnen van die organisaties blijven gelden. */
.fe-logobalk {
  margin-top: var(--fe-ruimte-32);
  padding-top: var(--fe-ruimte-24);
  border-top: 1px solid rgba(41, 48, 56, 0.12);
}
.fe-logobalk__kop {
  margin: 0 0 var(--fe-ruimte-20);
  text-align: center;
  font-size: var(--fe-ts-klein);
  line-height: var(--fe-ts-klein-regel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* De logo's lopen sinds 31-10-2026 als een band voorbij in plaats van als een
   stilstaande rij. Twee keer dezelfde reeks achter elkaar; de band schuift
   precies een reeks op en springt dan terug, dus de lus is niet te zien.

   Grijs in rust, eigen kleur bij aanwijzen: zo is het een rustige rij en zie
   je toch van wie het logo is. De band staat stil zolang je er met de muis of
   met het toetsenbord in zit, anders schuift het logo weg onder je cursor.
   Wie bewegende beelden heeft uitgezet (prefers-reduced-motion) krijgt een rij
   die je zelf kunt vegen. */
.fe-logoband {
  display: flex;
  gap: var(--fe-ruimte-32);
  overflow: hidden;
  /* aan de randen vervagen, zodat een logo niet half afgesneden aankomt */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.fe-logoband__spoor {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--fe-ruimte-32);
  margin: 0;
  padding: 0 0 0 var(--fe-ruimte-32);
  list-style: none;
  animation: fe-logoschuif 46s linear infinite;
}
.fe-logoband:hover .fe-logoband__spoor,
.fe-logoband:focus-within .fe-logoband__spoor { animation-play-state: paused; }
@keyframes fe-logoschuif {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--fe-ruimte-32))); }
}
.fe-logobalk__rij img {
  height: calc(56px * var(--fe-logo-schaal, 1));
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.fe-logobalk__rij img:hover { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fe-logoband { overflow-x: auto; }
  .fe-logoband__spoor { animation: none; }
  .fe-logoband [aria-hidden="true"] { display: none; }
}
@media (max-width: 767px) {
  .fe-logobalk__rij { gap: var(--fe-ruimte-20) var(--fe-ruimte-24); }
  .fe-logobalk__rij img { height: calc(30px * var(--fe-logo-schaal, 1)); max-width: 110px; }
}

/* ---- cookiemelding, de hoogte op mobiel (Q22) ------------------------
   De vorm van de melding staat in het Cookiebot-beheer, niet hier: 4.6 vraagt
   de vier vinkjes pas onder "Details tonen", een tekst van een zin en drie
   even grote knoppen. Wat we wel zelf doen is de hoogte begrenzen, want
   Cookiebot kent geen aparte instelling voor mobiel. Zonder dit bedekt de
   balk op een telefoon het halve scherm, precies waar de hero en de
   offerteknop staan. Het rapport noemt maximaal ongeveer 35 procent. */
@media (max-width: 767px) {
  #CybotCookiebotDialog {
    max-height: 35vh;
    overflow-y: auto;
  }
  /* De vaste balk onderin (Q7) blijft bereikbaar zolang de melding er staat.
     56px is dezelfde maat als de min-height van .fe-balk a hierboven, plus de
     veilige zone van de telefoon. */
  #CybotCookiebotDialog { bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ---- links naar de Google-reviews (ronde 2, punt 5) ------------------
   Elke score en elke review wijst naar de reviews op Google. Ze blijven
   eruitzien zoals ze eruitzagen: de link neemt de kleur over en krijgt zijn
   streep pas bij aanwijzen of toetsenbordfocus, zodat de kaarten rustig
   blijven maar wel aanwijsbaar zijn. */
.fe-review__link { display: block; color: inherit; text-decoration: none; }
.fe-review__link:hover p,
.fe-review__link:focus-visible p { text-decoration: underline; }
a.fe-reviewkaart__score,
a.fe-persoon__belofte { color: inherit; text-decoration: none; }
a.fe-reviewkaart__score:hover,
a.fe-reviewkaart__score:focus-visible,
a.fe-persoon__belofte:hover,
a.fe-persoon__belofte:focus-visible { text-decoration: underline; }
.fe-reviews__alle { margin: var(--fe-ruimte-16) 0 0; }
/* Twee regels die bij het blok erboven horen in plaats van er los van te
   staan: de scoreregel onder de kop "Wat gasten zeggen", en de knoppenrij
   onder de voorzieningen. Stond met de hand in de html (style="margin"),
   en dat won van elke stylesheet; nu staat het hier. */
main .fe-sectie > .fe-inhoud > h2 + .fe-reviewscore { margin-top: var(--fe-ritme-kop-blok); }
main .fe-sectie > .fe-inhoud > * + .fe-ruimtebalk__knoppen { margin-top: var(--fe-ritme-kop-tekst); }
.fe-reviews__alle a {
  font-size: var(--fe-ts-tekst);
  font-weight: 700;
  color: var(--fe-olijf-tekst);
}

/* ---- "In deze ruimte": de voorzieningen per ruimte (Q17) -------------
   Twee kolommen zodra er ruimte voor is; onder elkaar op een telefoon. */
.fe-voorzieningen {
  display: grid;
  gap: var(--fe-ruimte-8) var(--fe-ruimte-24);
  margin: var(--fe-ruimte-16) 0 0;
  padding: 0;
  list-style: none;
}
.fe-voorzieningen li {
  display: flex;
  align-items: flex-start;
  gap: var(--fe-ruimte-8);
  font-size: var(--fe-ts-tekst);
  line-height: var(--fe-ts-tekst-regel);
}
.fe-voorzieningen .fe-icoon { flex: none; margin-top: 3px; color: var(--fe-olijf); }
@media (min-width: 768px) {
  .fe-voorzieningen { grid-template-columns: 1fr 1fr; }
}

/* de knop onder de galerij: opent de lightbox op de eerste foto (punt 10) */
.fe-galerij__alles { margin-top: var(--fe-ruimte-12); }

/* ---- foto's in het locatieblok en bij de prijskaarten (9.7) ----------- */
.fe-locatiebeelden {
  display: grid;
  gap: var(--fe-ritme-kaarten);
}
.fe-locatiebeelden .fe-beeld { margin: 0; border-radius: var(--fe-rond-vlak); overflow: hidden; }
.fe-locatiebeelden img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
  .fe-locatiebeelden { grid-template-columns: repeat(3, 1fr); }
}
.fe-prijskaart__beeld { margin: var(--fe-ruimte-16) 0 0; border-radius: var(--fe-rond-vlak); overflow: hidden; }
.fe-prijskaart__beeld img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
/* De laatste alinea rekt op, zodat de foto's van de drie kaarten op dezelfde
   hoogte beginnen hoe lang de beschrijving ook is. Niet margin-top op de
   figure zelf: die krijgt verderop een vaste marge van 16 px en die zou de
   auto overschrijven. */
/* Wat er in een arrangement zit (ronde 4, punt 22). Geen bolletjes van de
   browser maar hetzelfde vinkloze streepje als in de rest van de site, en
   kleine tekst, want het is een opsomming naast de prijs en niet de
   hoofdtekst van de kaart. */
.fe-prijskaart__lijst {
  margin: var(--fe-ruimte-12) 0 0; padding: 0; list-style: none;
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
}
.fe-prijskaart__lijst li { position: relative; padding-left: var(--fe-ruimte-16); }
.fe-prijskaart__lijst li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 1px; background: var(--fe-olijf);
}
/* De beschrijving staat boven de prijs (18-10): eerst wat je krijgt, dan wat
   het kost, en daarachter de rest. De prijs duwt naar beneden, zodat de
   foto's van de drie kaarten op dezelfde hoogte beginnen. */
.fe-prijskaart__tekst { margin: 0 0 var(--fe-ruimte-16); }
.fe-prijskaart__meer, .fe-prijskaart__prijs { margin-bottom: auto; }


/* Het kruimelpad onder de hero van een campagnepagina (AI-vindbaarheid, B1).
   Google zet een BreadcrumbList alleen om in een zichtbaar pad in de
   zoekresultaten als de bezoeker datzelfde pad op de pagina ziet. Daarom is
   dit geen opsmuk maar de voorwaarde voor de markup.

   Klein, olijf en links uitgelijnd: het pad is navigatie en geen inhoud, dus
   het mag de hero en de eerste kop niet beconcurreren. Scheidingsteken is een
   gewoon streepje, geen em-dash. */
.fe-kruimels { padding: var(--fe-ruimte-12) 0; }
.fe-kruimels ol {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fe-ruimte-8);
  font-size: var(--fe-ts-klein); line-height: var(--fe-ts-klein-regel);
  color: var(--fe-olijf-tekst);
}
.fe-kruimels li { display: flex; align-items: center; gap: var(--fe-ruimte-8); }
.fe-kruimels li + li::before { content: "/"; color: var(--fe-olijf); opacity: 0.6; }
.fe-kruimels a { color: var(--fe-olijf-tekst); }
.fe-kruimels [aria-current="page"] { color: var(--fe-kop); }

/* De ruime galerij van Room Summit (1-11-2026). Twaalf foto's direct in beeld
   in plaats van vijf, want dit is de zaal waar het meeste van afhangt.

   Het raster sluit in beide vormen vol (webkwaliteit 5.1). Op desktop: drie
   kolommen, de eerste foto over twee bij twee, dan twee ernaast en drie rijen
   van drie; dat is precies 1 + 2 + 9. Op telefoon: twee kolommen, waarbij de
   eerste en de laatste de volle breedte nemen, zodat de tien ertussen vijf
   hele rijen vormen. */
.fe-galerij--ruim { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
.fe-galerij--ruim > :first-child,
.fe-galerij--ruim > .fe-galerij__beeld--breed { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .fe-galerij--ruim { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
  .fe-galerij--ruim > :first-child { grid-column: span 2; grid-row: span 2; }
  .fe-galerij--ruim > :first-child img { aspect-ratio: 3 / 2; }
  /* op desktop sluit het raster vanzelf; de brede laatste is alleen voor
     de twee kolommen op de telefoon */
  .fe-galerij--ruim > .fe-galerij__beeld--breed { grid-column: auto; }
  .fe-galerij--ruim > :first-child.fe-galerij__beeld { grid-column: span 2; }
}

/* Andrea staat sinds 4-11-2026 weer in de zijkolom, boven de review (verzoek
   Alexander). Die kolom is 340 px breed, en naast een foto van 96 px blijft
   daar maar 120 px tekst over: dan breekt zelfs "Andrea Siemons" over twee
   regels. In de zijkolom staat de foto daarom boven de tekst, die dan de
   volle kolombreedte heeft. Ook op de telefoon, waar de kolom wel breder is
   maar "Bel" anders los boven het nummer komt te staan: gemeten op 390 px
   bleef er 154 px over voor een regel die er 155 nodig heeft. */
.fe-cta__zij .fe-tegel--persoon {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fe-ruimte-12);
}