/* ==========================================================================
   H4 · ks — Kamerstrook
   v1.0 · 2026-08-30 · Natuurlijk Gezonder
   --------------------------------------------------------------------------
   Prefix: ks-. Gebruikt uitsluitend tokens uit 00-tokens.css.
   Laadt na 20-he-hero.css.

   Dit is het bedachte element uit de stijlgids: het ene onderdeel dat niet
   uit de catalogus komt maar voor deze onderneming is bedacht. De rest van
   de site mag standaard zijn; dit stuk is dat bewust niet.

   Wat het vervangt: zes losse kaarten van 649 × 349 px onder elkaar, samen
   2.178 px scrollen, met de kamerfoto's op 310 px breed terwijl de bronnen
   3000 tot 6224 px zijn. Kiezen tussen zes accommodaties koste daar zes
   schermlengtes; hier is het één beweging.

   TWEE MECHANIEKEN, want één bleek niet te kloppen. Eerst verdeelden de
   panelen op beide assen een gedeelde maat met `flex-grow`. Op desktop is
   dat juist: de strook heeft een vaste hoogte en de zes panelen delen de
   breedte. Op mobiel liep het stuk — vijf gesloten rijen kwamen dan uit op
   64 px en de naam werd bovenaan afgesneden. Daar staat de rijhoogte nu
   vast (5,5 rem gesloten, 26 rem open) in plaats van te volgen uit een
   deling. Elegantie verloor het van een naam die past.

   AFWIJKING VAN DE BEWEGINGSREGEL, bewust en begrensd: `flex-grow` en
   `height` animeren raakt layout, en de regel zegt alleen `transform` en
   `opacity`. Een uitklappende strook kán niet anders — de panelen moeten
   elkaar verdringen. Het blijft binnen één subtree van zes elementen,
   duurt 340 ms en gebeurt alleen na een expliciete handeling. De inhoud
   ván het paneel beweegt wél met `opacity` en `transform`.
   ========================================================================== */

.ks { padding: var(--ng-sectie-y) 0; background: var(--ng-grond); }

.ks__kop-blok { max-width: 46rem; margin-bottom: var(--ng-s-6); }
.ks__eyebrow {
  margin: 0 0 var(--ng-s-2);
  font-size: var(--ng-t-micro);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  color: var(--ng-tekst-zacht);
}
.ks__kop { margin: 0 0 var(--ng-s-3); }
.ks__intro { margin: 0; font-size: var(--ng-t-lead); line-height: var(--ng-lh-lead); color: var(--ng-tekst); }

/* --------------------------------------------------------------------------
   De strook
   -------------------------------------------------------------------------- */

/* MOBIEL is de basis: een verticale stapel met vaste rijhoogtes. Geen
   gedeelde hoogte die over zes panelen verdeeld moet worden — dat was de
   eerste opzet en toen paste de naam niet meer in een gesloten rij van
   64 px. Een gesloten rij is nu 5,5 rem; dat is de hoogte die de naam plus
   het type nodig hebben, en die staat vast in plaats van te volgen uit een
   deling. */
.ks__strook {
  display: flex;
  flex-direction: column;
  gap: 2px;                        /* de naad tussen de panelen, geen rand */
  border-radius: var(--ng-radius);
  overflow: hidden;
  background: var(--ng-groen-900); /* zichtbaar in de naden */
}
@media (min-width: 62rem) {
  .ks__strook { flex-direction: row; height: min(76svh, 42rem); }
}

/* --------------------------------------------------------------------------
   Paneel
   -------------------------------------------------------------------------- */

.ks__paneel {
  position: relative;
  /* De gemiddelde kleur van de eigen foto, als inline variabele in de markup.
     Zolang het beeld nog niet binnen is, is het paneel een kleurvlak dat bij
     die kamer hoort in plaats van zes keer hetzelfde groen. Kost niets en
     dekt ook het geval waarin een beeld helemaal niet laadt. */
  background-color: var(--ks-grond, var(--ng-groen-900));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;

  /* mobiel: vaste rijhoogte, die verandert bij openen */
  flex: 0 0 auto;
  height: 5.5rem;
  transition: height var(--ng-duur-rustig) var(--ng-easing);
}

