/* =========================================================================
   Hoveniersbedrijf C.K. van Mourik — sitestijl
   -------------------------------------------------------------------------
   1:1 overgenomen uit de originele stylesheets van ckvanmourik.nl:
     site/css/default.css              (typografie, links)
     site/css/template/template_default1.css (layout, blokken, footer)
     site/css/menu/menu.css            (hoofdmenu)
     site/css/seizoen/*.css            (seizoensbanner)
   Alle kleuren, lettertypen en verhoudingen zijn uit die bestanden of uit
   de originele afbeeldingen bemonsterd — niet geschat.

   De enige bewuste wijziging t.o.v. het origineel: de vaste 1000px-layout
   met float-kolommen is vervangen door een vloeiende, responsive layout.
   Het beeld op desktop blijft gelijk; op tablet en telefoon klapt alles
   netjes onder elkaar in plaats van horizontaal te scrollen.
   ========================================================================= */

/* ---------- Lettertypen, lokaal gehost ----------------------------------
   Dezelfde twee lettertypen als de huidige site (Happy Monkey voor koppen,
   Poiret One voor het menu en de slogan), maar vanaf de eigen server in
   plaats van de Google Fonts-CDN.

   Reden: bij laden vanaf fonts.gstatic.com gaat het IP-adres van elke
   bezoeker naar Google. Zelf hosten voorkomt dat en scheelt een externe
   verbinding. Beide lettertypen staan onder de SIL Open Font License 1.1,
   die zelf hosten uitdrukkelijk toestaat; de licentie staat in
   public/assets/fonts/OFL.txt.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Happy Monkey';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/happy-monkey-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Happy Monkey';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/happy-monkey-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poiret-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poiret-one-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Kleuren, bemonsterd uit de originele CSS en afbeeldingen */
  --ck-link:          #cef192;  /* default.css: a { color } */
  --ck-link-hover:    #7a7a7a;  /* default.css: a:hover     */
  --ck-menu-actief:   #d0ff70;  /* menu.css: .selecteditem  */
  --ck-menu-balk:     #4b4b4b;  /* bemonsterd uit banner    */
  --ck-paneel:        #666767;  /* content1_middle.png      */
  --ck-balk-donker:   #4a4b4b;  /* tuintips_repeat.png      */

  /* Het contentpaneel is op de huidige site geen vlakke kleur maar een dicht
     verticaal verloop. Nagemeten in content1_middle.png (548x296): boven
     #848585, onder #4f5050, alfa overal 255 — dus niet doorzichtig. Daaronder
     gaat content1_repeat.png verder in de eindkleur. */
  --ck-paneel-boven:  #848585;
  --ck-paneel-onder:  #4f5050;
  --ck-groen-bar:     #9ac256;  /* bg_bottom.png            */
  --ck-groen-licht:   #edf4e2;  /* midden van de logobalk   */
  --ck-slogan:        #8cb93e;  /* template: #slogan        */
  --ck-lees-meer:     #5f8f25;  /* template: .lees_meer a   */
  --ck-kop-donker:    #4a4b4b;  /* default.css: h3          */

  --ck-max:           1000px;   /* originele sitebreedte    */
  --ck-gutter:        18px;     /* originele padding        */

  --ck-font-tekst:    "Trebuchet MS", Arial, Helvetica, sans-serif;
  --ck-font-kop:      "Happy Monkey", "Trebuchet MS", cursive;
  --ck-font-menu:     "Poiret One", "Trebuchet MS", cursive;
  --ck-font-link:     Verdana, Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-y: scroll;            /* default.css: voorkomt springen */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: #000;
  font-family: var(--ck-font-tekst);
  font-size: 16px;
  line-height: 22px;
  background-color: #2b2b28;
}

/* ---------- Paginabrede seizoensfoto -------------------------------------
   Het origineel gebruikt hiervoor de JavaScript-plugin "supersized" met
   bg_body_<seizoen>.jpg. Hier met gewone CSS opgelost: geen JavaScript
   nodig, geen layoutverschuiving, en de foto wordt server-side gekozen. */
