/* =============================================================================
   Verfijning — de opknapbeurt.

   Deze laag komt ná style.css en blokken.css en overschrijft alleen wat beter
   moet. De originele opmaak blijft daardoor ongewijzigd: haal dit bestand uit
   de <head> en de site ziet er weer precies zo uit als hij was.

   Wat hier gebeurt, per onderdeel, met de reden erbij.
   ========================================================================== */

:root {
  /* De oude waarden stonden op 15px met regelhoogte 1.5. Dat is aan de kleine
     kant voor lopende tekst; 16/1.65 leest rustiger zonder dat de pagina
     merkbaar langer wordt. */
  --body-font-size: 16px;
  --regelhoogte: 1.65;
  /* Eén maat voor de ruimte tussen blokken, zodat het ritme overal gelijk is. */
  --ruimte: 28px;
}

body {
  font-size: var(--body-font-size);
  line-height: var(--regelhoogte);
  -webkit-font-smoothing: antialiased;
}

p, ul, li {
  font-size: var(--body-font-size);
  line-height: var(--regelhoogte);
}

.nk-tekstveld p,
.nk-tekstveld ul,
.nk-tekstveld li {
  font-size: var(--body-font-size) !important;
  line-height: var(--regelhoogte) !important;
}

/* =============================================================================
   HET PALET

   Het bruin (#281B0C) in de balk en de footer, en het beige (#E9D9C7) achter
   de veelgestelde vragen, komen in het logo nergens voor. Het logo heeft twee
   kleuren en meer niet: diep groenblauw #185853 en turkoois #00A99D. Daarop is
   dit palet gebouwd, zodat het logo op zijn eigen achtergrond staat in plaats
   van tegen een vreemde kleur aan.

   De richting komt niet uit de lucht vallen. Van twaalf gemeten hotelsites
   gebruikt géén enkele een donkere paginakleur, en bijna niemand zwart of
   neutraal grijs voor de donkere vlakken: Hotel Sanders in Kopenhagen neemt
   bijna-zwart groen (#001d13), Villa Copenhagen #1b4e3f, Château Royal Berlijn
   #2a3a26. Een donker vlak mét kleurtoon is precies wat de goed ontworpen
   sites doen — en bij een hotel dat "wellbeing by design" belooft hoort die
   toon groen te zijn, want dat is de kleur die het merk zelf al voert.

   Zes kleuren die er echt toe doen. De mediaan van de gemeten sites is er ook
   zes; vijf tot acht is de bandbreedte.
   ========================================================================== */
:root {
  --nk-papier:     #F7F5F0;  /* de pagina: warm gebroken wit, zoals bij elf van de twaalf */
  --nk-doek:       #E8EFEB;  /* het tweede vlak: bleek groengrijs, vervangt het beige */
  --nk-diep:       #0F312C;  /* balk en footer: het logogroen, dieper getrokken */
  --nk-inkt:       #1D2C28;  /* koppen en tekst: donker mét groene toon, geen grijs */
  --nk-inkt-zacht: #55635E;  /* bijschriften en kleine tekst */
  --nk-merk:       #185853;  /* rechtstreeks uit het logo — knoppen */
  --nk-merk-fel:   #00A99D;  /* rechtstreeks uit het logo — accent, hover, streepjes */

  /* De site draait volledig op deze variabelen; ze hier opnieuw zetten kleurt
     alles in één keer om, zonder dat er ergens anders iets hoeft te wijzigen. */
  --primary-bg-color:   var(--nk-papier);
  --secondary-bg-color: var(--nk-doek);
  --bg-nav:             var(--nk-diep);
  --body-color:         #3D4B46;
  --title-color:        var(--nk-inkt);
  --subtitle-color:     var(--nk-merk-fel);
  --cta-color:          var(--nk-merk);
  --cta-hover-color:    var(--nk-merk-fel);
  --btn-none-color:     var(--nk-merk);
  --content-bg-color:   var(--nk-merk);
}