/* Mobiel stond het open paneel op 26rem, en daarvan nam de detailkaart de
   onderste helft. Wat overbleef was een strook foto van nog geen 200 px —
   te weinig om te zien wát je kiest. Nu 34rem, zodat er boven de kaart een
   volwaardig beeld staat. De kaart is hieronder compacter gemaakt; samen
   levert dat ruim het dubbele aan zichtbare foto op. */
.ks__paneel.is-open { height: 34rem; }

/* Op een kort scherm zou 34rem het hele beeldvlak vullen. Dan liever wat
   minder foto dan een paneel waar je doorheen moet scrollen om de knoppen
   te bereiken. */
@media (max-height: 44rem) {
  .ks__paneel.is-open { height: min(34rem, 68svh); }
}

/* desktop: de strook heeft een vaste hoogte en de panelen verdelen de
   breedte; dan doet flex-grow het werk in plaats van height */
@media (min-width: 62rem) {
  .ks__paneel {
    flex: 1 1 0;
    height: auto;
    transition: flex-grow var(--ng-duur-rustig) var(--ng-easing);
  }
  .ks__paneel.is-open { flex-grow: 5; height: auto; }
}

/* `img.` en niet alleen de klasse — zie de toelichting in 20-he-hero.css.
   Hier viel het niet op omdat het paneel `overflow: hidden` heeft en de
   overschietende hoogte dus werd afgeknipt. Dat maakt het niet minder fout:
   het beeld werd hoger dan zijn vak en de onderkant verdween. */
img.ks__beeld {
  position: absolute;
  inset: 0;
  /* Geen negatieve z-index. Die zat er eerst wel, en zodra het paneel een
     eigen achtergrondkleur kreeg verdween het beeld erachter. Met een
     expliciete stapel 0-1-2-3 (beeld, verloop, knop, detail) is de volgorde
     ondubbelzinnig en hoeft niemand de schilderregels na te lopen. */
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* HORIZONTAAL focussen, per paneel, via `--ks-focus` in de markup.
     --------------------------------------------------------------------
     Waarom alleen horizontaal: bij elke toestand van dit onderdeel — een
     gesloten paneel op desktop (ongeveer 1:6), een open paneel (1:1,2), en
     de rijen op mobiel — is het beeld ná `cover` precies zo hoog als het
     paneel en loopt het aan de zijkanten over. Verticaal schuiven doet dan
     letterlijk niets; horizontaal bepaalt welke band je ziet.

     De waarde staat per accommodatie in de markup, naast `--ks-grond`,
     omdat het onderwerp per foto ergens anders zit. Zie
     `components/ks-kamerstrook/beeldkeuze-v2.0.md` voor de keuze en de
     twee uitsnedes waarin die getoetst is. */
  object-position: var(--ks-focus, 50%) 50%;
  /* Een gesloten paneel is smal; het beeld wordt dan textuur. Iets meer
     verzadiging houdt het levend, en het geopende paneel gaat terug naar
     normaal zodat de foto klopt zodra je hem echt bekijkt. */
  filter: saturate(1.06);
  transition: filter var(--ng-duur-rustig) var(--ng-easing);
}
.ks__paneel.is-open .ks__beeld { filter: none; }

/* De onderlaag. Onderaan zwaar, want daar staat de naam; boven vrijwel
   niets, zodat de foto zichtbaar blijft. De dekking onderaan is zo gekozen
   dat witte tekst er ook boven een wit kussen nog overheen kan — zie de
   contrastmeting in de README. */