.ck-achtergrond {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

img { border: 0; display: block; max-width: 100%; height: auto; }

h1, h2, h4, h5 {
  font-family: var(--ck-font-kop);
  font-weight: normal;
  color: #fff;
  margin: 0;
}
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h4 { font-size: 24px; }
h5 { font-size: 18px; font-weight: bold; }
h3 {
  font-family: var(--ck-font-kop);
  font-weight: normal;
  font-size: 18px;
  color: var(--ck-kop-donker);
  margin: 0;
  padding: 0 0 5px 0;
}

p { margin: 0 0 12px 0; }
p:last-child { margin-bottom: 0; }

a, a:link, a:active, a:visited {
  font-family: var(--ck-font-link);
  color: var(--ck-link);
  text-decoration: underline;
  outline: none;
}
a:hover { color: var(--ck-link-hover); }

/* Zichtbare focus voor toetsenbordbediening (instructie §4) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--ck-menu-actief);
  outline-offset: 2px;
}

.ck-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: #1c2a10;
  padding: 10px 16px;
  z-index: 100;
  font-family: var(--ck-font-tekst);
  font-weight: bold;
}
.ck-skiplink:focus {
  left: 8px;
  top: 8px;
}

.ck-container {
  max-width: var(--ck-max);
  margin-inline: auto;
  padding-inline: var(--ck-gutter);
}

/* Alleen voor schermlezers: geeft losse "Lees meer..."-links context. */
.ck-visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header: seizoensbanner + slogan ------------------------------
   De banner is één samengestelde afbeelding (drie foto's + de lichtgroene
   balk met beeldmerk en bedrijfsnaam), precies zoals op de live site. De
   slogan staat daar als echte tekst overheen in plaats van als pixels, zodat
   hij scherp blijft, voorleesbaar is en vertaalbaar blijft. */
/* De fotostrook: de drie seizoensfoto's uit de originele banner. */
.ck-topstrook__fotos {
  width: 100%;
  display: block;
  /* Op smalle schermen zou de strook anders een paar pixels hoog worden. */
  min-height: 70px;
  object-fit: cover;
  object-position: center;
}

/* De lichtgroene balk onder de foto's. In het origineel zit die in dezelfde
   afbeelding gebakken; hier opnieuw opgebouwd met het verloop dat daaruit is
   bemonsterd, zodat het logo en de slogan echte, scherpe elementen zijn die
   op elke schermbreedte leesbaar blijven. */
.ck-topstrook__balk {
  background: linear-gradient(90deg,
              #a9ca6f  0%,
              #bdd790 10%,
              #d3e4b7 22%,
              #edf4e2 50%,
              #d2e4b4 78%,
              #bdd790 90%,
              #a9ca6f 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ck-topstrook__balk-inner {
  max-width: var(--ck-max);
  margin-inline: auto;
  padding: 10px var(--ck-gutter);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.ck-topstrook__logo {
  width: clamp(200px, 31vw, 330px);
  height: auto;
  flex: 0 0 auto;
}
.ck-topstrook__slogan {
  /* Rechts uitgelijnd tegen de rand van de inhoud, zoals het origineel
     (#slogan loopt daar door tot de rechterkant van de 1000px-kolom). */
  margin: 0 0 0 auto;
  text-align: right;
  font-family: var(--ck-font-menu);
  color: var(--ck-slogan);
  font-size: clamp(17px, 3.1vw, 36px);
  line-height: 1.1;
}

/* ---------- Hoofdmenu ---------------------------------------------------- */
.ck-menu {
  background: var(--ck-menu-balk);
}

/* De knop bestaat alleen voor smalle schermen en wordt pas zichtbaar
   gemaakt zodra het script draait (klasse is-uitklapbaar). Zonder
   JavaScript blijft het menu dus gewoon een zichtbare lijst. */
.ck-menu__knop { display: none; }

@media (max-width: 759px) {
  .ck-menu.is-uitklapbaar .ck-menu__knop {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 11px var(--ck-gutter);
    background: none;
    border: 0;
    color: #fff;
    font-family: var(--ck-font-menu);
    font-size: 21px;
    line-height: 1.2;
    cursor: pointer;
  }
  .ck-menu.is-uitklapbaar .ck-menu__knop:hover { color: var(--ck-menu-actief); }

  /* Het hamburgerteken: drie streepjes, meeschalend met de tekstkleur. */
  .ck-menu__streepjes {
    width: 24px;
    height: 2px;
    background: currentColor;
    position: relative;
    flex: 0 0 auto;
  }
  .ck-menu__streepjes::before,
  .ck-menu__streepjes::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: currentColor;
  }
  .ck-menu__streepjes::before { top: -7px; }
  .ck-menu__streepjes::after  { top:  7px; }

  .ck-menu.is-uitklapbaar.is-open .ck-menu__streepjes { background: transparent; }
  .ck-menu.is-uitklapbaar.is-open .ck-menu__streepjes::before { top: 0; transform: rotate(45deg); }
  .ck-menu.is-uitklapbaar.is-open .ck-menu__streepjes::after  { top: 0; transform: rotate(-45deg); }

  /* Ingeklapt: lijst verbergen. Alleen wanneer het script actief is. */
  .ck-menu.is-uitklapbaar .ck-menu__lijst { display: none; }
  .ck-menu.is-uitklapbaar.is-open .ck-menu__lijst {
    display: block;
    padding-bottom: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .ck-menu.is-uitklapbaar.is-open .ck-menu__lijst a {
    padding: 11px var(--ck-gutter);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .ck-menu.is-uitklapbaar.is-open .ck-menu__lijst li:last-child a { border-bottom: 0; }
}
.ck-menu__lijst {
  max-width: var(--ck-max);
  /* margin expliciet op 0: de algemene ul-regel zet 10px boven en onder, en
     die marge valt anders buiten de donkere balk (margin collapsing), zodat
     de achtergrondfoto er als een streep doorheen schijnt. */
  margin: 0 auto;
  padding: 0 var(--ck-gutter);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* Links uitgelijnd, net als op de huidige site, zodat "Home" op dezelfde
     lijn begint als het logo en de inhoud eronder. */
  justify-content: flex-start;
  gap: 0 30px;
}
.ck-menu__lijst > li { margin: 0; }
.ck-menu__lijst a {
  display: block;
  font-family: var(--ck-font-menu);
  font-size: clamp(17px, 2.1vw, 24px);
  line-height: 30px;
  padding: 6px 0;
  color: #fff;
  text-decoration: none;
}
.ck-menu__lijst a:hover,
.ck-menu__lijst a[aria-current="page"] {
  color: var(--ck-menu-actief);
}

/* ---------- Hoofdindeling ------------------------------------------------ */
.ck-hoofd { padding-block: 20px 0; }

.ck-kolommen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 820px) {
  .ck-kolommen { grid-template-columns: 564fr 400fr; gap: 18px; }
}

/* Grijs contentpaneel (in het origineel een 9-slice PNG, hier één vlak) */
.ck-paneel {
  /* Verloop tot 296px, daarna doorlopend in de eindkleur — precies zoals de
     originele opbouw met content1_middle.png boven content1_repeat.png. */
  background:
    linear-gradient(180deg, var(--ck-paneel-boven) 0, var(--ck-paneel-onder) 296px),
    var(--ck-paneel-onder);
  border-radius: 6px;
  padding: 20px 30px;
  color: #fff;
}
.ck-paneel h1 { line-height: 1.15; }
.ck-paneel h2 { margin-top: 2px; line-height: 1.25; }
.ck-paneel > p { margin-top: 14px; }

/* Rechterkolom staat in het origineel rechtstreeks op de achtergrondfoto.
   Toegevoegd t.o.v. het origineel: een zachte donkere waas achter de tekst.
   Op de huidige site staat witte tekst rechtstreeks op een lichte foto, wat
   afhankelijk van het seizoen te weinig contrast geeft (instructie §4). De
   foto blijft zichtbaar; alleen de leesbaarheid gaat omhoog. */
.ck-regio {
  /* Zelfde binnenmarge als het grijze paneel, zodat de tekst in beide
     kolommen op dezelfde lijn begint. Bewust géén achtergrondvlak: op de
     huidige site staat deze tekst rechtstreeks op de seizoensfoto. Alleen
     een schaduw als leeshulp — die verandert het beeld niet. */
  padding: 20px 30px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
}
.ck-regio h2 { font-size: 24px; }
.ck-regio__telefoon {
  font-family: var(--ck-font-kop);
  font-size: 19px;
  color: var(--ck-link);
  font-weight: bold;
  margin-top: 18px;
}

/* Opsommingen met het originele blaadje als opsommingsteken */
.ck-lijst {
  list-style: none;
  margin: 10px 0;
  padding: 0 0 0 25px;
}
.ck-lijst li {
  position: relative;
  margin: 5px 0 0 0;
  line-height: 22px;
}
.ck-lijst li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 0;
  width: 20px;
  height: 24px;
  background: transparent url("../img/list_stijl.png") no-repeat 0 0;
}

/* ---------- Drie dienstblokken ------------------------------------------- */
.ck-blokken {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-block: 20px;
}
@media (min-width: 640px) {
  .ck-blokken { grid-template-columns: repeat(3, 1fr); }
}
/* De dienstkaart is in het origineel één PNG: een groene kaart met een wit
   omlijste foto erop en de tekst eronder op het groen (blok1_2.png e.d.,
   met padding-top:215px in template_default1.css).
   Hier opnieuw opgebouwd met de uit die PNG bemonsterde kleuren, zodat de
   kaart meeschaalt in plaats van op een vaste 302px te blijven staan. */
.ck-blok {
  background: linear-gradient(180deg,
              #aece77   0%,
              #b3d07f  10%,
              #ebf3dd  56%,
              #b0cf7b 100%);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28);
}
.ck-blok__foto {
  width: 100%;
  aspect-ratio: 303 / 172;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.ck-blok__body {
  padding: 12px 6px 4px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: var(--ck-kop-donker);
}
.ck-blok__tekst {
  font-size: 16px;
  line-height: 22px;
  color: var(--ck-kop-donker);
  flex: 1 1 auto;
}
.ck-blok__meer { text-align: right; margin-top: 10px; }
.ck-blok__meer a { color: var(--ck-lees-meer); font-weight: bold; }
.ck-blok__meer a:hover { color: #999; }

/* ---------- Brede tuintipsbalk ------------------------------------------- */
.ck-tuintips {
  background: var(--ck-balk-donker);
  border-radius: 6px;
  /* 30px binnenmarge, gelijk aan het grijze paneel, zodat de tekst van
     beide brede blokken op dezelfde lijn begint. */
  padding: 10px 30px 20px;
  color: #fff;
  font-family: var(--ck-font-kop);
  margin-bottom: 20px;
}
.ck-tuintips__kop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  padding-top: 10px;
}
.ck-tuintips__titel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  margin: 0;
}
.ck-tuintips__titel img { width: 42px; height: auto; }
.ck-tuintips__alle a { font-family: var(--ck-font-tekst); }
.ck-tuintips__lijst {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 20px;
  margin: 16px 0 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) {
  .ck-tuintips__lijst { grid-template-columns: 1fr 1fr; }
}
.ck-tuintips__lijst li {
  font-family: var(--ck-font-tekst);
  font-size: 16px;
  line-height: 22px;
  color: #fff;
}
.ck-tuintips__nr { font-family: var(--ck-font-kop); font-size: 24px; margin-right: 4px; }

/* ---------- Voettekst ---------------------------------------------------- */
.ck-voet {
  background: linear-gradient(180deg, var(--ck-groen-bar) 0%, #c3dc8e 55%, var(--ck-groen-bar) 100%);
  border-radius: 6px;
  margin-bottom: 20px;
  padding: 10px var(--ck-gutter) 14px;
  text-align: center;
  font-family: var(--ck-font-tekst);
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  color: var(--ck-kop-donker);
}
.ck-voet a,
.ck-voet a:link,
.ck-voet a:visited {
  font-family: var(--ck-font-tekst);
  font-size: 14px;
  color: var(--ck-kop-donker);
  text-decoration: none;
}
.ck-voet a:hover { text-decoration: underline; color: var(--ck-kop-donker); }
.ck-voet__regel { display: inline-block; }

/* ---------- Minder beweging ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Donkere middenband ------------------------------------------
   Op de huidige site ligt achter de hele inhoud een donkere, deels
   doorzichtige band van 1000px breed (bg_content.png: rgba(74,75,75) met
   alfa 217/255 = 85%). Daardoor is de witte tekst in de rechterkolom goed
   leesbaar en oogt de seizoensfoto alleen aan de zijkanten fel. */
.ck-hoofd { padding-block: 0; }
.ck-hoofd > .ck-container,
footer.ck-container {
  background: rgba(74, 75, 75, 0.85);
}
.ck-hoofd > .ck-container { padding-top: 20px; padding-bottom: 28px; }
footer.ck-container { padding-bottom: 20px; }
/* Ruimte tussen de laatste kaart/tekst en de voettekst, ook als de
   rechterkolom langer is dan de tekst. */
.ck-hoofd > .ck-container > *:last-child { margin-bottom: 0; }
.ck-kolommen, .ck-paneel:last-child { margin-bottom: 8px; }
@media (max-width: 819px) {
  .ck-hoofd > .ck-container { padding-bottom: 20px; }
  .ck-kolommen { gap: 16px; }
}
footer.ck-container .ck-voet { margin-bottom: 0; }

/* Op smalle schermen valt de slogan onder het logo; dan links uitlijnen. */
@media (max-width: 599px) {
  .ck-topstrook__slogan { margin-left: 0; text-align: left; }
}

/* =========================================================================
   Inhoudspagina's
   ========================================================================= */

.ck-kolommen--enkel { grid-template-columns: 1fr !important; }

/* Kruimelpad (subpagina's onder Tuin info) */
.ck-kruimelpad { margin: 0 0 12px; font-size: 14px; }
.ck-kruimelpad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ck-kruimelpad li { color: #e4e6df; }
.ck-kruimelpad li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--ck-link); }
.ck-kruimelpad a { font-family: var(--ck-font-tekst); }

/* Paginakop met blad, zoals op de huidige subpagina's */
.ck-paginakop {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 14px;
}
.ck-paginakop img { width: 42px; height: auto; flex: 0 0 auto; }

/* Tekst uit het CMS */
.ck-inhoud { color: #fff; }
.ck-inhoud h2 { font-size: 20px; margin: 20px 0 6px; line-height: 1.25; }
.ck-inhoud h3 { font-size: 17px; color: var(--ck-link); margin: 18px 0 4px; padding: 0; line-height: 1.3; }
.ck-inhoud h4 { font-size: 16px; margin: 14px 0 4px; }
.ck-inhoud p { margin: 0 0 12px; color: #eef0e6; }
.ck-inhoud ul,
.ck-inhoud ol { margin: 8px 0 14px; padding-left: 25px; color: #eef0e6; }
.ck-inhoud ul li { position: relative; margin-top: 5px; }
.ck-inhoud ul li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 0;
  width: 20px;
  height: 24px;
  background: transparent url("../img/list_stijl.png") no-repeat 0 0;
}
.ck-inhoud ol { list-style: decimal; }
.ck-inhoud ol li { list-style: decimal; margin-top: 5px; }
.ck-inhoud img {
  max-width: 100%;
  height: auto;
  border: 2px solid #fff;
  border-radius: 2px;
  margin: 8px 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.ck-inhoud a { word-break: break-word; }

/* Uitgepakte layouttabellen: kolommen naast elkaar, onder elkaar op mobiel */
.ck-kolommen-inhoud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 20px;
  align-items: start;
  margin: 6px 0;
}
.ck-kolom > :first-child { margin-top: 0; }

/* Zijkolom: direct contact + dienstkaarten onder elkaar */
.ck-zijkolom { display: flex; flex-direction: column; gap: 18px; }
.ck-zijkolom__contact {
  font-family: var(--ck-font-kop);
  font-size: 19px;
  color: var(--ck-link);
  margin: 0;
  padding: 6px 4px 0;
}
.ck-blok__titel {
  font-family: var(--ck-font-kop);
  font-weight: normal;
  font-size: 18px;
  color: var(--ck-kop-donker);
  margin: 0;
  padding: 0 0 5px;
}
@media (min-width: 640px) and (max-width: 819px) {
  .ck-zijkolom { display: grid; grid-template-columns: repeat(2, 1fr); }
  .ck-zijkolom__contact { grid-column: 1 / -1; }
}

/* Genummerde tuintips op de tuintipspagina */
.ck-tipslijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ck-tipslijst li { color: #eef0e6; }
.ck-tipslijst .ck-tuintips__nr { color: var(--ck-menu-actief); }

/* Knoppen */
.ck-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ck-knop,
.ck-knop:link,
.ck-knop:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;           /* bruikbaar aanraakdoel (instructie §4) */
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ck-groen-bar);
  color: #1c2a10;
  font-family: var(--ck-font-tekst);
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}
.ck-knop:hover { background: var(--ck-menu-actief); color: #1c2a10; }
.ck-knop--licht,
.ck-knop--licht:link,
.ck-knop--licht:visited { background: #fff; color: #33402a; }

/* Contact */
.ck-adres { font-style: normal; line-height: 1.6; color: #eef0e6; }

.ck-kaart__vak {
  margin-top: 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  padding: 18px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.ck-kaart__vak p { margin: 0; font-size: 14px; line-height: 1.5; }
.ck-kaart__vak.is-geladen { padding: 0; background: none; }
.ck-kaart__vak iframe { width: 100%; height: 320px; border: 0; border-radius: 6px; display: block; }
.ck-kaart__alternatief { font-size: 14px; margin-top: 10px; }

/* Portfolio */
.ck-albums {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.ck-album {
  background: linear-gradient(180deg, #aece77 0%, #b3d07f 10%, #ebf3dd 60%, #b0cf7b 100%);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28);
}
.ck-album img { width: 100%; aspect-ratio: 300 / 280; object-fit: cover; border: 2px solid #fff; border-radius: 2px; }
.ck-album__naam {
  display: block;
  padding: 8px 4px 2px;
  font-family: var(--ck-font-kop);
  font-size: 17px;
  color: var(--ck-kop-donker);
}

/* Het blad bij de paginakop is een icoon, geen foto: geen rand of schaduw. */
.ck-inhoud .ck-paginakop img { border: 0; box-shadow: none; margin: 0; border-radius: 0; }
.ck-inhoud .ck-albums { padding-left: 0; }
.ck-inhoud .ck-albums li::before { content: none; }
.ck-kaart__laad { align-self: flex-start; }

/* ---------------------------------------------------------------
 * Portfolio: klikbare albumtegels, fotoraster en fotoviewer
 * ------------------------------------------------------------- */
.ck-album a { display: block; color: inherit; text-decoration: none; }
.ck-album a:hover .ck-album__naam, .ck-album a:focus-visible .ck-album__naam { text-decoration: underline; }
.ck-album a:focus-visible { outline: 3px solid var(--ck-link-actief, #d0ff70); outline-offset: 4px; border-radius: 4px; }
.ck-album { transition: transform .15s ease; }
.ck-album:hover { transform: translateY(-2px); }
.ck-album__aantal { display: block; padding: 0 4px 2px; font-size: 13px; color: #4f5050; }

.ck-inhoud .ck-fotos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ck-inhoud .ck-fotos li { margin: 0; padding: 0; }
.ck-inhoud .ck-fotos li::before { content: none; }
.ck-inhoud .ck-fotos a { display: block; border-radius: 3px; }
.ck-inhoud .ck-fotos a:focus-visible { outline: 3px solid #d0ff70; outline-offset: 2px; }
.ck-inhoud .ck-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: opacity .15s; }
.ck-inhoud .ck-fotos a:hover img { opacity: .85; }
@media (max-width: 480px) { .ck-inhoud .ck-fotos { grid-template-columns: repeat(3, 1fr); gap: 5px; } }

.ck-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 22, 20, .92); display: flex; align-items: center; justify-content: center; padding: 48px 56px; }
.ck-viewer[hidden] { display: none; }
.ck-viewer figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.ck-viewer img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border: 3px solid #fff; border-radius: 3px; background: #333; }
.ck-viewer figcaption { color: #eee; font-size: 15px; margin-top: 10px; text-align: center; max-width: 60ch; }
.ck-viewer__teller { color: #cef192; font-size: 13px; display: block; }
.ck-viewer button { position: absolute; background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; width: 44px; height: 44px; font-size: 24px; line-height: 1; cursor: pointer; }
.ck-viewer button:hover, .ck-viewer button:focus-visible { background: #8cb93e; outline: none; }
.ck-viewer__sluit { top: 10px; right: 10px; }
.ck-viewer__vorige { left: 8px; top: 50%; transform: translateY(-50%); }
.ck-viewer__volgende { right: 8px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .ck-viewer { padding: 56px 8px 72px; }
  .ck-viewer__vorige, .ck-viewer__volgende { top: auto; bottom: 12px; transform: none; }
  .ck-viewer__vorige { left: calc(50% - 56px); }
  .ck-viewer__volgende { right: calc(50% - 56px); }
}
body.ck-viewer-open { overflow: hidden; }

/* Fotogalerij in pagina-inhoud: foto's naast elkaar in een raster */
.ck-inhoud .ck-galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 14px 0; }
.ck-inhoud .ck-galerij a { display: block; }
.ck-inhoud .ck-galerij img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0; transition: opacity .15s; }
.ck-inhoud .ck-galerij a:hover img { opacity: .85; }
.ck-inhoud .ck-galerij a:focus-visible { outline: 3px solid #d0ff70; outline-offset: 2px; }
@media (max-width: 480px) { .ck-inhoud .ck-galerij { grid-template-columns: repeat(3, 1fr); gap: 6px; } }

/* ---------------------------------------------------------------
 * Contactformulier (brede balk onder adres en kaart)
 * ------------------------------------------------------------- */
.ck-formulier { margin-top: 18px; }
.ck-formulier h2 { margin-top: 0; }
.ck-form__velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.ck-form__veld--breed { grid-column: 1 / -1; }
.ck-form__veld label { display: block; margin-bottom: 4px; font-weight: 600; }
.ck-form__veld label span { color: #cef192; }
.ck-form input[type=text], .ck-form input[type=tel], .ck-form input[type=email], .ck-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: #222;
  background: #fff; border: 2px solid #c9c9c9; border-radius: 4px; padding: 8px 10px;
}
.ck-form textarea { resize: vertical; min-height: 130px; }
.ck-form input:focus, .ck-form textarea:focus { outline: 3px solid #d0ff70; outline-offset: 1px; border-color: #8cb93e; }
.ck-form__veld.is-fout input, .ck-form__veld.is-fout textarea { border-color: #e0584b; }
.ck-form__fout { margin: 4px 0 0; color: #ffd2cc; font-size: 14px; }
.ck-form__voet { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.ck-form__verplicht { font-size: 14px; opacity: .85; }
.ck-form button[disabled] { opacity: .6; cursor: progress; }
.ck-form__privacy { font-size: 13px; opacity: .85; margin-top: 10px; }
.ck-form__dev { font-size: 13px; background: rgba(255, 220, 120, .15); border-left: 4px solid #e8c14c; padding: 6px 10px; }
.ck-form .cf-turnstile { margin-top: 14px; }
.ck-form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ck-melding { border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; }
.ck-melding:focus { outline: 3px solid #d0ff70; }
.ck-melding--ok { background: rgba(154, 194, 86, .25); border-left: 5px solid #9ac256; }
.ck-melding--fout { background: rgba(224, 88, 75, .18); border-left: 5px solid #e0584b; }
.ck-melding p { margin: 0 0 4px; }
.ck-melding ul { margin: 4px 0 0; }
@media (max-width: 600px) { .ck-form__velden { grid-template-columns: 1fr; } .ck-form__voet { justify-content: space-between; } }