body {
  background: var(--nk-papier);
}

/* De ondertitel stond in turkoois op wit; dat leest slecht op klein formaat.
   Als kapitaaltjes met ruimte ertussen doet hij zijn werk wél. */
.nk-ondertitel {
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--nk-merk) !important;
}

/* Het logo krijgt lucht in de donkere balk. */
.nk-logo.nkb-navigatie img:where(.nkb-navigatie),
.nk-logo.nkb-navbalk img:where(.nkb-navbalk) {
  height: 62px !important;
}

/* De footer was twee smalle kolommen in een bruin vlak. Zelfde vlak, maar in
   het diepe groen, met meer ruimte en een zichtbare scheiding onderin. */
.nk-sectie.nkb-footer .nk-kader.nk-raster {
  gap: 48px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.nk-sectie.nkb-footer h3 {
  font-size: 1.15em !important;
  letter-spacing: 0.02em;
  margin-bottom: 14px !important;
}

.nk-sectie.nkb-footer a {
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 4px;
}

.nk-sectie.nkb-footer a:hover {
  color: var(--nk-merk-fel) !important;
  text-decoration-color: var(--nk-merk-fel);
}

.nk-kader.nk-wit.nk-onderregel.nkb-footer {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 20px;
  font-size: 14px;
  opacity: .8;
}

/* -----------------------------------------------------------------------------
   1. De menubalk
   "Explore The Hague" viel over twee regels en trok de hele balk scheef. Het
   menu had een vaste breedte van 50%; dat wordt de breedte die het nodig heeft.
   -------------------------------------------------------------------------- */
.nk-nav-inhoud.nkb-navigatie,
.nk-nav-inhoud.nkb-navbalk {
  width: auto;
  gap: 26px;
  justify-content: flex-end;
  flex: 1 1 auto;
  padding: 0 24px;
}

.nk-nav-inhoud.nkb-navigatie .nk-nav-item,
.nk-nav-inhoud.nkb-navbalk .nk-nav-item {
  white-space: nowrap;
}

.nk-nav-inhoud.nkb-navigatie a,
.nk-nav-inhoud.nkb-navbalk a {
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* De taalknop en de boekknop rechts mogen niet meekrimpen; anders wordt de
   "NL" afgeknepen zodra het menu breed wordt. */
.nk-nav-acties.nkb-navigatie,
.nk-nav-acties.nkb-navbalk {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .nk-nav-inhoud.nkb-navigatie,
  .nk-nav-inhoud.nkb-navbalk { gap: 16px; padding: 0 12px; }
  .nk-nav-inhoud.nkb-navigatie a,
  .nk-nav-inhoud.nkb-navbalk a { font-size: 13px; }
}

/* -----------------------------------------------------------------------------
   2. Tekstblokken
   De inleiding stond in een kolom van 1000px, gecentreerd, op 15px. Een regel
   van 1000px is te lang om prettig te lezen; het oog verliest de volgende
   regel. 68 tekens is de vuistregel, dat komt hier neer op ongeveer 680px.
   -------------------------------------------------------------------------- */
.nk-tekst-kader.nkb-tekstblok {
  max-width: 720px;
  padding: 72px 20px;
  gap: 18px;
}

.nk-tekst-kader.nkb-tekstblok p,
.nk-tekst-kader.nkb-tekstblok .nk-tekstveld p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin: 0 auto !important;
  max-width: 640px;
}

/* Een kop van 3em is fors op een smalle kolom; iets kleiner staat rustiger
   en laat de tekst eronder beter tot zijn recht komen. */
.nk-tekst-kader.nkb-tekstblok h1,
.nk-tekst-kader.nkb-tekstblok .nk-tekstveld h1 {
  font-size: 2.4em !important;
  line-height: 1.2;
}

/* -----------------------------------------------------------------------------
   3. De twee kaarten naast elkaar
   De kaarten waren ongelijk hoog en de tekst zweefde los onder de foto. Nu
   zijn het echte kaarten: even hoog, met de knop altijd onderaan uitgelijnd.
   -------------------------------------------------------------------------- */
.nk-kader.nkb-kaarten {
  gap: 28px;
  align-items: stretch;
}

.nk-tegel.nkb-kaarten {
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .04);
}