.ks__paneel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* HERZIEN 02-09. Het oude verloop liep van .90 onderaan naar .30 bovenaan
     en tintte daarmee het hele paneel groen: een gesloten paneel las als een
     gekleurde balk, niet als een foto. Sven: "iedere afbeelding zou de ruimte
     volledig moeten bedekken" — en dat deed hij ook, je zag hem alleen niet.

     Gemeten waar de tekst werkelijk staat: het verticale label loopt van
     96 % (onderrand) tot 50 % bij het langste geval (GroupStay, "Het hele
     appartement · tot 10 personen") en tot 72 % bij het kortste. Boven die
     50 % staat dus nooit tekst, en daar mag het verloop bijna weg.

     Onder 52 % blijft het ≥ .78, waar het label staat; daarboven zakt het
     binnen een tiende van de hoogte naar .10. Resultaat: de bovenste
     ongeveer 30 % van elk gesloten paneel is echte foto. */
  background: linear-gradient(to top,
    rgba(20, 59, 53, .92)   0%,
    rgba(20, 59, 53, .88)  34%,
    rgba(20, 59, 53, .78)  52%,
    rgba(20, 59, 53, .30)  64%,
    rgba(20, 59, 53, .10)  80%,
    rgba(20, 59, 53, .06) 100%);
  transition: background var(--ng-duur-rustig) var(--ng-easing);
}

/* Waarom een GESLOTEN paneel zo donker is: de naam staat daar verticaal en
   loopt tot ongeveer een derde van de hoogte. Met het lichtere verloop van
   het geopende paneel zakt het contrast bovenaan die regel naar 2,8 : 1
   zodra de foto daar licht is — een wit kussen is genoeg. Bij deze stops is
   de ondergrens 7,6 : 1, óók boven een volledig witte achtergrond. Een
   gesloten paneel is 109 px breed en dus textuur; daar mag dat.

   Een geopend paneel kan lichter, want daar staat de tekst op een eigen
   vlak — hetzelfde principe als in de hero. */
.ks__paneel.is-open::before {
  background: linear-gradient(to top,
    rgba(20, 59, 53, .62)   0%,
    rgba(20, 59, 53, .42)  30%,
    rgba(20, 59, 53, .18)  60%,
    rgba(20, 59, 53, .10) 100%);
}

/* --------------------------------------------------------------------------
   De knop — het hele paneel is klikbaar
   -------------------------------------------------------------------------- */

.ks__knop {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: var(--ng-s-4);
  color: var(--ng-tekst-op-diep);
  cursor: pointer;
  text-align: left;
}
.ks__paneel.is-open .ks__knop {
  /* Het geopende paneel mag niet meer op zichzelf klikken — daar staan de
     echte links. De knop blijft wel focusbaar voor het toetsenbord, en
     krimpt tot de naamregel. */
  height: auto;
  pointer-events: none;
}

/* Mobiel: de naam staat in een rij van 5,5 rem en hoort daar midden in.
   In het geopende paneel schuift hij naar boven, want onderin komt het
   detailvlak. */
@media (max-width: 61.99rem) {
  .ks__knop { align-items: center; }
  .ks__paneel.is-open .ks__knop { inset: 0 0 auto 0; align-items: flex-start; }
}
@media (min-width: 62rem) {
  .ks__paneel.is-open .ks__knop { inset: auto 0 0 0; }
}

.ks__naam {
  font-family: var(--ng-font-display);
  font-weight: var(--ng-w-medium);
  font-size: var(--ng-t-h3);
  line-height: 1.1;
  letter-spacing: var(--ng-ls-kop);
  white-space: nowrap;
}
.ks__type {
  display: block;
  margin-top: var(--ng-s-1);
  font-family: var(--ng-font-tekst);
  font-size: var(--ng-t-micro);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  opacity: .82;
  white-space: nowrap;
}

/* Op desktop staat de naam van een GESLOTEN paneel verticaal: een smalle
   strook heeft geen ruimte voor een horizontale regel, en een afgekapte
   naam is erger dan een gedraaide. */
