@import url('../fonts/schibsted-grotesk.css');
@import url('../fonts/lora.css');

/* =============================================================================
   Nordseka — eigen opmaak
   Geschreven voor Hotel Nordseka, oktober 2026.

   Opzet van dit bestand:

     1. instellingen   kleuren, lettertypen en maten die overal terugkomen
     2. basis          body, koppen, tekst, links, knoppen, container
     3. blokken        per blok een eigen kopje, in de volgorde van de pagina

   De blokken heten nkb-<naam>: nordseka-blok. Klassen die wij zelf toevoegen
   heten nk-<naam>.

   Wat hier níét meer in staat: de opmaak van de tekstverwerker van het vorige
   systeem (werkbalken, uitklapmenu's, kleurcodering van programmacode). Dat
   waren honderden regels voor schermonderdelen die in Grav niet bestaan en op
   de site dus nooit iets deden. De normalisering van browserverschillen staat
   apart in normalize.css; dat is modern-normalize, een open bestand met een
   MIT-licentie.

   Hernoeming oktober 2026 (Roefs / geen 1-op-1 Svelte-classes):
   Oude generieke Excite-achtige klassen → nk-* (Nordseka-eigen).
   Blokscopes blijven nkb-*. Belangrijkste mapping:
     container→nk-kader  parent→nk-sectie  white→nk-wit
     btn/btn-cta/btn-none→nk-knop/nk-knop-cta/nk-knop-leeg
     menu-lines→nk-menu-strepen  overlay→nk-overlay
     employee-card→nk-medewerker  content-editor→nk-tekstveld
     text-container→nk-tekst-kader  nav-item→nk-nav-item
     b-flex→nk-mobiel-link  columns→nk-kolommen
   Volledige map: zie commit/notitie RENAME_MAP (98 entries).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Instellingen
   -------------------------------------------------------------------------- */
:root {
  /* kleuren */
  --primary-bg-color: #fff;
  --secondary-bg-color: #e9d9c7;
  --bg-nav: #281b0c;
  --body-color: #474747;
  --title-color: #222f40;
  --subtitle-color: #03a599;
  --cta-color: #195853;
  --cta-hover-color: #00a99d;
  --btn-none-color: #195853;

  /* letters */
  --body-font-family: "Schibsted Grotesk", sans-serif;
  --title-font-family: "Lora", sans-serif;
  --body-font-size: 15px;
  --h1-size: 3em;
  --h2-size: 2.6em;
  --h3-size: 1.6em;
  --h4-size: 1.2em;

  /* maten */
  --border-radius: 5px;
  --nk-blok-lucht: 60px;          /* ruimte boven en onder een tekstblok */
  --nk-kolom-breed: 1000px;       /* leesbreedte van een tekstkolom */
  --nk-regel-gat: 10px;           /* ruimte tussen kop, tekst en knop */
  --nk-kaart-breed: 320px;        /* portret in het smoelenboek */
  --nk-kaart-hoog: 400px;
}

/* -----------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #f9f8f6;
  color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Een blok met lucht eromheen; de meeste secties zitten hierin. */
.nk-sectie {
  padding: 75px 0;
}

.nk-kader {
  width: 100%;
  margin-inline: auto;
  padding: 35px;
  padding-bottom: 0 !important;
}

@media (max-width: 920px) {
  .nk-kader {
    padding: 15px;
  }
}

.nk-midden-uit {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- koppen en tekst ------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  margin: 0 0 10px;
  color: var(--title-color) !important;
  font-family: var(--title-font-family);
  font-weight: 500;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
/* Geen maat voor h4: die staat bewust op de standaardgrootte van de browser,
   zoals in de opmaak die met de site meekwam. Pas onder 920 px krijgt hij een
   eigen maat (zie verderop). Zet je hier --h4-size neer, dan worden alle
   h4-koppen groter en lopen pagina's anders af. */

.nk-titel {
  margin: 0 !important;
  color: var(--title-color) !important;
}

/* Het kleine regeltje boven een kop. */
.nk-ondertitel {
  color: var(--subtitle-color) !important;
  font-family: var(--body-font-family) !important;
  font-size: 15px;
  font-weight: 500;
  text-transform: lowercase;
}

p,
ul {
  margin: 20px 0;
  color: var(--body-color);
  font-size: 15px;
  line-height: 1.5;
}

.nk-wit {
  color: #fff !important;
}

.nk-licht-bg {
  background: var(--secondary-bg-color);
}

/* --- tekst uit het beheerscherm -------------------------------------------
   Alles wat in een tekstveld is ingevoerd komt in een .nk-tekstveld te
   staan. Die krijgt dezelfde opmaak als de rest van de pagina, maar met
   !important: de ingevoerde html brengt soms eigen opmaak mee.
   -------------------------------------------------------------------------- */
.nk-tekstveld {
  background: transparent !important;
  font-family: var(--body-font-family) !important;
}

/* Let op de selector. In de opmaak die met de site meekwam stond hier
   `.nk-tekstveld h1, h2, h3, h4`: alleen de h1 is beperkt tot een tekstveld,
   de h2, h3 en h4 gelden voor de héle pagina. Dat ziet eruit als een
   vergeten stukje, maar de hele site leunt erop — zonder deze regel krijgen
   alle koppen een ander gewicht en andere marges. Daarom staat hij hier
   bewust zo, met deze uitleg erbij. */
.nk-tekstveld h1,
h2,
h3,
h4 {
  margin: 0 0 10px !important;
  color: var(--title-color) !important;
  font-family: var(--title-font-family) !important;
  font-weight: 400 !important;
}

.nk-tekstveld h1 { font-size: var(--h1-size) !important; }
.nk-tekstveld h2 { font-size: var(--h2-size) !important; }
.nk-tekstveld h3 { font-size: var(--h3-size) !important; }

/* Zelfde verhaal: de `ul` hier geldt voor elke opsomming op de pagina. */
.nk-tekstveld p,
ul {
  margin: 0 0 20px !important;
  line-height: 28px !important;
}

.nk-tekstveld ul,
.nk-tekstveld ol {
  margin: 1em 0;
  padding-left: 2em;
  border: none;
  background: none;
  font-size: 1em;
}

.nk-tekstveld ul { list-style-type: disc; }
.nk-tekstveld ol { list-style-type: decimal; }

.nk-tekstveld li {
  padding: 0;
  border: none;
  background: none;
}

.nk-tekstveld img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tabellen worden gebruikt in de voorwaarden en de privacyverklaring. */
.nk-tekstveld table {
  width: 100%;
  margin: 0.2em 0;
  border-collapse: collapse;
  background: #fff;
  font-size: 1em;
}

.nk-tekstveld th,
.nk-tekstveld td {
  padding: 0.2em 0.4em;
  border: 1px solid #e2e2e2;
  text-align: left;
}

.nk-tekstveld th {
  background: #f5f5f7;
  font-weight: bold;
}

.nk-tekstveld tr:nth-child(even) {
  background: #fafbfc;
}

.nk-tekstveld tr:hover {
  background: #f0f7ff;
  transition: background 0.2s;
}

.nk-wit .nk-tekstveld {
  color: #fff !important;
}

/* Op een kleiner scherm moeten de koppen mee omlaag, anders breken ze. */
@media (max-width: 920px) {
  h1 { font-size: 38px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }

  .nk-titel { font-size: 20px; }
  .nk-ondertitel { font-size: 13px; }
  p { font-size: 13px; }

  .nk-tekstveld h1 { font-size: 38px !important; }
  .nk-tekstveld h2 { font-size: 32px !important; }
  .nk-tekstveld h3 { font-size: 24px !important; }
  .nk-tekstveld h4 { font-size: 20px !important; }
}

@media (max-width: 680px) {
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }

  .nk-tekstveld h1 { font-size: 32px !important; }
  .nk-tekstveld h2 { font-size: 28px !important; }
  .nk-tekstveld h3 { font-size: 22px !important; }
}