.nk-tegel.nkb-kaarten .nk-tekst-kader {
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
}

.nk-tegel.nkb-kaarten .nk-tekst-kader p {
  margin: 4px 0 0;
}

/* De knop naar onderen duwen, zodat twee kaarten met verschillend lange tekst
   hun knop toch op dezelfde hoogte hebben staan. */
.nk-tegel.nkb-kaarten .nk-tekst-kader .nk-knop-leeg {
  margin-top: auto;
  align-self: flex-start;
}

.nk-tegel.nkb-kaarten h2.nk-titel {
  font-size: 1.7em !important;
  line-height: 1.25;
}

/* -----------------------------------------------------------------------------
   4. Tekst met foto ernaast
   Het witte vlak liep tot tegen de rand van de tekst aan. Ademruimte erbij,
   en het lijstje leesbaar maken.
   -------------------------------------------------------------------------- */
.nk-flex.nkb-tekst-foto {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.nk-tekst-kader.nkb-tekst-foto {
  padding: 48px 44px;
  justify-content: center;
}

.nk-tekst-kader.nkb-tekst-foto ul {
  margin: 6px 0 22px;
  padding-left: 20px;
}

.nk-tekst-kader.nkb-tekst-foto li {
  margin-bottom: 8px;
}

.nk-tekst-kader.nkb-tekst-foto h3.nk-titel {
  font-size: 1.8em !important;
  line-height: 1.25;
  margin-bottom: 4px !important;
}

/* -----------------------------------------------------------------------------
   5. Kamers
   Dit was het grootste zeer: drie kamers in twee kolommen, dus de derde hing
   alleen linksonder met een leeg vlak ernaast. Nu een raster van drie gelijke
   kaarten, even hoog, met de boekknop onderaan uitgelijnd.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .nk-kamers-lijst.nkb-kamers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
  }

  .nk-kamers-lijst.nkb-kamers .splide.nkb-kamers {
    max-width: none;
    flex: initial;
    width: auto;
  }
}

.nk-kamers-lijst.nkb-kamers .splide.nkb-kamers {
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .04);
}

.nk-kamers-lijst.nkb-kamers .nk-tekst-inhoud {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
}

.nk-kamers-lijst.nkb-kamers .nk-tekst-inhoud h2,
.nk-kamers-lijst.nkb-kamers .nk-tekst-inhoud h3 {
  font-size: 1.55em !important;
  line-height: 1.25;
}

/* De voorzieningen als een rustig lijstje onder een streepje, in plaats van
   losse regels die tegen de tekst aan plakken. */
.nk-kamers-lijst.nkb-kamers .nk-voordelen {
  max-width: none;
  border-top: 1px solid #ece7e0;
  margin-top: 14px;
  padding-top: 14px;
  gap: 2px 16px;
}

.nk-kamers-lijst.nkb-kamers .nk-voordeel {
  width: 100%;
  padding: 4px 0;
}

.nk-kamers-lijst.nkb-kamers .nk-voordeel p {
  font-size: 15px;
  color: #5c5c5c;
}

.nk-kamers-lijst.nkb-kamers .nk-knoppen {
  margin-top: auto;
  padding-top: 20px;
}

/* De kaarten liepen tot tegen de footer aan. Lucht eronder. */
.nk-kamers-lijst.nkb-kamers {
  padding-bottom: 80px;
}

/* -----------------------------------------------------------------------------
   6. Veelgestelde vragen
   Zeven massieve donkergroene balken pakten een kwart van de homepage. Als
   witte regels met een dun lijntje ertussen vragen ze de aandacht die ze
   verdienen: die van een naslagwerkje, niet die van een hoofdgerecht.
   -------------------------------------------------------------------------- */
.nk-faq-item.nkb-faq {
  background: #fff;
  margin-bottom: 0;
  border-bottom: 1px solid #e7e1d8;
  border-radius: 0;
}

.nk-faq-item.nkb-faq:first-of-type {
  border-top: 1px solid #e7e1d8;
}

.nk-faq-knop.nkb-faq {
  background: transparent;
  color: var(--title-color);
  font-family: var(--title-font-family);
  font-size: 1.05rem;
  font-weight: 500;
  padding: 20px 4px;
  border-radius: 0;
}

.nk-faq-knop.nkb-faq:hover {
  color: var(--cta-color);
}

/* De logokleur moet wél zichtbaar blijven. Hij zit hier in het plusje, in de
   lijn die onder een geopende vraag verschijnt, en in de kleur van de vraag
   zodra je er met de muis overheen gaat. */
.nk-faq-icoon.nkb-faq {
  color: var(--nk-merk-fel);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  transition: transform .2s ease;
}

.nk-faq-item.nkb-faq:has(.nk-faq-inhoud.nk-uitgeklapt) {
  border-left: 3px solid var(--nk-merk-fel);
}

.nk-faq-item.nkb-faq:has(.nk-faq-inhoud.nk-uitgeklapt) .nk-faq-knop {
  padding-left: 18px;
  color: var(--nk-merk);
}

.nk-faq-item.nkb-faq:has(.nk-faq-inhoud.nk-uitgeklapt) .nk-faq-tekst {
  padding-left: 18px;
}

.nk-faq-inhoud.nkb-faq {
  background: #fff;
}

.nk-sectie.nkb-faq .nk-midden-uit .nk-titel {
  margin-bottom: 26px !important;
}

.nk-faq-tekst.nkb-faq {
  padding: 0 4px 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-color);
}