@media (min-width: 62rem) {
  .ks__paneel:not(.is-open) .ks__knop { align-items: flex-end; }
  .ks__paneel:not(.is-open) .ks__labels {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  .ks__paneel:not(.is-open) .ks__type { margin: 0 var(--ng-s-2) 0 0; }
}

/* --------------------------------------------------------------------------
   Detail — alleen zichtbaar in het geopende paneel
   -------------------------------------------------------------------------- */

.ks__detail {
  position: absolute;
  z-index: 3;
  left: var(--ng-s-4);
  right: var(--ng-s-4);
  bottom: var(--ng-s-4);
  max-width: 30rem;
  padding: var(--ng-s-4);
  background: rgba(20, 59, 53, .74);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border-radius: var(--ng-radius);
  color: var(--ng-tekst-op-diep);

  /* visibility:hidden haalt de inhoud óók uit de tabvolgorde en uit de
     toegankelijkheidsboom — geen aparte inert-afhandeling nodig. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--ng-s-3));
  transition:
    opacity    var(--ng-duur-snel) var(--ng-easing),
    transform  var(--ng-duur-snel) var(--ng-easing),
    visibility 0s linear var(--ng-duur-snel);
}
.ks__paneel.is-open .ks__detail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* even wachten tot het paneel bijna open is; anders verschijnt de tekst
     in een strook die er nog niet is */
  transition-delay: calc(var(--ng-duur-rustig) * .55), calc(var(--ng-duur-rustig) * .55), 0s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ks__detail { background: rgba(20, 59, 53, .84); }
}
@media (prefers-transparency: reduce) {
  .ks__detail { background: rgba(20, 59, 53, .95); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .ks__detail {
    background: var(--ng-groen-900);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: inset 0 0 0 1px rgba(255, 254, 252, .35);
  }
}


.ks__naam-groot {
  display: block;
  margin: 0 0 var(--ng-s-2);
  font-family: var(--ng-font-display);
  font-weight: var(--ng-w-medium);
  font-size: var(--ng-t-h3);
  line-height: 1.1;
  color: var(--ng-tekst-op-diep);
}

.ks__kenmerken {
  margin: 0 0 var(--ng-s-4);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ng-s-1) var(--ng-s-3);
  font-size: var(--ng-t-klein);
  line-height: var(--ng-lh-klein);
}
.ks__kenmerken li { margin: 0; position: relative; }
.ks__kenmerken li + li::before {
  content: "·";
  position: absolute;
  left: calc(var(--ng-s-3) / -2 - .15em);
  opacity: .55;
}

.ks__acties { display: flex; flex-wrap: wrap; gap: var(--ng-s-2); }

.ks__actie {
  display: inline-flex;
  align-items: center;
  padding: .6875rem var(--ng-s-4);
  border-radius: var(--ng-radius);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  letter-spacing: .02em;
  text-decoration: none;
  transition:
    background-color var(--ng-duur-snel) var(--ng-easing),
    color var(--ng-duur-snel) var(--ng-easing),
    transform var(--ng-duur-snel) var(--ng-easing);
}
.ks__actie--primair { background: var(--ng-op-actie); color: var(--ng-groen-900); }
.ks__actie--primair:hover { background: var(--ng-munt-200); color: var(--ng-groen-900); }
.ks__actie--tweede {
  color: var(--ng-tekst-op-diep);
  box-shadow: inset 0 0 0 1px rgba(255, 254, 252, .55);
}
.ks__actie--tweede:hover {
  color: var(--ng-groen-900);
  background: rgba(255, 254, 252, .92);
  box-shadow: inset 0 0 0 1px rgba(255, 254, 252, .92);
}
.ks__actie:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Hover en focus
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .ks__paneel:not(.is-open):hover .ks__beeld { filter: saturate(1.12) brightness(1.06); }
}
.ks__knop:focus-visible {
  outline: var(--ng-focus-breedte) solid var(--ng-wit);
  outline-offset: calc(var(--ng-focus-offset) * -1);
}
/* SF-13 · 01-10 · De knop ligt over het hele paneel, dus de themavulling van
   Hello Elementor (`[type=button]:hover/:focus { background-color:#c36 }`,
   0,2,0) kleurde het hele paneel roze: bij focus op desktop, bij aanwijzen én
   focus op smal. `button.ks__knop:hover` weegt (0,2,1). De witte
   focusomlijning hierboven blijft. */
button.ks__knop:hover,
button.ks__knop:focus { background: none; color: var(--ng-tekst-op-diep); }

/* --------------------------------------------------------------------------
   Minder beweging
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ks__paneel { transition-duration: 120ms; }
  .ks__detail { transform: none; transition-delay: 0s; }
}

/* --------------------------------------------------------------------------
   Zonder JavaScript
   Dan opent er niets. De strook toont dan alle zes de panelen gelijk
   verdeeld met hun naam; de detailblokken staan als gewone links onder de
   strook zodat de inhoud bereikbaar blijft.
   -------------------------------------------------------------------------- */