/* --- links en knoppen ----------------------------------------------------- */
a {
  color: var(--cta-color);
  text-decoration: none;
  transition: all ease 400ms;
}

a:hover {
  color: var(--cta-hover-color);
}

.nk-knop,
a,
button {
  border-radius: var(--border-radius);
  transition:
    background-color 0.3s ease-in-out,
    opacity 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.nk-knop,
.nk-knop-cta,
.nk-knop-leeg {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 5px 25px;
  border: none;
  color: #fff;
  font-size: var(--body-font-size);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.nk-knop-cta {
  background: var(--cta-color);
}

/* Een knop met alleen een randje, voor de tweede keuze op een pagina. */
.nk-knop-leeg {
  border: 1px solid var(--btn-none-color);
  background: transparent;
  color: var(--btn-none-color);
}

.nk-knop:hover,
.nk-knop-cta:hover {
  border-color: var(--cta-hover-color);
  background: var(--cta-hover-color);
  color: #fff;
  cursor: pointer;
}

.nk-knop-leeg:hover {
  border-color: var(--btn-none-color);
  background: var(--btn-none-color);
  color: #fff;
}

/* Tekstlink met een streepje eronder, in een kaart. */
.nk-kaart-knop,
.nk-kaart-knop {
  display: inline-block;
  background-color: transparent;
  font-weight: 500;
}

.nk-kaart-knop {
  border-bottom: 1px solid #fff;
  color: #fff;
}

.nk-kaart-knop {
  border-bottom: 1px solid var(--cta-color);
  border-radius: 0 !important;
  color: var(--cta-color);
}

/* -----------------------------------------------------------------------------
   3. Blokken
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Tekstblok — een kop met vrije tekst, gecentreerd op de pagina.
   Het meest gebruikte blok van de site.
   -------------------------------------------------------------------------- */
.nk-kader.nkb-tekstblok {
  display: flex;
  align-items: center;
  gap: 10%;
}

.nk-tekst-kader.nkb-tekstblok {
  display: flex;
  flex-direction: column;
  gap: var(--nk-regel-gat);
  max-width: var(--nk-kolom-breed);
  margin-inline: auto;
  padding-block: var(--nk-blok-lucht);
  text-align: center;
}

/* De kop staat al in een vlak met eigen ruimte eromheen. */
h1.nkb-tekstblok {
  margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   Hero — zelfde vorm als het tekstblok, maar met knoppen eronder.
   -------------------------------------------------------------------------- */
.nk-kader.nkb-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 !important;
}

.nk-tekst-kader.nkb-hero {
  display: flex;
  flex-direction: column;
  gap: var(--nk-regel-gat);
  max-width: var(--nk-kolom-breed);
  margin-inline: auto;
  padding-block: var(--nk-blok-lucht);
  text-align: center;
}

.nk-links.nkb-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
}

/* -----------------------------------------------------------------------------
   Kop met beeld — de schermvullende foto bovenaan een pagina, met de titel
   onderin. De foto schuift onder de menubalk door; daarom de negatieve marge.
   Achter de foto staat dezelfde foto nog een keer, onscherp, zodat de randen
   niet wit zijn als de verhouding niet klopt.
   -------------------------------------------------------------------------- */
.nk-beeld-wrapper.nkb-kopbeeld {
  height: 100vh;
  margin-top: -100px;
  overflow: hidden;
}

.nk-filter-blur.nkb-kopbeeld,
.nk-filter.nkb-kopbeeld {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nk-filter-blur.nkb-kopbeeld {
  height: 100vh;
  filter: blur(10px);
}

.nk-filter.nkb-kopbeeld {
  height: 90vh;
}

.nk-beeld-wrapper.nkb-kopbeeld picture.nkb-kopbeeld,
picture.nkb-kopbeeld {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
  filter: brightness(0.7);
}

.nk-inhoud.nkb-kopbeeld {
  position: absolute;
  bottom: 15%;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--nk-regel-gat);
  align-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* -----------------------------------------------------------------------------
   Smoelenboek — portretten per bedrijf. De kaarten staan naast elkaar en
   lopen door op een smal scherm; de naam staat onderin over de foto heen.
   -------------------------------------------------------------------------- */
section.nkb-smoelenboek {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: pre-line;
}

.nk-gekozen.nkb-smoelenboek {
  background: var(--cta-color);
  color: #fff;
}

.nk-bedrijf-tekst.nkb-smoelenboek {
  max-width: 50%;
  text-align: center !important;
}

.nk-medewerkers.nkb-smoelenboek {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.nk-medewerker.nkb-smoelenboek {
  position: relative;
  width: var(--nk-kaart-breed);
  height: var(--nk-kaart-hoog);
  overflow: hidden;
  border-radius: 12px;
}

.nk-beeld-kader.nkb-smoelenboek {
  position: relative;
  width: 100%;
  height: 100%;
}

.nk-beeld-kader.nkb-smoelenboek img:where(.nkb-smoelenboek) {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

/* De naam leest alleen als er iets donkers achter staat. */
.nk-onder-info.nkb-smoelenboek {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 100%;
  padding: 20px 10px;
  color: #fff;
  text-align: center;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.5));
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

/* -----------------------------------------------------------------------------
   Veelgestelde vragen — uitklapbare vragen. De vraag is een knop in de
   merkkleur, het antwoord schuift eronder open. Het openklappen gebeurt door
   de maximale hoogte te laten groeien; daar hangt de overgang aan.
   -------------------------------------------------------------------------- */
section.nkb-faq {
  display: flex;
  flex-direction: column;
}

.nk-kader.nkb-faq {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 15px;
}

.nk-faq-item.nkb-faq {
  margin-bottom: 15px;
  overflow: hidden;
  background: var(--cta-color);
}

.nk-faq-knop.nkb-faq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: var(--border-radius);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color 0.5s ease, border-radius 0.5s ease;
}

.nk-faq-icoon.nkb-faq {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-right: 25px;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
}

/* Dicht = geen hoogte. Open = ruim genoeg voor het langste antwoord. */
.nk-faq-inhoud.nkb-faq {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  font-size: 0.9rem;
  transition: max-height 0.5s ease;
}

.nk-faq-inhoud.nk-uitgeklapt.nkb-faq {
  max-height: 500px;
}

.nk-faq-tekst.nkb-faq {
  padding: 10px;
}

/* -----------------------------------------------------------------------------
   Fotoslider — schermvullende foto's bovenaan de homepage, met de titel in
   het midden. Achter elke foto staat dezelfde foto onscherp, zodat er geen
   witte randen ontstaan bij een afwijkende verhouding.
   -------------------------------------------------------------------------- */
.splide.nkb-fotoslider {
  position: relative;
  width: 100%;
}

.splide__slide.nkb-fotoslider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  height: 100vh;
}

.nk-filter-blur.nkb-fotoslider,
.nk-filter.nkb-fotoslider {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nk-filter-blur.nkb-fotoslider {
  filter: blur(10px);
}

picture.nkb-fotoslider {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  filter: brightness(0.9);
}

.nk-inhoud.nkb-fotoslider {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--nk-regel-gat);
  align-items: center;
  text-align: center;
  transform: translate(-50%, -50%);
}

h1.nkb-fotoslider {
  font-size: 62px;
}

.splide__pagination.nkb-fotoslider {
  bottom: 3% !important;
}

@media (max-width: 575.98px) {
  .splide__slide.nkb-fotoslider {
    height: 80vh;
  }

  h1.nkb-fotoslider {
    font-size: 46px;
  }
}

/* -----------------------------------------------------------------------------
   Contact — tekst links, formulier rechts in een wit vlak. Naarmate het
   scherm smaller wordt groeit het formulier, en onder de 992 px gaat het
   onder de tekst staan in plaats van ernaast.
   -------------------------------------------------------------------------- */
.nk-kader.nkb-contact {
  display: flex;
  justify-content: space-between;
  gap: 10%;
}

.nk-tekst-kader.nkb-contact {
  display: flex;
  flex-direction: column;
  gap: var(--nk-regel-gat);
  max-width: 800px;
  padding-block: var(--nk-blok-lucht);
  text-align: start;
}

.nk-links.nkb-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
}