/* -----------------------------------------------------------------------------
   7. Knoppen
   Drie soorten knoppen met drie verschillende hoogtes. Eén maat.
   -------------------------------------------------------------------------- */
.nk-knop, .nk-knop-cta, .nk-kaart-knop, .nk-knop-leeg {
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 12px 22px;
  border-radius: var(--border-radius);
  transition: background-color .2s ease, color .2s ease;
}

/* -----------------------------------------------------------------------------
   8. De grote foto bovenaan
   De titel stond zonder verloop op de foto. Waar de foto licht is, valt witte
   tekst weg. Een verloop van onderaf geeft altijd contrast, zonder dat de foto
   merkbaar donkerder oogt.
   -------------------------------------------------------------------------- */
/* Het verloop hoort over de héle foto te liggen, niet als vlakje achter de
   tekst. `.nk-inhoud` is een klein doosje midden op de foto; een achtergrond
   daarop levert een grijze balk op. Daarom een aparte laag over de slider. */
.splide.nkb-fotoslider::after,
.nk-beeld-wrapper.nkb-kopbeeld::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to top, rgba(20, 16, 10, .48) 0%,
                                      rgba(20, 16, 10, .18) 45%,
                                      rgba(20, 16, 10, 0) 78%);
}

/* En een klein verloop bovenaan. De menubalk is doorzichtig op de homepage;
   waar het plafond op de foto licht is, valt witte menutekst anders weg. */
.splide.nkb-fotoslider::before,
.nk-beeld-wrapper.nkb-kopbeeld::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(20, 16, 10, .42) 0%,
                                         rgba(20, 16, 10, .12) 55%,
                                         rgba(20, 16, 10, 0) 100%);
}

.nk-beeld-wrapper.nkb-kopbeeld {
  position: relative;
}