.ks__terugval { margin-top: var(--ng-s-4); }
.ks--js .ks__terugval { display: none; }
.ks__terugval ul {
  display: flex; flex-wrap: wrap; gap: var(--ng-s-2);
  margin: 0; padding: 0; list-style: none;
}
.ks__terugval li { margin: 0; }
.ks__terugval a {
  display: inline-flex; padding: var(--ng-s-2) var(--ng-s-3);
  border: 1px solid var(--ng-lijn-sterk); border-radius: var(--ng-radius);
  font-size: var(--ng-t-klein); color: var(--ng-tekst); text-decoration: none;
}
.ks__terugval a:hover { border-color: var(--ng-actie); color: var(--ng-actie); }

/* --------------------------------------------------------------------------
   Mobiel: de kaart neemt zo min mogelijk foto in beslag
   --------------------------------------------------------------------------
   De kaart draagt de naam, vijf kenmerken en twee knoppen. Op een smal
   scherm brak die opsomming over drie regels en werd het blok bijna 200 px
   hoog — precies het beeld dat je wilde zien. Drie ingrepen, samen goed voor
   ongeveer 70 px minder: minder padding, de kenmerken op één regel die
   horizontaal schuift in plaats van af te breken, en de naam kleiner (die
   staat immers al in de knop erboven).
      Dit blok staat BEWUST achteraan: het overschrijft `.ks__kenmerken` en
   `.ks__naam-groot`, die verderop in dit bestand staan. Op gelijke
   specificiteit wint de laatste regel, en in de eerste versie stond dit
   blok ervóór — dan gebeurde er zichtbaar niets.
   -------------------------------------------------------------------------- */

@media (max-width: 61.99rem) {
  .ks__detail {
    left: var(--ng-s-3);
    right: var(--ng-s-3);
    bottom: var(--ng-s-3);
    padding: var(--ng-s-3);
  }
  .ks__naam-groot {
    font-size: var(--ng-t-h3);
    margin-bottom: var(--ng-s-1);
  }
  /* De kenmerken mogen afbreken.
     -----------------------------------------------------------------
     Een tussenversie zette ze op één schuifbare regel. Dat won 40 px,
     maar kapte "Eigen douche" af tot "Eigen douc" zonder enige aanwijzing
     dat er meer stond — en "Toilet op de gang" en "Hond welkom" waren
     daarmee onvindbaar. Een afgekapt woord leest als een fout, en
     verstopte informatie is erger dan een regel extra. Dus: afbreken,
     en de ruimte elders halen — een graad kleiner en strakkere
     regelafstand doen samen ongeveer hetzelfde. */
  .ks__kenmerken {
    margin-bottom: var(--ng-s-3);
    gap: 2px var(--ng-s-3);
    font-size: var(--ng-t-micro);
    line-height: 1.35;
  }
  /* Het scheidingsteken staat vóór elk item. Zolang de opsomming op één
     regel past valt dat niet op; zodra hij afbreekt begint de tweede regel
     met een losse punt. Op mobiel breekt hij altijd af, dus daar doet de
     tussenruimte het werk en gaat de punt eruit. */
  .ks__kenmerken li + li::before { content: none; }
}


/* ==========================================================================
   R3 · 2026-10-01 · wijziging uit het goedgekeurde R2-prototype
   (prototype/r2/r2.css, blok 3), ongewijzigd overgenomen. Staat achteraan,
   zodat het net als in het prototype ná de regels hierboven telt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   3 · ks — kamerstrook · WIJZIGING op 30-ks-kamerstrook.css
   -------------------------------------------------------------------------- */

/* De kop: titel links, toelichting rechts, op het 5:7-raster dat de rest van
   de pagina ook gebruikt. De bovenregel is weg (T-11). */
.ks__kop-blok { max-width: none; }
@media (min-width: 62rem) {
  .ks__kop-blok {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: var(--ng-s-8);
    align-items: end;
  }
  .ks__kop { margin: 0; }
  .ks__intro { max-width: 46ch; }
}