.nk-formulier.nkb-contact {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 35%;
  padding: 100px 50px;
  background: #fff;
}

@media (max-width: 1199.98px) {
  .nk-formulier.nkb-contact {
    width: 50%;
  }
}

@media (max-width: 991.98px) {
  .nk-kader.nkb-contact {
    flex-direction: column;
    align-items: start;
  }

  .nk-formulier.nkb-contact {
    width: 80%;
  }
}

@media (max-width: 575.98px) {
  .nk-formulier.nkb-contact {
    width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   Kamers — twee kamers naast elkaar, elk met een eigen fotoslider en een
   rijtje voorzieningen. Onder de 992 px onder elkaar.
   -------------------------------------------------------------------------- */
.nk-kamers-lijst.nkb-kamers {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

/* Twee gelijke kolommen; de 12.5px is de helft van de tussenruimte. */
.nk-kamers-lijst.nkb-kamers .splide:where(.nkb-kamers) {
  display: flex;
  position: relative;
  flex: 1 1 calc(50% - 12.5px);
  flex-direction: column;
  box-sizing: border-box;
  max-width: calc(50% - 12.5px);
}

.nk-kamer-kaart.nkb-kamers {
  width: 100%;
  max-width: 100%;
}

.splide__slide.nkb-kamers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.splide__arrow.nkb-kamers {
  font-size: 20px;
}

.nk-verborgen.nkb-kamers {
  display: none !important;
}

.nk-tekst-inhoud.nkb-kamers {
  padding: 20px 0;
}

.nk-knoppen.nkb-kamers {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

/* De tweede knop is een tekstlink met een streepje eronder, geen vlak. */
.nk-tweede-knop.nkb-kamers {
  display: inline-block;
  border-bottom: 1px solid var(--cta-color);
  border-radius: 0 !important;
  background-color: transparent;
  color: var(--cta-color);
  font-weight: 300;
}

.nk-voordelen.nkb-kamers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 650px;
}

.nk-voordeel.nkb-kamers {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 50%;
  padding: 5px 0;
}

.nk-voordeel.nkb-kamers p:where(.nkb-kamers) {
  margin: 0;
}

.nk-voordeel.nkb-kamers img:where(.nkb-kamers) {
  width: 25px;
  height: 25px;
}

@media (max-width: 991.98px) {
  .nk-kamers-lijst.nkb-kamers {
    flex-direction: column;
  }

  .nk-kamers-lijst.nkb-kamers .splide:where(.nkb-kamers) {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .nk-voordeel.nkb-kamers {
    width: 100%;
  }
}

/* -----------------------------------------------------------------------------
   Tekst met foto, en tekst met fotoslider — een wit tekstvlak naast een beeld
   van 16:9. Op een breed scherm staat de tekst links en het beeld rechts; hoe
   smaller het scherm, hoe meer ruimte de tekst krijgt. Onder de 992 px gaat
   het beeld bovenop en de tekst eronder (column-reverse, want in de html
   staat de tekst eerst).

   Achter het beeld staat dezelfde foto onscherp: dat vult de randen als de
   verhouding van de foto niet precies 16:9 is.

   Let op: de klasse heet .nk-tekst-kader, met een typefout. Die staat zo in de
   sjablonen en in het beheerscherm; hernoemen zou de blokken breken.
   -------------------------------------------------------------------------- */
.nk-flex.nkb-tekst-foto,
.nk-flex.nkb-tekst-fotoslider {
  display: flex;
  background: #fff;
}

.nk-flex.nkb-tekst-fotoslider {
  width: 100%;
}

.nk-tekst-kader.nkb-tekst-foto,
.nk-tekst-kader.nkb-tekst-fotoslider {
  display: flex;
  flex-direction: column;
  width: 35%;
}

.nk-tekst-kader.nkb-tekst-foto {
  padding: 80px 60px;
}

.nk-tekst-kader.nkb-tekst-fotoslider {
  justify-content: space-between;
  padding: 40px 60px;
}

/* Een streepje boven de tekst, als scheiding met de kop erboven. */
.nk-tekst-inhoud.nkb-tekst-foto,
.nk-tekst-inhoud.nkb-tekst-fotoslider {
  padding-top: 20px;
  border-top: 1px solid;
}

.nk-rechterkant.nkb-tekst-foto,
.nk-rechterkant.nkb-tekst-fotoslider {
  width: 65%;
}

.nk-beeld-wrapper.nkb-tekst-foto {
  position: relative;
  height: auto;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.nk-kader.nkb-tekst-fotoslider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.splide.nkb-tekst-fotoslider {
  position: relative;
  width: 100%;
}

.splide__slide.nkb-tekst-fotoslider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  height: 100%;
  aspect-ratio: 16 / 9;
}

/* De drie lagen over elkaar: onscherpe vulling, scherpe vulling, de foto. */
.nk-filter-blur.nkb-tekst-foto,
.nk-filter.nkb-tekst-foto,
.nk-filter-blur.nkb-tekst-fotoslider,
.nk-filter.nkb-tekst-fotoslider,
picture.nkb-tekst-foto,
picture.nkb-tekst-fotoslider {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nk-filter-blur.nkb-tekst-foto,
.nk-filter-blur.nkb-tekst-fotoslider {
  z-index: 1;
  filter: blur(5px);
}

.nk-filter.nkb-tekst-foto,
.nk-filter.nkb-tekst-fotoslider {
  z-index: 2;
}

picture.nkb-tekst-foto {
  z-index: 3;
}

picture.nkb-tekst-fotoslider {
  z-index: 2;
}

@media (max-width: 1399.98px) {
  .nk-tekst-kader.nkb-tekst-foto,
  .nk-tekst-kader.nkb-tekst-fotoslider {
    width: 45%;
  }

  .nk-rechterkant.nkb-tekst-foto,
  .nk-rechterkant.nkb-tekst-fotoslider {
    width: 55%;
  }
}

@media (max-width: 991.98px) {
  .nk-flex.nkb-tekst-foto,
  .nk-flex.nkb-tekst-fotoslider {
    flex-direction: column-reverse;
  }

  .nk-tekst-kader.nkb-tekst-foto,
  .nk-tekst-kader.nkb-tekst-fotoslider,
  .nk-rechterkant.nkb-tekst-foto,
  .nk-rechterkant.nkb-tekst-fotoslider {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .nk-tekst-kader.nkb-tekst-foto {
    padding: 80px 20px;
  }

  .nk-tekst-kader.nkb-tekst-fotoslider {
    padding: 40px 20px;
  }
}

/* -----------------------------------------------------------------------------
   Twee kaarten — twee gelijke kolommen met een foto, een kop, tekst en een
   knop. Onder de 992 px onder elkaar. De hoogte van het fotovlak wordt in
   verfijning.css kleiner gezet; de waarden hier zijn de basis.
   -------------------------------------------------------------------------- */
.nk-kader.nkb-kaarten {
  display: flex;
  gap: 30px;
}

.nk-tegel.nkb-kaarten {
  display: flex;
  flex-direction: column;
}

.nk-eerste.nkb-kaarten,
.nk-tweede.nkb-kaarten {
  width: 100%;
}

.nk-beeld-wrapper.nkb-kaarten {
  position: relative;
  width: 100%;
  height: 650px;
}

.nk-filter-blur.nkb-kaarten,
.nk-filter.nkb-kaarten,
picture.nkb-kaarten {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.nk-filter-blur.nkb-kaarten {
  z-index: 0;
  filter: blur(5px);
}

.nk-filter.nkb-kaarten {
  z-index: 1;
}

.nk-tekst-kader.nkb-kaarten {
  position: static;
  z-index: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 0;
  color: #000;
}

/* De knop is zo breed als zijn tekst, niet zo breed als de kolom. */
.nk-knop-leeg.nkb-kaarten {
  max-width: max-content;
}

@media (max-width: 1199.98px) {
  .nk-beeld-wrapper.nkb-kaarten {
    height: 450px;
  }
}

@media (max-width: 991.98px) {
  .nk-kader.nkb-kaarten {
    flex-direction: column;
  }

  .nk-tegel.nkb-kaarten {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .nk-beeld-wrapper.nkb-kaarten {
    height: 350px;
  }
}

/* -----------------------------------------------------------------------------
   Fotoraster — de galerij. Een raster van drie kolommen van 300 px hoog;
   staande foto's nemen twee rijen in. Twee kolommen op een tablet, één op de
   telefoon. Klikken opent de foto schermvullend.
   -------------------------------------------------------------------------- */
.nk-galerij.nkb-fotoraster {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
}

.nk-titel.nkb-fotoraster {
  padding-bottom: 20px;
}

.nk-galerij-beelden.nkb-fotoraster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px;
  gap: 25px;
  padding: 25px;
  background: var(--primary-bg-color);
}

@media (max-width: 991.98px) {
  .nk-galerij-beelden.nkb-fotoraster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .nk-galerij-beelden.nkb-fotoraster {
    grid-template-columns: 1fr;
  }
}

/* Een foto is een knop, maar mag er niet als knop uitzien. */
.nk-beeld-knop.nkb-fotoraster {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nk-beeld-knop.nkb-fotoraster img:where(.nkb-fotoraster) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nk-beeld-knop.nk-verticaal.nkb-fotoraster {
  grid-row: span 2;
}

.nk-paginering.nkb-fotoraster {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.nk-paginering.nkb-fotoraster button:where(.nkb-fotoraster) {
  padding: 8px 16px;
  border: none;
  background: #fff;
  cursor: pointer;
}

.nk-paginering.nkb-fotoraster button.nk-actief:where(.nkb-fotoraster) {
  background: var(--cta-color);
  color: #fff;
}

.nk-paginering.nkb-fotoraster button:where(.nkb-fotoraster):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* De schermvullende weergave. Ligt over alles heen, dus een hoge z-index. */
.nk-lightbox.nkb-fotoraster {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgb(0 0 0 / 0.85);
}

.nk-lightbox.nkb-fotoraster img:where(.nkb-fotoraster) {
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.4);
}

.nk-lightbox.nkb-fotoraster .nk-nav:where(.nkb-fotoraster),
.nk-lightbox.nkb-fotoraster .nk-sluiten:where(.nkb-fotoraster) {
  position: absolute;
  z-index: 1000;
  border: none;
  background: none;
  color: #fff;
  font-size: 3rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nk-lightbox.nkb-fotoraster .nk-vorige:where(.nkb-fotoraster) {
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}

.nk-lightbox.nkb-fotoraster .nk-volgende:where(.nkb-fotoraster) {
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}

.nk-lightbox.nkb-fotoraster .nk-sluiten:where(.nkb-fotoraster) {
  top: 30px;
  right: 30px;
  font-size: 2.5rem;
}

/* Wie met het toetsenbord bladert moet zien waar hij is. */
.nk-lightbox.nkb-fotoraster button:where(.nkb-fotoraster):focus-visible {
  outline: 2px solid var(--cta-color);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .nk-lightbox.nkb-fotoraster img:where(.nkb-fotoraster) {
    max-width: 95%;
    max-height: 70%;
  }

  .nk-lightbox.nkb-fotoraster .nk-nav:where(.nkb-fotoraster) {
    font-size: 2.5rem;
  }

  .nk-lightbox.nkb-fotoraster .nk-sluiten:where(.nkb-fotoraster) {
    font-size: 2rem;
  }
}

/* -----------------------------------------------------------------------------
   Portfolio — de andere hotels op de pagina Over ons. Zelfde kaartvorm als het
   smoelenboek: een foto met de naam onderin. Bij aanwijzen schuift er een
   donker vlak overheen met de uitleg erin.
   -------------------------------------------------------------------------- */
section.nkb-portfolio {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: pre-line;
}

.nk-gekozen.nkb-portfolio {
  background: var(--cta-color);
  color: #fff;
  pointer-events: none;
}

.nk-bedrijf-tekst.nkb-portfolio {
  max-width: 50%;
  text-align: center !important;
}

.nk-medewerkers.nkb-portfolio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
}

.nk-medewerker.nkb-portfolio {
  position: relative;
  width: var(--nk-kaart-breed);
  height: var(--nk-kaart-hoog);
  overflow: hidden;
  border-radius: 12px;
}

.nk-beeld-kader.nkb-portfolio {
  position: relative;
  width: 100%;
  height: 100%;
}

.nk-beeld-kader.nkb-portfolio img:where(.nkb-portfolio) {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.nk-onder-info.nkb-portfolio {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 100%;
  padding: 20px 10px;
  color: #fff;
  text-align: center;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.8));
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

/* De uitleg ligt klaar maar is onzichtbaar tot je de kaart aanwijst. */
.nk-hover-info.nkb-portfolio {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 20px;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* De contactknoppen staan rechtsonder in de kaart. Ze stonden links, waar ze
   over de laatste regel van de contactgegevens heen vielen. De ruimte eronder
   in hover-info houdt de tekst erbuiten, ook bij een lange omschrijving. */
.nk-socials.nkb-portfolio {
  position: absolute;
  right: 20px;
  bottom: 10px;
  display: flex;
  gap: 20px;
}

.nk-hover-info.nkb-portfolio {
  padding-bottom: 70px;
}

.nk-socials.nkb-portfolio img:where(.nkb-portfolio) {
  width: 40px;
  height: 40px;
}

/* Het donkere vlak dat de foto dempt zodat de tekst leesbaar wordt. */
.nk-beeld-kader.nkb-portfolio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(0 0 0 / 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nk-medewerker.nkb-portfolio:hover .nk-hover-info:where(.nkb-portfolio) {
  opacity: 1;
  pointer-events: auto;
}

.nk-medewerker.nkb-portfolio:hover .nk-beeld-kader:where(.nkb-portfolio)::after {
  opacity: 1;
}

.nk-medewerker.nkb-portfolio:hover .nk-onder-info:where(.nkb-portfolio) {
  opacity: 0;
}

/* -----------------------------------------------------------------------------
   Footer — het donkere vlak onderaan elke pagina. Bovenin het logo en de
   kolommen met links, onderin het regeltje met adres en de sociale knoppen.

   Het aantal kolommen loopt mee met de breedte: vier op een breed scherm,
   drie, twee, en op de telefoon alles onder elkaar en gecentreerd.
   -------------------------------------------------------------------------- */
.nk-sectie.nkb-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-nav);
}

.nk-raster.nkb-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.nk-raster.nkb-footer img:where(.nkb-footer) {
  width: auto;
  height: 100px;
}

.nk-kolommen.nkb-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

h3.nkb-footer {
  margin: 0 !important;
}

a.nkb-footer {
  text-decoration: underline;
}

a.nkb-footer:hover {
  color: var(--cta-color-hover) !important;
}

/* De onderste regel: adres links, links en sociale knoppen rechts. */
.nk-onderregel.nkb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid;
}

.nk-onder-links.nkb-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nk-socials.nkb-footer {
  display: flex;
  gap: 15px;
  padding: 10px 0;
}

.nk-socials.nkb-footer img:where(.nkb-footer) {
  width: 30px;
  height: 30px;
  transition: opacity 0.3s ease;
}

.nk-socials.nkb-footer img:where(.nkb-footer):hover {
  opacity: 0.8;
}

@media (max-width: 1399.98px) {
  .nk-raster.nkb-footer {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991.98px) {
  .nk-raster.nkb-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Op de telefoon is een raster te krap: alles onder elkaar, gecentreerd. */
@media (max-width: 575.98px) {
  .nk-raster.nkb-footer,
  .nk-kolommen.nkb-footer,
  .nk-onderregel.nkb-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .nk-raster.nkb-footer {
    gap: 16px;
  }

  .nk-onderregel.nkb-footer {
    gap: 15px;
  }
}

/* -----------------------------------------------------------------------------
   Navigatie — de balk bovenaan elke pagina.

   Er zijn twee varianten, en in de oude opmaak stonden die twee keer volledig
   uitgeschreven: 177 regels waarvan de meeste woord voor woord gelijk. Hier
   staat alles één keer, met onderaan het handjevol regels waarin de varianten
   echt van elkaar verschillen.

     nkb-navbalk    doorzichtig over een schermvullende foto heen; wordt
                    gevuld zodra je scrolt, en het logo is dan wit
     nkb-navigatie  altijd gevuld, voor pagina's zonder kopbeeld

   Onder de 992 px verdwijnt het menu in een uitklapscherm; onder de 768 px
   komt er onderin een vaste balk met de belangrijkste knoppen.
   -------------------------------------------------------------------------- */

/* --- de balk zelf --------------------------------------------------------- */
section:is(.nkb-navbalk, .nkb-navigatie) {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: 100vw;
  transition: all 0.3s ease-in-out;
}

.nk-kader:is(.nkb-navbalk, .nkb-navigatie) {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 35px;
}

.nk-logo:is(.nkb-navbalk, .nkb-navigatie) {
  z-index: 3;
}

.nk-logo:is(.nkb-navbalk, .nkb-navigatie) img:where(.nkb-navbalk, .nkb-navigatie) {
  height: 80px;
  object-fit: cover;
}

.nk-nav-acties:is(.nkb-navbalk, .nkb-navigatie) {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 15px;
}

.nk-knop-desk:is(.nkb-navbalk, .nkb-navigatie) {
  color: #fff;
}

.nk-mobiel-cta:is(.nkb-navbalk, .nkb-navigatie) {
  margin-top: 40px;
}

/* --- de menu-items op een breed scherm ------------------------------------ */
.nk-nav-inhoud:is(.nkb-navbalk, .nkb-navigatie) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 50%;
  font-size: 16px;
  text-transform: uppercase;
}

.nk-nav-inhoud:is(.nkb-navbalk, .nkb-navigatie) a:where(.nkb-navbalk, .nkb-navigatie) {
  position: relative;
  width: 100%;
  padding: 5px;
}

/* Het streepje dat onder een menu-item uitschuift als je erover gaat. */
.nk-nav-inhoud:is(.nkb-navbalk, .nkb-navigatie) a:where(.nkb-navbalk, .nkb-navigatie)::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: #fff;
  transition: width 0.4s ease-in-out;
}

.nk-nav-inhoud:is(.nkb-navbalk, .nkb-navigatie) a:where(.nkb-navbalk, .nkb-navigatie):hover::after {
  width: 100%;
}

.nk-nav-item:is(.nkb-navbalk, .nkb-navigatie) {
  position: relative;
}

/* --- uitklapmenu onder een menu-item -------------------------------------- */
.nk-submenu:is(.nkb-navbalk, .nkb-navigatie) {
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 10;
  min-width: 150px;
  background: var(--cta-color);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.15);
  text-align: start;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.5s ease;
}

.nk-nav-item:is(.nkb-navbalk, .nkb-navigatie):hover .nk-submenu:where(.nkb-navbalk, .nkb-navigatie) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nk-submenu:is(.nkb-navbalk, .nkb-navigatie) a:where(.nkb-navbalk, .nkb-navigatie) {
  display: block;
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.nk-submenu:is(.nkb-navbalk, .nkb-navigatie) a:where(.nkb-navbalk, .nkb-navigatie):hover {
  background-color: var(--cta-color-hover);
}

/* --- de menuknop met de drie streepjes ------------------------------------ */
.nk-menu-knop:is(.nkb-navbalk, .nkb-navigatie) {
  z-index: 3;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 25px;
  cursor: pointer;
}

.nk-menu-strepen:is(.nkb-navbalk, .nkb-navigatie) {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 22px;
  transition: transform 0.5s ease;
}

.nk-menu-streep:is(.nkb-navbalk, .nkb-navigatie) {
  width: 30px;
  height: 2px;
  border-radius: 3px;
  background-color: #fff;
  transition: all 0.5s ease;
}

/* Open: de bovenste en onderste streep draaien tot een kruis, de middelste
   verdwijnt. */
.nk-menu-strepen.nk-menu-open:is(.nkb-navbalk, .nkb-navigatie) .nk-menu-streep:where(.nkb-navbalk, .nkb-navigatie):nth-child(1) {
  background-color: #000;
  transform: rotate(45deg) translateY(14px);
}

.nk-menu-strepen.nk-menu-open:is(.nkb-navbalk, .nkb-navigatie) .nk-menu-streep:where(.nkb-navbalk, .nkb-navigatie):nth-child(2) {
  opacity: 0;
}

.nk-menu-strepen.nk-menu-open:is(.nkb-navbalk, .nkb-navigatie) .nk-menu-streep:where(.nkb-navbalk, .nkb-navigatie):nth-child(3) {
  background-color: #000;
  transform: rotate(-45deg) translateY(-14px);
}

/* --- het uitklapscherm ---------------------------------------------------- */
.nk-overlay:is(.nkb-navbalk, .nkb-navigatie) {
  position: fixed;
  top: 0;
  right: -100%;
  z-index: 2;
  display: none;
  align-items: start;
  width: 50vw;
  height: 100vh;
  padding: 80px 25px;
  border: 1px solid rgb(215 192 192 / 0.3);
  box-shadow: 0 4px 30px rgb(0 0 0 / 0.1);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  cursor: initial;
  transition: right 0.8s ease-in-out;
}

.nk-overlay.nk-actief:is(.nkb-navbalk, .nkb-navigatie) {
  display: flex;
  right: 0;
}

.nk-overlay-inhoud:is(.nkb-navbalk, .nkb-navigatie) {
  display: flex;
  flex-direction: column;
  text-align: start;
  font-size: 36px;
  text-transform: uppercase;
}

.nk-overlay-inhoud:is(.nkb-navbalk, .nkb-navigatie) .nk-taalink:where(.nkb-navbalk, .nkb-navigatie) {
  font-size: 16px;
}

.nk-mobiel-nav-item:is(.nkb-navbalk, .nkb-navigatie) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nk-mobiel-nav-kop:is(.nkb-navbalk, .nkb-navigatie) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nk-dropdown:is(.nkb-navbalk, .nkb-navigatie) {
  border: none;
  background: none;
  color: var(--cta-color);
  font-size: 20px;
  cursor: pointer;
}

.nk-mobiel-submenu:is(.nkb-navbalk, .nkb-navigatie) {
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  background: var(--cta-color);
  font-size: 16px;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.6s ease-in-out;
}

.nk-mobiel-submenu.nk-actief:is(.nkb-navbalk, .nkb-navigatie) {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

.nk-mobiel-submenu:is(.nkb-navbalk, .nkb-navigatie) a:where(.nkb-navbalk, .nkb-navigatie) {
  padding: 15px 0 15px 20px;
  border-bottom: 1px solid #fff;
  color: #fff;
  text-align: left;
  text-decoration: none;
}

/* --- de vaste balk onderaan op de telefoon -------------------------------- */
.nk-mobiel-link:is(.nkb-navbalk, .nkb-navigatie),
.nk-mobiel-balk:is(.nkb-navbalk, .nkb-navigatie) {
  display: none;
}

.nk-mobiel-balk:is(.nkb-navbalk, .nkb-navigatie) a:where(.nkb-navbalk, .nkb-navigatie) {
  color: inherit;
  text-decoration: none;
}

/* --- schermbreedtes ------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .nk-kader:is(.nkb-navbalk, .nkb-navigatie) {
    max-width: 100% !important;
  }
}

@media (max-width: 1199.98px) {
  .nk-nav-inhoud:is(.nkb-navbalk, .nkb-navigatie) {
    font-size: 14px;
  }
}

/* Vanaf hier past het menu niet meer naast het logo: uitklapscherm. */
@media (max-width: 991.98px) {
  .nk-nav-inhoud:is(.nkb-navbalk, .nkb-navigatie) {
    display: none;
  }

  .nk-menu-knop:is(.nkb-navbalk, .nkb-navigatie) {
    position: absolute;
    right: 10px;
    display: flex;
  }

  .nk-nav-acties:is(.nkb-navbalk, .nkb-navigatie) {
    position: absolute;
    right: 15px;
  }

  .nk-logo:is(.nkb-navbalk, .nkb-navigatie) img:where(.nkb-navbalk, .nkb-navigatie) {
    height: 70px;
  }

  .nk-knop-desk:is(.nkb-navbalk, .nkb-navigatie) {
    display: none;
  }

  .nk-overlay:is(.nkb-navbalk, .nkb-navigatie) {
    width: 100vw;
    padding: 80px 45px;
  }

  .nk-nav-cta:is(.nkb-navbalk, .nkb-navigatie) {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .nk-kader:is(.nkb-navbalk, .nkb-navigatie) {
    justify-content: center;
  }

  .nk-menu-knop:is(.nkb-navbalk, .nkb-navigatie) {
    position: static;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .nk-nav-acties:is(.nkb-navbalk, .nkb-navigatie) {
    display: none;
  }

  .nk-menu-streep:is(.nkb-navbalk, .nkb-navigatie) {
    width: 35px;
  }

  .nk-logo:is(.nkb-navbalk, .nkb-navigatie) img:where(.nkb-navbalk, .nkb-navigatie) {
    height: 80px;
  }

  .nk-overlay-inhoud:is(.nkb-navbalk, .nkb-navigatie) {
    font-size: 32px;
  }

  .nk-mid:is(.nkb-navbalk, .nkb-navigatie) {
    display: none;
  }

  /* Op de telefoon staat het uitklapscherm al klaar naast het scherm in
     plaats van weggehaald; zo blijft de schuifbeweging vloeiend. */
  .nk-overlay:is(.nkb-navbalk, .nkb-navigatie) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 25px;
  }

  /* Het kruis staat op de telefoon iets naar rechts en blijft wit. */
  .nk-menu-strepen.nk-menu-open:is(.nkb-navbalk, .nkb-navigatie) .nk-menu-streep:where(.nkb-navbalk, .nkb-navigatie):nth-child(1),
  .nk-menu-strepen.nk-menu-open:is(.nkb-navbalk, .nkb-navigatie) .nk-menu-streep:where(.nkb-navbalk, .nkb-navigatie):nth-child(3) {
    margin-left: 18px;
    background: #fff;
  }

  .nk-mobiel-link:is(.nkb-navbalk, .nkb-navigatie) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .nk-mobiel-balk:is(.nkb-navbalk, .nkb-navigatie) {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999999;
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    background: var(--bg-nav);
  }
}

@media (max-width: 575.98px) {
  .nk-logo:is(.nkb-navbalk, .nkb-navigatie) img:where(.nkb-navbalk, .nkb-navigatie) {
    height: 70px;
  }

  .nk-overlay-inhoud:is(.nkb-navbalk, .nkb-navigatie) {
    font-size: 26px;
  }
}

/* Een telefoon in liggende stand: weinig hoogte, dus alles compacter. */
@media (max-width: 767px) and (max-height: 620px) {
  .nk-overlay:is(.nkb-navbalk, .nkb-navigatie) {
    padding: 120px 20px !important;
    align-items: start;
    justify-content: start;
  }

  .nk-overlay-inhoud:is(.nkb-navbalk, .nkb-navigatie) a:where(.nkb-navbalk, .nkb-navigatie) {
    font-size: 18px !important;
  }

  .nk-knop:is(.nkb-navbalk, .nkb-navigatie),
  .nk-knop-cta:is(.nkb-navbalk, .nkb-navigatie),
  .nk-knop-leeg:is(.nkb-navbalk, .nkb-navigatie) {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 5px 20px !important;
    border: none;
    color: #fff;
    font-size: 14px !important;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  .nk-knop-cta:is(.nkb-navbalk, .nkb-navigatie) {
    display: none;
  }

  .nk-logo:is(.nkb-navbalk, .nkb-navigatie) img:where(.nkb-navbalk, .nkb-navigatie) {
    height: 60px !important;
  }

  .nk-menu-knop:is(.nkb-navbalk, .nkb-navigatie),
  .nk-mobiel-link:is(.nkb-navbalk, .nkb-navigatie) {
    font-size: 14px !important;
  }

  .nk-mobiel-link:is(.nkb-navbalk, .nkb-navigatie) svg:where(.nkb-navbalk, .nkb-navigatie) {
    width: 25px !important;
    height: 25px !important;
  }

  .nk-mobiel-balk:is(.nkb-navbalk, .nkb-navigatie) {
    padding: 15px !important;
  }

  .nk-mobiel-taal:is(.nkb-navbalk, .nkb-navigatie) {
    position: absolute;
    right: 5%;
    top: 113px;
  }
}

/* -----------------------------------------------------------------------------
   Hier verschillen de twee varianten van elkaar.
   -------------------------------------------------------------------------- */

/* Doorzichtig over het kopbeeld; gevuld zodra je scrolt. */
section.nkb-navbalk {
  background: transparent;
}

section.nk-gescrolld.nkb-navbalk {
  background: var(--bg-nav);
}

section.nk-gescrolld.nkb-navbalk .nk-knop-desk:where(.nkb-navbalk) {
  color: #fff;
}

/* Over een foto moet het logo wit zijn; op de gevulde balk weer gewoon. */
.nk-logo.nkb-navbalk img:where(.nkb-navbalk) {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

section.nk-gescrolld.nkb-navbalk .nk-logo:where(.nkb-navbalk) img:where(.nkb-navbalk) {
  filter: none;
}

.nk-overlay.nkb-navbalk {
  background: #f9f8f6;
}

/* Altijd gevuld, voor pagina's zonder kopbeeld. */
section.nkb-navigatie {
  z-index: 9999999;
  background: var(--bg-nav);
}

.nk-nav-spacer.nkb-navigatie {
  height: 100px;
}

.nk-overlay.nkb-navigatie {
  background: #fff;
}