.splide.nkb-fotoslider .nk-titel,
.nk-inhoud.nkb-kopbeeld .nk-titel {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

/* De knop die onder de titel op de openingsfoto staat. */
.nk-hero-actie {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.nk-hero-actie .nk-knop-cta {
  font-size: 15px;
  padding: 14px 30px;
}

/* =============================================================================
   9. DE TWEE NIEUWE BLOKKEN
   ========================================================================== */

.nk-midden { text-align: center; }

/* -----------------------------------------------------------------------------
   Kamers kort — de kamers op de homepage
   -------------------------------------------------------------------------- */
/* De inleiding erboven heeft zelf al 72px onderruimte; samen werd dat een gat
   van anderhalve schermhoogte. */
.nk-kamers {
  padding: 20px 0 90px;
}

.nk-kamers h2.nk-titel {
  font-size: 2.4em !important;
  margin-bottom: 12px !important;
}

.nk-kamers .nk-ondertitel {
  margin-bottom: 10px;
}

.nk-kamers-intro {
  max-width: 620px;
  margin: 0 auto 46px !important;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
}

.nk-kamers-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.nk-kamer {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .04);
}

/* De foto krijgt een vaste verhouding, zodat drie kaarten naast elkaar niet
   scheef lopen doordat de ene foto net iets anders is uitgesneden. */
.nk-kamer-beeld {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.nk-kamer-beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.nk-kamer:hover .nk-kamer-beeld img {
  transform: scale(1.04);
}

.nk-kamer-tekst {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.nk-kamer-tekst h3 {
  font-size: 1.5em !important;
  margin: 0 0 6px !important;
}

.nk-kamer-regel {
  margin: 0 !important;
  color: var(--nk-inkt-zacht);
  font-size: 15px;
}

.nk-kamer-knop {
  margin-top: 22px;
  align-self: flex-start;
}

.nk-kamers-meer {
  margin-top: 38px;
}

.nk-tekstlink {
  color: var(--nk-merk);
  font-size: 15px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--nk-merk-fel);
  padding-bottom: 3px;
}

.nk-tekstlink:hover {
  color: var(--nk-merk-fel);
}

/* -----------------------------------------------------------------------------
   Drie redenen — de band in de merkkleur
   -------------------------------------------------------------------------- */
.nk-redenen {
  background: var(--nk-diep);
  padding: 70px 0 72px;
}

.nk-redenen .nk-ondertitel.nk-licht {
  color: var(--nk-merk-fel) !important;
  margin-bottom: 10px;
}

.nk-redenen h2.nk-licht-kop {
  color: #fff !important;
  font-size: 2.3em;
  /* De opmaak van de site zet op elke h2 een eigen marge; die moet hier wijken,
     anders staat de kop links in plaats van gecentreerd. */
  margin: 0 auto 46px !important;
  max-width: 720px;
  line-height: 1.25;
}

.nk-redenen-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  max-width: 1000px;
  margin: 0 auto;
}

.nk-reden {
  text-align: center;
  padding: 0 10px;
}

/* Een nummer in plaats van een icoontje. Iconen zouden verzonnen betekenis
   toevoegen; een nummer telt alleen maar op. */
.nk-reden-nummer {
  display: block;
  font-family: var(--title-font-family);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--nk-merk-fel);
  margin-bottom: 14px;
}

.nk-reden h3 {
  color: #fff !important;
  font-size: 1.35em !important;
  line-height: 1.35;
  margin: 0 0 8px !important;
}

.nk-reden p {
  color: rgba(255, 255, 255, .72);
  margin: 0 !important;
  font-size: 15px;
}

.nk-redenen-knop {
  margin-top: 40px;
}

/* Een lichte knop op het donkere vlak; de gewone groene knop zou erin wegvallen. */
.nk-knop-licht {
  background: var(--nk-merk-fel);
  color: var(--nk-diep) !important;
  font-weight: 600;
  padding: 14px 30px;
  font-size: 15px;
}

.nk-knop-licht:hover {
  background: #fff;
  color: var(--nk-diep) !important;
}