/* T-05 · het verloop volgt het label, niet het paneel.
   --------------------------------------------------------------------------
   `--ks-label` staat per paneel in de markup, naast `--ks-focus`: de lengte
   van het label (naam plus typeregel) inclusief de marge eromheen, in rem.
   Gemeten op de render: 189 px (Koraal) tot 337 px (GroupStay). Het verloop
   blijft ≥ .78 tot aan die lengte en loopt daarna weg. Zonder de variabele
   geldt 21,75 rem — de waarde van het langste label, gelijk aan de baseline
   bij een strook van 672 px — dus een paneel dat hem mist wordt niet lichter
   dan nu.

   In rem en niet in procenten: de baseline hing het verloop op aan de
   paneelhoogte (52 %), terwijl het label een vaste lengte heeft. Bij een
   lagere strook reikte het langste label dan boven de donkere zone uit.

   BREED · een gesloten paneel is een verticale strook; het label loopt van
   onder naar boven. Baseline: ≥ .78 tot 52 % voor álle panelen, terwijl vijf
   van de zes labels tussen 28 en 34 % eindigen. */
@media (min-width: 62rem) {
  .ks__paneel:not(.is-open)::before {
    background: linear-gradient(to top,
      rgba(20, 59, 53, .92)  0,
      rgba(20, 59, 53, .88)  calc(var(--ks-label, 21.75rem) - 7rem),
      rgba(20, 59, 53, .78)  var(--ks-label, 21.75rem),
      rgba(20, 59, 53, .30)  calc(var(--ks-label, 21.75rem) + 5rem),
      rgba(20, 59, 53, .10)  calc(var(--ks-label, 21.75rem) + 11rem),
      rgba(20, 59, 53, .06)  100%);
  }
}

/* SMAL · contrastherstel. Een gesloten paneel is hier een rij van 5,5 rem en
   het label staat horizontaal. Het baselineverloop loopt van onder naar
   boven en is op de hoogte van de NAAM al bijna weg: gemeten op 390 px
   1,76–2,90 : 1 (norm 4,5). In een geopend paneel staan naam en type bovenin
   op de kale foto: 1,27–2,44 : 1 bij vijf van de zes.

   Zelfde principe als op breed, andere as: donker over de lengte van het
   label, van links naar rechts; rechts daarvan blijft de foto vrij. In een
   geopend paneel krijgt de bovenrand een band ter hoogte van het label. */
@media (max-width: 61.99rem) {
  .ks__paneel:not(.is-open)::before {
    background: linear-gradient(to right,
      rgba(20, 59, 53, .86)  0,
      rgba(20, 59, 53, .80)  var(--ks-label, 21.75rem),
      rgba(20, 59, 53, .30)  calc(var(--ks-label, 21.75rem) + 3rem),
      rgba(20, 59, 53, .10)  calc(var(--ks-label, 21.75rem) + 6rem));
  }
  .ks__paneel.is-open::before {
    background:
      linear-gradient(to bottom,
        rgba(20, 59, 53, .86)  0,
        rgba(20, 59, 53, .80)  5rem,
        rgba(20, 59, 53, .30)  7.5rem,
        rgba(20, 59, 53, 0)    11rem),
      linear-gradient(to top,
        rgba(20, 59, 53, .62)   0%,
        rgba(20, 59, 53, .42)  30%,
        rgba(20, 59, 53, .18)  60%,
        rgba(20, 59, 53, .10) 100%);
  }
}

/* R3 · 2026-10-01 · gemeten op staging na de uitrol.
   Elementor levert `.elementor a { box-shadow: none; text-decoration: none }` (0,1,1). De omlijnde knop
   "Beschikbaarheid" droeg zijn rand op een enkele klasse (0,1,0) en had daardoor op de site nooit een rand —
   in de previews en in het prototype wel. Met `a.` ervoor weegt de regel even zwaar en wint de bronvolgorde. */
a.ks__actie--tweede { box-shadow: inset 0 0 0 1px rgba(255, 254, 252, .55); }
a.ks__actie--tweede:hover { box-shadow: inset 0 0 0 1px rgba(255, 254, 252, .92); }