/* -----------------------------------------------------------------------------
   Smallere schermen
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .nk-kamers-raster { grid-template-columns: 1fr 1fr; }
  .nk-redenen-raster { grid-template-columns: 1fr; gap: 30px; }
  .nk-reden { text-align: left; padding: 0; }
}

@media (max-width: 640px) {
  .nk-kamers-raster { grid-template-columns: 1fr; }
  .nk-kamers { padding: 56px 0 60px; }
  .nk-redenen { padding: 56px 0 60px; }
  .nk-kamers h2.nk-titel, .nk-redenen h2.nk-licht-kop { font-size: 1.9em !important; }
}

/* -----------------------------------------------------------------------------
   Belofte — waar het hotel voor staat

   Dit is bewust het rustigste blok van de pagina. Een hotel dat "wellbeing by
   design" belooft, kan dat het beste laten zien door hier níét te schreeuwen:
   veel lucht, één grote regel, en drie woorden eronder.
   -------------------------------------------------------------------------- */
.nk-belofte {
  background: var(--nk-doek);
  /* Het tekstblok erboven heeft zelf al 72px onderruimte. */
  padding: 74px 0 88px;
}

.nk-belofte .nk-ondertitel {
  margin-bottom: 26px;
}

.nk-belofte-regel {
  font-family: var(--title-font-family);
  font-size: 3.4em;
  line-height: 1.15;
  color: var(--nk-inkt);
  text-align: center;
  margin: 0 auto 26px !important;
  max-width: 900px;
}

.nk-belofte-tekst {
  text-align: center;
  max-width: 560px;
  margin: 0 auto !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--nk-inkt-zacht);
}

/* De drie kernpunten: geen kaartjes, geen icoontjes. Een streepje erboven is
   genoeg om ze uit elkaar te houden. */
.nk-belofte-punten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Ruimte tussen de kolommen, anders lopen de drie streepjes in elkaar over
     en lijkt het één doorlopende lijn. */
  gap: 0 42px;
  max-width: 900px;
  margin: 58px auto 0;
}

.nk-belofte-punt {
  text-align: center;
  padding: 22px 18px 0;
  border-top: 1px solid rgba(24, 88, 83, .22);
}

.nk-belofte-punt span {
  font-family: var(--title-font-family);
  font-size: 1.2em;
  color: var(--nk-merk);
  line-height: 1.35;
  display: block;
}

@media (max-width: 860px) {
  .nk-belofte { padding: 66px 0 70px; }
  .nk-belofte-regel { font-size: 2.3em; }
  .nk-belofte-tekst { font-size: 17px !important; }
  .nk-belofte-punten { grid-template-columns: 1fr; margin-top: 44px; }
  .nk-belofte-punt { padding: 18px 0 0; }
}

/* Het logo in de donkere balk: wit, net als boven op de foto. In kleur viel
   het woord NORDSEKA weg tegen het donkergroen (bijna dezelfde kleur). De
   logokleuren blijven zichtbaar in de knoppen, streepjes en accenten. */
section.nkb-navigatie .nk-logo img,
section.nkb-navbalk.nk-gescrolld .nk-logo img,
.nk-sectie.nkb-footer .nk-kader.nk-raster > a > img {
  filter: brightness(0) invert(1) !important;
}

/* Grote koppen in de Lora-letter staan strakker onder elkaar. */
h1.nk-titel, h2.nk-titel {
  line-height: 1.15 !important;
}

/* ---------------------------------------------------------------------------
   Afronding — één maat voor de hele site

   Op de oude site had elk blok zijn eigen hoek: 0 px, 5 px of 12 px door
   elkaar. Dat oogt slordig. Hier staat één schaal: foto's en kaarten 18 px,
   knoppen en kleine vlakken 10 px. Schermvullende beelden (de foto bovenaan
   een pagina, het logo, de kaart van Google) blijven recht, want een ronde
   hoek tegen de rand van het scherm ziet er vreemd uit.
--------------------------------------------------------------------------- */
:root {
  --nk-rond: 18px;
  --nk-rond-klein: 10px;
}

/* Foto's in blokken */
.nk-tegel .nk-beeld-wrapper,
.nk-tegel .nk-beeld-wrapper picture,
.nk-tegel .nk-beeld-wrapper img,
.nk-rechterkant.nk-beeld-wrapper,
.nk-rechterkant.nk-beeld-wrapper picture,
.nk-rechterkant.nk-beeld-wrapper img,
.nk-flex.nkb-tekst-fotoslider .splide__slide img,
.nk-galerij-beelden .nk-beeld-knop,
.nk-galerij-beelden .nk-beeld-knop img,
.nk-kamer-kaart .splide__slide img,
.nk-kamer,
.nk-kamer-beeld img,
.nk-medewerker,
.nk-medewerker img,
.nk-beeld-kader,
.nk-beeld-kader img,
.nk-kaart-wrapper,
.nk-kaart-wrapper iframe,
.nk-kaart-sectie iframe,
.nk-kader.nkb-kaarten > .nk-tegel,
.nk-kamer-kaart.nkb-kamers,
.nk-review {
  border-radius: var(--nk-rond) !important;
  overflow: hidden;
}

/* Kleine vlakken: knoppen, invoervelden, de vragenlijst */
.nk-knop,
.nk-knop-cta,
button.nk-knop,
.nk-knop-leeg,
.nk-tweede-knop,
input[type="text"], input[type="email"], input[type="tel"], textarea, select,
.nk-faq-item,
.nk-cijfer {
  border-radius: var(--nk-rond-klein) !important;
}

/* Recht blijven: schermvullend beeld, het logo, kaarttegels */
section.splide.nkb-fotoslider img,
section.splide.nkb-fotoslider picture,
.nk-beeld-wrapper.nkb-kopbeeld,
.nk-beeld-wrapper.nkb-kopbeeld img,
.nk-beeld-wrapper.nkb-kopbeeld picture,
[data-nav] img,
.nk-sectie.nkb-footer img,
.leaflet-container img,
.leaflet-container .leaflet-tile {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   Taalkeuze — allebei de talen zichtbaar

   Eerst stond er alleen de taal waar je naartoe ging ("NL" op een Engelse
   pagina). Wie de pagina niet las, wist niet in welke taal hij zát. Nu staan
   beide talen er: de huidige gedempt, de andere als link. Op de telefoon
   staat de keuze ook in de onderste balk, niet alleen in het uitklapmenu.
--------------------------------------------------------------------------- */
.nk-talen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.nk-talen .nk-taal-nu {
  opacity: .55;
  cursor: default;
  font-weight: 600;
}
.nk-talen .nk-taal-streep { opacity: .35; }
.nk-talen a.nk-taal {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nk-talen a.nk-taal:hover { opacity: .8; }

/* In het uitklapmenu staan hele woorden; die mogen wat rustiger. */
.nk-talen-menu { font-size: .55em; gap: 8px; }

/* Onderste balk op de telefoon: op één regel, net als de andere knoppen. */
.nk-mobiel-balk .nk-taal-mobiel {
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  align-self: center;
}
.nk-taal-mobiel .nk-taal-nu { opacity: .55; }
.nk-taal-mobiel .nk-taal-streep { opacity: .35; }

/* Bronvermelding onder een foto van iemand anders: klein en rustig. */
.nk-fotocredit {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  opacity: .6;
}
.nk-fotocredit a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Foto's in de tweekolomskaarten: lager

   In de oude opmaak was het fotovlak 650 px hoog (op kleinere schermen 350 tot
   450 px). Twee van die kaarten onder elkaar en je bent een halve minuut aan
   het scrollen voordat je bij de tekst bent. Hier schaalt de hoogte mee met
   het scherm, met een bovengrens: beeld genoeg om iets te zien, kort genoeg om
   de tekst in beeld te houden.
--------------------------------------------------------------------------- */
.nk-beeld-wrapper.nkb-kaarten {
  height: clamp(200px, 22vw, 320px) !important;
}
@media (max-width: 991.98px) {
  .nk-beeld-wrapper.nkb-kaarten { height: clamp(180px, 42vw, 280px) !important; }
}